From d5217492515960a08b69ac6b594bae5295adc858 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 15 Oct 2020 13:50:02 +1100 Subject: [PATCH 01/23] Show text labels in block toolbars when option is set. --- .../src/components/block-toolbar/style.scss | 85 +++++++++++++++++++ .../rich-text/format-toolbar/index.js | 5 +- .../src/components/header/style.scss | 2 - 3 files changed, 87 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss index c9499b4731dfd..d4a5df63608f2 100644 --- a/packages/block-editor/src/components/block-toolbar/style.scss +++ b/packages/block-editor/src/components/block-toolbar/style.scss @@ -106,3 +106,88 @@ transform: translateY(-($block-toolbar-height + $grid-unit-15)); } } + +.show-icon-labels { + .block-editor-block-toolbar { + .components-button.has-icon { + width: auto; + + // Hide the button icons when labels are set to display... + svg { + display: none; + } + // ... and display labels. + &::after { + content: attr(aria-label); + } + } + } + + // Padding overrides. + + .components-accessible-toolbar .components-toolbar-group > div:first-child:last-child > .components-button.has-icon { + padding-left: 6px; + padding-right: 6px; + } + + // Switcher overrides. + .block-editor-block-switcher { + border-right: 1px solid $gray-900; + + .components-dropdown-menu__toggle { + margin-left: 0; + } + } + + .block-editor-block-switcher .components-dropdown-menu__toggle, + .block-editor-block-switcher__no-switcher-icon { + .block-editor-block-icon { + width: 0 !important; + height: 0 !important; + } + + &:focus::before { + right: $grid-unit-05 !important; + } + } + + // Parent selector overrides + + .block-editor-block-parent-selector__button { + .block-editor-block-icon { + width: 0; + } + } + + // Mover overrides. + .block-editor-block-toolbar__block-controls .block-editor-block-mover { + margin-left: 0; + white-space: nowrap; + } + + .block-editor-block-mover__drag-handle.has-icon { + padding-left: 6px !important; + padding-right: 6px !important; + border-right: 1px solid $gray-900; + } + + .is-up-button { + border-bottom: 1px solid $gray-900; + } + + .block-editor-block-contextual-toolbar .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button { + width: auto; + } + + // Mobile adjustments + .components-toolbar, + .components-toolbar-group { + flex-shrink: 1; + } + + .block-editor-format-toolbar { + .components-button + .components-button { + margin-left: 6px; + } + } +} diff --git a/packages/block-editor/src/components/rich-text/format-toolbar/index.js b/packages/block-editor/src/components/rich-text/format-toolbar/index.js index 4e98ce8d064ba..fd48a1953220e 100644 --- a/packages/block-editor/src/components/rich-text/format-toolbar/index.js +++ b/packages/block-editor/src/components/rich-text/format-toolbar/index.js @@ -41,9 +41,8 @@ const FormatToolbar = () => { { ( toggleProps ) => ( Date: Thu, 15 Oct 2020 14:48:49 +1100 Subject: [PATCH 02/23] Fix tests and snapshots. --- .../block-switcher/test/__snapshots__/index.js.snap | 2 +- .../editor/various/keyboard-navigable-blocks.test.js | 10 +++++++--- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap index a8ec2981e622b..b51b62a3ce8d3 100644 --- a/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap @@ -20,7 +20,7 @@ exports[`BlockSwitcherDropdownMenu should render disabled block switcher with mu showColors={true} /> } - title="Block icon" + title="Heading" /> `; diff --git a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js index 2b092c9b46690..401cd67e2c99f 100644 --- a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js +++ b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js @@ -43,7 +43,9 @@ const tabThroughParagraphBlock = async ( paragraphText ) => { const tabThroughBlockToolbar = async () => { await page.keyboard.press( 'Tab' ); - await expect( await getActiveLabel() ).toBe( 'Change block type or style' ); + await expect( await getActiveLabel() ).toBe( + 'Change block type or style ( Paragraph )' + ); await page.keyboard.press( 'ArrowRight' ); await expect( await getActiveLabel() ).toBe( 'Move up' ); @@ -64,13 +66,15 @@ const tabThroughBlockToolbar = async () => { await expect( await getActiveLabel() ).toBe( 'Link' ); await page.keyboard.press( 'ArrowRight' ); - await expect( await getActiveLabel() ).toBe( 'More rich text controls' ); + await expect( await getActiveLabel() ).toBe( 'More formatting' ); await page.keyboard.press( 'ArrowRight' ); await expect( await getActiveLabel() ).toBe( 'More options' ); await page.keyboard.press( 'ArrowRight' ); - await expect( await getActiveLabel() ).toBe( 'Change block type or style' ); + await expect( await getActiveLabel() ).toBe( + 'Change block type or style ( Paragraph )' + ); }; describe( 'Order of block keyboard navigation', () => { From 11be44578d2ca8eeaaa74c7bd43f7f37a9ed410f Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 5 Jan 2021 15:39:27 +1100 Subject: [PATCH 03/23] Redo block switcher labels --- .../src/components/block-switcher/index.js | 21 ++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js index cc34d56aa6aa7..d075b7f0dc443 100644 --- a/packages/block-editor/src/components/block-switcher/index.js +++ b/packages/block-editor/src/components/block-switcher/index.js @@ -16,6 +16,7 @@ import { import { switchToBlockType, store as blocksStore } from '@wordpress/blocks'; import { useSelect, useDispatch } from '@wordpress/data'; import { stack } from '@wordpress/icons'; +import { useViewportMatch } from '@wordpress/compose'; /** * Internal dependencies @@ -29,7 +30,12 @@ import BlockStylesMenu from './block-styles-menu'; export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => { const { replaceBlocks } = useDispatch( blockEditorStore ); const blockInformation = useBlockDisplayInformation( blocks[ 0 ].clientId ); - const { possibleBlockTransformations, hasBlockStyles, icon } = useSelect( + const { + possibleBlockTransformations, + hasBlockStyles, + icon, + blockTitle, + } = useSelect( ( select ) => { const { getBlockRootClientId, getBlockTransformItems } = select( blockEditorStore @@ -61,10 +67,14 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => { ), hasBlockStyles: !! styles?.length, icon: _icon, + blockTitle: getBlockType( firstBlockName ).title, }; }, [ clientIds, blocks, blockInformation?.icon ] ); + + const isSmallScreen = useViewportMatch( 'small', '<' ); + const onTransform = ( name ) => replaceBlocks( clientIds, switchToBlockType( blocks, name ) ); const hasPossibleBlockTransformations = !! possibleBlockTransformations.length; @@ -74,15 +84,20 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => { } /> ); } + + const singleBlockLabel = isSmallScreen + ? blockTitle + : `${ __( 'Change block type or style' ) } ( ${ blockTitle } )`; + const blockSwitcherLabel = 1 === blocks.length - ? __( 'Change block type or style' ) + ? singleBlockLabel : sprintf( /* translators: %s: number of blocks. */ _n( From 8ec8fe3b6f2fa1fbd1d7c10e4dd57c56f14c2cf8 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 5 Jan 2021 15:50:45 +1100 Subject: [PATCH 04/23] Update snapshot --- .../components/block-switcher/test/__snapshots__/index.js.snap | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap index b51b62a3ce8d3..b66f639d65af9 100644 --- a/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/block-switcher/test/__snapshots__/index.js.snap @@ -20,7 +20,6 @@ exports[`BlockSwitcherDropdownMenu should render disabled block switcher with mu showColors={true} /> } - title="Heading" /> `; From 7c777bd1c884e5c3858a5ac756e082c7b6313f16 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 6 Jan 2021 15:12:48 +1100 Subject: [PATCH 05/23] Simplify English strings where possible --- .../block-editor/src/components/alignment-toolbar/index.js | 2 +- .../alignment-toolbar/test/__snapshots__/index.js.snap | 4 ++-- packages/block-editor/src/components/block-mover/index.js | 3 +-- packages/components/src/toolbar/stories/index.js | 4 ++-- .../specs/editor/various/keyboard-navigable-blocks.test.js | 2 +- .../specs/editor/various/multi-block-selection.test.js | 2 +- 6 files changed, 8 insertions(+), 9 deletions(-) diff --git a/packages/block-editor/src/components/alignment-toolbar/index.js b/packages/block-editor/src/components/alignment-toolbar/index.js index 8eed48b364e48..1f8aa01508212 100644 --- a/packages/block-editor/src/components/alignment-toolbar/index.js +++ b/packages/block-editor/src/components/alignment-toolbar/index.js @@ -38,7 +38,7 @@ export function AlignmentToolbar( props ) { value, onChange, alignmentControls = DEFAULT_ALIGNMENT_CONTROLS, - label = __( 'Change text alignment' ), + label = __( 'Align' ), isCollapsed = true, } = props; 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 f995c767f9542..3fb02929f40ce 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 @@ -47,7 +47,7 @@ exports[`AlignmentToolbar should allow custom alignment controls to be specified } isCollapsed={true} - label="Change text alignment" + label="Align" popoverProps={ Object { "isAlternate": true, @@ -119,7 +119,7 @@ exports[`AlignmentToolbar should match snapshot 1`] = ` } isCollapsed={true} - label="Change text alignment" + label="Align" popoverProps={ Object { "isAlternate": true, diff --git a/packages/block-editor/src/components/block-mover/index.js b/packages/block-editor/src/components/block-mover/index.js index 7ba38ce5f039a..d727e56b65eb5 100644 --- a/packages/block-editor/src/components/block-mover/index.js +++ b/packages/block-editor/src/components/block-mover/index.js @@ -40,8 +40,7 @@ function BlockMover( { return null; } - const dragHandleLabel = - clientIds.length === 1 ? __( 'Drag block' ) : __( 'Drag blocks' ); + const dragHandleLabel = __( 'Drag' ); // We emulate a disabled state because forcefully applying the `disabled` // attribute on the buttons while it has focus causes the screen to change diff --git a/packages/components/src/toolbar/stories/index.js b/packages/components/src/toolbar/stories/index.js index ae07d52535c9c..298cd97a8674a 100644 --- a/packages/components/src/toolbar/stories/index.js +++ b/packages/components/src/toolbar/stories/index.js @@ -51,7 +51,7 @@ export const _default = () => { { { await expect( await getActiveLabel() ).toBe( 'Move down' ); await page.keyboard.press( 'ArrowRight' ); - await expect( await getActiveLabel() ).toBe( 'Change text alignment' ); + await expect( await getActiveLabel() ).toBe( 'Align' ); await page.keyboard.press( 'ArrowRight' ); await expect( await getActiveLabel() ).toBe( 'Bold' ); diff --git a/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js b/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js index bfa098f7f4240..82bfea06b4f34 100644 --- a/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js +++ b/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js @@ -566,7 +566,7 @@ describe( 'Multi-block selection', () => { await page.keyboard.type( '2' ); await pressKeyWithModifier( 'primary', 'a' ); await pressKeyWithModifier( 'primary', 'a' ); - await clickBlockToolbarButton( 'Change text alignment' ); + await clickBlockToolbarButton( 'Align' ); await clickButton( 'Align text center' ); expect( await getEditedPostContent() ).toMatchSnapshot(); From 832c2b8afb6b514225de798d35d6fa1a5ae1189e Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 6 Jan 2021 15:13:45 +1100 Subject: [PATCH 06/23] Text labels in format toolbar --- .../rich-text/format-toolbar-container.js | 1 + .../rich-text/format-toolbar/style.scss | 17 +++++++++++++++++ 2 files changed, 18 insertions(+) diff --git a/packages/block-editor/src/components/rich-text/format-toolbar-container.js b/packages/block-editor/src/components/rich-text/format-toolbar-container.js index 1380a29d7dbae..0d8c88f0761b8 100644 --- a/packages/block-editor/src/components/rich-text/format-toolbar-container.js +++ b/packages/block-editor/src/components/rich-text/format-toolbar-container.js @@ -19,6 +19,7 @@ const FormatToolbarContainer = ( { inline, anchorRef } ) => { focusOnMount={ false } anchorRef={ anchorRef } className="block-editor-rich-text__inline-format-toolbar" + __unstableSlotName="block-toolbar" > diff --git a/packages/block-editor/src/components/rich-text/format-toolbar/style.scss b/packages/block-editor/src/components/rich-text/format-toolbar/style.scss index 986c245216939..3a6e433ebb44a 100644 --- a/packages/block-editor/src/components/rich-text/format-toolbar/style.scss +++ b/packages/block-editor/src/components/rich-text/format-toolbar/style.scss @@ -3,3 +3,20 @@ justify-content: center; } } + +.show-icon-labels { + .block-editor-format-toolbar { + .components-button.has-icon { + width: auto; + + // Hide the button icons when labels are set to display... + svg { + display: none; + } + // ... and display labels. + &::after { + content: attr(aria-label); + } + } + } +} From c058503665950afd5413a3bd061bd11148b39953 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 7 Jan 2021 10:24:06 +1100 Subject: [PATCH 07/23] Simplify transform button --- .../src/components/block-switcher/index.js | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js index d075b7f0dc443..6b6a9fd2d8ad1 100644 --- a/packages/block-editor/src/components/block-switcher/index.js +++ b/packages/block-editor/src/components/block-switcher/index.js @@ -16,7 +16,6 @@ import { import { switchToBlockType, store as blocksStore } from '@wordpress/blocks'; import { useSelect, useDispatch } from '@wordpress/data'; import { stack } from '@wordpress/icons'; -import { useViewportMatch } from '@wordpress/compose'; /** * Internal dependencies @@ -73,8 +72,6 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => { [ clientIds, blocks, blockInformation?.icon ] ); - const isSmallScreen = useViewportMatch( 'small', '<' ); - const onTransform = ( name ) => replaceBlocks( clientIds, switchToBlockType( blocks, name ) ); const hasPossibleBlockTransformations = !! possibleBlockTransformations.length; @@ -91,18 +88,14 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => { ); } - const singleBlockLabel = isSmallScreen - ? blockTitle - : `${ __( 'Change block type or style' ) } ( ${ blockTitle } )`; - const blockSwitcherLabel = 1 === blocks.length - ? singleBlockLabel + ? __( 'Transform block' ) : sprintf( /* translators: %s: number of blocks. */ _n( - 'Change type of %d block', - 'Change type of %d blocks', + 'Transform %d block', + 'Transform %d blocks', blocks.length ), blocks.length From 26d6dbae0223d71e203aa6f3ee1ccce42bc6795f Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 7 Jan 2021 13:44:07 +1100 Subject: [PATCH 08/23] Shorten labels further. --- .../block-alignment-toolbar/index.js | 2 +- .../components/block-parent-selector/index.js | 2 +- .../block-settings-dropdown.js | 2 +- .../src/components/block-switcher/index.js | 15 ++------------ .../rich-text/format-toolbar/index.js | 2 +- packages/block-library/src/list/edit.js | 8 ++++---- .../specs/editor/blocks/preformatted.test.js | 4 ++-- .../specs/editor/plugins/align-hook.test.js | 20 +++++++++---------- .../specs/editor/plugins/annotations.test.js | 2 +- .../specs/editor/plugins/cpt-locking.test.js | 6 +++--- .../editor/various/block-deletion.test.js | 2 +- .../editor/various/block-grouping.test.js | 16 +++++++-------- .../editor/various/duplicating-blocks.test.js | 2 +- .../specs/editor/various/editor-modes.test.js | 8 ++++---- .../editor/various/invalid-block.test.js | 4 ++-- .../various/keyboard-navigable-blocks.test.js | 4 ++-- .../editor/various/reusable-blocks.test.js | 6 +++--- .../various/toolbar-roving-tabindex.test.js | 2 +- .../specs/editor/various/writing-flow.test.js | 2 +- .../specs/experiments/template-part.test.js | 2 +- 20 files changed, 50 insertions(+), 61 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 769e96d454219..28aa3af1ce20e 100644 --- a/packages/block-editor/src/components/block-alignment-toolbar/index.js +++ b/packages/block-editor/src/components/block-alignment-toolbar/index.js @@ -96,7 +96,7 @@ export function BlockAlignmentToolbar( { ? activeAlignmentControl.icon : defaultAlignmentControl.icon } - label={ __( 'Change alignment' ) } + label={ __( 'Align' ) } controls={ enabledControls.map( ( control ) => { return { ...BLOCK_ALIGNMENTS_CONTROLS[ control ], diff --git a/packages/block-editor/src/components/block-parent-selector/index.js b/packages/block-editor/src/components/block-parent-selector/index.js index c4345841ec9a1..af60ea03cadf3 100644 --- a/packages/block-editor/src/components/block-parent-selector/index.js +++ b/packages/block-editor/src/components/block-parent-selector/index.js @@ -60,7 +60,7 @@ export default function BlockParentSelector() { onClick={ () => selectBlock( firstParentClientId ) } label={ sprintf( /* translators: %s: Name of the block's parent. */ - __( 'Select parent (%s)' ), + __( 'Select %s' ), parentBlockType.title ) } showTooltip diff --git a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js index acb7bfcf39d31..7a9c54f4cd234 100644 --- a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js +++ b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js @@ -95,7 +95,7 @@ export function BlockSettingsDropdown( { } ) => ( { ); } - const blockSwitcherLabel = - 1 === blocks.length - ? __( 'Transform block' ) - : sprintf( - /* translators: %s: number of blocks. */ - _n( - 'Transform %d block', - 'Transform %d blocks', - blocks.length - ), - blocks.length - ); + const blockSwitcherLabel = __( 'Transform' ); return ( diff --git a/packages/block-editor/src/components/rich-text/format-toolbar/index.js b/packages/block-editor/src/components/rich-text/format-toolbar/index.js index fd48a1953220e..b2cf95204da84 100644 --- a/packages/block-editor/src/components/rich-text/format-toolbar/index.js +++ b/packages/block-editor/src/components/rich-text/format-toolbar/index.js @@ -42,7 +42,7 @@ const FormatToolbar = () => { { expect( await getEditedPostContent() ).toMatchSnapshot(); - await clickBlockToolbarButton( 'More options' ); + await clickBlockToolbarButton( 'Options' ); await clickMenuItem( 'Convert to Blocks' ); // Once it's edited, it should be saved as BR tags. await page.keyboard.type( '0' ); await page.keyboard.press( 'Enter' ); - await clickBlockToolbarButton( 'More options' ); + await clickBlockToolbarButton( 'Options' ); await clickMenuItem( 'Edit as HTML' ); expect( await getEditedPostContent() ).toMatchSnapshot(); diff --git a/packages/e2e-tests/specs/editor/plugins/align-hook.test.js b/packages/e2e-tests/specs/editor/plugins/align-hook.test.js index 6b0c41ae9115d..59b10cca42810 100644 --- a/packages/e2e-tests/specs/editor/plugins/align-hook.test.js +++ b/packages/e2e-tests/specs/editor/plugins/align-hook.test.js @@ -35,7 +35,7 @@ describe( 'Align Hook Works As Expected', () => { } ); const getAlignmentToolbarLabels = async () => { - await clickBlockToolbarButton( 'Change alignment' ); + await clickBlockToolbarButton( 'Align' ); const buttonLabels = await page.evaluate( () => { return Array.from( document.querySelectorAll( @@ -58,7 +58,7 @@ describe( 'Align Hook Works As Expected', () => { const createDoesNotApplyAlignmentByDefaultTest = ( blockName ) => { it( 'Does not apply any alignment by default', async () => { await insertBlock( blockName ); - await clickBlockToolbarButton( 'Change alignment' ); + await clickBlockToolbarButton( 'Align' ); const pressedButtons = await page.$$( '.components-dropdown-menu__menu button.is-active' ); @@ -83,11 +83,11 @@ describe( 'Align Hook Works As Expected', () => { '.components-dropdown-menu__menu button.is-active'; // set the specified alignment. await insertBlock( blockName ); - await clickBlockToolbarButton( 'Change alignment' ); + await clickBlockToolbarButton( 'Align' ); await ( await page.$x( BUTTON_XPATH ) )[ 0 ].click(); // verify the button of the specified alignment is pressed. - await clickBlockToolbarButton( 'Change alignment' ); + await clickBlockToolbarButton( 'Align' ); let pressedButtons = await page.$$( BUTTON_PRESSED_SELECTOR ); expect( pressedButtons ).toHaveLength( 1 ); @@ -104,11 +104,11 @@ describe( 'Align Hook Works As Expected', () => { ); // remove the alignment. - await clickBlockToolbarButton( 'Change alignment' ); + await clickBlockToolbarButton( 'Align' ); await ( await page.$x( BUTTON_XPATH ) )[ 0 ].click(); // verify no alignment button is in pressed state. - await clickBlockToolbarButton( 'Change alignment' ); + await clickBlockToolbarButton( 'Align' ); pressedButtons = await page.$$( BUTTON_PRESSED_SELECTOR ); expect( pressedButtons ).toHaveLength( 0 ); @@ -124,7 +124,7 @@ describe( 'Align Hook Works As Expected', () => { ); // verify no alignment button is in pressed state after parsing the block. - await clickBlockToolbarButton( 'Change alignment' ); + await clickBlockToolbarButton( 'Align' ); pressedButtons = await page.$$( BUTTON_PRESSED_SELECTOR ); expect( pressedButtons ).toHaveLength( 0 ); } ); @@ -135,7 +135,7 @@ describe( 'Align Hook Works As Expected', () => { it( 'Shows no alignment buttons on the alignment toolbar', async () => { await insertBlock( BLOCK_NAME ); const CHANGE_ALIGNMENT_BUTTON_SELECTOR = - '.block-editor-block-toolbar .components-dropdown-menu__toggle[aria-label="Change alignment"]'; + '.block-editor-block-toolbar .components-dropdown-menu__toggle[aria-label="Align"]'; const changeAlignmentButton = await page.$( CHANGE_ALIGNMENT_BUTTON_SELECTOR ); @@ -192,7 +192,7 @@ describe( 'Align Hook Works As Expected', () => { it( 'Applies the selected alignment by default', async () => { await insertBlock( BLOCK_NAME ); // verify the correct alignment button is pressed - await clickBlockToolbarButton( 'Change alignment' ); + await clickBlockToolbarButton( 'Align' ); const selectedAlignmentControls = await page.$x( SELECTED_ALIGNMENT_CONTROL_SELECTOR ); @@ -209,7 +209,7 @@ 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 clickBlockToolbarButton( 'Change alignment' ); + await clickBlockToolbarButton( 'Align' ); const [ selectedAlignmentControl ] = await page.$x( SELECTED_ALIGNMENT_CONTROL_SELECTOR ); diff --git a/packages/e2e-tests/specs/editor/plugins/annotations.test.js b/packages/e2e-tests/specs/editor/plugins/annotations.test.js index 14cfbcaa1e7c4..31a3a73893015 100644 --- a/packages/e2e-tests/specs/editor/plugins/annotations.test.js +++ b/packages/e2e-tests/specs/editor/plugins/annotations.test.js @@ -11,7 +11,7 @@ import { } from '@wordpress/e2e-test-utils'; const clickOnBlockSettingsMenuItem = async ( buttonLabel ) => { - await clickBlockToolbarButton( 'More options' ); + await clickBlockToolbarButton( 'Options' ); await clickMenuItem( buttonLabel ); }; diff --git a/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js b/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js index 1eefa0a69ebbf..a9b0181d4e47f 100644 --- a/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js +++ b/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js @@ -39,7 +39,7 @@ describe( 'cpt locking', () => { '.block-editor-rich-text__editable[data-type="core/paragraph"]', 'p1' ); - await clickBlockToolbarButton( 'More options' ); + await clickBlockToolbarButton( 'Options' ); expect( await page.$x( '//button/span[contains(text(), "Remove block")]' ) ).toHaveLength( 0 ); @@ -171,7 +171,7 @@ describe( 'cpt locking', () => { '.block-editor-rich-text__editable[data-type="core/paragraph"]', 'p1' ); - await clickBlockToolbarButton( 'More options' ); + await clickBlockToolbarButton( 'Options' ); await clickMenuItem( 'Remove block' ); expect( await getEditedPostContent() ).toMatchSnapshot(); } ); @@ -191,7 +191,7 @@ describe( 'cpt locking', () => { '.block-editor-rich-text__editable[data-type="core/paragraph"]', 'p1' ); - await clickBlockToolbarButton( 'More options' ); + await clickBlockToolbarButton( 'Options' ); await clickMenuItem( 'Remove block' ); expect( await getEditedPostContent() ).toMatchSnapshot(); diff --git a/packages/e2e-tests/specs/editor/various/block-deletion.test.js b/packages/e2e-tests/specs/editor/various/block-deletion.test.js index 80d9d3a11e19b..00e239eae6959 100644 --- a/packages/e2e-tests/specs/editor/various/block-deletion.test.js +++ b/packages/e2e-tests/specs/editor/various/block-deletion.test.js @@ -31,7 +31,7 @@ const addThreeParagraphsToNewPost = async () => { * see: https://github.com/WordPress/gutenberg/pull/14908#discussion_r284725956 */ const clickOnBlockSettingsMenuRemoveBlockButton = async () => { - await clickBlockToolbarButton( 'More options' ); + await clickBlockToolbarButton( 'Options' ); let isRemoveButton = false; diff --git a/packages/e2e-tests/specs/editor/various/block-grouping.test.js b/packages/e2e-tests/specs/editor/various/block-grouping.test.js index 016d62d6cc68b..b75718fbc24d7 100644 --- a/packages/e2e-tests/specs/editor/various/block-grouping.test.js +++ b/packages/e2e-tests/specs/editor/various/block-grouping.test.js @@ -77,7 +77,7 @@ describe( 'Block Grouping', () => { await pressKeyWithModifier( 'primary', 'a' ); await pressKeyWithModifier( 'primary', 'a' ); - await clickBlockToolbarButton( 'More options' ); + await clickBlockToolbarButton( 'Options' ); await clickMenuItem( 'Group' ); expect( await getEditedPostContent() ).toMatchSnapshot(); @@ -90,13 +90,13 @@ describe( 'Block Grouping', () => { await pressKeyWithModifier( 'primary', 'a' ); // Group - await clickBlockToolbarButton( 'More options' ); + await clickBlockToolbarButton( 'Options' ); await clickMenuItem( 'Group' ); expect( await getEditedPostContent() ).toMatchSnapshot(); // UnGroup - await clickBlockToolbarButton( 'More options' ); + await clickBlockToolbarButton( 'Options' ); await clickMenuItem( 'Ungroup' ); expect( await getEditedPostContent() ).toMatchSnapshot(); @@ -104,7 +104,7 @@ describe( 'Block Grouping', () => { it( 'does not allow ungrouping a group block that has no children', async () => { await insertBlock( 'Group' ); - await clickBlockToolbarButton( 'More options' ); + await clickBlockToolbarButton( 'Options' ); const ungroupButtons = await page.$x( '//button/span[text()="Ungroup"]' ); @@ -141,7 +141,7 @@ describe( 'Block Grouping', () => { } ); it( 'does not show group option in the options toolbar if Grouping block is disabled', async () => { - await clickBlockToolbarButton( 'More options' ); + await clickBlockToolbarButton( 'Options' ); const blockOptionsDropdownHTML = await page.evaluate( () => @@ -161,7 +161,7 @@ describe( 'Block Grouping', () => { // Full width image. await insertBlock( 'Image' ); - await clickBlockToolbarButton( 'Change alignment' ); + await clickBlockToolbarButton( 'Align' ); const fullButton = await page.waitForXPath( `//button[contains(@class,'components-dropdown-menu__menu-item') and contains(text(), 'Full width')]` ); @@ -172,7 +172,7 @@ describe( 'Block Grouping', () => { // Wide width image. await insertBlock( 'Image' ); - await clickBlockToolbarButton( 'Change alignment' ); + await clickBlockToolbarButton( 'Align' ); const wideButton = await page.waitForXPath( `//button[contains(@class,'components-dropdown-menu__menu-item') and contains(text(), 'Wide width')]` ); @@ -226,7 +226,7 @@ describe( 'Block Grouping', () => { // Group - this will use whichever Block is registered as the Grouping Block // as opposed to "transformTo()" which uses whatever is passed to it. To // ensure this test is meaningful we must rely on what is registered. - await clickBlockToolbarButton( 'More options' ); + await clickBlockToolbarButton( 'Options' ); await clickMenuItem( 'Group' ); expect( await getEditedPostContent() ).toMatchSnapshot(); diff --git a/packages/e2e-tests/specs/editor/various/duplicating-blocks.test.js b/packages/e2e-tests/specs/editor/various/duplicating-blocks.test.js index 11c95026a8828..587751c414574 100644 --- a/packages/e2e-tests/specs/editor/various/duplicating-blocks.test.js +++ b/packages/e2e-tests/specs/editor/various/duplicating-blocks.test.js @@ -24,7 +24,7 @@ describe( 'Duplicating blocks', () => { // When the selection was not collapsed await pressKeyWithModifier( 'primary', 'a' ); - await clickBlockToolbarButton( 'More options' ); + await clickBlockToolbarButton( 'Options' ); await clickMenuItem( 'Duplicate' ); expect( await getEditedPostContent() ).toMatchSnapshot(); diff --git a/packages/e2e-tests/specs/editor/various/editor-modes.test.js b/packages/e2e-tests/specs/editor/various/editor-modes.test.js index 48056ccde4276..01d6137ae8905 100644 --- a/packages/e2e-tests/specs/editor/various/editor-modes.test.js +++ b/packages/e2e-tests/specs/editor/various/editor-modes.test.js @@ -32,7 +32,7 @@ describe( 'Editing modes (visual/HTML)', () => { expect( visualBlock ).toHaveLength( 1 ); // Change editing mode from "Visual" to "HTML". - await clickBlockToolbarButton( 'More options' ); + await clickBlockToolbarButton( 'Options' ); await clickMenuItem( 'Edit as HTML' ); // Wait for the block to be converted to HTML editing mode. @@ -42,7 +42,7 @@ describe( 'Editing modes (visual/HTML)', () => { expect( htmlBlock ).toHaveLength( 1 ); // Change editing mode from "HTML" back to "Visual". - await clickBlockToolbarButton( 'More options' ); + await clickBlockToolbarButton( 'Options' ); await clickMenuItem( 'Edit visually' ); // This block should be in "visual" mode by default. @@ -54,7 +54,7 @@ describe( 'Editing modes (visual/HTML)', () => { it( 'should display sidebar in HTML mode', async () => { // Change editing mode from "Visual" to "HTML". - await clickBlockToolbarButton( 'More options' ); + await clickBlockToolbarButton( 'Options' ); await clickMenuItem( 'Edit as HTML' ); // The font size picker for the paragraph block should appear, even in @@ -67,7 +67,7 @@ describe( 'Editing modes (visual/HTML)', () => { it( 'should update HTML in HTML mode when sidebar is used', async () => { // Change editing mode from "Visual" to "HTML". - await clickBlockToolbarButton( 'More options' ); + await clickBlockToolbarButton( 'Options' ); await clickMenuItem( 'Edit as HTML' ); // Make sure the paragraph content is rendered as expected. diff --git a/packages/e2e-tests/specs/editor/various/invalid-block.test.js b/packages/e2e-tests/specs/editor/various/invalid-block.test.js index 3313e819d752c..89e0251b30037 100644 --- a/packages/e2e-tests/specs/editor/various/invalid-block.test.js +++ b/packages/e2e-tests/specs/editor/various/invalid-block.test.js @@ -18,7 +18,7 @@ describe( 'invalid blocks', () => { await clickBlockAppender(); await page.keyboard.type( 'hello' ); - await clickBlockToolbarButton( 'More options' ); + await clickBlockToolbarButton( 'Options' ); // Change to HTML mode and close the options await clickMenuItem( 'Edit as HTML' ); @@ -36,7 +36,7 @@ describe( 'invalid blocks', () => { // Click on the 'three-dots' menu toggle await page.click( - '.block-editor-warning__actions button[aria-label="More options"]' + '.block-editor-warning__actions button[aria-label="Options"]' ); await clickMenuItem( 'Resolve' ); diff --git a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js index 346e32c1a420c..f54cce70b01d6 100644 --- a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js +++ b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js @@ -66,10 +66,10 @@ const tabThroughBlockToolbar = async () => { await expect( await getActiveLabel() ).toBe( 'Link' ); await page.keyboard.press( 'ArrowRight' ); - await expect( await getActiveLabel() ).toBe( 'More formatting' ); + await expect( await getActiveLabel() ).toBe( 'More' ); await page.keyboard.press( 'ArrowRight' ); - await expect( await getActiveLabel() ).toBe( 'More options' ); + await expect( await getActiveLabel() ).toBe( 'Options' ); await page.keyboard.press( 'ArrowRight' ); await expect( await getActiveLabel() ).toBe( diff --git a/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js b/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js index 6cd4b93e93c1d..e7c3afcfcefb1 100644 --- a/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js +++ b/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js @@ -47,7 +47,7 @@ const createReusableBlock = async ( content, title ) => { await insertBlock( 'Paragraph' ); await page.keyboard.type( content ); - await clickBlockToolbarButton( 'More options' ); + await clickBlockToolbarButton( 'Options' ); await clickMenuItem( 'Add to Reusable blocks' ); // Wait for creation to finish @@ -193,7 +193,7 @@ describe( 'Reusable blocks', () => { await pressKeyWithModifier( 'primary', 'a' ); // Convert block to a reusable block - await clickBlockToolbarButton( 'More options' ); + await clickBlockToolbarButton( 'Options' ); await clickMenuItem( 'Add to Reusable blocks' ); // Wait for creation to finish @@ -249,7 +249,7 @@ describe( 'Reusable blocks', () => { await page.click( blockSelector ); // Delete the block, leaving the reusable block empty - await clickBlockToolbarButton( 'More options' ); + await clickBlockToolbarButton( 'Options' ); const deleteButton = await page.waitForXPath( '//button/span[text()="Remove block"]' ); diff --git a/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js b/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js index b31c088352a63..5a77d4cd57b60 100644 --- a/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js +++ b/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js @@ -43,7 +43,7 @@ async function testGroupKeyboardNavigation( currentBlockLabel ) { await page.keyboard.press( 'Tab' ); await expectLabelToHaveFocus( currentBlockLabel ); await pressKeyWithModifier( 'shift', 'Tab' ); - await expectLabelToHaveFocus( 'Select parent (Group)' ); + await expectLabelToHaveFocus( 'Select Group' ); await page.keyboard.press( 'ArrowRight' ); await expectLabelToHaveFocus( 'Change block type or style' ); } diff --git a/packages/e2e-tests/specs/editor/various/writing-flow.test.js b/packages/e2e-tests/specs/editor/various/writing-flow.test.js index f7d8b031f2911..eff7ad5c16ff1 100644 --- a/packages/e2e-tests/specs/editor/various/writing-flow.test.js +++ b/packages/e2e-tests/specs/editor/various/writing-flow.test.js @@ -586,7 +586,7 @@ describe( 'Writing Flow', () => { await page.keyboard.press( 'Enter' ); await page.keyboard.type( '/image' ); await page.keyboard.press( 'Enter' ); - await clickBlockToolbarButton( 'Change alignment' ); + await clickBlockToolbarButton( 'Align' ); await clickButton( 'Wide width' ); await page.keyboard.press( 'ArrowUp' ); diff --git a/packages/e2e-tests/specs/experiments/template-part.test.js b/packages/e2e-tests/specs/experiments/template-part.test.js index 3fd59b6db0ef2..b46362447a3d7 100644 --- a/packages/e2e-tests/specs/experiments/template-part.test.js +++ b/packages/e2e-tests/specs/experiments/template-part.test.js @@ -70,7 +70,7 @@ describe( 'Template Part', () => { } async function triggerEllipsisMenuItem( textPrompt ) { - await clickBlockToolbarButton( 'More options' ); + await clickBlockToolbarButton( 'Options' ); const button = await page.waitForXPath( `//span[contains(text(), "${ textPrompt }")]` ); From 8b9de85da147754e01eb2b0e9ba165f3d462f03c Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 7 Jan 2021 17:13:20 +1100 Subject: [PATCH 09/23] update snapshot --- .../block-alignment-toolbar/test/__snapshots__/index.js.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 564a49e4dd238..7ee8dca3dac49 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 @@ -59,7 +59,7 @@ exports[`BlockAlignmentToolbar should match snapshot 1`] = ` } isCollapsed={true} - label="Change alignment" + label="Align" popoverProps={ Object { "isAlternate": true, From 92bc967fba0e510beff4b0f73b2601458f7c8b54 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 7 Jan 2021 17:17:16 +1100 Subject: [PATCH 10/23] Update e2e selectors --- .../e2e-tests/specs/editor/plugins/format-api.test.js | 2 +- .../specs/editor/various/adding-inline-tokens.test.js | 2 +- .../editor/various/keyboard-navigable-blocks.test.js | 8 ++------ .../specs/editor/various/style-variation.test.js | 2 +- .../specs/editor/various/toolbar-roving-tabindex.test.js | 8 ++++---- 5 files changed, 9 insertions(+), 13 deletions(-) diff --git a/packages/e2e-tests/specs/editor/plugins/format-api.test.js b/packages/e2e-tests/specs/editor/plugins/format-api.test.js index f04fc8834c7cd..e168cc6927bbf 100644 --- a/packages/e2e-tests/specs/editor/plugins/format-api.test.js +++ b/packages/e2e-tests/specs/editor/plugins/format-api.test.js @@ -29,7 +29,7 @@ describe( 'Using Format API', () => { await clickBlockAppender(); await page.keyboard.type( 'First paragraph' ); await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' ); - await clickBlockToolbarButton( 'More rich text controls' ); + await clickBlockToolbarButton( 'More' ); await clickButton( 'Custom Link' ); expect( await getEditedPostContent() ).toMatchSnapshot(); } ); diff --git a/packages/e2e-tests/specs/editor/various/adding-inline-tokens.test.js b/packages/e2e-tests/specs/editor/various/adding-inline-tokens.test.js index 6c1017c6d5358..bb9e7980dbc9a 100644 --- a/packages/e2e-tests/specs/editor/various/adding-inline-tokens.test.js +++ b/packages/e2e-tests/specs/editor/various/adding-inline-tokens.test.js @@ -27,7 +27,7 @@ describe( 'adding inline tokens', () => { await clickBlockAppender(); await page.keyboard.type( 'a ' ); - await clickBlockToolbarButton( 'More rich text controls' ); + await clickBlockToolbarButton( 'More' ); await clickButton( 'Inline image' ); // Wait for media modal to appear and upload image. diff --git a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js index f54cce70b01d6..bbee9a5ceeaac 100644 --- a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js +++ b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js @@ -43,9 +43,7 @@ const tabThroughParagraphBlock = async ( paragraphText ) => { const tabThroughBlockToolbar = async () => { await page.keyboard.press( 'Tab' ); - await expect( await getActiveLabel() ).toBe( - 'Change block type or style ( Paragraph )' - ); + await expect( await getActiveLabel() ).toBe( 'Transform' ); await page.keyboard.press( 'ArrowRight' ); await expect( await getActiveLabel() ).toBe( 'Move up' ); @@ -72,9 +70,7 @@ const tabThroughBlockToolbar = async () => { await expect( await getActiveLabel() ).toBe( 'Options' ); await page.keyboard.press( 'ArrowRight' ); - await expect( await getActiveLabel() ).toBe( - 'Change block type or style ( Paragraph )' - ); + await expect( await getActiveLabel() ).toBe( 'Transform' ); }; describe( 'Order of block keyboard navigation', () => { diff --git a/packages/e2e-tests/specs/editor/various/style-variation.test.js b/packages/e2e-tests/specs/editor/various/style-variation.test.js index 9d070c0d95b43..a6e63c8aff223 100644 --- a/packages/e2e-tests/specs/editor/various/style-variation.test.js +++ b/packages/e2e-tests/specs/editor/various/style-variation.test.js @@ -18,7 +18,7 @@ describe( 'adding blocks', () => { await insertBlock( 'Quote' ); await page.keyboard.type( 'Quote content' ); - await clickBlockToolbarButton( 'Change block type or style' ); + await clickBlockToolbarButton( 'Transform' ); const styleVariations = await page.$$( '.block-editor-block-styles__item' diff --git a/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js b/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js index 5a77d4cd57b60..7b16ae5f65496 100644 --- a/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js +++ b/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js @@ -22,7 +22,7 @@ async function expectLabelToHaveFocus( label ) { async function testBlockToolbarKeyboardNavigation( currentBlockLabel ) { await focusBlockToolbar(); - await expectLabelToHaveFocus( 'Change block type or style' ); + await expectLabelToHaveFocus( 'Transform' ); await page.keyboard.press( 'ArrowRight' ); await expectLabelToHaveFocus( 'Move up' ); await page.keyboard.press( 'Tab' ); @@ -32,7 +32,7 @@ async function testBlockToolbarKeyboardNavigation( currentBlockLabel ) { } async function wrapCurrentBlockWithGroup() { - await page.click( '[aria-label="Change block type or style"]' ); + await page.click( '[aria-label="Transform"]' ); await page.evaluate( () => { document.querySelector( '.editor-block-list-item-group' ).click(); } ); @@ -45,7 +45,7 @@ async function testGroupKeyboardNavigation( currentBlockLabel ) { await pressKeyWithModifier( 'shift', 'Tab' ); await expectLabelToHaveFocus( 'Select Group' ); await page.keyboard.press( 'ArrowRight' ); - await expectLabelToHaveFocus( 'Change block type or style' ); + await expectLabelToHaveFocus( 'Transform' ); } describe( 'Toolbar roving tabindex', () => { @@ -91,7 +91,7 @@ describe( 'Toolbar roving tabindex', () => { await testBlockToolbarKeyboardNavigation( 'Block: Table' ); // Move focus to the first toolbar item await page.keyboard.press( 'Home' ); - await expectLabelToHaveFocus( 'Change block type or style' ); + await expectLabelToHaveFocus( 'Transform' ); await page.click( '.blocks-table__placeholder-button' ); await testBlockToolbarKeyboardNavigation( 'Block: Table' ); await wrapCurrentBlockWithGroup(); From dacd08c03f81f70d835d4703912bf07f2621ab44 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 11 Jan 2021 14:05:26 +1100 Subject: [PATCH 11/23] Reduce font size and fix block mover border. --- .../block-editor/src/components/block-toolbar/style.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss index d4a5df63608f2..13a76c41d6445 100644 --- a/packages/block-editor/src/components/block-toolbar/style.scss +++ b/packages/block-editor/src/components/block-toolbar/style.scss @@ -119,6 +119,7 @@ // ... and display labels. &::after { content: attr(aria-label); + font-size: 0.75rem; } } } @@ -171,8 +172,11 @@ border-right: 1px solid $gray-900; } - .is-up-button { + // Specificity override for https://github.com/WordPress/gutenberg/blob/try/block-toolbar-labels/packages/block-editor/src/components/block-mover/style.scss#L69 + .is-up-button.is-up-button.is-up-button { border-bottom: 1px solid $gray-900; + margin-right: 0; + border-radius: 0; } .block-editor-block-contextual-toolbar .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button { From e4e7bb8cac533a817098bd61713fc2783c56988b Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 11 Jan 2021 14:32:44 +1100 Subject: [PATCH 12/23] Change back switcher label and update e2e test selectors. --- .../src/components/block-switcher/index.js | 3 +- .../various/keyboard-navigable-blocks.test.js | 4 +- .../editor/various/style-variation.test.js | 2 +- .../various/toolbar-roving-tabindex.test.js | 67 ++++++++++++------- 4 files changed, 45 insertions(+), 31 deletions(-) diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js index 9f8e9e334c0aa..c005e40a96ec5 100644 --- a/packages/block-editor/src/components/block-switcher/index.js +++ b/packages/block-editor/src/components/block-switcher/index.js @@ -6,7 +6,6 @@ import { castArray, uniq } from 'lodash'; /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { DropdownMenu, ToolbarButton, @@ -88,7 +87,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => { ); } - const blockSwitcherLabel = __( 'Transform' ); + const blockSwitcherLabel = blockTitle; return ( diff --git a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js index bbee9a5ceeaac..9c45ff7d43a7f 100644 --- a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js +++ b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js @@ -43,7 +43,7 @@ const tabThroughParagraphBlock = async ( paragraphText ) => { const tabThroughBlockToolbar = async () => { await page.keyboard.press( 'Tab' ); - await expect( await getActiveLabel() ).toBe( 'Transform' ); + await expect( await getActiveLabel() ).toBe( 'Paragraph' ); await page.keyboard.press( 'ArrowRight' ); await expect( await getActiveLabel() ).toBe( 'Move up' ); @@ -70,7 +70,7 @@ const tabThroughBlockToolbar = async () => { await expect( await getActiveLabel() ).toBe( 'Options' ); await page.keyboard.press( 'ArrowRight' ); - await expect( await getActiveLabel() ).toBe( 'Transform' ); + await expect( await getActiveLabel() ).toBe( 'Paragraph' ); }; describe( 'Order of block keyboard navigation', () => { diff --git a/packages/e2e-tests/specs/editor/various/style-variation.test.js b/packages/e2e-tests/specs/editor/various/style-variation.test.js index a6e63c8aff223..6bc3606ca2589 100644 --- a/packages/e2e-tests/specs/editor/various/style-variation.test.js +++ b/packages/e2e-tests/specs/editor/various/style-variation.test.js @@ -18,7 +18,7 @@ describe( 'adding blocks', () => { await insertBlock( 'Quote' ); await page.keyboard.type( 'Quote content' ); - await clickBlockToolbarButton( 'Transform' ); + await clickBlockToolbarButton( 'Quote' ); const styleVariations = await page.$$( '.block-editor-block-styles__item' diff --git a/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js b/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js index 7b16ae5f65496..5444f8255caf4 100644 --- a/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js +++ b/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js @@ -20,9 +20,12 @@ async function expectLabelToHaveFocus( label ) { ).toBe( label ); } -async function testBlockToolbarKeyboardNavigation( currentBlockLabel ) { +async function testBlockToolbarKeyboardNavigation( + currentBlockLabel, + currentBlockTitle +) { await focusBlockToolbar(); - await expectLabelToHaveFocus( 'Transform' ); + await expectLabelToHaveFocus( currentBlockTitle ); await page.keyboard.press( 'ArrowRight' ); await expectLabelToHaveFocus( 'Move up' ); await page.keyboard.press( 'Tab' ); @@ -31,21 +34,24 @@ async function testBlockToolbarKeyboardNavigation( currentBlockLabel ) { await expectLabelToHaveFocus( 'Move up' ); } -async function wrapCurrentBlockWithGroup() { - await page.click( '[aria-label="Transform"]' ); +async function wrapCurrentBlockWithGroup( currentBlockTitle ) { + await page.click( `[aria-label="${ currentBlockTitle }"]` ); await page.evaluate( () => { document.querySelector( '.editor-block-list-item-group' ).click(); } ); } -async function testGroupKeyboardNavigation( currentBlockLabel ) { +async function testGroupKeyboardNavigation( + currentBlockLabel, + currentBlockTitle +) { await expectLabelToHaveFocus( 'Block: Group' ); await page.keyboard.press( 'Tab' ); await expectLabelToHaveFocus( currentBlockLabel ); await pressKeyWithModifier( 'shift', 'Tab' ); await expectLabelToHaveFocus( 'Select Group' ); await page.keyboard.press( 'ArrowRight' ); - await expectLabelToHaveFocus( 'Transform' ); + await expectLabelToHaveFocus( currentBlockTitle ); } describe( 'Toolbar roving tabindex', () => { @@ -58,51 +64,60 @@ describe( 'Toolbar roving tabindex', () => { it( 'ensures paragraph block toolbar uses roving tabindex', async () => { await insertBlock( 'Paragraph' ); await page.keyboard.type( 'Paragraph' ); - await testBlockToolbarKeyboardNavigation( 'Paragraph block' ); - await wrapCurrentBlockWithGroup(); - await testGroupKeyboardNavigation( 'Paragraph block' ); + await testBlockToolbarKeyboardNavigation( + 'Paragraph block', + 'Paragraph' + ); + await wrapCurrentBlockWithGroup( 'Paragraph' ); + await testGroupKeyboardNavigation( 'Paragraph block', 'Paragraph' ); } ); it( 'ensures heading block toolbar uses roving tabindex', async () => { await insertBlock( 'Heading' ); await page.keyboard.type( 'Heading' ); - await testBlockToolbarKeyboardNavigation( 'Block: Heading' ); - await wrapCurrentBlockWithGroup(); - await testGroupKeyboardNavigation( 'Block: Heading' ); + await testBlockToolbarKeyboardNavigation( 'Block: Heading', 'Heading' ); + await wrapCurrentBlockWithGroup( 'Heading' ); + await testGroupKeyboardNavigation( 'Block: Heading', 'Heading' ); } ); it( 'ensures list block toolbar uses roving tabindex', async () => { await insertBlock( 'List' ); await page.keyboard.type( 'List' ); - await testBlockToolbarKeyboardNavigation( 'Block: List' ); - await wrapCurrentBlockWithGroup(); - await testGroupKeyboardNavigation( 'Block: List' ); + await testBlockToolbarKeyboardNavigation( 'Block: List', 'List' ); + await wrapCurrentBlockWithGroup( 'List' ); + await testGroupKeyboardNavigation( 'Block: List', 'List' ); } ); it( 'ensures image block toolbar uses roving tabindex', async () => { await insertBlock( 'Image' ); - await testBlockToolbarKeyboardNavigation( 'Block: Image' ); - await wrapCurrentBlockWithGroup(); - await testGroupKeyboardNavigation( 'Block: Image' ); + await testBlockToolbarKeyboardNavigation( 'Block: Image', 'Image' ); + await wrapCurrentBlockWithGroup( 'Image' ); + await testGroupKeyboardNavigation( 'Block: Image', 'Image' ); } ); it( 'ensures table block toolbar uses roving tabindex', async () => { await insertBlock( 'Table' ); - await testBlockToolbarKeyboardNavigation( 'Block: Table' ); + await testBlockToolbarKeyboardNavigation( 'Block: Table', 'Table' ); // Move focus to the first toolbar item await page.keyboard.press( 'Home' ); - await expectLabelToHaveFocus( 'Transform' ); + await expectLabelToHaveFocus( 'Table' ); await page.click( '.blocks-table__placeholder-button' ); - await testBlockToolbarKeyboardNavigation( 'Block: Table' ); - await wrapCurrentBlockWithGroup(); - await testGroupKeyboardNavigation( 'Block: Table' ); + await testBlockToolbarKeyboardNavigation( 'Block: Table', 'Table' ); + await wrapCurrentBlockWithGroup( 'Table' ); + await testGroupKeyboardNavigation( 'Block: Table', 'Table' ); } ); it( 'ensures custom html block toolbar uses roving tabindex', async () => { await insertBlock( 'Custom HTML' ); - await testBlockToolbarKeyboardNavigation( 'Block: Custom HTML' ); - await wrapCurrentBlockWithGroup(); - await testGroupKeyboardNavigation( 'Block: Custom HTML' ); + await testBlockToolbarKeyboardNavigation( + 'Block: Custom HTML', + 'Custom HTML' + ); + await wrapCurrentBlockWithGroup( 'Custom HTML' ); + await testGroupKeyboardNavigation( + 'Block: Custom HTML', + 'Custom HTML' + ); } ); it( 'ensures block toolbar remembers the last focused item', async () => { From 568490d5d56caca1ba49d2fd3f4278e0513d3001 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 11 Jan 2021 17:22:41 +1100 Subject: [PATCH 13/23] Add describedby to button and use in block switcher. --- .../src/components/block-switcher/index.js | 19 ++++++++- packages/components/src/button/index.js | 39 ++++++++++++++----- 2 files changed, 48 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js index c005e40a96ec5..2c23f973e9853 100644 --- a/packages/block-editor/src/components/block-switcher/index.js +++ b/packages/block-editor/src/components/block-switcher/index.js @@ -6,6 +6,7 @@ import { castArray, uniq } from 'lodash'; /** * WordPress dependencies */ +import { __, _n, sprintf } from '@wordpress/i18n'; import { DropdownMenu, ToolbarButton, @@ -89,6 +90,19 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => { const blockSwitcherLabel = blockTitle; + const blockSwitcherDescription = + 1 === blocks.length + ? __( 'Change block type or style' ) + : sprintf( + /* translators: %s: number of blocks. */ + _n( + 'Change type of %d block', + 'Change type of %d blocks', + blocks.length + ), + blocks.length + ); + return ( @@ -108,7 +122,10 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => { showColors /> } - toggleProps={ toggleProps } + toggleProps={ { + describedBy: blockSwitcherDescription, + ...toggleProps, + } } menuProps={ { orientation: 'both' } } > { ( { onClose } ) => diff --git a/packages/components/src/button/index.js b/packages/components/src/button/index.js index 698c52e453b8a..9467780e82d02 100644 --- a/packages/components/src/button/index.js +++ b/packages/components/src/button/index.js @@ -2,7 +2,7 @@ * External dependencies */ import classnames from 'classnames'; -import { isArray } from 'lodash'; +import { isArray, uniqueId } from 'lodash'; /** * WordPress dependencies @@ -15,6 +15,7 @@ import { forwardRef } from '@wordpress/element'; */ import Tooltip from '../tooltip'; import Icon from '../icon'; +import VisuallyHidden from '../visually-hidden'; const disabledEventsOnDisabledButton = [ 'onMouseDown', 'onClick' ]; @@ -43,6 +44,7 @@ export function Button( props, ref ) { children, text, __experimentalIsFocusable: isFocusable, + describedBy, ...additionalProps } = props; @@ -104,12 +106,15 @@ export function Button( props, ref ) { // the tooltip is not explicitly disabled. false !== showTooltip ) ); + const descriptionId = uniqueId(); + const element = ( { icon && iconPosition === 'left' && ( @@ -124,17 +129,33 @@ export function Button( props, ref ) { ); if ( ! shouldShowTooltip ) { - return element; + return ( + <> + { element } + { describedBy && ( + + { describedBy } + + ) } + + ); } return ( - - { element } - + <> + + { element } + + { describedBy && ( + + { describedBy } + + ) } + ); } From afcf9046537464e325c879e10096df38afce7e05 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 11 Jan 2021 18:21:58 +1100 Subject: [PATCH 14/23] Don't break existing aria-describedby --- packages/components/src/button/index.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/components/src/button/index.js b/packages/components/src/button/index.js index 9467780e82d02..869f4279a9948 100644 --- a/packages/components/src/button/index.js +++ b/packages/components/src/button/index.js @@ -106,7 +106,10 @@ export function Button( props, ref ) { // the tooltip is not explicitly disabled. false !== showTooltip ) ); - const descriptionId = uniqueId(); + const descriptionId = describedBy ? uniqueId() : null; + + const describedById = + additionalProps[ 'aria-describedby' ] || descriptionId; const element = ( { icon && iconPosition === 'left' && ( From 55a4d17ac118b894eadcb7cec663fd959d385fbf Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 12 Jan 2021 11:49:02 +1100 Subject: [PATCH 15/23] Change select parent and add descriptions --- .../block-editor/src/components/alignment-toolbar/index.js | 2 ++ .../src/components/block-alignment-toolbar/index.js | 1 + .../src/components/block-parent-selector/index.js | 2 +- packages/block-library/src/list/edit.js | 4 ++++ 4 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/alignment-toolbar/index.js b/packages/block-editor/src/components/alignment-toolbar/index.js index 1f8aa01508212..18e9f4002b681 100644 --- a/packages/block-editor/src/components/alignment-toolbar/index.js +++ b/packages/block-editor/src/components/alignment-toolbar/index.js @@ -39,6 +39,7 @@ export function AlignmentToolbar( props ) { onChange, alignmentControls = DEFAULT_ALIGNMENT_CONTROLS, label = __( 'Align' ), + describedBy = __( 'Change text alignment' ), isCollapsed = true, } = props; @@ -61,6 +62,7 @@ export function AlignmentToolbar( props ) { isCollapsed={ isCollapsed } icon={ setIcon() } label={ label } + toggleProps={ { describedBy } } popoverProps={ POPOVER_PROPS } controls={ alignmentControls.map( ( control ) => { const { align } = control; 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 28aa3af1ce20e..e14edfac6f47e 100644 --- a/packages/block-editor/src/components/block-alignment-toolbar/index.js +++ b/packages/block-editor/src/components/block-alignment-toolbar/index.js @@ -97,6 +97,7 @@ export function BlockAlignmentToolbar( { : defaultAlignmentControl.icon } label={ __( 'Align' ) } + toggleProps={ { describedBy: __( 'Change alignment' ) } } controls={ enabledControls.map( ( control ) => { return { ...BLOCK_ALIGNMENTS_CONTROLS[ control ], diff --git a/packages/block-editor/src/components/block-parent-selector/index.js b/packages/block-editor/src/components/block-parent-selector/index.js index af60ea03cadf3..c4345841ec9a1 100644 --- a/packages/block-editor/src/components/block-parent-selector/index.js +++ b/packages/block-editor/src/components/block-parent-selector/index.js @@ -60,7 +60,7 @@ export default function BlockParentSelector() { onClick={ () => selectBlock( firstParentClientId ) } label={ sprintf( /* translators: %s: Name of the block's parent. */ - __( 'Select %s' ), + __( 'Select parent (%s)' ), parentBlockType.title ) } showTooltip diff --git a/packages/block-library/src/list/edit.js b/packages/block-library/src/list/edit.js index 977668d700b97..afb5d562e33eb 100644 --- a/packages/block-library/src/list/edit.js +++ b/packages/block-library/src/list/edit.js @@ -92,6 +92,7 @@ export default function ListEdit( { ? formatListBulletsRTL : formatListBullets, title: __( 'Unordered' ), + describedBy: __( 'Convert to unordered list' ), isActive: isActiveListType( value, 'ul', tagName ), onClick() { onChange( @@ -109,6 +110,7 @@ export default function ListEdit( { ? formatListNumberedRTL : formatListNumbered, title: __( 'Ordered' ), + describedBy: __( 'Convert to ordered list' ), isActive: isActiveListType( value, 'ol', tagName ), onClick() { onChange( @@ -124,6 +126,7 @@ export default function ListEdit( { { icon: isRTL() ? formatOutdentRTL : formatOutdent, title: __( 'Outdent' ), + describedBy: __( 'Outdent list item' ), shortcut: _x( 'Backspace', 'keyboard key' ), isDisabled: ! canOutdentListItems( value ), onClick() { @@ -134,6 +137,7 @@ export default function ListEdit( { { icon: isRTL() ? formatIndentRTL : formatIndent, title: __( 'Indent' ), + describedBy: __( 'Indent list item' ), shortcut: _x( 'Space', 'keyboard key' ), isDisabled: ! canIndentListItems( value ), onClick() { From fddc985fd9d4a48b67c96e3f8f0e8c750f890834 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 12 Jan 2021 13:25:25 +1100 Subject: [PATCH 16/23] Styling adjustments --- .../src/components/block-toolbar/style.scss | 20 +++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss index 13a76c41d6445..432a7374f612b 100644 --- a/packages/block-editor/src/components/block-toolbar/style.scss +++ b/packages/block-editor/src/components/block-toolbar/style.scss @@ -119,7 +119,7 @@ // ... and display labels. &::after { content: attr(aria-label); - font-size: 0.75rem; + font-size: $helptext-font-size; } } } @@ -166,17 +166,25 @@ white-space: nowrap; } + .block-editor-block-mover-button { + // The specificity can be reduced once https://github.com/WordPress/gutenberg/blob/try/block-toolbar-labels/packages/block-editor/src/components/block-mover/style.scss#L34 is also dealt with. + padding-left: $grid-unit !important; + padding-right: $grid-unit !important; + } + .block-editor-block-mover__drag-handle.has-icon { padding-left: 6px !important; padding-right: 6px !important; border-right: 1px solid $gray-900; } - // Specificity override for https://github.com/WordPress/gutenberg/blob/try/block-toolbar-labels/packages/block-editor/src/components/block-mover/style.scss#L69 - .is-up-button.is-up-button.is-up-button { - border-bottom: 1px solid $gray-900; - margin-right: 0; - border-radius: 0; + @include break-small() { + // Specificity override for https://github.com/WordPress/gutenberg/blob/try/block-toolbar-labels/packages/block-editor/src/components/block-mover/style.scss#L69 + .is-up-button.is-up-button.is-up-button { + border-bottom: 1px solid $gray-900; + margin-right: 0; + border-radius: 0; + } } .block-editor-block-contextual-toolbar .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button { From ce5a39ba2d27e275b0650d8de11e9270a98ecccd Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 12 Jan 2021 15:08:42 +1100 Subject: [PATCH 17/23] Fix unit tests and update snapshots. --- .../test/__snapshots__/index.js.snap | 10 ++++ .../test/__snapshots__/index.js.snap | 5 ++ .../test/__snapshots__/control.js.snap | 3 + packages/components/src/button/test/index.js | 59 ++++++++++++------- .../test/__snapshots__/index.js.snap | 29 +++++---- .../src/color-palette/test/index.js | 2 +- .../test/__snapshots__/index.js.snap | 6 ++ .../test/__snapshots__/index.js.snap | 1 + .../enable-custom-fields.js.snap | 2 + 9 files changed, 84 insertions(+), 33 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 3fb02929f40ce..c6699db92e496 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 @@ -54,6 +54,11 @@ exports[`AlignmentToolbar should allow custom alignment controls to be specified "position": "bottom right", } } + toggleProps={ + Object { + "describedBy": "Change text alignment", + } + } /> `; @@ -126,5 +131,10 @@ exports[`AlignmentToolbar should match snapshot 1`] = ` "position": "bottom right", } } + toggleProps={ + Object { + "describedBy": "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 7ee8dca3dac49..5910fc1b29e97 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 @@ -65,5 +65,10 @@ exports[`BlockAlignmentToolbar should match snapshot 1`] = ` "isAlternate": true, } } + toggleProps={ + Object { + "describedBy": "Change alignment", + } + } /> `; diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap index 789949e13e9c0..1328665a03eb5 100644 --- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap +++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap @@ -51,6 +51,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = ` className="components-circular-option-picker__option-wrapper" > - ); + ).find( 'button' ); expect( iconButton.name() ).toBe( 'button' ); } ); @@ -152,14 +165,16 @@ describe( 'Button', () => { - ); + ).find( 'Tooltip' ); expect( iconButton.name() ).toBe( 'Tooltip' ); } ); } ); describe( 'with href property', () => { it( 'should render a link instead of a button with href prop', () => { - const button = shallow( + + + `; exports[`ColorPalette Dropdown should render it correctly 1`] = ` @@ -117,6 +120,7 @@ exports[`ColorPalette Dropdown should render it correctly 1`] = ` onClick={[Function]} >