diff --git a/packages/block-editor/src/hooks/block-style-variation.js b/packages/block-editor/src/hooks/block-style-variation.js index 336db687558f5..811f620a4422d 100644 --- a/packages/block-editor/src/hooks/block-style-variation.js +++ b/packages/block-editor/src/hooks/block-style-variation.js @@ -118,17 +118,42 @@ function useBlockProps( { name, className, clientId } ) { clientId ); + const descendantBlockNames = useSelect( + ( select ) => { + // Avoid a subscription if there is no variation. + if ( ! variation ) { + return; + } + const { getClientIdsOfDescendants, getBlockName } = + select( blockEditorStore ); + // Could be moved to a private memoized selector, but this also + // makes sure the reference is stable. + return JSON.stringify( [ + ...new Set( + [ clientId, ...getClientIdsOfDescendants( clientId ) ].map( + ( id ) => getBlockName( id ) + ) + ), + ] ); + }, + [ clientId, variation ] + ); + const variationStyles = useMemo( () => { if ( ! variation ) { return; } const variationConfig = { settings, styles }; + const names = JSON.parse( descendantBlockNames ); const blockSelectors = getBlockSelectors( - getBlockTypes(), + getBlockTypes().filter( ( blockType ) => + names.includes( blockType.name ) + ), getBlockStyles, clientId ); + const hasBlockGapSupport = false; const hasFallbackGapSupport = true; const disableLayoutStyles = true; @@ -151,7 +176,14 @@ function useBlockProps( { name, className, clientId } ) { variationStyles: true, } ); - }, [ variation, settings, styles, getBlockStyles, clientId ] ); + }, [ + variation, + settings, + styles, + getBlockStyles, + clientId, + descendantBlockNames, + ] ); useStyleOverride( { id: `variation-${ clientId }`,