From 6175ff407fffc7f8db3c80e8156f28bf79a9de83 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Wed, 18 Sep 2024 10:31:11 +0200 Subject: [PATCH] Improve labeling and descriptions of Content and Wide widths. --- .../block-api/block-supports.md | 2 +- .../block-alignment-control/constants.js | 1 + .../components/block-alignment-control/ui.js | 17 ++++-- .../global-styles/dimensions-panel.js | 28 ++++++--- packages/block-editor/src/hooks/layout.js | 6 +- packages/block-editor/src/hooks/layout.scss | 6 -- .../src/hooks/test/align.native.js | 59 ++++++++++--------- .../block-editor/src/layouts/constrained.js | 21 +++---- packages/block-editor/src/layouts/utils.js | 10 ++-- .../src/embed/test/index.native.js | 2 +- schemas/json/block.json | 2 +- .../specs/editor/plugins/align-hook.spec.js | 2 +- .../editor/various/block-grouping.spec.js | 2 +- 13 files changed, 89 insertions(+), 69 deletions(-) diff --git a/docs/reference-guides/block-api/block-supports.md b/docs/reference-guides/block-api/block-supports.md index a15191c19ffb73..f3d175bc8385ed 100644 --- 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 index 44505d0475d99f..26a2e557ec0b08 100644 --- 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 index 87c5c7b0275a22..68009e6eed7eae 100644 --- 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( { <> { 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 } ); } diff --git a/packages/block-editor/src/components/global-styles/dimensions-panel.js b/packages/block-editor/src/components/global-styles/dimensions-panel.js index 4c52de6a3d7d11..a632d8780ac421 100644 --- 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 ) && ( - - { __( 'Set the width of the main content area.' ) } - + { introText } ) } { showContentSizeControl && ( { @@ -491,7 +505,7 @@ export default function DimensionsPanel( { ) } { showWideSizeControl && ( { diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js index 54a376a0c6a4f7..d51258133b931a 100644 --- a/packages/block-editor/src/hooks/layout.js +++ b/packages/block-editor/src/hooks/layout.js @@ -233,7 +233,7 @@ function LayoutPanelPure( { <> diff --git a/packages/block-editor/src/hooks/layout.scss b/packages/block-editor/src/hooks/layout.scss index 400b09490bbe51..6f816c85ca0dec 100644 --- 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 index 5b7ab25bb24b21..6f543175c4b4ca 100644 --- 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 index 7bf6badf008709..22b6f1d08c60f5 100644 --- a/packages/block-editor/src/layouts/constrained.js +++ b/packages/block-editor/src/layouts/constrained.js @@ -79,7 +79,7 @@ export default { <> { @@ -101,7 +101,7 @@ export default { /> { @@ -121,11 +121,6 @@ export default { } /> -

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

) } { 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 index 15a8d2cef83732..96cda6017052d0 100644 --- 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 index 59e4cfe51fccec..321ffad7c9c93b 100644 --- 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 index 8e314a45ae1cff..eccf59a259c88b 100644 --- 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 index 6929022a2c6f87..9fe7481e2dee06 100644 --- 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 index ec09edc4160d08..452cd88963f6ac 100644 --- 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();