@wordpress/edit-site 5.32.0 → 5.34.0

package/src/components/layout/index.js

@@ -19,7 +19,6 @@ import {
 } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
-import { NavigableRegion } from '@wordpress/interface';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import {
 	CommandMenu,
@@ -31,14 +30,13 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import Sidebar from '../sidebar';
 import ErrorBoundary from '../error-boundary';
 import { store as editSiteStore } from '../../store';
-import Header from '../header-edit-mode';
 import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
 import SiteHub from '../site-hub';
 import ResizableFrame from '../resizable-frame';
@@ -52,10 +50,13 @@ import { useEditModeCommands } from '../../hooks/commands/use-edit-mode-commands
 import { useIsSiteEditorLoading } from './hooks';
 import useLayoutAreas from './router';
 import useMovingAnimation from './animation';
+import SidebarContent from '../sidebar';
+import SaveHub from '../save-hub';
 
 const { useCommands } = unlock( coreCommandsPrivateApis );
 const { useCommandContext } = unlock( commandsPrivateApis );
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
+const { NavigableRegion } = unlock( editorPrivateApis );
 
 const ANIMATION_DURATION = 0.3;
 
@@ -77,6 +78,7 @@ export default function Layout() {
 		canvasMode,
 		previousShortcut,
 		nextShortcut,
+		hasBlockBreadcrumbs,
 	} = useSelect( ( select ) => {
 		const { getAllShortcutKeyCombinations } = select(
 			keyboardShortcutsStore
@@ -85,10 +87,10 @@ export default function Layout() {
 		return {
 			canvasMode: getCanvasMode(),
 			previousShortcut: getAllShortcutKeyCombinations(
-				'core/edit-site/previous-region'
+				'core/editor/previous-region'
 			),
 			nextShortcut: getAllShortcutKeyCombinations(
-				'core/edit-site/next-region'
+				'core/editor/next-region'
 			),
 			hasFixedToolbar: select( preferencesStore ).get(
 				'core',
@@ -98,6 +100,10 @@ export default function Layout() {
 				'core',
 				'distractionFree'
 			),
+			hasBlockBreadcrumbs: select( preferencesStore ).get(
+				'core',
+				'showBlockBreadcrumbs'
+			),
 			isZoomOutMode:
 				select( blockEditorStore ).__unstableGetEditorMode() ===
 				'zoom-out',
@@ -181,6 +187,10 @@ export default function Layout() {
 						'has-fixed-toolbar': hasFixedToolbar,
 						'is-block-toolbar-visible': hasBlockSelected,
 						'is-zoom-out': isZoomOutMode,
+						'has-block-breadcrumbs':
+							hasBlockBreadcrumbs &&
+							! isDistractionFree &&
+							canvasMode === 'edit',
 					}
 				) }
 			>
@@ -217,42 +227,6 @@ export default function Layout() {
 						isTransparent={ isResizableFrameOversized }
 						className="edit-site-layout__hub"
 					/>
-
-					<AnimatePresence initial={ false }>
-						{ canvasMode === 'edit' && (
-							<NavigableRegion
-								key="header"
-								className="edit-site-layout__header"
-								ariaLabel={ __( 'Editor top bar' ) }
-								as={ motion.div }
-								variants={ {
-									isDistractionFree: { opacity: 0, y: 0 },
-									isDistractionFreeHovering: {
-										opacity: 1,
-										y: 0,
-									},
-									view: { opacity: 1, y: '-100%' },
-									edit: { opacity: 1, y: 0 },
-								} }
-								exit={ {
-									y: '-100%',
-								} }
-								initial={ {
-									opacity: isDistractionFree ? 1 : 0,
-									y: isDistractionFree ? 0 : '-100%',
-								} }
-								transition={ {
-									type: 'tween',
-									duration: disableMotion
-										? 0
-										: ANIMATION_DURATION,
-									ease: 'easeOut',
-								} }
-							>
-								<Header />
-							</NavigableRegion>
-						) }
-					</AnimatePresence>
 				</motion.div>
 
 				<div className="edit-site-layout__content">
@@ -260,8 +234,7 @@ export default function Layout() {
 						The NavigableRegion must always be rendered and not use
 						`inert` otherwise `useNavigateRegions` will fail.
 					*/ }
-					{ ( ! isMobileViewport ||
-						( isMobileViewport && ! areas.mobile ) ) && (
+					{ ( ! isMobileViewport || ! areas.mobile ) && (
 						<NavigableRegion
 							ariaLabel={ __( 'Navigation' ) }
 							className="edit-site-layout__sidebar-region"
@@ -284,22 +257,18 @@ export default function Layout() {
 										} }
 										className="edit-site-layout__sidebar"
 									>
-										<Sidebar />
+										<SidebarContent routeKey={ routeKey }>
+											{ areas.sidebar }
+										</SidebarContent>
+										<SaveHub />
 									</motion.div>
 								) }
 							</AnimatePresence>
 						</NavigableRegion>
 					) }
 
-					<SavePanel />
-
 					{ isMobileViewport && areas.mobile && (
-						<div
-							className="edit-site-layout__mobile"
-							style={ {
-								maxWidth: widths?.content,
-							} }
-						>
+						<div className="edit-site-layout__mobile">
 							{ areas.mobile }
 						</div>
 					) }
@@ -363,6 +332,8 @@ export default function Layout() {
 						</div>
 					) }
 				</div>
+
+				<SavePanel />
 			</div>
 		</>
 	);

package/src/components/layout/router.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -11,12 +12,18 @@ import { useIsSiteEditorLoading } from './hooks';
 import Editor from '../editor';
 import PagePages from '../page-pages';
 import PagePatterns from '../page-patterns';
-import PageTemplatesTemplateParts from '../page-templates-template-parts';
-
-import {
-	TEMPLATE_POST_TYPE,
-	TEMPLATE_PART_POST_TYPE,
-} from '../../utils/constants';
+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 SidebarNavigationScreenPage from '../sidebar-navigation-screen-page';
+import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
+import SidebarNavigationScreenTemplate from '../sidebar-navigation-screen-template';
+import SidebarNavigationScreenPattern from '../sidebar-navigation-screen-pattern';
+import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
+import SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-navigation-menu';
+import DataViewsSidebarContent from '../sidebar-dataviews';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
@@ -29,19 +36,24 @@ export default function useLayoutAreas() {
 	// Note: Since "sidebar" is not yet supported here,
 	// returning undefined from "mobile" means show the sidebar.
 
-	// Regular page
+	// Page list
 	if ( path === '/page' ) {
 		const isListLayout = layout === 'list' || ! layout;
 		return {
 			key: 'pages-list',
 			areas: {
+				sidebar: (
+					<SidebarNavigationScreen
+						title={ __( 'Manage pages' ) }
+						content={ <DataViewsSidebarContent /> }
+					/>
+				),
 				content: <PagePages />,
 				preview: isListLayout && (
 					<Editor
 						isLoading={ isSiteEditorLoading }
 						onClick={ () =>
 							history.push( {
-								path,
 								postType: 'page',
 								postId,
 								canvas: 'edit',
@@ -52,7 +64,9 @@ export default function useLayoutAreas() {
 				mobile:
 					canvas === 'edit' ? (
 						<Editor isLoading={ isSiteEditorLoading } />
-					) : undefined,
+					) : (
+						<PagePages />
+					),
 			},
 			widths: {
 				content: isListLayout ? 380 : undefined,
@@ -62,14 +76,24 @@ export default function useLayoutAreas() {
 
 	// Regular other post types
 	if ( postType && postId ) {
+		let sidebar;
+		if ( postType === 'wp_template_part' || postType === 'wp_block' ) {
+			sidebar = <SidebarNavigationScreenPattern />;
+		} else if ( postType === 'wp_template' ) {
+			sidebar = <SidebarNavigationScreenTemplate />;
+		} else if ( postType === 'page' ) {
+			sidebar = <SidebarNavigationScreenPage />;
+		} else {
+			sidebar = <SidebarNavigationScreenNavigationMenu />;
+		}
 		return {
 			key: 'page',
 			areas: {
+				sidebar,
 				preview: <Editor isLoading={ isSiteEditorLoading } />,
-				mobile:
-					canvas === 'edit' ? (
-						<Editor isLoading={ isSiteEditorLoading } />
-					) : undefined,
+				mobile: canvas === 'edit' && (
+					<Editor isLoading={ isSiteEditorLoading } />
+				),
 			},
 		};
 	}
@@ -80,19 +104,12 @@ export default function useLayoutAreas() {
 		return {
 			key: 'templates-list',
 			areas: {
-				content: (
-					<PageTemplatesTemplateParts
-						postType={ TEMPLATE_POST_TYPE }
-					/>
-				),
+				sidebar: <SidebarNavigationScreenTemplatesBrowse />,
+				content: <PageTemplates />,
 				preview: isListLayout && (
 					<Editor isLoading={ isSiteEditorLoading } />
 				),
-				mobile: (
-					<PageTemplatesTemplateParts
-						postType={ TEMPLATE_POST_TYPE }
-					/>
-				),
+				mobile: <PageTemplates />,
 			},
 			widths: {
 				content: isListLayout ? 380 : undefined,
@@ -100,39 +117,45 @@ export default function useLayoutAreas() {
 		};
 	}
 
-	// Template parts
-	if ( path === '/wp_template_part/all' ) {
-		const isListLayout = isCustom !== 'true' && layout === 'list';
+	/* Patterns and Template Parts
+	 * `/wp_template_part/all` path is no longer used, but uses Patterns page screens for
+	 * backwards compatibility.
+	 */
+	if ( path === '/patterns' || path === '/wp_template_part/all' ) {
 		return {
-			key: 'template-parts',
+			key: 'patterns',
 			areas: {
-				content: (
-					<PageTemplatesTemplateParts
-						postType={ TEMPLATE_PART_POST_TYPE }
-					/>
-				),
-				preview: isListLayout && (
+				sidebar: <SidebarNavigationScreenPatterns />,
+				content: <PagePatterns />,
+				mobile: <PagePatterns />,
+			},
+		};
+	}
+
+	// Styles
+	if ( path === '/wp_global_styles' ) {
+		return {
+			key: 'styles',
+			areas: {
+				sidebar: <SidebarNavigationScreenGlobalStyles />,
+				preview: <Editor isLoading={ isSiteEditorLoading } />,
+				mobile: canvas === 'edit' && (
 					<Editor isLoading={ isSiteEditorLoading } />
 				),
-				mobile: (
-					<PageTemplatesTemplateParts
-						postType={ TEMPLATE_PART_POST_TYPE }
-					/>
-				),
-			},
-			widths: {
-				content: isListLayout ? 380 : undefined,
 			},
 		};
 	}
 
-	// Patterns
-	if ( path === '/patterns' ) {
+	// Navigation
+	if ( path === '/navigation' ) {
 		return {
-			key: 'patterns',
+			key: 'styles',
 			areas: {
-				content: <PagePatterns />,
-				mobile: <PagePatterns />,
+				sidebar: <SidebarNavigationScreenNavigationMenus />,
+				preview: <Editor isLoading={ isSiteEditorLoading } />,
+				mobile: canvas === 'edit' && (
+					<Editor isLoading={ isSiteEditorLoading } />
+				),
 			},
 		};
 	}
@@ -141,11 +164,11 @@ export default function useLayoutAreas() {
 	return {
 		key: 'default',
 		areas: {
+			sidebar: <SidebarNavigationScreenMain />,
 			preview: <Editor isLoading={ isSiteEditorLoading } />,
-			mobile:
-				canvas === 'edit' ? (
-					<Editor isLoading={ isSiteEditorLoading } />
-				) : undefined,
+			mobile: canvas === 'edit' && (
+				<Editor isLoading={ isSiteEditorLoading } />
+			),
 		},
 	};
 }

package/src/components/layout/style.scss

@@ -15,7 +15,7 @@
 	z-index: z-index(".edit-site-layout__hub");
 
 	@include break-medium {
-		width: calc(#{$nav-sidebar-width} - #{$grid-unit-30});
+		width: calc(#{$nav-sidebar-width} - #{$grid-unit-15});
 	}
 
 	.edit-site-layout.is-full-canvas & {
@@ -26,20 +26,15 @@
 	}
 }
 
-.edit-site-layout__header-container {
-	z-index: z-index(".edit-site-layout__header-container");
+.edit-site-layout__header-container:has(+ .edit-site-layout__content > .edit-site-layout__mobile>.edit-site-page) {
+	margin-bottom: $header-height;
+	@include break-medium {
+		margin-bottom: 0;
+	}
 }
 
-.edit-site-layout__header {
-	height: $header-height;
-	display: flex;
-	z-index: z-index(".edit-site-layout__header");
-
-	// This is only necessary for the exit animation
-	.edit-site-layout:not(.is-full-canvas) & {
-		position: fixed;
-		width: 100vw;
-	}
+.edit-site-layout__header-container {
+	z-index: z-index(".edit-site-layout__header-container");
 }
 
 .edit-site-layout__content {
@@ -132,15 +127,15 @@
 		bottom: $canvas-padding;
 		width: calc(100% - #{$canvas-padding});
 
-		& > div {
-			border-radius: $radius-block-ui * 4;
-			// Not sure why this is necessary.
-			.edit-site-layout:not(.is-full-canvas) & .edit-site-visual-editor__editor-canvas,
-			.edit-site-layout:not(.is-full-canvas) & .interface-interface-skeleton__content {
+		.edit-site-resizable-frame__inner-content {
+			transition: border-radius 0.4s;
+			// This ensure the radius work properly.
+			overflow: hidden;
+
+			.edit-site-layout:not(.is-full-canvas) & {
 				border-radius: $radius-block-ui * 4;
 			}
 		}
-
 	}
 
 	.edit-site-layout.is-full-canvas & {
@@ -179,11 +174,6 @@
 	justify-content: center;
 	border-bottom: 1px solid transparent;
 
-	.edit-site-layout.is-full-canvas & {
-		border-bottom-color: $gray-200;
-		transition: border-bottom-color 0.15s 0.4s ease-out;
-	}
-
 	&:hover,
 	&:active {
 		color: $white;
@@ -270,26 +260,14 @@
 			div {
 				transform: translateX(0) translateY(0) translateZ(0) !important;
 			}
-
-			.edit-site-layout__header {
-				opacity: 1 !important;
-			}
 		}
 	}
 
-	.edit-site-site-hub,
-	.edit-site-layout__header {
+	.edit-site-site-hub {
 		position: absolute;
 		top: 0;
-		z-index: z-index(".edit-site-layout__header");
-	}
-	.edit-site-site-hub {
 		z-index: z-index(".edit-site-layout__hub");
 	}
-	.edit-site-layout__header {
-		width: 100%;
-	}
-
 }
 
 .edit-site-layout__area {

package/src/components/page/index.js

@@ -6,13 +6,18 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { NavigableRegion } from '@wordpress/interface';
-import { EditorSnackbars } from '@wordpress/editor';
+import {
+	EditorSnackbars,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import Header from './header';
+import { unlock } from '../../lock-unlock';
+
+const { NavigableRegion } = unlock( editorPrivateApis );
 
 export default function Page( {
 	title,

package/src/components/page-pages/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import classNames from 'classnames';
-
 /**
  * WordPress dependencies
  */
@@ -27,7 +22,6 @@ import {
 	DEFAULT_CONFIG_PER_VIEW_TYPE,
 } from '../sidebar-dataviews/default-views';
 import {
-	ENUMERATION_TYPE,
 	LAYOUT_GRID,
 	LAYOUT_TABLE,
 	LAYOUT_LIST,
@@ -155,6 +149,7 @@ const STATUSES = [
 const DEFAULT_STATUSES = 'draft,future,pending,private,publish'; // All but 'trash'.
 
 function FeaturedImage( { item, viewType } ) {
+	const isDisabled = item.status === 'trash';
 	const { onClick } = useLink( {
 		postId: item.id,
 		postType: item.type,
@@ -172,24 +167,50 @@ function FeaturedImage( { item, viewType } ) {
 			size={ size }
 		/>
 	) : null;
-	if ( viewType === LAYOUT_LIST ) {
-		return media;
-	}
+	const renderButton = viewType !== LAYOUT_LIST && ! isDisabled;
 	return (
-		<button
-			className={ classNames( 'page-pages-preview-field__button', {
-				'edit-site-page-pages__media-wrapper':
-					viewType === LAYOUT_TABLE,
-			} ) }
-			type="button"
-			onClick={ onClick }
-			aria-label={ item.title?.rendered || __( '(no title)' ) }
+		<div
+			className={ `edit-site-page-pages__featured-image-wrapper is-layout-${ viewType }` }
 		>
-			{ media }
-		</button>
+			{ renderButton ? (
+				<button
+					className="page-pages-preview-field__button"
+					type="button"
+					onClick={ onClick }
+					aria-label={ item.title?.rendered || __( '(no title)' ) }
+				>
+					{ media }
+				</button>
+			) : (
+				media
+			) }
+		</div>
 	);
 }
 
+let PAGE_ACTIONS = [
+	'edit-post',
+	'view-post',
+	'restore',
+	'permanently-delete',
+	'view-post-revisions',
+	'rename-post',
+	'move-to-trash',
+];
+
+if ( process.env.IS_GUTENBERG_PLUGIN ) {
+	PAGE_ACTIONS = [
+		'edit-post',
+		'view-post',
+		'restore',
+		'permanently-delete',
+		'view-post-revisions',
+		'duplicate-post',
+		'rename-post',
+		'move-to-trash',
+	];
+}
+
 export default function PagePages() {
 	const postType = 'page';
 	const [ view, setView ] = useView( postType );
@@ -254,7 +275,7 @@ export default function PagePages() {
 	} = useEntityRecords( 'postType', postType, queryArgs );
 
 	const { records: authors, isResolving: isLoadingAuthors } =
-		useEntityRecords( 'root', 'user' );
+		useEntityRecords( 'root', 'user', { per_page: -1 } );
 
 	const paginationInfo = useMemo(
 		() => ( {
@@ -281,9 +302,10 @@ export default function PagePages() {
 				id: 'title',
 				getValue: ( { item } ) => item.title?.rendered,
 				render: ( { item } ) => {
-					return [ LAYOUT_TABLE, LAYOUT_GRID ].includes(
-						view.type
-					) ? (
+					const addLink =
+						[ LAYOUT_TABLE, LAYOUT_GRID ].includes( view.type ) &&
+						item.status !== 'trash';
+					return addLink ? (
 						<Link
 							params={ {
 								postId: item.id,
@@ -306,7 +328,6 @@ export default function PagePages() {
 				header: __( 'Author' ),
 				id: 'author',
 				getValue: ( { item } ) => item._embedded?.author[ 0 ]?.name,
-				type: ENUMERATION_TYPE,
 				elements:
 					authors?.map( ( { id, name } ) => ( {
 						value: id,
@@ -319,7 +340,6 @@ export default function PagePages() {
 				getValue: ( { item } ) =>
 					STATUSES.find( ( { value } ) => value === item.status )
 						?.label ?? item.status,
-				type: ENUMERATION_TYPE,
 				elements: STATUSES,
 				enableSorting: false,
 				filterBy: {
@@ -353,7 +373,7 @@ export default function PagePages() {
 		},
 		[ history ]
 	);
-	const actions = usePostActions( onActionPerformed );
+	const actions = usePostActions( onActionPerformed, PAGE_ACTIONS );
 	const onChangeView = useCallback(
 		( newView ) => {
 			if ( newView.type !== view.type ) {