From 91a0f8ed4468a44e7f3aa7404a412831db013740 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 3 Sep 2021 09:25:26 +0100 Subject: [PATCH 1/4] Group block: Add a row variation --- packages/block-library/src/group/index.js | 2 ++ packages/block-library/src/group/variations.js | 16 ++++++++++++++++ 2 files changed, 18 insertions(+) create mode 100644 packages/block-library/src/group/variations.js 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..d2b44a62a9a8a --- /dev/null +++ b/packages/block-library/src/group/variations.js @@ -0,0 +1,16 @@ +/** + * 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' ], + }, +]; + +export default variations; From 4c32b46f226b331693bc4dbf4aca3190bc488381 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 7 Sep 2021 10:25:03 +0100 Subject: [PATCH 2/4] Show Row as block name --- packages/block-library/src/group/variations.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-library/src/group/variations.js b/packages/block-library/src/group/variations.js index d2b44a62a9a8a..76de042661f38 100644 --- a/packages/block-library/src/group/variations.js +++ b/packages/block-library/src/group/variations.js @@ -10,6 +10,8 @@ const variations = [ description: __( 'Blocks shown in a row.' ), attributes: { layout: { type: 'flex' } }, scope: [ 'inserter' ], + isActive: ( blockAttributes ) => + blockAttributes.layout?.type === 'flex', }, ]; From 7c8c9ccd8544f3705de2542d54dc27c192205656 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 7 Sep 2021 12:00:33 +0100 Subject: [PATCH 3/4] Fix Row block on legacy themes --- lib/block-supports/layout.php | 11 ++++++----- packages/block-library/src/group/edit.js | 10 ++++++---- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 56d893ae7d3df..b242a1a698d88 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'] ) && $block['attrs']['layout']['type'] !== 'default' ) ) { 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 && (
From 8200b0aa8b2a814e3f7e1d74741136f0aadca986 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 7 Sep 2021 15:17:53 +0100 Subject: [PATCH 4/4] Fix phpcs --- lib/block-supports/layout.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index b242a1a698d88..6b56ab1119bf5 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -155,7 +155,7 @@ function gutenberg_restore_group_inner_container( $block_content, $block ) { 'core/group' !== $block['blockName'] || WP_Theme_JSON_Resolver_Gutenberg::theme_has_support() || 1 === preg_match( $group_with_inner_container_regex, $block_content ) || - ( isset( $block['attrs']['layout']['type'] ) && $block['attrs']['layout']['type'] !== 'default' ) + ( isset( $block['attrs']['layout']['type'] ) && 'default' !== $block['attrs']['layout']['type'] ) ) { return $block_content; }