diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index bc6906a769af48..e1138267ae2da0 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -20,7 +20,8 @@ import { __ } from '@wordpress/i18n';
import { store as preferencesStore } from '@wordpress/preferences';
import { moreVertical } from '@wordpress/icons';
import { store as coreStore } from '@wordpress/core-data';
-import { useEffect } from '@wordpress/element';
+import { useEffect, Fragment } from '@wordpress/element';
+import { usePrevious } from '@wordpress/compose';
/**
* Internal dependencies
@@ -276,120 +277,158 @@ function GlobalStylesEditorCanvasContainerLink() {
}, [ editorCanvasContainerView, isRevisionsOpen, goTo ] );
}
-function GlobalStylesUI() {
+function NavigationSync( { path: parentPath, onPathChange, children } ) {
+ const navigator = useNavigator();
+ const { path: childPath } = navigator.location;
+ const previousParentPath = usePrevious( parentPath );
+ const previousChildPath = usePrevious( childPath );
+ useEffect( () => {
+ console.log({
+ parentPath,
+ previousChildPath,
+ previousParentPath,
+ childPath,
+ });
+ if ( parentPath !== childPath ) {
+ if ( parentPath !== previousParentPath ) {
+ navigator.goTo( parentPath );
+ } else if (
+ childPath !== previousChildPath &&
+ parentPath !== childPath
+ ) {
+ onPathChange( childPath );
+ }
+ }
+ }, [
+ onPathChange,
+ parentPath,
+ previousChildPath,
+ previousParentPath,
+ childPath,
+ navigator,
+ ] );
+ return children;
+}
+
+function GlobalStylesUI( { path, onPathChange } ) {
const blocks = getBlockTypes();
const editorCanvasContainerView = useSelect(
( select ) =>
unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
[]
);
+ const WrapperComponent = path && onPathChange ? NavigationSync : Fragment;
return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
- { blocks.map( ( block ) => (
-
-
+
+
- ) ) }
-
+
+
+
- { blocks.map( ( block ) => (
-
- ) ) }
+
+
+
- { 'style-book' === editorCanvasContainerView && (
-
- ) }
+ { blocks.map( ( block ) => (
+
+
+
+ ) ) }
+
+
+
+ { blocks.map( ( block ) => (
+
+ ) ) }
+
+ { 'style-book' === editorCanvasContainerView && (
+
+ ) }
-
-
-
+
+
+
+
);
}
diff --git a/packages/edit-site/src/components/layout/router.js b/packages/edit-site/src/components/layout/router.js
index d485b9b8e410f4..ae703be4f41113 100644
--- a/packages/edit-site/src/components/layout/router.js
+++ b/packages/edit-site/src/components/layout/router.js
@@ -3,7 +3,7 @@
*/
import { privateApis as routerPrivateApis } from '@wordpress/router';
import { __ } from '@wordpress/i18n';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useMemo } from '@wordpress/element';
/**
* Internal dependencies
*/
@@ -75,6 +75,31 @@ function useRedirectOldPaths() {
}, [ history, params ] );
}
+const GLOBAL_STYLES_PATH_PREFIX = '/wp_global_styles';
+
+function GlobalStylesUIWrapper() {
+ const { params } = useLocation();
+ const history = useHistory();
+ const pathWithPrefix = params.path;
+ const [ path, onPathChange ] = useMemo( () => {
+ const processedPath = pathWithPrefix.substring(
+ GLOBAL_STYLES_PATH_PREFIX.length
+ );
+ return [
+ processedPath ? processedPath : '/',
+ ( newPath ) => {
+ history.push( {
+ path:
+ ! newPath || newPath === '/'
+ ? GLOBAL_STYLES_PATH_PREFIX
+ : `${ GLOBAL_STYLES_PATH_PREFIX }${ newPath }`,
+ } );
+ },
+ ];
+ }, [ pathWithPrefix, history ] );
+ return ;
+}
+
export default function useLayoutAreas() {
const { params } = useLocation();
const { postType, postId, path, layout, isCustom, canvas, quickEdit } =
@@ -150,7 +175,7 @@ export default function useLayoutAreas() {
}
// Styles
- if ( path === '/wp_global_styles' ) {
+ if ( path && path.startsWith( '/wp_global_styles' ) ) {
return {
key: 'styles',
areas: {
@@ -159,7 +184,7 @@ export default function useLayoutAreas() {
),
content: (
-
+
),
preview: ,
@@ -167,7 +192,7 @@ export default function useLayoutAreas() {
) : (
-
+
),
},
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
index aad6991a23b0ed..d15d76c2b3140a 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
@@ -1,6 +1,7 @@
/**
* WordPress dependencies
*/
+import { privateApis as routerPrivateApis } from '@wordpress/router';
import { __ } from '@wordpress/i18n';
import { useSelect, useDispatch } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
@@ -22,6 +23,8 @@ import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-d
import { MainSidebarNavigationContent } from '../sidebar-navigation-screen-main';
import SidebarButton from '../sidebar-button';
+const { useHistory } = unlock( routerPrivateApis );
+
export function SidebarNavigationItemGlobalStyles( props ) {
const { openGeneralSidebar } = useDispatch( editSiteStore );
const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
@@ -56,6 +59,7 @@ export function SidebarNavigationItemGlobalStyles( props ) {
}
export default function SidebarNavigationScreenGlobalStyles( { backPath } ) {
+ const history = useHistory();
const { revisions, isLoading: isLoadingRevisions } =
useGlobalStylesRevisions();
const { openGeneralSidebar } = useDispatch( editSiteStore );
@@ -148,6 +152,13 @@ export default function SidebarNavigationScreenGlobalStyles( { backPath } ) {
isSelected={ () => false }
showCloseButton={ false }
showTabs={ false }
+ onSelect={ ( blockName ) => {
+ history.push( {
+ path: `/wp_global_styles/blocks/${ encodeURIComponent(
+ blockName
+ ) }`,
+ } );
+ } }
/>
) }