From 475324a3e47029719f73a1a661e74c5c0177acda Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Thu, 17 Nov 2022 15:44:57 +1100
Subject: [PATCH] LayoutPanel: Update to use ToolsPanel and ToolsPanelItems

---
 .../src/components/block-inspector/index.js   |   8 +
 .../components/inspector-controls/groups.js   |   2 +
 .../block-editor/src/hooks/content-layout.js  |  70 ++++++++
 packages/block-editor/src/hooks/layout.js     | 160 +++++++++--------
 packages/block-editor/src/hooks/layout.scss   |   6 +
 .../block-editor/src/layouts/constrained.js   | 167 +++++++++++-------
 packages/block-editor/src/layouts/flex.js     |  89 ++++++++--
 7 files changed, 356 insertions(+), 146 deletions(-)
 create mode 100644 packages/block-editor/src/hooks/content-layout.js

diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index 379d8806f2a68c..22f37a01337159 100644
--- a/packages/block-editor/src/components/block-inspector/index.js
+++ b/packages/block-editor/src/components/block-inspector/index.js
@@ -171,6 +171,10 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			<div className="block-editor-block-inspector">
 				<MultiSelectionInspector />
 				<InspectorControls.Slot />
+				<InspectorControls.Slot
+					__experimentalGroup="layout"
+					label={ __( 'Layout' ) }
+				/>
 				<InspectorControls.Slot
 					__experimentalGroup="color"
 					label={ __( 'Color' ) }
@@ -255,6 +259,10 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 				</div>
 			) }
 			<InspectorControls.Slot />
+			<InspectorControls.Slot
+				__experimentalGroup="layout"
+				label={ __( 'Layout' ) }
+			/>
 			<InspectorControls.Slot
 				__experimentalGroup="color"
 				label={ __( 'Color' ) }
diff --git a/packages/block-editor/src/components/inspector-controls/groups.js b/packages/block-editor/src/components/inspector-controls/groups.js
index 0b7d1d2f4479f9..f43f84f8107c03 100644
--- a/packages/block-editor/src/components/inspector-controls/groups.js
+++ b/packages/block-editor/src/components/inspector-controls/groups.js
@@ -10,6 +10,7 @@ const InspectorControlsColor = createSlotFill( 'InspectorControlsColor' );
 const InspectorControlsDimensions = createSlotFill(
 	'InspectorControlsDimensions'
 );
+const InspectorControlsLayout = createSlotFill( 'InspectorControlsLayout' );
 const InspectorControlsTypography = createSlotFill(
 	'InspectorControlsTypography'
 );
@@ -20,6 +21,7 @@ const groups = {
 	border: InspectorControlsBorder,
 	color: InspectorControlsColor,
 	dimensions: InspectorControlsDimensions,
+	layout: InspectorControlsLayout,
 	typography: InspectorControlsTypography,
 };
 
diff --git a/packages/block-editor/src/hooks/content-layout.js b/packages/block-editor/src/hooks/content-layout.js
new file mode 100644
index 00000000000000..209227a3fe77f5
--- /dev/null
+++ b/packages/block-editor/src/hooks/content-layout.js
@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+import { getBlockSupport } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import useSetting from '../components/use-setting';
+import { LAYOUT_SUPPORT_KEY } from './layout';
+import { cleanEmptyObject } from './utils';
+
+/**
+ * Determines if there is content layout support.
+ *
+ * @param {string|Object} blockType Block name or Block Type object.
+ * @return {boolean} Whether there is support.
+ */
+export function hasContentLayoutSupport( blockType ) {
+	const support = getBlockSupport( blockType, LAYOUT_SUPPORT_KEY );
+	return !! (
+		true === support ||
+		! support?.default?.type ||
+		support?.default?.type === 'default' ||
+		support?.default?.type === 'constrained'
+	);
+}
+
+/**
+ * Checks if there is a current value set for content layout.
+ *
+ * @param {Object} props Block props.
+ * @return {boolean} Whether or not the block has a minHeight value set.
+ */
+export function hasContentLayoutValue( props ) {
+	return (
+		props.attributes.layout?.type === 'default' ||
+		props.attributes.layout?.type === 'constrained'
+	);
+}
+
+/**
+ * Resets the content layout block support attributes.
+ *
+ * @param {Object} props               Block props.
+ * @param {Object} props.attributes    Block's attributes.
+ * @param {Object} props.setAttributes Function to set block's attributes.
+ */
+export function resetContentLayout( { attributes = {}, setAttributes } ) {
+	const { layout } = attributes;
+
+	setAttributes( {
+		layout: cleanEmptyObject( {
+			...layout,
+			type: undefined,
+		} ),
+	} );
+}
+
+/**
+ * Custom hook that checks if content layout controls have been disabled.
+ *
+ * @param {string} name The name of the block.
+ * @return {boolean} Whether content layout control is disabled.
+ */
+export function useIsContentLayoutDisabled( { name: blockName } = {} ) {
+	// TODO: Is this check valid? The following assumes on by default unless explicitly opted out.
+	const isDisabled = useSetting( 'layout.contentLayout' ) === false;
+	return ! hasContentLayoutSupport( blockName ) || isDisabled;
+}
diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
index a2058cb24677e9..fab83c8d6079a8 100644
--- a/packages/block-editor/src/hooks/layout.js
+++ b/packages/block-editor/src/hooks/layout.js
@@ -15,7 +15,7 @@ import {
 	Button,
 	ButtonGroup,
 	ToggleControl,
-	PanelBody,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useContext, createPortal } from '@wordpress/element';
@@ -29,8 +29,9 @@ import useSetting from '../components/use-setting';
 import { LayoutStyle } from '../components/block-list/layout';
 import BlockList from '../components/block-list';
 import { getLayoutType, getLayoutTypes } from '../layouts';
+import { hasContentLayoutValue, resetContentLayout } from './content-layout';
 
-const layoutBlockSupportKey = '__experimentalLayout';
+export const LAYOUT_SUPPORT_KEY = '__experimentalLayout';
 
 /**
  * Generates the utility classnames for the given block's layout attributes.
@@ -51,7 +52,7 @@ export function useLayoutClasses( block = {} ) {
 	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' }
@@ -128,8 +129,10 @@ export function useLayoutStyles( block = {}, selector ) {
 	return css;
 }
 
-function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
+function LayoutPanel( props ) {
+	const { clientId, setAttributes, attributes, name: blockName } = props;
 	const { layout } = attributes;
+
 	const defaultThemeLayout = useSetting( 'layout' );
 	const themeSupportsLayout = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
@@ -138,7 +141,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 
 	const layoutBlockSupport = getBlockSupport(
 		blockName,
-		layoutBlockSupportKey,
+		LAYOUT_SUPPORT_KEY,
 		{}
 	);
 	const {
@@ -192,67 +195,87 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 	const onChangeLayout = ( newLayout ) =>
 		setAttributes( { layout: newLayout } );
 
+	const defaultControls = getBlockSupport( blockName, [
+		LAYOUT_SUPPORT_KEY,
+		'__experimentalDefaultControls',
+	] );
+
 	return (
 		<>
-			<InspectorControls>
-				<PanelBody title={ __( 'Layout' ) }>
-					{ showInheritToggle && (
-						<>
-							<ToggleControl
-								className="block-editor-hooks__toggle-control"
-								label={ __( 'Inner blocks use content width' ) }
-								checked={
-									layoutType?.name === 'constrained' ||
-									hasContentSizeOrLegacySettings
-								}
-								onChange={ () =>
-									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 && (
-						<LayoutTypeSwitcher
-							type={ type }
-							onChange={ onChangeType }
-						/>
-					) }
-
-					{ layoutType && layoutType.name !== 'default' && (
-						<layoutType.inspectorControls
-							layout={ usedLayout }
-							onChange={ onChangeLayout }
-							layoutBlockSupport={ layoutBlockSupport }
-						/>
-					) }
-					{ constrainedType && displayControlsForLegacyLayouts && (
-						<constrainedType.inspectorControls
-							layout={ usedLayout }
-							onChange={ onChangeLayout }
-							layoutBlockSupport={ layoutBlockSupport }
+			<InspectorControls __experimentalGroup="layout">
+				{ showInheritToggle && (
+					<ToolsPanelItem
+						label={ __( 'Content layout' ) }
+						hasValue={ () => hasContentLayoutValue( props ) }
+						onDeselect={ () => resetContentLayout( props ) }
+						isShownByDefault={ true }
+						resetAllFilter={ ( newAttributes ) => ( {
+							...newAttributes,
+							layout: {
+								...newAttributes.layout,
+								type: undefined,
+							},
+						} ) }
+						panelId={ clientId }
+					>
+						<ToggleControl
+							className="block-editor-hooks__toggle-control"
+							label={ __( 'Inner blocks use content width' ) }
+							checked={
+								layoutType?.name === 'constrained' ||
+								hasContentSizeOrLegacySettings
+							}
+							onChange={ () =>
+								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.'
+									  )
+							}
 						/>
-					) }
-				</PanelBody>
+					</ToolsPanelItem>
+				) }
+
+				{ ! inherit && allowSwitching && (
+					<LayoutTypeSwitcher
+						type={ type }
+						onChange={ onChangeType }
+					/>
+				) }
+
+				{ layoutType && layoutType.name !== 'default' && (
+					<layoutType.inspectorControls
+						clientId={ clientId }
+						defaultControls={ defaultControls }
+						layout={ usedLayout }
+						onChange={ onChangeLayout }
+						layoutBlockSupport={ layoutBlockSupport }
+					/>
+				) }
+				{ constrainedType && displayControlsForLegacyLayouts && (
+					<constrainedType.inspectorControls
+						clientId={ clientId }
+						defaultControls={ defaultControls }
+						layout={ usedLayout }
+						onChange={ onChangeLayout }
+						layoutBlockSupport={ layoutBlockSupport }
+					/>
+				) }
 			</InspectorControls>
 			{ ! inherit && layoutType && (
 				<layoutType.toolBarControls
@@ -294,7 +317,7 @@ export function addAttribute( settings ) {
 	if ( 'type' in ( settings.attributes?.layout ?? {} ) ) {
 		return settings;
 	}
-	if ( hasBlockSupport( settings, layoutBlockSupportKey ) ) {
+	if ( hasBlockSupport( settings, LAYOUT_SUPPORT_KEY ) ) {
 		settings.attributes = {
 			...settings.attributes,
 			layout: {
@@ -316,10 +339,7 @@ export function addAttribute( settings ) {
 export const withInspectorControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
 		const { name: blockName } = props;
-		const supportLayout = hasBlockSupport(
-			blockName,
-			layoutBlockSupportKey
-		);
+		const supportLayout = hasBlockSupport( blockName, LAYOUT_SUPPORT_KEY );
 
 		return [
 			supportLayout && <LayoutPanel key="layout" { ...props } />,
@@ -341,7 +361,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 +374,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..9491e6dbe86ddf 100644
--- a/packages/block-editor/src/hooks/layout.scss
+++ b/packages/block-editor/src/hooks/layout.scss
@@ -1,3 +1,9 @@
+.layout-block-support-panel {
+	.single-column {
+		grid-column: span 1;
+	}
+}
+
 .block-editor-hooks__layout-controls {
 	display: flex;
 	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..6d3bf186b3c25a 100644
--- a/packages/block-editor/src/layouts/constrained.js
+++ b/packages/block-editor/src/layouts/constrained.js
@@ -6,6 +6,7 @@ import {
 	__experimentalUnitControl as UnitControl,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import {
@@ -30,6 +31,8 @@ export default {
 	name: 'constrained',
 	label: __( 'Constrained' ),
 	inspectorControls: function DefaultLayoutInspectorControls( {
+		clientId,
+		defaultControls = {},
 		layout,
 		onChange,
 	} ) {
@@ -68,69 +71,113 @@ export default {
 		} );
 		return (
 			<>
-				<div className="block-editor-hooks__layout-controls">
-					<div className="block-editor-hooks__layout-controls-unit">
-						<UnitControl
-							label={ __( 'Content' ) }
-							labelPosition="top"
-							__unstableInputWidth="80px"
-							value={ contentSize || wideSize || '' }
-							onChange={ ( nextWidth ) => {
-								nextWidth =
-									0 > parseFloat( nextWidth )
-										? '0'
-										: nextWidth;
-								onChange( {
-									...layout,
-									contentSize: nextWidth,
-								} );
-							} }
-							units={ units }
-						/>
-						<Icon icon={ positionCenter } />
-					</div>
-					<div className="block-editor-hooks__layout-controls-unit">
-						<UnitControl
-							label={ __( 'Wide' ) }
-							labelPosition="top"
-							__unstableInputWidth="80px"
-							value={ wideSize || contentSize || '' }
-							onChange={ ( nextWidth ) => {
-								nextWidth =
-									0 > parseFloat( nextWidth )
-										? '0'
-										: nextWidth;
-								onChange( {
-									...layout,
-									wideSize: nextWidth,
-								} );
-							} }
-							units={ units }
-						/>
-						<Icon icon={ stretchWide } />
-					</div>
-				</div>
-				<p className="block-editor-hooks__layout-controls-helptext">
-					{ __(
-						'Customize the width for all elements that are assigned to the center or wide columns.'
-					) }
-				</p>
-				<ToggleGroupControl
-					label={ __( 'Justification' ) }
-					value={ justifyContent }
-					onChange={ onJustificationChange }
+				<ToolsPanelItem
+					hasValue={ () =>
+						wideSize !== undefined || contentSize !== undefined
+					}
+					label={ __( 'Content size' ) }
+					onDeselect={ () =>
+						onChange( {
+							...layout,
+							contentSize: undefined,
+							wideSize: undefined,
+						} )
+					}
+					isShownByDefault={
+						defaultControls?.contentSize ||
+						defaultControls?.wideSize
+					}
+					resetAllFilter={ ( newAttributes ) => ( {
+						...newAttributes,
+						layout: {
+							...newAttributes?.layout,
+							contentSize: undefined,
+							wideSize: undefined,
+						},
+					} ) }
+					panelId={ clientId }
 				>
-					{ justificationOptions.map( ( { value, icon, label } ) => {
-						return (
-							<ToggleGroupControlOptionIcon
-								key={ value }
-								value={ value }
-								icon={ icon }
-								label={ label }
+					<div className="block-editor-hooks__layout-controls">
+						<div className="block-editor-hooks__layout-controls-unit">
+							<UnitControl
+								label={ __( 'Content' ) }
+								labelPosition="top"
+								__unstableInputWidth="80px"
+								value={ contentSize || wideSize || '' }
+								onChange={ ( nextWidth ) => {
+									nextWidth =
+										0 > parseFloat( nextWidth )
+											? '0'
+											: nextWidth;
+									onChange( {
+										...layout,
+										contentSize: nextWidth,
+									} );
+								} }
+								units={ units }
+							/>
+							<Icon icon={ positionCenter } />
+						</div>
+						<div className="block-editor-hooks__layout-controls-unit">
+							<UnitControl
+								label={ __( 'Wide' ) }
+								labelPosition="top"
+								__unstableInputWidth="80px"
+								value={ wideSize || contentSize || '' }
+								onChange={ ( nextWidth ) => {
+									nextWidth =
+										0 > parseFloat( nextWidth )
+											? '0'
+											: nextWidth;
+									onChange( {
+										...layout,
+										wideSize: nextWidth,
+									} );
+								} }
+								units={ units }
 							/>
-						);
+							<Icon icon={ stretchWide } />
+						</div>
+					</div>
+					<p className="block-editor-hooks__layout-controls-helptext">
+						{ __(
+							'Customize the width for all elements that are assigned to the center or wide columns.'
+						) }
+					</p>
+				</ToolsPanelItem>
+				<ToolsPanelItem
+					hasValue={ () => justifyContent !== undefined }
+					label={ __( 'Justification' ) }
+					onDeselect={ () => onJustificationChange( undefined ) }
+					isShownByDefault={ defaultControls?.justifyContent }
+					resetAllFilter={ ( newAttributes ) => ( {
+						...newAttributes,
+						layout: {
+							...newAttributes?.layout,
+							justifyContent: undefined,
+						},
 					} ) }
-				</ToggleGroupControl>
+					panelId={ clientId }
+				>
+					<ToggleGroupControl
+						label={ __( 'Justification' ) }
+						value={ justifyContent }
+						onChange={ onJustificationChange }
+					>
+						{ justificationOptions.map(
+							( { value, icon, label } ) => {
+								return (
+									<ToggleGroupControlOptionIcon
+										key={ value }
+										value={ value }
+										icon={ icon }
+										label={ label }
+									/>
+								);
+							}
+						) }
+					</ToggleGroupControl>
+				</ToolsPanelItem>
 			</>
 		);
 	},
diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js
index 948eceb6624d60..61aaab97d4b756 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,79 @@ export default {
 		const { allowOrientation = true } = layoutBlockSupport;
 		return (
 			<>
-				<Flex>
-					<FlexItem>
-						<FlexLayoutJustifyContentControl
+				<ToolsPanelItem
+					className="single-column"
+					hasValue={ () => layout?.justifyContent }
+					label={ __( 'Justification' ) }
+					onDeselect={ () =>
+						onChange( {
+							...layout,
+							justifyContent: undefined,
+						} )
+					}
+					isShownByDefault={ defaultControls?.justifyContent }
+					resetAllFilter={ ( newAttributes ) => ( {
+						...newAttributes,
+						layout: {
+							...newAttributes?.layout,
+							justifyContent: undefined,
+						},
+					} ) }
+					panelId={ clientId }
+				>
+					<FlexLayoutJustifyContentControl
+						layout={ layout }
+						onChange={ onChange }
+					/>
+				</ToolsPanelItem>
+				{ allowOrientation && (
+					<ToolsPanelItem
+						className="single-column"
+						hasValue={ () => layout?.orientation }
+						label={ __( 'Orientation' ) }
+						onDeselect={ () =>
+							onChange( {
+								...layout,
+								orientation: undefined,
+							} )
+						}
+						isShownByDefault={ defaultControls?.orientation }
+						resetAllFilter={ ( newAttributes ) => ( {
+							...newAttributes,
+							layout: {
+								...newAttributes?.layout,
+								orientation: undefined,
+							},
+						} ) }
+						panelId={ clientId }
+					>
+						<OrientationControl
 							layout={ layout }
 							onChange={ onChange }
 						/>
-					</FlexItem>
-					<FlexItem>
-						{ allowOrientation && (
-							<OrientationControl
-								layout={ layout }
-								onChange={ onChange }
-							/>
-						) }
-					</FlexItem>
-				</Flex>
-				<FlexWrapControl layout={ layout } onChange={ onChange } />
+					</ToolsPanelItem>
+				) }
+				<ToolsPanelItem
+					hasValue={ () => layout?.flexWrap }
+					label={ __( 'Wrap' ) }
+					onDeselect={ () =>
+						onChange( {
+							...layout,
+							flexWrap: undefined,
+						} )
+					}
+					isShownByDefault={ defaultControls?.flexWrap }
+					resetAllFilter={ ( newAttributes ) => ( {
+						...newAttributes,
+						layout: {
+							...newAttributes?.layout,
+							flexWrap: undefined,
+						},
+					} ) }
+					panelId={ clientId }
+				>
+					<FlexWrapControl layout={ layout } onChange={ onChange } />
+				</ToolsPanelItem>
 			</>
 		);
 	},