From 44857310ab5ae6b20975df0d116273a15ef00289 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 20 Nov 2019 10:00:59 +0100 Subject: [PATCH 01/11] Add a header menu to switch between edit and select tools --- packages/block-editor/README.md | 4 ++ packages/block-editor/src/components/index.js | 1 + .../src/components/inner-blocks/index.js | 12 ++-- .../navigation-mode-selector/index.js | 69 +++++++++++++++++++ .../navigation-mode-selector/style.scss | 5 ++ .../src/components/writing-flow/index.js | 11 +-- packages/block-editor/src/store/reducer.js | 2 +- packages/block-editor/src/style.scss | 1 + .../components/src/menu-items-choice/index.js | 1 + .../src/menu-items-choice/style.scss | 12 ++++ packages/components/src/style.scss | 1 + packages/e2e-test-utils/CHANGELOG.md | 6 ++ packages/e2e-test-utils/README.md | 8 --- .../e2e-test-utils/src/create-new-post.js | 3 - packages/e2e-test-utils/src/index.js | 1 - packages/e2e-test-utils/src/keyboard-mode.js | 13 +--- .../specs/editor/various/preview.test.js | 2 - .../specs/editor/various/undo.test.js | 2 - .../specs/performance/performance.test.js | 2 - .../components/header/header-toolbar/index.js | 2 + 20 files changed, 112 insertions(+), 46 deletions(-) create mode 100644 packages/block-editor/src/components/navigation-mode-selector/index.js create mode 100644 packages/block-editor/src/components/navigation-mode-selector/style.scss create mode 100644 packages/components/src/menu-items-choice/style.scss diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index c90ced2fe3c7c2..3d638d927617bb 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -344,6 +344,10 @@ Undocumented declaration. Undocumented declaration. +# **NavigationToolSelector** + +Undocumented declaration. + # **ObserveTyping** _Related_ diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index c7792608518acd..18f5e33b551da2 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -30,6 +30,7 @@ export { default as __experimentalLinkControl } from './link-control'; export { default as MediaPlaceholder } from './media-placeholder'; export { default as MediaUpload } from './media-upload'; export { default as MediaUploadCheck } from './media-upload/check'; +export { default as NavigationToolSelector } from './navigation-mode-selector'; export { default as PanelColorSettings } from './panel-color-settings'; export { default as PlainText } from './plain-text'; export { default as __experimentalResponsiveBlockControl } from './responsive-block-control'; diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index ed147bfe736adf..dc281d0f42f4f5 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -7,7 +7,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { withViewportMatch } from '@wordpress/viewport'; // Temporary click-through disable on desktop. +import { withViewportMatch } from '@wordpress/viewport'; import { Component } from '@wordpress/element'; import { withSelect, withDispatch } from '@wordpress/data'; import { synchronizeBlocksWithTemplate, withBlockContentContext } from '@wordpress/blocks'; @@ -102,7 +102,7 @@ class InnerBlocks extends Component { render() { const { - isSmallScreen, // Temporary click-through disable on desktop. + enableClickThrough, clientId, hasOverlay, renderAppender, @@ -117,7 +117,7 @@ class InnerBlocks extends Component { const isPlaceholder = template === null && !! templateOptions; const classes = classnames( 'editor-inner-blocks block-editor-inner-blocks', { - 'has-overlay': isSmallScreen && ( hasOverlay && ! isPlaceholder ), // Temporary click-through disable on desktop. + 'has-overlay': enableClickThrough && ( hasOverlay && ! isPlaceholder ), } ); return ( @@ -141,7 +141,7 @@ class InnerBlocks extends Component { } InnerBlocks = compose( [ - withViewportMatch( { isSmallScreen: '< medium' } ), // Temporary click-through disable on desktop. + withViewportMatch( { isSmallScreen: '< medium' } ), withBlockEditContext( ( context ) => pick( context, [ 'clientId' ] ) ), withSelect( ( select, ownProps ) => { const { @@ -151,8 +151,9 @@ InnerBlocks = compose( [ getBlockListSettings, getBlockRootClientId, getTemplateLock, + isNavigationMode, } = select( 'core/block-editor' ); - const { clientId } = ownProps; + const { clientId, isSmallScreen } = ownProps; const block = getBlock( clientId ); const rootClientId = getBlockRootClientId( clientId ); @@ -161,6 +162,7 @@ InnerBlocks = compose( [ blockListSettings: getBlockListSettings( clientId ), hasOverlay: block.name !== 'core/template' && ! isBlockSelected( clientId ) && ! hasSelectedInnerBlock( clientId, true ), parentLock: getTemplateLock( rootClientId ), + enableClickThrough: isNavigationMode() || isSmallScreen, }; } ), withDispatch( ( dispatch, ownProps ) => { diff --git a/packages/block-editor/src/components/navigation-mode-selector/index.js b/packages/block-editor/src/components/navigation-mode-selector/index.js new file mode 100644 index 00000000000000..67e624999987d8 --- /dev/null +++ b/packages/block-editor/src/components/navigation-mode-selector/index.js @@ -0,0 +1,69 @@ +/** + * WordPress dependencies + */ +import { Dropdown, IconButton, MenuGroup, MenuItemsChoice, SVG, Path } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { useSelect, useDispatch } from '@wordpress/data'; + +const editIcon = ; +const selectIcon = ; + +function NavigationToolSelector() { + const isNavigationTool = useSelect( ( select ) => select( 'core/block-editor' ).isNavigationMode() ); + const { setNavigationMode } = useDispatch( 'core/block-editor' ); + const onSwitchMode = ( mode ) => { + setNavigationMode( mode === 'edit' ? false : true ); + }; + + return ( + ( + + ) } + renderContent={ () => ( + <> + + + { editIcon } + { __( 'Edit' ) } + + ), + shortcut: isNavigationTool ? 'Enter' : undefined, + }, + { + value: 'select', + label: ( + <> + { selectIcon } + { __( 'Select' ) } + + ), + shortcut: isNavigationTool ? undefined : 'Esc', + }, + ] } + /> + +
+ { __( 'Tools offer different block interactions to optimize block selection & editing tasks' ) } +
+ + ) } + /> + ); +} + +export default NavigationToolSelector; diff --git a/packages/block-editor/src/components/navigation-mode-selector/style.scss b/packages/block-editor/src/components/navigation-mode-selector/style.scss new file mode 100644 index 00000000000000..6ef22f08f7e87d --- /dev/null +++ b/packages/block-editor/src/components/navigation-mode-selector/style.scss @@ -0,0 +1,5 @@ +.block-editor-navigation-mode-selector__help { + padding: $grid-size-large; + border-top: 1px solid $light-gray-500; + color: $dark-gray-300; +} diff --git a/packages/block-editor/src/components/writing-flow/index.js b/packages/block-editor/src/components/writing-flow/index.js index 37e45dd2680d0d..cd9355bcf2a36e 100644 --- a/packages/block-editor/src/components/writing-flow/index.js +++ b/packages/block-editor/src/components/writing-flow/index.js @@ -104,13 +104,6 @@ class WritingFlow extends Component { onMouseDown() { this.verticalRect = null; - this.disableNavigationMode(); - } - - disableNavigationMode() { - if ( this.props.isNavigationMode ) { - this.props.disableNavigationMode(); - } } /** @@ -377,7 +370,6 @@ class WritingFlow extends Component { * Sets focus to the end of the last tabbable text field, if one exists. */ focusLastTextField() { - this.disableNavigationMode(); const focusableNodes = focus.focusable.find( this.container ); const target = findLast( focusableNodes, isTabbableTextField ); if ( target ) { @@ -445,11 +437,10 @@ export default compose( [ }; } ), withDispatch( ( dispatch ) => { - const { multiSelect, selectBlock, setNavigationMode, clearSelectedBlock } = dispatch( 'core/block-editor' ); + const { multiSelect, selectBlock, clearSelectedBlock } = dispatch( 'core/block-editor' ); return { onMultiSelect: multiSelect, onSelectBlock: selectBlock, - disableNavigationMode: () => setNavigationMode( false ), clearSelectedBlock, }; } ), diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js index ac663d977e42b9..d0e5d9e64dd024 100644 --- a/packages/block-editor/src/store/reducer.js +++ b/packages/block-editor/src/store/reducer.js @@ -1256,7 +1256,7 @@ export const blockListSettings = ( state = {}, action ) => { * * @return {string} Updated state. */ -export function isNavigationMode( state = true, action ) { +export function isNavigationMode( state = false, action ) { if ( action.type === 'SET_NAVIGATION_MODE' ) { return action.isNavigationMode; } diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index 3169be962d3b3a..6f41fde0b2b395 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -26,6 +26,7 @@ @import "./components/inserter-list-item/style.scss"; @import "./components/media-placeholder/style.scss"; @import "./components/multi-selection-inspector/style.scss"; +@import "./components/navigation-mode-selector/style.scss"; @import "./components/panel-color-settings/style.scss"; @import "./components/plain-text/style.scss"; @import "./components/responsive-block-control/style.scss"; diff --git a/packages/components/src/menu-items-choice/index.js b/packages/components/src/menu-items-choice/index.js index 2311fd3a0435dd..8412c64e4141ff 100644 --- a/packages/components/src/menu-items-choice/index.js +++ b/packages/components/src/menu-items-choice/index.js @@ -17,6 +17,7 @@ export default function MenuItemsChoice( { icon={ isSelected && 'yes' } isSelected={ isSelected } shortcut={ item.shortcut } + className="components-menu-items-choice" onClick={ () => { if ( ! isSelected ) { onSelect( item.value ); diff --git a/packages/components/src/menu-items-choice/style.scss b/packages/components/src/menu-items-choice/style.scss new file mode 100644 index 00000000000000..2d933a77a13a98 --- /dev/null +++ b/packages/components/src/menu-items-choice/style.scss @@ -0,0 +1,12 @@ +.components-menu-items-choice, +.components-menu-items-choice.components-icon-button { + padding-left: 2rem; + + &.has-icon { + padding-left: 0.5rem; + } + + .dashicon { + margin-right: 4px; + } +} diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss index ec1b58335fedb2..59f61283a661a7 100644 --- a/packages/components/src/style.scss +++ b/packages/components/src/style.scss @@ -25,6 +25,7 @@ @import "./icon-button/style.scss"; @import "./menu-group/style.scss"; @import "./menu-item/style.scss"; +@import "./menu-items-choice/style.scss"; @import "./modal/style.scss"; @import "./notice/style.scss"; @import "./panel/style.scss"; diff --git a/packages/e2e-test-utils/CHANGELOG.md b/packages/e2e-test-utils/CHANGELOG.md index 8cbae26a2abc5a..ccbbd0e96d218c 100644 --- a/packages/e2e-test-utils/CHANGELOG.md +++ b/packages/e2e-test-utils/CHANGELOG.md @@ -1,3 +1,9 @@ +## master + +### Breaking Changes + +- The disableNavigationMode utility was removed. By default, the editor is in edit mode now. + ## 3.0.0 (2019-11-14) ### Breaking Changes diff --git a/packages/e2e-test-utils/README.md b/packages/e2e-test-utils/README.md index e01082057a82a8..37d5f86d06cb95 100644 --- a/packages/e2e-test-utils/README.md +++ b/packages/e2e-test-utils/README.md @@ -137,14 +137,6 @@ _Parameters_ - _slug_ `string`: Plugin slug. -# **disableNavigationMode** - -Triggers edit mode if not already active. - -_Returns_ - -- `Promise`: Promise resolving after enabling the keyboard edit mode. - # **disablePrePublishChecks** Disables Pre-publish checks. diff --git a/packages/e2e-test-utils/src/create-new-post.js b/packages/e2e-test-utils/src/create-new-post.js index ddc2ad64ea6c1b..91a95bf5216a45 100644 --- a/packages/e2e-test-utils/src/create-new-post.js +++ b/packages/e2e-test-utils/src/create-new-post.js @@ -7,7 +7,6 @@ import { addQueryArgs } from '@wordpress/url'; * Internal dependencies */ import { visitAdminPage } from './visit-admin-page'; -import { disableNavigationMode } from './keyboard-mode'; /** * Creates new post. @@ -37,6 +36,4 @@ export async function createNewPost( { if ( enableTips ) { await page.reload(); } - - await disableNavigationMode(); } diff --git a/packages/e2e-test-utils/src/index.js b/packages/e2e-test-utils/src/index.js index 40feec01014580..4d78447dec0872 100644 --- a/packages/e2e-test-utils/src/index.js +++ b/packages/e2e-test-utils/src/index.js @@ -42,7 +42,6 @@ export { selectBlockByClientId } from './select-block-by-client-id'; export { setBrowserViewport } from './set-browser-viewport'; export { setPostContent } from './set-post-content'; export { switchEditorModeTo } from './switch-editor-mode-to'; -export { disableNavigationMode } from './keyboard-mode'; export { switchUserToAdmin } from './switch-user-to-admin'; export { switchUserToTest } from './switch-user-to-test'; export { toggleMoreMenu } from './toggle-more-menu'; diff --git a/packages/e2e-test-utils/src/keyboard-mode.js b/packages/e2e-test-utils/src/keyboard-mode.js index 8928c220b28f63..8b137891791fe9 100644 --- a/packages/e2e-test-utils/src/keyboard-mode.js +++ b/packages/e2e-test-utils/src/keyboard-mode.js @@ -1,12 +1 @@ -/** - * Triggers edit mode if not already active. - * - * @return {Promise} Promise resolving after enabling the keyboard edit mode. - */ -export async function disableNavigationMode() { - const focusedElement = await page.$( ':focus' ); - await page.click( '.editor-post-title' ); - if ( focusedElement ) { - await focusedElement.focus(); - } -} + diff --git a/packages/e2e-tests/specs/editor/various/preview.test.js b/packages/e2e-tests/specs/editor/various/preview.test.js index 505f8cca3ba3a4..7467a9382ae48a 100644 --- a/packages/e2e-tests/specs/editor/various/preview.test.js +++ b/packages/e2e-tests/specs/editor/various/preview.test.js @@ -15,7 +15,6 @@ import { saveDraft, clickOnMoreMenuItem, pressKeyWithModifier, - disableNavigationMode, } from '@wordpress/e2e-test-utils'; async function openPreviewPage( editorPage ) { @@ -206,7 +205,6 @@ describe( 'Preview with Custom Fields enabled', () => { beforeEach( async () => { await createNewPost(); await toggleCustomFieldsOption( true ); - await disableNavigationMode(); } ); afterEach( async () => { diff --git a/packages/e2e-tests/specs/editor/various/undo.test.js b/packages/e2e-tests/specs/editor/various/undo.test.js index c8c1582eed9893..7c1a2602d7bfe3 100644 --- a/packages/e2e-tests/specs/editor/various/undo.test.js +++ b/packages/e2e-tests/specs/editor/various/undo.test.js @@ -10,7 +10,6 @@ import { getAllBlocks, saveDraft, publishPost, - disableNavigationMode, } from '@wordpress/e2e-test-utils'; const getSelection = async () => { @@ -331,7 +330,6 @@ describe( 'undo', () => { await page.keyboard.type( 'original' ); await saveDraft(); await page.reload(); - await disableNavigationMode(); // Issue is demonstrated by forcing state merges (multiple inputs) on // an existing text after a fresh reload. diff --git a/packages/e2e-tests/specs/performance/performance.test.js b/packages/e2e-tests/specs/performance/performance.test.js index 6246dfb4dc0d38..7f402dad605ca6 100644 --- a/packages/e2e-tests/specs/performance/performance.test.js +++ b/packages/e2e-tests/specs/performance/performance.test.js @@ -11,7 +11,6 @@ import { createNewPost, saveDraft, insertBlock, - disableNavigationMode, } from '@wordpress/e2e-test-utils'; function readFile( filePath ) { @@ -54,7 +53,6 @@ describe( 'Performance', () => { while ( i-- ) { startTime = new Date(); await page.reload( { waitUntil: [ 'domcontentloaded', 'load' ] } ); - await disableNavigationMode(); } await insertBlock( 'Paragraph' ); diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js index d02a82156fcfe0..183c2a41093d8f 100644 --- a/packages/edit-post/src/components/header/header-toolbar/index.js +++ b/packages/edit-post/src/components/header/header-toolbar/index.js @@ -11,6 +11,7 @@ import { BlockToolbar, NavigableToolbar, BlockNavigationDropdown, + NavigationToolSelector, } from '@wordpress/block-editor'; import { TableOfContents, @@ -45,6 +46,7 @@ function HeaderToolbar( { hasFixedToolbar, isLargeViewport, showInserter, isText ) } + ); } From ff8d20e29f63dad0ef2aad63541ff1db218dedd0 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 21 Nov 2019 10:25:28 +0100 Subject: [PATCH 02/11] Accessibility fixes --- .../navigation-mode-selector/index.js | 18 +++++++++++++----- .../components/header/header-toolbar/index.js | 2 +- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/navigation-mode-selector/index.js b/packages/block-editor/src/components/navigation-mode-selector/index.js index 67e624999987d8..c76d1e134f32fa 100644 --- a/packages/block-editor/src/components/navigation-mode-selector/index.js +++ b/packages/block-editor/src/components/navigation-mode-selector/index.js @@ -1,7 +1,14 @@ /** * WordPress dependencies */ -import { Dropdown, IconButton, MenuGroup, MenuItemsChoice, SVG, Path } from '@wordpress/components'; +import { + Dropdown, + IconButton, + MenuItemsChoice, + SVG, + Path, + NavigableMenu, +} from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { useSelect, useDispatch } from '@wordpress/data'; @@ -22,13 +29,14 @@ function NavigationToolSelector() { icon={ isNavigationTool ? selectIcon : editIcon } aria-expanded={ isOpen } onClick={ onToggle } - label={ __( 'Select navigation tool' ) } + label={ __( 'Navigation Tool' ) } /> ) } renderContent={ () => ( <> - - +
{ __( 'Tools offer different block interactions to optimize block selection & editing tasks' ) }
diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js index 183c2a41093d8f..2936f6bebfddf2 100644 --- a/packages/edit-post/src/components/header/header-toolbar/index.js +++ b/packages/edit-post/src/components/header/header-toolbar/index.js @@ -41,12 +41,12 @@ function HeaderToolbar( { hasFixedToolbar, isLargeViewport, showInserter, isText + { hasFixedToolbar && isLargeViewport && (
) } - ); } From 0b1e913a44a8919544af6cd79865506bbe5a7d37 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 21 Nov 2019 10:27:48 +0100 Subject: [PATCH 03/11] Hide the menu from mobile --- .../src/components/navigation-mode-selector/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/navigation-mode-selector/index.js b/packages/block-editor/src/components/navigation-mode-selector/index.js index c76d1e134f32fa..e974bb74f1cc65 100644 --- a/packages/block-editor/src/components/navigation-mode-selector/index.js +++ b/packages/block-editor/src/components/navigation-mode-selector/index.js @@ -11,6 +11,7 @@ import { } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { useSelect, useDispatch } from '@wordpress/data'; +import { ifViewportMatches } from '@wordpress/viewport'; const editIcon = ; const selectIcon = ; @@ -74,4 +75,4 @@ function NavigationToolSelector() { ); } -export default NavigationToolSelector; +export default ifViewportMatches( 'medium' )( NavigationToolSelector ); From 9dc66032e28d4b54c0364d872a87553c9a2a5369 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 22 Nov 2019 12:55:26 +0100 Subject: [PATCH 04/11] Update the select icon --- .../src/components/navigation-mode-selector/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/navigation-mode-selector/index.js b/packages/block-editor/src/components/navigation-mode-selector/index.js index e974bb74f1cc65..d3322a7c8414c8 100644 --- a/packages/block-editor/src/components/navigation-mode-selector/index.js +++ b/packages/block-editor/src/components/navigation-mode-selector/index.js @@ -14,7 +14,7 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { ifViewportMatches } from '@wordpress/viewport'; const editIcon = ; -const selectIcon = ; +const selectIcon = ; function NavigationToolSelector() { const isNavigationTool = useSelect( ( select ) => select( 'core/block-editor' ).isNavigationMode() ); From 09e40d7382ab2b7d66f2dc3cc37749ea8bfd0879 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 22 Nov 2019 12:58:01 +0100 Subject: [PATCH 05/11] Rename the components and the label --- packages/block-editor/README.md | 2 +- packages/block-editor/src/components/index.js | 2 +- .../index.js | 10 +++++----- .../style.scss | 2 +- packages/block-editor/src/style.scss | 2 +- .../src/components/header/header-toolbar/index.js | 4 ++-- 6 files changed, 11 insertions(+), 11 deletions(-) rename packages/block-editor/src/components/{navigation-mode-selector => tool-selector}/index.js (89%) rename packages/block-editor/src/components/{navigation-mode-selector => tool-selector}/style.scss (66%) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 3d638d927617bb..bec860c68608a4 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -344,7 +344,7 @@ Undocumented declaration. Undocumented declaration. -# **NavigationToolSelector** +# **ToolSelector** Undocumented declaration. diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 18f5e33b551da2..2ff44fed17fb4f 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -30,7 +30,6 @@ export { default as __experimentalLinkControl } from './link-control'; export { default as MediaPlaceholder } from './media-placeholder'; export { default as MediaUpload } from './media-upload'; export { default as MediaUploadCheck } from './media-upload/check'; -export { default as NavigationToolSelector } from './navigation-mode-selector'; export { default as PanelColorSettings } from './panel-color-settings'; export { default as PlainText } from './plain-text'; export { default as __experimentalResponsiveBlockControl } from './responsive-block-control'; @@ -40,6 +39,7 @@ export { RichTextToolbarButton, __unstableRichTextInputEvent, } from './rich-text'; +export { default as ToolSelector } from './tool-selector'; export { default as URLInput } from './url-input'; export { default as URLInputButton } from './url-input/button'; export { default as URLPopover } from './url-popover'; diff --git a/packages/block-editor/src/components/navigation-mode-selector/index.js b/packages/block-editor/src/components/tool-selector/index.js similarity index 89% rename from packages/block-editor/src/components/navigation-mode-selector/index.js rename to packages/block-editor/src/components/tool-selector/index.js index d3322a7c8414c8..5b5141e0ffe1a5 100644 --- a/packages/block-editor/src/components/navigation-mode-selector/index.js +++ b/packages/block-editor/src/components/tool-selector/index.js @@ -16,7 +16,7 @@ import { ifViewportMatches } from '@wordpress/viewport'; const editIcon = ; const selectIcon = ; -function NavigationToolSelector() { +function ToolSelector() { const isNavigationTool = useSelect( ( select ) => select( 'core/block-editor' ).isNavigationMode() ); const { setNavigationMode } = useDispatch( 'core/block-editor' ); const onSwitchMode = ( mode ) => { @@ -30,14 +30,14 @@ function NavigationToolSelector() { icon={ isNavigationTool ? selectIcon : editIcon } aria-expanded={ isOpen } onClick={ onToggle } - label={ __( 'Navigation Tool' ) } + label={ __( 'Tools' ) } /> ) } renderContent={ () => ( <> -
+
{ __( 'Tools offer different block interactions to optimize block selection & editing tasks' ) }
@@ -75,4 +75,4 @@ function NavigationToolSelector() { ); } -export default ifViewportMatches( 'medium' )( NavigationToolSelector ); +export default ifViewportMatches( 'medium' )( ToolSelector ); diff --git a/packages/block-editor/src/components/navigation-mode-selector/style.scss b/packages/block-editor/src/components/tool-selector/style.scss similarity index 66% rename from packages/block-editor/src/components/navigation-mode-selector/style.scss rename to packages/block-editor/src/components/tool-selector/style.scss index 6ef22f08f7e87d..1f61a871dce896 100644 --- a/packages/block-editor/src/components/navigation-mode-selector/style.scss +++ b/packages/block-editor/src/components/tool-selector/style.scss @@ -1,4 +1,4 @@ -.block-editor-navigation-mode-selector__help { +.block-editor-tool-selector__help { padding: $grid-size-large; border-top: 1px solid $light-gray-500; color: $dark-gray-300; diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index 6f41fde0b2b395..de5698f91de48b 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -26,13 +26,13 @@ @import "./components/inserter-list-item/style.scss"; @import "./components/media-placeholder/style.scss"; @import "./components/multi-selection-inspector/style.scss"; -@import "./components/navigation-mode-selector/style.scss"; @import "./components/panel-color-settings/style.scss"; @import "./components/plain-text/style.scss"; @import "./components/responsive-block-control/style.scss"; @import "./components/rich-text/format-toolbar/style.scss"; @import "./components/rich-text/style.scss"; @import "./components/skip-to-selected-block/style.scss"; +@import "./components/tool-selector/style.scss"; @import "./components/url-input/style.scss"; @import "./components/url-popover/style.scss"; @import "./components/warning/style.scss"; diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js index 2936f6bebfddf2..92b877e7626cfc 100644 --- a/packages/edit-post/src/components/header/header-toolbar/index.js +++ b/packages/edit-post/src/components/header/header-toolbar/index.js @@ -11,7 +11,7 @@ import { BlockToolbar, NavigableToolbar, BlockNavigationDropdown, - NavigationToolSelector, + ToolSelector, } from '@wordpress/block-editor'; import { TableOfContents, @@ -41,7 +41,7 @@ function HeaderToolbar( { hasFixedToolbar, isLargeViewport, showInserter, isText - + { hasFixedToolbar && isLargeViewport && (
From ba563bc5d35409f36eb8ce8e921958f8f13a62d5 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 26 Nov 2019 10:41:10 +0100 Subject: [PATCH 06/11] Disable navigation mode when clicking a block twice --- .../src/components/block-list/block.js | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index 48b5506e452f2f..d2695ac0e0b217 100644 --- a/packages/block-editor/src/components/block-list/block.js +++ b/packages/block-editor/src/components/block-list/block.js @@ -101,7 +101,7 @@ function BlockListBlock( { animateOnChange, enableAnimation, isNavigationMode, - enableNavigationMode, + setNavigationMode, } ) { // Random state used to rerender the component if needed, ideally we don't need this const [ , updateRerenderState ] = useState( {} ); @@ -326,7 +326,7 @@ function BlockListBlock( { isSelected && isEditMode ) { - enableNavigationMode(); + setNavigationMode( true ); wrapper.current.focus(); } break; @@ -345,6 +345,14 @@ function BlockListBlock( { return; } + if ( + isNavigationMode && + isSelected && + isInsideRootBlock( blockNodeRef.current, event.target ) + ) { + setNavigationMode( false ); + } + if ( event.shiftKey ) { if ( ! isSelected ) { onShiftSelection(); @@ -778,9 +786,7 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => { toggleSelection( selectionEnabled ) { toggleSelection( selectionEnabled ); }, - enableNavigationMode() { - setNavigationMode( true ); - }, + setNavigationMode, }; } ); From b733b52234dcf9bacdfb2928b5e8ae87701ec6ec Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 26 Nov 2019 15:57:10 +0100 Subject: [PATCH 07/11] Fix docs --- packages/block-editor/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index bec860c68608a4..cf04f3f559a43a 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -344,10 +344,6 @@ Undocumented declaration. Undocumented declaration. -# **ToolSelector** - -Undocumented declaration. - # **ObserveTyping** _Related_ @@ -431,6 +427,10 @@ _Type_ - `Object` +# **ToolSelector** + +Undocumented declaration. + # **transformStyles** Applies a series of CSS rule transforms to wrap selectors inside a given class and/or rewrite URLs depending on the parameters passed. From 271edd613e67aebbef40bf6a95e188f2260f4e3d Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 27 Nov 2019 08:29:01 +0100 Subject: [PATCH 08/11] Announce mode changes to screen readers users --- .../developers/data/data-core-block-editor.md | 6 +----- packages/block-editor/src/store/actions.js | 16 +++++++++++----- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/docs/designers-developers/developers/data/data-core-block-editor.md b/docs/designers-developers/developers/data/data-core-block-editor.md index 99cc264cc7e2e4..0506c426c07f4a 100644 --- a/docs/designers-developers/developers/data/data-core-block-editor.md +++ b/docs/designers-developers/developers/data/data-core-block-editor.md @@ -1141,16 +1141,12 @@ _Parameters_ # **setNavigationMode** -Returns an action object used to enable or disable the navigation mode. +Generators that triggers an action used to enable or disable the navigation mode. _Parameters_ - _isNavigationMode_ `string`: Enable/Disable navigation mode. -_Returns_ - -- `Object`: Action object - # **setTemplateValidity** Returns an action object resetting the template validity. diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js index 6e717035783468..06ef92914ab811 100644 --- a/packages/block-editor/src/store/actions.js +++ b/packages/block-editor/src/store/actions.js @@ -7,6 +7,8 @@ import { castArray, first, get, includes } from 'lodash'; * WordPress dependencies */ import { getDefaultBlockName, createBlock } from '@wordpress/blocks'; +import { speak } from '@wordpress/a11y'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies @@ -793,15 +795,19 @@ export function __unstableMarkAutomaticChange() { } /** - * Returns an action object used to enable or disable the navigation mode. + * Generators that triggers an action used to enable or disable the navigation mode. * * @param {string} isNavigationMode Enable/Disable navigation mode. - * - * @return {Object} Action object */ -export function setNavigationMode( isNavigationMode = true ) { - return { +export function * setNavigationMode( isNavigationMode = true ) { + yield { type: 'SET_NAVIGATION_MODE', isNavigationMode, }; + + if ( isNavigationMode ) { + speak( __( 'You are currently in navigation mode. Navigate blocks using arrow keys. To exit navigation mode and edit the selected block, press Enter.' ) ); + } else { + speak( __( 'You are currently in edit mode. To return to the navigation mode, press Escape.' ) ); + } } From e467ab376365824d07bf64a7ae22417e2dab3b86 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 27 Nov 2019 12:41:18 +0100 Subject: [PATCH 09/11] Update the help text --- packages/block-editor/src/components/tool-selector/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/tool-selector/index.js b/packages/block-editor/src/components/tool-selector/index.js index 5b5141e0ffe1a5..514f5231a20832 100644 --- a/packages/block-editor/src/components/tool-selector/index.js +++ b/packages/block-editor/src/components/tool-selector/index.js @@ -67,7 +67,7 @@ function ToolSelector() { />
- { __( 'Tools offer different block interactions to optimize block selection & editing tasks' ) } + { __( 'Tools offer different interactions for block selection & editing. To select, press Escape, to go back to editing, press Enter.' ) }
) } From 635f3f3013f62a8868f1d819fe88ebdca7d91ecf Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 27 Nov 2019 12:41:42 +0100 Subject: [PATCH 10/11] Remove the shorcuts from the menu --- packages/block-editor/src/components/tool-selector/index.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/block-editor/src/components/tool-selector/index.js b/packages/block-editor/src/components/tool-selector/index.js index 514f5231a20832..9fc634f6e61042 100644 --- a/packages/block-editor/src/components/tool-selector/index.js +++ b/packages/block-editor/src/components/tool-selector/index.js @@ -51,7 +51,6 @@ function ToolSelector() { { __( 'Edit' ) } ), - shortcut: isNavigationTool ? 'Enter' : undefined, }, { value: 'select', @@ -61,7 +60,6 @@ function ToolSelector() { { __( 'Select' ) } ), - shortcut: isNavigationTool ? undefined : 'Esc', }, ] } /> From 27bee6b728d5a9e253af16c8ab0e8197cb725d96 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 27 Nov 2019 14:51:53 +0100 Subject: [PATCH 11/11] Fix e2e test --- .../e2e-tests/specs/editor/various/reusable-blocks.test.js | 3 +++ 1 file changed, 3 insertions(+) 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 cfcd565254f2e3..a160da7a4e7898 100644 --- a/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js +++ b/packages/e2e-tests/specs/editor/various/reusable-blocks.test.js @@ -118,6 +118,9 @@ describe( 'Reusable Blocks', () => { // Tab three times to navigate to the block's content await page.keyboard.press( 'Tab' ); await page.keyboard.press( 'Tab' ); + + // Quickly focus the paragraph block + await page.keyboard.press( 'Escape' ); // Enter navigation mode await page.keyboard.press( 'Enter' ); // Enter edit mode // Change the block's content