diff --git a/lib/class-wp-theme-json.php b/lib/class-wp-theme-json.php index c0a3401ef59537..6d9e8eae37d7ca 100644 --- a/lib/class-wp-theme-json.php +++ b/lib/class-wp-theme-json.php @@ -452,12 +452,16 @@ public static function get_blocks_metadata() { isset( $block_type->supports['__experimentalSelector'] ) && is_array( $block_type->supports['__experimentalSelector'] ) ) { - foreach ( $block_type->supports['__experimentalSelector'] as $key => $selector ) { + foreach ( $block_type->supports['__experimentalSelector'] as $key => $selector_data ) { self::$blocks_metadata[ $key ] = array( - 'selector' => $selector, - 'supports' => $block_supports, - 'blockName' => $block_name, + 'selector' => $selector_data['selector'], + 'supports' => $block_supports, + 'blockName' => $block_name, + 'attributes' => $selector_data['attributes'], ); + if ( isset( $selector_data['title'] ) ) { + self::$blocks_metadata[ $key ]['title'] = $selector_data['title']; + } } } else { self::$blocks_metadata[ $block_name ] = array( diff --git a/packages/block-editor/src/components/use-editor-feature/index.js b/packages/block-editor/src/components/use-editor-feature/index.js index c7afcb7db8bf2b..f55e8ec1d32505 100644 --- a/packages/block-editor/src/components/use-editor-feature/index.js +++ b/packages/block-editor/src/components/use-editor-feature/index.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { get } from 'lodash'; +import { get, isObject } from 'lodash'; /** * WordPress dependencies @@ -47,6 +47,15 @@ const deprecatedFlags = { }, }; +function blockAttributesMatch( blockAttributes, attributes ) { + for ( const attribute in attributes ) { + if ( attributes[ attribute ] !== blockAttributes[ attribute ] ) { + return false; + } + } + return true; +} + /** * Hook that retrieves the setting for the given editor feature. * It works with nested objects using by finding the value at path. @@ -61,11 +70,31 @@ const deprecatedFlags = { * ``` */ export default function useEditorFeature( featurePath ) { - const { name: blockName } = useBlockEditContext(); + const { name: blockName, clientId } = useBlockEditContext(); const setting = useSelect( ( select ) => { - const settings = select( 'core/block-editor' ).getSettings(); + const { getBlockAttributes, getSettings } = select( + 'core/block-editor' + ); + const settings = getSettings(); + const blockType = select( 'core/blocks' ).getBlockType( blockName ); + + let context = blockName; + const selectors = get( blockType, [ + 'supports', + '__experimentalSelector', + ] ); + if ( isObject( selectors ) ) { + const blockAttributes = getBlockAttributes( clientId ); + for ( const contextSelector in selectors ) { + const { attributes } = selectors[ contextSelector ]; + if ( blockAttributesMatch( blockAttributes, attributes ) ) { + context = contextSelector; + break; + } + } + } // 1 - Use __experimental features, if available. // We cascade to the global value if the block one is not available. @@ -73,7 +102,7 @@ export default function useEditorFeature( featurePath ) { // TODO: make it work for blocks that define multiple selectors // such as core/heading or core/post-title. const globalPath = `__experimentalFeatures.global.${ featurePath }`; - const blockPath = `__experimentalFeatures.${ blockName }.${ featurePath }`; + const blockPath = `__experimentalFeatures.${ context }.${ featurePath }`; const experimentalFeaturesResult = get( settings, blockPath ) ?? get( settings, globalPath ); if ( experimentalFeaturesResult !== undefined ) { @@ -94,7 +123,7 @@ export default function useEditorFeature( featurePath ) { // To remove when __experimentalFeatures are ported to core. return featurePath === 'typography.dropCap' ? true : undefined; }, - [ blockName, featurePath ] + [ blockName, clientId, featurePath ] ); return setting; diff --git a/packages/block-library/src/heading/block.json b/packages/block-library/src/heading/block.json index 50bf37cdaefa5d..fd8a683cfd404a 100644 --- a/packages/block-library/src/heading/block.json +++ b/packages/block-library/src/heading/block.json @@ -30,12 +30,48 @@ "fontSize": true, "lineHeight": true, "__experimentalSelector": { - "core/heading/h1": "h1", - "core/heading/h2": "h2", - "core/heading/h3": "h3", - "core/heading/h4": "h4", - "core/heading/h5": "h5", - "core/heading/h6": "h6" + "core/heading/h1": { + "selector": "h1", + "title": "h1", + "attributes": { + "level": 1 + } + }, + "core/heading/h2": { + "selector": "h2", + "title": "h2", + "attributes": { + "level": 2 + } + }, + "core/heading/h3": { + "selector": "h3", + "title": "h3", + "attributes": { + "level": 3 + } + }, + "core/heading/h4": { + "selector": "h4", + "title": "h4", + "attributes": { + "level": 4 + } + }, + "core/heading/h5": { + "selector": "h5", + "title": "h5", + "attributes": { + "level": 5 + } + }, + "core/heading/h6": { + "selector": "h6", + "title": "h6", + "attributes": { + "level": 6 + } + } }, "__unstablePasteTextInline": true } diff --git a/packages/block-library/src/post-title/block.json b/packages/block-library/src/post-title/block.json index e15a91c2815786..1c0f4adeb9c626 100644 --- a/packages/block-library/src/post-title/block.json +++ b/packages/block-library/src/post-title/block.json @@ -38,12 +38,48 @@ "lineHeight": true, "__experimentalFontFamily": true, "__experimentalSelector": { - "core/post-title/h1": "h1", - "core/post-title/h2": "h2", - "core/post-title/h3": "h3", - "core/post-title/h4": "h4", - "core/post-title/h5": "h5", - "core/post-title/h6": "h6" + "core/post-title/h1": { + "title": "h1", + "selector": "h1.wp-block-post-title", + "attributes": { + "level": 1 + } + }, + "core/post-title/h2": { + "title": "h2", + "selector": "h2.wp-block-post-title", + "attributes": { + "level": 2 + } + }, + "core/post-title/h3": { + "title": "h3", + "selector": "h3.wp-block-post-title", + "attributes": { + "level": 3 + } + }, + "core/post-title/h4": { + "title": "h4", + "selector": "h4.wp-block-post-title", + "attributes": { + "level": 4 + } + }, + "core/post-title/h5": { + "title": "h5", + "selector": "h5.wp-block-post-title", + "attributes": { + "level": 5 + } + }, + "core/post-title/h6": { + "title": "h6", + "selector": "h6.wp-block-post-title", + "attributes": { + "level": 6 + } + } } } } diff --git a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js index 9a763c0120f32f..6ba98304a0c184 100644 --- a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js +++ b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js @@ -84,7 +84,7 @@ function GlobalStylesPanel( { let panelTitle = blockType.title; if ( 'object' === typeof blockType?.supports?.__experimentalSelector ) { - panelTitle += ` (${ context.selector })`; + panelTitle += ` (${ context.title })`; } return (