Add: Mechanism to detect if a block instance matches a global styles …

…selector (#26945)
WordPress · Nov 13, 2020 · 390402e · 390402e
1 parent f7c91c8
commit 390402e
Show file tree

Hide file tree

Showing 5 changed files with 127 additions and 22 deletions.
diff --git 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
@@ -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,19 +70,39 @@ 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.
 			//
 			// 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
@@ -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
@@ -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
@@ -84,7 +84,7 @@ function GlobalStylesPanel( {
 
 	let panelTitle = blockType.title;
 	if ( 'object' === typeof blockType?.supports?.__experimentalSelector ) {
-		panelTitle += ` (${ context.selector })`;
+		panelTitle += ` (${ context.title })`;
 	}
 
 	return (