@wordpress/edit-site 5.13.0 → 5.15.0

package/src/components/layout/index.js

@@ -72,24 +72,36 @@ export default function Layout() {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const isListPage = getIsListPage( params, isMobileViewport );
 	const isEditorPage = ! isListPage;
-	const { hasFixedToolbar, canvasMode, previousShortcut, nextShortcut } =
-		useSelect( ( select ) => {
-			const { getAllShortcutKeyCombinations } = select(
-				keyboardShortcutsStore
-			);
-			const { getCanvasMode } = unlock( select( editSiteStore ) );
-			return {
-				canvasMode: getCanvasMode(),
-				previousShortcut: getAllShortcutKeyCombinations(
-					'core/edit-site/previous-region'
-				),
-				nextShortcut: getAllShortcutKeyCombinations(
-					'core/edit-site/next-region'
-				),
-				hasFixedToolbar:
-					select( preferencesStore ).get( 'fixedToolbar' ),
-			};
-		}, [] );
+
+	const {
+		isDistractionFree,
+		hasFixedToolbar,
+		canvasMode,
+		previousShortcut,
+		nextShortcut,
+	} = useSelect( ( select ) => {
+		const { getAllShortcutKeyCombinations } = select(
+			keyboardShortcutsStore
+		);
+		const { getCanvasMode } = unlock( select( editSiteStore ) );
+		return {
+			canvasMode: getCanvasMode(),
+			previousShortcut: getAllShortcutKeyCombinations(
+				'core/edit-site/previous-region'
+			),
+			nextShortcut: getAllShortcutKeyCombinations(
+				'core/edit-site/next-region'
+			),
+			hasFixedToolbar: select( preferencesStore ).get(
+				'core/edit-site',
+				'fixedToolbar'
+			),
+			isDistractionFree: select( preferencesStore ).get(
+				'core/edit-site',
+				'distractionFree'
+			),
+		};
+	}, [] );
 	const isEditing = canvasMode === 'edit';
 	const navigateRegionsProps = useNavigateRegions( {
 		previous: previousShortcut,
@@ -109,8 +121,31 @@ export default function Layout() {
 	const [ fullResizer ] = useResizeObserver();
 	const [ isResizing ] = useState( false );
 	const isEditorLoading = useIsSiteEditorLoading();
+	const [ isResizableFrameOversized, setIsResizableFrameOversized ] =
+		useState( false );
+
+	// This determines which animation variant should apply to the header.
+	// There is also a `isDistractionFreeHovering` state that gets priority
+	// when hovering the `edit-site-layout__header-container` in distraction
+	// free mode. It's set via framer and trickles down to all the children
+	// so they can use this variant state too.
+	//
+	// TODO: The issue with this is we want to have the hover state stick when hovering
+	// a popover opened via the header. We'll probably need to lift this state to
+	// handle it ourselves. Also, focusWithin the header needs to be handled.
+	let headerAnimationState;
+
+	if ( canvasMode === 'view' ) {
+		// We need 'view' to always take priority so 'isDistractionFree'
+		// doesn't bleed over into the view (sidebar) state
+		headerAnimationState = 'view';
+	} else if ( isDistractionFree ) {
+		headerAnimationState = 'isDistractionFree';
+	} else {
+		headerAnimationState = canvasMode; // edit, view, init
+	}
 
-	// Sets the right context for the command center
+	// Sets the right context for the command palette
 	const commandContext =
 		canvasMode === 'edit' && isEditorPage
 			? 'site-editor-edit'
@@ -140,81 +175,113 @@ export default function Layout() {
 					'edit-site-layout',
 					navigateRegionsProps.className,
 					{
+						'is-distraction-free': isDistractionFree && isEditing,
 						'is-full-canvas': isFullCanvas,
 						'is-edit-mode': isEditing,
 						'has-fixed-toolbar': hasFixedToolbar,
 					}
 				) }
 			>
-				<SiteHub ref={ hubRef } className="edit-site-layout__hub" />
-
-				<AnimatePresence initial={ false }>
-					{ isEditorPage && isEditing && (
-						<NavigableRegion
-							className="edit-site-layout__header"
-							ariaLabel={ __( 'Editor top bar' ) }
-							as={ motion.div }
-							animate={ {
-								y: 0,
-							} }
-							initial={ {
-								y: '-100%',
-							} }
-							exit={ {
-								y: '-100%',
-							} }
-							transition={ {
+				<motion.div
+					className="edit-site-layout__header-container"
+					variants={ {
+						isDistractionFree: {
+							opacity: 0,
+							transition: {
 								type: 'tween',
-								duration: disableMotion
-									? 0
-									: ANIMATION_DURATION,
-								ease: 'easeOut',
-							} }
-						>
-							{ isEditing && <Header /> }
-						</NavigableRegion>
-					) }
-				</AnimatePresence>
+								delay: 0.8,
+								delayChildren: 0.8,
+							}, // How long to wait before the header exits
+						},
+						isDistractionFreeHovering: {
+							opacity: 1,
+							transition: {
+								type: 'tween',
+								delay: 0.2,
+								delayChildren: 0.2,
+							}, // How long to wait before the header shows
+						},
+						view: { opacity: 1 },
+						edit: { opacity: 1 },
+					} }
+					whileHover={
+						isDistractionFree
+							? 'isDistractionFreeHovering'
+							: undefined
+					}
+					animate={ headerAnimationState }
+				>
+					<SiteHub
+						as={ motion.div }
+						variants={ {
+							isDistractionFree: { x: '-100%' },
+							isDistractionFreeHovering: { x: 0 },
+							view: { x: 0 },
+							edit: { x: 0 },
+						} }
+						ref={ hubRef }
+						isTransparent={ isResizableFrameOversized }
+						className="edit-site-layout__hub"
+					/>
 
-				<div className="edit-site-layout__content">
 					<AnimatePresence initial={ false }>
-						{
-							<motion.div
-								initial={ {
-									opacity: 0,
+						{ isEditorPage && isEditing && (
+							<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 },
 								} }
-								animate={
-									showSidebar
-										? { opacity: 1, display: 'block' }
-										: {
-												opacity: 0,
-												transitionEnd: {
-													display: 'none',
-												},
-										  }
-								}
 								exit={ {
-									opacity: 0,
+									y: '-100%',
+								} }
+								initial={ {
+									opacity: isDistractionFree ? 1 : 0,
+									y: isDistractionFree ? 0 : '-100%',
 								} }
 								transition={ {
 									type: 'tween',
-									duration:
-										// Disable transition in mobile to emulate a full page transition.
-										disableMotion || isMobileViewport
-											? 0
-											: ANIMATION_DURATION,
+									duration: disableMotion ? 0 : 0.2,
 									ease: 'easeOut',
 								} }
-								className="edit-site-layout__sidebar"
 							>
-								<NavigableRegion
-									ariaLabel={ __( 'Navigation' ) }
-								>
-									<Sidebar />
-								</NavigableRegion>
-							</motion.div>
-						}
+								<Header />
+							</NavigableRegion>
+						) }
 					</AnimatePresence>
+				</motion.div>
+
+				<div className="edit-site-layout__content">
+					<motion.div
+						// The sidebar is needed for routing on mobile
+						// (https://github.com/WordPress/gutenberg/pull/51558/files#r1231763003),
+						// so we can't remove the element entirely. Using `inert` will make
+						// it inaccessible to screen readers and keyboard navigation.
+						inert={ showSidebar ? undefined : 'inert' }
+						animate={ { opacity: showSidebar ? 1 : 0 } }
+						transition={ {
+							type: 'tween',
+							duration:
+								// Disable transition in mobile to emulate a full page transition.
+								disableMotion || isMobileViewport
+									? 0
+									: ANIMATION_DURATION,
+							ease: 'easeOut',
+						} }
+						className="edit-site-layout__sidebar"
+					>
+						<NavigableRegion ariaLabel={ __( 'Navigation' ) }>
+							<Sidebar />
+						</NavigableRegion>
+					</motion.div>
 
 					<SavePanel />
 
@@ -251,7 +318,13 @@ export default function Layout() {
 											}
 											initial={ false }
 											layout="position"
-											className="edit-site-layout__canvas"
+											className={ classnames(
+												'edit-site-layout__canvas',
+												{
+													'is-right-aligned':
+														isResizableFrameOversized,
+												}
+											) }
 											transition={ {
 												type: 'tween',
 												duration:
@@ -267,7 +340,12 @@ export default function Layout() {
 														! isEditorLoading
 													}
 													isFullWidth={ isEditing }
-													oversizedClassName="edit-site-layout__resizable-frame-oversized"
+													isOversized={
+														isResizableFrameOversized
+													}
+													setIsOversized={
+														setIsResizableFrameOversized
+													}
 													innerContentStyle={ {
 														background:
 															gradientValue ??

package/src/components/layout/style.scss

@@ -1,7 +1,7 @@
 .edit-site-layout {
 	height: 100%;
 	background: $gray-900;
-	color: $white;
+	color: $gray-400;
 	display: flex;
 	flex-direction: column;
 }
@@ -36,6 +36,10 @@
 	}
 }
 
+.edit-site-layout__header-container {
+	z-index: z-index(".edit-site-layout__header-container");
+}
+
 .edit-site-layout__header {
 	height: $header-height;
 	display: flex;
@@ -57,6 +61,7 @@
 .edit-site-layout__sidebar {
 	z-index: z-index(".edit-site-layout__sidebar");
 	width: 100vw;
+	flex-shrink: 0;
 
 	@include break-medium {
 		width: $nav-sidebar-width;
@@ -116,7 +121,7 @@
 	justify-content: center;
 	align-items: center;
 
-	&:has(.edit-site-layout__resizable-frame-oversized) {
+	&.is-right-aligned {
 		justify-content: flex-end;
 	}
 
@@ -249,6 +254,9 @@
 	// so the fixed toolbar can be positioned on top of it
 	// but only on desktop
 	@include break-medium() {
+		.edit-site-layout__canvas-container {
+			z-index: 5;
+		}
 		.edit-site-site-hub {
 			z-index: 4;
 		}
@@ -258,3 +266,42 @@
 	}
 }
 
+.is-edit-mode.is-distraction-free {
+
+	.edit-site-layout__header-container {
+		height: $header-height;
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: z-index(".edit-site-layout__header-container");
+		width: 100%;
+
+		// We need ! important because we override inline styles
+		// set by the motion component.
+		&:focus-within {
+			opacity: 1 !important;
+			div {
+				transform: translateX(0) translateY(0) translateZ(0) !important;
+			}
+
+			.edit-site-layout__header {
+				opacity: 1 !important;
+			}
+		}
+	}
+
+	.edit-site-site-hub,
+	.edit-site-layout__header {
+		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%;
+	}
+
+}

package/src/components/page/header.js

@@ -18,7 +18,7 @@ export default function Header( { title, subTitle, actions } ) {
 		<HStack as="header" alignment="left" className="edit-site-page-header">
 			<FlexBlock className="edit-site-page-header__page-title">
 				<Heading
-					as="h1"
+					as="h2"
 					level={ 4 }
 					className="edit-site-page-header__title"
 				>

package/src/components/page/index.js

@@ -7,6 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { NavigableRegion } from '@wordpress/interface';
+import { EditorSnackbars } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -32,7 +33,10 @@ export default function Page( {
 					actions={ actions }
 				/>
 			) }
-			<div className="edit-site-page-content">{ children }</div>
+			<div className="edit-site-page-content">
+				{ children }
+				<EditorSnackbars />
+			</div>
 		</NavigableRegion>
 	);
 }

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

@@ -8,7 +8,7 @@ import { moreVertical } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import DeletePageMenuItem from './delete-page-menu-item';
+import TrashPageMenuItem from './trash-page-menu-item';
 
 export default function PageActions( {
 	postId,
@@ -25,7 +25,7 @@ export default function PageActions( {
 		>
 			{ () => (
 				<MenuGroup>
-					<DeletePageMenuItem
+					<TrashPageMenuItem
 						postId={ postId }
 						onRemove={ onRemove }
 					/>

package/src/components/page-actions/{delete-page-menu-item.js → trash-page-menu-item.js}

@@ -3,17 +3,12 @@
  */
 import { useDispatch, useSelect } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
-import { useState } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { __, sprintf } from '@wordpress/i18n';
-import {
-	MenuItem,
-	__experimentalConfirmDialog as ConfirmDialog,
-} from '@wordpress/components';
+import { MenuItem } from '@wordpress/components';
 import { store as noticesStore } from '@wordpress/notices';
 
-export default function DeletePageMenuItem( { postId, onRemove } ) {
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
+export default function TrashPageMenuItem( { postId, onRemove } ) {
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
 	const { deleteEntityRecord } = useDispatch( coreStore );
@@ -34,12 +29,12 @@ export default function DeletePageMenuItem( { postId, onRemove } ) {
 			createSuccessNotice(
 				sprintf(
 					/* translators: The page's title. */
-					__( '"%s" deleted.' ),
+					__( '"%s" moved to the Trash.' ),
 					decodeEntities( page.title.rendered )
 				),
 				{
 					type: 'snackbar',
-					id: 'edit-site-page-removed',
+					id: 'edit-site-page-trashed',
 				}
 			);
 			onRemove?.();
@@ -47,25 +42,18 @@ export default function DeletePageMenuItem( { postId, onRemove } ) {
 			const errorMessage =
 				error.message && error.code !== 'unknown_error'
 					? error.message
-					: __( 'An error occurred while deleting the page.' );
+					: __(
+							'An error occurred while moving the page to the trash.'
+					  );
 
 			createErrorNotice( errorMessage, { type: 'snackbar' } );
-		} finally {
-			setIsModalOpen( false );
 		}
 	}
 	return (
 		<>
-			<MenuItem onClick={ () => setIsModalOpen( true ) } isDestructive>
-				{ __( 'Delete' ) }
+			<MenuItem onClick={ () => removePage() } isDestructive>
+				{ __( 'Move to Trash' ) }
 			</MenuItem>
-			<ConfirmDialog
-				isOpen={ isModalOpen }
-				onConfirm={ removePage }
-				onCancel={ () => setIsModalOpen( false ) }
-			>
-				{ __( 'Are you sure you want to delete this page?' ) }
-			</ConfirmDialog>
 		</>
 	);
 }

package/src/components/page-content-focus-manager/back-to-page-notification.js

@@ -25,8 +25,11 @@ export default function BackToPageNotification() {
  * switches from focusing on editing page content to editing a template.
  */
 export function useBackToPageNotification() {
-	const hasPageContentFocus = useSelect(
-		( select ) => select( editSiteStore ).hasPageContentFocus(),
+	const { isPage, hasPageContentFocus } = useSelect(
+		( select ) => ( {
+			isPage: select( editSiteStore ).isPage(),
+			hasPageContentFocus: select( editSiteStore ).hasPageContentFocus(),
+		} ),
 		[]
 	);
 
@@ -39,6 +42,7 @@ export function useBackToPageNotification() {
 	useEffect( () => {
 		if (
 			! alreadySeen.current &&
+			isPage &&
 			prevHasPageContentFocus.current &&
 			! hasPageContentFocus
 		) {
@@ -57,6 +61,7 @@ export function useBackToPageNotification() {
 		prevHasPageContentFocus.current = hasPageContentFocus;
 	}, [
 		alreadySeen,
+		isPage,
 		prevHasPageContentFocus,
 		hasPageContentFocus,
 		createInfoNotice,

package/src/components/page-content-focus-manager/disable-non-page-content-blocks.js

@@ -10,16 +10,22 @@ import { useEffect } from '@wordpress/element';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import { PAGE_CONTENT_BLOCK_TYPES } from './constants';
 
 const { useBlockEditingMode } = unlock( blockEditorPrivateApis );
 
+const PAGE_CONTENT_BLOCK_TYPES = [
+	'core/post-title',
+	'core/post-featured-image',
+	'core/post-content',
+];
+
 /**
  * Component that when rendered, makes it so that the site editor allows only
  * page content to be edited.
  */
 export default function DisableNonPageContentBlocks() {
 	useDisableNonPageContentBlocks();
+	return null;
 }
 
 /**
@@ -43,8 +49,11 @@ export function useDisableNonPageContentBlocks() {
 
 const withDisableNonPageContentBlocks = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
-		const isContent = PAGE_CONTENT_BLOCK_TYPES.includes( props.name );
-		const mode = isContent ? 'contentOnly' : undefined;
+		const isDescendentOfQueryLoop = !! props.context.queryId;
+		const isPageContent =
+			PAGE_CONTENT_BLOCK_TYPES.includes( props.name ) &&
+			! isDescendentOfQueryLoop;
+		const mode = isPageContent ? 'contentOnly' : undefined;
 		useBlockEditingMode( mode );
 		return <BlockEdit { ...props } />;
 	},

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

@@ -6,8 +6,9 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 /**
  * Internal dependencies
  */
+import PagePatterns from '../page-patterns';
+import PageTemplateParts from '../page-template-parts';
 import PageTemplates from '../page-templates';
-import PageLibrary from '../page-library';
 import { unlock } from '../../lock-unlock';
 
 const { useLocation } = unlock( routerPrivateApis );
@@ -19,8 +20,10 @@ export default function PageMain() {
 
 	if ( path === '/wp_template/all' ) {
 		return <PageTemplates />;
-	} else if ( path === '/library' ) {
-		return <PageLibrary />;
+	} else if ( path === '/wp_template_part/all' ) {
+		return <PageTemplateParts />;
+	} else if ( path === '/patterns' ) {
+		return <PagePatterns />;
 	}
 
 	return null;