diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index d9fa632af32ef1..e044bdc1a7d274 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -50,13 +50,7 @@ function hasLayoutBlockSupport( blockName ) { */ export function useLayoutClasses( blockAttributes = {}, blockName = '' ) { const { kebabCase } = unlock( componentsPrivateApis ); - const rootPaddingAlignment = useSelect( ( select ) => { - const { getSettings } = select( blockEditorStore ); - return getSettings().__experimentalFeatures - ?.useRootPaddingAwareAlignments; - }, [] ); const { layout } = blockAttributes; - const { default: defaultBlockLayout } = getBlockSupport( blockName, layoutBlockSupportKey ) || {}; const usedLayout = @@ -78,12 +72,20 @@ export function useLayoutClasses( blockAttributes = {}, blockName = '' ) { layoutClassnames.push( baseClassName, compoundClassName ); } - if ( - ( usedLayout?.inherit || - usedLayout?.contentSize || - usedLayout?.type === 'constrained' ) && - rootPaddingAlignment - ) { + const hasGlobalPadding = useSelect( + ( select ) => { + return ( + ( usedLayout?.inherit || + usedLayout?.contentSize || + usedLayout?.type === 'constrained' ) && + select( blockEditorStore ).getSettings().__experimentalFeatures + ?.useRootPaddingAwareAlignments + ); + }, + [ usedLayout?.contentSize, usedLayout?.inherit, usedLayout?.type ] + ); + + if ( hasGlobalPadding ) { layoutClassnames.push( 'has-global-padding' ); } @@ -353,7 +355,11 @@ export function addAttribute( settings ) { return settings; } -function BlockWithLayoutStyles( { block: BlockListBlock, props } ) { +function BlockWithLayoutStyles( { + block: BlockListBlock, + props, + blockGapSupport, +} ) { const { name, attributes } = props; const id = useInstanceId( BlockListBlock ); const { layout } = attributes; @@ -369,7 +375,6 @@ function BlockWithLayoutStyles( { block: BlockListBlock, props } ) { const selectorPrefix = `wp-container-${ kebabCase( name ) }-is-layout-`; // Higher specificity to override defaults from theme.json. const selector = `.${ selectorPrefix }${ id }.${ selectorPrefix }${ id }`; - const [ blockGapSupport ] = useSettings( 'spacing.blockGap' ); const hasBlockGapSupport = blockGapSupport !== null; // Get CSS string for the current layout type. @@ -410,26 +415,44 @@ function BlockWithLayoutStyles( { block: BlockListBlock, props } ) { */ export const withLayoutStyles = createHigherOrderComponent( ( BlockListBlock ) => ( props ) => { - const blockSupportsLayout = hasLayoutBlockSupport( props.name ); - const shouldRenderLayoutStyles = useSelect( + const { clientId, name } = props; + const blockSupportsLayout = hasLayoutBlockSupport( name ); + const extraProps = useSelect( ( select ) => { // The callback returns early to avoid block editor subscription. if ( ! blockSupportsLayout ) { - return false; + return; + } + + const { getSettings, getBlockSettings } = unlock( + select( blockEditorStore ) + ); + const { disableLayoutStyles } = getSettings(); + + if ( disableLayoutStyles ) { + return; } - return ! select( blockEditorStore ).getSettings() - .disableLayoutStyles; + const [ blockGapSupport ] = getBlockSettings( + clientId, + 'spacing.blockGap' + ); + + return { blockGapSupport }; }, - [ blockSupportsLayout ] + [ blockSupportsLayout, clientId ] ); - if ( ! shouldRenderLayoutStyles ) { + if ( ! extraProps ) { return ; } return ( - + ); }, 'withLayoutStyles'