Block editor: remove the unused element-fold axis from the inherited-value builder

Nothing in the shipping product ever passed an `element` to the inherited-value
builder or its hooks, so the entire element-fold path was dead. Remove the
`element` parameter, `pickLayerElementContribution`, `getElementObject`, the
element-scoped contribution entries in both the base and state passes, and the
`rootElement`/`blockElement`/`blockVariationElement` source descriptors.

Element styles still surface through the `elements` passthrough that keeps
`inheritedValue.elements.link.color.text` working, which is what the panels
actually read. Tests are updated to assert that nested passthrough shape
instead of the removed fold, and the dead `rootElement` entry is dropped from
the dimensions panel's non-cascading layer set.

Author: aaronrobertshaw

packages/block-editor/src/components/global-styles/build-inherited-value.js

@@ -88,13 +88,6 @@ const SOURCE_DESCRIPTORS = {
 		breadcrumb: [ SOURCE_BREADCRUMB_PARTS.styles ],
 		layer: 'root',
 	},
-	rootElement: {
-		breadcrumb: [
-			SOURCE_BREADCRUMB_PARTS.styles,
-			SOURCE_BREADCRUMB_PARTS.elements,
-		],
-		layer: 'rootElement',
-	},
 	block: {
 		breadcrumb: [
 			SOURCE_BREADCRUMB_PARTS.styles,
@@ -103,15 +96,6 @@ const SOURCE_DESCRIPTORS = {
 		],
 		layer: 'block',
 	},
-	blockElement: {
-		breadcrumb: [
-			SOURCE_BREADCRUMB_PARTS.styles,
-			SOURCE_BREADCRUMB_PARTS.blocks,
-			SOURCE_BREADCRUMB_PARTS.blockName,
-			SOURCE_BREADCRUMB_PARTS.elements,
-		],
-		layer: 'blockElement',
-	},
 	blockVariation: {
 		breadcrumb: [
 			SOURCE_BREADCRUMB_PARTS.styles,
@@ -122,38 +106,24 @@ const SOURCE_DESCRIPTORS = {
 		],
 		layer: 'blockVariation',
 	},
-	blockVariationElement: {
-		breadcrumb: [
-			SOURCE_BREADCRUMB_PARTS.styles,
-			SOURCE_BREADCRUMB_PARTS.blocks,
-			SOURCE_BREADCRUMB_PARTS.blockName,
-			SOURCE_BREADCRUMB_PARTS.variations,
-			SOURCE_BREADCRUMB_PARTS.variationName,
-			SOURCE_BREADCRUMB_PARTS.elements,
-		],
-		layer: 'blockVariationElement',
-	},
 };
 
 function createSourceDescriptor(
 	type,
-	{ blockName, variation, element, blockStyles } = {}
+	{ blockName, variation, blockStyles } = {}
 ) {
 	const descriptor = SOURCE_DESCRIPTORS[ type ];
 	if ( ! descriptor ) {
 		return null;
 	}
 	return {
 		...descriptor,
-		breadcrumb: element
-			? [ ...descriptor.breadcrumb, element ]
-			: [ ...descriptor.breadcrumb ],
+		breadcrumb: [ ...descriptor.breadcrumb ],
 		blockName: blockName ?? null,
 		variation: variation ?? null,
 		variationTitle:
 			blockStyles?.find( ( style ) => style.name === variation )?.label ??
 			null,
-		element: element ?? null,
 	};
 }
 
@@ -236,8 +206,7 @@ function isRefObject( v ) {
  * leaves and sub-trees that are not tree-structural and not the
  * `elements` sub-tree itself. The `elements` sub-tree IS preserved as a
  * passthrough on the final payload so panels that read e.g.
- * `inheritedValue.elements.link.color.text` keep working; it just does
- * not participate in the element-scoped fold.
+ * `inheritedValue.elements.link.color.text` keep working.
  *
  * Does not recurse or clone; the returned contribution references the
  * original layer's sub-objects. The deep-merge step copies them into a
@@ -269,37 +238,6 @@ function pickLayerRootContribution( layer ) {
 	return Object.keys( contribution ).length === 0 ? null : contribution;
 }
 
-/**
- * Pick the element-scope contribution from `layer.elements[element]`.
- * Returns a plain-object "layer-shaped" contribution — same top-level
- * keys as a normal layer — so it can be merged in the same pipeline as
- * root-scope contributions, inheriting deep-merge semantics.
- *
- * @param {Object}  layer   Raw styles layer.
- * @param {?string} element Element tag (e.g. `h2`, `link`).
- * @return {Object|null} Element-scope contribution, or `null` when no leaves contribute.
- */
-function pickLayerElementContribution( layer, element ) {
-	if ( ! element || ! layer || ! layer.elements ) {
-		return null;
-	}
-	const folded = layer.elements[ element ];
-	if ( ! folded || typeof folded !== 'object' || Array.isArray( folded ) ) {
-		return null;
-	}
-	const contribution = {};
-	for ( const key of Object.keys( folded ) ) {
-		if ( TREE_STRUCTURAL_KEYS.has( key ) || key === 'elements' ) {
-			continue;
-		}
-		if ( isExplicitEmpty( folded[ key ] ) ) {
-			continue;
-		}
-		contribution[ key ] = folded[ key ];
-	}
-	return Object.keys( contribution ).length === 0 ? null : contribution;
-}
-
 /**
  * Deep-merge `source` into `target` with the following rules:
  * - Plain objects recurse.
@@ -379,22 +317,6 @@ function deepMergeDroppingEmpties(
 	return target;
 }
 
-/**
- * Read a layer's `elements[ element ]` sub-object, guarding against
- * non-object values.
- *
- * @param {?Object} layer   Raw styles layer.
- * @param {?string} element Element tag (e.g. `h2`, `link`, `button`).
- * @return {Object|null} The element sub-object, or `null`.
- */
-function getElementObject( layer, element ) {
-	if ( ! layer || ! element ) {
-		return null;
-	}
-	const el = layer.elements?.[ element ];
-	return el && typeof el === 'object' && ! Array.isArray( el ) ? el : null;
-}
-
 /**
  * Resolve the state-scoped slice of a layer-shaped object for the selected
  * block style state, guarding against nullish inputs.
@@ -420,7 +342,6 @@ function getStateSlice( layerObject, selectedState ) {
  *
  * @param {Object}  args
  * @param {string}  args.blockName       Block name (e.g. `core/heading`).
- * @param {?string} [args.element]       Element tag to fold (e.g. `h2`, `link`), or null for block-scope only.
  * @param {?string} [args.ownVariation]  Active block style variation slug, or null.
  * @param {Object}  [args.globalStyles]  The `settings[ globalStylesDataKey ]` payload.
  * @param {Array}   [args.blockStyles]   Registered styles for the block type.
@@ -429,7 +350,6 @@ function getStateSlice( layerObject, selectedState ) {
  */
 function computeInheritedValue( {
 	blockName,
-	element = null,
 	ownVariation = null,
 	globalStyles,
 	blockStyles = [],
@@ -455,35 +375,21 @@ function computeInheritedValue( {
 		  ) ?? null
 		: null;
 
-	// Layers are ordered from low to high precedence. Root-scope and
-	// element-scope contributions are merged separately so element
-	// overrides can replace specific leaves without dropping sibling values.
+	// Layers are ordered from low to high precedence: root defaults, the
+	// block's own defaults, then the active block style variation. Each
+	// layer's `elements` sub-tree is preserved as a passthrough so panels
+	// can read element styles (e.g. `inheritedValue.elements.link`).
 	const contributions = [
 		createContribution(
 			pickLayerRootContribution( root ),
 			createSourceDescriptor( 'root' )
 		),
-		element
-			? createContribution(
-					pickLayerElementContribution( root, element ),
-					createSourceDescriptor( 'rootElement', { element } )
-			  )
-			: null,
 		block
 			? createContribution(
 					pickLayerRootContribution( block ),
 					createSourceDescriptor( 'block', { blockName } )
 			  )
 			: null,
-		block && element
-			? createContribution(
-					pickLayerElementContribution( block, element ),
-					createSourceDescriptor( 'blockElement', {
-						blockName,
-						element,
-					} )
-			  )
-			: null,
 		variation
 			? createContribution(
 					pickLayerRootContribution( variation ),
@@ -494,17 +400,6 @@ function computeInheritedValue( {
 					} )
 			  )
 			: null,
-		variation && element
-			? createContribution(
-					pickLayerElementContribution( variation, element ),
-					createSourceDescriptor( 'blockVariationElement', {
-						blockName,
-						variation: ownVariation,
-						blockStyles,
-						element,
-					} )
-			  )
-			: null,
 	];
 
 	// When a non-default block style state (pseudo and/or responsive
@@ -523,17 +418,6 @@ function computeInheritedValue( {
 				),
 				createSourceDescriptor( 'root' )
 			),
-			element
-				? createContribution(
-						pickLayerRootContribution(
-							getStateSlice(
-								getElementObject( root, element ),
-								selectedState
-							)
-						),
-						createSourceDescriptor( 'rootElement', { element } )
-				  )
-				: null,
 			block
 				? createContribution(
 						pickLayerRootContribution(
@@ -542,20 +426,6 @@ function computeInheritedValue( {
 						createSourceDescriptor( 'block', { blockName } )
 				  )
 				: null,
-			block && element
-				? createContribution(
-						pickLayerRootContribution(
-							getStateSlice(
-								getElementObject( block, element ),
-								selectedState
-							)
-						),
-						createSourceDescriptor( 'blockElement', {
-							blockName,
-							element,
-						} )
-				  )
-				: null,
 			variation
 				? createContribution(
 						pickLayerRootContribution(
@@ -567,22 +437,6 @@ function computeInheritedValue( {
 							blockStyles,
 						} )
 				  )
-				: null,
-			variation && element
-				? createContribution(
-						pickLayerRootContribution(
-							getStateSlice(
-								getElementObject( variation, element ),
-								selectedState
-							)
-						),
-						createSourceDescriptor( 'blockVariationElement', {
-							blockName,
-							variation: ownVariation,
-							blockStyles,
-							element,
-						} )
-				  )
 				: null
 		);
 	}
@@ -611,7 +465,7 @@ function computeInheritedValue( {
 
 /**
  * Shared memo for `buildInheritedValue`, keyed by Global
- * Styles object identity and a `(blockName, element, ownVariation)` composite.
+ * Styles object identity and a `(blockName, ownVariation)` composite.
  *
  * @type {WeakMap<object, Map<string, Object>>}
  */
@@ -646,8 +500,6 @@ export function buildInheritedValue( args ) {
 	const key =
 		( args.blockName || '' ) +
 		'\u0001' +
-		( args.element || '' ) +
-		'\u0001' +
 		( args.ownVariation || '' ) +
 		'\u0001' +
 		blockStylesKey +
@@ -667,6 +519,5 @@ export const __unstable = {
 	isExplicitEmpty,
 	isRefObject,
 	pickLayerRootContribution,
-	pickLayerElementContribution,
 	deepMergeDroppingEmpties,
 };

packages/block-editor/src/components/global-styles/dimensions-panel.js

@@ -170,7 +170,7 @@ function hasValue( value ) {
  * only — they are not CSS-inherited cascade properties, so descendant block
  * panels should not surface them as "inherited" placeholders.
  */
-const NON_CASCADING_ROOT_LAYERS = new Set( [ 'root', 'rootElement' ] );
+const NON_CASCADING_ROOT_LAYERS = new Set( [ 'root' ] );
 
 function isRootSourced( sources, pathKey ) {
 	return NON_CASCADING_ROOT_LAYERS.has( sources?.[ pathKey ]?.layer );

packages/block-editor/src/components/global-styles/inherited-value-context.js

@@ -99,41 +99,36 @@ export function InheritedValueProvider( {
 
 /**
  * Hook: returns the merged `inheritedValue` payload and source map for a
- * panel. Call once per panel, passing the element tag (if any) the panel
- * folds.
+ * panel. Call once per panel.
  *
  * Before the Provider is mounted, or during hydration before the
  * `globalStylesDataKey` payload settles, the hook returns empty value and
  * source objects. Each panel's existing `inheritedValue = value` default
  * then keeps pre-feature behavior after bridge components pass `.value`.
  *
  * The returned object identity is stable across renders when none of
- * `(globalStyles, blockName, element, ownVariation)` have changed.
+ * `(globalStyles, blockName, ownVariation)` have changed.
  *
- * @param {Object}  [args]
- * @param {?string} [args.element] Element tag to fold (e.g. `h2`, `link`).
  * @return {{ value: Object, sources: Object }} Merged panel-scoped payload and source map.
  */
-export function useInheritedValue( { element = null } = {} ) {
+export function useInheritedValue() {
 	const ctx = useContext( InheritedValueContext );
 	return useMemo( () => {
 		if ( ! ctx || ! ctx.blockName ) {
 			return { value: {}, sources: {} };
 		}
 		return buildInheritedValue( {
 			blockName: ctx.blockName,
-			element,
 			ownVariation: ctx.ownVariation,
 			globalStyles: ctx.globalStyles,
 			blockStyles: ctx.blockStyles,
 			selectedState: ctx.selectedState,
 		} );
-	}, [ ctx, element ] );
+	}, [ ctx ] );
 }
 
 export function useInheritedStyleValue( {
 	blockName,
-	element = null,
 	ownVariation = null,
 	selectedState = null,
 } ) {
@@ -145,20 +140,12 @@ export function useInheritedStyleValue( {
 		}
 		return buildInheritedValue( {
 			blockName,
-			element,
 			ownVariation,
 			globalStyles,
 			blockStyles,
 			selectedState,
 		} );
-	}, [
-		blockName,
-		element,
-		ownVariation,
-		globalStyles,
-		blockStyles,
-		selectedState,
-	] );
+	}, [ blockName, ownVariation, globalStyles, blockStyles, selectedState ] );
 }
 
 /**