From b87d66640b5e87bfd460166da57c2347f09d9afc Mon Sep 17 00:00:00 2001 From: Haz Date: Thu, 7 May 2020 13:39:36 -0300 Subject: [PATCH] Convert core toolbar buttons into ToolbarButton (#20008) --- package-lock.json | 52 ++--- .../src/components/alignment-toolbar/index.js | 4 +- .../test/__snapshots__/index.js.snap | 4 +- .../block-alignment-toolbar/index.js | 4 +- .../test/__snapshots__/index.js.snap | 2 +- .../src/components/block-controls/index.js | 43 +++- .../components/block-format-controls/index.js | 35 +++- .../src/components/block-list/style.scss | 1 + .../src/components/block-mover/button.js | 17 +- .../src/components/block-mover/index.js | 29 ++- .../src/components/block-mover/style.scss | 27 ++- .../components/block-settings-menu/index.js | 196 ++++++++++-------- .../src/components/block-switcher/index.js | 19 +- .../src/components/block-switcher/style.scss | 3 +- .../test/__snapshots__/index.js.snap | 6 +- .../components/block-switcher/test/index.js | 6 +- .../src/components/block-toolbar/style.scss | 2 + .../src/components/block-toolbar/utils.js | 17 +- .../block-vertical-alignment-toolbar/index.js | 4 +- .../test/__snapshots__/index.js.snap | 2 +- .../src/components/navigable-toolbar/index.js | 95 ++++++++- .../rich-text/format-toolbar/index.js | 36 +++- .../src/components/rich-text/style.scss | 1 + .../src/components/url-input/style.scss | 1 + packages/components/package.json | 2 +- packages/components/src/index.js | 1 + packages/components/src/index.native.js | 1 + .../bubbles-virtually/slot-fill-provider.js | 19 +- .../components/src/toolbar-button/index.js | 19 +- .../components/src/toolbar-group/style.scss | 5 +- .../toolbar-group/toolbar-group-collapsed.js | 5 +- packages/components/src/toolbar-item/index.js | 24 ++- .../src/toolbar-item/index.native.js | 18 -- packages/components/src/toolbar/index.js | 19 +- packages/components/src/toolbar/style.scss | 2 +- .../various/keyboard-navigable-blocks.test.js | 26 +-- .../src/components/menu-editor/style.scss | 1 + .../header/header-toolbar/style.scss | 2 + .../components/complementary-area/style.scss | 1 + 39 files changed, 498 insertions(+), 253 deletions(-) delete mode 100644 packages/components/src/toolbar-item/index.native.js diff --git a/package-lock.json b/package-lock.json index cfa78b4f4fc03..f84bf01bfd0af 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6182,9 +6182,9 @@ } }, "@popperjs/core": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.1.1.tgz", - "integrity": "sha512-sLqWxCzC5/QHLhziXSCAksBxHfOnQlhPRVgPK0egEw+ktWvG75T2k+aYWVjVh9+WKeT3tlG3ZNbZQvZLmfuOIw==" + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.4.0.tgz", + "integrity": "sha512-NMrDy6EWh9TPdSRiHmHH2ye1v5U0gBD7pRYwSwJvomx7Bm4GG04vu63dYiVzebLOx2obPpJugew06xVP0Nk7hA==" }, "@reach/router": { "version": "1.2.1", @@ -9954,7 +9954,7 @@ "re-resizable": "^6.0.0", "react-dates": "^17.1.1", "react-spring": "^8.0.20", - "reakit": "^1.0.0-rc.0", + "reakit": "^1.0.0-rc.2", "rememo": "^3.0.0", "tinycolor2": "^1.4.1", "uuid": "^7.0.2" @@ -13525,9 +13525,9 @@ } }, "body-scroll-lock": { - "version": "2.7.1", - "resolved": "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-2.7.1.tgz", - "integrity": "sha512-hS53SQ8RhM0e4DsQ3PKz6Gr2O7Kpdh59TWU98GHjaQznL7y4dFycEPk7pFQAikqBaUSCArkc5E3pe7CWIt2fZA==" + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-3.0.2.tgz", + "integrity": "sha512-PtItUun94iIupKry8J/h6SfRCLWZnly77KbPsTSKALmxfR282L8R0Ujkv7bydSZvLxAJS4sBJ3y/E6X8gYkGrQ==" }, "boolbase": { "version": "1.0.0", @@ -37035,36 +37035,36 @@ } }, "reakit": { - "version": "1.0.0-rc.0", - "resolved": "https://registry.npmjs.org/reakit/-/reakit-1.0.0-rc.0.tgz", - "integrity": "sha512-jG9RfLE9DX3XP6xiUmindu8dJmd4rLs+ohQ2xppF9LVYQ/7Qa9B4kz8mNYbe42u8muE3nMM78T2RfXz+c/ZMsQ==", + "version": "1.0.0-rc.2", + "resolved": "https://registry.npmjs.org/reakit/-/reakit-1.0.0-rc.2.tgz", + "integrity": "sha512-+Snfc9Y/VMozEDXld3CJtvqgTyFCE67FXBmaDcvBuO3z2U/ZAHiAOBprF+ZN/QhsiVNMk1faj791vDBTokxS4w==", "requires": { - "@popperjs/core": "^2.1.0", - "body-scroll-lock": "^2.6.4", - "reakit-system": "^0.10.0", - "reakit-utils": "^0.10.0", - "reakit-warning": "^0.1.0" + "@popperjs/core": "^2.3.3", + "body-scroll-lock": "^3.0.1", + "reakit-system": "^0.12.0", + "reakit-utils": "^0.12.0", + "reakit-warning": "^0.3.0" } }, "reakit-system": { - "version": "0.10.0", - "resolved": "https://registry.npmjs.org/reakit-system/-/reakit-system-0.10.0.tgz", - "integrity": "sha512-73ZI50NB2A6WAF3OsPJEEz73fax5cFiMoGMx3KxPT/AcS39rPqlBW6QkawtZC1HUebQXlsLxwZWicoFt8UubmQ==", + "version": "0.12.0", + "resolved": "https://registry.npmjs.org/reakit-system/-/reakit-system-0.12.0.tgz", + "integrity": "sha512-lqesr7jmOEDEqKtPhEilCJNfYiLCeXOeU2lpPLBzO+CB2lsfF+A/NtrSpb3kuLu2mfIUSTTBxgaKdOBbfANmWA==", "requires": { - "reakit-utils": "^0.10.0" + "reakit-utils": "^0.12.0" } }, "reakit-utils": { - "version": "0.10.0", - "resolved": "https://registry.npmjs.org/reakit-utils/-/reakit-utils-0.10.0.tgz", - "integrity": "sha512-s1+nqLYrHo54U38iETdY86+VD+CZBTqF9rxMmphuft1Iz1i+L+OqOVJMq5sviBkTiEz8zRMhrNLcjBERFiPnkA==" + "version": "0.12.0", + "resolved": "https://registry.npmjs.org/reakit-utils/-/reakit-utils-0.12.0.tgz", + "integrity": "sha512-B0KUjRDu0GFDTi+FQApm4gynJGn18DuDdgCtcUytkN/AIJdKGaqHJ6FpeE1zMr1KAAUzZKrRqq/x93MrcQtvfQ==" }, "reakit-warning": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/reakit-warning/-/reakit-warning-0.1.0.tgz", - "integrity": "sha512-nfujYGWoZ1lh6eAFTVQc2aNjrAEf30PHffJw8Q8tiJJY4Knoy7eLA4jQGHTl3gOjhA9+Yd8KSmiLoOPlr6A0kA==", + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/reakit-warning/-/reakit-warning-0.3.0.tgz", + "integrity": "sha512-sJhgKQl6b4BZOo8jAXpneYFuAkx4wuftGl5KiIDAQZWg+e8YfB41QayjqM2eh0mQkG13hbc4pBOAyR5oFZxK0w==", "requires": { - "reakit-utils": "^0.10.0" + "reakit-utils": "^0.12.0" } }, "realpath-native": { diff --git a/packages/block-editor/src/components/alignment-toolbar/index.js b/packages/block-editor/src/components/alignment-toolbar/index.js index cd764f982b5d3..4136f5f7a4c9e 100644 --- a/packages/block-editor/src/components/alignment-toolbar/index.js +++ b/packages/block-editor/src/components/alignment-toolbar/index.js @@ -7,7 +7,7 @@ import { find } from 'lodash'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { Toolbar } from '@wordpress/components'; +import { ToolbarGroup } from '@wordpress/components'; import { alignLeft, alignRight, alignCenter } from '@wordpress/icons'; const DEFAULT_ALIGNMENT_CONTROLS = [ @@ -58,7 +58,7 @@ export function AlignmentToolbar( props ) { } return ( - ( - - - { children } - -); +function BlockControlsSlot( props ) { + const accessibleToolbarState = useContext( ToolbarContext ); + return ; +} + +function BlockControlsFill( { controls, children } ) { + return ( + + { ( fillProps ) => { + // Children passed to BlockControlsFill will not have access to any + // React Context whose Provider is part of the BlockControlsSlot tree. + // So we re-create the Provider in this subtree. + const value = ! isEmpty( fillProps ) ? fillProps : null; + return ( + + + { children } + + ); + } } + + ); +} const BlockControls = ifBlockEditSelected( BlockControlsFill ); -BlockControls.Slot = Slot; +BlockControls.Slot = BlockControlsSlot; export default BlockControls; diff --git a/packages/block-editor/src/components/block-format-controls/index.js b/packages/block-editor/src/components/block-format-controls/index.js index 2ab83843846ad..89f2df3bee260 100644 --- a/packages/block-editor/src/components/block-format-controls/index.js +++ b/packages/block-editor/src/components/block-format-controls/index.js @@ -1,7 +1,16 @@ +/** + * External dependencies + */ +import { isEmpty } from 'lodash'; + /** * WordPress dependencies */ -import { createSlotFill } from '@wordpress/components'; +import { useContext } from '@wordpress/element'; +import { + __experimentalToolbarContext as ToolbarContext, + createSlotFill, +} from '@wordpress/components'; /** * Internal dependencies @@ -10,8 +19,28 @@ import { ifBlockEditSelected } from '../block-edit/context'; const { Fill, Slot } = createSlotFill( 'BlockFormatControls' ); -const BlockFormatControls = ifBlockEditSelected( Fill ); +function BlockFormatControlsSlot( props ) { + const accessibleToolbarState = useContext( ToolbarContext ); + return ; +} + +function BlockFormatControlsFill( props ) { + return ( + + { ( fillProps ) => { + const value = ! isEmpty( fillProps ) ? fillProps : null; + return ( + + { props.children } + + ); + } } + + ); +} + +const BlockFormatControls = ifBlockEditSelected( BlockFormatControlsFill ); -BlockFormatControls.Slot = Slot; +BlockFormatControls.Slot = BlockFormatControlsSlot; export default BlockFormatControls; diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 08ae6d8720902..89ecdfe3549e4 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -484,6 +484,7 @@ border-radius: $radius-block-ui; background-color: $white; + .block-editor-block-toolbar .components-toolbar-group, .block-editor-block-toolbar .components-toolbar { border-right-color: $dark-gray-primary; } diff --git a/packages/block-editor/src/components/block-mover/button.js b/packages/block-editor/src/components/block-mover/button.js index 5015caf62d408..1ad8c660d5dd1 100644 --- a/packages/block-editor/src/components/block-mover/button.js +++ b/packages/block-editor/src/components/block-mover/button.js @@ -2,7 +2,7 @@ * External dependencies */ import classnames from 'classnames'; -import { castArray, first, last, partial } from 'lodash'; +import { castArray, first, last } from 'lodash'; /** * WordPress dependencies @@ -121,9 +121,14 @@ const BlockMoverButton = forwardRef( ); const moverFunction = direction === 'up' ? moveBlocksUp : moveBlocksDown; - const onClick = isDisabled - ? null - : partial( moverFunction, clientIds, rootClientId ); + + const onClick = ( event ) => { + moverFunction( clientIds, rootClientId ); + if ( props.onClick ) { + props.onClick( event ); + } + }; + const descriptionId = `block-editor-block-mover-button__description-${ instanceId }`; return ( @@ -141,9 +146,9 @@ const BlockMoverButton = forwardRef( isRTL ) } aria-describedby={ descriptionId } - onClick={ onClick } - aria-disabled={ isDisabled } { ...props } + onClick={ isDisabled ? null : onClick } + aria-disabled={ isDisabled } /> - - + { ( itemProps ) => ( + + ) } + + + > + { ( itemProps ) => ( + + ) } + ) } diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss index 52cbcd2f0cf8f..427e41189c807 100644 --- a/packages/block-editor/src/components/block-mover/style.scss +++ b/packages/block-editor/src/components/block-mover/style.scss @@ -13,19 +13,32 @@ // Show the mover in a single button under the contextual toolbar. .block-editor-block-mover { + .components-toolbar-group, .components-toolbar { flex-direction: column; + flex: 1; } + &.is-horizontal .components-toolbar-group, &.is-horizontal .components-toolbar { flex-direction: row; } .block-editor-block-mover-button { height: $block-toolbar-height/2; + width: $block-toolbar-height; + padding: 0 !important; + + // Focus style. + // Overrides .components-toolbar-group styles + &::before { + left: $grid-unit-10 !important; + right: $grid-unit-10 !important; + } } // Position the icons correctly. + .components-toolbar-group .block-editor-block-mover-button.is-up-button, .components-toolbar .block-editor-block-mover-button.is-up-button { svg { margin-bottom: -$grid-unit-10; @@ -38,6 +51,7 @@ } } + .components-toolbar-group .block-editor-block-mover-button.is-down-button, .components-toolbar .block-editor-block-mover-button.is-down-button { svg { margin-top: -$grid-unit-10; @@ -54,8 +68,9 @@ &.is-horizontal { .block-editor-block-mover-button.has-icon { height: $block-toolbar-height; + // Overrides .components-toolbar-group styles width: $block-toolbar-height/2 !important; - min-width: $grid-unit-30; + min-width: $grid-unit-30 !important; padding-left: 0; padding-right: 0; @@ -78,9 +93,10 @@ } // Focus style. + // Overrides .components-toolbar-group styles &::before { - left: $grid-unit-10; - right: 0; + left: $grid-unit-10 !important; + right: 0 !important; } } @@ -92,9 +108,10 @@ } // Focus style. + // Overrides .components-toolbar-group styles &::before { - left: 0; - right: $grid-unit-10; + left: 0 !important; + right: $grid-unit-10 !important; } } } diff --git a/packages/block-editor/src/components/block-settings-menu/index.js b/packages/block-editor/src/components/block-settings-menu/index.js index e4c2c64682a32..56d4c1f008b96 100644 --- a/packages/block-editor/src/components/block-settings-menu/index.js +++ b/packages/block-editor/src/components/block-settings-menu/index.js @@ -8,7 +8,8 @@ import { castArray, flow } from 'lodash'; */ import { __, _n } from '@wordpress/i18n'; import { - Toolbar, + ToolbarGroup, + __experimentalToolbarItem as ToolbarItem, DropdownMenu, MenuGroup, MenuItem, @@ -66,98 +67,115 @@ export function BlockSettingsMenu( { clientIds } ) { onInsertBefore, onRemove, } ) => ( - - - { ( { onClose } ) => ( - <> - - <__experimentalBlockSettingsMenuFirstItem.Slot - fillProps={ { onClose } } - /> - { count === 1 && ( - - ) } - { count === 1 && ( - - ) } - { canDuplicate && ( - + + { ( toggleProps ) => ( + + { ( { onClose } ) => ( + <> + + <__experimentalBlockSettingsMenuFirstItem.Slot + fillProps={ { onClose } } + /> + { count === 1 && ( + ) } - shortcut={ shortcuts.duplicate } - > - { __( 'Duplicate' ) } - - ) } - { canInsertDefaultBlock && ( - <> - - { __( 'Insert Before' ) } - - - { __( 'Insert After' ) } - - - ) } - { count === 1 && ( - - ) } - - - - { ! isLocked && ( - + ) } + { canDuplicate && ( + + { __( 'Duplicate' ) } + ) } - shortcut={ shortcuts.remove } - > - { _n( - 'Remove Block', - 'Remove Blocks', - count + { canInsertDefaultBlock && ( + <> + + { __( + 'Insert Before' + ) } + + + { __( 'Insert After' ) } + + + ) } + { count === 1 && ( + + ) } + + + + { ! isLocked && ( + + { _n( + 'Remove Block', + 'Remove Blocks', + count + ) } + ) } - - ) } - - + + + ) } + ) } - - + + ) } ); diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js index eb2f7653af4f2..cc1c1b5d8d548 100644 --- a/packages/block-editor/src/components/block-switcher/index.js +++ b/packages/block-editor/src/components/block-switcher/index.js @@ -7,7 +7,12 @@ import { castArray, filter, first, mapKeys, orderBy, uniq, map } from 'lodash'; * WordPress dependencies */ import { __, _n, sprintf } from '@wordpress/i18n'; -import { Dropdown, Button, Toolbar, MenuGroup } from '@wordpress/components'; +import { + Dropdown, + ToolbarButton, + ToolbarGroup, + MenuGroup, +} from '@wordpress/components'; import { getBlockType, getPossibleBlockTransformations, @@ -91,14 +96,14 @@ export class BlockSwitcher extends Component { if ( ! hasBlockStyles && ! possibleBlockTransformations.length ) { return ( - - + ) } ); diff --git a/packages/components/src/toolbar-group/style.scss b/packages/components/src/toolbar-group/style.scss index a804663d4ef79..fa1f90b957d01 100644 --- a/packages/components/src/toolbar-group/style.scss +++ b/packages/components/src/toolbar-group/style.scss @@ -79,6 +79,7 @@ div.components-toolbar { // First button in a group. .components-accessible-toolbar .components-toolbar-group > .components-button:first-child.has-icon, +.components-accessible-toolbar .components-toolbar-group > div:first-child > .components-button.has-icon, .components-toolbar div:first-child .components-button.has-icon { min-width: $block-toolbar-height - $grid-unit-15 / 2; padding-left: $grid-unit-15 - $border-width; @@ -92,6 +93,7 @@ div.components-toolbar { // Last button in a group. .components-accessible-toolbar .components-toolbar-group > .components-button:last-child.has-icon, +.components-accessible-toolbar .components-toolbar-group > div:last-child > .components-button.has-icon, .components-toolbar div:last-child .components-button.has-icon { min-width: $block-toolbar-height - $grid-unit-15 / 2; padding-left: $grid-unit-15 / 2; @@ -104,7 +106,8 @@ div.components-toolbar { } // Single buttons should remain 48px. -.components-accessible-toolbar .components-toolbar-group > .components-button:first-child:last-child.has-icon, +.components-accessible-toolbar .components-toolbar-group > .components-button:first-of-type:last-of-type.has-icon, +.components-accessible-toolbar .components-toolbar-group > div:first-child:last-child > .components-button.has-icon, .components-toolbar div:first-child:last-child > .components-button.has-icon { min-width: $block-toolbar-height; padding-left: $grid-unit-15; diff --git a/packages/components/src/toolbar-group/toolbar-group-collapsed.js b/packages/components/src/toolbar-group/toolbar-group-collapsed.js index fb9310bffdc9f..1c020ad84d5c4 100644 --- a/packages/components/src/toolbar-group/toolbar-group-collapsed.js +++ b/packages/components/src/toolbar-group/toolbar-group-collapsed.js @@ -18,7 +18,10 @@ function ToolbarGroupCollapsed( { controls = [], ...props } ) { const renderDropdownMenu = ( toggleProps ) => ( ); diff --git a/packages/components/src/toolbar-item/index.js b/packages/components/src/toolbar-item/index.js index b4de3013fd8db..a475eb5e8e3c7 100644 --- a/packages/components/src/toolbar-item/index.js +++ b/packages/components/src/toolbar-item/index.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { useToolbarItem } from 'reakit/Toolbar'; +import { ToolbarItem as BaseToolbarItem } from 'reakit/Toolbar'; /** * WordPress dependencies @@ -16,11 +16,6 @@ import ToolbarContext from '../toolbar-context'; function ToolbarItem( { children, ...props }, ref ) { const accessibleToolbarState = useContext( ToolbarContext ); - // https://reakit.io/docs/composition/#props-hooks - const itemProps = useToolbarItem( accessibleToolbarState, { - ...props, - ref, - } ); if ( typeof children !== 'function' ) { warning( @@ -29,14 +24,21 @@ function ToolbarItem( { children, ...props }, ref ) { return null; } + const allProps = { ...props, ref, 'data-experimental-toolbar-item': true }; + if ( ! accessibleToolbarState ) { - warning( - '`ToolbarItem` should be rendered within ``' - ); - return null; + return children( allProps ); } - return children( itemProps ); + return ( + + { ( htmlProps ) => + // Overwriting BaseToolbarItem's onMouseDown since it disables drag + // and drop + children( { ...htmlProps, onMouseDown: allProps.onMouseDown } ) + } + + ); } export default forwardRef( ToolbarItem ); diff --git a/packages/components/src/toolbar-item/index.native.js b/packages/components/src/toolbar-item/index.native.js deleted file mode 100644 index 1d38d98ce9af1..0000000000000 --- a/packages/components/src/toolbar-item/index.native.js +++ /dev/null @@ -1,18 +0,0 @@ -/** - * WordPress dependencies - */ -import { forwardRef } from '@wordpress/element'; -import warning from '@wordpress/warning'; - -function ToolbarItem( { children, ...props }, ref ) { - if ( typeof children !== 'function' ) { - warning( - '`ToolbarItem` is a generic headless component that accepts only function children props' - ); - return null; - } - - return children( { ...props, ref } ); -} - -export default forwardRef( ToolbarItem ); diff --git a/packages/components/src/toolbar/index.js b/packages/components/src/toolbar/index.js index 74fe904adf995..228f73a7e5e45 100644 --- a/packages/components/src/toolbar/index.js +++ b/packages/components/src/toolbar/index.js @@ -3,6 +3,11 @@ */ import classnames from 'classnames'; +/** + * WordPress dependencies + */ +import { forwardRef } from '@wordpress/element'; + /** * Internal dependencies */ @@ -16,8 +21,12 @@ import ToolbarContainer from './toolbar-container'; * * @param {Object} props Component props. * @param {string} [props.className] Class to set on the container div. + * @param {Object} ref React Element ref. */ -function Toolbar( { className, __experimentalAccessibilityLabel, ...props } ) { +function Toolbar( + { className, __experimentalAccessibilityLabel, ...props }, + ref +) { if ( __experimentalAccessibilityLabel ) { return ( ); } - + // When the __experimentalAccessibilityLabel prop is not passed, Toolbar will + // fallback to ToolbarGroup. This should be deprecated as soon as the new API + // gets stable. + // See https://github.com/WordPress/gutenberg/pull/20008#issuecomment-624503410 return ; } -export default Toolbar; +export default forwardRef( Toolbar ); diff --git a/packages/components/src/toolbar/style.scss b/packages/components/src/toolbar/style.scss index fdbcccb3f2029..ae147df18885c 100644 --- a/packages/components/src/toolbar/style.scss +++ b/packages/components/src/toolbar/style.scss @@ -4,7 +4,7 @@ border-radius: $radius-block-ui; flex-shrink: 0; - .components-toolbar-group:last-child { + & > .components-toolbar-group:last-child { border-right: none; } } 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 8f7d6818d380d..3f590f4741f12 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 @@ -29,7 +29,6 @@ const tabThroughParagraphBlock = async ( paragraphText ) => { await page.keyboard.press( 'Tab' ); await expect( await getActiveLabel() ).toBe( 'Add block' ); - await tabThroughBlockMoverControl(); await tabThroughBlockToolbar(); await page.keyboard.press( 'Tab' ); @@ -42,35 +41,36 @@ const tabThroughParagraphBlock = async ( paragraphText ) => { await expect( await getActiveLabel() ).toBe( 'Open document settings' ); }; -const tabThroughBlockMoverControl = async () => { +const tabThroughBlockToolbar = async () => { await page.keyboard.press( 'Tab' ); await expect( await getActiveLabel() ).toBe( 'Move up' ); - await page.keyboard.press( 'Tab' ); + await page.keyboard.press( 'ArrowRight' ); await expect( await getActiveLabel() ).toBe( 'Move down' ); -}; -const tabThroughBlockToolbar = async () => { - await page.keyboard.press( 'Tab' ); + await page.keyboard.press( 'ArrowRight' ); await expect( await getActiveLabel() ).toBe( 'Change block type or style' ); - await page.keyboard.press( 'Tab' ); + await page.keyboard.press( 'ArrowRight' ); await expect( await getActiveLabel() ).toBe( 'Change text alignment' ); - await page.keyboard.press( 'Tab' ); + await page.keyboard.press( 'ArrowRight' ); await expect( await getActiveLabel() ).toBe( 'Bold' ); - await page.keyboard.press( 'Tab' ); + await page.keyboard.press( 'ArrowRight' ); await expect( await getActiveLabel() ).toBe( 'Italic' ); - await page.keyboard.press( 'Tab' ); + await page.keyboard.press( 'ArrowRight' ); await expect( await getActiveLabel() ).toBe( 'Link' ); - await page.keyboard.press( 'Tab' ); + await page.keyboard.press( 'ArrowRight' ); await expect( await getActiveLabel() ).toBe( 'More rich text controls' ); - await page.keyboard.press( 'Tab' ); + await page.keyboard.press( 'ArrowRight' ); await expect( await getActiveLabel() ).toBe( 'More options' ); + + await page.keyboard.press( 'ArrowRight' ); + await expect( await getActiveLabel() ).toBe( 'Move up' ); }; describe( 'Order of block keyboard navigation', () => { @@ -197,6 +197,6 @@ describe( 'Order of block keyboard navigation', () => { ); await pressKeyWithModifier( 'shift', 'Tab' ); - await expect( await getActiveLabel() ).toBe( 'More options' ); + await expect( await getActiveLabel() ).toBe( 'Move up' ); } ); } ); diff --git a/packages/edit-navigation/src/components/menu-editor/style.scss b/packages/edit-navigation/src/components/menu-editor/style.scss index d505972b97990..00a230bd9e4f2 100644 --- a/packages/edit-navigation/src/components/menu-editor/style.scss +++ b/packages/edit-navigation/src/components/menu-editor/style.scss @@ -19,6 +19,7 @@ border: 1px solid #e2e4e7; // Borders around toolbar segments. + .components-toolbar-group, .components-toolbar { background: none; // IE11 has thick paddings without this. diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss index d399239b83b10..e2c9241c4dec3 100644 --- a/packages/edit-post/src/components/header/header-toolbar/style.scss +++ b/packages/edit-post/src/components/header/header-toolbar/style.scss @@ -39,6 +39,7 @@ display: none; } + .block-editor-block-toolbar .components-toolbar-group, .block-editor-block-toolbar .components-toolbar { border-top: none; border-bottom: none; @@ -72,6 +73,7 @@ border-left: $border-width solid $light-gray-500; } + .block-editor-block-toolbar .components-toolbar-group, .block-editor-block-toolbar .components-toolbar { $top-toolbar-padding: ($header-height - $grid-unit-60) / 2; height: $header-height; diff --git a/packages/interface/src/components/complementary-area/style.scss b/packages/interface/src/components/complementary-area/style.scss index 469e6605d13d5..30ba90853102b 100644 --- a/packages/interface/src/components/complementary-area/style.scss +++ b/packages/interface/src/components/complementary-area/style.scss @@ -65,6 +65,7 @@ margin: 1.5em 0; } + div.components-toolbar-group, div.components-toolbar { box-shadow: none; margin-bottom: 1.5em;