From 0c107ac34cede9de1ede5e22e613f7a561567f88 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 27 Feb 2023 09:46:11 +0100 Subject: [PATCH] Prevent distracting focused back button on site editor load --- .../sidebar-navigation-screen/style.scss | 11 ++++ .../edit-site/src/components/sidebar/index.js | 12 +++- .../use-sync-path-with-url.js | 60 +++++++++---------- 3 files changed, 50 insertions(+), 33 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss index e454d4fa4f1b87..80a51986b4c836 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss @@ -32,7 +32,18 @@ .edit-site-sidebar-navigation-screen__back { color: $gray-200; + // Focus (resets default button focus and use focus-visible). + &:focus:not(:disabled) { + box-shadow: none; + outline: none; + } + &:focus-visible:not(:disabled) { + box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba)); + outline: 3px solid transparent; + } + &:hover, + &:focus-visible, &:focus, &:not([aria-disabled="true"]):active { color: $white; diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js index ddc17eab191c12..f1ba156529c546 100644 --- a/packages/edit-site/src/components/sidebar/index.js +++ b/packages/edit-site/src/components/sidebar/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { memo } from '@wordpress/element'; +import { memo, useRef } from '@wordpress/element'; import { __experimentalNavigatorProvider as NavigatorProvider, __experimentalNavigatorScreen as NavigatorScreen, @@ -13,11 +13,14 @@ import { import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main'; import SidebarNavigationScreenTemplates from '../sidebar-navigation-screen-templates'; import SidebarNavigationScreenTemplate from '../sidebar-navigation-screen-template'; -import useSyncPathWithURL from '../sync-state-with-url/use-sync-path-with-url'; +import useSyncPathWithURL, { + getPathFromURL, +} from '../sync-state-with-url/use-sync-path-with-url'; import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus'; import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse'; import SaveButton from '../save-button'; import SidebarNavigationScreenNavigationItem from '../sidebar-navigation-screen-navigation-item'; +import { useLocation } from '../routes'; function SidebarScreens() { useSyncPathWithURL(); @@ -47,11 +50,14 @@ function SidebarScreens() { } function Sidebar() { + const { params: urlParams } = useLocation(); + const initialPath = useRef( getPathFromURL( urlParams ) ); + return ( <> diff --git a/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js b/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js index 236eb05bb7bc6a..cafdede133db8f 100644 --- a/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js +++ b/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js @@ -9,6 +9,34 @@ import { useEffect, useRef } from '@wordpress/element'; */ import { useLocation, useHistory } from '../routes'; +export function getPathFromURL( urlParams ) { + let path = urlParams?.path ?? '/'; + + // Compute the navigator path based on the URL params. + if ( + urlParams?.postType && + urlParams?.postId && + // This is just a special case to support old WP versions that perform redirects. + // This code should be removed when we minimum WP version becomes 6.2. + urlParams?.postId !== 'none' + ) { + switch ( urlParams.postType ) { + case 'wp_template': + case 'wp_template_part': + path = `/${ encodeURIComponent( + urlParams.postType + ) }/${ encodeURIComponent( urlParams.postId ) }`; + break; + default: + path = `/navigation/${ encodeURIComponent( + urlParams.postType + ) }/${ encodeURIComponent( urlParams.postId ) }`; + } + } + + return path; +} + export default function useSyncPathWithURL() { const history = useHistory(); const { params: urlParams } = useLocation(); @@ -18,13 +46,9 @@ export default function useSyncPathWithURL() { goTo, } = useNavigator(); const currentUrlParams = useRef( urlParams ); - const currentPath = useRef(); + const currentPath = useRef( navigatorLocation.path ); useEffect( () => { - // Don't trust the navigator path on initial render. - if ( currentPath.current === null ) { - return; - } function updateUrlParams( newUrlParams ) { if ( Object.entries( newUrlParams ).every( ( [ key, value ] ) => { @@ -64,34 +88,10 @@ export default function useSyncPathWithURL() { useEffect( () => { currentUrlParams.current = urlParams; - let path = urlParams?.path ?? '/'; - - // Compute the navigator path based on the URL params. - if ( - urlParams?.postType && - urlParams?.postId && - // This is just a special case to support old WP versions that perform redirects. - // This code should be removed when we minimum WP version becomes 6.2. - urlParams?.postId !== 'none' - ) { - switch ( urlParams.postType ) { - case 'wp_template': - case 'wp_template_part': - path = `/${ encodeURIComponent( - urlParams.postType - ) }/${ encodeURIComponent( urlParams.postId ) }`; - break; - default: - path = `/navigation/${ encodeURIComponent( - urlParams.postType - ) }/${ encodeURIComponent( urlParams.postId ) }`; - } - } - + const path = getPathFromURL( urlParams ); if ( currentPath.current !== path ) { currentPath.current = path; goTo( path ); } - goTo( path ); }, [ urlParams, goTo ] ); }