@wordpress/edit-site 5.13.0 → 5.14.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,
@@ -110,7 +122,28 @@ export default function Layout() {
 	const [ isResizing ] = useState( false );
 	const isEditorLoading = useIsSiteEditorLoading();
 
-	// Sets the right context for the command center
+	// 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 palette
 	const commandContext =
 		canvasMode === 'edit' && isEditorPage
 			? 'site-editor-edit'
@@ -140,81 +173,112 @@ 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 }
+						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 />
 

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;
@@ -249,6 +253,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 +265,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/delete-page-menu-item.js

@@ -63,6 +63,7 @@ export default function DeletePageMenuItem( { postId, onRemove } ) {
 				isOpen={ isModalOpen }
 				onConfirm={ removePage }
 				onCancel={ () => setIsModalOpen( false ) }
+				confirmButtonText={ __( 'Delete' ) }
 			>
 				{ __( '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-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;

package/src/components/{page-library → page-patterns}/grid-item.js

@@ -12,15 +12,22 @@ import {
 	DropdownMenu,
 	MenuGroup,
 	MenuItem,
-	__experimentalHeading as Heading,
 	__experimentalHStack as HStack,
 	__unstableCompositeItem as CompositeItem,
+	Tooltip,
+	Flex,
 } from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
-import { useState } from '@wordpress/element';
+import { useState, useId } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { Icon, moreHorizontal } from '@wordpress/icons';
+import {
+	Icon,
+	header,
+	footer,
+	symbolFilled,
+	moreHorizontal,
+	lockSmall,
+} from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
 import { DELETE, BACKSPACE } from '@wordpress/keycodes';
@@ -31,9 +38,10 @@ import { DELETE, BACKSPACE } from '@wordpress/keycodes';
 import { PATTERNS, USER_PATTERNS } from './utils';
 import { useLink } from '../routes/link';
 
+const THEME_PATTERN_TOOLTIP = __( 'Theme patterns cannot be edited.' );
+
 export default function GridItem( { categoryId, composite, icon, item } ) {
-	const instanceId = useInstanceId( GridItem );
-	const descriptionId = `edit-site-library__pattern-description-${ instanceId }`;
+	const descriptionId = useId();
 	const [ isDeleteDialogOpen, setIsDeleteDialogOpen ] = useState( false );
 
 	const { __experimentalDeleteReusableBlock } =
@@ -46,14 +54,19 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 		postId: item.type === USER_PATTERNS ? item.id : item.name,
 		categoryId,
 		categoryType: item.type,
-		canvas: 'edit',
 	} );
 
+	const onKeyDown = ( event ) => {
+		if ( DELETE === event.keyCode || BACKSPACE === event.keyCode ) {
+			setIsDeleteDialogOpen( true );
+		}
+	};
+
 	const isEmpty = ! item.blocks?.length;
-	const patternClassNames = classnames( 'edit-site-library__pattern', {
+	const patternClassNames = classnames( 'edit-site-patterns__pattern', {
 		'is-placeholder': isEmpty,
 	} );
-	const previewClassNames = classnames( 'edit-site-library__preview', {
+	const previewClassNames = classnames( 'edit-site-patterns__preview', {
 		'is-inactive': item.type === PATTERNS,
 	} );
 
@@ -72,14 +85,27 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 		}
 	};
 
-	let ariaDescription;
-	if ( item.type === USER_PATTERNS ) {
+	const isUserPattern = item.type === USER_PATTERNS;
+	const ariaDescriptions = [];
+	if ( isUserPattern ) {
 		// User patterns don't have descriptions, but can be edited and deleted, so include some help text.
-		ariaDescription = __(
-			'Press Enter to edit, or Delete to delete the pattern.'
+		ariaDescriptions.push(
+			__( 'Press Enter to edit, or Delete to delete the pattern.' )
 		);
 	} else if ( item.description ) {
-		ariaDescription = item.description;
+		ariaDescriptions.push( item.description );
+	}
+	if ( item.type === PATTERNS ) {
+		ariaDescriptions.push( THEME_PATTERN_TOOLTIP );
+	}
+
+	let itemIcon = icon;
+	if ( categoryId === 'header' ) {
+		itemIcon = header;
+	} else if ( categoryId === 'footer' ) {
+		itemIcon = footer;
+	} else if ( categoryId === 'uncategorized' ) {
+		itemIcon = symbolFilled;
 	}
 
 	return (
@@ -91,53 +117,76 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 					as="div"
 					{ ...composite }
 					onClick={ item.type !== PATTERNS ? onClick : undefined }
+					onKeyDown={ isUserPattern ? onKeyDown : undefined }
 					aria-label={ item.title }
 					aria-describedby={
-						ariaDescription ? descriptionId : undefined
+						ariaDescriptions.length
+							? ariaDescriptions
+									.map(
+										( _, index ) =>
+											`${ descriptionId }-${ index }`
+									)
+									.join( ' ' )
+							: undefined
 					}
-					onKeyDown={ ( event ) => {
-						if (
-							DELETE === event.keyCode ||
-							BACKSPACE === event.keyCode
-						) {
-							setIsDeleteDialogOpen( true );
-						}
-					} }
 				>
 					{ isEmpty && __( 'Empty pattern' ) }
 					{ ! isEmpty && <BlockPreview blocks={ item.blocks } /> }
 				</CompositeItem>
-				{ ariaDescription && (
+				{ ariaDescriptions.map( ( ariaDescription, index ) => (
 					<div
-						aria-hidden="true"
-						style={ { display: 'none' } }
-						id={ descriptionId }
+						key={ index }
+						hidden
+						id={ `${ descriptionId }-${ index }` }
 					>
 						{ ariaDescription }
 					</div>
-				) }
+				) ) }
 				<HStack
 					aria-hidden="true"
-					className="edit-site-library__footer"
+					className="edit-site-patterns__footer"
 					justify="space-between"
 				>
 					<HStack
 						alignment="center"
 						justify="left"
 						spacing={ 3 }
-						className="edit-site-library__pattern-title"
+						className="edit-site-patterns__pattern-title"
 					>
-						{ icon && <Icon icon={ icon } /> }
-						<Heading level={ 5 }>{ item.title }</Heading>
+						{ icon && (
+							<Icon
+								className="edit-site-patterns__pattern-icon"
+								icon={ itemIcon }
+							/>
+						) }
+						<Flex as="span" gap={ 0 } justify="left">
+							{ item.title }
+							{ item.type === PATTERNS && (
+								<Tooltip
+									position="top center"
+									text={ __(
+										'Theme patterns cannot be edited.'
+									) }
+								>
+									<span className="edit-site-patterns__pattern-lock-icon">
+										<Icon
+											style={ { fill: 'currentcolor' } }
+											icon={ lockSmall }
+											size={ 24 }
+										/>
+									</span>
+								</Tooltip>
+							) }
+						</Flex>
 					</HStack>
 					{ item.type === USER_PATTERNS && (
 						<DropdownMenu
 							icon={ moreHorizontal }
 							label={ __( 'Actions' ) }
-							className="edit-site-library__dropdown"
+							className="edit-site-patterns__dropdown"
 							popoverProps={ { placement: 'bottom-end' } }
 							toggleProps={ {
-								className: 'edit-site-library__button',
+								className: 'edit-site-patterns__button',
 								isSmall: true,
 								describedBy: sprintf(
 									/* translators: %s: pattern name */

package/src/components/{page-library → page-patterns}/grid.js

@@ -22,7 +22,7 @@ export default function Grid( { categoryId, label, icon, items } ) {
 		<Composite
 			{ ...composite }
 			role="listbox"
-			className="edit-site-library__grid"
+			className="edit-site-patterns__grid"
 			aria-label={ label }
 		>
 			{ items.map( ( item ) => (

package/src/components/{page-library → page-patterns}/index.js

@@ -11,16 +11,16 @@ import { getQueryArgs } from '@wordpress/url';
 import { DEFAULT_CATEGORY, DEFAULT_TYPE } from './utils';
 import Page from '../page';
 import PatternsList from './patterns-list';
-import useLibrarySettings from './use-library-settings';
+import usePatternSettings from './use-pattern-settings';
 import { unlock } from '../../lock-unlock';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 
-export default function PageLibrary() {
+export default function PagePatterns() {
 	const { categoryType, categoryId } = getQueryArgs( window.location.href );
 	const type = categoryType || DEFAULT_TYPE;
 	const category = categoryId || DEFAULT_CATEGORY;
-	const settings = useLibrarySettings();
+	const settings = usePatternSettings();
 
 	// Wrap everything in a block editor provider.
 	// This ensures 'styles' that are needed for the previews are synced
@@ -28,8 +28,8 @@ export default function PageLibrary() {
 	return (
 		<ExperimentalBlockEditorProvider settings={ settings }>
 			<Page
-				className="edit-site-library"
-				title={ __( 'Library content' ) }
+				className="edit-site-patterns"
+				title={ __( 'Patterns content' ) }
 				hideTitleFromUI
 			>
 				<PatternsList type={ type } categoryId={ category } />

package/src/components/{page-library → page-patterns}/no-patterns.js

@@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
 
 export default function NoPatterns() {
 	return (
-		<div className="edit-site-library__no-results">
+		<div className="edit-site-patterns__no-results">
 			{ __( 'No patterns found.' ) }
 		</div>
 	);