Prevent distracting focused back button on site editor load (#48472)

WordPress · Feb 27, 2023 · 82549ea · 82549ea
1 parent eec1d09
commit 82549ea
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 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
@@ -37,7 +37,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
@@ -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 (
 		<>
 			<NavigatorProvider
 				className="edit-site-sidebar__content"
-				initialPath="/"
+				initialPath={ initialPath.current }
 			>
 				<SidebarScreens />
 			</NavigatorProvider>

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
@@ -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 ] );
 }