From 4ee55112b2afae1f45ca9ed33c0abcd3b3df31c3 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Fri, 12 Jul 2019 09:35:34 +0200 Subject: [PATCH 1/5] Try: Always collapse block alignments. This PR makes the block alignments always be collapsed. This group would already collapse at mobile responsive breakpoints. In addition, this PR also adds a dropdown arrow. This comes with a couple of benefit: - It ensures that the block toolbar always fits even when the item is deeply nested inside columns. - It affords a scalable method to show additional alignment options, such as those suggested in #16385. - It scales to future ideas of allowing a theme to create CSS grid-based layouts, which could allow theme authors to create their own custom alignments such as "pull right" or others. - It has labels, to be descriptive of such new alignments. Noting that 3 is just an idea at this point, but the other items on the list can potentially benefit us today. --- .../src/components/block-alignment-toolbar/index.js | 9 +++------ packages/components/src/dropdown-menu/style.scss | 6 ++++++ 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/block-alignment-toolbar/index.js b/packages/block-editor/src/components/block-alignment-toolbar/index.js index adf02cd90b08b..74361e81e9c85 100644 --- a/packages/block-editor/src/components/block-alignment-toolbar/index.js +++ b/packages/block-editor/src/components/block-alignment-toolbar/index.js @@ -74,15 +74,12 @@ export default compose( }; } ), withViewportMatch( { isLargeViewport: 'medium' } ), - withSelect( ( select, { clientId, isLargeViewport, isCollapsed } ) => { - const { getBlockRootClientId, getSettings } = select( 'core/block-editor' ); + withSelect( ( select ) => { + const { getSettings } = select( 'core/block-editor' ); const settings = getSettings(); return { wideControlsEnabled: settings.alignWide, - isCollapsed: isCollapsed || ! isLargeViewport || ( - ! settings.hasFixedToolbar && - getBlockRootClientId( clientId ) - ), + isCollapsed: true, }; } ), )( BlockAlignmentToolbar ); diff --git a/packages/components/src/dropdown-menu/style.scss b/packages/components/src/dropdown-menu/style.scss index cbd41243062d3..bb24064cf92bc 100644 --- a/packages/components/src/dropdown-menu/style.scss +++ b/packages/components/src/dropdown-menu/style.scss @@ -35,6 +35,12 @@ @include dropdown-arrow(); } } + + // Add a dropdown arrow indicator. + &.components-toolbar .components-dropdown-menu__toggle::after { + @include dropdown-arrow(); + } + } .components-dropdown-menu__popover .components-popover__content { From 0675b8f467b3507eb9253eea993f21b6d8fe1551 Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Thu, 25 Jul 2019 15:42:33 +0200 Subject: [PATCH 2/5] Refactor alignment toolbars to be collapsed by default --- .../src/components/alignment-toolbar/index.js | 36 ++++--------------- .../block-alignment-toolbar/index.js | 23 ++++++------ .../README.md | 5 +++ .../block-vertical-alignment-toolbar/index.js | 26 ++------------ packages/block-library/src/heading/edit.js | 1 + .../components/src/dropdown-menu/README.md | 12 ++++++- .../components/src/dropdown-menu/index.js | 3 +- .../components/src/dropdown-menu/style.scss | 6 ---- packages/components/src/toolbar/index.js | 1 + 9 files changed, 40 insertions(+), 73 deletions(-) diff --git a/packages/block-editor/src/components/alignment-toolbar/index.js b/packages/block-editor/src/components/alignment-toolbar/index.js index 1124f44f033e1..981e8d6f9914d 100644 --- a/packages/block-editor/src/components/alignment-toolbar/index.js +++ b/packages/block-editor/src/components/alignment-toolbar/index.js @@ -8,34 +8,26 @@ import { find } from 'lodash'; */ import { __ } from '@wordpress/i18n'; import { Toolbar } from '@wordpress/components'; -import { withViewportMatch } from '@wordpress/viewport'; -import { withSelect } from '@wordpress/data'; -import { compose } from '@wordpress/compose'; - -/** - * Internal dependencies - */ -import { withBlockEditContext } from '../block-edit/context'; const DEFAULT_ALIGNMENT_CONTROLS = [ { icon: 'editor-alignleft', - title: __( 'Align text left' ), + title: __( 'Align Text Left' ), align: 'left', }, { icon: 'editor-aligncenter', - title: __( 'Align text center' ), + title: __( 'Align Text Center' ), align: 'center', }, { icon: 'editor-alignright', - title: __( 'Align text right' ), + title: __( 'Align Text Right' ), align: 'right', }, ]; -export function AlignmentToolbar( { isCollapsed, value, onChange, alignmentControls = DEFAULT_ALIGNMENT_CONTROLS } ) { +export function AlignmentToolbar( { value, onChange, alignmentControls = DEFAULT_ALIGNMENT_CONTROLS, isCollapsed = true } ) { function applyOrUnset( align ) { return () => onChange( value === align ? undefined : align ); } @@ -46,7 +38,7 @@ export function AlignmentToolbar( { isCollapsed, value, onChange, alignmentContr { const { align } = control; const isActive = ( value === align ); @@ -61,20 +53,4 @@ export function AlignmentToolbar( { isCollapsed, value, onChange, alignmentContr ); } -export default compose( - withBlockEditContext( ( { clientId } ) => { - return { - clientId, - }; - } ), - withViewportMatch( { isLargeViewport: 'medium' } ), - withSelect( ( select, { clientId, isLargeViewport, isCollapsed } ) => { - const { getBlockRootClientId, getSettings } = select( 'core/block-editor' ); - return { - isCollapsed: isCollapsed || ! isLargeViewport || ( - ! getSettings().hasFixedToolbar && - getBlockRootClientId( clientId ) - ), - }; - } ), -)( AlignmentToolbar ); +export default AlignmentToolbar; diff --git a/packages/block-editor/src/components/block-alignment-toolbar/index.js b/packages/block-editor/src/components/block-alignment-toolbar/index.js index 74361e81e9c85..e766504f0d9f4 100644 --- a/packages/block-editor/src/components/block-alignment-toolbar/index.js +++ b/packages/block-editor/src/components/block-alignment-toolbar/index.js @@ -3,7 +3,6 @@ */ import { __ } from '@wordpress/i18n'; import { Toolbar } from '@wordpress/components'; -import { withViewportMatch } from '@wordpress/viewport'; import { withSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; @@ -15,30 +14,31 @@ import { withBlockEditContext } from '../block-edit/context'; const BLOCK_ALIGNMENTS_CONTROLS = { left: { icon: 'align-left', - title: __( 'Align left' ), + title: __( 'Align Left' ), }, center: { icon: 'align-center', - title: __( 'Align center' ), + title: __( 'Align Center' ), }, right: { icon: 'align-right', - title: __( 'Align right' ), + title: __( 'Align Right' ), }, wide: { icon: 'align-wide', - title: __( 'Wide width' ), + title: __( 'Wide Width' ), }, full: { icon: 'align-full-width', - title: __( 'Full width' ), + title: __( 'Full Width' ), }, }; const DEFAULT_CONTROLS = [ 'left', 'center', 'right', 'wide', 'full' ]; +const DEFAULT_CONTROL = 'center'; const WIDE_CONTROLS = [ 'wide', 'full' ]; -export function BlockAlignmentToolbar( { isCollapsed, value, onChange, controls = DEFAULT_CONTROLS, wideControlsEnabled = false } ) { +export function BlockAlignmentToolbar( { value, onChange, controls = DEFAULT_CONTROLS, isCollapsed = true, wideControlsEnabled = false } ) { function applyOrUnset( align ) { return () => onChange( value === align ? undefined : align ); } @@ -47,13 +47,14 @@ export function BlockAlignmentToolbar( { isCollapsed, value, onChange, controls controls : controls.filter( ( control ) => WIDE_CONTROLS.indexOf( control ) === -1 ); - const activeAlignment = BLOCK_ALIGNMENTS_CONTROLS[ value ]; + const activeAlignmentControl = BLOCK_ALIGNMENTS_CONTROLS[ value ]; + const defaultAlignmentControl = BLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ]; return ( { return { @@ -73,13 +74,11 @@ export default compose( clientId, }; } ), - withViewportMatch( { isLargeViewport: 'medium' } ), withSelect( ( select ) => { const { getSettings } = select( 'core/block-editor' ); const settings = getSettings(); return { wideControlsEnabled: settings.alignWide, - isCollapsed: true, }; } ), )( BlockAlignmentToolbar ); diff --git a/packages/block-editor/src/components/block-vertical-alignment-toolbar/README.md b/packages/block-editor/src/components/block-vertical-alignment-toolbar/README.md index 8eca9ffe0861a..3e11032e85fa5 100644 --- a/packages/block-editor/src/components/block-vertical-alignment-toolbar/README.md +++ b/packages/block-editor/src/components/block-vertical-alignment-toolbar/README.md @@ -66,6 +66,11 @@ _Note:_ the user can repeatedly click on the toolbar buttons to toggle the align The current value of the alignment setting. You may only choose from the `Options` listed above. +### `isCollapsed` +* **Type:** `Boolean` +* **Default:** `true` + +Whether to display toolbar options in the dropdown menu. This toolbar is collapsed by default. ### `onChange` * **Type:** `Function` diff --git a/packages/block-editor/src/components/block-vertical-alignment-toolbar/index.js b/packages/block-editor/src/components/block-vertical-alignment-toolbar/index.js index 86414d5ddf07f..22206984dc270 100644 --- a/packages/block-editor/src/components/block-vertical-alignment-toolbar/index.js +++ b/packages/block-editor/src/components/block-vertical-alignment-toolbar/index.js @@ -3,14 +3,10 @@ */ import { _x } from '@wordpress/i18n'; import { Toolbar } from '@wordpress/components'; -import { withViewportMatch } from '@wordpress/viewport'; -import { withSelect } from '@wordpress/data'; -import { compose } from '@wordpress/compose'; /** * Internal dependencies */ -import { withBlockEditContext } from '../block-edit/context'; import { alignTop, alignCenter, alignBottom } from './icons'; const BLOCK_ALIGNMENTS_CONTROLS = { @@ -31,7 +27,7 @@ const BLOCK_ALIGNMENTS_CONTROLS = { const DEFAULT_CONTROLS = [ 'top', 'center', 'bottom' ]; const DEFAULT_CONTROL = 'top'; -export function BlockVerticalAlignmentToolbar( { isCollapsed, value, onChange, controls = DEFAULT_CONTROLS } ) { +export function BlockVerticalAlignmentToolbar( { value, onChange, controls = DEFAULT_CONTROLS, isCollapsed = true } ) { function applyOrUnset( align ) { return () => onChange( value === align ? undefined : align ); } @@ -43,7 +39,7 @@ export function BlockVerticalAlignmentToolbar( { isCollapsed, value, onChange, c { return { @@ -60,20 +56,4 @@ export function BlockVerticalAlignmentToolbar( { isCollapsed, value, onChange, c /** * @see https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/block-vertical-alignment-toolbar/README.md */ -export default compose( - withBlockEditContext( ( { clientId } ) => { - return { - clientId, - }; - } ), - withViewportMatch( { isLargeViewport: 'medium' } ), - withSelect( ( select, { clientId, isLargeViewport, isCollapsed } ) => { - const { getBlockRootClientId, getSettings } = select( 'core/block-editor' ); - return { - isCollapsed: isCollapsed || ! isLargeViewport || ( - ! getSettings().hasFixedToolbar && - !! getBlockRootClientId( clientId ) - ), - }; - } ), -)( BlockVerticalAlignmentToolbar ); +export default BlockVerticalAlignmentToolbar; diff --git a/packages/block-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js index 7fc4721c9169a..fd280fd2714fe 100644 --- a/packages/block-library/src/heading/edit.js +++ b/packages/block-library/src/heading/edit.js @@ -69,6 +69,7 @@ function HeadingEdit( { setAttributes( { level: newLevel } ) } />

{ __( 'Text Alignment' ) }

{ setAttributes( { align: nextAlign } ); diff --git a/packages/components/src/dropdown-menu/README.md b/packages/components/src/dropdown-menu/README.md index 4e2243c653b2f..f118a1bc4c241 100644 --- a/packages/components/src/dropdown-menu/README.md +++ b/packages/components/src/dropdown-menu/README.md @@ -140,12 +140,22 @@ The component accepts the following props: The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug to be shown in the collapsed menu button. -- Type: `String` +- Type: `String|null` - Required: No - Default: `"menu"` See also: [https://developer.wordpress.org/resource/dashicons/](https://developer.wordpress.org/resource/dashicons/) +#### hasArrowIndicator + +Whether to display an arrow indicator next to the icon. + +- Type: `Boolean` +- Required: No +- Default: `false` + +For backward compatibility, when `icon` is explicitly set to `null` then the arrow indicator will be displayed even when this flag is set to `false`. + #### label A human-readable label to present as accessibility text on the focused collapsed menu button. diff --git a/packages/components/src/dropdown-menu/index.js b/packages/components/src/dropdown-menu/index.js index 8195a309ec024..8212deaeda595 100644 --- a/packages/components/src/dropdown-menu/index.js +++ b/packages/components/src/dropdown-menu/index.js @@ -20,6 +20,7 @@ function DropdownMenu( { children, className, controls, + hasArrowIndicator = false, icon = 'menu', label, menuLabel, @@ -70,7 +71,7 @@ function DropdownMenu( { labelPosition={ __unstableLabelPosition } tooltip={ label } > - { ! icon && } + { ( ! icon || hasArrowIndicator ) && } ); } } diff --git a/packages/components/src/dropdown-menu/style.scss b/packages/components/src/dropdown-menu/style.scss index bb24064cf92bc..cbd41243062d3 100644 --- a/packages/components/src/dropdown-menu/style.scss +++ b/packages/components/src/dropdown-menu/style.scss @@ -35,12 +35,6 @@ @include dropdown-arrow(); } } - - // Add a dropdown arrow indicator. - &.components-toolbar .components-dropdown-menu__toggle::after { - @include dropdown-arrow(); - } - } .components-dropdown-menu__popover .components-popover__content { diff --git a/packages/components/src/toolbar/index.js b/packages/components/src/toolbar/index.js index 64e4f8359919d..3dc1f3c1d4451 100644 --- a/packages/components/src/toolbar/index.js +++ b/packages/components/src/toolbar/index.js @@ -58,6 +58,7 @@ function Toolbar( { controls = [], children, className, isCollapsed, icon, label if ( isCollapsed ) { return ( Date: Thu, 25 Jul 2019 15:46:36 +0200 Subject: [PATCH 3/5] Add arrow indicator to the Edit tabel dropdown menu --- packages/block-library/src/table/edit.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js index 90a4682e2223a..3c5f6c11fe277 100644 --- a/packages/block-library/src/table/edit.js +++ b/packages/block-library/src/table/edit.js @@ -461,6 +461,7 @@ export class TableEdit extends Component { Date: Thu, 25 Jul 2019 15:50:00 +0200 Subject: [PATCH 4/5] Update snapshot tests to work with updated components --- .../test/__snapshots__/index.js.snap | 12 +++++++----- .../test/__snapshots__/index.js.snap | 9 +++++---- .../test/__snapshots__/index.js.snap | 3 ++- 3 files changed, 14 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap index 34e440f5d76fe..5ea348074add6 100644 --- a/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap @@ -21,7 +21,8 @@ exports[`AlignmentToolbar should allow custom alignment controls to be specified ] } icon="editor-aligncenter" - label="Change Text Alignment" + isCollapsed={true} + label="Change text alignment" /> `; @@ -34,25 +35,26 @@ exports[`AlignmentToolbar should match snapshot 1`] = ` "icon": "editor-alignleft", "isActive": true, "onClick": [Function], - "title": "Align text left", + "title": "Align Text Left", }, Object { "align": "center", "icon": "editor-aligncenter", "isActive": false, "onClick": [Function], - "title": "Align text center", + "title": "Align Text Center", }, Object { "align": "right", "icon": "editor-alignright", "isActive": false, "onClick": [Function], - "title": "Align text right", + "title": "Align Text Right", }, ] } icon="editor-alignleft" - label="Change Text Alignment" + isCollapsed={true} + label="Change text alignment" /> `; diff --git a/packages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap index 27fbae699c3bd..e35af5e597210 100644 --- a/packages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/block-alignment-toolbar/test/__snapshots__/index.js.snap @@ -8,23 +8,24 @@ exports[`BlockAlignmentToolbar should match snapshot 1`] = ` "icon": "align-left", "isActive": true, "onClick": [Function], - "title": "Align left", + "title": "Align Left", }, Object { "icon": "align-center", "isActive": false, "onClick": [Function], - "title": "Align center", + "title": "Align Center", }, Object { "icon": "align-right", "isActive": false, "onClick": [Function], - "title": "Align right", + "title": "Align Right", }, ] } icon="align-left" - label="Change Alignment" + isCollapsed={true} + label="Change alignment" /> `; diff --git a/packages/block-editor/src/components/block-vertical-alignment-toolbar/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-vertical-alignment-toolbar/test/__snapshots__/index.js.snap index 5af12d1e1a1c7..605e697786030 100644 --- a/packages/block-editor/src/components/block-vertical-alignment-toolbar/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/block-vertical-alignment-toolbar/test/__snapshots__/index.js.snap @@ -79,6 +79,7 @@ exports[`BlockVerticalAlignmentToolbar should match snapshot 1`] = ` /> } - label="Change Alignment" + isCollapsed={true} + label="Change vertical alignment" /> `; From 66a5518c1b655ea5dfa5061d3f9506fa3bc794b4 Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Thu, 25 Jul 2019 18:49:16 +0200 Subject: [PATCH 5/5] Update failing e2e tests to work after UI changes introduced --- .../e2e-tests/specs/block-deletion.test.js | 2 +- .../e2e-tests/specs/block-grouping.test.js | 10 ++-- .../blocks/__snapshots__/table.test.js.snap | 4 +- packages/e2e-tests/specs/blocks/table.test.js | 2 + .../specs/keyboard-navigable-blocks.test.js | 22 ++----- .../specs/plugins/align-hook.test.js | 57 +++++++++++++------ 6 files changed, 54 insertions(+), 43 deletions(-) diff --git a/packages/e2e-tests/specs/block-deletion.test.js b/packages/e2e-tests/specs/block-deletion.test.js index f5cfe7aec0da4..4466c03783f29 100644 --- a/packages/e2e-tests/specs/block-deletion.test.js +++ b/packages/e2e-tests/specs/block-deletion.test.js @@ -35,7 +35,7 @@ const clickOnBlockSettingsMenuRemoveBlockButton = async () => { let isRemoveButton = false; - let numButtons = await page.$$eval( '.block-editor-block-toolbar button', ( btns ) => btns.length ); + let numButtons = await page.$$eval( '.block-editor-block-settings-menu__content button', ( btns ) => btns.length ); // Limit by the number of buttons available while ( --numButtons ) { diff --git a/packages/e2e-tests/specs/block-grouping.test.js b/packages/e2e-tests/specs/block-grouping.test.js index 3a42f3f6e43f6..64bba812f4f27 100644 --- a/packages/e2e-tests/specs/block-grouping.test.js +++ b/packages/e2e-tests/specs/block-grouping.test.js @@ -157,13 +157,15 @@ describe( 'Block Grouping', () => { await insertBlock( 'Heading' ); await page.keyboard.type( 'Group Heading' ); - // Full width image + // Full width image. await insertBlock( 'Image' ); - await clickBlockToolbarButton( 'Full width' ); + await clickBlockToolbarButton( 'Change alignment' ); + await page.click( '.components-dropdown-menu__menu button svg.dashicons-align-full-width' ); - // Wide width image) + // Wide width image. await insertBlock( 'Image' ); - await clickBlockToolbarButton( 'Wide width' ); + await clickBlockToolbarButton( 'Change alignment' ); + await page.click( '.components-dropdown-menu__menu button svg.dashicons-align-wide' ); await insertBlock( 'Paragraph' ); await page.keyboard.type( 'Some paragraph' ); diff --git a/packages/e2e-tests/specs/blocks/__snapshots__/table.test.js.snap b/packages/e2e-tests/specs/blocks/__snapshots__/table.test.js.snap index f2c4ee232d078..1065dc2615e2e 100644 --- a/packages/e2e-tests/specs/blocks/__snapshots__/table.test.js.snap +++ b/packages/e2e-tests/specs/blocks/__snapshots__/table.test.js.snap @@ -2,13 +2,13 @@ exports[`Table allows adding and deleting columns across the table header, body and footer 1`] = ` " -
+
" `; exports[`Table allows adding and deleting columns across the table header, body and footer 2`] = ` " -
+
" `; diff --git a/packages/e2e-tests/specs/blocks/table.test.js b/packages/e2e-tests/specs/blocks/table.test.js index dd24f06b24ada..8da1506c1c51e 100644 --- a/packages/e2e-tests/specs/blocks/table.test.js +++ b/packages/e2e-tests/specs/blocks/table.test.js @@ -134,6 +134,8 @@ describe( 'Table', () => { await headerSwitch[ 0 ].click(); await footerSwitch[ 0 ].click(); + await page.click( '.wp-block-table__cell-content' ); + // Add a column. await clickBlockToolbarButton( 'Edit table' ); const addColumnAfterButton = await page.$x( "//button[text()='Add Column After']" ); diff --git a/packages/e2e-tests/specs/keyboard-navigable-blocks.test.js b/packages/e2e-tests/specs/keyboard-navigable-blocks.test.js index 64d1afcda1a61..a8ebe96c34fcd 100644 --- a/packages/e2e-tests/specs/keyboard-navigable-blocks.test.js +++ b/packages/e2e-tests/specs/keyboard-navigable-blocks.test.js @@ -76,26 +76,12 @@ const tabThroughBlockToolbar = async () => { ); await expect( isFocusedBlockSwitcherControl ).toBe( true ); - // Tab to focus on the 'left paragraph alignment' dropdown control + // Tab to focus on the 'Change text alignment' dropdown control await page.keyboard.press( 'Tab' ); - const isFocusedLeftAlignmentControl = await page.evaluate( () => - document.activeElement.classList.contains( 'components-toolbar__control' ) - ); - await expect( isFocusedLeftAlignmentControl ).toBe( true ); - - // Tab to focus on the 'center paragraph alignment' dropdown control - await page.keyboard.press( 'Tab' ); - const isFocusedCenterAlignmentControl = await page.evaluate( () => - document.activeElement.classList.contains( 'components-toolbar__control' ) - ); - await expect( isFocusedCenterAlignmentControl ).toBe( true ); - - // Tab to focus on the 'right paragraph alignment' dropdown control - await page.keyboard.press( 'Tab' ); - const isFocusedRightAlignmentControl = await page.evaluate( () => - document.activeElement.classList.contains( 'components-toolbar__control' ) + const isFocusedChangeTextAlignmentControl = await page.evaluate( () => + document.activeElement.classList.contains( 'components-dropdown-menu__toggle' ) ); - await expect( isFocusedRightAlignmentControl ).toBe( true ); + await expect( isFocusedChangeTextAlignmentControl ).toBe( true ); // Tab to focus on the 'More formatting' dropdown toggle await page.keyboard.press( 'Tab' ); diff --git a/packages/e2e-tests/specs/plugins/align-hook.test.js b/packages/e2e-tests/specs/plugins/align-hook.test.js index aacacbe657e46..4735560b8fb81 100644 --- a/packages/e2e-tests/specs/plugins/align-hook.test.js +++ b/packages/e2e-tests/specs/plugins/align-hook.test.js @@ -13,6 +13,8 @@ import { } from '@wordpress/e2e-test-utils'; describe( 'Align Hook Works As Expected', () => { + const CHANGE_ALIGNMENT_BUTTON_SELECTOR = '.block-editor-block-toolbar .components-dropdown-menu__toggle[aria-label="Change alignment"]'; + beforeAll( async () => { await activatePlugin( 'gutenberg-test-align-hook' ); } ); @@ -26,14 +28,16 @@ describe( 'Align Hook Works As Expected', () => { } ); const getAlignmentToolbarLabels = async () => { + await page.click( CHANGE_ALIGNMENT_BUTTON_SELECTOR ); + const buttonLabels = await page.evaluate( () => { return Array.from( document.querySelectorAll( - '.block-editor-block-toolbar button[aria-label^="Align"]' + '.components-dropdown-menu__menu button' ) ).map( ( button ) => { - return button.getAttribute( 'aria-label' ); + return button.innerText; } ); } ); @@ -44,6 +48,7 @@ describe( 'Align Hook Works As Expected', () => { it( 'Shows the expected buttons on the alignment toolbar', async () => { await insertBlock( blockName ); + expect( await getAlignmentToolbarLabels() ).toEqual( buttonLabels ); @@ -53,8 +58,10 @@ describe( 'Align Hook Works As Expected', () => { const createDoesNotApplyAlignmentByDefaultTest = ( blockName ) => { it( 'Does not apply any alignment by default', async () => { await insertBlock( blockName ); + // verify no alignment button is in pressed state - const pressedButtons = await page.$$( '.block-editor-block-toolbar button[aria-label^="Align"][aria-pressed="true"]' ); + await page.click( CHANGE_ALIGNMENT_BUTTON_SELECTOR ); + const pressedButtons = await page.$$( '.components-dropdown-menu__menu button.is-active' ); expect( pressedButtons ).toHaveLength( 0 ); } ); }; @@ -69,13 +76,15 @@ describe( 'Align Hook Works As Expected', () => { const createCorrectlyAppliesAndRemovesAlignmentTest = ( blockName, alignment ) => { it( 'Correctly applies the selected alignment and correctly removes the alignment', async () => { - const BUTTON_SELECTOR = `.block-editor-block-toolbar button[aria-label="Align ${ alignment }"]`; - const BUTTON_PRESSED_SELECTOR = `${ BUTTON_SELECTOR }[aria-pressed="true"]`; + const BUTTON_SELECTOR = `.components-dropdown-menu__menu button svg.dashicons-align-${ alignment }`; + const BUTTON_PRESSED_SELECTOR = '.components-dropdown-menu__menu button.is-active'; // set the specified alignment. await insertBlock( blockName ); + await page.click( CHANGE_ALIGNMENT_BUTTON_SELECTOR ); await page.click( BUTTON_SELECTOR ); // verify the button of the specified alignment is pressed. + await page.click( CHANGE_ALIGNMENT_BUTTON_SELECTOR ); let pressedButtons = await page.$$( BUTTON_PRESSED_SELECTOR ); expect( pressedButtons ).toHaveLength( 1 ); @@ -92,9 +101,11 @@ describe( 'Align Hook Works As Expected', () => { ); // remove the alignment. + await page.click( CHANGE_ALIGNMENT_BUTTON_SELECTOR ); await page.click( BUTTON_SELECTOR ); // verify no alignment button is in pressed state. + await page.click( CHANGE_ALIGNMENT_BUTTON_SELECTOR ); pressedButtons = await page.$$( BUTTON_PRESSED_SELECTOR ); expect( pressedButtons ).toHaveLength( 0 ); @@ -110,6 +121,7 @@ describe( 'Align Hook Works As Expected', () => { ); // verify no alignment button is in pressed state after parsing the block. + await page.click( CHANGE_ALIGNMENT_BUTTON_SELECTOR ); pressedButtons = await page.$$( BUTTON_PRESSED_SELECTOR ); expect( pressedButtons ).toHaveLength( 0 ); } @@ -120,7 +132,9 @@ describe( 'Align Hook Works As Expected', () => { const BLOCK_NAME = 'Test No Alignment Set'; it( 'Shows no alignment buttons on the alignment toolbar', async () => { - expect( await getAlignmentToolbarLabels() ).toHaveLength( 0 ); + await insertBlock( BLOCK_NAME ); + const changeAlignmentButton = await page.$( CHANGE_ALIGNMENT_BUTTON_SELECTOR ); + expect( changeAlignmentButton ).toBe( null ); } ); @@ -136,9 +150,11 @@ describe( 'Align Hook Works As Expected', () => { const BLOCK_NAME = 'Test Align True'; createShowsTheExpectedButtonsTest( BLOCK_NAME, [ - 'Align left', - 'Align center', - 'Align right', + 'Align Left', + 'Align Center', + 'Align Right', + 'Wide Width', + 'Full Width', ] ); createDoesNotApplyAlignmentByDefaultTest( BLOCK_NAME ); @@ -150,8 +166,8 @@ describe( 'Align Hook Works As Expected', () => { const BLOCK_NAME = 'Test Align Array'; createShowsTheExpectedButtonsTest( BLOCK_NAME, [ - 'Align left', - 'Align center', + 'Align Left', + 'Align Center', ] ); createDoesNotApplyAlignmentByDefaultTest( BLOCK_NAME ); @@ -161,18 +177,21 @@ describe( 'Align Hook Works As Expected', () => { describe( 'Block with default align', () => { const BLOCK_NAME = 'Test Default Align'; - const PRESSED_BUTTON_SELECTOR = '.block-editor-block-toolbar button[aria-label="Align right"][aria-pressed="true"]'; + const SELECTED_ALIGNMENT_CONTROL_SELECTOR = '//div[contains(@class, "components-dropdown-menu__menu")]//button[contains(@class, "is-active")][text()="Align Right"]'; createShowsTheExpectedButtonsTest( BLOCK_NAME, [ - 'Align left', - 'Align center', - 'Align right', + 'Align Left', + 'Align Center', + 'Align Right', + 'Wide Width', + 'Full Width', ] ); it( 'Applies the selected alignment by default', async () => { await insertBlock( BLOCK_NAME ); // verify the correct alignment button is pressed - const pressedButtons = await page.$$( PRESSED_BUTTON_SELECTOR ); - expect( pressedButtons ).toHaveLength( 1 ); + await page.click( CHANGE_ALIGNMENT_BUTTON_SELECTOR ); + const selectedAlignmentControls = await page.$x( SELECTED_ALIGNMENT_CONTROL_SELECTOR ); + expect( selectedAlignmentControls ).toHaveLength( 1 ); } ); it( 'The default markup does not contain the alignment attribute but contains the alignment class', @@ -187,7 +206,9 @@ describe( 'Align Hook Works As Expected', () => { it( 'Can remove the default alignment and the align attribute equals none but alignnone class is not applied', async () => { await insertBlock( BLOCK_NAME ); // remove the alignment. - await page.click( PRESSED_BUTTON_SELECTOR ); + await page.click( CHANGE_ALIGNMENT_BUTTON_SELECTOR ); + const [ selectedAlignmentControl ] = await page.$x( SELECTED_ALIGNMENT_CONTROL_SELECTOR ); + await selectedAlignmentControl.click(); const markup = await getEditedPostContent(); expect( markup ).toContain( '"align":""' ); } );