@wordpress/edit-site 6.10.0 → 6.12.0

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { FlexItem, FlexBlock, Flex, Button } from '@wordpress/components';
+import { FlexItem, Flex, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { styles, seen, backup } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -11,6 +11,8 @@ import {
 	store as editorStore,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
+import { useViewportMatch } from '@wordpress/compose';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -23,8 +25,11 @@ import { store as coreStore } from '@wordpress/core-data';
 import DefaultSidebar from './default-sidebar';
 
 const { interfaceStore } = unlock( editorPrivateApis );
+const { useLocation } = unlock( routerPrivateApis );
 
 export default function GlobalStylesSidebar() {
+	const { params } = useLocation();
+	const { canvas = 'view' } = params;
 	const {
 		shouldClearCanvasContainerView,
 		isStyleBookOpened,
@@ -32,52 +37,58 @@ export default function GlobalStylesSidebar() {
 		hasRevisions,
 		isRevisionsOpened,
 		isRevisionsStyleBookOpened,
-	} = useSelect( ( select ) => {
-		const { getActiveComplementaryArea } = select( interfaceStore );
-		const { getEditorCanvasContainerView, getCanvasMode } = unlock(
-			select( editSiteStore )
-		);
-		const canvasContainerView = getEditorCanvasContainerView();
-		const _isVisualEditorMode =
-			'visual' === select( editorStore ).getEditorMode();
-		const _isEditCanvasMode = 'edit' === getCanvasMode();
-		const _showListViewByDefault = select( preferencesStore ).get(
-			'core',
-			'showListViewByDefault'
-		);
-		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
-			select( coreStore );
+	} = useSelect(
+		( select ) => {
+			const { getActiveComplementaryArea } = select( interfaceStore );
+			const { getEditorCanvasContainerView } = unlock(
+				select( editSiteStore )
+			);
+			const canvasContainerView = getEditorCanvasContainerView();
+			const _isVisualEditorMode =
+				'visual' === select( editorStore ).getEditorMode();
+			const _isEditCanvasMode = 'edit' === canvas;
+			const _showListViewByDefault = select( preferencesStore ).get(
+				'core',
+				'showListViewByDefault'
+			);
+			const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+				select( coreStore );
 
-		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-		const globalStyles = globalStylesId
-			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
-			: undefined;
+			const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+			const globalStyles = globalStylesId
+				? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+				: undefined;
 
-		return {
-			isStyleBookOpened: 'style-book' === canvasContainerView,
-			shouldClearCanvasContainerView:
-				'edit-site/global-styles' !==
-					getActiveComplementaryArea( 'core' ) ||
-				! _isVisualEditorMode ||
-				! _isEditCanvasMode,
-			showListViewByDefault: _showListViewByDefault,
-			hasRevisions:
-				!! globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count,
-			isRevisionsStyleBookOpened:
-				'global-styles-revisions:style-book' === canvasContainerView,
-			isRevisionsOpened:
-				'global-styles-revisions' === canvasContainerView,
-		};
-	}, [] );
+			return {
+				isStyleBookOpened: 'style-book' === canvasContainerView,
+				shouldClearCanvasContainerView:
+					'edit-site/global-styles' !==
+						getActiveComplementaryArea( 'core' ) ||
+					! _isVisualEditorMode ||
+					! _isEditCanvasMode,
+				showListViewByDefault: _showListViewByDefault,
+				hasRevisions:
+					!! globalStyles?._links?.[ 'version-history' ]?.[ 0 ]
+						?.count,
+				isRevisionsStyleBookOpened:
+					'global-styles-revisions:style-book' ===
+					canvasContainerView,
+				isRevisionsOpened:
+					'global-styles-revisions' === canvasContainerView,
+			};
+		},
+		[ canvas ]
+	);
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
 
 	useEffect( () => {
 		if ( shouldClearCanvasContainerView ) {
 			setEditorCanvasContainerView( undefined );
 		}
-	}, [ shouldClearCanvasContainerView ] );
+	}, [ shouldClearCanvasContainerView, setEditorCanvasContainerView ] );
 
 	const { setIsListViewOpened } = useDispatch( editorStore );
 
@@ -130,38 +141,48 @@ export default function GlobalStylesSidebar() {
 					className="edit-site-global-styles-sidebar__header"
 					gap={ 1 }
 				>
-					<FlexBlock style={ { minWidth: 'min-content' } }>
+					<FlexItem>
 						<h2 className="edit-site-global-styles-sidebar__header-title">
 							{ __( 'Styles' ) }
 						</h2>
-					</FlexBlock>
-					<FlexItem>
-						<Button
-							icon={ seen }
-							label={ __( 'Style Book' ) }
-							isPressed={
-								isStyleBookOpened || isRevisionsStyleBookOpened
-							}
-							accessibleWhenDisabled
-							disabled={ shouldClearCanvasContainerView }
-							onClick={ toggleStyleBook }
-							size="compact"
-						/>
-					</FlexItem>
-					<FlexItem>
-						<Button
-							label={ __( 'Revisions' ) }
-							icon={ backup }
-							onClick={ toggleRevisions }
-							accessibleWhenDisabled
-							disabled={ ! hasRevisions }
-							isPressed={
-								isRevisionsOpened || isRevisionsStyleBookOpened
-							}
-							size="compact"
-						/>
 					</FlexItem>
-					<GlobalStylesMenuSlot />
+					<Flex
+						justify="flex-end"
+						gap={ 1 }
+						className="edit-site-global-styles-sidebar__header-actions"
+					>
+						{ ! isMobileViewport && (
+							<FlexItem>
+								<Button
+									icon={ seen }
+									label={ __( 'Style Book' ) }
+									isPressed={
+										isStyleBookOpened ||
+										isRevisionsStyleBookOpened
+									}
+									accessibleWhenDisabled
+									disabled={ shouldClearCanvasContainerView }
+									onClick={ toggleStyleBook }
+									size="compact"
+								/>
+							</FlexItem>
+						) }
+						<FlexItem>
+							<Button
+								label={ __( 'Revisions' ) }
+								icon={ backup }
+								onClick={ toggleRevisions }
+								accessibleWhenDisabled
+								disabled={ ! hasRevisions }
+								isPressed={
+									isRevisionsOpened ||
+									isRevisionsStyleBookOpened
+								}
+								size="compact"
+							/>
+						</FlexItem>
+						<GlobalStylesMenuSlot />
+					</Flex>
 				</Flex>
 			}
 		>

package/src/components/global-styles-sidebar/style.scss

@@ -31,6 +31,10 @@
 	margin: 0;
 }
 
+.edit-site-global-styles-sidebar .edit-site-global-styles-sidebar__header-actions {
+	flex: 1;
+}
+
 .edit-site-global-styles-sidebar .components-navigation__menu-title-heading {
 	font-size: $default-font-size * 1.2;
 	font-weight: 500;
@@ -75,6 +79,8 @@
 .show-icon-labels {
 	.edit-site-global-styles-sidebar__header {
 		.components-button.has-icon {
+			width: auto;
+
 			// Hide the button icons when labels are set to display...
 			svg {
 				display: none;

package/src/components/layout/animation.js

@@ -41,7 +41,6 @@ function useMovingAnimation( { triggerAnimationOnChange } ) {
 			previous: ref.current && getAbsolutePosition( ref.current ),
 			prevRect: ref.current && ref.current.getBoundingClientRect(),
 		} ),
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[ triggerAnimationOnChange ]
 	);
 

package/src/components/layout/hooks.js

@@ -5,15 +5,9 @@ import { useEffect, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
-/**
- * Internal dependencies
- */
-import useEditedEntityRecord from '../use-edited-entity-record';
-
 const MAX_LOADING_TIME = 10000; // 10 seconds
 
 export function useIsSiteEditorLoading() {
-	const { isLoaded: hasLoadedPost } = useEditedEntityRecord();
 	const [ loaded, setLoaded ] = useState( false );
 	const inLoadingPause = useSelect(
 		( select ) => {
@@ -64,5 +58,5 @@ export function useIsSiteEditorLoading() {
 		}
 	}, [ inLoadingPause ] );
 
-	return ! loaded || ! hasLoadedPost;
+	return ! loaded;
 }

package/src/components/layout/index.js

@@ -6,7 +6,6 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
 import {
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
@@ -27,75 +26,60 @@ import {
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import ErrorBoundary from '../error-boundary';
-import { store as editSiteStore } from '../../store';
 import { default as SiteHub, SiteHubMobile } from '../site-hub';
 import ResizableFrame from '../resizable-frame';
 import { unlock } from '../../lock-unlock';
-import KeyboardShortcutsRegister from '../keyboard-shortcuts/register';
-import KeyboardShortcutsGlobal from '../keyboard-shortcuts/global';
+import SaveKeyboardShortcut from '../save-keyboard-shortcut';
 import { useIsSiteEditorLoading } from './hooks';
 import useMovingAnimation from './animation';
 import SidebarContent from '../sidebar';
 import SaveHub from '../save-hub';
 import SavePanel from '../save-panel';
-import useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';
 
 const { useCommands } = unlock( coreCommandsPrivateApis );
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 const { NavigableRegion } = unlock( editorPrivateApis );
+const { useLocation } = unlock( routerPrivateApis );
 
 const ANIMATION_DURATION = 0.3;
 
 export default function Layout( { route } ) {
-	useSyncCanvasModeWithURL();
+	const { params } = useLocation();
+	const { canvas = 'view' } = params;
 	useCommands();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const toggleRef = useRef();
-	const { canvasMode } = useSelect( ( select ) => {
-		const { getCanvasMode } = unlock( select( editSiteStore ) );
-		return {
-			canvasMode: getCanvasMode(),
-		};
-	}, [] );
 	const navigateRegionsProps = useNavigateRegions();
 	const disableMotion = useReducedMotion();
 	const [ canvasResizer, canvasSize ] = useResizeObserver();
 	const isEditorLoading = useIsSiteEditorLoading();
 	const [ isResizableFrameOversized, setIsResizableFrameOversized ] =
 		useState( false );
-	const { key: routeKey, areas, widths } = route;
+	const { name: routeKey, areas, widths } = route;
 	const animationRef = useMovingAnimation( {
-		triggerAnimationOnChange: canvasMode + '__' + routeKey,
+		triggerAnimationOnChange: routeKey + '-' + canvas,
 	} );
 
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
 	const [ gradientValue ] = useGlobalStyle( 'color.gradient' );
-	const previousCanvaMode = usePrevious( canvasMode );
+	const previousCanvaMode = usePrevious( canvas );
 	useEffect( () => {
 		if ( previousCanvaMode === 'edit' ) {
 			toggleRef.current?.focus();
 		}
 		// Should not depend on the previous canvas mode value but the next.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ canvasMode ] );
-
-	// Synchronizing the URL with the store value of canvasMode happens in an effect
-	// This condition ensures the component is only rendered after the synchronization happens
-	// which prevents any animations due to potential canvasMode value change.
-	if ( canvasMode === 'init' ) {
-		return null;
-	}
+	}, [ canvas ] );
 
 	return (
 		<>
 			<CommandMenu />
-			<KeyboardShortcutsRegister />
-			<KeyboardShortcutsGlobal />
+			{ canvas === 'view' && <SaveKeyboardShortcut /> }
 			<div
 				{ ...navigateRegionsProps }
 				ref={ navigateRegionsProps.ref }
@@ -103,7 +87,7 @@ export default function Layout( { route } ) {
 					'edit-site-layout',
 					navigateRegionsProps.className,
 					{
-						'is-full-canvas': canvasMode === 'edit',
+						'is-full-canvas': canvas === 'edit',
 					}
 				) }
 			>
@@ -118,7 +102,7 @@ export default function Layout( { route } ) {
 							className="edit-site-layout__sidebar-region"
 						>
 							<AnimatePresence>
-								{ canvasMode === 'view' && (
+								{ canvas === 'view' && (
 									<motion.div
 										initial={ { opacity: 0 } }
 										animate={ { opacity: 1 } }
@@ -141,7 +125,12 @@ export default function Layout( { route } ) {
 												isResizableFrameOversized
 											}
 										/>
-										<SidebarContent routeKey={ routeKey }>
+										<SidebarContent
+											shouldAnimate={
+												routeKey !== 'styles-view'
+											}
+											routeKey={ routeKey }
+										>
 											{ areas.sidebar }
 										</SidebarContent>
 										<SaveHub />
@@ -156,7 +145,7 @@ export default function Layout( { route } ) {
 
 					{ isMobileViewport && areas.mobile && (
 						<div className="edit-site-layout__mobile">
-							{ canvasMode !== 'edit' && (
+							{ canvas !== 'edit' && (
 								<SidebarContent routeKey={ routeKey }>
 									<SiteHubMobile
 										ref={ toggleRef }
@@ -172,7 +161,7 @@ export default function Layout( { route } ) {
 
 					{ ! isMobileViewport &&
 						areas.content &&
-						canvasMode !== 'edit' && (
+						canvas !== 'edit' && (
 							<div
 								className="edit-site-layout__area"
 								style={ {
@@ -183,7 +172,7 @@ export default function Layout( { route } ) {
 							</div>
 						) }
 
-					{ ! isMobileViewport && areas.edit && (
+					{ ! isMobileViewport && areas.edit && canvas !== 'edit' && (
 						<div
 							className="edit-site-layout__area"
 							style={ {
@@ -211,9 +200,7 @@ export default function Layout( { route } ) {
 									<ErrorBoundary>
 										<ResizableFrame
 											isReady={ ! isEditorLoading }
-											isFullWidth={
-												canvasMode === 'edit'
-											}
+											isFullWidth={ canvas === 'edit' }
 											defaultSize={ {
 												width:
 													canvasSize.width -

package/src/components/layout/router.js

@@ -2,31 +2,19 @@
  * WordPress dependencies
  */
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { __ } from '@wordpress/i18n';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import Editor from '../editor';
-import PostList from '../post-list';
-import PagePatterns from '../page-patterns';
-import PageTemplates from '../page-templates';
-import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
-import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
-import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';
-import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
-import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
-import SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-navigation-menu';
-import DataViewsSidebarContent from '../sidebar-dataviews';
 import {
 	NAVIGATION_POST_TYPE,
 	PATTERN_TYPES,
 	TEMPLATE_PART_POST_TYPE,
 	TEMPLATE_POST_TYPE,
 } from '../../utils/constants';
-import { PostEdit } from '../post-edit';
+import { store as editSiteStore } from '../../store';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
@@ -73,129 +61,26 @@ function useRedirectOldPaths() {
 	}, [ history, params ] );
 }
 
-export default function useLayoutAreas() {
+export default function useActiveRoute() {
 	const { params } = useLocation();
-	const { postType, postId, path, layout, isCustom, canvas, quickEdit } =
-		params;
-	const hasEditCanvasMode = canvas === 'edit';
 	useRedirectOldPaths();
-
-	// Page list
-	if ( postType === 'page' ) {
-		const isListLayout = layout === 'list' || ! layout;
-		const showQuickEdit = quickEdit && ! isListLayout;
-		return {
-			key: 'pages',
-			areas: {
-				sidebar: (
-					<SidebarNavigationScreen
-						title={ __( 'Pages' ) }
-						backPath={ {} }
-						content={ <DataViewsSidebarContent /> }
-					/>
-				),
-				content: <PostList postType={ postType } />,
-				preview: ! showQuickEdit &&
-					( isListLayout || hasEditCanvasMode ) && <Editor />,
-				mobile: hasEditCanvasMode ? (
-					<Editor />
-				) : (
-					<PostList postType={ postType } />
-				),
-				edit: showQuickEdit && (
-					<PostEdit postType={ postType } postId={ postId } />
-				),
-			},
-			widths: {
-				content: isListLayout ? 380 : undefined,
-				edit: showQuickEdit ? 380 : undefined,
-			},
-		};
-	}
-
-	// Templates
-	if ( postType === TEMPLATE_POST_TYPE ) {
-		const isListLayout = isCustom !== 'true' && layout === 'list';
-		return {
-			key: 'templates',
-			areas: {
-				sidebar: (
-					<SidebarNavigationScreenTemplatesBrowse backPath={ {} } />
-				),
-				content: <PageTemplates />,
-				preview: ( isListLayout || hasEditCanvasMode ) && <Editor />,
-				mobile: hasEditCanvasMode ? <Editor /> : <PageTemplates />,
-			},
-			widths: {
-				content: isListLayout ? 380 : undefined,
-			},
-		};
-	}
-
-	// Patterns
-	if (
-		[ TEMPLATE_PART_POST_TYPE, PATTERN_TYPES.user ].includes( postType )
-	) {
-		return {
-			key: 'patterns',
-			areas: {
-				sidebar: <SidebarNavigationScreenPatterns backPath={ {} } />,
-				content: <PagePatterns />,
-				mobile: hasEditCanvasMode ? <Editor /> : <PagePatterns />,
-				preview: hasEditCanvasMode && <Editor />,
-			},
-		};
-	}
-
-	// Styles
-	if ( path === '/wp_global_styles' ) {
-		return {
-			key: 'styles',
-			areas: {
-				sidebar: (
-					<SidebarNavigationScreenGlobalStyles backPath={ {} } />
-				),
-				preview: <Editor />,
-				mobile: hasEditCanvasMode && <Editor />,
-			},
-		};
-	}
-
-	// Navigation
-	if ( postType === NAVIGATION_POST_TYPE ) {
-		if ( postId ) {
+	const routes = useSelect( ( select ) => {
+		return unlock( select( editSiteStore ) ).getRoutes();
+	}, [] );
+	return useMemo( () => {
+		const matchedRoute = routes.find( ( route ) => route.match( params ) );
+		if ( ! matchedRoute ) {
 			return {
-				key: 'navigation',
-				areas: {
-					sidebar: (
-						<SidebarNavigationScreenNavigationMenu
-							backPath={ { postType: NAVIGATION_POST_TYPE } }
-						/>
-					),
-					preview: <Editor />,
-					mobile: hasEditCanvasMode && <Editor />,
-				},
+				key: 404,
+				areas: {},
+				widths: {},
 			};
 		}
+
 		return {
-			key: 'navigation',
-			areas: {
-				sidebar: (
-					<SidebarNavigationScreenNavigationMenus backPath={ {} } />
-				),
-				preview: <Editor />,
-				mobile: hasEditCanvasMode && <Editor />,
-			},
+			name: matchedRoute.name,
+			areas: matchedRoute.areas,
+			widths: matchedRoute.widths,
 		};
-	}
-
-	// Fallback shows the home page preview
-	return {
-		key: 'default',
-		areas: {
-			sidebar: <SidebarNavigationScreenMain />,
-			preview: <Editor />,
-			mobile: hasEditCanvasMode && <Editor />,
-		},
-	};
+	}, [ routes, params ] );
 }

package/src/components/layout/style.scss

@@ -210,8 +210,8 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 
 	.edit-site-layout__view-mode-toggle-icon {
 		display: flex;
-		height: $grid-unit-80;
-		width: $grid-unit-80;
+		height: $header-height;
+		width: $header-height;
 		justify-content: center;
 		align-items: center;
 	}

package/src/components/page-patterns/delete-category-menu-item.js

@@ -9,7 +9,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import { useDispatch } from '@wordpress/data';
 import { useState } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 
@@ -51,8 +51,8 @@ export default function DeleteCategoryMenuItem( { category, onClose } ) {
 
 			createSuccessNotice(
 				sprintf(
-					/* translators: The pattern category's name */
-					__( '"%s" deleted.' ),
+					/* translators: %s: The pattern category's name */
+					_x( '"%s" deleted.', 'pattern category' ),
 					category.label
 				),
 				{ type: 'snackbar', id: 'pattern-category-delete' }
@@ -91,7 +91,7 @@ export default function DeleteCategoryMenuItem( { category, onClose } ) {
 				className="edit-site-patterns__delete-modal"
 				title={ sprintf(
 					// translators: %s: The pattern category's name.
-					__( 'Delete "%s"?' ),
+					_x( 'Delete "%s"?', 'pattern category' ),
 					decodeEntities( category.label )
 				) }
 				size="medium"