From 26e35c77ffcf118d9a3f5e48c247aa0d20164904 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Mon, 15 Apr 2024 08:46:43 +0400
Subject: [PATCH] Layout: Always add semantic classes (#60668)

* Layout: Always add semantic classes
* Default to undefined
* Feedback

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: colorful-tones <colorful-tones@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: davecpage <davecpage@git.wordpress.org>
---
 packages/block-editor/src/hooks/layout.js | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

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 <BlockListBlock { ...props } />;
+			return (
+				<BlockListBlock
+					{ ...props }
+					__unstableLayoutClassNames={
+						blockSupportsLayout ? layoutClasses : undefined
+					}
+				/>
+			);
 		}
 
 		return (
 			<BlockWithLayoutStyles
 				block={ BlockListBlock }
 				props={ props }
+				layoutClasses={ layoutClasses }
 				{ ...extraProps }
 			/>
 		);