Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve labeling and descriptions of Content and Wide widths. #65442

Draft
wants to merge 1 commit into
base: trunk
Choose a base branch
from
Draft

Improve labeling and descriptions of Content and Wide widths. #65442

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/reference-guides/block-api/block-supports.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/components/block-alignment-control/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export const BLOCK_ALIGNMENTS_CONTROLS = {
none: {
icon: alignNone,
title: _x( 'None', 'Alignment option' ),
widthTitle: __( 'Default width' ),
},
left: {
icon: positionLeft,
Expand Down
17 changes: 13 additions & 4 deletions packages/block-editor/src/components/block-alignment-control/ui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ||
Expand All @@ -99,9 +108,9 @@ function BlockAlignmentUI( {
onClose();
} }
role="menuitemradio"
info={ info }
info={ widthInfo }
>
{ title }
{ alignmentOrWidthTitle }
</MenuItem>
);
}
Expand Down
28 changes: 21 additions & 7 deletions packages/block-editor/src/components/global-styles/dimensions-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down Expand Up @@ -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={
Expand All @@ -474,7 +488,7 @@ export default function DimensionsPanel( {
>
<UnitControl
__next40pxDefaultSize
label={ __( 'Content width' ) }
label={ __( 'Maximum default width' ) }
labelPosition="top"
value={ contentSizeValue || '' }
onChange={ ( nextContentSize ) => {
Expand All @@ -491,7 +505,7 @@ export default function DimensionsPanel( {
) }
{ showWideSizeControl && (
<ToolsPanelItem
label={ __( 'Wide width' ) }
label={ __( 'Maximum wide width' ) }
hasValue={ hasUserSetWideSizeValue }
onDeselect={ resetWideSizeValue }
isShownByDefault={
Expand All @@ -501,7 +515,7 @@ export default function DimensionsPanel( {
>
<UnitControl
__next40pxDefaultSize
label={ __( 'Wide width' ) }
label={ __( 'Maximum wide width' ) }
labelPosition="top"
value={ wideSizeValue || '' }
onChange={ ( nextWideSize ) => {
Expand Down
6 changes: 3 additions & 3 deletions packages/block-editor/src/hooks/layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,7 @@ function LayoutPanelPure( {
<>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Inner blocks use content width' ) }
label={ __( 'Customize nested blocks width' ) }
checked={
layoutType?.name === 'constrained' ||
hasContentSizeOrLegacySettings
Expand All @@ -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.'
)
}
/>
Expand Down
6 changes: 0 additions & 6 deletions packages/block-editor/src/hooks/layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
59 changes: 30 additions & 29 deletions packages/block-editor/src/hooks/test/align.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down Expand Up @@ -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();
} )
);
} );
} );
21 changes: 11 additions & 10 deletions packages/block-editor/src/layouts/constrained.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ export default {
<>
<UnitControl
__next40pxDefaultSize
label={ __( 'Content width' ) }
label={ __( 'Maximum default width' ) }
labelPosition="top"
value={ contentSize || wideSize || '' }
onChange={ ( nextWidth ) => {
Expand All @@ -101,7 +101,7 @@ export default {
/>
<UnitControl
__next40pxDefaultSize
label={ __( 'Wide width' ) }
label={ __( 'Maximum wide width' ) }
labelPosition="top"
value={ wideSize || contentSize || '' }
onChange={ ( nextWidth ) => {
Expand All @@ -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 && (
Expand Down Expand Up @@ -285,7 +280,7 @@ export default {
}
return layout.alignments.map( ( alignment ) => ( {
name: alignment,
info: alignmentInfo[ alignment ],
widthInfo: alignmentInfo[ alignment ].width,
} ) );
}
const { contentSize, wideSize } = layout;
Expand All @@ -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;
},
Expand Down
10 changes: 5 additions & 5 deletions packages/block-editor/src/layouts/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
2 changes: 1 addition & 1 deletion packages/block-library/src/embed/test/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
2 changes: 1 addition & 1 deletion schemas/json/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
},
Expand Down
2 changes: 1 addition & 1 deletion test/e2e/specs/editor/plugins/align-hook.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
left: 'Align left',
center: 'Align center',
right: 'Align right',
wide: 'Wide width',
wide: 'Maximum wide width',
full: 'Full width',
};

Expand Down Expand Up @@ -63,7 +63,7 @@
page
.getByRole( 'menu', { name: 'Align' } )
.getByRole( 'menuitemradio' )
).toHaveText( Object.values( alignLabels ) );

Check failure on line 66 in test/e2e/specs/editor/plugins/align-hook.spec.js

View workflow job for this annotation

GitHub Actions / Playwright - 2

[chromium] › editor/plugins/align-hook.spec.js:55:3 › Align Hook Works as Expected › Block with align true › shows the expected buttons on the alignment toolbar 

  1) [chromium] › editor/plugins/align-hook.spec.js:55:3 › Align Hook Works as Expected › Block with align true › shows the expected buttons on the alignment toolbar 
    Error: Timed out 5000ms waiting for expect(locator).toHaveText(expected)

    Locator: getByRole('menu', { name: 'Align' }).getByRole('menuitemradio')
    - Expected  - 1
    + Received  + 1

      Array [
        "None",
        "Align left",
        "Align center",
        "Align right",
    -   "Maximum wide width",
    +   "Wide width",
        "Full width",
      ]
    Call log:
      - expect.toHaveText with timeout 5000ms
      - waiting for getByRole('menu', { name: 'Align' }).getByRole('menuitemradio')
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements


      64 | 					.getByRole( 'menu', { name: 'Align' } )
      65 | 					.getByRole( 'menuitemradio' )
    > 66 | 			).toHaveText( Object.values( alignLabels ) );
         | 			  ^
      67 | 		} );
      68 |
      69 | 		test( 'applies none alignment by default', async ( {

        at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/plugins/align-hook.spec.js:66:6

Check failure on line 66 in test/e2e/specs/editor/plugins/align-hook.spec.js

View workflow job for this annotation

GitHub Actions / Playwright - 2

[chromium] › editor/plugins/align-hook.spec.js:55:3 › Align Hook Works as Expected › Block with align true › shows the expected buttons on the alignment toolbar 

  1) [chromium] › editor/plugins/align-hook.spec.js:55:3 › Align Hook Works as Expected › Block with align true › shows the expected buttons on the alignment toolbar 

    Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
    Error: Timed out 5000ms waiting for expect(locator).toHaveText(expected)

    Locator: getByRole('menu', { name: 'Align' }).getByRole('menuitemradio')
    - Expected  - 1
    + Received  + 1

      Array [
        "None",
        "Align left",
        "Align center",
        "Align right",
    -   "Maximum wide width",
    +   "Wide width",
        "Full width",
      ]
    Call log:
      - expect.toHaveText with timeout 5000ms
      - waiting for getByRole('menu', { name: 'Align' }).getByRole('menuitemradio')
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements


      64 | 					.getByRole( 'menu', { name: 'Align' } )
      65 | 					.getByRole( 'menuitemradio' )
    > 66 | 			).toHaveText( Object.values( alignLabels ) );
         | 			  ^
      67 | 		} );
      68 |
      69 | 		test( 'applies none alignment by default', async ( {

        at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/plugins/align-hook.spec.js:66:6

Check failure on line 66 in test/e2e/specs/editor/plugins/align-hook.spec.js

View workflow job for this annotation

GitHub Actions / Playwright - 2

[chromium] › editor/plugins/align-hook.spec.js:55:3 › Align Hook Works as Expected › Block with align true › shows the expected buttons on the alignment toolbar 

  1) [chromium] › editor/plugins/align-hook.spec.js:55:3 › Align Hook Works as Expected › Block with align true › shows the expected buttons on the alignment toolbar 

    Retry #2 ───────────────────────────────────────────────────────────────────────────────────────
    Error: Timed out 5000ms waiting for expect(locator).toHaveText(expected)

    Locator: getByRole('menu', { name: 'Align' }).getByRole('menuitemradio')
    - Expected  - 1
    + Received  + 1

      Array [
        "None",
        "Align left",
        "Align center",
        "Align right",
    -   "Maximum wide width",
    +   "Wide width",
        "Full width",
      ]
    Call log:
      - expect.toHaveText with timeout 5000ms
      - waiting for getByRole('menu', { name: 'Align' }).getByRole('menuitemradio')
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements


      64 | 					.getByRole( 'menu', { name: 'Align' } )
      65 | 					.getByRole( 'menuitemradio' )
    > 66 | 			).toHaveText( Object.values( alignLabels ) );
         | 			  ^
      67 | 		} );
      68 |
      69 | 		test( 'applies none alignment by default', async ( {

        at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/plugins/align-hook.spec.js:66:6
} );

test( 'applies none alignment by default', async ( {
Expand Down Expand Up @@ -213,7 +213,7 @@
page
.getByRole( 'menu', { name: 'Align' } )
.getByRole( 'menuitemradio' )
).toHaveText( Object.values( alignLabels ) );

Check failure on line 216 in test/e2e/specs/editor/plugins/align-hook.spec.js

View workflow job for this annotation

GitHub Actions / Playwright - 2

[chromium] › editor/plugins/align-hook.spec.js:205:3 › Align Hook Works as Expected › Block with default align › shows the expected buttons on the alignment toolbar 

  2) [chromium] › editor/plugins/align-hook.spec.js:205:3 › Align Hook Works as Expected › Block with default align › shows the expected buttons on the alignment toolbar 
    Error: Timed out 5000ms waiting for expect(locator).toHaveText(expected)

    Locator: getByRole('menu', { name: 'Align' }).getByRole('menuitemradio')
    - Expected  - 1
    + Received  + 1

      Array [
        "None",
        "Align left",
        "Align center",
        "Align right",
    -   "Maximum wide width",
    +   "Wide width",
        "Full width",
      ]
    Call log:
      - expect.toHaveText with timeout 5000ms
      - waiting for getByRole('menu', { name: 'Align' }).getByRole('menuitemradio')
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements


      214 | 					.getByRole( 'menu', { name: 'Align' } )
      215 | 					.getByRole( 'menuitemradio' )
    > 216 | 			).toHaveText( Object.values( alignLabels ) );
          | 			  ^
      217 | 		} );
      218 |
      219 | 		test( 'applies the selected alignment by default', async ( {

        at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/plugins/align-hook.spec.js:216:6

Check failure on line 216 in test/e2e/specs/editor/plugins/align-hook.spec.js

View workflow job for this annotation

GitHub Actions / Playwright - 2

[chromium] › editor/plugins/align-hook.spec.js:205:3 › Align Hook Works as Expected › Block with default align › shows the expected buttons on the alignment toolbar 

  2) [chromium] › editor/plugins/align-hook.spec.js:205:3 › Align Hook Works as Expected › Block with default align › shows the expected buttons on the alignment toolbar 

    Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
    Error: Timed out 5000ms waiting for expect(locator).toHaveText(expected)

    Locator: getByRole('menu', { name: 'Align' }).getByRole('menuitemradio')
    - Expected  - 1
    + Received  + 1

      Array [
        "None",
        "Align left",
        "Align center",
        "Align right",
    -   "Maximum wide width",
    +   "Wide width",
        "Full width",
      ]
    Call log:
      - expect.toHaveText with timeout 5000ms
      - waiting for getByRole('menu', { name: 'Align' }).getByRole('menuitemradio')
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements


      214 | 					.getByRole( 'menu', { name: 'Align' } )
      215 | 					.getByRole( 'menuitemradio' )
    > 216 | 			).toHaveText( Object.values( alignLabels ) );
          | 			  ^
      217 | 		} );
      218 |
      219 | 		test( 'applies the selected alignment by default', async ( {

        at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/plugins/align-hook.spec.js:216:6

Check failure on line 216 in test/e2e/specs/editor/plugins/align-hook.spec.js

View workflow job for this annotation

GitHub Actions / Playwright - 2

[chromium] › editor/plugins/align-hook.spec.js:205:3 › Align Hook Works as Expected › Block with default align › shows the expected buttons on the alignment toolbar 

  2) [chromium] › editor/plugins/align-hook.spec.js:205:3 › Align Hook Works as Expected › Block with default align › shows the expected buttons on the alignment toolbar 

    Retry #2 ───────────────────────────────────────────────────────────────────────────────────────
    Error: Timed out 5000ms waiting for expect(locator).toHaveText(expected)

    Locator: getByRole('menu', { name: 'Align' }).getByRole('menuitemradio')
    - Expected  - 1
    + Received  + 1

      Array [
        "None",
        "Align left",
        "Align center",
        "Align right",
    -   "Maximum wide width",
    +   "Wide width",
        "Full width",
      ]
    Call log:
      - expect.toHaveText with timeout 5000ms
      - waiting for getByRole('menu', { name: 'Align' }).getByRole('menuitemradio')
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements
      -   locator resolved to 6 elements


      214 | 					.getByRole( 'menu', { name: 'Align' } )
      215 | 					.getByRole( 'menuitemradio' )
    > 216 | 			).toHaveText( Object.values( alignLabels ) );
          | 			  ^
      217 | 		} );
      218 |
      219 | 		test( 'applies the selected alignment by default', async ( {

        at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/plugins/align-hook.spec.js:216:6
} );

test( 'applies the selected alignment by default', async ( {
Expand Down
2 changes: 1 addition & 1 deletion test/e2e/specs/editor/various/block-grouping.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -329,9 +329,9 @@
await editor.clickBlockToolbarButton( 'Align' );
await alignOptions
.getByRole( 'menuitemradio', {
name: 'Wide width',
name: 'Maximum wide width',
} )
.click();

Check failure on line 334 in test/e2e/specs/editor/various/block-grouping.spec.js

View workflow job for this annotation

GitHub Actions / Playwright - 3

[chromium] › editor/various/block-grouping.spec.js:309:3 › Block Grouping › Preserving selected blocks attributes › preserves width alignment settings of selected blocks 

  1) [chromium] › editor/various/block-grouping.spec.js:309:3 › Block Grouping › Preserving selected blocks attributes › preserves width alignment settings of selected blocks 
    TimeoutError: locator.click: Timeout 10000ms exceeded.
    Call log:
      - waiting for getByRole('menu', { name: 'Align' }).getByRole('menuitemradio', { name: 'Maximum wide width' })


      332 | 					name: 'Maximum wide width',
      333 | 				} )
    > 334 | 				.click();
          | 				 ^
      335 |
      336 | 			await editor.insertBlock( {
      337 | 				name: 'core/paragraph',

        at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/block-grouping.spec.js:334:6

Check failure on line 334 in test/e2e/specs/editor/various/block-grouping.spec.js

View workflow job for this annotation

GitHub Actions / Playwright - 3

[chromium] › editor/various/block-grouping.spec.js:309:3 › Block Grouping › Preserving selected blocks attributes › preserves width alignment settings of selected blocks 

  1) [chromium] › editor/various/block-grouping.spec.js:309:3 › Block Grouping › Preserving selected blocks attributes › preserves width alignment settings of selected blocks 

    Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
    TimeoutError: locator.click: Timeout 10000ms exceeded.
    Call log:
      - waiting for getByRole('menu', { name: 'Align' }).getByRole('menuitemradio', { name: 'Maximum wide width' })


      332 | 					name: 'Maximum wide width',
      333 | 				} )
    > 334 | 				.click();
          | 				 ^
      335 |
      336 | 			await editor.insertBlock( {
      337 | 				name: 'core/paragraph',

        at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/block-grouping.spec.js:334:6

Check failure on line 334 in test/e2e/specs/editor/various/block-grouping.spec.js

View workflow job for this annotation

GitHub Actions / Playwright - 3

[chromium] › editor/various/block-grouping.spec.js:309:3 › Block Grouping › Preserving selected blocks attributes › preserves width alignment settings of selected blocks 

  1) [chromium] › editor/various/block-grouping.spec.js:309:3 › Block Grouping › Preserving selected blocks attributes › preserves width alignment settings of selected blocks 

    Retry #2 ───────────────────────────────────────────────────────────────────────────────────────
    TimeoutError: locator.click: Timeout 10000ms exceeded.
    Call log:
      - waiting for getByRole('menu', { name: 'Align' }).getByRole('menuitemradio', { name: 'Maximum wide width' })


      332 | 					name: 'Maximum wide width',
      333 | 				} )
    > 334 | 				.click();
          | 				 ^
      335 |
      336 | 			await editor.insertBlock( {
      337 | 				name: 'core/paragraph',

        at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/block-grouping.spec.js:334:6

await editor.insertBlock( {
name: 'core/paragraph',
Expand Down
Loading