@wordpress/edit-site 6.10.0 → 6.11.0

package/src/components/save-panel/index.js

@@ -15,6 +15,8 @@ import {
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -27,6 +29,7 @@ import { isPreviewingTheme } from '../../utils/is-previewing-theme';
 
 const { EntitiesSavedStatesExtensible, NavigableRegion } =
 	unlock( privateApis );
+const { useLocation } = unlock( routerPrivateApis );
 
 const EntitiesSavedStatesForPreview = ( { onClose } ) => {
 	const isDirtyProps = useEntitiesSavedStatesIsDirty();
@@ -47,7 +50,7 @@ const EntitiesSavedStatesForPreview = ( { onClose } ) => {
 	const additionalPrompt = (
 		<p>
 			{ sprintf(
-				/* translators: %1$s: The name of active theme, %2$s: The name of theme to be activated. */
+				/* translators: 1: The name of active theme, 2: The name of theme to be activated. */
 				__(
 					'Saving your changes will change your active theme from %1$s to %2$s.'
 				),
@@ -87,41 +90,36 @@ const _EntitiesSavedStates = ( { onClose, renderDialog = undefined } ) => {
 };
 
 export default function SavePanel() {
-	const { isSaveViewOpen, canvasMode, isDirty, isSaving } = useSelect(
-		( select ) => {
-			const {
-				__experimentalGetDirtyEntityRecords,
-				isSavingEntityRecord,
-				isResolving,
-			} = select( coreStore );
-			const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
-			const isActivatingTheme = isResolving( 'activateTheme' );
-			const { isSaveViewOpened, getCanvasMode } = unlock(
-				select( editSiteStore )
-			);
+	const { params } = useLocation();
+	const { canvas = 'view' } = params;
+	const { isSaveViewOpen, isDirty, isSaving } = useSelect( ( select ) => {
+		const {
+			__experimentalGetDirtyEntityRecords,
+			isSavingEntityRecord,
+			isResolving,
+		} = select( coreStore );
+		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+		const isActivatingTheme = isResolving( 'activateTheme' );
+		const { isSaveViewOpened } = unlock( select( editSiteStore ) );
 
-			// The currently selected entity to display.
-			// Typically template or template part in the site editor.
-			return {
-				isSaveViewOpen: isSaveViewOpened(),
-				canvasMode: getCanvasMode(),
-				isDirty: dirtyEntityRecords.length > 0,
-				isSaving:
-					dirtyEntityRecords.some( ( record ) =>
-						isSavingEntityRecord(
-							record.kind,
-							record.name,
-							record.key
-						)
-					) || isActivatingTheme,
-			};
-		},
-		[]
-	);
+		// The currently selected entity to display.
+		// Typically template or template part in the site editor.
+		return {
+			isSaveViewOpen: isSaveViewOpened(),
+			isDirty: dirtyEntityRecords.length > 0,
+			isSaving:
+				dirtyEntityRecords.some( ( record ) =>
+					isSavingEntityRecord( record.kind, record.name, record.key )
+				) || isActivatingTheme,
+		};
+	}, [] );
 	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
 	const onClose = () => setIsSaveViewOpened( false );
+	useEffect( () => {
+		setIsSaveViewOpened( false );
+	}, [ canvas, setIsSaveViewOpened ] );
 
-	if ( canvasMode === 'view' ) {
+	if ( canvas === 'view' ) {
 		return isSaveViewOpen ? (
 			<Modal
 				className="edit-site-save-panel__modal"

package/src/components/sidebar-dataviews/default-views.js

@@ -31,9 +31,6 @@ export const defaultLayouts = {
 		layout: {
 			primaryField: 'title',
 			styles: {
-				'featured-image': {
-					width: '1%',
-				},
 				title: {
 					maxWidth: 300,
 				},
@@ -42,14 +39,14 @@ export const defaultLayouts = {
 	},
 	[ LAYOUT_GRID ]: {
 		layout: {
-			mediaField: 'featured-image',
+			mediaField: 'featured_media',
 			primaryField: 'title',
 		},
 	},
 	[ LAYOUT_LIST ]: {
 		layout: {
 			primaryField: 'title',
-			mediaField: 'featured-image',
+			mediaField: 'featured_media',
 		},
 	},
 };

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

@@ -109,7 +109,8 @@ export default function SidebarNavigationScreen( {
 						{ ! isPreviewingTheme()
 							? title
 							: sprintf(
-									'Previewing %1$s: %2$s',
+									/* translators: 1: theme name. 2: title */
+									__( 'Previewing %1$s: %2$s' ),
 									previewingThemeName,
 									title
 							  ) }

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

@@ -9,6 +9,7 @@ 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
@@ -23,10 +24,12 @@ import useGlobalStylesRevisions from '../global-styles/screen-revisions/use-glob
 import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
 import SidebarNavigationScreenGlobalStylesContent from './content';
 
+const { useLocation, useHistory } = unlock( routerPrivateApis );
+
 export function SidebarNavigationItemGlobalStyles( props ) {
 	const { openGeneralSidebar } = useDispatch( editSiteStore );
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-
+	const history = useHistory();
+	const { params } = useLocation();
 	const hasGlobalStyleVariations = useSelect(
 		( select ) =>
 			!! select(
@@ -48,7 +51,16 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 			{ ...props }
 			onClick={ () => {
 				// Switch to edit mode.
-				setCanvasMode( 'edit' );
+				history.push(
+					{
+						...params,
+						canvas: 'edit',
+					},
+					undefined,
+					{
+						transition: 'canvas-mode-edit-transition',
+					}
+				);
 				// Open global styles sidebar.
 				openGeneralSidebar( 'edit-site/global-styles' );
 			} }
@@ -57,45 +69,51 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 }
 
 export default function SidebarNavigationScreenGlobalStyles( { backPath } ) {
+	const history = useHistory();
+	const { params } = useLocation();
+	const { canvas = 'view' } = params;
 	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 { isStyleBookOpened, revisionsCount } = useSelect( ( select ) => {
+		const { getEditorCanvasContainerView } = unlock(
+			select( editSiteStore )
+		);
+		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+			select( coreStore );
+		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+		const globalStyles = globalStylesId
+			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+			: undefined;
+		return {
+			isStyleBookOpened: 'style-book' === getEditorCanvasContainerView(),
+			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 ] );
+	}, [ history, params, openGeneralSidebar, setPreference ] );
 
 	const openStyleBook = useCallback( async () => {
 		await openGlobalStyles();
@@ -166,7 +184,7 @@ export default function SidebarNavigationScreenGlobalStyles( { backPath } ) {
 					</>
 				}
 			/>
-			{ isStyleBookOpened && ! isMobileViewport && isViewMode && (
+			{ isStyleBookOpened && ! isMobileViewport && canvas === 'view' && (
 				<StyleBook
 					enableResizing={ false }
 					isSelected={ () => false }

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 />,
+	},
+};

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

@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import PostList from '../post-list';
+import DataViewsSidebarContent from '../sidebar-dataviews';
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import Editor from '../editor';
+
+function PageList() {
+	return <PostList postType="page" />;
+}
+
+export const pagesEditRoute = {
+	name: 'pages-edit',
+	match: ( params ) => {
+		return params.postType === 'page' && params.canvas === 'edit';
+	},
+	areas: {
+		sidebar: (
+			<SidebarNavigationScreen
+				title={ __( 'Pages' ) }
+				backPath={ {} }
+				content={ <DataViewsSidebarContent /> }
+			/>
+		),
+		content: <PageList />,
+		mobile: <Editor />,
+		preview: <Editor />,
+	},
+};