@wordpress/edit-site 6.0.0 → 6.1.0

package/src/components/layout/index.js

@@ -16,100 +16,65 @@ import {
 	useReducedMotion,
 	useViewportMatch,
 	useResizeObserver,
+	usePrevious,
 } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
+import { useState, useRef, useEffect } from '@wordpress/element';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import {
-	CommandMenu,
-	privateApis as commandsPrivateApis,
-} from '@wordpress/commands';
-import { store as preferencesStore } from '@wordpress/preferences';
-import {
-	privateApis as blockEditorPrivateApis,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
+import { CommandMenu } from '@wordpress/commands';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import {
 	EditorSnackbars,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
+import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
 
 /**
  * Internal dependencies
  */
 import ErrorBoundary from '../error-boundary';
 import { store as editSiteStore } from '../../store';
-import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
 import SiteHub from '../site-hub';
 import ResizableFrame from '../resizable-frame';
-import useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';
 import { unlock } from '../../lock-unlock';
 import SavePanel from '../save-panel';
 import KeyboardShortcutsRegister from '../keyboard-shortcuts/register';
 import KeyboardShortcutsGlobal from '../keyboard-shortcuts/global';
-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';
+import useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';
 
 const { useCommands } = unlock( coreCommandsPrivateApis );
-const { useCommandContext } = unlock( commandsPrivateApis );
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 const { NavigableRegion } = unlock( editorPrivateApis );
 
 const ANIMATION_DURATION = 0.3;
 
-export default function Layout() {
-	// This ensures the edited entity id and type are initialized properly.
-	useInitEditedEntityFromURL();
+export default function Layout( { route } ) {
 	useSyncCanvasModeWithURL();
 	useCommands();
-	useEditModeCommands();
-	useCommonCommands();
-
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-
-	const {
-		isDistractionFree,
-		hasFixedToolbar,
-		hasBlockSelected,
-		canvasMode,
-		previousShortcut,
-		nextShortcut,
-		hasBlockBreadcrumbs,
-	} = useSelect( ( select ) => {
-		const { getAllShortcutKeyCombinations } = select(
-			keyboardShortcutsStore
-		);
-		const { getCanvasMode } = unlock( select( editSiteStore ) );
-		return {
-			canvasMode: getCanvasMode(),
-			previousShortcut: getAllShortcutKeyCombinations(
-				'core/editor/previous-region'
-			),
-			nextShortcut: getAllShortcutKeyCombinations(
-				'core/editor/next-region'
-			),
-			hasFixedToolbar: select( preferencesStore ).get(
-				'core',
-				'fixedToolbar'
-			),
-			isDistractionFree: select( preferencesStore ).get(
-				'core',
-				'distractionFree'
-			),
-			hasBlockBreadcrumbs: select( preferencesStore ).get(
-				'core',
-				'showBlockBreadcrumbs'
-			),
-			hasBlockSelected:
-				select( blockEditorStore ).getBlockSelectionStart(),
-		};
-	}, [] );
+	const toggleRef = useRef();
+	const { canvasMode, previousShortcut, nextShortcut } = useSelect(
+		( select ) => {
+			const { getAllShortcutKeyCombinations } = select(
+				keyboardShortcutsStore
+			);
+			const { getCanvasMode } = unlock( select( editSiteStore ) );
+			return {
+				canvasMode: getCanvasMode(),
+				previousShortcut: getAllShortcutKeyCombinations(
+					'core/editor/previous-region'
+				),
+				nextShortcut: getAllShortcutKeyCombinations(
+					'core/editor/next-region'
+				),
+			};
+		},
+		[]
+	);
 	const navigateRegionsProps = useNavigateRegions( {
 		previous: previousShortcut,
 		next: nextShortcut,
@@ -120,45 +85,21 @@ export default function Layout() {
 	const isEditorLoading = useIsSiteEditorLoading();
 	const [ isResizableFrameOversized, setIsResizableFrameOversized ] =
 		useState( false );
-	const { key: routeKey, areas, widths } = useLayoutAreas();
+	const { key: routeKey, areas, widths } = route;
 	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
-	// 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
-	let commandContext = 'site-editor';
-
-	if ( canvasMode === 'edit' ) {
-		commandContext = 'entity-edit';
-	}
-	if ( hasBlockSelected ) {
-		commandContext = 'block-selection-edit';
-	}
-	useCommandContext( commandContext );
-
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
 	const [ gradientValue ] = useGlobalStyle( 'color.gradient' );
+	const previousCanvaMode = usePrevious( canvasMode );
+	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
@@ -180,53 +121,10 @@ export default function Layout() {
 					'edit-site-layout',
 					navigateRegionsProps.className,
 					{
-						'is-distraction-free':
-							isDistractionFree && canvasMode === 'edit',
 						'is-full-canvas': canvasMode === 'edit',
-						'has-fixed-toolbar': hasFixedToolbar,
-						'is-block-toolbar-visible': hasBlockSelected,
-						'has-block-breadcrumbs':
-							hasBlockBreadcrumbs &&
-							! isDistractionFree &&
-							canvasMode === 'edit',
 					}
 				) }
 			>
-				<motion.div
-					className="edit-site-layout__header-container"
-					variants={ {
-						isDistractionFree: {
-							opacity: 0,
-							transition: {
-								type: 'tween',
-								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
-						isTransparent={ isResizableFrameOversized }
-						className="edit-site-layout__hub"
-					/>
-				</motion.div>
-
 				<div className="edit-site-layout__content">
 					{ /*
 						The NavigableRegion must always be rendered and not use
@@ -255,6 +153,12 @@ export default function Layout() {
 										} }
 										className="edit-site-layout__sidebar"
 									>
+										<SiteHub
+											ref={ toggleRef }
+											isTransparent={
+												isResizableFrameOversized
+											}
+										/>
 										<SidebarContent routeKey={ routeKey }>
 											{ areas.sidebar }
 										</SidebarContent>

package/src/components/layout/style.scss

@@ -4,39 +4,13 @@
 	color: $gray-400;
 	display: flex;
 	flex-direction: column;
-}
-
-.edit-site-layout__hub {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: calc(100vw - #{$canvas-padding * 2});
-	height: $header-height;
-	z-index: z-index(".edit-site-layout__hub");
-
-	@include break-medium {
-		width: calc(#{$nav-sidebar-width} - #{$grid-unit-15});
-	}
-
-	.edit-site-layout.is-full-canvas & {
-		padding-right: 0;
-		border-radius: 0;
-		width: $header-height;
-		box-shadow: none;
-	}
-}
 
-.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;
+	// Show a dark background in "frame" mode to avoid edge artifacts.
+	&:not(.is-full-canvas) .editor-visual-editor {
+		background: $gray-900;
 	}
 }
 
-.edit-site-layout__header-container {
-	z-index: z-index(".edit-site-layout__header-container");
-}
-
 .edit-site-layout__content {
 	height: 100%;
 	flex-grow: 1;
@@ -158,10 +132,22 @@
 	height: 100%;
 }
 
+/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
+html.canvas-mode-edit-transition::view-transition-group(toggle) {
+	animation-delay: 255ms;
+}
+/* stylelint-enable  */
+
+.edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region .edit-site-layout__view-mode-toggle {
+	display: none;
+}
+
 .edit-site-layout__view-mode-toggle.components-button {
+	/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
+	view-transition-name: toggle;
+	/* stylelint-enable  */
 	position: relative;
 	color: $white;
-	border-radius: 0;
 	height: $header-height;
 	width: $header-height;
 	overflow: hidden;
@@ -169,6 +155,8 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	background: $gray-900;
+	border-radius: 0;
 
 	&:hover,
 	&:active {
@@ -202,7 +190,6 @@
 
 	.edit-site-layout__view-mode-toggle-icon {
 		display: flex;
-		border-radius: $radius-block-ui;
 		height: $grid-unit-80;
 		width: $grid-unit-80;
 		justify-content: center;
@@ -239,33 +226,6 @@
 	}
 }
 
-.edit-site-layout.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-site-hub {
-		position: absolute;
-		top: 0;
-		z-index: z-index(".edit-site-layout__hub");
-	}
-}
-
 .edit-site-layout__area {
 	flex-grow: 1;
 	margin: 0;

package/src/components/page/header.js

@@ -22,6 +22,7 @@ export default function Header( { title, subTitle, actions } ) {
 					level={ 3 }
 					weight={ 500 }
 					className="edit-site-page-header__title"
+					truncate
 				>
 					{ title }
 				</Heading>

package/src/components/page/style.scss

@@ -24,6 +24,12 @@
 
 	.edit-site-page-header__page-title {
 		min-height: $grid-unit-50;
+
+		.components-heading {
+			flex-grow: 1;
+			flex-basis: 0;
+			white-space: nowrap;
+		}
 	}
 
 	.edit-site-page-header__sub-title {

package/src/components/page-patterns/header.js

@@ -58,12 +58,18 @@ export default function PatternsHeader( {
 	}
 
 	return (
-		<VStack className="edit-site-patterns__section-header" spacing={ 0 }>
+		<VStack className="edit-site-patterns__section-header" spacing={ 1 }>
 			<HStack
 				justify="space-between"
 				className="edit-site-patterns__title"
 			>
-				<Heading as="h2" level={ 3 } id={ titleId } weight={ 500 }>
+				<Heading
+					as="h2"
+					level={ 3 }
+					id={ titleId }
+					weight={ 500 }
+					truncate
+				>
 					{ title }
 				</Heading>
 				<HStack expanded={ false }>

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

@@ -86,15 +86,12 @@ const DEFAULT_VIEW = {
 const SYNC_FILTERS = [
 	{
 		value: PATTERN_SYNC_TYPES.full,
-		label: _x( 'Synced', 'Option that shows all synchronized patterns' ),
+		label: _x( 'Synced', 'pattern (singular)' ),
 		description: __( 'Patterns that are kept in sync across the site.' ),
 	},
 	{
 		value: PATTERN_SYNC_TYPES.unsynced,
-		label: _x(
-			'Not synced',
-			'Option that shows all patterns that are not synchronized'
-		),
+		label: _x( 'Not synced', 'pattern (singular)' ),
 		description: __(
 			'Patterns that can be changed freely without affecting the site.'
 		),
@@ -298,13 +295,19 @@ export default function DataviewsPatterns() {
 						<span
 							className={ `edit-site-patterns__field-sync-status-${ item.syncStatus }` }
 						>
-							{ SYNC_FILTERS.find(
-								( { value } ) => value === item.syncStatus
-							)?.label ||
-								SYNC_FILTERS.find(
-									( { value } ) =>
-										value === PATTERN_SYNC_TYPES.unsynced
-								).label }
+							{
+								(
+									SYNC_FILTERS.find(
+										( { value } ) =>
+											value === item.syncStatus
+									) ||
+									SYNC_FILTERS.find(
+										( { value } ) =>
+											value ===
+											PATTERN_SYNC_TYPES.unsynced
+									)
+								).label
+							}
 						</span>
 					);
 				},

package/src/components/page-patterns/style.scss

@@ -98,6 +98,12 @@
 
 		.edit-site-patterns__title {
 			min-height: $grid-unit-50;
+
+			.components-heading {
+				flex-grow: 1;
+				flex-basis: 0;
+				white-space: nowrap;
+			}
 		}
 
 		.edit-site-patterns__sub-title {

package/src/components/pagination/index.js

@@ -12,6 +12,7 @@ import {
 	Button,
 } from '@wordpress/components';
 import { __, _x, _n, sprintf } from '@wordpress/i18n';
+import { previous, chevronLeft, chevronRight, next } from '@wordpress/icons';
 
 export default function Pagination( {
 	currentPage,
@@ -46,19 +47,21 @@ export default function Pagination( {
 				<Button
 					variant={ buttonVariant }
 					onClick={ () => changePage( 1 ) }
+					__experimentalIsFocusable
 					disabled={ disabled || currentPage === 1 }
-					aria-label={ __( 'First page' ) }
-				>
-					«
-				</Button>
+					label={ __( 'First page' ) }
+					icon={ previous }
+					size="compact"
+				/>
 				<Button
 					variant={ buttonVariant }
 					onClick={ () => changePage( currentPage - 1 ) }
+					__experimentalIsFocusable
 					disabled={ disabled || currentPage === 1 }
-					aria-label={ __( 'Previous page' ) }
-				>
-					‹
-				</Button>
+					label={ __( 'Previous page' ) }
+					icon={ chevronLeft }
+					size="compact"
+				/>
 			</HStack>
 			<Text variant="muted">
 				{ sprintf(
@@ -72,19 +75,21 @@ export default function Pagination( {
 				<Button
 					variant={ buttonVariant }
 					onClick={ () => changePage( currentPage + 1 ) }
+					__experimentalIsFocusable
 					disabled={ disabled || currentPage === numPages }
-					aria-label={ __( 'Next page' ) }
-				>
-					›
-				</Button>
+					label={ __( 'Next page' ) }
+					icon={ chevronRight }
+					size="compact"
+				/>
 				<Button
 					variant={ buttonVariant }
 					onClick={ () => changePage( numPages ) }
+					__experimentalIsFocusable
 					disabled={ disabled || currentPage === numPages }
-					aria-label={ __( 'Last page' ) }
-				>
-					»
-				</Button>
+					label={ __( 'Last page' ) }
+					icon={ next }
+					size="compact"
+				/>
 			</HStack>
 		</HStack>
 	);

package/src/components/posts-app/index.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	UnsavedChangesWarning,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import Layout from '../layout';
+import Page from '../page';
+import { unlock } from '../../lock-unlock';
+
+const { RouterProvider } = unlock( routerPrivateApis );
+const { GlobalStylesProvider } = unlock( editorPrivateApis );
+
+const defaultRoute = {
+	key: 'index',
+	areas: {
+		sidebar: 'Empty Sidebar',
+		content: <Page>Welcome to Posts</Page>,
+		preview: undefined,
+		mobile: <Page>Welcome to Posts</Page>,
+	},
+};
+
+export default function PostsApp() {
+	return (
+		<GlobalStylesProvider>
+			<UnsavedChangesWarning />
+			<RouterProvider>
+				<Layout route={ defaultRoute } />
+			</RouterProvider>
+		</GlobalStylesProvider>
+	);
+}

package/src/components/sidebar/style.scss

@@ -3,7 +3,7 @@
 	overflow-y: auto;
 }
 
-@keyframes slide-from-right {
+@keyframes local--slide-from-right {
 	from {
 		transform: translateX(50px);
 		opacity: 0;
@@ -14,7 +14,7 @@
 	}
 }
 
-@keyframes slide-from-left {
+@keyframes local--slide-from-left {
 	from {
 		transform: translateX(-50px);
 		opacity: 0;
@@ -47,11 +47,11 @@
 	}
 
 	&.slide-from-left {
-		animation-name: slide-from-left;
+		animation-name: local--slide-from-left;
 	}
 
 	&.slide-from-right {
-		animation-name: slide-from-right;
+		animation-name: local--slide-from-right;
 	}
 
 }

package/src/components/sidebar-dataviews/dataview-item.js

@@ -35,11 +35,15 @@ export default function DataViewItem( {
 	const iconToUse =
 		icon || VIEW_LAYOUTS.find( ( v ) => v.type === type ).icon;
 
+	let activeView = isCustom ? customViewId : slug;
+	if ( activeView === 'all' ) {
+		activeView = undefined;
+	}
 	const linkInfo = useLink( {
 		postType,
 		layout,
-		activeView: isCustom ? customViewId : slug,
-		isCustom: isCustom ? 'true' : 'false',
+		activeView,
+		isCustom: isCustom ? 'true' : undefined,
 	} );
 	return (
 		<HStack

package/src/components/sidebar-navigation-screen/index.js

@@ -76,7 +76,7 @@ export default function SidebarNavigationScreen( {
 				justify="flex-start"
 			>
 				<HStack
-					spacing={ 4 }
+					spacing={ 3 }
 					alignment="flex-start"
 					className="edit-site-sidebar-navigation-screen__title-icon"
 				>

package/src/components/sidebar-navigation-screen/style.scss

@@ -59,7 +59,7 @@
 	position: sticky;
 	top: 0;
 	background: $gray-900;
-	padding-top: $grid-unit-60 + $header-height;
+	padding-top: $grid-unit-60;
 	margin-bottom: $grid-unit-10;
 	padding-bottom: $grid-unit-10;
 	z-index: z-index(".edit-site-sidebar-navigation-screen__title-icon");
@@ -67,8 +67,8 @@
 
 .edit-site-sidebar-navigation-screen__title {
 	flex-grow: 1;
-	padding: $grid-unit-15 * 0.5 0 0 0;
 	overflow-wrap: break-word;
+	padding: $grid-unit-05 * 0.5 0 0 0;
 }
 
 .edit-site-sidebar-navigation-screen__actions {

package/src/components/sidebar-navigation-screen-navigation-menu/delete-confirm-dialog.js

@@ -16,6 +16,7 @@ export default function DeleteConfirmDialog( { onClose, onConfirm } ) {
 			} }
 			onCancel={ onClose }
 			confirmButtonText={ __( 'Delete' ) }
+			size="medium"
 		>
 			{ __( 'Are you sure you want to delete this Navigation Menu?' ) }
 		</ConfirmDialog>

package/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js

@@ -43,6 +43,7 @@ export default function RenameModal( { menuTitle, onClose, onSave } ) {
 
 						<Button
 							__next40pxDefaultSize
+							__experimentalIsFocusable
 							disabled={ ! isEditedMenuTitleValid }
 							variant="primary"
 							type="submit"