Add layout content size controls to global styles (#42309)

* Add layout content size controls to global styles * Align flex items * Render flex wrappers conditionally * Fix reset behaviour * Optimise markup * Tweak how controls are laid out within panel * Fix text i18n Co-authored-by: Aaron Robertshaw <[email protected]>
WordPress · Jul 20, 2022 · 9be34aa · 9be34aa
1 parent dd22e60
commit 9be34aa
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 1 deletion.
diff --git a/packages/edit-site/src/components/global-styles/dimensions-panel.js b/packages/edit-site/src/components/global-styles/dimensions-panel.js
@@ -6,10 +6,13 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalBoxControl as BoxControl,
+	__experimentalHStack as HStack,
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalView as View,
 } from '@wordpress/components';
 import { __experimentalUseCustomSides as useCustomSides } from '@wordpress/block-editor';
+import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -19,11 +22,27 @@ import { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';
 const AXIAL_SIDES = [ 'horizontal', 'vertical' ];
 
 export function useHasDimensionsPanel( name ) {
+	const hasContentSize = useHasContentSize( name );
+	const hasWideSize = useHasWideSize( name );
 	const hasPadding = useHasPadding( name );
 	const hasMargin = useHasMargin( name );
 	const hasGap = useHasGap( name );
 
-	return hasPadding || hasMargin || hasGap;
+	return hasContentSize || hasWideSize || hasPadding || hasMargin || hasGap;
+}
+
+function useHasContentSize( name ) {
+	const supports = getSupportedGlobalStylesPanels( name );
+	const [ settings ] = useSetting( 'layout.contentSize', name );
+
+	return settings && supports.includes( 'contentSize' );
+}
+
+function useHasWideSize( name ) {
+	const supports = getSupportedGlobalStylesPanels( name );
+	const [ settings ] = useSetting( 'layout.wideSize', name );
+
+	return settings && supports.includes( 'wideSize' );
 }
 
 function useHasPadding( name ) {
@@ -86,6 +105,8 @@ function splitStyleValue( value ) {
 }
 
 export default function DimensionsPanel( { name } ) {
+	const showContentSizeControl = useHasContentSize( name );
+	const showWideSizeControl = useHasWideSize( name );
 	const showPaddingControl = useHasPadding( name );
 	const showMarginControl = useHasMargin( name );
 	const showGapControl = useHasGap( name );
@@ -99,6 +120,34 @@ export default function DimensionsPanel( { name } ) {
 		],
 	} );
 
+	const [ contentSizeValue, setContentSizeValue ] = useSetting(
+		'layout.contentSize',
+		name
+	);
+
+	const [ userSetContentSizeValue ] = useSetting(
+		'layout.contentSize',
+		name,
+		'user'
+	);
+
+	const hasUserSetContentSizeValue = () => !! userSetContentSizeValue;
+	const resetContentSizeValue = () => setContentSizeValue( '' );
+
+	const [ wideSizeValue, setWideSizeValue ] = useSetting(
+		'layout.wideSize',
+		name
+	);
+
+	const [ userSetWideSizeValue ] = useSetting(
+		'layout.wideSize',
+		name,
+		'user'
+	);
+
+	const hasUserSetWideSizeValue = () => !! userSetWideSizeValue;
+	const resetWideSizeValue = () => setWideSizeValue( '' );
+
 	const [ rawPadding, setRawPadding ] = useStyle( 'spacing.padding', name );
 	const paddingValues = splitStyleValue( rawPadding );
 	const paddingSides = useCustomSides( name, 'padding' );
@@ -137,10 +186,67 @@ export default function DimensionsPanel( { name } ) {
 		resetPaddingValue();
 		resetMarginValue();
 		resetGapValue();
+		resetContentSizeValue();
+		resetWideSizeValue();
 	};
 
 	return (
 		<ToolsPanel label={ __( 'Dimensions' ) } resetAll={ resetAll }>
+			{ ( showContentSizeControl || showWideSizeControl ) && (
+				<span className="span-columns">
+					{ __( 'Set the width of the main content area.' ) }
+				</span>
+			) }
+			{ showContentSizeControl && (
+				<ToolsPanelItem
+					className="single-column"
+					label={ __( 'Content size' ) }
+					hasValue={ hasUserSetContentSizeValue }
+					onDeselect={ resetContentSizeValue }
+					isShownByDefault={ true }
+				>
+					<HStack alignment="flex-end">
+						<UnitControl
+							label={ __( 'Content' ) }
+							labelPosition="top"
+							__unstableInputWidth="80px"
+							value={ contentSizeValue || '' }
+							onChange={ ( nextContentSize ) => {
+								setContentSizeValue( nextContentSize );
+							} }
+							units={ units }
+						/>
+						<View>
+							<Icon icon={ positionCenter } />
+						</View>
+					</HStack>
+				</ToolsPanelItem>
+			) }
+			{ showWideSizeControl && (
+				<ToolsPanelItem
+					className="single-column"
+					label={ __( 'Wide size' ) }
+					hasValue={ hasUserSetWideSizeValue }
+					onDeselect={ resetWideSizeValue }
+					isShownByDefault={ true }
+				>
+					<HStack alignment="flex-end">
+						<UnitControl
+							label={ __( 'Wide' ) }
+							labelPosition="top"
+							__unstableInputWidth="80px"
+							value={ wideSizeValue || '' }
+							onChange={ ( nextWideSize ) => {
+								setWideSizeValue( nextWideSize );
+							} }
+							units={ units }
+						/>
+						<View>
+							<Icon icon={ stretchWide } />
+						</View>
+					</HStack>
+				</ToolsPanelItem>
+			) }
 			{ showPaddingControl && (
 				<ToolsPanelItem
 					hasValue={ hasPaddingValue }

diff --git a/packages/edit-site/src/components/global-styles/hooks.js b/packages/edit-site/src/components/global-styles/hooks.js
@@ -168,6 +168,8 @@ const ROOT_BLOCK_SUPPORTS = [
 	'textDecoration',
 	'textTransform',
 	'padding',
+	'contentSize',
+	'wideSize',
 ];
 
 export function getSupportedGlobalStylesPanels( name ) {

diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss
@@ -60,6 +60,10 @@
 	grid-column: span 1;
 }
 
+.edit-site-global-styles-sidebar .components-tools-panel .span-columns {
+	grid-column: 1 / -1;
+}
+
 .edit-site-global-styles-sidebar__blocks-group {
 	padding-top: $grid-unit-30;
 	border-top: $border-width solid $gray-200;