Group block: Add a row variation (#34535)

lib/block-supports/layout.php

@@ -160,11 +160,11 @@ function () use ( $style ) {
  */
 function gutenberg_restore_group_inner_container( $block_content, $block ) {
 	$group_with_inner_container_regex = '/(^\s*<div\b[^>]*wp-block-group(\s|")[^>]*>)(\s*<div\b[^>]*wp-block-group__inner-container(\s|")[^>]*>)((.|\S|\s)*)/';
-
 	if (
 		'core/group' !== $block['blockName'] ||
 		WP_Theme_JSON_Resolver_Gutenberg::theme_has_support() ||
-		1 === preg_match( $group_with_inner_container_regex, $block_content )
+		1 === preg_match( $group_with_inner_container_regex, $block_content ) ||
+		( isset( $block['attrs']['layout']['type'] ) && 'default' !== $block['attrs']['layout']['type'] )
 	) {
 		return $block_content;
 	}
@@ -180,7 +180,8 @@ function( $matches ) {
 	return $updated_content;
 }
 
-// This can be removed when plugin support requires WordPress 5.8.0+.
-if ( ! function_exists( 'wp_restore_group_inner_container' ) ) {
-	add_filter( 'render_block', 'gutenberg_restore_group_inner_container', 10, 2 );
+if ( function_exists( 'wp_restore_group_inner_container' ) ) {
+	remove_filter( 'render_block', 'wp_restore_group_inner_container', 10, 2 );
 }
+add_filter( 'render_block', 'gutenberg_restore_group_inner_container', 10, 2 );
+

packages/block-library/src/group/edit.js

@@ -28,18 +28,20 @@ function GroupEdit( { attributes, setAttributes, clientId } ) {
 	const defaultLayout = useSetting( 'layout' ) || {};
 	const { tagName: TagName = 'div', templateLock, layout = {} } = attributes;
 	const usedLayout = !! layout && layout.inherit ? defaultLayout : layout;
+	const { type = 'default' } = usedLayout;
+	const layoutSupportEnabled = themeSupportsLayout || type !== 'default';
 
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps(
-		themeSupportsLayout
+		layoutSupportEnabled
 			? blockProps
 			: { className: 'wp-block-group__inner-container' },
 		{
 			templateLock,
 			renderAppender: hasInnerBlocks
 				? undefined
 				: InnerBlocks.ButtonBlockAppender,
-			__experimentalLayout: themeSupportsLayout ? usedLayout : undefined,
+			__experimentalLayout: layoutSupportEnabled ? usedLayout : undefined,
 		}
 	);
 
@@ -63,10 +65,10 @@ function GroupEdit( { attributes, setAttributes, clientId } ) {
 					}
 				/>
 			</InspectorControls>
-			{ themeSupportsLayout && <TagName { ...innerBlocksProps } /> }
+			{ layoutSupportEnabled && <TagName { ...innerBlocksProps } /> }
 			{ /* Ideally this is not needed but it's there for backward compatibility reason
 				to keep this div for themes that might rely on its presence */ }
-			{ ! themeSupportsLayout && (
+			{ ! layoutSupportEnabled && (
 				<TagName { ...blockProps }>
 					<div { ...innerBlocksProps } />
 				</TagName>

packages/block-library/src/group/index.js

@@ -12,6 +12,7 @@ import deprecated from './deprecated';
 import edit from './edit';
 import metadata from './block.json';
 import save from './save';
+import variations from './variations';
 
 const { name } = metadata;
 
@@ -135,4 +136,5 @@ export const settings = {
 	edit,
 	save,
 	deprecated,
+	variations,
 };

packages/block-library/src/group/variations.js

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+const variations = [
+	{
+		name: 'group-row',
+		title: __( 'Row' ),
+		description: __( 'Blocks shown in a row.' ),
+		attributes: { layout: { type: 'flex' } },
+		scope: [ 'inserter' ],
+		isActive: ( blockAttributes ) =>
+			blockAttributes.layout?.type === 'flex',
+	},
+];
+
+export default variations;