From 58421c4922839bad5c7e580106f0ee9e9116bc6b Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 14 Dec 2022 09:55:28 +0100 Subject: [PATCH 1/4] Fix region navigation in the site editor --- .../edit-site/src/components/editor/index.js | 17 +----- .../edit-site/src/components/layout/index.js | 59 +++++++++++++------ .../components/interface-skeleton/index.js | 8 ++- 3 files changed, 48 insertions(+), 36 deletions(-) diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 2f2f6264f2e8d8..fe733f49a19590 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -22,7 +22,6 @@ import { EntitiesSavedStates, } from '@wordpress/editor'; import { __ } from '@wordpress/i18n'; -import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; /** * Internal dependencies @@ -64,8 +63,6 @@ export default function Editor() { isInserterOpen, isListViewOpen, isSaveViewOpen, - previousShortcut, - nextShortcut, showIconLabels, } = useSelect( ( select ) => { const { @@ -80,9 +77,6 @@ export default function Editor() { } = select( editSiteStore ); const { hasFinishedResolution, getEntityRecord } = select( coreStore ); const { __unstableGetEditorMode } = select( blockEditorStore ); - const { getAllShortcutKeyCombinations } = select( - keyboardShortcutsStore - ); const { getActiveComplementaryArea } = select( interfaceStore ); const postType = getEditedPostType(); const postId = getEditedPostId(); @@ -112,12 +106,6 @@ export default function Editor() { isRightSidebarOpen: getActiveComplementaryArea( editSiteStore.name ), - previousShortcut: getAllShortcutKeyCombinations( - 'core/edit-site/previous-region' - ), - nextShortcut: getAllShortcutKeyCombinations( - 'core/edit-site/next-region' - ), showIconLabels: select( preferencesStore ).get( 'core/edit-site', 'showIconLabels' @@ -178,6 +166,7 @@ export default function Editor() { ) } - shortcuts={ { - previous: previousShortcut, - next: nextShortcut, - } } labels={ { ...interfaceLabels, secondarySidebar: secondarySidebarLabel, diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index 150f2d9cce882d..e3d2edc217eefd 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -12,6 +12,7 @@ import { __experimentalHStack as HStack, __unstableMotion as motion, __unstableAnimatePresence as AnimatePresence, + __unstableUseNavigateRegions as useNavigateRegions, } from '@wordpress/components'; import { useReducedMotion, @@ -22,6 +23,7 @@ import { __ } from '@wordpress/i18n'; import { store as blockEditorStore } from '@wordpress/block-editor'; import { useState, useEffect } from '@wordpress/element'; import { NavigableRegion } from '@wordpress/interface'; +import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; /** * Internal dependencies @@ -47,15 +49,28 @@ export default function Layout( { onError } ) { const { params } = useLocation(); const isListPage = getIsListPage( params ); const isEditorPage = ! isListPage; - const { canvasMode, dashboardLink } = useSelect( - ( select ) => ( { - canvasMode: select( editSiteStore ).__unstableGetCanvasMode(), - dashboardLink: - select( editSiteStore ).getSettings() - .__experimentalDashboardLink, - } ), - [] - ); + const { canvasMode, dashboardLink, previousShortcut, nextShortcut } = + useSelect( ( select ) => { + const { getAllShortcutKeyCombinations } = select( + keyboardShortcutsStore + ); + const { __unstableGetCanvasMode, getSettings } = + select( editSiteStore ); + return { + canvasMode: __unstableGetCanvasMode(), + dashboardLink: getSettings().__experimentalDashboardLink, + previousShortcut: getAllShortcutKeyCombinations( + 'core/edit-site/previous-region' + ), + nextShortcut: getAllShortcutKeyCombinations( + 'core/edit-site/next-region' + ), + }; + }, [] ); + const navigateRegionsProps = useNavigateRegions( { + previous: previousShortcut, + next: nextShortcut, + } ); const { __unstableSetCanvasMode } = useDispatch( editSiteStore ); const { clearSelectedBlock } = useDispatch( blockEditorStore ); const disableMotion = useReducedMotion(); @@ -108,13 +123,19 @@ export default function Layout( { onError } ) { <> { fullResizer }
@@ -196,7 +217,8 @@ export default function Layout( { onError } ) { { showSidebar && ( - - + ) } diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js index e8a7a45ede3fa4..fe329a75d43e07 100644 --- a/packages/interface/src/components/interface-skeleton/index.js +++ b/packages/interface/src/components/interface-skeleton/index.js @@ -46,6 +46,7 @@ function InterfaceSkeleton( actions, labels, className, + enableRegionNavigation = true, // Todo: does this need to be a prop. // Can we use a dependency to keyboard-shortcuts directly? shortcuts, @@ -83,8 +84,11 @@ function InterfaceSkeleton( return (
Date: Thu, 15 Dec 2022 09:40:00 +0100 Subject: [PATCH 2/4] Remove region stacker div --- packages/base-styles/_z-index.scss | 2 -- .../higher-order/navigate-regions/style.scss | 22 +++++++++---------- .../edit-site/src/components/list/style.scss | 9 +------- .../components/interface-skeleton/style.scss | 14 ------------ .../src/components/navigable-region/index.js | 4 +--- 5 files changed, 13 insertions(+), 38 deletions(-) diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index ec3be48f1b9752..0a0bda32a054fa 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -177,8 +177,6 @@ $z-layers: ( // Appear under the topbar. ".customize-widgets__block-toolbar": 7, - - ".is-focusing-regions [role='region']:focus .interface-navigable-region__stacker": -1, ); @function z-index( $key ) { diff --git a/packages/components/src/higher-order/navigate-regions/style.scss b/packages/components/src/higher-order/navigate-regions/style.scss index 807dd0e5dcae5f..25495f4a8bd73f 100644 --- a/packages/components/src/higher-order/navigate-regions/style.scss +++ b/packages/components/src/higher-order/navigate-regions/style.scss @@ -8,9 +8,17 @@ outline: 4px solid $components-color-accent; outline-offset: -4px; - .interface-navigable-region__stacker { - position: relative; - z-index: z-index(".is-focusing-regions [role='region']:focus .interface-navigable-region__stacker"); + &::after { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + content: ""; + pointer-events: none; + outline: 4px solid $components-color-accent; + outline-offset: -4px; + z-index: 9999999; } } @@ -26,7 +34,6 @@ // Header top bar when Distraction free mode is on. &.is-distraction-free .interface-interface-skeleton__header { - .interface-navigable-region__stacker, .edit-post-header { outline: inherit; outline-offset: inherit; @@ -35,7 +42,6 @@ // Sidebar toggle button shown when navigating regions. .interface-interface-skeleton__sidebar { - .interface-navigable-region__stacker, .edit-post-layout__toggle-sidebar-panel { outline: inherit; outline-offset: inherit; @@ -44,7 +50,6 @@ // Publish sidebar toggle button shown when navigating regions. .interface-interface-skeleton__actions { - .interface-navigable-region__stacker, .edit-post-layout__toggle-publish-panel { outline: inherit; outline-offset: inherit; @@ -57,8 +62,3 @@ outline-offset: -4px; } } - -.interface-navigable-region__stacker { - height: 100%; - width: 100%; -} diff --git a/packages/edit-site/src/components/list/style.scss b/packages/edit-site/src/components/list/style.scss index b8c8f2be27db1a..c3359b752fc053 100644 --- a/packages/edit-site/src/components/list/style.scss +++ b/packages/edit-site/src/components/list/style.scss @@ -44,18 +44,11 @@ .interface-interface-skeleton__content { background: $white; padding: $grid-unit-20; - - .interface-navigable-region__stacker { - align-items: center; - } + align-items: center; @include break-medium() { padding: $grid-unit * 9; } - - & > .interface-navigable-region__stacker { - height: auto; - } } } } diff --git a/packages/interface/src/components/interface-skeleton/style.scss b/packages/interface/src/components/interface-skeleton/style.scss index 51374fd2b56870..05752e9ff32164 100644 --- a/packages/interface/src/components/interface-skeleton/style.scss +++ b/packages/interface/src/components/interface-skeleton/style.scss @@ -72,16 +72,6 @@ html.interface-interface-skeleton__html-container { } .interface-interface-skeleton__content { - .interface-navigable-region__stacker { - // It's a flex item within a flex container with flex-direction column. - // Make sure it takes all the available height. - flex-grow: 1; - // Allow its flex items (the visual editor area) to take all the available - // height by making it also a flex container. - display: flex; - flex-direction: column; - } - flex-grow: 1; // Treat as flex container to allow children to grow to occupy full @@ -135,10 +125,6 @@ html.interface-interface-skeleton__html-container { } .interface-interface-skeleton__secondary-sidebar { - .interface-navigable-region__stacker { - height: 100%; - } - @include break-medium() { border-right: $border-width solid $gray-200; } diff --git a/packages/interface/src/components/navigable-region/index.js b/packages/interface/src/components/navigable-region/index.js index 31037ffd333546..23ff532f22fd35 100644 --- a/packages/interface/src/components/navigable-region/index.js +++ b/packages/interface/src/components/navigable-region/index.js @@ -18,9 +18,7 @@ export default function NavigableRegion( { tabIndex="-1" { ...props } > -
- { children } -
+ { children } ); } From ac2274eec786955b8f022546f7e27805fd1cb2b0 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 15 Dec 2022 11:12:44 +0100 Subject: [PATCH 3/4] Style simplifications --- packages/base-styles/_z-index.scss | 3 ++ .../higher-order/navigate-regions/style.scss | 52 +++++-------------- 2 files changed, 16 insertions(+), 39 deletions(-) diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 0a0bda32a054fa..0015d03d18c71f 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -142,6 +142,9 @@ $z-layers: ( ".skip-to-selected-block": 100000, ".interface-interface-skeleton__actions": 100000, + // The focus styles of the region navigation containers should be above their content. + ".is-focusing-regions {region} :focus::after": 1000000 + // Show NUX tips above popovers, wp-admin menus, submenus, and sidebar: ".nux-dot-tip": 1000001, diff --git a/packages/components/src/higher-order/navigate-regions/style.scss b/packages/components/src/higher-order/navigate-regions/style.scss index 25495f4a8bd73f..6e66c854dd70ee 100644 --- a/packages/components/src/higher-order/navigate-regions/style.scss +++ b/packages/components/src/higher-order/navigate-regions/style.scss @@ -4,22 +4,17 @@ } .is-focusing-regions { - [role="region"]:focus { + [role="region"]:focus::after { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + content: ""; + pointer-events: none; outline: 4px solid $components-color-accent; outline-offset: -4px; - - &::after { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - content: ""; - pointer-events: none; - outline: 4px solid $components-color-accent; - outline-offset: -4px; - z-index: 9999999; - } + z-index: z-index(".is-focusing-regions {region} :focus::after"); } // Fixes for edge cases. @@ -33,31 +28,10 @@ // regardles of the CSS used on other components. // Header top bar when Distraction free mode is on. - &.is-distraction-free .interface-interface-skeleton__header { - .edit-post-header { - outline: inherit; - outline-offset: inherit; - } - } - - // Sidebar toggle button shown when navigating regions. - .interface-interface-skeleton__sidebar { - .edit-post-layout__toggle-sidebar-panel { - outline: inherit; - outline-offset: inherit; - } - } - - // Publish sidebar toggle button shown when navigating regions. - .interface-interface-skeleton__actions { - .edit-post-layout__toggle-publish-panel { - outline: inherit; - outline-offset: inherit; - } - } - - // Publish sidebar. - [role="region"].interface-interface-skeleton__actions:focus .editor-post-publish-panel { + &.is-distraction-free .interface-interface-skeleton__header .edit-post-header, + .interface-interface-skeleton__sidebar .edit-post-layout__toggle-sidebar-panel, + .interface-interface-skeleton__actions .edit-post-layout__toggle-publish-panel, + .editor-post-publish-panel { outline: 4px solid $components-color-accent; outline-offset: -4px; } From 17626a8fdbc90dbd3842fca1d4cd06939949c0d2 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 15 Dec 2022 12:12:46 +0100 Subject: [PATCH 4/4] Fix z-index file --- packages/base-styles/_z-index.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 0015d03d18c71f..62a1ab3b19d8f0 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -143,7 +143,7 @@ $z-layers: ( ".interface-interface-skeleton__actions": 100000, // The focus styles of the region navigation containers should be above their content. - ".is-focusing-regions {region} :focus::after": 1000000 + ".is-focusing-regions {region} :focus::after": 1000000, // Show NUX tips above popovers, wp-admin menus, submenus, and sidebar: ".nux-dot-tip": 1000001,