diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 09f0b6e6fcc12..56d893ae7d3df 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -86,14 +86,15 @@ 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; } - $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..796de8c479a2f 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,19 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { return null; } - const allowLayoutSwitching = canBlockSwitchLayout( blockName ); - const { inherit = false, type = 'default' } = layout; + const { + allowSwitching: canBlockSwitchLayout, + allowEditing = true, + allowInheriting = true, + default: defaultBlockLayout, + } = getBlockSupport( blockName, layoutBlockSupportKey ) || {}; + + if ( ! allowEditing ) { + return null; + } + + const usedLayout = layout ? layout : defaultBlockLayout || {}; + const { inherit = false, type = 'default' } = usedLayout; const layoutType = getLayoutType( type ); const onChangeType = ( newType ) => @@ -65,7 +67,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { return ( - { !! defaultLayout && ( + { allowInheriting && !! defaultThemeLayout && ( ) } - { ! inherit && allowLayoutSwitching && ( + { ! inherit && canBlockSwitchLayout && ( ) } @@ -166,21 +168,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 { layout } = attributes; + const { default: defaultBlockLayout } = + getBlockSupport( name, layoutBlockSupportKey ) || {}; + const usedLayout = layout?.inherit + ? defaultThemeLayout + : layout || defaultBlockLayout || {}; const className = classnames( props?.className, { [ `wp-container-${ id }` ]: shouldRenderLayoutStyles, } ); 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" 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"