diff --git a/packages/block-editor/src/components/alignment-toolbar/index.js b/packages/block-editor/src/components/alignment-toolbar/index.js index 8eed48b364e480..18e9f4002b681c 100644 --- a/packages/block-editor/src/components/alignment-toolbar/index.js +++ b/packages/block-editor/src/components/alignment-toolbar/index.js @@ -38,7 +38,8 @@ export function AlignmentToolbar( props ) { value, onChange, alignmentControls = DEFAULT_ALIGNMENT_CONTROLS, - label = __( 'Change text alignment' ), + 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/alignment-toolbar/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/alignment-toolbar/test/__snapshots__/index.js.snap index f995c767f95428..c6699db92e4961 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,13 +47,18 @@ exports[`AlignmentToolbar should allow custom alignment controls to be specified } isCollapsed={true} - label="Change text alignment" + label="Align" popoverProps={ Object { "isAlternate": true, "position": "bottom right", } } + toggleProps={ + Object { + "describedBy": "Change text alignment", + } + } /> `; @@ -119,12 +124,17 @@ exports[`AlignmentToolbar should match snapshot 1`] = ` } isCollapsed={true} - label="Change text alignment" + label="Align" popoverProps={ Object { "isAlternate": true, "position": "bottom right", } } + toggleProps={ + Object { + "describedBy": "Change text alignment", + } + } /> `; 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 769e96d4542198..e14edfac6f47e0 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,8 @@ export function BlockAlignmentToolbar( { ? activeAlignmentControl.icon : defaultAlignmentControl.icon } - label={ __( 'Change alignment' ) } + label={ __( 'Align' ) } + toggleProps={ { describedBy: __( 'Change alignment' ) } } controls={ enabledControls.map( ( control ) => { return { ...BLOCK_ALIGNMENTS_CONTROLS[ control ], 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 564a49e4dd238d..5910fc1b29e976 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,11 +59,16 @@ exports[`BlockAlignmentToolbar should match snapshot 1`] = ` } isCollapsed={true} - label="Change alignment" + label="Align" popoverProps={ Object { "isAlternate": true, } } + toggleProps={ + Object { + "describedBy": "Change alignment", + } + } /> `; diff --git a/packages/block-editor/src/components/block-mover/index.js b/packages/block-editor/src/components/block-mover/index.js index 7ba38ce5f039a9..d727e56b65eb56 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/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 acb7bfcf39d318..7a9c54f4cd234a 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 { 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 +66,12 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => { ), hasBlockStyles: !! styles?.length, icon: _icon, + blockTitle: getBlockType( firstBlockName ).title, }; }, [ clientIds, blocks, blockInformation?.icon ] ); + const onTransform = ( name ) => replaceBlocks( clientIds, switchToBlockType( blocks, name ) ); const hasPossibleBlockTransformations = !! possibleBlockTransformations.length; @@ -74,13 +81,16 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => { } /> ); } - const blockSwitcherLabel = + + const blockSwitcherLabel = blockTitle; + + const blockSwitcherDescription = 1 === blocks.length ? __( 'Change block type or style' ) : sprintf( @@ -112,7 +122,10 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => { showColors /> } - toggleProps={ toggleProps } + toggleProps={ { + describedBy: blockSwitcherDescription, + ...toggleProps, + } } menuProps={ { orientation: 'both' } } > { ( { onClose } ) => 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 a8ec2981e622b6..b66f639d65af91 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="Block icon" /> `; diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss index c9499b4731dfd0..432a7374f612bb 100644 --- a/packages/block-editor/src/components/block-toolbar/style.scss +++ b/packages/block-editor/src/components/block-toolbar/style.scss @@ -106,3 +106,100 @@ 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); + font-size: $helptext-font-size; + } + } + } + + // 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-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; + } + + @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 { + 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/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap index 789949e13e9c09..1328665a03eb5d 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 +187,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]} >