diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
index e044bdc1a7d27..5f07c9e843f4b 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 (
);