@wordpress/edit-site 5.31.0 → 5.33.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';
@@ -51,12 +49,16 @@ import { useCommonCommands } from '../../hooks/commands/use-common-commands';
 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.5;
+const ANIMATION_DURATION = 0.3;
 
 export default function Layout() {
 	// This ensures the edited entity id and type are initialized properly.
@@ -114,7 +116,10 @@ export default function Layout() {
 	const isEditorLoading = useIsSiteEditorLoading();
 	const [ isResizableFrameOversized, setIsResizableFrameOversized ] =
 		useState( false );
-	const { areas, widths } = useLayoutAreas();
+	const { key: routeKey, areas, widths } = useLayoutAreas();
+	const animationRef = useMovingAnimation( {
+		triggerAnimationOnChange: canvasMode + '__' + routeKey,
+	} );
 
 	// This determines which animation variant should apply to the header.
 	// There is also a `isDistractionFreeHovering` state that gets priority
@@ -213,40 +218,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 : 0.2,
-									ease: 'easeOut',
-								} }
-							>
-								<Header />
-							</NavigableRegion>
-						) }
-					</AnimatePresence>
 				</motion.div>
 
 				<div className="edit-site-layout__content">
@@ -254,8 +225,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"
@@ -278,22 +248,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>
 					) }
@@ -315,22 +281,7 @@ export default function Layout() {
 						<div className="edit-site-layout__canvas-container">
 							{ canvasResizer }
 							{ !! canvasSize.width && (
-								<motion.div
-									whileHover={
-										canvasMode === 'view'
-											? {
-													scale: 1.005,
-													transition: {
-														duration: disableMotion
-															? 0
-															: 0.5,
-														ease: 'easeOut',
-													},
-											  }
-											: {}
-									}
-									initial={ false }
-									layout="position"
+								<div
 									className={ classnames(
 										'edit-site-layout__canvas',
 										{
@@ -338,13 +289,7 @@ export default function Layout() {
 												isResizableFrameOversized,
 										}
 									) }
-									transition={ {
-										type: 'tween',
-										duration: disableMotion
-											? 0
-											: ANIMATION_DURATION,
-										ease: 'easeOut',
-									} }
+									ref={ animationRef }
 								>
 									<ErrorBoundary>
 										<ResizableFrame
@@ -373,11 +318,13 @@ export default function Layout() {
 											{ areas.preview }
 										</ResizableFrame>
 									</ErrorBoundary>
-								</motion.div>
+								</div>
 							) }
 						</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
@@ -12,48 +13,64 @@ import Editor from '../editor';
 import PagePages from '../page-pages';
 import PagePatterns from '../page-patterns';
 import PageTemplatesTemplateParts from '../page-templates-template-parts';
-
+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';
 import {
 	TEMPLATE_POST_TYPE,
 	TEMPLATE_PART_POST_TYPE,
 } from '../../utils/constants';
 
-const { useLocation } = unlock( routerPrivateApis );
+const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 export default function useLayoutAreas() {
 	const isSiteEditorLoading = useIsSiteEditorLoading();
+	const history = useHistory();
 	const { params } = useLocation();
 	const { postType, postId, path, layout, isCustom, canvas } = params ?? {};
 
 	// 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: {
-				content: undefined,
-				preview: <Editor isLoading={ isSiteEditorLoading } />,
-				mobile:
-					canvas === 'edit' ? (
-						<Editor isLoading={ isSiteEditorLoading } />
-					) : undefined,
-			},
-			widths: {
-				content: undefined,
-			},
-		};
-	}
-
-	const isListLayout = isCustom !== 'true' && layout === 'list';
-
-	if ( path === '/pages' ) {
-		return {
-			areas: {
+				sidebar: (
+					<SidebarNavigationScreen
+						title={ __( 'Manage pages' ) }
+						content={ <DataViewsSidebarContent /> }
+					/>
+				),
 				content: <PagePages />,
 				preview: isListLayout && (
-					<Editor isLoading={ isSiteEditorLoading } />
+					<Editor
+						isLoading={ isSiteEditorLoading }
+						onClick={ () =>
+							history.push( {
+								postType: 'page',
+								postId,
+								canvas: 'edit',
+							} )
+						}
+					/>
 				),
+				mobile:
+					canvas === 'edit' ? (
+						<Editor isLoading={ isSiteEditorLoading } />
+					) : (
+						<PagePages />
+					),
 			},
 			widths: {
 				content: isListLayout ? 380 : undefined,
@@ -63,21 +80,37 @@ 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 } />
+				),
 			},
 		};
 	}
 
 	// Templates
 	if ( path === '/wp_template' ) {
+		const isListLayout = isCustom !== 'true' && layout === 'list';
 		return {
+			key: 'templates-list',
 			areas: {
+				sidebar: (
+					<SidebarNavigationScreenTemplatesBrowse postType="wp_template" />
+				),
 				content: (
 					<PageTemplatesTemplateParts
 						postType={ TEMPLATE_POST_TYPE }
@@ -100,8 +133,13 @@ export default function useLayoutAreas() {
 
 	// Template parts
 	if ( path === '/wp_template_part/all' ) {
+		const isListLayout = isCustom !== 'true' && layout === 'list';
 		return {
+			key: 'template-parts',
 			areas: {
+				sidebar: (
+					<SidebarNavigationScreenTemplatesBrowse postType="wp_template_part" />
+				),
 				content: (
 					<PageTemplatesTemplateParts
 						postType={ TEMPLATE_PART_POST_TYPE }
@@ -125,21 +163,52 @@ export default function useLayoutAreas() {
 	// Patterns
 	if ( path === '/patterns' ) {
 		return {
+			key: 'patterns',
 			areas: {
+				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 } />
+				),
+			},
+		};
+	}
+
+	// Navigation
+	if ( path === '/navigation' ) {
+		return {
+			key: 'styles',
+			areas: {
+				sidebar: <SidebarNavigationScreenNavigationMenus />,
+				preview: <Editor isLoading={ isSiteEditorLoading } />,
+				mobile: canvas === 'edit' && (
+					<Editor isLoading={ isSiteEditorLoading } />
+				),
+			},
+		};
+	}
+
 	// Fallback shows the home page preview
 	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 {
@@ -93,6 +88,8 @@
 	position: relative;
 	flex-grow: 1;
 	z-index: z-index(".edit-site-layout__canvas-container");
+	// When animating the frame size can exceed its container size.
+	overflow: visible;
 
 	&.is-resizing::after {
 		// This covers the whole content which ensures mouse up triggers
@@ -130,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 & {
@@ -177,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;
@@ -268,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,