diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js index c8ed85f2fd51bc..a8c498a03567bd 100644 --- a/packages/block-editor/src/components/block-inspector/index.js +++ b/packages/block-editor/src/components/block-inspector/index.js @@ -181,6 +181,10 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => { ) : ( <> + ) } + ) } + { const { getSettings } = select( blockEditorStore ); return getSettings().supportsLayout; @@ -138,13 +138,12 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { const layoutBlockSupport = getBlockSupport( blockName, - layoutBlockSupportKey, + LAYOUT_SUPPORT_KEY, {} ); const { allowSwitching, allowEditing = true, - allowInheriting = true, default: defaultBlockLayout, } = layoutBlockSupport; @@ -152,18 +151,6 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { return null; } - // Only show the inherit toggle if it's supported, - // a default theme layout is set (e.g. one that provides `contentSize` and/or `wideSize` values), - // 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 && - !! defaultThemeLayout && - ( ! layout?.type || - layout?.type === 'default' || - layout?.type === 'constrained' || - layout?.inherit ) - ); - const usedLayout = layout || defaultBlockLayout || {}; const { inherit = false, @@ -181,80 +168,61 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) { ) { return null; } - const layoutType = getLayoutType( type ); - const constrainedType = getLayoutType( 'constrained' ); + const displayControlsForLegacyLayouts = ! usedLayout.type && ( contentSize || inherit ); - const hasContentSizeOrLegacySettings = !! inherit || !! contentSize; + const layoutType = getLayoutType( + displayControlsForLegacyLayouts ? 'constrained' : type + ); const onChangeType = ( newType ) => setAttributes( { layout: { type: newType } } ); const onChangeLayout = ( newLayout ) => setAttributes( { layout: newLayout } ); + const defaultControls = getBlockSupport( blockName, [ + LAYOUT_SUPPORT_KEY, + '__experimentalDefaultControls', + ] ); + return ( <> - - - { showInheritToggle && ( - <> - - setAttributes( { - layout: { - type: - layoutType?.name === - 'constrained' || - hasContentSizeOrLegacySettings - ? 'default' - : 'constrained', - }, - } ) - } - help={ - layoutType?.name === 'constrained' || - hasContentSizeOrLegacySettings - ? __( - 'Nested blocks use content width with options for full and wide widths.' - ) - : __( - 'Nested blocks will fill the width of this container. Toggle to constrain.' - ) - } - /> - - ) } - - { ! inherit && allowSwitching && ( + + { ! inherit && allowSwitching && ( + layout?.type !== undefined } + onDeselect={ () => + onChangeLayout( { ...layout, type: undefined } ) + } + isShownByDefault={ true } + resetAllFilter={ ( newAttributes ) => ( { + ...newAttributes, + layout: { + ...newAttributes.layout, + type: undefined, + }, + } ) } + panelId={ clientId } + > - ) } - - { layoutType && layoutType.name !== 'default' && ( - - ) } - { constrainedType && displayControlsForLegacyLayouts && ( - - ) } - + + ) } + + { layoutType && ( + + ) } - { ! inherit && layoutType && ( + { layoutType && ( ( props ) => { const { name: blockName } = props; - const supportLayout = hasBlockSupport( - blockName, - layoutBlockSupportKey - ); + const supportLayout = hasBlockSupport( blockName, LAYOUT_SUPPORT_KEY ); return [ supportLayout && , @@ -341,7 +306,7 @@ export const withLayoutStyles = createHigherOrderComponent( const { name, attributes, block } = props; const hasLayoutBlockSupport = hasBlockSupport( name, - layoutBlockSupportKey + LAYOUT_SUPPORT_KEY ); const disableLayoutStyles = useSelect( ( select ) => { const { getSettings } = select( blockEditorStore ); @@ -354,7 +319,7 @@ export const withLayoutStyles = createHigherOrderComponent( const element = useContext( BlockList.__unstableElementContext ); const { layout } = attributes; const { default: defaultBlockLayout } = - getBlockSupport( name, layoutBlockSupportKey ) || {}; + getBlockSupport( name, LAYOUT_SUPPORT_KEY ) || {}; const usedLayout = layout?.inherit || layout?.contentSize || layout?.wideSize ? { ...layout, type: 'constrained' } diff --git a/packages/block-editor/src/hooks/layout.scss b/packages/block-editor/src/hooks/layout.scss index 8ac39b1dec5f41..3709bcfe82bb42 100644 --- a/packages/block-editor/src/hooks/layout.scss +++ b/packages/block-editor/src/hooks/layout.scss @@ -1,6 +1,11 @@ +.layout-block-support-panel { + .single-column { + grid-column: span 1; + } +} + .block-editor-hooks__layout-controls { display: flex; - margin-bottom: $grid-unit-10; .block-editor-hooks__layout-controls-unit { display: flex; @@ -21,12 +26,11 @@ .block-editor-hooks__layout-controls-helptext { color: $gray-700; font-size: $helptext-font-size; - margin-bottom: $grid-unit-20; + margin-bottom: 0; } .block-editor-hooks__flex-layout-justification-controls, .block-editor-hooks__flex-layout-orientation-controls { - margin-bottom: $grid-unit-15; legend { margin-bottom: $grid-unit-10; } diff --git a/packages/block-editor/src/layouts/constrained.js b/packages/block-editor/src/layouts/constrained.js index 5e3b7eab405d89..202c6fd316c99a 100644 --- a/packages/block-editor/src/layouts/constrained.js +++ b/packages/block-editor/src/layouts/constrained.js @@ -2,10 +2,13 @@ * WordPress dependencies */ import { + ToggleControl, __experimentalUseCustomUnits as useCustomUnits, __experimentalUnitControl as UnitControl, __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon, + __experimentalToolsPanelItem as ToolsPanelItem, + __experimentalVStack as VStack, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { @@ -30,10 +33,28 @@ export default { name: 'constrained', label: __( 'Constrained' ), inspectorControls: function DefaultLayoutInspectorControls( { + clientId, + defaultControls = {}, layout, + layoutBlockSupport, onChange, } ) { - const { wideSize, contentSize, justifyContent = 'center' } = layout; + const defaultThemeLayout = useSetting( 'layout' ); + const { allowInheriting = true } = layoutBlockSupport; + + // Only show the inherit toggle if it's supported, + // a default theme layout is set (e.g. one that provides `contentSize` and/or `wideSize` values), + // 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 && + !! defaultThemeLayout && + ( ! layout?.type || + layout?.type === 'default' || + layout?.type === 'constrained' || + layout?.inherit ) + ); + + const { wideSize, contentSize, justifyContent } = layout; const onJustificationChange = ( value ) => { onChange( { ...layout, @@ -66,71 +87,138 @@ export default { 'vw', ], } ); + return ( <> -
-
- { - nextWidth = - 0 > parseFloat( nextWidth ) - ? '0' - : nextWidth; - onChange( { - ...layout, - contentSize: nextWidth, - } ); - } } - units={ units } - /> - -
-
- { - nextWidth = - 0 > parseFloat( nextWidth ) - ? '0' - : nextWidth; - onChange( { - ...layout, - wideSize: nextWidth, - } ); - } } - units={ units } - /> - -
-
-

- { __( - 'Customize the width for all elements that are assigned to the center or wide columns.' - ) } -

- - { justificationOptions.map( ( { value, icon, label } ) => { - return ( - + !! layout?.type || + wideSize !== undefined || + contentSize !== undefined + } + onDeselect={ () => + onChange( { + ...layout, + type: undefined, + contentSize: undefined, + wideSize: undefined, + } ) + } + isShownByDefault={ + ( defaultControls?.contentLayout ?? true ) || + defaultControls?.contentSize || + defaultControls?.wideSize + } + resetAllFilter={ ( newAttributes ) => ( { + ...newAttributes, + layout: { + ...newAttributes.layout, + type: undefined, + contentSize: undefined, + wideSize: undefined, + }, + } ) } + panelId={ clientId } + > + + + onChange( { + type: 'default', + } ) + } + help={ __( + 'Nested blocks use content width with options for full and wide widths.' + ) } /> - ); +
+
+ { + nextWidth = + 0 > parseFloat( nextWidth ) + ? '0' + : nextWidth; + onChange( { + ...layout, + contentSize: nextWidth, + } ); + } } + units={ units } + /> + +
+
+ { + nextWidth = + 0 > parseFloat( nextWidth ) + ? '0' + : nextWidth; + onChange( { + ...layout, + wideSize: nextWidth, + } ); + } } + units={ units } + /> + +
+
+

+ { __( + 'Customize the width for all elements that are assigned to the center or wide columns.' + ) } +

+ + + ) } + justifyContent !== undefined } + label={ __( 'Justification' ) } + onDeselect={ () => onJustificationChange( undefined ) } + isShownByDefault={ defaultControls?.justifyContent } + resetAllFilter={ ( newAttributes ) => ( { + ...newAttributes, + layout: { + ...newAttributes?.layout, + justifyContent: undefined, + }, } ) } - + panelId={ clientId } + > + + { justificationOptions.map( + ( { value, icon, label } ) => { + return ( + + ); + } + ) } + + ); }, diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js index 948eceb6624d60..ac61dd7c64a92a 100644 --- a/packages/block-editor/src/layouts/flex.js +++ b/packages/block-editor/src/layouts/flex.js @@ -13,10 +13,9 @@ import { import { Button, ToggleControl, - Flex, - FlexItem, __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon, + __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; /** @@ -58,6 +57,8 @@ export default { name: 'flex', label: __( 'Flex' ), inspectorControls: function FlexLayoutInspectorControls( { + clientId, + defaultControls, layout = {}, onChange, layoutBlockSupport = {}, @@ -65,23 +66,77 @@ export default { const { allowOrientation = true } = layoutBlockSupport; return ( <> - - - layout?.justifyContent } + label={ __( 'Justification' ) } + onDeselect={ () => + onChange( { + ...layout, + justifyContent: undefined, + } ) + } + isShownByDefault={ defaultControls?.justifyContent } + resetAllFilter={ ( newAttributes ) => ( { + ...newAttributes, + layout: { + ...newAttributes?.layout, + justifyContent: undefined, + }, + } ) } + panelId={ clientId } + > + + + { allowOrientation && ( + layout?.orientation } + label={ __( 'Orientation' ) } + onDeselect={ () => + onChange( { + ...layout, + orientation: undefined, + } ) + } + isShownByDefault={ defaultControls?.orientation } + resetAllFilter={ ( newAttributes ) => ( { + ...newAttributes, + layout: { + ...newAttributes?.layout, + orientation: undefined, + }, + } ) } + panelId={ clientId } + > + - - - { allowOrientation && ( - - ) } - - - + + ) } + layout?.flexWrap } + label={ __( 'Wrap' ) } + onDeselect={ () => + onChange( { + ...layout, + flexWrap: undefined, + } ) + } + isShownByDefault={ defaultControls?.flexWrap } + resetAllFilter={ ( newAttributes ) => ( { + ...newAttributes, + layout: { + ...newAttributes?.layout, + flexWrap: undefined, + }, + } ) } + panelId={ clientId } + > + + ); }, diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js index ecc6779b9128dd..24ee501a06f971 100644 --- a/packages/block-editor/src/layouts/flow.js +++ b/packages/block-editor/src/layouts/flow.js @@ -2,6 +2,10 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; +import { + ToggleControl, + __experimentalToolsPanelItem as ToolsPanelItem, +} from '@wordpress/components'; /** * Internal dependencies @@ -9,12 +13,74 @@ import { __ } from '@wordpress/i18n'; import { getBlockGapCSS, getAlignmentsInfo } from './utils'; import { getGapCSSValue } from '../hooks/gap'; import { shouldSkipSerialization } from '../hooks/utils'; +import useSetting from '../components/use-setting'; export default { name: 'default', label: __( 'Flow' ), - inspectorControls: function DefaultLayoutInspectorControls() { - return null; + inspectorControls: function DefaultLayoutInspectorControls( { + clientId, + defaultControls = {}, + layout, + layoutBlockSupport, + onChange, + } ) { + const defaultThemeLayout = useSetting( 'layout' ); + const { allowInheriting = true } = layoutBlockSupport; + + // Only show the inherit toggle if it's supported, + // a default theme layout is set (e.g. one that provides `contentSize` and/or `wideSize` values), + // 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 && + !! defaultThemeLayout && + ( ! layout?.type || + layout?.type === 'default' || + layout?.type === 'constrained' || + layout?.inherit ) + ); + + return ( + <> + { showInheritToggle && ( + !! layout?.type } + onDeselect={ () => + onChange( { + ...layout, + type: undefined, + } ) + } + isShownByDefault={ + defaultControls?.contentLayout ?? true + } + resetAllFilter={ ( newAttributes ) => ( { + ...newAttributes, + layout: { + ...newAttributes.layout, + type: undefined, + }, + } ) } + panelId={ clientId } + > + + onChange( { + type: 'constrained', + } ) + } + help={ __( + 'Nested blocks will fill the width of this container. Toggle to constrain.' + ) } + /> + + ) } + + ); }, toolBarControls: function DefaultLayoutToolbarControls() { return null;