-
- {
- nextWidth =
- 0 > parseFloat( nextWidth )
- ? '0'
- : nextWidth;
- onChange( {
- ...layout,
- contentSize: nextWidth,
- } );
- } }
- units={ units }
- />
-
-
-
-
{
- nextWidth =
- 0 > parseFloat( nextWidth )
- ? '0'
- : nextWidth;
- onChange( {
- ...layout,
- wideSize: nextWidth,
- } );
- } }
- units={ units }
- />
-
+ { showInheritToggle && (
+
+ !! 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.'
- ) }
-
-
-
+
+ { __(
+ 'Customize the width for all elements that are assigned to the center or wide columns.'
+ ) }
+
+
+
+ ) }
justifyContent !== undefined }
label={ __( 'Justification' ) }
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;