diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 56d893ae7d3df..6b56ab1119bf5 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -151,11 +151,11 @@ function () use ( $style ) { */ function gutenberg_restore_group_inner_container( $block_content, $block ) { $group_with_inner_container_regex = '/(^\s*]*wp-block-group(\s|")[^>]*>)(\s*]*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; } @@ -171,7 +171,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 ); + diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js index c82ab09a1709a..f30a7482bc3d8 100644 --- a/packages/block-library/src/group/edit.js +++ b/packages/block-library/src/group/edit.js @@ -28,10 +28,12 @@ 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' }, { @@ -39,7 +41,7 @@ function GroupEdit( { attributes, setAttributes, clientId } ) { renderAppender: hasInnerBlocks ? undefined : InnerBlocks.ButtonBlockAppender, - __experimentalLayout: themeSupportsLayout ? usedLayout : undefined, + __experimentalLayout: layoutSupportEnabled ? usedLayout : undefined, } ); @@ -63,10 +65,10 @@ function GroupEdit( { attributes, setAttributes, clientId } ) { } /> - { themeSupportsLayout && } + { layoutSupportEnabled && } { /* 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 && (
diff --git a/packages/block-library/src/group/index.js b/packages/block-library/src/group/index.js index dac9a09b3cb1f..e3b9d887d95f8 100644 --- a/packages/block-library/src/group/index.js +++ b/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, }; diff --git a/packages/block-library/src/group/variations.js b/packages/block-library/src/group/variations.js new file mode 100644 index 0000000000000..76de042661f38 --- /dev/null +++ b/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;