From 508806313f43fcaa9a0659fc2f71ea3b33b2d848 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Fri, 20 Aug 2021 12:45:37 +0300 Subject: [PATCH 1/8] init commit --- lib/block-supports/layout.php | 4 +-- packages/block-editor/src/hooks/layout.js | 26 ++++++++----------- packages/block-library/src/buttons/block.json | 10 ++++++- 3 files changed, 22 insertions(+), 18 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 09f0b6e6fcc12..8e8b7319257a2 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -69,7 +69,6 @@ function gutenberg_get_layout_style( $selector, $layout ) { $style .= 'display: flex;'; $style .= 'gap: var( --wp--style--block-gap, 0.5em );'; $style .= 'flex-wrap: wrap;'; - $style .= 'align-items: center;'; $style .= '}'; $style .= "$selector > * { margin: 0; }"; @@ -93,7 +92,8 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) { return $block_content; } - $used_layout = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : array(); + $default_block_layout = _wp_array_get( $block_type->supports, array( '__experimentalLayout', 'default' ), array() ); + $used_layout = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : $default_block_layout; if ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] ) { $tree = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data( array(), 'theme' ); $default_layout = _wp_array_get( $tree->get_settings(), array( 'layout' ) ); diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index 661a4887cbdec..7861efa8fbe6c 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -32,18 +32,9 @@ import { getLayoutType, getLayoutTypes } from '../layouts'; const layoutBlockSupportKey = '__experimentalLayout'; -const canBlockSwitchLayout = ( blockTypeOrName ) => { - const layoutBlockSupportConfig = getBlockSupport( - blockTypeOrName, - layoutBlockSupportKey - ); - - return layoutBlockSupportConfig?.allowSwitching; -}; - function LayoutPanel( { setAttributes, attributes, name: blockName } ) { - const { layout = {} } = attributes; - const defaultLayout = useSetting( 'layout' ); + const { layout } = attributes; + const defaultThemeLayout = useSetting( 'layout' ); const themeSupportsLayout = useSelect( ( select ) => { const { getSettings } = select( blockEditorStore ); return getSettings().supportsLayout; @@ -53,8 +44,13 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { return null; } - const allowLayoutSwitching = canBlockSwitchLayout( blockName ); - const { inherit = false, type = 'default' } = layout; + const { + allowSwitching: canBlockSwitchLayout, + default: defaultBlockLayout, + } = getBlockSupport( blockName, layoutBlockSupportKey ) || {}; + + const usedLayout = layout ? layout : defaultBlockLayout || {}; + const { inherit = false, type = 'default' } = usedLayout; const layoutType = getLayoutType( type ); const onChangeType = ( newType ) => @@ -65,7 +61,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { return ( - { !! defaultLayout && ( + { inherit && !! defaultThemeLayout && ( ) } - { ! inherit && allowLayoutSwitching && ( + { ! inherit && canBlockSwitchLayout && ( Date: Fri, 20 Aug 2021 13:04:47 +0300 Subject: [PATCH 2/8] remove innerBlocks check --- lib/block-supports/layout.php | 8 +++---- packages/block-editor/src/hooks/layout.js | 23 +++++++++---------- packages/block-library/src/buttons/block.json | 10 +------- 3 files changed, 16 insertions(+), 25 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 8e8b7319257a2..194834f75b65b 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -85,10 +85,10 @@ function gutenberg_get_layout_style( $selector, $layout ) { * @return string Filtered block content. */ function gutenberg_render_layout_support_flag( $block_content, $block ) { - $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] ); - $support_layout = gutenberg_block_has_support( $block_type, array( '__experimentalLayout' ), false ); - $has_innner_blocks = count( $block['innerBlocks'] ) > 0; - if ( ! $support_layout && ! $has_innner_blocks ) { + $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] ); + $support_layout = gutenberg_block_has_support( $block_type, array( '__experimentalLayout' ), false ); + + if ( ! $support_layout ) { return $block_content; } diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index 7861efa8fbe6c..b5962a97c82ef 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -162,21 +162,20 @@ export const withInspectorControls = createHigherOrderComponent( */ export const withLayoutStyles = createHigherOrderComponent( ( BlockListBlock ) => ( props ) => { - const { name, attributes, clientId } = props; - const supportLayout = hasBlockSupport( name, layoutBlockSupportKey ); - const id = useInstanceId( BlockListBlock ); - const defaultLayout = useSetting( 'layout' ) || {}; - const hasInnerBlocks = useSelect( - ( select ) => { - const { getBlockCount } = select( blockEditorStore ); - return getBlockCount( clientId ) > 0; - }, - [ clientId ] + const { name, attributes } = props; + const shouldRenderLayoutStyles = hasBlockSupport( + name, + layoutBlockSupportKey ); + const id = useInstanceId( BlockListBlock ); + const defaultThemeLayout = useSetting( 'layout' ) || {}; const element = useContext( BlockList.__unstableElementContext ); - const shouldRenderLayoutStyles = supportLayout || hasInnerBlocks; const { layout = {} } = attributes; - const usedLayout = !! layout && layout.inherit ? defaultLayout : layout; + const { default: defaultBlockLayout } = + getBlockSupport( name, layoutBlockSupportKey ) || {}; + const usedLayout = layout?.inherit + ? defaultThemeLayout + : defaultBlockLayout || {}; const className = classnames( props?.className, { [ `wp-container-${ id }` ]: shouldRenderLayoutStyles, } ); diff --git a/packages/block-library/src/buttons/block.json b/packages/block-library/src/buttons/block.json index 1458bc12ffd55..74eed0a4a0a54 100644 --- a/packages/block-library/src/buttons/block.json +++ b/packages/block-library/src/buttons/block.json @@ -17,15 +17,7 @@ }, "supports": { "anchor": true, - "align": [ "wide", "full" ], - "__experimentalLayout": { - "allowSwitching": false, - "inherit": false, - "default": { - "type": "flex", - "column-gap": "normal" - } - } + "align": [ "wide", "full" ] }, "editorStyle": "wp-block-buttons-editor", "style": "wp-block-buttons" From e16d685f635293cbb5cca9c93bf787c9133f1e5c Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Fri, 20 Aug 2021 14:02:29 +0300 Subject: [PATCH 3/8] assign block's layout first --- packages/block-editor/src/hooks/layout.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index b5962a97c82ef..4116798237237 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -170,12 +170,12 @@ export const withLayoutStyles = createHigherOrderComponent( const id = useInstanceId( BlockListBlock ); const defaultThemeLayout = useSetting( 'layout' ) || {}; const element = useContext( BlockList.__unstableElementContext ); - const { layout = {} } = attributes; + const { layout } = attributes; const { default: defaultBlockLayout } = getBlockSupport( name, layoutBlockSupportKey ) || {}; const usedLayout = layout?.inherit ? defaultThemeLayout - : defaultBlockLayout || {}; + : layout || defaultBlockLayout || {}; const className = classnames( props?.className, { [ `wp-container-${ id }` ]: shouldRenderLayoutStyles, } ); From b3f0f60eb3403d7be4601e87d2aee9a7e7f6e9c8 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Fri, 20 Aug 2021 14:19:09 +0300 Subject: [PATCH 4/8] add extra flags --- lib/block-supports/layout.php | 1 + packages/block-editor/src/hooks/layout.js | 8 +++++++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 194834f75b65b..56d893ae7d3df 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -69,6 +69,7 @@ function gutenberg_get_layout_style( $selector, $layout ) { $style .= 'display: flex;'; $style .= 'gap: var( --wp--style--block-gap, 0.5em );'; $style .= 'flex-wrap: wrap;'; + $style .= 'align-items: center;'; $style .= '}'; $style .= "$selector > * { margin: 0; }"; diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index 4116798237237..c26d0cc350f4b 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -46,9 +46,15 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { const { allowSwitching: canBlockSwitchLayout, + allowEditing = true, + allowInheriting, default: defaultBlockLayout, } = getBlockSupport( blockName, layoutBlockSupportKey ) || {}; + if ( ! allowEditing ) { + return null; + } + const usedLayout = layout ? layout : defaultBlockLayout || {}; const { inherit = false, type = 'default' } = usedLayout; const layoutType = getLayoutType( type ); @@ -61,7 +67,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { return ( - { inherit && !! defaultThemeLayout && ( + { allowInheriting && !! defaultThemeLayout && ( Date: Fri, 20 Aug 2021 14:35:43 +0300 Subject: [PATCH 5/8] default allowInheriting to true --- packages/block-editor/src/hooks/layout.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index c26d0cc350f4b..1dfcc47dc49bf 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -47,7 +47,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { const { allowSwitching: canBlockSwitchLayout, allowEditing = true, - allowInheriting, + allowInheriting = true, default: defaultBlockLayout, } = getBlockSupport( blockName, layoutBlockSupportKey ) || {}; From 3f95fcc3b4a9f4d7041f941cb3b52b28357f7871 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Fri, 20 Aug 2021 16:31:13 +0300 Subject: [PATCH 6/8] pass usedLayout + block.json changes --- packages/block-editor/src/hooks/layout.js | 2 +- packages/block-library/src/cover/block.json | 3 +++ packages/block-library/src/media-text/block.json | 3 +++ packages/block-library/src/post-template/block.json | 5 ++++- 4 files changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index 1dfcc47dc49bf..796de8c479a2f 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -86,7 +86,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { { ! inherit && layoutType && ( ) } diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json index 214a485a94251..28999b7db2afb 100644 --- a/packages/block-library/src/cover/block.json +++ b/packages/block-library/src/cover/block.json @@ -74,6 +74,9 @@ "__experimentalDuotone": "> .wp-block-cover__image-background, > .wp-block-cover__video-background", "text": false, "background": false + }, + "__experimentalLayout": { + "allowEditing": false } }, "editorStyle": "wp-block-cover-editor", diff --git a/packages/block-library/src/media-text/block.json b/packages/block-library/src/media-text/block.json index 02f2c29430e60..385897ffd4894 100644 --- a/packages/block-library/src/media-text/block.json +++ b/packages/block-library/src/media-text/block.json @@ -92,6 +92,9 @@ "color": { "gradients": true, "link": true + }, + "__experimentalLayout": { + "allowEditing": false } }, "editorStyle": "wp-block-media-text-editor", diff --git a/packages/block-library/src/post-template/block.json b/packages/block-library/src/post-template/block.json index 7ac5910941d76..2e0959d04b35a 100644 --- a/packages/block-library/src/post-template/block.json +++ b/packages/block-library/src/post-template/block.json @@ -16,7 +16,10 @@ "supports": { "reusable": false, "html": false, - "align": true + "align": true, + "__experimentalLayout": { + "allowEditing": false + } }, "style": "wp-block-post-template", "editorStyle": "wp-block-post-template-editor" From 5e7f7b5b0a3c8290eb521dfca46c47ae73a26eb8 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Fri, 20 Aug 2021 16:34:47 +0300 Subject: [PATCH 7/8] change to `true` for consistency --- packages/block-library/src/group/block.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json index 39ad3d6d1a34a..5e182cd0e9cba 100644 --- a/packages/block-library/src/group/block.json +++ b/packages/block-library/src/group/block.json @@ -35,7 +35,7 @@ "style": true, "width": true }, - "__experimentalLayout": {} + "__experimentalLayout": true }, "editorStyle": "wp-block-group-editor", "style": "wp-block-group" From 0dd2b0dc1f86544c15ef1d6e6d3d59b5cb02ed0a Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Fri, 20 Aug 2021 16:43:01 +0300 Subject: [PATCH 8/8] change block.json files --- packages/block-library/src/cover/block.json | 3 --- packages/block-library/src/media-text/block.json | 3 --- 2 files changed, 6 deletions(-) diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json index 28999b7db2afb..214a485a94251 100644 --- a/packages/block-library/src/cover/block.json +++ b/packages/block-library/src/cover/block.json @@ -74,9 +74,6 @@ "__experimentalDuotone": "> .wp-block-cover__image-background, > .wp-block-cover__video-background", "text": false, "background": false - }, - "__experimentalLayout": { - "allowEditing": false } }, "editorStyle": "wp-block-cover-editor", diff --git a/packages/block-library/src/media-text/block.json b/packages/block-library/src/media-text/block.json index 385897ffd4894..02f2c29430e60 100644 --- a/packages/block-library/src/media-text/block.json +++ b/packages/block-library/src/media-text/block.json @@ -92,9 +92,6 @@ "color": { "gradients": true, "link": true - }, - "__experimentalLayout": { - "allowEditing": false } }, "editorStyle": "wp-block-media-text-editor",