From 2c5421de469f5bd694ff99e5bbc31b64cd1302b0 Mon Sep 17 00:00:00 2001 From: Ramon Date: Sun, 24 Nov 2024 18:45:17 +1100 Subject: [PATCH 001/384] Style panel: use correct revisions count (#67180) * For the styles panel, send the correct recordCount via optional prop to the footer component. This allows us to remove the globalstyle record selector. * Implement feedback Co-authored-by: ramonjd Co-authored-by: afercia --- .../index.js | 18 +++++++++++--- .../index.js | 24 +++++++------------ 2 files changed, 23 insertions(+), 19 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-details-footer/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-details-footer/index.js index 3dec3f0a7b2eb5..51833443d8d85c 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-details-footer/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-details-footer/index.js @@ -23,6 +23,7 @@ import SidebarNavigationItem from '../sidebar-navigation-item'; export default function SidebarNavigationScreenDetailsFooter( { record, + revisionsCount, ...otherProps } ) { /* @@ -34,9 +35,20 @@ export default function SidebarNavigationScreenDetailsFooter( { const hrefProps = {}; const lastRevisionId = record?._links?.[ 'predecessor-version' ]?.[ 0 ]?.id ?? null; - const revisionsCount = - record?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0; - // Enable the revisions link if there is a last revision and there are more than one revisions. + + // Use incoming prop first, then the record's version history, if available. + revisionsCount = + revisionsCount || + record?._links?.[ 'version-history' ]?.[ 0 ]?.count || + 0; + + /* + * Enable the revisions link if there is a last revision and there is more than one revision. + * This link is used for theme assets, e.g., templates, which have no database record until they're edited. + * For these files there's only a "revision" after they're edited twice, + * which means the revision.php page won't display a proper diff. + * See: https://github.com/WordPress/gutenberg/issues/49164. + */ if ( lastRevisionId && revisionsCount > 1 ) { hrefProps.href = addQueryArgs( 'revision.php', { revision: record?._links[ 'predecessor-version' ][ 0 ].id, diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js index 3dc93ff4d4df63..772b15aec2a294 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js @@ -48,24 +48,15 @@ export function SidebarNavigationItemGlobalStyles( props ) { export default function SidebarNavigationScreenGlobalStyles() { const history = useHistory(); const { params } = useLocation(); - const { revisions, isLoading: isLoadingRevisions } = - useGlobalStylesRevisions(); + const { + revisions, + isLoading: isLoadingRevisions, + revisionsCount, + } = useGlobalStylesRevisions(); const { openGeneralSidebar } = useDispatch( editSiteStore ); const { setEditorCanvasContainerView } = unlock( useDispatch( editSiteStore ) ); - const { revisionsCount } = useSelect( ( select ) => { - const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } = - select( coreStore ); - const globalStylesId = __experimentalGetCurrentGlobalStylesId(); - const globalStyles = globalStylesId - ? getEntityRecord( 'root', 'globalStyles', globalStylesId ) - : undefined; - return { - revisionsCount: - globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0, - }; - }, [] ); const { set: setPreference } = useDispatch( preferencesStore ); const openGlobalStyles = useCallback( async () => { @@ -95,10 +86,10 @@ export default function SidebarNavigationScreenGlobalStyles() { }, [ openGlobalStyles, setEditorCanvasContainerView ] ); // If there are no revisions, do not render a footer. - const hasRevisions = revisionsCount > 0; const modifiedDateTime = revisions?.[ 0 ]?.modified; const shouldShowGlobalStylesFooter = - hasRevisions && ! isLoadingRevisions && modifiedDateTime; + revisionsCount > 0 && ! isLoadingRevisions && modifiedDateTime; + return ( <> ) From 5513d7aecf085a7858cae0492acf213d65a436f6 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 25 Nov 2024 13:28:01 +1000 Subject: [PATCH 002/384] Block Supports: Extend stabilization to common experimental block support flags (#67018) Co-authored-by: aaronrobertshaw Co-authored-by: tellthemachines Co-authored-by: ramonjd --- backport-changelog/6.8/7069.md | 1 + docs/explanations/architecture/styles.md | 16 +- lib/compat/wordpress-6.8/blocks.php | 139 +++--- packages/block-editor/src/hooks/border.js | 10 +- packages/block-editor/src/hooks/color.js | 2 +- packages/block-editor/src/hooks/dimensions.js | 4 +- packages/block-editor/src/hooks/style.js | 18 +- packages/block-editor/src/hooks/test/style.js | 3 +- packages/block-editor/src/hooks/typography.js | 2 +- packages/block-editor/src/hooks/utils.js | 2 +- packages/blocks/src/api/constants.js | 12 +- .../blocks/src/store/process-block-type.js | 192 ++++++--- .../src/store/test/process-block-type.js | 395 ++++++++++-------- .../components/global-styles/screen-block.js | 5 +- packages/server-side-render/README.md | 2 +- phpunit/block-supports/border-test.php | 173 +++++++- 16 files changed, 638 insertions(+), 338 deletions(-) diff --git a/backport-changelog/6.8/7069.md b/backport-changelog/6.8/7069.md index 8b4ad69db02e75..69edbde58902d1 100644 --- a/backport-changelog/6.8/7069.md +++ b/backport-changelog/6.8/7069.md @@ -2,3 +2,4 @@ https://github.com/WordPress/wordpress-develop/pull/7069 * https://github.com/WordPress/gutenberg/pull/63401 * https://github.com/WordPress/gutenberg/pull/66918 +* https://github.com/WordPress/gutenberg/pull/67018 diff --git a/docs/explanations/architecture/styles.md b/docs/explanations/architecture/styles.md index 68f09f04d21d32..5f5e73d1372f7b 100644 --- a/docs/explanations/architecture/styles.md +++ b/docs/explanations/architecture/styles.md @@ -37,8 +37,10 @@ The user may change the state of this block by applying different styles: a text After some user modifications to the block, the initial markup may become something like this: ```html -

+

``` This is what we refer to as "user-provided block styles", also know as "local styles" or "serialized styles". Essentially, each tool (font size, color, etc) ends up adding some classes and/or inline styles to the block markup. The CSS styling for these classes is part of the block, global, or theme stylesheets. @@ -123,7 +125,7 @@ The block supports API only serializes the font size value to the wrapper, resul This is an active area of work you can follow [in the tracking issue](https://github.com/WordPress/gutenberg/issues/38167). The linked proposal is exploring a different way to serialize the user changes: instead of each block support serializing its own data (for example, classes such as `has-small-font-size`, `has-green-color`) the idea is the block would get a single class instead (for example, `wp-style-UUID`) and the CSS styling for that class will be generated in the server by WordPress. -While work continues in that proposal, there's an escape hatch, an experimental option block authors can use. Any block support can skip the serialization to HTML markup by using `__experimentalSkipSerialization`. For example: +While work continues in that proposal, there's an escape hatch, an experimental option block authors can use. Any block support can skip the serialization to HTML markup by using `skipSerialization`. For example: ```json { @@ -132,7 +134,7 @@ While work continues in that proposal, there's an escape hatch, an experimental "supports": { "typography": { "fontSize": true, - "__experimentalSkipSerialization": true + "skipSerialization": true } } } @@ -140,7 +142,7 @@ While work continues in that proposal, there's an escape hatch, an experimental This means that the typography block support will do all of the things (create a UI control, bind the block attribute to the control, etc) except serializing the user values into the HTML markup. The classes and inline styles will not be automatically applied to the wrapper and it is the block author's responsibility to implement this in the `edit`, `save`, and `render_callback` functions. See [this issue](https://github.com/WordPress/gutenberg/issues/28913) for examples of how it was done for some blocks provided by WordPress. -Note that, if `__experimentalSkipSerialization` is enabled for a group (typography, color, spacing) it affects _all_ block supports within this group. In the example above _all_ the properties within the `typography` group will be affected (e.g. `fontSize`, `lineHeight`, `fontFamily` .etc). +Note that, if `skipSerialization` is enabled for a group (typography, color, spacing) it affects _all_ block supports within this group. In the example above _all_ the properties within the `typography` group will be affected (e.g. `fontSize`, `lineHeight`, `fontFamily` .etc). To enable for a _single_ property only, you may use an array to declare which properties are to be skipped. In the example below, only `fontSize` will skip serialization, leaving other items within the `typography` group (e.g. `lineHeight`, `fontFamily` .etc) unaffected. @@ -152,7 +154,7 @@ To enable for a _single_ property only, you may use an array to declare which pr "typography": { "fontSize": true, "lineHeight": true, - "__experimentalSkipSerialization": [ "fontSize" ] + "skipSerialization": [ "fontSize" ] } } } @@ -473,7 +475,7 @@ If blocks do this, they need to be registered in the server using the `block.jso Every chunk of styles can only use a single selector. -This is particularly relevant if the block is using `__experimentalSkipSerialization` to serialize the different style properties to different nodes other than the wrapper. See "Current limitations of blocks supports" for more. +This is particularly relevant if the block is using `skipSerialization` to serialize the different style properties to different nodes other than the wrapper. See "Current limitations of blocks supports" for more. #### 3. **Only a single property per block** diff --git a/lib/compat/wordpress-6.8/blocks.php b/lib/compat/wordpress-6.8/blocks.php index 0b7031403b1918..4d4bdee2bb393b 100644 --- a/lib/compat/wordpress-6.8/blocks.php +++ b/lib/compat/wordpress-6.8/blocks.php @@ -20,8 +20,13 @@ function gutenberg_stabilize_experimental_block_supports( $args ) { return $args; } - $experimental_to_stable_keys = array( - 'typography' => array( + $experimental_supports_map = array( '__experimentalBorder' => 'border' ); + $common_experimental_properties = array( + '__experimentalDefaultControls' => 'defaultControls', + '__experimentalSkipSerialization' => 'skipSerialization', + ); + $experimental_support_properties = array( + 'typography' => array( '__experimentalFontFamily' => 'fontFamily', '__experimentalFontStyle' => 'fontStyle', '__experimentalFontWeight' => 'fontWeight', @@ -29,68 +34,108 @@ function gutenberg_stabilize_experimental_block_supports( $args ) { '__experimentalTextDecoration' => 'textDecoration', '__experimentalTextTransform' => 'textTransform', ), - '__experimentalBorder' => 'border', ); + $done = array(); $updated_supports = array(); foreach ( $args['supports'] as $support => $config ) { - // Add the support's config as is when it's not in need of stabilization. - if ( empty( $experimental_to_stable_keys[ $support ] ) ) { + /* + * If this support config has already been stabilized, skip it. + * A stable support key occurring after an experimental key, gets + * stabilized then so that the two configs can be merged effectively. + */ + if ( isset( $done[ $support ] ) ) { + continue; + } + + $stable_support_key = $experimental_supports_map[ $support ] ?? $support; + + /* + * Use the support's config as is when it's not in need of stabilization. + * + * A support does not need stabilization if: + * - The support key doesn't need stabilization AND + * - Either: + * - The config isn't an array, so can't have experimental properties OR + * - The config is an array but has no experimental properties to stabilize. + */ + if ( $support === $stable_support_key && + ( ! is_array( $config ) || + ( ! isset( $experimental_support_properties[ $stable_support_key ] ) && + empty( array_intersect_key( $common_experimental_properties, $config ) ) + ) + ) + ) { $updated_supports[ $support ] = $config; continue; } - // Stabilize the support's key if needed e.g. __experimentalBorder => border. - if ( is_string( $experimental_to_stable_keys[ $support ] ) ) { - $stabilized_key = $experimental_to_stable_keys[ $support ]; + $stabilize_config = function ( $unstable_config, $stable_support_key ) use ( $experimental_support_properties, $common_experimental_properties ) { + $stable_config = array(); + foreach ( $unstable_config as $key => $value ) { + // Get stable key from support-specific map, common properties map, or keep original. + $stable_key = $experimental_support_properties[ $stable_support_key ][ $key ] ?? + $common_experimental_properties[ $key ] ?? + $key; + + $stable_config[ $stable_key ] = $value; - // If there is no stabilized key present, use the experimental config as is. - if ( ! array_key_exists( $stabilized_key, $args['supports'] ) ) { - $updated_supports[ $stabilized_key ] = $config; - continue; + /* + * The `__experimentalSkipSerialization` key needs to be kept until + * WP 6.8 becomes the minimum supported version. This is due to the + * core `wp_should_skip_block_supports_serialization` function only + * checking for `__experimentalSkipSerialization` in earlier versions. + */ + if ( '__experimentalSkipSerialization' === $key || 'skipSerialization' === $key ) { + $stable_config['__experimentalSkipSerialization'] = $value; + } } + return $stable_config; + }; - /* - * Determine the order of keys, so the last defined can be preferred. - * - * The reason for preferring the last defined key is that after filters - * are applied, the last inserted key is likely the most up-to-date value. - * We cannot determine with certainty which value was "last modified" so - * the insertion order is the best guess. The extreme edge case of multiple - * filters tweaking the same support property will become less over time as - * extenders migrate existing blocks and plugins to stable keys. - */ + // Stabilize the config value. + $stable_config = is_array( $config ) ? $stabilize_config( $config, $stable_support_key ) : $config; + + /* + * If a plugin overrides the support config with the `register_block_type_args` + * filter, both experimental and stable configs may be present. In that case, + * use the order keys are defined in to determine the final value. + * - If config is an array, merge the arrays in their order of definition. + * - If config is not an array, use the value defined last. + * + * The reason for preferring the last defined key is that after filters + * are applied, the last inserted key is likely the most up-to-date value. + * We cannot determine with certainty which value was "last modified" so + * the insertion order is the best guess. The extreme edge case of multiple + * filters tweaking the same support property will become less over time as + * extenders migrate existing blocks and plugins to stable keys. + */ + if ( $support !== $stable_support_key && isset( $args['supports'][ $stable_support_key ] ) ) { $key_positions = array_flip( array_keys( $args['supports'] ) ); - $experimental_index = $key_positions[ $support ] ?? -1; - $stabilized_index = $key_positions[ $stabilized_key ] ?? -1; - $experimental_first = $experimental_index < $stabilized_index; + $experimental_first = + ( $key_positions[ $support ] ?? PHP_INT_MAX ) < + ( $key_positions[ $stable_support_key ] ?? PHP_INT_MAX ); - // Update support config, prefer the last defined value. - if ( is_array( $config ) ) { - $updated_supports[ $stabilized_key ] = $experimental_first - ? array_merge( $config, $args['supports'][ $stabilized_key ] ) - : array_merge( $args['supports'][ $stabilized_key ], $config ); + if ( is_array( $args['supports'][ $stable_support_key ] ) ) { + /* + * To merge the alternative support config effectively, it also needs to be + * stabilized before merging to keep stabilized and experimental flags in + * sync. + */ + $args['supports'][ $stable_support_key ] = $stabilize_config( $args['supports'][ $stable_support_key ], $stable_support_key ); + $stable_config = $experimental_first + ? array_merge( $stable_config, $args['supports'][ $stable_support_key ] ) + : array_merge( $args['supports'][ $stable_support_key ], $stable_config ); + // Prevents reprocessing this support as it was merged above. + $done[ $stable_support_key ] = true; } else { - $updated_supports[ $stabilized_key ] = $experimental_first - ? $args['supports'][ $stabilized_key ] - : $config; + $stable_config = $experimental_first + ? $args['supports'][ $stable_support_key ] + : $stable_config; } - - continue; } - // Stabilize individual support feature keys e.g. __experimentalFontFamily => fontFamily. - if ( is_array( $experimental_to_stable_keys[ $support ] ) ) { - $stable_support_config = array(); - foreach ( $config as $key => $value ) { - if ( array_key_exists( $key, $experimental_to_stable_keys[ $support ] ) ) { - $stable_support_config[ $experimental_to_stable_keys[ $support ][ $key ] ] = $value; - } else { - $stable_support_config[ $key ] = $value; - } - } - $updated_supports[ $support ] = $stable_support_config; - } + $updated_supports[ $stable_support_key ] = $stable_config; } $args['supports'] = $updated_supports; diff --git a/packages/block-editor/src/hooks/border.js b/packages/block-editor/src/hooks/border.js index 4500444685befa..14b3dbf7669b3a 100644 --- a/packages/block-editor/src/hooks/border.js +++ b/packages/block-editor/src/hooks/border.js @@ -161,14 +161,8 @@ export function BorderPanel( { clientId, name, setAttributes, settings } ) { } const defaultControls = { - ...getBlockSupport( name, [ - BORDER_SUPPORT_KEY, - '__experimentalDefaultControls', - ] ), - ...getBlockSupport( name, [ - SHADOW_SUPPORT_KEY, - '__experimentalDefaultControls', - ] ), + ...getBlockSupport( name, [ BORDER_SUPPORT_KEY, 'defaultControls' ] ), + ...getBlockSupport( name, [ SHADOW_SUPPORT_KEY, 'defaultControls' ] ), }; return ( diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js index ef8984c9367853..2fecc10a311984 100644 --- a/packages/block-editor/src/hooks/color.js +++ b/packages/block-editor/src/hooks/color.js @@ -290,7 +290,7 @@ export function ColorEdit( { clientId, name, setAttributes, settings } ) { const defaultControls = getBlockSupport( name, [ COLOR_SUPPORT_KEY, - '__experimentalDefaultControls', + 'defaultControls', ] ); const enableContrastChecking = diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js index ffa4048b7740e3..c98cc34e4272c8 100644 --- a/packages/block-editor/src/hooks/dimensions.js +++ b/packages/block-editor/src/hooks/dimensions.js @@ -88,11 +88,11 @@ export function DimensionsPanel( { clientId, name, setAttributes, settings } ) { const defaultDimensionsControls = getBlockSupport( name, [ DIMENSIONS_SUPPORT_KEY, - '__experimentalDefaultControls', + 'defaultControls', ] ); const defaultSpacingControls = getBlockSupport( name, [ SPACING_SUPPORT_KEY, - '__experimentalDefaultControls', + 'defaultControls', ] ); const defaultControls = { ...defaultDimensionsControls, diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js index 998d13cfd22247..db2acd01665b60 100644 --- a/packages/block-editor/src/hooks/style.js +++ b/packages/block-editor/src/hooks/style.js @@ -98,22 +98,16 @@ function addAttribute( settings ) { * @type {Record} */ const skipSerializationPathsEdit = { - [ `${ BORDER_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [ 'border' ], - [ `${ COLOR_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [ - COLOR_SUPPORT_KEY, - ], - [ `${ TYPOGRAPHY_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [ + [ `${ BORDER_SUPPORT_KEY }.skipSerialization` ]: [ 'border' ], + [ `${ COLOR_SUPPORT_KEY }.skipSerialization` ]: [ COLOR_SUPPORT_KEY ], + [ `${ TYPOGRAPHY_SUPPORT_KEY }.skipSerialization` ]: [ TYPOGRAPHY_SUPPORT_KEY, ], - [ `${ DIMENSIONS_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [ + [ `${ DIMENSIONS_SUPPORT_KEY }.skipSerialization` ]: [ DIMENSIONS_SUPPORT_KEY, ], - [ `${ SPACING_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [ - SPACING_SUPPORT_KEY, - ], - [ `${ SHADOW_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [ - SHADOW_SUPPORT_KEY, - ], + [ `${ SPACING_SUPPORT_KEY }.skipSerialization` ]: [ SPACING_SUPPORT_KEY ], + [ `${ SHADOW_SUPPORT_KEY }.skipSerialization` ]: [ SHADOW_SUPPORT_KEY ], }; /** diff --git a/packages/block-editor/src/hooks/test/style.js b/packages/block-editor/src/hooks/test/style.js index 2cfe299b8c8d91..40e7169194b82e 100644 --- a/packages/block-editor/src/hooks/test/style.js +++ b/packages/block-editor/src/hooks/test/style.js @@ -133,8 +133,7 @@ describe( 'addSaveProps', () => { const applySkipSerialization = ( features ) => { const updatedSettings = { ...blockSettings }; Object.keys( features ).forEach( ( key ) => { - updatedSettings.supports[ key ].__experimentalSkipSerialization = - features[ key ]; + updatedSettings.supports[ key ].skipSerialization = features[ key ]; } ); return updatedSettings; }; diff --git a/packages/block-editor/src/hooks/typography.js b/packages/block-editor/src/hooks/typography.js index ab9a464fe5efbc..160894eac4e610 100644 --- a/packages/block-editor/src/hooks/typography.js +++ b/packages/block-editor/src/hooks/typography.js @@ -133,7 +133,7 @@ export function TypographyPanel( { clientId, name, setAttributes, settings } ) { const defaultControls = getBlockSupport( name, [ TYPOGRAPHY_SUPPORT_KEY, - '__experimentalDefaultControls', + 'defaultControls', ] ); return ( diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js index 4334f70b9d13bf..ac6e55efe4d3bd 100644 --- a/packages/block-editor/src/hooks/utils.js +++ b/packages/block-editor/src/hooks/utils.js @@ -124,7 +124,7 @@ export function shouldSkipSerialization( feature ) { const support = getBlockSupport( blockNameOrType, featureSet ); - const skipSerialization = support?.__experimentalSkipSerialization; + const skipSerialization = support?.skipSerialization; if ( Array.isArray( skipSerialization ) ) { return skipSerialization.includes( feature ); diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js index 8ea32d591adb32..aaf6558c47bada 100644 --- a/packages/blocks/src/api/constants.js +++ b/packages/blocks/src/api/constants.js @@ -298,7 +298,16 @@ export const __EXPERIMENTAL_PATHS_WITH_OVERRIDE = { 'spacing.spacingSizes': true, }; -export const EXPERIMENTAL_TO_STABLE_KEYS = { +export const EXPERIMENTAL_SUPPORTS_MAP = { + __experimentalBorder: 'border', +}; + +export const COMMON_EXPERIMENTAL_PROPERTIES = { + __experimentalDefaultControls: 'defaultControls', + __experimentalSkipSerialization: 'skipSerialization', +}; + +export const EXPERIMENTAL_SUPPORT_PROPERTIES = { typography: { __experimentalFontFamily: 'fontFamily', __experimentalFontStyle: 'fontStyle', @@ -307,5 +316,4 @@ export const EXPERIMENTAL_TO_STABLE_KEYS = { __experimentalTextDecoration: 'textDecoration', __experimentalTextTransform: 'textTransform', }, - __experimentalBorder: 'border', }; diff --git a/packages/blocks/src/store/process-block-type.js b/packages/blocks/src/store/process-block-type.js index bd7e5ab43800f0..0ca28a3c3e2070 100644 --- a/packages/blocks/src/store/process-block-type.js +++ b/packages/blocks/src/store/process-block-type.js @@ -18,7 +18,9 @@ import { isValidIcon, normalizeIconObject, omit } from '../api/utils'; import { BLOCK_ICON_DEFAULT, DEPRECATED_ENTRY_KEYS, - EXPERIMENTAL_TO_STABLE_KEYS, + EXPERIMENTAL_SUPPORTS_MAP, + COMMON_EXPERIMENTAL_PROPERTIES, + EXPERIMENTAL_SUPPORT_PROPERTIES, } from '../api/constants'; /** @typedef {import('../api/registration').WPBlockType} WPBlockType */ @@ -66,81 +68,149 @@ function mergeBlockVariations( return result; } +/** + * Stabilizes a block support configuration by converting experimental properties + * to their stable equivalents. + * + * @param {Object} unstableConfig The support configuration to stabilize. + * @param {string} stableSupportKey The stable support key for looking up properties. + * @return {Object} The stabilized support configuration. + */ +function stabilizeSupportConfig( unstableConfig, stableSupportKey ) { + const stableConfig = {}; + for ( const [ key, value ] of Object.entries( unstableConfig ) ) { + // Get stable key from support-specific map, common properties map, or keep original. + const stableKey = + EXPERIMENTAL_SUPPORT_PROPERTIES[ stableSupportKey ]?.[ key ] ?? + COMMON_EXPERIMENTAL_PROPERTIES[ key ] ?? + key; + + stableConfig[ stableKey ] = value; + + /* + * The `__experimentalSkipSerialization` key needs to be kept until + * WP 6.8 becomes the minimum supported version. This is due to the + * core `wp_should_skip_block_supports_serialization` function only + * checking for `__experimentalSkipSerialization` in earlier versions. + */ + if ( + key === '__experimentalSkipSerialization' || + key === 'skipSerialization' + ) { + stableConfig.__experimentalSkipSerialization = value; + } + } + return stableConfig; +} + +/** + * Stabilizes experimental block supports by converting experimental keys and properties + * to their stable equivalents. + * + * @param {Object|undefined} rawSupports The block supports configuration to stabilize. + * @return {Object|undefined} The stabilized block supports configuration. + */ function stabilizeSupports( rawSupports ) { if ( ! rawSupports ) { return rawSupports; } - // Create a new object to avoid mutating the original. This ensures that - // custom block plugins that rely on immutable supports are not affected. - // See: https://github.com/WordPress/gutenberg/pull/66849#issuecomment-2463614281 + /* + * Create a new object to avoid mutating the original. This ensures that + * custom block plugins that rely on immutable supports are not affected. + * See: https://github.com/WordPress/gutenberg/pull/66849#issuecomment-2463614281 + */ const newSupports = {}; + const done = {}; for ( const [ support, config ] of Object.entries( rawSupports ) ) { - // Add the support's config as is when it's not in need of stabilization. - if ( ! EXPERIMENTAL_TO_STABLE_KEYS[ support ] ) { - newSupports[ support ] = config; + /* + * If this support config has already been stabilized, skip it. + * A stable support key occurring after an experimental key, gets + * stabilized then so that the two configs can be merged effectively. + */ + if ( done[ support ] ) { continue; } - // Stabilize the support's key if needed e.g. __experimentalBorder => border. - if ( typeof EXPERIMENTAL_TO_STABLE_KEYS[ support ] === 'string' ) { - const stabilizedKey = EXPERIMENTAL_TO_STABLE_KEYS[ support ]; - - // If there is no stabilized key present, use the experimental config as is. - if ( ! Object.hasOwn( rawSupports, stabilizedKey ) ) { - newSupports[ stabilizedKey ] = config; - continue; - } - - /* - * Determine the order of keys, so the last defined can be preferred. - * - * The reason for preferring the last defined key is that after filters - * are applied, the last inserted key is likely the most up-to-date value. - * We cannot determine with certainty which value was "last modified" so - * the insertion order is the best guess. The extreme edge case of multiple - * filters tweaking the same support property will become less over time as - * extenders migrate existing blocks and plugins to stable keys. - */ - const entries = Object.entries( rawSupports ); - const experimentalIndex = entries.findIndex( - ( [ key ] ) => key === support - ); - const stabilizedIndex = entries.findIndex( - ( [ key ] ) => key === stabilizedKey - ); - - // Update support config, prefer the last defined value. - if ( typeof config === 'object' && config !== null ) { - newSupports[ stabilizedKey ] = - experimentalIndex < stabilizedIndex - ? { ...config, ...rawSupports[ stabilizedKey ] } - : { ...rawSupports[ stabilizedKey ], ...config }; - } else { - newSupports[ stabilizedKey ] = - experimentalIndex < stabilizedIndex - ? rawSupports[ stabilizedKey ] - : config; - } + const stableSupportKey = + EXPERIMENTAL_SUPPORTS_MAP[ support ] ?? support; + + /* + * Use the support's config as is when it's not in need of stabilization. + * A support does not need stabilization if: + * - The support key doesn't need stabilization AND + * - Either: + * - The config isn't an object, so can't have experimental properties OR + * - The config is an object but has no experimental properties to stabilize. + */ + if ( + support === stableSupportKey && + ( ! isPlainObject( config ) || + ( ! EXPERIMENTAL_SUPPORT_PROPERTIES[ stableSupportKey ] && + Object.keys( config ).every( + ( key ) => ! COMMON_EXPERIMENTAL_PROPERTIES[ key ] + ) ) ) + ) { + newSupports[ support ] = config; continue; } - // Stabilize individual support feature keys - // e.g. __experimentalFontFamily => fontFamily. - const featureStabilizationRequired = - typeof EXPERIMENTAL_TO_STABLE_KEYS[ support ] === 'object' && - EXPERIMENTAL_TO_STABLE_KEYS[ support ] !== null; - const hasConfig = typeof config === 'object' && config !== null; - - if ( featureStabilizationRequired && hasConfig ) { - const stableConfig = {}; - for ( const [ key, value ] of Object.entries( config ) ) { - const stableKey = - EXPERIMENTAL_TO_STABLE_KEYS[ support ][ key ] || key; - stableConfig[ stableKey ] = value; + // Stabilize the config value. + const stableConfig = isPlainObject( config ) + ? stabilizeSupportConfig( config, stableSupportKey ) + : config; + + /* + * If a plugin overrides the support config with the `blocks.registerBlockType` + * filter, both experimental and stable configs may be present. In that case, + * use the order keys are defined in to determine the final value. + * - If config is an array, merge the arrays in their order of definition. + * - If config is not an array, use the value defined last. + * + * The reason for preferring the last defined key is that after filters + * are applied, the last inserted key is likely the most up-to-date value. + * We cannot determine with certainty which value was "last modified" so + * the insertion order is the best guess. The extreme edge case of multiple + * filters tweaking the same support property will become less over time as + * extenders migrate existing blocks and plugins to stable keys. + */ + if ( + support !== stableSupportKey && + Object.hasOwn( rawSupports, stableSupportKey ) + ) { + const keyPositions = Object.keys( rawSupports ).reduce( + ( acc, key, index ) => { + acc[ key ] = index; + return acc; + }, + {} + ); + const experimentalFirst = + ( keyPositions[ support ] ?? Number.MAX_VALUE ) < + ( keyPositions[ stableSupportKey ] ?? Number.MAX_VALUE ); + + if ( isPlainObject( rawSupports[ stableSupportKey ] ) ) { + /* + * To merge the alternative support config effectively, it also needs to be + * stabilized before merging to keep stabilized and experimental flags in sync. + */ + rawSupports[ stableSupportKey ] = stabilizeSupportConfig( + rawSupports[ stableSupportKey ], + stableSupportKey + ); + newSupports[ stableSupportKey ] = experimentalFirst + ? { ...stableConfig, ...rawSupports[ stableSupportKey ] } + : { ...rawSupports[ stableSupportKey ], ...stableConfig }; + // Prevents reprocessing this support as it was merged above. + done[ stableSupportKey ] = true; + } else { + newSupports[ stableSupportKey ] = experimentalFirst + ? rawSupports[ stableSupportKey ] + : stableConfig; } - newSupports[ support ] = stableConfig; + } else { + newSupports[ stableSupportKey ] = stableConfig; } } diff --git a/packages/blocks/src/store/test/process-block-type.js b/packages/blocks/src/store/test/process-block-type.js index c7f487a95301d0..82b2c1ad3080d7 100644 --- a/packages/blocks/src/store/test/process-block-type.js +++ b/packages/blocks/src/store/test/process-block-type.js @@ -26,7 +26,7 @@ describe( 'processBlockType', () => { removeFilter( 'blocks.registerBlockType', 'test/filterSupports' ); } ); - it( 'should return the block type with stabilized supports', () => { + it( 'should stabilize experimental block supports', () => { const blockSettings = { ...baseBlockSettings, supports: { @@ -66,7 +66,7 @@ describe( 'processBlockType', () => { blockSettings )( { select } ); - expect( processedBlockType.supports ).toEqual( { + expect( processedBlockType.supports ).toMatchObject( { typography: { fontSize: true, lineHeight: true, @@ -77,7 +77,7 @@ describe( 'processBlockType', () => { textTransform: true, textDecoration: true, __experimentalWritingMode: true, - __experimentalDefaultControls: { + defaultControls: { fontSize: true, fontAppearance: true, textTransform: true, @@ -88,79 +88,7 @@ describe( 'processBlockType', () => { radius: true, style: true, width: true, - __experimentalDefaultControls: { - color: true, - radius: true, - style: true, - width: true, - }, - }, - } ); - } ); - - it( 'should return the block type with stable supports', () => { - const blockSettings = { - ...baseBlockSettings, - supports: { - typography: { - fontSize: true, - lineHeight: true, - fontFamily: true, - fontStyle: true, - fontWeight: true, - letterSpacing: true, - textTransform: true, - textDecoration: true, - __experimentalWritingMode: true, - __experimentalDefaultControls: { - fontSize: true, - fontAppearance: true, - textTransform: true, - }, - }, - __experimentalBorder: { - color: true, - radius: true, - style: true, - width: true, - __experimentalDefaultControls: { - color: true, - radius: true, - style: true, - width: true, - }, - }, - }, - }; - - const processedBlockType = processBlockType( - 'test/block', - blockSettings - )( { select } ); - - expect( processedBlockType.supports ).toEqual( { - typography: { - fontSize: true, - lineHeight: true, - fontFamily: true, - fontStyle: true, - fontWeight: true, - letterSpacing: true, - textTransform: true, - textDecoration: true, - __experimentalWritingMode: true, - __experimentalDefaultControls: { - fontSize: true, - fontAppearance: true, - textTransform: true, - }, - }, - border: { - color: true, - radius: true, - style: true, - width: true, - __experimentalDefaultControls: { + defaultControls: { color: true, radius: true, style: true, @@ -227,7 +155,7 @@ describe( 'processBlockType', () => { blockSettings )( { select } ); - expect( processedBlockType.supports ).toEqual( { + expect( processedBlockType.supports ).toMatchObject( { typography: { fontSize: true, lineHeight: true, @@ -238,7 +166,7 @@ describe( 'processBlockType', () => { textTransform: true, textDecoration: true, __experimentalWritingMode: true, - __experimentalDefaultControls: { + defaultControls: { fontSize: true, fontAppearance: true, textTransform: true, @@ -249,7 +177,7 @@ describe( 'processBlockType', () => { radius: false, style: true, width: true, - __experimentalDefaultControls: { + defaultControls: { color: true, radius: true, style: true, @@ -259,8 +187,8 @@ describe( 'processBlockType', () => { } ); } ); - it( 'should stabilize experimental supports within block deprecations', () => { - const blockSettings = { + describe( 'block deprecations', () => { + const deprecatedBlockSettings = { ...baseBlockSettings, supports: { typography: { @@ -321,145 +249,242 @@ describe( 'processBlockType', () => { ], }; - // Freeze the deprecated block object and its supports so that the original is not mutated. - // This ensures the test covers a regression where the original object was mutated. - // See: https://github.com/WordPress/gutenberg/pull/63401#discussion_r1832394335. - Object.freeze( blockSettings.deprecated[ 0 ] ); - Object.freeze( blockSettings.deprecated[ 0 ].supports ); + beforeEach( () => { + // Freeze the deprecated block object and its supports so that the original is not mutated. + Object.freeze( deprecatedBlockSettings.deprecated[ 0 ] ); + Object.freeze( deprecatedBlockSettings.deprecated[ 0 ].supports ); + } ); + + it( 'should stabilize experimental supports', () => { + const processedBlockType = processBlockType( + 'test/block', + deprecatedBlockSettings + )( { select } ); + + expect( processedBlockType.deprecated[ 0 ].supports ).toMatchObject( + { + typography: { + fontFamily: true, + fontStyle: true, + fontWeight: true, + letterSpacing: true, + textTransform: true, + textDecoration: true, + __experimentalWritingMode: true, + }, + border: { + color: true, + radius: true, + style: true, + width: true, + defaultControls: { + color: true, + radius: true, + style: true, + width: true, + }, + }, + } + ); + } ); + + it( 'should reapply transformations after supports are filtered', () => { + addFilter( + 'blocks.registerBlockType', + 'test/filterSupports', + ( settings, name ) => { + if ( + name === 'test/block' && + settings.supports.typography + ) { + settings.supports.typography.__experimentalFontFamily = false; + settings.supports.typography.__experimentalFontStyle = false; + settings.supports.typography.__experimentalFontWeight = false; + settings.supports.__experimentalBorder = { + radius: false, + }; + } + return settings; + } + ); + + const processedBlockType = processBlockType( + 'test/block', + deprecatedBlockSettings + )( { select } ); + + expect( processedBlockType.deprecated[ 0 ].supports ).toMatchObject( + { + typography: { + fontFamily: false, + fontStyle: false, + fontWeight: false, + letterSpacing: true, + textTransform: true, + textDecoration: true, + __experimentalWritingMode: true, + }, + border: { + color: true, + radius: false, + style: true, + width: true, + defaultControls: { + color: true, + radius: true, + style: true, + width: true, + }, + }, + } + ); + } ); + } ); + + it( 'should stabilize common experimental properties across all supports', () => { + const blockSettings = { + ...baseBlockSettings, + supports: { + typography: { + fontSize: true, + __experimentalDefaultControls: { + fontSize: true, + }, + __experimentalSkipSerialization: true, + }, + spacing: { + padding: true, + __experimentalDefaultControls: { + padding: true, + }, + __experimentalSkipSerialization: true, + }, + }, + }; const processedBlockType = processBlockType( 'test/block', blockSettings )( { select } ); - expect( processedBlockType.deprecated[ 0 ].supports ).toEqual( { + expect( processedBlockType.supports ).toMatchObject( { typography: { - fontFamily: true, - fontStyle: true, - fontWeight: true, - letterSpacing: true, - textTransform: true, - textDecoration: true, - __experimentalWritingMode: true, + fontSize: true, + defaultControls: { + fontSize: true, + }, + skipSerialization: true, + __experimentalSkipSerialization: true, }, - border: { - color: true, - radius: true, - style: true, - width: true, - __experimentalDefaultControls: { - color: true, - radius: true, - style: true, - width: true, + spacing: { + padding: true, + defaultControls: { + padding: true, }, + skipSerialization: true, + __experimentalSkipSerialization: true, }, } ); } ); - it( 'should reapply transformations after supports are filtered within block deprecations', () => { + it( 'should merge experimental and stable keys in order of definition', () => { const blockSettings = { ...baseBlockSettings, supports: { - typography: { - fontSize: true, - lineHeight: true, - fontFamily: true, - fontStyle: true, - fontWeight: true, - letterSpacing: true, - textTransform: true, - textDecoration: true, - __experimentalWritingMode: true, - __experimentalDefaultControls: { - fontSize: true, - fontAppearance: true, - textTransform: true, - }, + __experimentalBorder: { + color: true, + radius: false, }, border: { - color: true, - radius: true, + color: false, style: true, - width: true, - __experimentalDefaultControls: { - color: true, - radius: true, - style: true, - width: true, - }, }, }, - deprecated: [ - { - supports: { - typography: { - __experimentalFontFamily: true, - __experimentalFontStyle: true, - __experimentalFontWeight: true, - __experimentalLetterSpacing: true, - __experimentalTextTransform: true, - __experimentalTextDecoration: true, - __experimentalWritingMode: true, - }, - __experimentalBorder: { - color: true, - radius: true, - style: true, - width: true, - __experimentalDefaultControls: { - color: true, - radius: true, - style: true, - width: true, - }, - }, - }, - }, - ], }; - addFilter( - 'blocks.registerBlockType', - 'test/filterSupports', - ( settings, name ) => { - if ( name === 'test/block' && settings.supports.typography ) { - settings.supports.typography.__experimentalFontFamily = false; - settings.supports.typography.__experimentalFontStyle = false; - settings.supports.typography.__experimentalFontWeight = false; - settings.supports.__experimentalBorder = { radius: false }; - } - return settings; - } - ); - const processedBlockType = processBlockType( 'test/block', blockSettings )( { select } ); - expect( processedBlockType.deprecated[ 0 ].supports ).toEqual( { - typography: { - fontFamily: false, - fontStyle: false, - fontWeight: false, - letterSpacing: true, - textTransform: true, - textDecoration: true, - __experimentalWritingMode: true, + expect( processedBlockType.supports ).toMatchObject( { + border: { + color: false, + radius: false, + style: true, }, + } ); + + const reversedSettings = { + ...baseBlockSettings, + supports: { + border: { + color: false, + style: true, + }, + __experimentalBorder: { + color: true, + radius: false, + }, + }, + }; + + const reversedProcessedType = processBlockType( + 'test/block', + reversedSettings + )( { select } ); + + expect( reversedProcessedType.supports ).toMatchObject( { border: { color: true, radius: false, style: true, - width: true, - __experimentalDefaultControls: { - color: true, - radius: true, - style: true, - width: true, + }, + } ); + } ); + + it( 'should handle non-object config values', () => { + const blockSettings = { + ...baseBlockSettings, + supports: { + __experimentalBorder: true, + border: false, + }, + }; + + const processedBlockType = processBlockType( + 'test/block', + blockSettings + )( { select } ); + + expect( processedBlockType.supports ).toMatchObject( { + border: false, + } ); + } ); + + it( 'should not modify supports that do not need stabilization', () => { + const blockSettings = { + ...baseBlockSettings, + supports: { + align: true, + spacing: { + padding: true, + margin: true, }, }, + }; + + const processedBlockType = processBlockType( + 'test/block', + blockSettings + )( { select } ); + + expect( processedBlockType.supports ).toMatchObject( { + align: true, + spacing: { + padding: true, + margin: true, + }, } ); } ); } ); diff --git a/packages/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js index 64f49574b6b03b..347d3cd1bc0a73 100644 --- a/packages/edit-site/src/components/global-styles/screen-block.js +++ b/packages/edit-site/src/components/global-styles/screen-block.js @@ -113,9 +113,8 @@ function ScreenBlock( { name, variation } ) { if ( settingsForBlockElement?.spacing?.blockGap && blockType?.supports?.spacing?.blockGap && - ( blockType?.supports?.spacing?.__experimentalSkipSerialization === - true || - blockType?.supports?.spacing?.__experimentalSkipSerialization?.some?.( + ( blockType?.supports?.spacing?.skipSerialization === true || + blockType?.supports?.spacing?.skipSerialization?.some?.( ( spacingType ) => spacingType === 'blockGap' ) ) ) { diff --git a/packages/server-side-render/README.md b/packages/server-side-render/README.md index ba6fae302ca0a8..ef7cd9bf0189c1 100644 --- a/packages/server-side-render/README.md +++ b/packages/server-side-render/README.md @@ -79,7 +79,7 @@ add_filter( 'rest_endpoints', 'add_rest_method'); ### skipBlockSupportAttributes -Remove attributes and style properties applied by the block supports. This prevents duplication of styles in the block wrapper and the `ServerSideRender` components. Even if certain features skip serialization to HTML markup by `__experimentalSkipSerialization`, all attributes and style properties are removed. +Remove attributes and style properties applied by the block supports. This prevents duplication of styles in the block wrapper and the `ServerSideRender` components. Even if certain features skip serialization to HTML markup by `skipSerialization`, all attributes and style properties are removed. - Type: `Boolean` - Required: No diff --git a/phpunit/block-supports/border-test.php b/phpunit/block-supports/border-test.php index 0c320f24ebe4f2..6ec43b369d9a2a 100644 --- a/phpunit/block-supports/border-test.php +++ b/phpunit/block-supports/border-test.php @@ -128,11 +128,11 @@ public function test_flat_border_with_skipped_serialization() { 'test/flat-border-with-skipped-serialization', array( '__experimentalBorder' => array( - 'color' => true, - 'radius' => true, - 'width' => true, - 'style' => true, - '__experimentalSkipSerialization' => true, + 'color' => true, + 'radius' => true, + 'width' => true, + 'style' => true, + 'skipSerialization' => true, ), ) ); @@ -567,4 +567,167 @@ public function test_should_apply_stabilized_border_supports() { $this->assertSame( $expected, $actual ); } + + /** + * Tests that experimental border support configuration gets stabilized correctly. + */ + public function test_should_stabilize_border_supports() { + $block_type_args = array( + 'supports' => array( + '__experimentalBorder' => array( + 'color' => true, + 'radius' => true, + 'style' => true, + 'width' => true, + '__experimentalSkipSerialization' => true, + '__experimentalDefaultControls' => array( + 'color' => true, + 'radius' => true, + 'style' => true, + 'width' => true, + ), + ), + ), + ); + + $actual = gutenberg_stabilize_experimental_block_supports( $block_type_args ); + $expected = array( + 'supports' => array( + 'border' => array( + 'color' => true, + 'radius' => true, + 'style' => true, + 'width' => true, + 'skipSerialization' => true, + // Has to be kept due to core's `wp_should_skip_block_supports_serialization` only checking the experimental flag until 6.8. + '__experimentalSkipSerialization' => true, + 'defaultControls' => array( + 'color' => true, + 'radius' => true, + 'style' => true, + 'width' => true, + ), + ), + ), + ); + + $this->assertSame( $expected, $actual, 'Stabilized border block support config does not match.' ); + } + + /** + * Tests the merging of border support configuration when stabilizing + * experimental config. Due to the ability to filter block type args, plugins + * or themes could filter using outdated experimental keys. While not every + * permutation of filtering can be covered, the majority of use cases are + * served best by merging configs based on the order they were defined if possible. + */ + public function test_should_stabilize_border_supports_using_order_based_merge() { + $experimental_border_config = array( + 'color' => true, + 'radius' => true, + 'style' => true, + 'width' => true, + '__experimentalSkipSerialization' => true, + '__experimentalDefaultControls' => array( + 'color' => true, + 'radius' => true, + 'style' => true, + 'width' => true, + ), + + /* + * The following simulates theme/plugin filtering using `__experimentalBorder` + * key but stable serialization and default control keys. + */ + 'skipSerialization' => false, + 'defaultControls' => array( + 'color' => true, + 'radius' => false, + 'style' => true, + 'width' => true, + ), + ); + $stable_border_config = array( + 'color' => true, + 'radius' => true, + 'style' => false, + 'width' => true, + 'skipSerialization' => false, + 'defaultControls' => array( + 'color' => true, + 'radius' => false, + 'style' => false, + 'width' => true, + ), + + /* + * The following simulates theme/plugin filtering using stable `border` key + * but experimental serialization and default control keys. + */ + '__experimentalSkipSerialization' => true, + '__experimentalDefaultControls' => array( + 'color' => false, + 'radius' => false, + 'style' => false, + 'width' => false, + ), + ); + + $experimental_first_args = array( + 'supports' => array( + '__experimentalBorder' => $experimental_border_config, + 'border' => $stable_border_config, + ), + ); + + $actual = gutenberg_stabilize_experimental_block_supports( $experimental_first_args ); + $expected = array( + 'supports' => array( + 'border' => array( + 'color' => true, + 'radius' => true, + 'style' => false, + 'width' => true, + 'skipSerialization' => true, + '__experimentalSkipSerialization' => true, + 'defaultControls' => array( + 'color' => false, + 'radius' => false, + 'style' => false, + 'width' => false, + ), + + ), + ), + ); + $this->assertSame( $expected, $actual, 'Merged stabilized border block support config does not match when experimental keys are first.' ); + + $stable_first_args = array( + 'supports' => array( + 'border' => $stable_border_config, + '__experimentalBorder' => $experimental_border_config, + ), + ); + + $actual = gutenberg_stabilize_experimental_block_supports( $stable_first_args ); + $expected = array( + 'supports' => array( + 'border' => array( + 'color' => true, + 'radius' => true, + 'style' => true, + 'width' => true, + 'skipSerialization' => false, + '__experimentalSkipSerialization' => false, + 'defaultControls' => array( + 'color' => true, + 'radius' => false, + 'style' => true, + 'width' => true, + ), + ), + ), + ); + $this->assertSame( $expected, $actual, 'Merged stabilized border block support config does not match when stable keys are first.' ); + } } From 0a6751c21a208677f46d1dd536d10e95d4ce11d1 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Mon, 25 Nov 2024 16:21:30 +0800 Subject: [PATCH 003/384] Fix block mover clickable area (#67261) Unlinked contributors: maximebj. Co-authored-by: talldan Co-authored-by: ramonjd --- packages/block-editor/src/components/block-mover/style.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss index c58ac9f19673fc..7d23c0f1e5a988 100644 --- a/packages/block-editor/src/components/block-mover/style.scss +++ b/packages/block-editor/src/components/block-mover/style.scss @@ -71,6 +71,9 @@ // Specificity is necessary to override block toolbar button styles. .components-button.block-editor-block-mover-button { + // Prevent the SVGs inside the button from overflowing the button. + overflow: hidden; + // Focus and toggle pseudo elements. &::before { content: ""; From 8fa8506a2a33e35badc672a5ed68e2e503dfa200 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Mon, 25 Nov 2024 12:26:46 +0400 Subject: [PATCH 004/384] Paragraph: Update condition for rendering Drop Cap for a selected block (#67111) Co-authored-by: Mamaduka Co-authored-by: youknowriad --- packages/block-library/src/paragraph/edit.js | 37 +++++++++++--------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js index b0dc5ab255af78..d32b4e8d5eca02 100644 --- a/packages/block-library/src/paragraph/edit.js +++ b/packages/block-library/src/paragraph/edit.js @@ -70,22 +70,24 @@ function DropCapControl( { clientId, attributes, setAttributes } ) { } return ( - !! dropCap } - label={ __( 'Drop cap' ) } - onDeselect={ () => setAttributes( { dropCap: undefined } ) } - resetAllFilter={ () => ( { dropCap: undefined } ) } - panelId={ clientId } - > - + !! dropCap } label={ __( 'Drop cap' ) } - checked={ !! dropCap } - onChange={ () => setAttributes( { dropCap: ! dropCap } ) } - help={ helpText } - disabled={ hasDropCapDisabled( align ) } - /> - + onDeselect={ () => setAttributes( { dropCap: undefined } ) } + resetAllFilter={ () => ( { dropCap: undefined } ) } + panelId={ clientId } + > + setAttributes( { dropCap: ! dropCap } ) } + help={ helpText } + disabled={ hasDropCapDisabled( align ) } + /> + + ); } @@ -96,6 +98,7 @@ function ParagraphBlock( { onRemove, setAttributes, clientId, + isSelected: isSingleSelected, } ) { const { align, content, direction, dropCap, placeholder } = attributes; const blockProps = useBlockProps( { @@ -131,13 +134,13 @@ function ParagraphBlock( { /> ) } - + { isSingleSelected && ( - + ) } Date: Mon, 25 Nov 2024 09:55:14 +0100 Subject: [PATCH 005/384] =?UTF-8?q?=F0=9F=A7=B9=20remove=20obsolete=20rich?= =?UTF-8?q?=20text=20css=20(#67264)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: ellatrix Co-authored-by: Mamaduka --- packages/block-editor/src/components/rich-text/content.scss | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/block-editor/src/components/rich-text/content.scss b/packages/block-editor/src/components/rich-text/content.scss index 6f118479fc6b03..28dcd931a7f5db 100644 --- a/packages/block-editor/src/components/rich-text/content.scss +++ b/packages/block-editor/src/components/rich-text/content.scss @@ -20,12 +20,6 @@ } } -.block-editor-rich-text__editable { - > p:first-child { - margin-top: 0; - } -} - // Captions may have lighter (gray) text, or be shown on a range of different background luminosites. // To ensure legibility, we increase the default placeholder opacity to ensure contrast. figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before { From 66d117fb7dc22a4f7a95956b8d0fe3be81c7885d Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Mon, 25 Nov 2024 13:23:51 +0400 Subject: [PATCH 006/384] Edit Post: Refactor 'MetaBoxVisibility' component (#67265) Co-authored-by: Mamaduka Co-authored-by: ntsekouras --- .../meta-boxes/meta-box-visibility.js | 37 +++++++------------ 1 file changed, 14 insertions(+), 23 deletions(-) diff --git a/packages/edit-post/src/components/meta-boxes/meta-box-visibility.js b/packages/edit-post/src/components/meta-boxes/meta-box-visibility.js index 26b69d37f00210..07060afa31dea5 100644 --- a/packages/edit-post/src/components/meta-boxes/meta-box-visibility.js +++ b/packages/edit-post/src/components/meta-boxes/meta-box-visibility.js @@ -1,24 +1,21 @@ /** * WordPress dependencies */ -import { Component } from '@wordpress/element'; -import { withSelect } from '@wordpress/data'; +import { useEffect } from '@wordpress/element'; +import { useSelect } from '@wordpress/data'; import { store as editorStore } from '@wordpress/editor'; -class MetaBoxVisibility extends Component { - componentDidMount() { - this.updateDOM(); - } - - componentDidUpdate( prevProps ) { - if ( this.props.isVisible !== prevProps.isVisible ) { - this.updateDOM(); - } - } - - updateDOM() { - const { id, isVisible } = this.props; +export default function MetaBoxVisibility( { id } ) { + const isVisible = useSelect( + ( select ) => { + return select( editorStore ).isEditorPanelEnabled( + `meta-box-${ id }` + ); + }, + [ id ] + ); + useEffect( () => { const element = document.getElementById( id ); if ( ! element ) { return; @@ -29,13 +26,7 @@ class MetaBoxVisibility extends Component { } else { element.classList.add( 'is-hidden' ); } - } + }, [ id, isVisible ] ); - render() { - return null; - } + return null; } - -export default withSelect( ( select, { id } ) => ( { - isVisible: select( editorStore ).isEditorPanelEnabled( `meta-box-${ id }` ), -} ) )( MetaBoxVisibility ); From 7e7ce3c0135351e5847d51e349e6b5c6885ee9ac Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Mon, 25 Nov 2024 18:25:48 +0900 Subject: [PATCH 007/384] Site Editor Sidebar: Fixed focus/hover style for navigation item buttons (#67251) Co-authored-by: t-hamano Co-authored-by: talldan Co-authored-by: jasmussen --- .../sidebar-navigation-screen-navigation-menus/style.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss index 334e90e93c42ce..544aad5075aec0 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/style.scss @@ -27,6 +27,14 @@ color: $white; } } + + .block-editor-list-view-block__menu { + color: $gray-600; + &:hover, + &:focus { + color: $white; + } + } } .edit-site-sidebar-navigation-screen-navigation-menus__loading.components-spinner { From 7e9e53d0581e8f21ad029fb3ffd03f43680326b1 Mon Sep 17 00:00:00 2001 From: Manzoor Wani Date: Mon, 25 Nov 2024 02:11:31 -0800 Subject: [PATCH 008/384] Fix TS types for the editor package (#67196) * Replace the wrong Component type with React Node/Element * Replace the wrong Component type with React Node/Element * Fix the optional params for store actions * Replace the deprecated JSX.Element with React.ReactNode * Update docs * Fix children prop for multiple components --- .../reference-guides/data/data-core-editor.md | 11 +- packages/editor/README.md | 192 +++++++++--------- .../plugin-block-settings-menu-item.js | 2 +- .../components/collab-sidebar/add-comment.js | 2 +- .../collab-sidebar/comment-author-info.js | 2 +- .../components/collab-sidebar/comment-form.js | 2 +- .../src/components/collab-sidebar/comments.js | 4 +- .../src/components/document-bar/index.js | 2 +- .../src/components/document-outline/check.js | 6 +- .../src/components/document-outline/index.js | 2 +- .../src/components/editor-history/redo.js | 2 +- .../src/components/editor-history/undo.js | 2 +- .../src/components/editor-notices/index.js | 2 +- .../src/components/editor-snackbars/index.js | 2 +- .../components/entities-saved-states/index.js | 4 +- .../src/components/page-attributes/check.js | 6 +- .../src/components/page-attributes/order.js | 2 +- .../src/components/page-attributes/panel.js | 2 +- .../src/components/page-attributes/parent.js | 2 +- .../plugin-document-setting-panel/index.js | 4 +- .../components/plugin-more-menu-item/index.js | 3 +- .../plugin-post-publish-panel/index.js | 4 +- .../plugin-post-status-info/index.js | 8 +- .../plugin-pre-publish-panel/index.js | 4 +- .../plugin-preview-menu-item/index.js | 3 +- .../plugin-sidebar-more-menu-item/index.js | 4 +- .../src/components/plugin-sidebar/index.js | 1 + .../src/components/post-author/check.js | 6 +- .../src/components/post-author/index.js | 2 +- .../src/components/post-author/panel.js | 2 +- .../src/components/post-comments/index.js | 2 +- .../src/components/post-discussion/panel.js | 2 +- .../src/components/post-excerpt/check.js | 6 +- .../src/components/post-excerpt/panel.js | 2 +- .../src/components/post-excerpt/plugin.js | 8 +- .../components/post-featured-image/check.js | 6 +- .../components/post-featured-image/panel.js | 2 +- .../src/components/post-format/check.js | 20 +- .../src/components/post-format/index.js | 2 +- .../src/components/post-format/panel.js | 2 +- .../components/post-last-revision/check.js | 6 +- .../components/post-last-revision/index.js | 2 +- .../components/post-last-revision/panel.js | 2 +- .../src/components/post-locked-modal/index.js | 2 +- .../components/post-pending-status/check.js | 6 +- .../components/post-pending-status/index.js | 2 +- .../components/post-preview-button/index.js | 2 +- .../src/components/post-schedule/check.js | 6 +- .../src/components/post-schedule/index.js | 2 +- .../src/components/post-schedule/label.js | 2 +- .../src/components/post-schedule/panel.js | 2 +- .../editor/src/components/post-slug/check.js | 6 +- .../editor/src/components/post-slug/index.js | 2 +- .../src/components/post-sticky/check.js | 6 +- .../src/components/post-sticky/index.js | 2 +- .../post-switch-to-draft-button/index.js | 2 +- .../src/components/post-sync-status/index.js | 2 +- .../src/components/post-taxonomies/check.js | 6 +- .../post-taxonomies/flat-term-selector.js | 2 +- .../src/components/post-taxonomies/panel.js | 27 +-- .../components/post-template/classic-theme.js | 4 +- .../src/components/post-template/panel.js | 2 +- .../src/components/post-text-editor/index.js | 2 +- .../editor/src/components/post-title/index.js | 2 +- .../components/post-title/post-title-raw.js | 2 +- .../editor/src/components/post-trash/check.js | 6 +- .../editor/src/components/post-trash/index.js | 2 +- .../post-type-support-check/index.js | 12 +- .../editor/src/components/post-url/check.js | 6 +- .../editor/src/components/post-url/index.js | 2 +- .../editor/src/components/post-url/label.js | 2 +- .../editor/src/components/post-url/panel.js | 2 +- .../src/components/post-visibility/check.js | 2 +- .../src/components/post-visibility/index.js | 2 +- .../editor/src/components/provider/index.js | 2 +- .../src/components/table-of-contents/index.js | 2 +- .../components/theme-support-check/index.js | 8 +- .../src/components/time-to-read/index.js | 2 +- .../unsaved-changes-warning/index.js | 2 +- .../editor/src/components/word-count/index.js | 2 +- packages/editor/src/store/actions.js | 19 +- 81 files changed, 260 insertions(+), 256 deletions(-) diff --git a/docs/reference-guides/data/data-core-editor.md b/docs/reference-guides/data/data-core-editor.md index 9567d8e4b954fa..44078ab284e94f 100644 --- a/docs/reference-guides/data/data-core-editor.md +++ b/docs/reference-guides/data/data-core-editor.md @@ -1148,7 +1148,8 @@ Action that autosaves the current post. This includes server-side autosaving (de _Parameters_ -- _options_ `Object?`: Extra flags to identify the autosave. +- _options_ `[Object]`: Extra flags to identify the autosave. +- _options.local_ `[boolean]`: Whether to perform a local autosave. ### clearSelectedBlock @@ -1204,7 +1205,7 @@ const getFeaturedMediaUrl = useSelect( ( select ) => { _Parameters_ - _edits_ `Object`: Post attributes to edit. -- _options_ `Object`: Options for the edit. +- _options_ `[Object]`: Options for the edit. _Returns_ @@ -1417,7 +1418,7 @@ Returns an action object used to signal that the blocks have been updated. _Parameters_ - _blocks_ `Array`: Block Array. -- _options_ `?Object`: Optional options. +- _options_ `[Object]`: Optional options. ### resetPost @@ -1431,7 +1432,7 @@ Action for saving the current post in the editor. _Parameters_ -- _options_ `Object`: +- _options_ `[Object]`: ### selectBlock @@ -1519,7 +1520,7 @@ _Parameters_ - _post_ `Object`: Post object. - _edits_ `Object`: Initial edited attributes object. -- _template_ `Array?`: Block Template. +- _template_ `[Array]`: Block Template. ### setupEditorState diff --git a/packages/editor/README.md b/packages/editor/README.md index bc00e15c8fb892..ac655bd1c99d8c 100644 --- a/packages/editor/README.md +++ b/packages/editor/README.md @@ -270,7 +270,7 @@ _Parameters_ _Returns_ -- `JSX.Element`: The rendered DocumentBar component. +- `React.ReactNode`: The rendered DocumentBar component. ### DocumentOutline @@ -284,7 +284,7 @@ _Parameters_ _Returns_ -- `Component`: The component to be rendered. +- `React.ReactNode`: The rendered component. ### DocumentOutlineCheck @@ -293,11 +293,11 @@ Component check if there are any headings (core/heading blocks) present in the d _Parameters_ - _props_ `Object`: Props. -- _props.children_ `Element`: Children to be rendered. +- _props.children_ `React.ReactElement`: Children to be rendered. _Returns_ -- `Component|null`: The component to be rendered or null if there are headings. +- `React.ReactElement`: The component to be rendered or null if there are headings. ### EditorHistoryRedo @@ -310,7 +310,7 @@ _Parameters_ _Returns_ -- `Component`: The component to be rendered. +- `React.ReactNode`: The rendered component. ### EditorHistoryUndo @@ -323,7 +323,7 @@ _Parameters_ _Returns_ -- `Component`: The component to be rendered. +- `React.ReactNode`: The rendered component. ### EditorKeyboardShortcuts @@ -351,7 +351,7 @@ _Usage_ _Returns_ -- `JSX.Element`: The rendered EditorNotices component. +- `React.ReactNode`: The rendered EditorNotices component. ### EditorProvider @@ -383,7 +383,7 @@ _Parameters_ _Returns_ -- `JSX.Element`: The rendered EditorProvider component. +- `React.ReactNode`: The rendered EditorProvider component. ### EditorSnackbars @@ -391,7 +391,7 @@ Renders the editor snackbars component. _Returns_ -- `JSX.Element`: The rendered component. +- `React.ReactNode`: The rendered component. ### EntitiesSavedStates @@ -405,7 +405,7 @@ _Parameters_ _Returns_ -- `JSX.Element`: The rendered component. +- `React.ReactNode`: The rendered component. ### ErrorBoundary @@ -523,11 +523,11 @@ Wrapper component that renders its children only if the post type supports page _Parameters_ - _props_ `Object`: - The component props. -- _props.children_ `Element`: - The child components to render. +- _props.children_ `React.ReactElement`: - The child components to render. _Returns_ -- `Component|null`: The rendered child components or null if page attributes are not supported. +- `React.ReactElement`: The rendered child components or null if page attributes are not supported. ### PageAttributesOrder @@ -535,7 +535,7 @@ Renders the Page Attributes Order component. A number input in an editor interfa _Returns_ -- `Component`: The component to be rendered. +- `React.ReactNode`: The rendered component. ### PageAttributesPanel @@ -543,7 +543,7 @@ Renders the Page Attributes Panel component. _Returns_ -- `Component`: The component to be rendered. +- `React.ReactNode`: The rendered component. ### PageAttributesParent @@ -551,7 +551,7 @@ Renders the Page Attributes Parent component. A dropdown menu in an editor inter _Returns_ -- `Component|null`: The component to be rendered. Return null if post type is not hierarchical. +- `React.ReactNode`: The component to be rendered. Return null if post type is not hierarchical. ### PageTemplate @@ -561,7 +561,7 @@ The dropdown menu includes a button for toggling the menu, a list of available t _Returns_ -- `JSX.Element`: The rendered ClassicThemeControl component. +- `React.ReactNode`: The rendered ClassicThemeControl component. ### PanelColorSettings @@ -627,7 +627,7 @@ _Parameters_ _Returns_ -- `Component`: The component to be rendered. +- `React.ReactNode`: The rendered component. ### PluginDocumentSettingPanel @@ -684,11 +684,11 @@ _Parameters_ - _props.className_ `[string]`: An optional class name added to the row. - _props.title_ `[string]`: The title of the panel - _props.icon_ `[WPBlockTypeIconRender]`: The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar. -- _props.children_ `Element`: Children to be rendered +- _props.children_ `React.ReactNode`: Children to be rendered _Returns_ -- `Component`: The component to be rendered. +- `React.ReactNode`: The component to be rendered. ### PluginMoreMenuItem @@ -738,6 +738,7 @@ const MyButtonMoreMenuItem = () => ( _Parameters_ - _props_ `Object`: Component properties. +- _props.children_ `[React.ReactNode]`: Children to be rendered. - _props.href_ `[string]`: When `href` is provided then the menu item is represented as an anchor rather than button. It corresponds to the `href` attribute of the anchor. - _props.icon_ `[WPBlockTypeIconRender]`: The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered to the left of the menu item label. - _props.onClick_ `[Function]`: The callback function to be executed when the user clicks the menu item. @@ -745,7 +746,7 @@ _Parameters_ _Returns_ -- `Component`: The component to be rendered. +- `React.ReactNode`: The rendered component. ### PluginPostPublishPanel @@ -776,11 +777,11 @@ _Parameters_ - _props.title_ `[string]`: Title displayed at the top of the panel. - _props.initialOpen_ `[boolean]`: Whether to have the panel initially opened. When no title is provided it is always opened. - _props.icon_ `[WPBlockTypeIconRender]`: The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar. -- _props.children_ `Element`: Children to be rendered +- _props.children_ `React.ReactNode`: Children to be rendered _Returns_ -- `Component`: The component to be rendered. +- `React.ReactNode`: The rendered component. ### PluginPostStatusInfo @@ -820,11 +821,11 @@ _Parameters_ - _props_ `Object`: Component properties. - _props.className_ `[string]`: An optional class name added to the row. -- _props.children_ `Element`: Children to be rendered. +- _props.children_ `React.ReactNode`: Children to be rendered. _Returns_ -- `Component`: The component to be rendered. +- `React.ReactNode`: The rendered component. ### PluginPrePublishPanel @@ -855,11 +856,11 @@ _Parameters_ - _props.title_ `[string]`: Title displayed at the top of the panel. - _props.initialOpen_ `[boolean]`: Whether to have the panel initially opened. When no title is provided it is always opened. - _props.icon_ `[WPBlockTypeIconRender]`: The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar. -- _props.children_ `Element`: Children to be rendered +- _props.children_ `React.ReactNode`: Children to be rendered _Returns_ -- `Component`: The component to be rendered. +- `React.ReactNode`: The rendered component. ### PluginPreviewMenuItem @@ -889,6 +890,7 @@ registerPlugin( 'external-preview-menu-item', { _Parameters_ - _props_ `Object`: Component properties. +- _props.children_ `[React.ReactNode]`: Children to be rendered. - _props.href_ `[string]`: When `href` is provided, the menu item is rendered as an anchor instead of a button. It corresponds to the `href` attribute of the anchor. - _props.icon_ `[WPBlockTypeIconRender]`: The icon to be rendered to the left of the menu item label. Can be a Dashicon slug or an SVG WP element. - _props.onClick_ `[Function]`: The callback function to be executed when the user clicks the menu item. @@ -896,7 +898,7 @@ _Parameters_ _Returns_ -- `Component`: The rendered menu item component. +- `React.ReactNode`: The rendered menu item component. ### PluginSidebar @@ -953,6 +955,7 @@ _Parameters_ - _props_ `Object`: Element props. - _props.name_ `string`: A string identifying the sidebar. Must be unique for every sidebar registered within the scope of your plugin. +- _props.children_ `[React.ReactNode]`: Children to be rendered. - _props.className_ `[string]`: An optional class name added to the sidebar body. - _props.title_ `string`: Title displayed at the top of the sidebar. - _props.isPinnable_ `[boolean]`: Whether to allow to pin sidebar to the toolbar. When set to `true` it also automatically renders a corresponding menu item. @@ -999,11 +1002,12 @@ _Parameters_ - _props_ `Object`: Component props. - _props.target_ `string`: A string identifying the target sidebar you wish to be activated by this menu item. Must be the same as the `name` prop you have given to that sidebar. +- _props.children_ `[React.ReactNode]`: Children to be rendered. - _props.icon_ `[WPBlockTypeIconRender]`: The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered to the left of the menu item label. _Returns_ -- `Component`: The component to be rendered. +- `React.ReactNode`: The rendered component. ### PostAuthor @@ -1011,7 +1015,7 @@ Renders the component for selecting the post author. _Returns_ -- `Component`: The component to be rendered. +- `React.ReactNode`: The rendered component. ### PostAuthorCheck @@ -1020,11 +1024,11 @@ Wrapper component that renders its children only if the post type supports the a _Parameters_ - _props_ `Object`: The component props. -- _props.children_ `Element`: Children to be rendered. +- _props.children_ `React.ReactNode`: Children to be rendered. _Returns_ -- `Component|null`: The component to be rendered. Return `null` if the post type doesn't supports the author or if there are no authors available. +- `React.ReactNode`: The component to be rendered. Return `null` if the post type doesn't supports the author or if there are no authors available. ### PostAuthorPanel @@ -1032,7 +1036,7 @@ Renders the Post Author Panel component. _Returns_ -- `Component`: The component to be rendered. +- `React.ReactNode`: The rendered component. ### PostComments @@ -1040,7 +1044,7 @@ A form for managing comment status. _Returns_ -- `JSX.Element`: The rendered PostComments component. +- `React.ReactNode`: The rendered PostComments component. ### PostDiscussionPanel @@ -1048,7 +1052,7 @@ This component allows to update comment and pingback settings for the current po _Returns_ -- `JSX.Element|null`: The rendered PostDiscussionPanel component. +- `React.ReactNode`: The rendered PostDiscussionPanel component. ### PostExcerpt @@ -1067,11 +1071,11 @@ Component for checking if the post type supports the excerpt field. _Parameters_ - _props_ `Object`: Props. -- _props.children_ `Element`: Children to be rendered. +- _props.children_ `React.ReactNode`: Children to be rendered. _Returns_ -- `Component`: The component to be rendered. +- `React.ReactNode`: The rendered component. ### PostExcerptPanel @@ -1079,7 +1083,7 @@ Is rendered if the post type supports excerpts and allows editing the excerpt. _Returns_ -- `JSX.Element`: The rendered PostExcerptPanel component. +- `React.ReactNode`: The rendered PostExcerptPanel component. ### PostFeaturedImage @@ -1108,11 +1112,11 @@ Wrapper component that renders its children only if the post type supports a fea _Parameters_ - _props_ `Object`: Props. -- _props.children_ `Element`: Children to be rendered. +- _props.children_ `React.ReactNode`: Children to be rendered. _Returns_ -- `Component`: The component to be rendered. +- `React.ReactNode`: The rendered component. ### PostFeaturedImagePanel @@ -1125,7 +1129,7 @@ _Parameters_ _Returns_ -- `Component|null`: The component to be rendered. Return Null if the editor panel is disabled for featured image. +- `React.ReactNode`: The component to be rendered. Return Null if the editor panel is disabled for featured image. ### PostFormat @@ -1139,7 +1143,7 @@ _Usage_ _Returns_ -- `JSX.Element`: The rendered PostFormat component. +- `React.ReactNode`: The rendered PostFormat component. ### PostFormatCheck @@ -1148,11 +1152,11 @@ Component check if there are any post formats. _Parameters_ - _props_ `Object`: The component props. -- _props.children_ `Element`: The child elements to render. +- _props.children_ `React.ReactNode`: The child elements to render. _Returns_ -- `Component|null`: The rendered component or null if post formats are disabled. +- `React.ReactNode`: The rendered component or null if post formats are disabled. ### PostLastRevision @@ -1160,7 +1164,7 @@ Renders the component for displaying the last revision of a post. _Returns_ -- `Component`: The component to be rendered. +- `React.ReactNode`: The rendered component. ### PostLastRevisionCheck @@ -1169,11 +1173,11 @@ Wrapper component that renders its children if the post has more than one revisi _Parameters_ - _props_ `Object`: Props. -- _props.children_ `Element`: Children to be rendered. +- _props.children_ `React.ReactNode`: Children to be rendered. _Returns_ -- `Component|null`: Rendered child components if post has more than one revision, otherwise null. +- `React.ReactNode`: Rendered child components if post has more than one revision, otherwise null. ### PostLastRevisionPanel @@ -1181,7 +1185,7 @@ Renders the panel for displaying the last revision of a post. _Returns_ -- `Component`: The component to be rendered. +- `React.ReactNode`: The rendered component. ### PostLockedModal @@ -1189,7 +1193,7 @@ A modal component that is displayed when a post is locked for editing by another _Returns_ -- `JSX.Element|null`: The rendered PostLockedModal component. +- `React.ReactNode`: The rendered PostLockedModal component. ### PostPendingStatus @@ -1197,7 +1201,7 @@ A component for displaying and toggling the pending status of a post. _Returns_ -- `JSX.Element`: The rendered component. +- `React.ReactNode`: The rendered component. ### PostPendingStatusCheck @@ -1206,11 +1210,11 @@ This component checks the publishing status of the current post. If the post is _Parameters_ - _props_ `Object`: Component properties. -- _props.children_ `Element`: Children to be rendered. +- _props.children_ `React.ReactElement`: Children to be rendered. _Returns_ -- `JSX.Element|null`: The rendered child elements or null if the post is already published or the user doesn't have the capability to publish. +- `React.ReactElement`: The rendered child elements or null if the post is already published or the user doesn't have the capability to publish. ### PostPingbacks @@ -1231,7 +1235,7 @@ _Parameters_ _Returns_ -- `JSX.Element|null`: The rendered button component. +- `React.ReactNode`: The rendered button component. ### PostPublishButton @@ -1273,7 +1277,7 @@ _Parameters_ _Returns_ -- `Component`: The component to be rendered. +- `React.ReactNode`: The rendered component. ### PostScheduleCheck @@ -1282,11 +1286,11 @@ Wrapper component that renders its children only if post has a publish action. _Parameters_ - _props_ `Object`: Props. -- _props.children_ `Element`: Children to be rendered. +- _props.children_ `React.ReactElement`: Children to be rendered. _Returns_ -- `Component`: - The component to be rendered or null if there is no publish action. +- `React.ReactElement`: - The component to be rendered or null if there is no publish action. ### PostScheduleLabel @@ -1298,7 +1302,7 @@ _Parameters_ _Returns_ -- `Component`: The component to be rendered. +- `React.ReactNode`: The rendered component. ### PostSchedulePanel @@ -1306,7 +1310,7 @@ Renders the Post Schedule Panel component. _Returns_ -- `Component`: The component to be rendered. +- `React.ReactNode`: The rendered component. ### PostSlug @@ -1314,7 +1318,7 @@ Renders the PostSlug component. It provide a control for editing the post slug. _Returns_ -- `Component`: The component to be rendered. +- `React.ReactNode`: The rendered component. ### PostSlugCheck @@ -1323,11 +1327,11 @@ Wrapper component that renders its children only if the post type supports the s _Parameters_ - _props_ `Object`: Props. -- _props.children_ `Element`: Children to be rendered. +- _props.children_ `React.ReactNode`: Children to be rendered. _Returns_ -- `Component`: The component to be rendered. +- `React.ReactNode`: The rendered component. ### PostSticky @@ -1335,7 +1339,7 @@ Renders the PostSticky component. It provides a checkbox control for the sticky _Returns_ -- `Component`: The component to be rendered. +- `React.ReactNode`: The rendered component. ### PostStickyCheck @@ -1344,11 +1348,11 @@ Wrapper component that renders its children only if post has a sticky action. _Parameters_ - _props_ `Object`: Props. -- _props.children_ `Element`: Children to be rendered. +- _props.children_ `React.ReactElement`: Children to be rendered. _Returns_ -- `Component`: The component to be rendered or null if post type is not 'post' or hasStickyAction is false. +- `React.ReactElement`: The component to be rendered or null if post type is not 'post' or hasStickyAction is false. ### PostSwitchToDraftButton @@ -1356,7 +1360,7 @@ Renders a button component that allows the user to switch a post to draft status _Returns_ -- `JSX.Element`: The rendered component. +- `React.ReactNode`: The rendered component. ### PostSyncStatus @@ -1364,7 +1368,7 @@ Renders the sync status of a post. _Returns_ -- `JSX.Element|null`: The rendered sync status component. +- `React.ReactNode`: The rendered sync status component. ### PostTaxonomies @@ -1386,11 +1390,11 @@ Renders the children components only if the current post type has taxonomies. _Parameters_ - _props_ `Object`: The component props. -- _props.children_ `Element`: The children components to render. +- _props.children_ `React.ReactNode`: The children components to render. _Returns_ -- `Component|null`: The rendered children components or null if the current post type has no taxonomies. +- `React.ReactElement`: The rendered children components or null if the current post type has no taxonomies. ### PostTaxonomiesFlatTermSelector @@ -1404,7 +1408,7 @@ _Parameters_ _Returns_ -- `JSX.Element`: The rendered flat term selector component. +- `React.ReactNode`: The rendered flat term selector component. ### PostTaxonomiesHierarchicalTermSelector @@ -1421,17 +1425,11 @@ _Returns_ ### PostTaxonomiesPanel -Renders a panel for a specific taxonomy. - -_Parameters_ - -- _props_ `Object`: The component props. -- _props.taxonomy_ `Object`: The taxonomy object. -- _props.children_ `Element`: The child components. +Component that renders the post taxonomies panel. _Returns_ -- `Component`: The rendered taxonomy panel. +- `React.ReactNode`: The rendered component. ### PostTemplatePanel @@ -1439,7 +1437,7 @@ Displays the template controls based on the current editor settings and user per _Returns_ -- `JSX.Element|null`: The rendered PostTemplatePanel component. +- `React.ReactNode`: The rendered PostTemplatePanel component. ### PostTextEditor @@ -1447,7 +1445,7 @@ Displays the Post Text Editor along with content in Visual and Text mode. _Returns_ -- `JSX.Element|null`: The rendered PostTextEditor component. +- `React.ReactNode`: The rendered PostTextEditor component. ### PostTitle @@ -1460,7 +1458,7 @@ _Parameters_ _Returns_ -- `Component`: The rendered PostTitle component. +- `React.ReactNode`: The rendered PostTitle component. ### PostTitleRaw @@ -1476,7 +1474,7 @@ _Parameters_ _Returns_ -- `JSX.Element|null`: The rendered PostTrash component. +- `React.ReactNode`: The rendered PostTrash component. ### PostTrashCheck @@ -1485,11 +1483,11 @@ Wrapper component that renders its children only if the post can trashed. _Parameters_ - _props_ `Object`: - The component props. -- _props.children_ `Element`: - The child components to render. +- _props.children_ `React.ReactEl`: - The child components to render. _Returns_ -- `Component|null`: The rendered child components or null if the post can not trashed. +- `React.ReactElement`: The rendered child components or null if the post can not trashed. ### PostTypeSupportCheck @@ -1498,12 +1496,12 @@ A component which renders its own children only if the current editor post type _Parameters_ - _props_ `Object`: Props. -- _props.children_ `Element`: Children to be rendered if post type supports. +- _props.children_ `React.ReactElement`: Children to be rendered if post type supports. - _props.supportKeys_ `(string|string[])`: String or string array of keys to test. _Returns_ -- `Component`: The component to be rendered. +- `React.ReactElement`: The component to be rendered. ### PostURL @@ -1521,7 +1519,7 @@ _Parameters_ _Returns_ -- `Component`: The rendered PostURL component. +- `React.ReactNode`: The rendered PostURL component. ### PostURLCheck @@ -1530,11 +1528,11 @@ Check if the post URL is valid and visible. _Parameters_ - _props_ `Object`: The component props. -- _props.children_ `Element`: The child components. +- _props.children_ `React.ReactElement`: The child components. _Returns_ -- `Component|null`: The child components if the post URL is valid and visible, otherwise null. +- `React.ReactElement`: The child components if the post URL is valid and visible, otherwise null. ### PostURLLabel @@ -1542,7 +1540,7 @@ Represents a label component for a post URL. _Returns_ -- `Component`: The PostURLLabel component. +- `React.ReactNode`: The PostURLLabel component. ### PostURLPanel @@ -1550,7 +1548,7 @@ Renders the `PostURLPanel` component. _Returns_ -- `JSX.Element`: The rendered PostURLPanel component. +- `React.ReactNode`: The rendered PostURLPanel component. ### PostVisibility @@ -1563,7 +1561,7 @@ _Parameters_ _Returns_ -- `JSX.Element`: The rendered component. +- `React.ReactNode`: The rendered component. ### PostVisibilityCheck @@ -1576,7 +1574,7 @@ _Parameters_ _Returns_ -- `JSX.Element`: The rendered component. +- `React.ReactNode`: The rendered component. ### PostVisibilityLabel @@ -1663,7 +1661,7 @@ _Parameters_ _Returns_ -- `JSX.Element`: The rendered table of contents component. +- `React.ReactNode`: The rendered table of contents component. ### TextEditorGlobalKeyboardShortcuts @@ -1678,12 +1676,12 @@ Checks if the current theme supports specific features and renders the children _Parameters_ - _props_ `Object`: The component props. -- _props.children_ `Element`: The children to render if the theme supports the specified features. +- _props.children_ `React.ReactElement`: The children to render if the theme supports the specified features. - _props.supportKeys_ `string|string[]`: The key(s) of the theme support(s) to check. _Returns_ -- `JSX.Element|null`: The rendered children if the theme supports the specified features, otherwise null. +- `React.ReactElement`: The rendered children if the theme supports the specified features, otherwise null. ### TimeToRead @@ -1691,7 +1689,7 @@ Component for showing Time To Read in Content. _Returns_ -- `JSX.Element`: The rendered TimeToRead component. +- `React.ReactNode`: The rendered TimeToRead component. ### transformStyles @@ -1727,7 +1725,7 @@ Warns the user if there are unsaved changes before leaving the editor. Compatibl _Returns_ -- `Component`: The component. +- `React.ReactNode`: The component. ### URLInput @@ -1814,7 +1812,7 @@ Renders the word count of the post content. _Returns_ -- `JSX.Element|null`: The rendered WordCount component. +- `React.ReactNode`: The rendered WordCount component. ### WritingFlow diff --git a/packages/editor/src/components/block-settings-menu/plugin-block-settings-menu-item.js b/packages/editor/src/components/block-settings-menu/plugin-block-settings-menu-item.js index 59c9e9c32d4a4b..df1e75d2d0e8b5 100644 --- a/packages/editor/src/components/block-settings-menu/plugin-block-settings-menu-item.js +++ b/packages/editor/src/components/block-settings-menu/plugin-block-settings-menu-item.js @@ -76,7 +76,7 @@ const shouldRenderItem = ( selectedBlocks, allowedBlocks ) => * ); * ``` * - * @return {Component} The component to be rendered. + * @return {React.ReactNode} The rendered component. */ const PluginBlockSettingsMenuItem = ( { allowedBlocks, diff --git a/packages/editor/src/components/collab-sidebar/add-comment.js b/packages/editor/src/components/collab-sidebar/add-comment.js index fce47e821e2065..2330017ac5db53 100644 --- a/packages/editor/src/components/collab-sidebar/add-comment.js +++ b/packages/editor/src/components/collab-sidebar/add-comment.js @@ -22,7 +22,7 @@ import CommentForm from './comment-form'; * @param {Function} props.onSubmit - A callback function to be called when the user submits a comment. * @param {boolean} props.showCommentBoard - The function to edit the comment. * @param {Function} props.setShowCommentBoard - The function to delete the comment. - * @return {JSX.Element} The rendered comment input UI. + * @return {React.ReactNode} The rendered comment input UI. */ export function AddComment( { onSubmit, diff --git a/packages/editor/src/components/collab-sidebar/comment-author-info.js b/packages/editor/src/components/collab-sidebar/comment-author-info.js index 89d09a2b52261f..d8b5f72a2fc25f 100644 --- a/packages/editor/src/components/collab-sidebar/comment-author-info.js +++ b/packages/editor/src/components/collab-sidebar/comment-author-info.js @@ -16,7 +16,7 @@ import { store as blockEditorStore } from '@wordpress/block-editor'; * @param {string} props.name - Name of the author. * @param {string} props.date - Date of the comment. * - * @return {JSX.Element} The JSX element representing the author's information. + * @return {React.ReactNode} The JSX element representing the author's information. */ function CommentAuthorInfo( { avatar, name, date } ) { const dateSettings = getDateSettings(); diff --git a/packages/editor/src/components/collab-sidebar/comment-form.js b/packages/editor/src/components/collab-sidebar/comment-form.js index 28622f9f52a6f8..052fd3cdd26568 100644 --- a/packages/editor/src/components/collab-sidebar/comment-form.js +++ b/packages/editor/src/components/collab-sidebar/comment-form.js @@ -22,7 +22,7 @@ import { sanitizeCommentString } from './utils'; * @param {Function} props.onCancel - The function to call when canceling the comment update. * @param {Object} props.thread - The comment thread object. * @param {string} props.submitButtonText - The text to display on the submit button. - * @return {JSX.Element} The CommentForm component. + * @return {React.ReactNode} The CommentForm component. */ function CommentForm( { onSubmit, onCancel, thread, submitButtonText } ) { const [ inputComment, setInputComment ] = useState( diff --git a/packages/editor/src/components/collab-sidebar/comments.js b/packages/editor/src/components/collab-sidebar/comments.js index 808ea0acf04b31..7a03068787c81e 100644 --- a/packages/editor/src/components/collab-sidebar/comments.js +++ b/packages/editor/src/components/collab-sidebar/comments.js @@ -35,7 +35,7 @@ import CommentForm from './comment-form'; * @param {Function} props.onAddReply - The function to add a reply to a comment. * @param {Function} props.onCommentDelete - The function to delete a comment. * @param {Function} props.onCommentResolve - The function to mark a comment as resolved. - * @return {JSX.Element} The rendered Comments component. + * @return {React.ReactNode} The rendered Comments component. */ export function Comments( { threads, @@ -270,7 +270,7 @@ export function Comments( { * @param {Function} props.onDelete - The function to delete the comment. * @param {Function} props.onReply - The function to reply to the comment. * @param {string} props.status - The status of the comment. - * @return {JSX.Element} The rendered comment header. + * @return {React.ReactNode} The rendered comment header. */ function CommentHeader( { thread, diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index 30990379fe6301..9fffba941a4355 100644 --- a/packages/editor/src/components/document-bar/index.js +++ b/packages/editor/src/components/document-bar/index.js @@ -49,7 +49,7 @@ const MotionButton = motion( Button ); * @param {IconType} props.icon An icon for the document, no default. * (A default icon indicating the document post type is no longer used.) * - * @return {JSX.Element} The rendered DocumentBar component. + * @return {React.ReactNode} The rendered DocumentBar component. */ export default function DocumentBar( props ) { const { diff --git a/packages/editor/src/components/document-outline/check.js b/packages/editor/src/components/document-outline/check.js index d0676aa9037ffe..87864cbb34a369 100644 --- a/packages/editor/src/components/document-outline/check.js +++ b/packages/editor/src/components/document-outline/check.js @@ -7,10 +7,10 @@ import { store as blockEditorStore } from '@wordpress/block-editor'; /** * Component check if there are any headings (core/heading blocks) present in the document. * - * @param {Object} props Props. - * @param {Element} props.children Children to be rendered. + * @param {Object} props Props. + * @param {React.ReactElement} props.children Children to be rendered. * - * @return {Component|null} The component to be rendered or null if there are headings. + * @return {React.ReactElement} The component to be rendered or null if there are headings. */ export default function DocumentOutlineCheck( { children } ) { const hasHeadings = useSelect( ( select ) => { diff --git a/packages/editor/src/components/document-outline/index.js b/packages/editor/src/components/document-outline/index.js index c5e59837362092..89f853798296ae 100644 --- a/packages/editor/src/components/document-outline/index.js +++ b/packages/editor/src/components/document-outline/index.js @@ -106,7 +106,7 @@ const isEmptyHeading = ( heading ) => * @param {Function} props.onSelect Function to be called when an outline item is selected * @param {boolean} props.hasOutlineItemsDisabled Indicates whether the outline items are disabled. * - * @return {Component} The component to be rendered. + * @return {React.ReactNode} The rendered component. */ export default function DocumentOutline( { onSelect, diff --git a/packages/editor/src/components/editor-history/redo.js b/packages/editor/src/components/editor-history/redo.js index 46a263bb89926b..b2b20555f30544 100644 --- a/packages/editor/src/components/editor-history/redo.js +++ b/packages/editor/src/components/editor-history/redo.js @@ -50,6 +50,6 @@ function EditorHistoryRedo( props, ref ) { * @param {Object} props - Props. * @param {Ref} ref - Forwarded ref. * - * @return {Component} The component to be rendered. + * @return {React.ReactNode} The rendered component. */ export default forwardRef( EditorHistoryRedo ); diff --git a/packages/editor/src/components/editor-history/undo.js b/packages/editor/src/components/editor-history/undo.js index 6ba6055706e993..fe8cce72c4197e 100644 --- a/packages/editor/src/components/editor-history/undo.js +++ b/packages/editor/src/components/editor-history/undo.js @@ -46,6 +46,6 @@ function EditorHistoryUndo( props, ref ) { * @param {Object} props - Props. * @param {Ref} ref - Forwarded ref. * - * @return {Component} The component to be rendered. + * @return {React.ReactNode} The rendered component. */ export default forwardRef( EditorHistoryUndo ); diff --git a/packages/editor/src/components/editor-notices/index.js b/packages/editor/src/components/editor-notices/index.js index 28341bfda3f236..5f095ef1a813c6 100644 --- a/packages/editor/src/components/editor-notices/index.js +++ b/packages/editor/src/components/editor-notices/index.js @@ -18,7 +18,7 @@ import TemplateValidationNotice from '../template-validation-notice'; * * ``` * - * @return {JSX.Element} The rendered EditorNotices component. + * @return {React.ReactNode} The rendered EditorNotices component. */ export function EditorNotices() { const { notices } = useSelect( diff --git a/packages/editor/src/components/editor-snackbars/index.js b/packages/editor/src/components/editor-snackbars/index.js index 6530e1ec7ea902..9b781ee60dcaa5 100644 --- a/packages/editor/src/components/editor-snackbars/index.js +++ b/packages/editor/src/components/editor-snackbars/index.js @@ -11,7 +11,7 @@ const MAX_VISIBLE_NOTICES = -3; /** * Renders the editor snackbars component. * - * @return {JSX.Element} The rendered component. + * @return {React.ReactNode} The rendered component. */ export default function EditorSnackbars() { const notices = useSelect( diff --git a/packages/editor/src/components/entities-saved-states/index.js b/packages/editor/src/components/entities-saved-states/index.js index 849bd2d0d71c8c..ea05bca522941b 100644 --- a/packages/editor/src/components/entities-saved-states/index.js +++ b/packages/editor/src/components/entities-saved-states/index.js @@ -33,7 +33,7 @@ function identity( values ) { * @param {Function} props.close The function to close the dialog. * @param {Function} props.renderDialog The function to render the dialog. * - * @return {JSX.Element} The rendered component. + * @return {React.ReactNode} The rendered component. */ export default function EntitiesSavedStates( { close, @@ -64,7 +64,7 @@ export default function EntitiesSavedStates( { * @param {Function} props.setUnselectedEntities Function to set unselected entities. * @param {Array} props.unselectedEntities Array of unselected entities. * - * @return {JSX.Element} The rendered component. + * @return {React.ReactNode} The rendered component. */ export function EntitiesSavedStatesExtensible( { additionalPrompt = undefined, diff --git a/packages/editor/src/components/page-attributes/check.js b/packages/editor/src/components/page-attributes/check.js index bed2b1a353842a..3c08a3d8e53514 100644 --- a/packages/editor/src/components/page-attributes/check.js +++ b/packages/editor/src/components/page-attributes/check.js @@ -12,10 +12,10 @@ import { store as editorStore } from '../../store'; /** * Wrapper component that renders its children only if the post type supports page attributes. * - * @param {Object} props - The component props. - * @param {Element} props.children - The child components to render. + * @param {Object} props - The component props. + * @param {React.ReactElement} props.children - The child components to render. * - * @return {Component|null} The rendered child components or null if page attributes are not supported. + * @return {React.ReactElement} The rendered child components or null if page attributes are not supported. */ export function PageAttributesCheck( { children } ) { const supportsPageAttributes = useSelect( ( select ) => { diff --git a/packages/editor/src/components/page-attributes/order.js b/packages/editor/src/components/page-attributes/order.js index c5f02c71b613d4..04c6ce186a9701 100644 --- a/packages/editor/src/components/page-attributes/order.js +++ b/packages/editor/src/components/page-attributes/order.js @@ -59,7 +59,7 @@ function PageAttributesOrder() { * for setting the order of a given page. * The component is now not used in core but was kept for backward compatibility. * - * @return {Component} The component to be rendered. + * @return {React.ReactNode} The rendered component. */ export default function PageAttributesOrderWithChecks() { return ( diff --git a/packages/editor/src/components/page-attributes/panel.js b/packages/editor/src/components/page-attributes/panel.js index 7fcaf4b90d9ffe..8ecf7f1642f718 100644 --- a/packages/editor/src/components/page-attributes/panel.js +++ b/packages/editor/src/components/page-attributes/panel.js @@ -33,7 +33,7 @@ function AttributesPanel() { /** * Renders the Page Attributes Panel component. * - * @return {Component} The component to be rendered. + * @return {React.ReactNode} The rendered component. */ export default function PageAttributesPanel() { return ( diff --git a/packages/editor/src/components/page-attributes/parent.js b/packages/editor/src/components/page-attributes/parent.js index 17395589cd313b..bd2861766c334a 100644 --- a/packages/editor/src/components/page-attributes/parent.js +++ b/packages/editor/src/components/page-attributes/parent.js @@ -56,7 +56,7 @@ export const getItemPriority = ( name, searchValue ) => { * Renders the Page Attributes Parent component. A dropdown menu in an editor interface * for selecting the parent page of a given page. * - * @return {Component|null} The component to be rendered. Return null if post type is not hierarchical. + * @return {React.ReactNode} The component to be rendered. Return null if post type is not hierarchical. */ export function PageAttributesParent() { const { editPost } = useDispatch( editorStore ); diff --git a/packages/editor/src/components/plugin-document-setting-panel/index.js b/packages/editor/src/components/plugin-document-setting-panel/index.js index 7466acffc0c4b1..6408d82fe7e118 100644 --- a/packages/editor/src/components/plugin-document-setting-panel/index.js +++ b/packages/editor/src/components/plugin-document-setting-panel/index.js @@ -22,7 +22,7 @@ const { Fill, Slot } = createSlotFill( 'PluginDocumentSettingPanel' ); * @param {string} [props.className] An optional class name added to the row. * @param {string} [props.title] The title of the panel * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar. - * @param {Element} props.children Children to be rendered + * @param {React.ReactNode} props.children Children to be rendered * * @example * ```js @@ -64,7 +64,7 @@ const { Fill, Slot } = createSlotFill( 'PluginDocumentSettingPanel' ); * registerPlugin( 'document-setting-test', { render: MyDocumentSettingTest } ); * ``` * - * @return {Component} The component to be rendered. + * @return {React.ReactNode} The component to be rendered. */ const PluginDocumentSettingPanel = ( { name, diff --git a/packages/editor/src/components/plugin-more-menu-item/index.js b/packages/editor/src/components/plugin-more-menu-item/index.js index 28173c24ebcefa..1d8e124b03e604 100644 --- a/packages/editor/src/components/plugin-more-menu-item/index.js +++ b/packages/editor/src/components/plugin-more-menu-item/index.js @@ -10,6 +10,7 @@ import { ActionItem } from '@wordpress/interface'; * The text within the component appears as the menu item label. * * @param {Object} props Component properties. + * @param {React.ReactNode} [props.children] Children to be rendered. * @param {string} [props.href] When `href` is provided then the menu item is represented as an anchor rather than button. It corresponds to the `href` attribute of the anchor. * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered to the left of the menu item label. * @param {Function} [props.onClick=noop] The callback function to be executed when the user clicks the menu item. @@ -59,7 +60,7 @@ import { ActionItem } from '@wordpress/interface'; * ); * ``` * - * @return {Component} The component to be rendered. + * @return {React.ReactNode} The rendered component. */ export default function PluginMoreMenuItem( props ) { const context = usePluginContext(); diff --git a/packages/editor/src/components/plugin-post-publish-panel/index.js b/packages/editor/src/components/plugin-post-publish-panel/index.js index 086045b1c1fee1..b93f0a15c237f5 100644 --- a/packages/editor/src/components/plugin-post-publish-panel/index.js +++ b/packages/editor/src/components/plugin-post-publish-panel/index.js @@ -15,7 +15,7 @@ const { Fill, Slot } = createSlotFill( 'PluginPostPublishPanel' ); * @param {string} [props.title] Title displayed at the top of the panel. * @param {boolean} [props.initialOpen=false] Whether to have the panel initially opened. When no title is provided it is always opened. * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar. - * @param {Element} props.children Children to be rendered + * @param {React.ReactNode} props.children Children to be rendered * * @example * ```jsx @@ -34,7 +34,7 @@ const { Fill, Slot } = createSlotFill( 'PluginPostPublishPanel' ); * ); * ``` * - * @return {Component} The component to be rendered. + * @return {React.ReactNode} The rendered component. */ const PluginPostPublishPanel = ( { children, diff --git a/packages/editor/src/components/plugin-post-status-info/index.js b/packages/editor/src/components/plugin-post-status-info/index.js index a4a216b78ae78b..f9f3293047ddd3 100644 --- a/packages/editor/src/components/plugin-post-status-info/index.js +++ b/packages/editor/src/components/plugin-post-status-info/index.js @@ -14,9 +14,9 @@ const { Fill, Slot } = createSlotFill( 'PluginPostStatusInfo' ); * It should be noted that this is named and implemented around the function it serves * and not its location, which may change in future iterations. * - * @param {Object} props Component properties. - * @param {string} [props.className] An optional class name added to the row. - * @param {Element} props.children Children to be rendered. + * @param {Object} props Component properties. + * @param {string} [props.className] An optional class name added to the row. + * @param {React.ReactNode} props.children Children to be rendered. * * @example * ```js @@ -50,7 +50,7 @@ const { Fill, Slot } = createSlotFill( 'PluginPostStatusInfo' ); * ); * ``` * - * @return {Component} The component to be rendered. + * @return {React.ReactNode} The rendered component. */ const PluginPostStatusInfo = ( { children, className } ) => ( diff --git a/packages/editor/src/components/plugin-pre-publish-panel/index.js b/packages/editor/src/components/plugin-pre-publish-panel/index.js index c9f556dc534a80..412af36c5176e0 100644 --- a/packages/editor/src/components/plugin-pre-publish-panel/index.js +++ b/packages/editor/src/components/plugin-pre-publish-panel/index.js @@ -18,7 +18,7 @@ const { Fill, Slot } = createSlotFill( 'PluginPrePublishPanel' ); * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) * icon slug string, or an SVG WP element, to be rendered when * the sidebar is pinned to toolbar. - * @param {Element} props.children Children to be rendered + * @param {React.ReactNode} props.children Children to be rendered * * @example * ```jsx @@ -37,7 +37,7 @@ const { Fill, Slot } = createSlotFill( 'PluginPrePublishPanel' ); * ); * ``` * - * @return {Component} The component to be rendered. + * @return {React.ReactNode} The rendered component. */ const PluginPrePublishPanel = ( { children, diff --git a/packages/editor/src/components/plugin-preview-menu-item/index.js b/packages/editor/src/components/plugin-preview-menu-item/index.js index 8038da04595aae..949f02808a7b03 100644 --- a/packages/editor/src/components/plugin-preview-menu-item/index.js +++ b/packages/editor/src/components/plugin-preview-menu-item/index.js @@ -10,6 +10,7 @@ import { ActionItem } from '@wordpress/interface'; * The text within the component appears as the menu item label. * * @param {Object} props Component properties. + * @param {React.ReactNode} [props.children] Children to be rendered. * @param {string} [props.href] When `href` is provided, the menu item is rendered as an anchor instead of a button. It corresponds to the `href` attribute of the anchor. * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The icon to be rendered to the left of the menu item label. Can be a Dashicon slug or an SVG WP element. * @param {Function} [props.onClick] The callback function to be executed when the user clicks the menu item. @@ -38,7 +39,7 @@ import { ActionItem } from '@wordpress/interface'; * } ); * ``` * - * @return {Component} The rendered menu item component. + * @return {React.ReactNode} The rendered menu item component. */ export default function PluginPreviewMenuItem( props ) { const context = usePluginContext(); diff --git a/packages/editor/src/components/plugin-sidebar-more-menu-item/index.js b/packages/editor/src/components/plugin-sidebar-more-menu-item/index.js index 0d7695c9abfe12..379a0720dc8a91 100644 --- a/packages/editor/src/components/plugin-sidebar-more-menu-item/index.js +++ b/packages/editor/src/components/plugin-sidebar-more-menu-item/index.js @@ -10,6 +10,7 @@ import { ComplementaryAreaMoreMenuItem } from '@wordpress/interface'; * * @param {Object} props Component props. * @param {string} props.target A string identifying the target sidebar you wish to be activated by this menu item. Must be the same as the `name` prop you have given to that sidebar. + * @param {React.ReactNode} [props.children] Children to be rendered. * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered to the left of the menu item label. * * @example @@ -48,9 +49,8 @@ import { ComplementaryAreaMoreMenuItem } from '@wordpress/interface'; * ); * ``` * - * @return {Component} The component to be rendered. + * @return {React.ReactNode} The rendered component. */ - export default function PluginSidebarMoreMenuItem( props ) { return ( { diff --git a/packages/editor/src/components/post-author/panel.js b/packages/editor/src/components/post-author/panel.js index 6c6a51918902dc..5a413aedac09cf 100644 --- a/packages/editor/src/components/post-author/panel.js +++ b/packages/editor/src/components/post-author/panel.js @@ -39,7 +39,7 @@ function PostAuthorToggle( { isOpen, onClick } ) { /** * Renders the Post Author Panel component. * - * @return {Component} The component to be rendered. + * @return {React.ReactNode} The rendered component. */ export function PostAuthor() { // Use internal state instead of a ref to make sure that the component diff --git a/packages/editor/src/components/post-comments/index.js b/packages/editor/src/components/post-comments/index.js index 1d331811b46b26..6e69f9bce4f838 100644 --- a/packages/editor/src/components/post-comments/index.js +++ b/packages/editor/src/components/post-comments/index.js @@ -61,6 +61,6 @@ function PostComments() { /** * A form for managing comment status. * - * @return {JSX.Element} The rendered PostComments component. + * @return {React.ReactNode} The rendered PostComments component. */ export default PostComments; diff --git a/packages/editor/src/components/post-discussion/panel.js b/packages/editor/src/components/post-discussion/panel.js index c539791d404dec..280ab11b0447e7 100644 --- a/packages/editor/src/components/post-discussion/panel.js +++ b/packages/editor/src/components/post-discussion/panel.js @@ -93,7 +93,7 @@ function PostDiscussionToggle( { isOpen, onClick } ) { * checks whether the current post has support for the * above and if the `discussion-panel` panel is enabled. * - * @return {JSX.Element|null} The rendered PostDiscussionPanel component. + * @return {React.ReactNode} The rendered PostDiscussionPanel component. */ export default function PostDiscussionPanel() { const { isEnabled } = useSelect( ( select ) => { diff --git a/packages/editor/src/components/post-excerpt/check.js b/packages/editor/src/components/post-excerpt/check.js index 77436ecfed218a..c518d90e424a9b 100644 --- a/packages/editor/src/components/post-excerpt/check.js +++ b/packages/editor/src/components/post-excerpt/check.js @@ -6,10 +6,10 @@ import PostTypeSupportCheck from '../post-type-support-check'; /** * Component for checking if the post type supports the excerpt field. * - * @param {Object} props Props. - * @param {Element} props.children Children to be rendered. + * @param {Object} props Props. + * @param {React.ReactNode} props.children Children to be rendered. * - * @return {Component} The component to be rendered. + * @return {React.ReactNode} The rendered component. */ function PostExcerptCheck( { children } ) { return ( diff --git a/packages/editor/src/components/post-excerpt/panel.js b/packages/editor/src/components/post-excerpt/panel.js index 9c09796f467040..d4f2b27126c7c1 100644 --- a/packages/editor/src/components/post-excerpt/panel.js +++ b/packages/editor/src/components/post-excerpt/panel.js @@ -83,7 +83,7 @@ function ExcerptPanel() { /** * Is rendered if the post type supports excerpts and allows editing the excerpt. * - * @return {JSX.Element} The rendered PostExcerptPanel component. + * @return {React.ReactNode} The rendered PostExcerptPanel component. */ export default function PostExcerptPanel() { return ( diff --git a/packages/editor/src/components/post-excerpt/plugin.js b/packages/editor/src/components/post-excerpt/plugin.js index 64861162a0f637..50c494c01cb6d8 100644 --- a/packages/editor/src/components/post-excerpt/plugin.js +++ b/packages/editor/src/components/post-excerpt/plugin.js @@ -12,9 +12,9 @@ const { Fill, Slot } = createSlotFill( 'PluginPostExcerpt' ); /** * Renders a post excerpt panel in the post sidebar. * - * @param {Object} props Component properties. - * @param {string} [props.className] An optional class name added to the row. - * @param {Element} props.children Children to be rendered. + * @param {Object} props Component properties. + * @param {string} [props.className] An optional class name added to the row. + * @param {React.ReactNode} props.children Children to be rendered. * * @example * ```js @@ -46,7 +46,7 @@ const { Fill, Slot } = createSlotFill( 'PluginPostExcerpt' ); * ); * ``` * - * @return {Component} The component to be rendered. + * @return {React.ReactNode} The rendered component. */ const PluginPostExcerpt = ( { children, className } ) => { return ( diff --git a/packages/editor/src/components/post-featured-image/check.js b/packages/editor/src/components/post-featured-image/check.js index 823559f766bc35..700a3b8edfd032 100644 --- a/packages/editor/src/components/post-featured-image/check.js +++ b/packages/editor/src/components/post-featured-image/check.js @@ -8,10 +8,10 @@ import ThemeSupportCheck from '../theme-support-check'; * Wrapper component that renders its children only if the post type supports a featured image * and the theme supports post thumbnails. * - * @param {Object} props Props. - * @param {Element} props.children Children to be rendered. + * @param {Object} props Props. + * @param {React.ReactNode} props.children Children to be rendered. * - * @return {Component} The component to be rendered. + * @return {React.ReactNode} The rendered component. */ function PostFeaturedImageCheck( { children } ) { return ( diff --git a/packages/editor/src/components/post-featured-image/panel.js b/packages/editor/src/components/post-featured-image/panel.js index dd2a1527152ddf..8621b2eb886337 100644 --- a/packages/editor/src/components/post-featured-image/panel.js +++ b/packages/editor/src/components/post-featured-image/panel.js @@ -21,7 +21,7 @@ const PANEL_NAME = 'featured-image'; * @param {Object} props Props. * @param {boolean} props.withPanelBody Whether to include the panel body. Default true. * - * @return {Component|null} The component to be rendered. + * @return {React.ReactNode} The component to be rendered. * Return Null if the editor panel is disabled for featured image. */ export default function PostFeaturedImagePanel( { withPanelBody = true } ) { diff --git a/packages/editor/src/components/post-format/check.js b/packages/editor/src/components/post-format/check.js index 35729770b93c40..fe791862e1cebb 100644 --- a/packages/editor/src/components/post-format/check.js +++ b/packages/editor/src/components/post-format/check.js @@ -9,7 +9,15 @@ import { useSelect } from '@wordpress/data'; import PostTypeSupportCheck from '../post-type-support-check'; import { store as editorStore } from '../../store'; -function PostFormatCheck( { children } ) { +/** + * Component check if there are any post formats. + * + * @param {Object} props The component props. + * @param {React.ReactNode} props.children The child elements to render. + * + * @return {React.ReactNode} The rendered component or null if post formats are disabled. + */ +export default function PostFormatCheck( { children } ) { const disablePostFormats = useSelect( ( select ) => select( editorStore ).getEditorSettings().disablePostFormats, @@ -26,13 +34,3 @@ function PostFormatCheck( { children } ) { ); } - -/** - * Component check if there are any post formats. - * - * @param {Object} props The component props. - * @param {Element} props.children The child elements to render. - * - * @return {Component|null} The rendered component or null if post formats are disabled. - */ -export default PostFormatCheck; diff --git a/packages/editor/src/components/post-format/index.js b/packages/editor/src/components/post-format/index.js index 8f7423239600f2..d98720cd6fa93f 100644 --- a/packages/editor/src/components/post-format/index.js +++ b/packages/editor/src/components/post-format/index.js @@ -46,7 +46,7 @@ export const POST_FORMATS = [ * * ``` * - * @return {JSX.Element} The rendered PostFormat component. + * @return {React.ReactNode} The rendered PostFormat component. */ export default function PostFormat() { const instanceId = useInstanceId( PostFormat ); diff --git a/packages/editor/src/components/post-format/panel.js b/packages/editor/src/components/post-format/panel.js index faaf88b785a4b2..18704eda6fc448 100644 --- a/packages/editor/src/components/post-format/panel.js +++ b/packages/editor/src/components/post-format/panel.js @@ -18,7 +18,7 @@ import { store as editorStore } from '../../store'; /** * Renders the Post Author Panel component. * - * @return {Component} The component to be rendered. + * @return {React.ReactNode} The rendered component. */ function PostFormat() { const { postFormat } = useSelect( ( select ) => { diff --git a/packages/editor/src/components/post-last-revision/check.js b/packages/editor/src/components/post-last-revision/check.js index c570f5e42cdc32..cb3c655e1b7cc3 100644 --- a/packages/editor/src/components/post-last-revision/check.js +++ b/packages/editor/src/components/post-last-revision/check.js @@ -12,10 +12,10 @@ import { store as editorStore } from '../../store'; /** * Wrapper component that renders its children if the post has more than one revision. * - * @param {Object} props Props. - * @param {Element} props.children Children to be rendered. + * @param {Object} props Props. + * @param {React.ReactNode} props.children Children to be rendered. * - * @return {Component|null} Rendered child components if post has more than one revision, otherwise null. + * @return {React.ReactNode} Rendered child components if post has more than one revision, otherwise null. */ function PostLastRevisionCheck( { children } ) { const { lastRevisionId, revisionsCount } = useSelect( ( select ) => { diff --git a/packages/editor/src/components/post-last-revision/index.js b/packages/editor/src/components/post-last-revision/index.js index fd68f9703cb4e2..ac25e6cb8f30d6 100644 --- a/packages/editor/src/components/post-last-revision/index.js +++ b/packages/editor/src/components/post-last-revision/index.js @@ -28,7 +28,7 @@ function usePostLastRevisionInfo() { /** * Renders the component for displaying the last revision of a post. * - * @return {Component} The component to be rendered. + * @return {React.ReactNode} The rendered component. */ function PostLastRevision() { const { lastRevisionId, revisionsCount } = usePostLastRevisionInfo(); diff --git a/packages/editor/src/components/post-last-revision/panel.js b/packages/editor/src/components/post-last-revision/panel.js index e87475cc2b34e9..55a3ba571c4b0a 100644 --- a/packages/editor/src/components/post-last-revision/panel.js +++ b/packages/editor/src/components/post-last-revision/panel.js @@ -12,7 +12,7 @@ import PostLastRevisionCheck from './check'; /** * Renders the panel for displaying the last revision of a post. * - * @return {Component} The component to be rendered. + * @return {React.ReactNode} The rendered component. */ function PostLastRevisionPanel() { return ( diff --git a/packages/editor/src/components/post-locked-modal/index.js b/packages/editor/src/components/post-locked-modal/index.js index 7bfa2d23fd9808..16cff5af976841 100644 --- a/packages/editor/src/components/post-locked-modal/index.js +++ b/packages/editor/src/components/post-locked-modal/index.js @@ -24,7 +24,7 @@ import { store as editorStore } from '../../store'; * A modal component that is displayed when a post is locked for editing by another user. * The modal provides information about the lock status and options to take over or exit the editor. * - * @return {JSX.Element|null} The rendered PostLockedModal component. + * @return {React.ReactNode} The rendered PostLockedModal component. */ export default function PostLockedModal() { const instanceId = useInstanceId( PostLockedModal ); diff --git a/packages/editor/src/components/post-pending-status/check.js b/packages/editor/src/components/post-pending-status/check.js index 7a4ff5195041c6..9f407d8c8cd82a 100644 --- a/packages/editor/src/components/post-pending-status/check.js +++ b/packages/editor/src/components/post-pending-status/check.js @@ -13,10 +13,10 @@ import { store as editorStore } from '../../store'; * If the post is already published or the user doesn't have the * capability to publish, it returns null. * - * @param {Object} props Component properties. - * @param {Element} props.children Children to be rendered. + * @param {Object} props Component properties. + * @param {React.ReactElement} props.children Children to be rendered. * - * @return {JSX.Element|null} The rendered child elements or null if the post is already published or the user doesn't have the capability to publish. + * @return {React.ReactElement} The rendered child elements or null if the post is already published or the user doesn't have the capability to publish. */ export function PostPendingStatusCheck( { children } ) { const { hasPublishAction, isPublished } = useSelect( ( select ) => { diff --git a/packages/editor/src/components/post-pending-status/index.js b/packages/editor/src/components/post-pending-status/index.js index 8363ebc715891b..352570c44a6630 100644 --- a/packages/editor/src/components/post-pending-status/index.js +++ b/packages/editor/src/components/post-pending-status/index.js @@ -14,7 +14,7 @@ import { store as editorStore } from '../../store'; /** * A component for displaying and toggling the pending status of a post. * - * @return {JSX.Element} The rendered component. + * @return {React.ReactNode} The rendered component. */ export function PostPendingStatus() { const status = useSelect( diff --git a/packages/editor/src/components/post-preview-button/index.js b/packages/editor/src/components/post-preview-button/index.js index d57143cd355d80..d1755f96b68615 100644 --- a/packages/editor/src/components/post-preview-button/index.js +++ b/packages/editor/src/components/post-preview-button/index.js @@ -112,7 +112,7 @@ function writeInterstitialMessage( targetDocument ) { * @param {string} props.role The role attribute for the button. * @param {Function} props.onPreview The callback function for preview event. * - * @return {JSX.Element|null} The rendered button component. + * @return {React.ReactNode} The rendered button component. */ export default function PostPreviewButton( { className, diff --git a/packages/editor/src/components/post-schedule/check.js b/packages/editor/src/components/post-schedule/check.js index 28456b90371cc3..32526a977f94fa 100644 --- a/packages/editor/src/components/post-schedule/check.js +++ b/packages/editor/src/components/post-schedule/check.js @@ -11,10 +11,10 @@ import { store as editorStore } from '../../store'; /** * Wrapper component that renders its children only if post has a publish action. * - * @param {Object} props Props. - * @param {Element} props.children Children to be rendered. + * @param {Object} props Props. + * @param {React.ReactElement} props.children Children to be rendered. * - * @return {Component} - The component to be rendered or null if there is no publish action. + * @return {React.ReactElement} - The component to be rendered or null if there is no publish action. */ export default function PostScheduleCheck( { children } ) { const hasPublishAction = useSelect( ( select ) => { diff --git a/packages/editor/src/components/post-schedule/index.js b/packages/editor/src/components/post-schedule/index.js index 94387ed4267fa9..c9b017bcfa80df 100644 --- a/packages/editor/src/components/post-schedule/index.js +++ b/packages/editor/src/components/post-schedule/index.js @@ -27,7 +27,7 @@ const { PrivatePublishDateTimePicker } = unlock( blockEditorPrivateApis ); * @param {Object} props Props. * @param {Function} props.onClose Function to close the component. * - * @return {Component} The component to be rendered. + * @return {React.ReactNode} The rendered component. */ export default function PostSchedule( props ) { return ( diff --git a/packages/editor/src/components/post-schedule/label.js b/packages/editor/src/components/post-schedule/label.js index f6cf3811db7916..2b8819747e7e0c 100644 --- a/packages/editor/src/components/post-schedule/label.js +++ b/packages/editor/src/components/post-schedule/label.js @@ -15,7 +15,7 @@ import { store as editorStore } from '../../store'; * * @param {Object} props Props. * - * @return {Component} The component to be rendered. + * @return {React.ReactNode} The rendered component. */ export default function PostScheduleLabel( props ) { return usePostScheduleLabel( props ); diff --git a/packages/editor/src/components/post-schedule/panel.js b/packages/editor/src/components/post-schedule/panel.js index 5d63da5e30c910..fd453a4667417f 100644 --- a/packages/editor/src/components/post-schedule/panel.js +++ b/packages/editor/src/components/post-schedule/panel.js @@ -31,7 +31,7 @@ const DESIGN_POST_TYPES = [ /** * Renders the Post Schedule Panel component. * - * @return {Component} The component to be rendered. + * @return {React.ReactNode} The rendered component. */ export default function PostSchedulePanel() { const [ popoverAnchor, setPopoverAnchor ] = useState( null ); diff --git a/packages/editor/src/components/post-slug/check.js b/packages/editor/src/components/post-slug/check.js index 86bf04814c934d..8ca7078a1a9e24 100644 --- a/packages/editor/src/components/post-slug/check.js +++ b/packages/editor/src/components/post-slug/check.js @@ -6,10 +6,10 @@ import PostTypeSupportCheck from '../post-type-support-check'; /** * Wrapper component that renders its children only if the post type supports the slug. * - * @param {Object} props Props. - * @param {Element} props.children Children to be rendered. + * @param {Object} props Props. + * @param {React.ReactNode} props.children Children to be rendered. * - * @return {Component} The component to be rendered. + * @return {React.ReactNode} The rendered component. */ export default function PostSlugCheck( { children } ) { return ( diff --git a/packages/editor/src/components/post-slug/index.js b/packages/editor/src/components/post-slug/index.js index 1a4f8e93d7565c..afff7f361ea428 100644 --- a/packages/editor/src/components/post-slug/index.js +++ b/packages/editor/src/components/post-slug/index.js @@ -62,7 +62,7 @@ function PostSlugControl() { /** * Renders the PostSlug component. It provide a control for editing the post slug. * - * @return {Component} The component to be rendered. + * @return {React.ReactNode} The rendered component. */ export default function PostSlug() { return ( diff --git a/packages/editor/src/components/post-sticky/check.js b/packages/editor/src/components/post-sticky/check.js index f504effca82c6b..ede5c22f3c3e32 100644 --- a/packages/editor/src/components/post-sticky/check.js +++ b/packages/editor/src/components/post-sticky/check.js @@ -11,10 +11,10 @@ import { store as editorStore } from '../../store'; /** * Wrapper component that renders its children only if post has a sticky action. * - * @param {Object} props Props. - * @param {Element} props.children Children to be rendered. + * @param {Object} props Props. + * @param {React.ReactElement} props.children Children to be rendered. * - * @return {Component} The component to be rendered or null if post type is not 'post' or hasStickyAction is false. + * @return {React.ReactElement} The component to be rendered or null if post type is not 'post' or hasStickyAction is false. */ export default function PostStickyCheck( { children } ) { const { hasStickyAction, postType } = useSelect( ( select ) => { diff --git a/packages/editor/src/components/post-sticky/index.js b/packages/editor/src/components/post-sticky/index.js index 43a4bea98de26e..6f5b914cb2f352 100644 --- a/packages/editor/src/components/post-sticky/index.js +++ b/packages/editor/src/components/post-sticky/index.js @@ -14,7 +14,7 @@ import { store as editorStore } from '../../store'; /** * Renders the PostSticky component. It provides a checkbox control for the sticky post feature. * - * @return {Component} The component to be rendered. + * @return {React.ReactNode} The rendered component. */ export default function PostSticky() { const postSticky = useSelect( ( select ) => { diff --git a/packages/editor/src/components/post-switch-to-draft-button/index.js b/packages/editor/src/components/post-switch-to-draft-button/index.js index a743c7a2991ffb..6a41e1fad597a2 100644 --- a/packages/editor/src/components/post-switch-to-draft-button/index.js +++ b/packages/editor/src/components/post-switch-to-draft-button/index.js @@ -18,7 +18,7 @@ import { store as editorStore } from '../../store'; /** * Renders a button component that allows the user to switch a post to draft status. * - * @return {JSX.Element} The rendered component. + * @return {React.ReactNode} The rendered component. */ export default function PostSwitchToDraftButton() { deprecated( 'wp.editor.PostSwitchToDraftButton', { diff --git a/packages/editor/src/components/post-sync-status/index.js b/packages/editor/src/components/post-sync-status/index.js index d3e2a1a5522e89..5f965c01503f5c 100644 --- a/packages/editor/src/components/post-sync-status/index.js +++ b/packages/editor/src/components/post-sync-status/index.js @@ -13,7 +13,7 @@ import { store as editorStore } from '../../store'; /** * Renders the sync status of a post. * - * @return {JSX.Element|null} The rendered sync status component. + * @return {React.ReactNode} The rendered sync status component. */ export default function PostSyncStatus() { const { syncStatus, postType } = useSelect( ( select ) => { diff --git a/packages/editor/src/components/post-taxonomies/check.js b/packages/editor/src/components/post-taxonomies/check.js index 401b1adad7cad4..ce3db319ae2e8a 100644 --- a/packages/editor/src/components/post-taxonomies/check.js +++ b/packages/editor/src/components/post-taxonomies/check.js @@ -12,10 +12,10 @@ import { store as editorStore } from '../../store'; /** * Renders the children components only if the current post type has taxonomies. * - * @param {Object} props The component props. - * @param {Element} props.children The children components to render. + * @param {Object} props The component props. + * @param {React.ReactNode} props.children The children components to render. * - * @return {Component|null} The rendered children components or null if the current post type has no taxonomies. + * @return {React.ReactElement} The rendered children components or null if the current post type has no taxonomies. */ export default function PostTaxonomiesCheck( { children } ) { const hasTaxonomies = useSelect( ( select ) => { diff --git a/packages/editor/src/components/post-taxonomies/flat-term-selector.js b/packages/editor/src/components/post-taxonomies/flat-term-selector.js index cd9377766af503..890175534c8b4a 100644 --- a/packages/editor/src/components/post-taxonomies/flat-term-selector.js +++ b/packages/editor/src/components/post-taxonomies/flat-term-selector.js @@ -71,7 +71,7 @@ const Wrapper = ( { children, __nextHasNoMarginBottom } ) => * @param {string} props.slug The slug of the taxonomy. * @param {boolean} props.__nextHasNoMarginBottom Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 7.0. (The prop can be safely removed once this happens.) * - * @return {JSX.Element} The rendered flat term selector component. + * @return {React.ReactNode} The rendered flat term selector component. */ export function FlatTermSelector( { slug, __nextHasNoMarginBottom } ) { const [ values, setValues ] = useState( [] ); diff --git a/packages/editor/src/components/post-taxonomies/panel.js b/packages/editor/src/components/post-taxonomies/panel.js index 760626f984db36..f75fa74cc3d2e9 100644 --- a/packages/editor/src/components/post-taxonomies/panel.js +++ b/packages/editor/src/components/post-taxonomies/panel.js @@ -11,6 +11,15 @@ import { store as editorStore } from '../../store'; import PostTaxonomiesForm from './index'; import PostTaxonomiesCheck from './check'; +/** + * Renders a panel for a specific taxonomy. + * + * @param {Object} props The component props. + * @param {Object} props.taxonomy The taxonomy object. + * @param {React.ReactNode} props.children The child components. + * + * @return {React.ReactNode} The rendered taxonomy panel. + */ function TaxonomyPanel( { taxonomy, children } ) { const slug = taxonomy?.slug; const panelName = slug ? `taxonomy-panel-${ slug }` : ''; @@ -47,7 +56,12 @@ function TaxonomyPanel( { taxonomy, children } ) { ); } -function PostTaxonomies() { +/** + * Component that renders the post taxonomies panel. + * + * @return {React.ReactNode} The rendered component. + */ +export default function PostTaxonomies() { return ( ); } - -/** - * Renders a panel for a specific taxonomy. - * - * @param {Object} props The component props. - * @param {Object} props.taxonomy The taxonomy object. - * @param {Element} props.children The child components. - * - * @return {Component} The rendered taxonomy panel. - */ -export default PostTaxonomies; diff --git a/packages/editor/src/components/post-template/classic-theme.js b/packages/editor/src/components/post-template/classic-theme.js index 4a65a9b4c75636..4345e06211c661 100644 --- a/packages/editor/src/components/post-template/classic-theme.js +++ b/packages/editor/src/components/post-template/classic-theme.js @@ -63,7 +63,7 @@ function PostTemplateToggle( { isOpen, onClick } ) { * @param {Object} props The component props. * @param {Function} props.onClose The function to close the dropdown. * - * @return {JSX.Element} The rendered dropdown content. + * @return {React.ReactNode} The rendered dropdown content. */ function PostTemplateDropdownContent( { onClose } ) { const allowSwitchingTemplate = useAllowSwitchingTemplates(); @@ -235,6 +235,6 @@ function ClassicThemeControl() { * * The dropdown menu includes a button for toggling the menu, a list of available templates, and options for creating and editing templates. * - * @return {JSX.Element} The rendered ClassicThemeControl component. + * @return {React.ReactNode} The rendered ClassicThemeControl component. */ export default ClassicThemeControl; diff --git a/packages/editor/src/components/post-template/panel.js b/packages/editor/src/components/post-template/panel.js index b5f0d34197c686..903612ef11ed15 100644 --- a/packages/editor/src/components/post-template/panel.js +++ b/packages/editor/src/components/post-template/panel.js @@ -16,7 +16,7 @@ import PostPanelRow from '../post-panel-row'; /** * Displays the template controls based on the current editor settings and user permissions. * - * @return {JSX.Element|null} The rendered PostTemplatePanel component. + * @return {React.ReactNode} The rendered PostTemplatePanel component. */ export default function PostTemplatePanel() { const { templateId, isBlockTheme } = useSelect( ( select ) => { diff --git a/packages/editor/src/components/post-text-editor/index.js b/packages/editor/src/components/post-text-editor/index.js index c3dc61a0b4a2ef..0ae569c3e15301 100644 --- a/packages/editor/src/components/post-text-editor/index.js +++ b/packages/editor/src/components/post-text-editor/index.js @@ -22,7 +22,7 @@ import { store as editorStore } from '../../store'; /** * Displays the Post Text Editor along with content in Visual and Text mode. * - * @return {JSX.Element|null} The rendered PostTextEditor component. + * @return {React.ReactNode} The rendered PostTextEditor component. */ export default function PostTextEditor() { const instanceId = useInstanceId( PostTextEditor ); diff --git a/packages/editor/src/components/post-title/index.js b/packages/editor/src/components/post-title/index.js index 7fc79eaeddffb5..090beb57f6170e 100644 --- a/packages/editor/src/components/post-title/index.js +++ b/packages/editor/src/components/post-title/index.js @@ -193,7 +193,7 @@ const PostTitle = forwardRef( ( _, forwardedRef ) => { * @param {Object} _ Unused parameter. * @param {Element} forwardedRef Forwarded ref for the component. * - * @return {Component} The rendered PostTitle component. + * @return {React.ReactNode} The rendered PostTitle component. */ export default forwardRef( ( _, forwardedRef ) => ( diff --git a/packages/editor/src/components/post-title/post-title-raw.js b/packages/editor/src/components/post-title/post-title-raw.js index 66c944b45871ab..9beba1068f8ef7 100644 --- a/packages/editor/src/components/post-title/post-title-raw.js +++ b/packages/editor/src/components/post-title/post-title-raw.js @@ -26,7 +26,7 @@ import usePostTitle from './use-post-title'; * @param {Object} _ Unused parameter. * @param {Element} forwardedRef Reference to the component's DOM node. * - * @return {Component} The rendered component. + * @return {React.ReactNode} The rendered component. */ function PostTitleRaw( _, forwardedRef ) { const { placeholder } = useSelect( ( select ) => { diff --git a/packages/editor/src/components/post-trash/check.js b/packages/editor/src/components/post-trash/check.js index 7edc7c0f18c273..893d46ef9a0867 100644 --- a/packages/editor/src/components/post-trash/check.js +++ b/packages/editor/src/components/post-trash/check.js @@ -13,10 +13,10 @@ import { GLOBAL_POST_TYPES } from '../../store/constants'; /** * Wrapper component that renders its children only if the post can trashed. * - * @param {Object} props - The component props. - * @param {Element} props.children - The child components to render. + * @param {Object} props - The component props. + * @param {React.ReactEl} props.children - The child components to render. * - * @return {Component|null} The rendered child components or null if the post can not trashed. + * @return {React.ReactElement} The rendered child components or null if the post can not trashed. */ export default function PostTrashCheck( { children } ) { const { canTrashPost } = useSelect( ( select ) => { diff --git a/packages/editor/src/components/post-trash/index.js b/packages/editor/src/components/post-trash/index.js index 743512e9efd7d4..2d3dd8bcb0c4b3 100644 --- a/packages/editor/src/components/post-trash/index.js +++ b/packages/editor/src/components/post-trash/index.js @@ -19,7 +19,7 @@ import PostTrashCheck from './check'; * Displays the Post Trash Button and Confirm Dialog in the Editor. * * @param {?{onActionPerformed: Object}} An object containing the onActionPerformed function. - * @return {JSX.Element|null} The rendered PostTrash component. + * @return {React.ReactNode} The rendered PostTrash component. */ export default function PostTrash( { onActionPerformed } ) { const registry = useRegistry(); diff --git a/packages/editor/src/components/post-type-support-check/index.js b/packages/editor/src/components/post-type-support-check/index.js index 613fda8eb82da3..f04aea84b0e411 100644 --- a/packages/editor/src/components/post-type-support-check/index.js +++ b/packages/editor/src/components/post-type-support-check/index.js @@ -13,13 +13,13 @@ import { store as editorStore } from '../../store'; * A component which renders its own children only if the current editor post * type supports one of the given `supportKeys` prop. * - * @param {Object} props Props. - * @param {Element} props.children Children to be rendered if post - * type supports. - * @param {(string|string[])} props.supportKeys String or string array of keys - * to test. + * @param {Object} props Props. + * @param {React.ReactElement} props.children Children to be rendered if post + * type supports. + * @param {(string|string[])} props.supportKeys String or string array of keys + * to test. * - * @return {Component} The component to be rendered. + * @return {React.ReactElement} The component to be rendered. */ function PostTypeSupportCheck( { children, supportKeys } ) { const postType = useSelect( ( select ) => { diff --git a/packages/editor/src/components/post-url/check.js b/packages/editor/src/components/post-url/check.js index 7eb390472bdd7d..a80d829de23221 100644 --- a/packages/editor/src/components/post-url/check.js +++ b/packages/editor/src/components/post-url/check.js @@ -12,10 +12,10 @@ import { store as editorStore } from '../../store'; /** * Check if the post URL is valid and visible. * - * @param {Object} props The component props. - * @param {Element} props.children The child components. + * @param {Object} props The component props. + * @param {React.ReactElement} props.children The child components. * - * @return {Component|null} The child components if the post URL is valid and visible, otherwise null. + * @return {React.ReactElement} The child components if the post URL is valid and visible, otherwise null. */ export default function PostURLCheck( { children } ) { const isVisible = useSelect( ( select ) => { diff --git a/packages/editor/src/components/post-url/index.js b/packages/editor/src/components/post-url/index.js index f03bdd59752a83..c72ca5825f6fe6 100644 --- a/packages/editor/src/components/post-url/index.js +++ b/packages/editor/src/components/post-url/index.js @@ -34,7 +34,7 @@ import { store as editorStore } from '../../store'; * * @param {Function} onClose Callback function to be executed when the popover is closed. * - * @return {Component} The rendered PostURL component. + * @return {React.ReactNode} The rendered PostURL component. */ export default function PostURL( { onClose } ) { const { diff --git a/packages/editor/src/components/post-url/label.js b/packages/editor/src/components/post-url/label.js index 4f03e2bce0d05f..277cc6cfc715d3 100644 --- a/packages/editor/src/components/post-url/label.js +++ b/packages/editor/src/components/post-url/label.js @@ -12,7 +12,7 @@ import { store as editorStore } from '../../store'; /** * Represents a label component for a post URL. * - * @return {Component} The PostURLLabel component. + * @return {React.ReactNode} The PostURLLabel component. */ export default function PostURLLabel() { return usePostURLLabel(); diff --git a/packages/editor/src/components/post-url/panel.js b/packages/editor/src/components/post-url/panel.js index 786a12cb8e6b54..97eaa8ccb77f8d 100644 --- a/packages/editor/src/components/post-url/panel.js +++ b/packages/editor/src/components/post-url/panel.js @@ -19,7 +19,7 @@ import { store as editorStore } from '../../store'; /** * Renders the `PostURLPanel` component. * - * @return {JSX.Element} The rendered PostURLPanel component. + * @return {React.ReactNode} The rendered PostURLPanel component. */ export default function PostURLPanel() { const { isFrontPage } = useSelect( ( select ) => { diff --git a/packages/editor/src/components/post-visibility/check.js b/packages/editor/src/components/post-visibility/check.js index 19a241ae1110ae..ea04a6b739617a 100644 --- a/packages/editor/src/components/post-visibility/check.js +++ b/packages/editor/src/components/post-visibility/check.js @@ -15,7 +15,7 @@ import { store as editorStore } from '../../store'; * @param {Object} props The component props. * @param {Function} props.render Function to render the component. * Receives an object with a `canEdit` property. - * @return {JSX.Element} The rendered component. + * @return {React.ReactNode} The rendered component. */ export default function PostVisibilityCheck( { render } ) { const canEdit = useSelect( ( select ) => { diff --git a/packages/editor/src/components/post-visibility/index.js b/packages/editor/src/components/post-visibility/index.js index e47f2acd664434..3eb0c157c337ca 100644 --- a/packages/editor/src/components/post-visibility/index.js +++ b/packages/editor/src/components/post-visibility/index.js @@ -22,7 +22,7 @@ import { store as editorStore } from '../../store'; * * @param {Object} props The component props. * @param {Function} props.onClose Function to call when the popover is closed. - * @return {JSX.Element} The rendered component. + * @return {React.ReactNode} The rendered component. */ export default function PostVisibility( { onClose } ) { const instanceId = useInstanceId( PostVisibility ); diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index 6c05e5b58235b3..996e9e68954591 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -411,7 +411,7 @@ export const ExperimentalEditorProvider = withRegistryProvider( * * ``` * - * @return {JSX.Element} The rendered EditorProvider component. + * @return {React.ReactNode} The rendered EditorProvider component. */ export function EditorProvider( props ) { return ( diff --git a/packages/editor/src/components/table-of-contents/index.js b/packages/editor/src/components/table-of-contents/index.js index 6fd83557b13ab7..47de10b66ebdd1 100644 --- a/packages/editor/src/components/table-of-contents/index.js +++ b/packages/editor/src/components/table-of-contents/index.js @@ -61,6 +61,6 @@ function TableOfContents( * @param {boolean} props.repositionDropdown Whether to reposition the dropdown. * @param {Element.ref} ref The component's ref. * - * @return {JSX.Element} The rendered table of contents component. + * @return {React.ReactNode} The rendered table of contents component. */ export default forwardRef( TableOfContents ); diff --git a/packages/editor/src/components/theme-support-check/index.js b/packages/editor/src/components/theme-support-check/index.js index 78fbde809a7088..1f29370d32199c 100644 --- a/packages/editor/src/components/theme-support-check/index.js +++ b/packages/editor/src/components/theme-support-check/index.js @@ -12,11 +12,11 @@ import { store as editorStore } from '../../store'; /** * Checks if the current theme supports specific features and renders the children if supported. * - * @param {Object} props The component props. - * @param {Element} props.children The children to render if the theme supports the specified features. - * @param {string|string[]} props.supportKeys The key(s) of the theme support(s) to check. + * @param {Object} props The component props. + * @param {React.ReactElement} props.children The children to render if the theme supports the specified features. + * @param {string|string[]} props.supportKeys The key(s) of the theme support(s) to check. * - * @return {JSX.Element|null} The rendered children if the theme supports the specified features, otherwise null. + * @return {React.ReactElement} The rendered children if the theme supports the specified features, otherwise null. */ export default function ThemeSupportCheck( { children, supportKeys } ) { const { postType, themeSupports } = useSelect( ( select ) => { diff --git a/packages/editor/src/components/time-to-read/index.js b/packages/editor/src/components/time-to-read/index.js index 5d748abc3049cb..21891273991a2c 100644 --- a/packages/editor/src/components/time-to-read/index.js +++ b/packages/editor/src/components/time-to-read/index.js @@ -23,7 +23,7 @@ const AVERAGE_READING_RATE = 189; /** * Component for showing Time To Read in Content. * - * @return {JSX.Element} The rendered TimeToRead component. + * @return {React.ReactNode} The rendered TimeToRead component. */ export default function TimeToRead() { const content = useSelect( diff --git a/packages/editor/src/components/unsaved-changes-warning/index.js b/packages/editor/src/components/unsaved-changes-warning/index.js index 49e2b7edf1f293..d04b1f36abcbb3 100644 --- a/packages/editor/src/components/unsaved-changes-warning/index.js +++ b/packages/editor/src/components/unsaved-changes-warning/index.js @@ -10,7 +10,7 @@ import { store as coreStore } from '@wordpress/core-data'; * Warns the user if there are unsaved changes before leaving the editor. * Compatible with Post Editor and Site Editor. * - * @return {Component} The component. + * @return {React.ReactNode} The component. */ export default function UnsavedChangesWarning() { const { __experimentalGetDirtyEntityRecords } = useSelect( coreStore ); diff --git a/packages/editor/src/components/word-count/index.js b/packages/editor/src/components/word-count/index.js index aab562b46b89ff..31eb4d6bfd8c35 100644 --- a/packages/editor/src/components/word-count/index.js +++ b/packages/editor/src/components/word-count/index.js @@ -13,7 +13,7 @@ import { store as editorStore } from '../../store'; /** * Renders the word count of the post content. * - * @return {JSX.Element|null} The rendered WordCount component. + * @return {React.ReactNode} The rendered WordCount component. */ export default function WordCount() { const content = useSelect( diff --git a/packages/editor/src/store/actions.js b/packages/editor/src/store/actions.js index 4942e50322e06e..9d0de08718cd2b 100644 --- a/packages/editor/src/store/actions.js +++ b/packages/editor/src/store/actions.js @@ -35,9 +35,9 @@ import { unlock } from '../lock-unlock'; * Returns an action generator used in signalling that editor has initialized with * the specified post object and editor settings. * - * @param {Object} post Post object. - * @param {Object} edits Initial edited attributes object. - * @param {Array?} template Block Template. + * @param {Object} post Post object. + * @param {Object} edits Initial edited attributes object. + * @param {Array} [template] Block Template. */ export const setupEditor = ( post, edits, template ) => @@ -157,8 +157,8 @@ export function setEditedPost( postType, postId ) { * Returns an action object used in signalling that attributes of the post have * been edited. * - * @param {Object} edits Post attributes to edit. - * @param {Object} options Options for the edit. + * @param {Object} edits Post attributes to edit. + * @param {Object} [options] Options for the edit. * * @example * ```js @@ -195,7 +195,7 @@ export const editPost = /** * Action for saving the current post in the editor. * - * @param {Object} options + * @param {Object} [options] */ export const savePost = ( options = {} ) => @@ -375,7 +375,8 @@ export const trashPost = * autosaving (e.g. on the Web, the post might be committed to Session * Storage). * - * @param {Object?} options Extra flags to identify the autosave. + * @param {Object} [options] Extra flags to identify the autosave. + * @param {boolean} [options.local] Whether to perform a local autosave. */ export const autosave = ( { local = false, ...options } = {} ) => @@ -598,8 +599,8 @@ export function unlockPostAutosaving( lockName ) { /** * Returns an action object used to signal that the blocks have been updated. * - * @param {Array} blocks Block Array. - * @param {?Object} options Optional options. + * @param {Array} blocks Block Array. + * @param {Object} [options] Optional options. */ export const resetEditorBlocks = ( blocks, options = {} ) => From 21ee975dbc831588cecda74af7a93dedb615448b Mon Sep 17 00:00:00 2001 From: Sukhendu Sekhar Guria Date: Mon, 25 Nov 2024 15:44:12 +0530 Subject: [PATCH 009/384] Fix: Preserve Display Preview State in File Block (#67263) Co-authored-by: Sukhendu2002 Co-authored-by: Mamaduka Co-authored-by: MadtownLems --- packages/block-library/src/file/edit.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/file/edit.js b/packages/block-library/src/file/edit.js index 937eb3d28eb192..838b807507d314 100644 --- a/packages/block-library/src/file/edit.js +++ b/packages/block-library/src/file/edit.js @@ -128,15 +128,21 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) { } const isPdf = newMedia.url.endsWith( '.pdf' ); + const pdfAttributes = { + displayPreview: isPdf + ? attributes.displayPreview ?? true + : undefined, + previewHeight: isPdf ? attributes.previewHeight ?? 600 : undefined, + }; + setAttributes( { href: newMedia.url, fileName: newMedia.title, textLinkHref: newMedia.url, id: newMedia.id, - displayPreview: isPdf ? true : undefined, - previewHeight: isPdf ? 600 : undefined, fileId: `wp-block-file--media-${ clientId }`, blob: undefined, + ...pdfAttributes, } ); setTemporaryURL(); } From a6a04bebfb96f47df6c1f238c0fe63233d6dd3f5 Mon Sep 17 00:00:00 2001 From: Bernie Reiter <96308+ockham@users.noreply.github.com> Date: Mon, 25 Nov 2024 11:20:51 +0100 Subject: [PATCH 010/384] Terms: Respect order specified by register_taxonomy() (#67154) It is possible to supply a default set of `args` to `register_taxonomy()` which will be used when querying a list of terms -- for example, `orderby` in order to specify how the resulting list of terms should be sorted. This commit makes it so that the list of terms returned by the Terms REST API controller respects that order. Co-authored-by: ockham Co-authored-by: jsnajdr --- backport-changelog/6.8/7848.md | 3 +++ lib/compat/wordpress-6.8/rest-api.php | 29 +++++++++++++++++++++++++++ 2 files changed, 32 insertions(+) create mode 100644 backport-changelog/6.8/7848.md diff --git a/backport-changelog/6.8/7848.md b/backport-changelog/6.8/7848.md new file mode 100644 index 00000000000000..84600eb4847cdb --- /dev/null +++ b/backport-changelog/6.8/7848.md @@ -0,0 +1,3 @@ +https://github.com/WordPress/wordpress-develop/pull/7848 + +* https://github.com/WordPress/gutenberg/pull/67154 diff --git a/lib/compat/wordpress-6.8/rest-api.php b/lib/compat/wordpress-6.8/rest-api.php index da1b657cda0783..080e4003f57b38 100644 --- a/lib/compat/wordpress-6.8/rest-api.php +++ b/lib/compat/wordpress-6.8/rest-api.php @@ -20,3 +20,32 @@ function gutenberg_add_post_type_rendering_mode() { } } add_action( 'rest_api_init', 'gutenberg_add_post_type_rendering_mode' ); + +// When querying terms for a given taxonomy in the REST API, respect the default +// query arguments set for that taxonomy upon registration. +function gutenberg_respect_taxonomy_default_args_in_rest_api( $args ) { + // If a `post` argument is provided, the Terms controller will use + // `wp_get_object_terms`, which respects the default query arguments, + // so we don't need to do anything. + if ( ! empty( $args['post'] ) ) { + return $args; + } + + $t = get_taxonomy( $args['taxonomy'] ); + if ( isset( $t->args ) && is_array( $t->args ) ) { + $args = array_merge( $args, $t->args ); + } + return $args; +} +add_action( + 'registered_taxonomy', + function ( $taxonomy ) { + add_filter( "rest_{$taxonomy}_query", 'gutenberg_respect_taxonomy_default_args_in_rest_api' ); + } +); +add_action( + 'unregistered_taxonomy', + function ( $taxonomy ) { + remove_filter( "rest_{$taxonomy}_query", 'gutenberg_respect_taxonomy_default_args_in_rest_api' ); + } +); From 814bb4e380293ab79704682a067ff980d24c6a8c Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Mon, 25 Nov 2024 14:45:29 +0400 Subject: [PATCH 011/384] Editor: Update focus return handler for the Featured Image (#67236) Co-authored-by: Mamaduka Co-authored-by: afercia --- .../components/post-featured-image/index.js | 30 +++++++++---------- 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/packages/editor/src/components/post-featured-image/index.js b/packages/editor/src/components/post-featured-image/index.js index 46a194f311a5e7..acf366506cc41e 100644 --- a/packages/editor/src/components/post-featured-image/index.js +++ b/packages/editor/src/components/post-featured-image/index.js @@ -18,7 +18,7 @@ import { Notice, } from '@wordpress/components'; import { isBlobURL } from '@wordpress/blob'; -import { useState, useRef, useEffect } from '@wordpress/element'; +import { useState, useRef } from '@wordpress/element'; import { compose } from '@wordpress/compose'; import { useSelect, withDispatch, withSelect } from '@wordpress/data'; import { @@ -102,17 +102,10 @@ function PostFeaturedImage( { noticeOperations, isRequestingFeaturedImageMedia, } ) { - const toggleRef = useRef(); + const returnsFocusRef = useRef( false ); const [ isLoading, setIsLoading ] = useState( false ); const { getSettings } = useSelect( blockEditorStore ); const { mediaSourceUrl } = getMediaDetails( media, currentPostId ); - const toggleFocusTimerRef = useRef(); - - useEffect( () => { - return () => { - clearTimeout( toggleFocusTimerRef.current ); - }; - }, [] ); function onDropFiles( filesList ) { getSettings().mediaUpload( { @@ -164,6 +157,13 @@ function PostFeaturedImage( { ); } + function returnFocus( node ) { + if ( returnsFocusRef.current && node ) { + node.focus(); + returnsFocusRef.current = false; + } + } + const isMissingMedia = ! isRequestingFeaturedImageMedia && !! featuredImageId && ! media; @@ -203,7 +203,7 @@ function PostFeaturedImage( { ) : (