From a403f6a7a4165b285bfc6c71d4b3fbd4d998320e Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 19 Mar 2024 16:18:36 +1100 Subject: [PATCH] Use correct layout type to display controls. --- packages/block-editor/src/hooks/layout.js | 33 ++++++++++++++--------- 1 file changed, 21 insertions(+), 12 deletions(-) diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index 5f9017fce5bf66..d9fa632af32ef1 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -176,34 +176,43 @@ function LayoutPanelPure( { return null; } + /* + * Try to find the layout type from either the + * block's layout settings or any saved layout config. + */ + const blockSupportAndLayout = { + ...layoutBlockSupport, + ...layout, + }; + const { type, default: { type: defaultType = 'default' } = {} } = + blockSupportAndLayout; + const blockLayoutType = type || defaultType; + // Only show the inherit toggle if it's supported, // and either the default / flow or the constrained layout type is in use, as the toggle switches from one to the other. const showInheritToggle = !! ( allowInheriting && - ( ! layout?.type || - layout?.type === 'default' || - layout?.type === 'constrained' || - layout?.inherit ) + ( ! blockLayoutType || + blockLayoutType === 'default' || + blockLayoutType === 'constrained' || + blockSupportAndLayout.inherit ) ); const usedLayout = layout || defaultBlockLayout || {}; - const { - inherit = false, - type = 'default', - contentSize = null, - } = usedLayout; + const { inherit = false, contentSize = null } = usedLayout; /** * `themeSupportsLayout` is only relevant to the `default/flow` or * `constrained` layouts and it should not be taken into account when other * `layout` types are used. */ if ( - ( type === 'default' || type === 'constrained' ) && + ( blockLayoutType === 'default' || + blockLayoutType === 'constrained' ) && ! themeSupportsLayout ) { return null; } - const layoutType = getLayoutType( type ); + const layoutType = getLayoutType( blockLayoutType ); const constrainedType = getLayoutType( 'constrained' ); const displayControlsForLegacyLayouts = ! usedLayout.type && ( contentSize || inherit ); @@ -256,7 +265,7 @@ function LayoutPanelPure( { { ! inherit && allowSwitching && ( ) }