Improve labeling and descriptions of Content and Wide widths.

WordPress · Oct 4, 2024 · 6175ff4 · 6175ff4
1 parent 18fdd25
commit 6175ff4
Show file tree

Hide file tree

Showing 13 changed files with 89 additions and 69 deletions.
diff --git a/docs/reference-guides/block-api/block-supports.md b/docs/reference-guides/block-api/block-supports.md
@@ -747,7 +747,7 @@ Determines display of layout controls in the block sidebar. If set to false, lay
 -   Type: `boolean`
 -   Default value: `true`
 
-For the `flow` layout type only, determines display of the "Inner blocks use content width" toggle.
+For the `flow` layout type only, determines display of the "Customize nested blocks width" toggle.
 
 ### layout.allowSizingOnChildren
 

diff --git a/packages/block-editor/src/components/block-alignment-control/constants.js b/packages/block-editor/src/components/block-alignment-control/constants.js
@@ -15,6 +15,7 @@ export const BLOCK_ALIGNMENTS_CONTROLS = {
 	none: {
 		icon: alignNone,
 		title: _x( 'None', 'Alignment option' ),
+		widthTitle: __( 'Default width' ),
 	},
 	left: {
 		icon: positionLeft,

diff --git a/packages/block-editor/src/components/block-alignment-control/ui.js b/packages/block-editor/src/components/block-alignment-control/ui.js
@@ -70,11 +70,20 @@ function BlockAlignmentUI( {
 						<>
 							<MenuGroup className="block-editor-block-alignment-control__menu-group">
 								{ enabledControls.map(
-									( { name: controlName, info } ) => {
-										const { icon, title } =
+									( { name: controlName, widthInfo } ) => {
+										const { icon, title, widthTitle } =
 											BLOCK_ALIGNMENTS_CONTROLS[
 												controlName
 											];
+
+										// When the 'None' alignment also sets
+										// the `contentSize` width we want to
+										// communicate it's a width.
+										const alignmentOrWidthTitle =
+											controlName === 'none' && widthInfo
+												? widthTitle
+												: title;
+
 										// If no value is provided, mark as selected the `none` option.
 										const isSelected =
 											controlName === value ||
@@ -99,9 +108,9 @@ function BlockAlignmentUI( {
 													onClose();
 												} }
 												role="menuitemradio"
-												info={ info }
+												info={ widthInfo }
 											>
-												{ title }
+												{ alignmentOrWidthTitle }
 											</MenuItem>
 										);
 									}

diff --git a/packages/block-editor/src/components/global-styles/dimensions-panel.js b/packages/block-editor/src/components/global-styles/dimensions-panel.js
@@ -283,6 +283,22 @@ export default function DimensionsPanel( {
 	const hasUserSetWideSizeValue = () => !! value?.layout?.wideSize;
 	const resetWideSizeValue = () => setWideSizeValue( undefined );
 
+	// Content and Wide widths help text.
+	let introText = '';
+	if ( showContentSizeControl && showWideSizeControl ) {
+		introText = __(
+			'Customize the Default and Wide content widths provided by the active theme.'
+		);
+	} else if ( showContentSizeControl && ! showWideSizeControl ) {
+		introText = __(
+			'Customize the Default content width provided by the active theme.'
+		);
+	} else if ( ! showContentSizeControl && showWideSizeControl ) {
+		introText = __(
+			'Customize the Wide content width provided by the active theme.'
+		);
+	}
+
 	// Padding
 	const showPaddingControl = useHasPadding( settings );
 	const rawPadding = decodeValue( inheritedValue?.spacing?.padding );
@@ -457,13 +473,11 @@ export default function DimensionsPanel( {
 			panelId={ panelId }
 		>
 			{ ( showContentSizeControl || showWideSizeControl ) && (
-				<span className="span-columns">
-					{ __( 'Set the width of the main content area.' ) }
-				</span>
+				<span className="span-columns">{ introText }</span>
 			) }
 			{ showContentSizeControl && (
 				<ToolsPanelItem
-					label={ __( 'Content width' ) }
+					label={ __( 'Maximum default width' ) }
 					hasValue={ hasUserSetContentSizeValue }
 					onDeselect={ resetContentSizeValue }
 					isShownByDefault={
@@ -474,7 +488,7 @@ export default function DimensionsPanel( {
 				>
 					<UnitControl
 						__next40pxDefaultSize
-						label={ __( 'Content width' ) }
+						label={ __( 'Maximum default width' ) }
 						labelPosition="top"
 						value={ contentSizeValue || '' }
 						onChange={ ( nextContentSize ) => {
@@ -491,7 +505,7 @@ export default function DimensionsPanel( {
 			) }
 			{ showWideSizeControl && (
 				<ToolsPanelItem
-					label={ __( 'Wide width' ) }
+					label={ __( 'Maximum wide width' ) }
 					hasValue={ hasUserSetWideSizeValue }
 					onDeselect={ resetWideSizeValue }
 					isShownByDefault={
@@ -501,7 +515,7 @@ export default function DimensionsPanel( {
 				>
 					<UnitControl
 						__next40pxDefaultSize
-						label={ __( 'Wide width' ) }
+						label={ __( 'Maximum wide width' ) }
 						labelPosition="top"
 						value={ wideSizeValue || '' }
 						onChange={ ( nextWideSize ) => {

diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
@@ -233,7 +233,7 @@ function LayoutPanelPure( {
 						<>
 							<ToggleControl
 								__nextHasNoMarginBottom
-								label={ __( 'Inner blocks use content width' ) }
+								label={ __( 'Customize nested blocks width' ) }
 								checked={
 									layoutType?.name === 'constrained' ||
 									hasContentSizeOrLegacySettings
@@ -254,10 +254,10 @@ function LayoutPanelPure( {
 									layoutType?.name === 'constrained' ||
 									hasContentSizeOrLegacySettings
 										? __(
-												'Nested blocks use content width with options for full and wide widths.'
+												'Customize the Default and Wide widths for nested blocks.'
 										  )
 										: __(
-												'Nested blocks will fill the width of this container. Toggle to constrain.'
+												'Nested blocks fill the width of this container. Toggle to customize.'
 										  )
 								}
 							/>

diff --git a/packages/block-editor/src/hooks/layout.scss b/packages/block-editor/src/hooks/layout.scss
@@ -4,12 +4,6 @@
 	}
 }
 
-.block-editor-hooks__layout-constrained-helptext {
-	color: $gray-700;
-	font-size: $helptext-font-size;
-	margin-bottom: 0; // Cancel out margins added by common.css
-}
-
 .block-editor-hooks__flex-layout-justification-controls,
 .block-editor-hooks__flex-layout-orientation-controls {
 	margin-bottom: $grid-unit-15;

diff --git a/packages/block-editor/src/hooks/test/align.native.js b/packages/block-editor/src/hooks/test/align.native.js
@@ -39,7 +39,7 @@ describe( 'Align options', () => {
 			'Align left',
 			'Align center',
 			'Align right',
-			'Wide width',
+			'Maximum wide width',
 			'Full width',
 		].forEach( ( alignmentOption ) =>
 			it( `sets ${ alignmentOption } option`, async () => {
@@ -95,40 +95,41 @@ describe( 'Align options', () => {
 	} );
 
 	describe( 'for group block', () => {
-		[ 'None', 'Wide width', 'Full width' ].forEach( ( alignmentOption ) =>
-			it( `sets ${ alignmentOption } option`, async () => {
-				const screen = await initializeEditor();
-				const { getByLabelText } = screen;
-
-				// Add Group block
-				await addBlock( screen, 'Group' );
+		[ 'None', 'Maximum wide width', 'Full width' ].forEach(
+			( alignmentOption ) =>
+				it( `sets ${ alignmentOption } option`, async () => {
+					const screen = await initializeEditor();
+					const { getByLabelText } = screen;
 
-				// Get Paragraph block
-				const groupBlock = await getBlock( screen, 'Group' );
-				expect( groupBlock ).toBeVisible();
+					// Add Group block
+					await addBlock( screen, 'Group' );
 
-				// Trigger inner blocks layout
-				const innerBlockListWrapper =
-					await within( groupBlock ).findByTestId(
-						'block-list-wrapper'
-					);
-				fireEvent( innerBlockListWrapper, 'layout', {
-					nativeEvent: {
-						layout: {
-							width: 300,
+					// Get Paragraph block
+					const groupBlock = await getBlock( screen, 'Group' );
+					expect( groupBlock ).toBeVisible();
+
+					// Trigger inner blocks layout
+					const innerBlockListWrapper =
+						await within( groupBlock ).findByTestId(
+							'block-list-wrapper'
+						);
+					fireEvent( innerBlockListWrapper, 'layout', {
+						nativeEvent: {
+							layout: {
+								width: 300,
+							},
 						},
-					},
-				} );
+					} );
 
-				// Open alignments menu
-				const alignmentButtons = getByLabelText( 'Align' );
-				fireEvent.press( alignmentButtons );
+					// Open alignments menu
+					const alignmentButtons = getByLabelText( 'Align' );
+					fireEvent.press( alignmentButtons );
 
-				// Select alignment option.
-				fireEvent.press( await getByLabelText( alignmentOption ) );
+					// Select alignment option.
+					fireEvent.press( await getByLabelText( alignmentOption ) );
 
-				expect( getEditorHtml() ).toMatchSnapshot();
-			} )
+					expect( getEditorHtml() ).toMatchSnapshot();
+				} )
 		);
 	} );
 } );
diff --git a/packages/block-editor/src/layouts/constrained.js b/packages/block-editor/src/layouts/constrained.js
@@ -79,7 +79,7 @@ export default {
 					<>
 						<UnitControl
 							__next40pxDefaultSize
-							label={ __( 'Content width' ) }
+							label={ __( 'Maximum default width' ) }
 							labelPosition="top"
 							value={ contentSize || wideSize || '' }
 							onChange={ ( nextWidth ) => {
@@ -101,7 +101,7 @@ export default {
 						/>
 						<UnitControl
 							__next40pxDefaultSize
-							label={ __( 'Wide width' ) }
+							label={ __( 'Maximum wide width' ) }
 							labelPosition="top"
 							value={ wideSize || contentSize || '' }
 							onChange={ ( nextWidth ) => {
@@ -121,11 +121,6 @@ export default {
 								</InputControlPrefixWrapper>
 							}
 						/>
-						<p className="block-editor-hooks__layout-constrained-helptext">
-							{ __(
-								'Customize the width for all elements that are assigned to the center or wide columns.'
-							) }
-						</p>
 					</>
 				) }
 				{ allowJustification && (
@@ -285,7 +280,7 @@ export default {
 			}
 			return layout.alignments.map( ( alignment ) => ( {
 				name: alignment,
-				info: alignmentInfo[ alignment ],
+				widthInfo: alignmentInfo[ alignment ].width,
 			} ) );
 		}
 		const { contentSize, wideSize } = layout;
@@ -301,10 +296,16 @@ export default {
 		}
 
 		if ( wideSize ) {
-			alignments.unshift( { name: 'wide', info: alignmentInfo.wide } );
+			alignments.unshift( {
+				name: 'wide',
+				widthInfo: alignmentInfo.wide.width,
+			} );
 		}
 
-		alignments.unshift( { name: 'none', info: alignmentInfo.none } );
+		alignments.unshift( {
+			name: 'none',
+			widthInfo: alignmentInfo.none.width,
+		} );
 
 		return alignments;
 	},

diff --git a/packages/block-editor/src/layouts/utils.js b/packages/block-editor/src/layouts/utils.js
@@ -81,16 +81,16 @@ export function getBlockGapCSS(
  */
 export function getAlignmentsInfo( layout ) {
 	const { contentSize, wideSize, type = 'default' } = layout;
-	const alignmentInfo = {};
+	const alignmentInfo = { none: {}, wide: {} };
 	const sizeRegex =
 		/^(?!0)\d+(px|em|rem|vw|vh|%|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)?$/i;
 	if ( sizeRegex.test( contentSize ) && type === 'constrained' ) {
-		// translators: %s: container size (i.e. 600px etc)
-		alignmentInfo.none = sprintf( __( 'Max %s wide' ), contentSize );
+		// translators: %s: Container width (i.e. 600px etc.).
+		alignmentInfo.none.width = sprintf( __( 'Max %s wide' ), contentSize );
 	}
 	if ( sizeRegex.test( wideSize ) ) {
-		// translators: %s: container size (i.e. 600px etc)
-		alignmentInfo.wide = sprintf( __( 'Max %s wide' ), wideSize );
+		// translators: %s: Container width (i.e. 600px etc.).
+		alignmentInfo.wide.width = sprintf( __( 'Max %s wide' ), wideSize );
 	}
 	return alignmentInfo;
 }
diff --git a/packages/block-library/src/embed/test/index.native.js b/packages/block-library/src/embed/test/index.native.js
@@ -676,7 +676,7 @@ describe( 'Embed block', () => {
 			'Align left',
 			'Align center',
 			'Align right',
-			'Wide width',
+			'Maximum wide width',
 			'Full width',
 		].forEach( ( alignmentOption ) =>
 			it( `sets ${ alignmentOption } option`, async () => {

diff --git a/schemas/json/block.json b/schemas/json/block.json
@@ -444,7 +444,7 @@
 									"default": true
 								},
 								"allowInheriting": {
-									"description": "For the `flow` layout type only, determines display of the `Inner blocks use content width` toggle.",
+									"description": "For the `flow` layout type only, determines display of the `Customize nested blocks width` toggle.",
 									"type": "boolean",
 									"default": true
 								},

diff --git a/test/e2e/specs/editor/plugins/align-hook.spec.js b/test/e2e/specs/editor/plugins/align-hook.spec.js
@@ -8,7 +8,7 @@ const alignLabels = {
 	left: 'Align left',
 	center: 'Align center',
 	right: 'Align right',
-	wide: 'Wide width',
+	wide: 'Maximum wide width',
 	full: 'Full width',
 };
 

diff --git a/test/e2e/specs/editor/various/block-grouping.spec.js b/test/e2e/specs/editor/various/block-grouping.spec.js
@@ -329,7 +329,7 @@ test.describe( 'Block Grouping', () => {
 			await editor.clickBlockToolbarButton( 'Align' );
 			await alignOptions
 				.getByRole( 'menuitemradio', {
-					name: 'Wide width',
+					name: 'Maximum wide width',
 				} )
 				.click();