Use is-layout pattern on layout generated classname (#57564)

WordPress · Jan 7, 2024 · cb8df38 · cb8df38
1 parent 9e93d55
commit cb8df38
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
@@ -639,7 +639,7 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 	* for features like the enhanced pagination of the Query block.
 	*/
 	$container_class = gutenberg_incremental_id_per_prefix(
-		'wp-container-' . sanitize_title( $block['blockName'] ) . '-layout-'
+		'wp-container-' . sanitize_title( $block['blockName'] ) . '-is-layout-'
 	);
 
 	// Set the correct layout type for blocks using legacy content width.
@@ -893,7 +893,7 @@ function gutenberg_restore_group_inner_container( $block_content, $block ) {
 			if ( $classes ) {
 				$classes = explode( ' ', $classes );
 				foreach ( $classes as $class_name ) {
-					if ( str_contains( $class_name, 'layout' ) ) {
+					if ( str_contains( $class_name, 'is-layout-' ) ) {
 						array_push( $layout_classes, $class_name );
 						$processor->remove_class( $class_name );
 					}

diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
@@ -351,7 +351,7 @@ function BlockWithLayoutStyles( { block: BlockListBlock, props } ) {
 	const layoutClasses = useLayoutClasses( attributes, name );
 
 	const { kebabCase } = unlock( componentsPrivateApis );
-	const selectorPrefix = `wp-container-${ kebabCase( name ) }-layout-`;
+	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' );