diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index e044bdc1a7d274..5f07c9e843f4bf 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -359,6 +359,7 @@ function BlockWithLayoutStyles( { block: BlockListBlock, props, blockGapSupport, + layoutClasses, } ) { const { name, attributes } = props; const id = useInstanceId( BlockListBlock ); @@ -369,7 +370,6 @@ function BlockWithLayoutStyles( { layout?.inherit || layout?.contentSize || layout?.wideSize ? { ...layout, type: 'constrained' } : layout || defaultBlockLayout || {}; - const layoutClasses = useLayoutClasses( attributes, name ); const { kebabCase } = unlock( componentsPrivateApis ); const selectorPrefix = `wp-container-${ kebabCase( name ) }-is-layout-`; @@ -415,8 +415,9 @@ function BlockWithLayoutStyles( { */ export const withLayoutStyles = createHigherOrderComponent( ( BlockListBlock ) => ( props ) => { - const { clientId, name } = props; + const { clientId, name, attributes } = props; const blockSupportsLayout = hasLayoutBlockSupport( name ); + const layoutClasses = useLayoutClasses( attributes, name ); const extraProps = useSelect( ( select ) => { // The callback returns early to avoid block editor subscription. @@ -444,13 +445,21 @@ export const withLayoutStyles = createHigherOrderComponent( ); if ( ! extraProps ) { - return ; + return ( + + ); } return ( );