@wordpress/edit-site 6.10.0 → 6.12.0

package/src/components/sidebar-navigation-screen-global-styles/index.js

@@ -2,13 +2,11 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { edit, seen } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { useViewportMatch } from '@wordpress/compose';
 import { useCallback } from '@wordpress/element';
-import { store as editorStore } from '@wordpress/editor';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -16,17 +14,15 @@ import { store as preferencesStore } from '@wordpress/preferences';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
-import SidebarButton from '../sidebar-button';
 import SidebarNavigationItem from '../sidebar-navigation-item';
-import StyleBook from '../style-book';
 import useGlobalStylesRevisions from '../global-styles/screen-revisions/use-global-styles-revisions';
 import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
-import SidebarNavigationScreenGlobalStylesContent from './content';
+import { MainSidebarNavigationContent } from '../sidebar-navigation-screen-main';
 
-export function SidebarNavigationItemGlobalStyles( props ) {
-	const { openGeneralSidebar } = useDispatch( editSiteStore );
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+const { useLocation, useHistory } = unlock( routerPrivateApis );
 
+export function SidebarNavigationItemGlobalStyles( props ) {
+	const { params } = useLocation();
 	const hasGlobalStyleVariations = useSelect(
 		( select ) =>
 			!! select(
@@ -40,75 +36,54 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 				{ ...props }
 				params={ { path: '/wp_global_styles' } }
 				uid="global-styles-navigation-item"
+				aria-current={
+					params.path && params.path.startsWith( '/wp_global_styles' )
+				}
 			/>
 		);
 	}
-	return (
-		<SidebarNavigationItem
-			{ ...props }
-			onClick={ () => {
-				// Switch to edit mode.
-				setCanvasMode( 'edit' );
-				// Open global styles sidebar.
-				openGeneralSidebar( 'edit-site/global-styles' );
-			} }
-		/>
-	);
+	return <SidebarNavigationItem { ...props } />;
 }
 
-export default function SidebarNavigationScreenGlobalStyles( { backPath } ) {
+export default function SidebarNavigationScreenGlobalStyles() {
+	const history = useHistory();
+	const { params } = useLocation();
 	const { revisions, isLoading: isLoadingRevisions } =
 		useGlobalStylesRevisions();
 	const { openGeneralSidebar } = useDispatch( editSiteStore );
-	const { setIsListViewOpened } = useDispatch( editorStore );
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const { setCanvasMode, setEditorCanvasContainerView } = unlock(
+	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
-	const { isViewMode, isStyleBookOpened, revisionsCount } = useSelect(
-		( select ) => {
-			const { getCanvasMode, getEditorCanvasContainerView } = unlock(
-				select( editSiteStore )
-			);
-			const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
-				select( coreStore );
-			const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-			const globalStyles = globalStylesId
-				? getEntityRecord( 'root', 'globalStyles', globalStylesId )
-				: undefined;
-			return {
-				isViewMode: 'view' === getCanvasMode(),
-				isStyleBookOpened:
-					'style-book' === getEditorCanvasContainerView(),
-				revisionsCount:
-					globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ??
-					0,
-			};
-		},
-		[]
-	);
+	const { revisionsCount } = useSelect( ( select ) => {
+		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+			select( coreStore );
+		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+		const globalStyles = globalStylesId
+			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+			: undefined;
+		return {
+			revisionsCount:
+				globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0,
+		};
+	}, [] );
 	const { set: setPreference } = useDispatch( preferencesStore );
 
 	const openGlobalStyles = useCallback( async () => {
+		history.push(
+			{
+				...params,
+				canvas: 'edit',
+			},
+			undefined,
+			{
+				transition: 'canvas-mode-edit-transition',
+			}
+		);
 		return Promise.all( [
 			setPreference( 'core', 'distractionFree', false ),
-			setCanvasMode( 'edit' ),
 			openGeneralSidebar( 'edit-site/global-styles' ),
 		] );
-	}, [ setCanvasMode, openGeneralSidebar, setPreference ] );
-
-	const openStyleBook = useCallback( async () => {
-		await openGlobalStyles();
-		// Open the Style Book once the canvas mode is set to edit,
-		// and the global styles sidebar is open. This ensures that
-		// the Style Book is not prematurely closed.
-		setEditorCanvasContainerView( 'style-book' );
-		setIsListViewOpened( false );
-	}, [
-		openGlobalStyles,
-		setEditorCanvasContainerView,
-		setIsListViewOpened,
-	] );
+	}, [ history, params, openGeneralSidebar, setPreference ] );
 
 	const openRevisions = useCallback( async () => {
 		await openGlobalStyles();
@@ -124,16 +99,17 @@ export default function SidebarNavigationScreenGlobalStyles( { backPath } ) {
 	const modifiedDateTime = revisions?.[ 0 ]?.modified;
 	const shouldShowGlobalStylesFooter =
 		hasRevisions && ! isLoadingRevisions && modifiedDateTime;
-
 	return (
 		<>
 			<SidebarNavigationScreen
-				title={ __( 'Styles' ) }
+				title={ __( 'Design' ) }
+				isRoot
 				description={ __(
-					'Choose a different style combination for the theme styles.'
+					'Customize the appearance of your website using the block editor.'
 				) }
-				backPath={ backPath }
-				content={ <SidebarNavigationScreenGlobalStylesContent /> }
+				content={
+					<MainSidebarNavigationContent activeItem="styles-navigation-item" />
+				}
 				footer={
 					shouldShowGlobalStylesFooter && (
 						<SidebarNavigationScreenDetailsFooter
@@ -142,40 +118,7 @@ export default function SidebarNavigationScreenGlobalStyles( { backPath } ) {
 						/>
 					)
 				}
-				actions={
-					<>
-						{ ! isMobileViewport && (
-							<SidebarButton
-								icon={ seen }
-								label={ __( 'Style Book' ) }
-								onClick={ () =>
-									setEditorCanvasContainerView(
-										! isStyleBookOpened
-											? 'style-book'
-											: undefined
-									)
-								}
-								isPressed={ isStyleBookOpened }
-							/>
-						) }
-						<SidebarButton
-							icon={ edit }
-							label={ __( 'Edit styles' ) }
-							onClick={ async () => await openGlobalStyles() }
-						/>
-					</>
-				}
 			/>
-			{ isStyleBookOpened && ! isMobileViewport && isViewMode && (
-				<StyleBook
-					enableResizing={ false }
-					isSelected={ () => false }
-					onClick={ openStyleBook }
-					onSelect={ openStyleBook }
-					showCloseButton={ false }
-					showTabs={ false }
-				/>
-			) }
 		</>
 	);
 }

package/src/components/sidebar-navigation-screen-main/index.js

@@ -21,6 +21,51 @@ import {
 	PATTERN_TYPES,
 } from '../../utils/constants';
 
+export function MainSidebarNavigationContent() {
+	return (
+		<ItemGroup>
+			<SidebarNavigationItem
+				uid="navigation-navigation-item"
+				params={ { postType: NAVIGATION_POST_TYPE } }
+				withChevron
+				icon={ navigation }
+			>
+				{ __( 'Navigation' ) }
+			</SidebarNavigationItem>
+			<SidebarNavigationItemGlobalStyles
+				uid="styles-navigation-item"
+				icon={ styles }
+			>
+				{ __( 'Styles' ) }
+			</SidebarNavigationItemGlobalStyles>
+			<SidebarNavigationItem
+				uid="page-navigation-item"
+				params={ { postType: 'page' } }
+				withChevron
+				icon={ page }
+			>
+				{ __( 'Pages' ) }
+			</SidebarNavigationItem>
+			<SidebarNavigationItem
+				uid="template-navigation-item"
+				params={ { postType: TEMPLATE_POST_TYPE } }
+				withChevron
+				icon={ layout }
+			>
+				{ __( 'Templates' ) }
+			</SidebarNavigationItem>
+			<SidebarNavigationItem
+				uid="patterns-navigation-item"
+				params={ { postType: PATTERN_TYPES.user } }
+				withChevron
+				icon={ symbol }
+			>
+				{ __( 'Patterns' ) }
+			</SidebarNavigationItem>
+		</ItemGroup>
+	);
+}
+
 export default function SidebarNavigationScreenMain() {
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
@@ -38,51 +83,7 @@ export default function SidebarNavigationScreenMain() {
 			description={ __(
 				'Customize the appearance of your website using the block editor.'
 			) }
-			content={
-				<>
-					<ItemGroup>
-						<SidebarNavigationItem
-							uid="navigation-navigation-item"
-							params={ { postType: NAVIGATION_POST_TYPE } }
-							withChevron
-							icon={ navigation }
-						>
-							{ __( 'Navigation' ) }
-						</SidebarNavigationItem>
-						<SidebarNavigationItemGlobalStyles
-							uid="styles-navigation-item"
-							withChevron
-							icon={ styles }
-						>
-							{ __( 'Styles' ) }
-						</SidebarNavigationItemGlobalStyles>
-						<SidebarNavigationItem
-							uid="page-navigation-item"
-							params={ { postType: 'page' } }
-							withChevron
-							icon={ page }
-						>
-							{ __( 'Pages' ) }
-						</SidebarNavigationItem>
-						<SidebarNavigationItem
-							uid="template-navigation-item"
-							params={ { postType: TEMPLATE_POST_TYPE } }
-							withChevron
-							icon={ layout }
-						>
-							{ __( 'Templates' ) }
-						</SidebarNavigationItem>
-						<SidebarNavigationItem
-							uid="patterns-navigation-item"
-							params={ { postType: PATTERN_TYPES.user } }
-							withChevron
-							icon={ symbol }
-						>
-							{ __( 'Patterns' ) }
-						</SidebarNavigationItem>
-					</ItemGroup>
-				</>
-			}
+			content={ <MainSidebarNavigationContent /> }
 		/>
 	);
 }

package/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { store as coreStore } from '@wordpress/core-data';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
@@ -150,7 +150,7 @@ function useDuplicateNavigationMenu() {
 				{
 					title: sprintf(
 						/* translators: %s: Navigation menu title */
-						__( '%s (Copy)' ),
+						_x( '%s (Copy)', 'navigation menu' ),
 						menuTitle
 					),
 					content: navigationMenu?.content?.raw,

package/src/components/sidebar-navigation-screen-navigation-menus/build-navigation-label.js

@@ -1,13 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 
 // Copied from packages/block-library/src/navigation/edit/navigation-menu-selector.js.
 export default function buildNavigationLabel( title, id, status ) {
 	if ( ! title?.rendered ) {
-		/* translators: %s is the index of the menu in the list of menus. */
+		/* translators: %s: the index of the menu in the list of menus. */
 		return sprintf( __( '(no title %s)' ), id );
 	}
 
@@ -16,8 +16,8 @@ export default function buildNavigationLabel( title, id, status ) {
 	}
 
 	return sprintf(
-		// translators: %1s: title of the menu; %2s: status of the menu (draft, pending, etc.).
-		__( '%1$s (%2$s)' ),
+		// translators: 1: title of the menu. 2: status of the menu (draft, pending, etc.).
+		_x( '%1$s (%2$s)', 'menu label' ),
 		decodeEntities( title?.rendered ),
 		status
 	);

package/src/components/sidebar-navigation-screen-navigation-menus/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 
@@ -27,7 +27,7 @@ import { NAVIGATION_POST_TYPE } from '../../utils/constants';
 // Copied from packages/block-library/src/navigation/edit/navigation-menu-selector.js.
 function buildMenuLabel( title, id, status ) {
 	if ( ! title ) {
-		/* translators: %s is the index of the menu in the list of menus. */
+		/* translators: %s: the index of the menu in the list of menus. */
 		return sprintf( __( '(no title %s)' ), id );
 	}
 
@@ -36,16 +36,13 @@ function buildMenuLabel( title, id, status ) {
 	}
 
 	return sprintf(
-		// translators: %1s: title of the menu; %2s: status of the menu (draft, pending, etc.).
-		__( '%1$s (%2$s)' ),
+		// translators: 1: title of the menu. 2: status of the menu (draft, pending, etc.).
+		_x( '%1$s (%2$s)', 'menu label' ),
 		decodeEntities( title ),
 		status
 	);
 }
 
-// Save a boolean to prevent us creating a fallback more than once per session.
-let hasCreatedFallback = false;
-
 export default function SidebarNavigationScreenNavigationMenus( { backPath } ) {
 	const {
 		records: navigationMenus,
@@ -61,21 +58,22 @@ export default function SidebarNavigationScreenNavigationMenus( { backPath } ) {
 		isResolvingNavigationMenus && ! hasResolvedNavigationMenus;
 
 	const { getNavigationFallbackId } = unlock( useSelect( coreStore ) );
+	const isCreatingNavigationFallback = useSelect(
+		( select ) =>
+			select( coreStore ).isResolving( 'getNavigationFallbackId' ),
+		[]
+	);
 
 	const firstNavigationMenu = navigationMenus?.[ 0 ];
 
-	// Save a boolean to prevent us creating a fallback more than once per session.
-	if ( firstNavigationMenu ) {
-		hasCreatedFallback = true;
-	}
-
 	// If there is no navigation menu found
 	// then trigger fallback algorithm to create one.
 	if (
 		! firstNavigationMenu &&
 		! isResolvingNavigationMenus &&
 		hasResolvedNavigationMenus &&
-		! hasCreatedFallback
+		// Ensure a fallback navigation is created only once
+		! isCreatingNavigationFallback
 	) {
 		getNavigationFallbackId();
 	}

package/src/components/sidebar-navigation-screen-navigation-menus/style.scss

@@ -19,7 +19,7 @@
 		padding-right: 0;
 	}
 
-	.components-button {
+	.block-editor-list-view-block-select-button {
 		color: $gray-600;
 		&:hover,
 		&:focus,

package/src/components/site-editor-routes/README.md

@@ -0,0 +1,20 @@
+# Site Editor Routes
+
+## Areas
+
+When `canvasMode` is not `edit`, the areas avaliable to use are:
+
+| Area | Non-mobile viewport | Mobile viewport |
+| --- | --- | --- |
+| `sidebar` | Always rendered. | Only if `mobile` is not provided. |
+| `content` | Rendered if provided. | Not rendered. |
+| `preview` | Rendered if provided. | Not rendered. |
+| `edit` | Rendered if provided. | Not rendered. |
+| `mobile` | Not rendered | Rendered as full-screen, if provided. |
+
+When `canvasMode` is `edit`, the areas avaliable to use are:
+
+| Area | Non-mobile viewport | Mobile viewport |
+| --- | --- | --- |
+| `preview` | Rendered as full-screen, if provided. Otherwise, it'll display an empty blank sidebar. | Not rendered. |
+| `mobile` | Not rendered | Rendered as full-screen, if provided. Otherwise, it'll display an empty blank sidebar. |

package/src/components/site-editor-routes/home-edit.js

@@ -0,0 +1,17 @@
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
+
+export const homeEditRoute = {
+	name: 'home-edit',
+	match: ( params ) => {
+		return params.canvas === 'edit';
+	},
+	areas: {
+		sidebar: <SidebarNavigationScreenMain />,
+		preview: <Editor />,
+		mobile: <Editor />,
+	},
+};

package/src/components/site-editor-routes/home-view.js

@@ -0,0 +1,16 @@
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
+
+export const homeViewRoute = {
+	name: 'home-view',
+	match: ( params ) => {
+		return params.canvas !== 'edit';
+	},
+	areas: {
+		sidebar: <SidebarNavigationScreenMain />,
+		preview: <Editor />,
+	},
+};

package/src/components/site-editor-routes/index.js

@@ -0,0 +1,60 @@
+/**
+ * WordPress dependencies
+ */
+import { useRegistry, useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as siteEditorStore } from '../../store';
+import { homeViewRoute } from './home-view';
+import { homeEditRoute } from './home-edit';
+import { navigationViewRoute } from './navigation-view';
+import { navigationEditRoute } from './navigation-edit';
+import { navigationItemEditRoute } from './navigation-item-edit';
+import { navigationItemViewRoute } from './navigation-item-view';
+import { stylesEditRoute } from './styles-edit';
+import { stylesViewRoute } from './styles-view';
+import { patternsEditRoute } from './patterns-edit';
+import { patternsViewRoute } from './patterns-view';
+import { templatesEditRoute } from './templates-edit';
+import { templatesListViewRoute } from './templates-list-view';
+import { templatesViewRoute } from './templates-view';
+import { pagesViewRoute } from './pages-view';
+import { pagesEditRoute } from './pages-edit';
+import { pagesListViewRoute } from './pages-list-view';
+import { pagesListViewQuickEditRoute } from './pages-list-view-quick-edit';
+import { pagesViewQuickEditRoute } from './pages-view-quick-edit';
+
+const routes = [
+	pagesListViewQuickEditRoute,
+	pagesListViewRoute,
+	pagesViewQuickEditRoute,
+	pagesViewRoute,
+	pagesEditRoute,
+	templatesEditRoute,
+	templatesListViewRoute,
+	templatesViewRoute,
+	patternsViewRoute,
+	patternsEditRoute,
+	stylesViewRoute,
+	stylesEditRoute,
+	navigationItemViewRoute,
+	navigationItemEditRoute,
+	navigationViewRoute,
+	navigationEditRoute,
+	homeViewRoute,
+	homeEditRoute,
+];
+
+export function useRegisterSiteEditorRoutes() {
+	const registry = useRegistry();
+	const { registerRoute } = unlock( useDispatch( siteEditorStore ) );
+	useEffect( () => {
+		registry.batch( () => {
+			routes.forEach( registerRoute );
+		} );
+	}, [ registry, registerRoute ] );
+}

package/src/components/site-editor-routes/navigation-edit.js

@@ -0,0 +1,22 @@
+/**
+ * Internal dependencies
+ */
+import { NAVIGATION_POST_TYPE } from '../../utils/constants';
+import Editor from '../editor';
+import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';
+
+export const navigationEditRoute = {
+	name: 'navigation-edit',
+	match: ( params ) => {
+		return (
+			params.postType === NAVIGATION_POST_TYPE &&
+			! params.postId &&
+			params.canvas === 'edit'
+		);
+	},
+	areas: {
+		sidebar: <SidebarNavigationScreenNavigationMenus backPath={ {} } />,
+		preview: <Editor />,
+		mobile: <Editor />,
+	},
+};

package/src/components/site-editor-routes/navigation-item-edit.js

@@ -0,0 +1,26 @@
+/**
+ * Internal dependencies
+ */
+import { NAVIGATION_POST_TYPE } from '../../utils/constants';
+import Editor from '../editor';
+import SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-navigation-menu';
+
+export const navigationItemEditRoute = {
+	name: 'navigation-item-edit',
+	match: ( params ) => {
+		return (
+			params.postType === NAVIGATION_POST_TYPE &&
+			!! params.postId &&
+			params.canvas === 'edit'
+		);
+	},
+	areas: {
+		sidebar: (
+			<SidebarNavigationScreenNavigationMenu
+				backPath={ { postType: NAVIGATION_POST_TYPE } }
+			/>
+		),
+		preview: <Editor />,
+		mobile: <Editor />,
+	},
+};

package/src/components/site-editor-routes/navigation-item-view.js

@@ -0,0 +1,25 @@
+/**
+ * Internal dependencies
+ */
+import { NAVIGATION_POST_TYPE } from '../../utils/constants';
+import Editor from '../editor';
+import SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-navigation-menu';
+
+export const navigationItemViewRoute = {
+	name: 'navigation-item-view',
+	match: ( params ) => {
+		return (
+			params.postType === NAVIGATION_POST_TYPE &&
+			!! params.postId &&
+			params.canvas !== 'edit'
+		);
+	},
+	areas: {
+		sidebar: (
+			<SidebarNavigationScreenNavigationMenu
+				backPath={ { postType: NAVIGATION_POST_TYPE } }
+			/>
+		),
+		preview: <Editor />,
+	},
+};

package/src/components/site-editor-routes/navigation-view.js

@@ -0,0 +1,21 @@
+/**
+ * Internal dependencies
+ */
+import { NAVIGATION_POST_TYPE } from '../../utils/constants';
+import Editor from '../editor';
+import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';
+
+export const navigationViewRoute = {
+	name: 'navigation-view',
+	match: ( params ) => {
+		return (
+			params.postType === NAVIGATION_POST_TYPE &&
+			! params.postId &&
+			params.canvas !== 'edit'
+		);
+	},
+	areas: {
+		sidebar: <SidebarNavigationScreenNavigationMenus backPath={ {} } />,
+		preview: <Editor />,
+	},
+};