@wordpress/edit-site 5.10.0 → 5.11.0

package/src/components/header-edit-mode/document-actions/style.scss

@@ -1,79 +1,48 @@
 .edit-site-document-actions {
 	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	padding: 0 $grid-unit;
-	height: 100%;
+	align-items: center;
+	gap: $grid-unit;
+	height: $button-size;
+	padding: $grid-unit;
+	justify-content: space-between;
 	// Flex items will, by default, refuse to shrink below a minimum
 	// intrinsic width. In order to shrink this flexbox item, and
 	// subsequently truncate child text, we set an explicit min-width.
 	// See https://dev.w3.org/csswg/css-flexbox/#min-size-auto
 	min-width: 0;
+	background: $gray-100;
+	border-radius: 4px;
+	width: min(100%, 450px);
 
-	.edit-site-document-actions__title-wrapper {
-		display: flex;
-		flex-direction: row;
-		justify-content: center;
-		align-items: center;
-
-		// See comment above about min-width
-		min-width: 0;
-
-		.components-dropdown {
-			display: inline-flex;
-			margin-left: $grid-unit-05;
-
-			.components-button {
-				min-width: 0;
-				padding: 0;
-			}
-		}
-	}
-
-	.edit-site-document-actions__title-wrapper > h1 {
-		margin: 0;
-
-		// See comment above about min-width
-		min-width: 0;
-	}
-
-	.edit-site-document-actions__title {
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
+	&:hover {
 		color: currentColor;
+		background: $gray-200;
 	}
+}
 
-	.edit-site-document-actions__secondary-item {
-		display: flex;
-		align-items: center;
+.edit-site-document-actions__title {
+	flex-grow: 1;
+	color: var(--wp-block-synced-color);
+	overflow: hidden;
+
+	h1 {
+		color: var(--wp-block-synced-color);
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
-		max-width: 0;
-		opacity: 0;
-		padding: 0;
-		transition: all ease 0.2s;
-		background: rgba(var(--wp-block-synced-color--rgb), 0.04);
-		border-radius: 2px;
-		@include reduce-motion(transition);
-
-		.block-editor-block-icon.has-colors {
-			color: var(--wp-block-synced-color);
-		}
 	}
+}
 
-	&.has-secondary-label {
-		.edit-site-document-actions__secondary-item {
-			opacity: 1;
-			padding: 0 4px;
-			max-width: 180px;
-			margin-left: 6px;
-		}
+.edit-site-document-actions__shortcut {
+	flex-shrink: 0;
+	color: $gray-700;
+	width: #{$grid-unit * 4.5};
+	&:hover {
+		color: $gray-700;
 	}
 }
 
-.edit-site-document-actions__info-dropdown > .components-popover__content {
-	padding: 0;
-	min-width: 240px;
+.edit-site-document-actions__left {
+	min-width: $button-size;
+	flex-shrink: 0;
 }

package/src/components/header-edit-mode/index.js

@@ -14,6 +14,7 @@ import {
 	__experimentalPreviewOptions as PreviewOptions,
 	NavigableToolbar,
 	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { PinnedItems } from '@wordpress/interface';
@@ -44,6 +45,8 @@ import {
 } from '../editor-canvas-container';
 import { unlock } from '../../private-apis';
 
+const { useShouldContextualToolbarShow } = unlock( blockEditorPrivateApis );
+
 const preventDefault = ( event ) => {
 	event.preventDefault();
 };
@@ -125,6 +128,18 @@ export default function HeaderEditMode() {
 		[ setIsListViewOpened, isListViewOpen ]
 	);
 
+	const {
+		shouldShowContextualToolbar,
+		canFocusHiddenToolbar,
+		fixedToolbarCanBeFocused,
+	} = useShouldContextualToolbarShow();
+	// If there's a block toolbar to be focused, disable the focus shortcut for the document toolbar.
+	// There's a fixed block toolbar when the fixed toolbar option is enabled or when the browser width is less than the large viewport.
+	const blockToolbarCanBeFocused =
+		shouldShowContextualToolbar ||
+		canFocusHiddenToolbar ||
+		fixedToolbarCanBeFocused;
+
 	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
 
 	const isFocusMode = templateType === 'wp_template_part';
@@ -150,6 +165,9 @@ export default function HeaderEditMode() {
 				<NavigableToolbar
 					className="edit-site-header-edit-mode__start"
 					aria-label={ __( 'Document tools' ) }
+					shouldUseKeyboardFocusShortcut={
+						! blockToolbarCanBeFocused
+					}
 				>
 					<div className="edit-site-header-edit-mode__toolbar">
 						<ToolbarItem

package/src/components/header-edit-mode/style.scss

@@ -27,6 +27,7 @@ $header-toolbar-min-width: 335px;
 		align-items: center;
 		height: 100%;
 		flex-grow: 1;
+		margin: 0 $grid-unit-10;
 		justify-content: center;
 		// Flex items will, by default, refuse to shrink below a minimum
 		// intrinsic width. In order to shrink this flexbox item, and

package/src/components/layout/hooks.js

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import useEditedEntityRecord from '../use-edited-entity-record';
+
+export function useIsSiteEditorLoading() {
+	const { isLoaded: hasLoadedPost } = useEditedEntityRecord();
+	const [ loaded, setLoaded ] = useState( false );
+	const inLoadingPause = useSelect(
+		( select ) => {
+			const hasResolvingSelectors =
+				select( coreStore ).hasResolvingSelectors();
+			return ! loaded && ! hasResolvingSelectors;
+		},
+		[ loaded ]
+	);
+
+	useEffect( () => {
+		if ( inLoadingPause ) {
+			/*
+			 * We're using an arbitrary 1s timeout here to catch brief moments
+			 * without any resolving selectors that would result in displaying
+			 * brief flickers of loading state and loaded state.
+			 *
+			 * It's worth experimenting with different values, since this also
+			 * adds 1s of artificial delay after loading has finished.
+			 */
+			const timeout = setTimeout( () => {
+				setLoaded( true );
+			}, 1000 );
+
+			return () => {
+				clearTimeout( timeout );
+			};
+		}
+	}, [ inLoadingPause ] );
+
+	return ! loaded || ! hasLoadedPost;
+}

package/src/components/layout/index.js

@@ -11,7 +11,6 @@ import {
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
 	__unstableUseNavigateRegions as useNavigateRegions,
-	ResizableBox,
 } from '@wordpress/components';
 import {
 	useReducedMotion,
@@ -22,10 +21,13 @@ import { __ } from '@wordpress/i18n';
 import { useState, useRef } from '@wordpress/element';
 import { NavigableRegion } from '@wordpress/interface';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import { CommandMenu } from '@wordpress/commands';
+import {
+	CommandMenu,
+	privateApis as commandsPrivateApis,
+} from '@wordpress/commands';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { privateApis as coreCmmandsPrivateApis } from '@wordpress/core-commands';
+import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
 
 /**
  * Internal dependencies
@@ -39,35 +41,27 @@ import getIsListPage from '../../utils/get-is-list-page';
 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 ResizeHandle from '../block-editor/resize-handle';
+import ResizableFrame from '../resizable-frame';
 import useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';
 import { unlock } from '../../private-apis';
 import SavePanel from '../save-panel';
 import KeyboardShortcutsRegister from '../keyboard-shortcuts/register';
 import KeyboardShortcutsGlobal from '../keyboard-shortcuts/global';
+import { useEditModeCommands } from '../../hooks/commands/use-edit-mode-commands';
+import { useIsSiteEditorLoading } from './hooks';
 
-const { useCommands } = unlock( coreCmmandsPrivateApis );
-
+const { useCommands } = unlock( coreCommandsPrivateApis );
+const { useCommandContext } = unlock( commandsPrivateApis );
 const { useLocation } = unlock( routerPrivateApis );
 
 const ANIMATION_DURATION = 0.5;
-const emptyResizeHandleStyles = {
-	position: undefined,
-	userSelect: undefined,
-	cursor: undefined,
-	width: undefined,
-	height: undefined,
-	top: undefined,
-	right: undefined,
-	bottom: undefined,
-	left: undefined,
-};
 
 export default function Layout() {
 	// This ensures the edited entity id and type are initialized properly.
 	useInitEditedEntityFromURL();
 	useSyncCanvasModeWithURL();
 	useCommands();
+	useEditModeCommands();
 
 	const hubRef = useRef();
 	const { params } = useLocation();
@@ -91,36 +85,33 @@ export default function Layout() {
 					select( preferencesStore ).get( 'fixedToolbar' ),
 			};
 		}, [] );
+	const isEditing = canvasMode === 'edit';
 	const navigateRegionsProps = useNavigateRegions( {
 		previous: previousShortcut,
 		next: nextShortcut,
 	} );
 	const disableMotion = useReducedMotion();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const canvasPadding = isMobileViewport ? 0 : 24;
 	const showSidebar =
 		( isMobileViewport && ! isListPage ) ||
 		( ! isMobileViewport && ( canvasMode === 'view' || ! isEditorPage ) );
 	const showCanvas =
-		( isMobileViewport && isEditorPage && canvasMode === 'edit' ) ||
+		( isMobileViewport && isEditorPage && isEditing ) ||
 		! isMobileViewport ||
 		! isEditorPage;
-	const showFrame =
-		( ! isEditorPage && ! isMobileViewport ) ||
-		( ! isMobileViewport && isEditorPage && canvasMode === 'view' );
 	const isFullCanvas =
-		( isMobileViewport && isListPage ) ||
-		( isEditorPage && canvasMode === 'edit' );
+		( isMobileViewport && isListPage ) || ( isEditorPage && isEditing );
 	const [ canvasResizer, canvasSize ] = useResizeObserver();
-	const [ fullResizer, fullSize ] = useResizeObserver();
-	const [ forcedWidth, setForcedWidth ] = useState( null );
-	const [ isResizing, setIsResizing ] = useState( false );
-	const isResizingEnabled = ! isMobileViewport && canvasMode === 'view';
-	const defaultSidebarWidth = isMobileViewport ? '100vw' : 360;
-	let canvasWidth = isResizing ? '100%' : fullSize.width;
-	if ( showFrame && ! isResizing ) {
-		canvasWidth = canvasSize.width - canvasPadding;
-	}
+	const [ fullResizer ] = useResizeObserver();
+	const [ isResizing ] = useState( false );
+	const isEditorLoading = useIsSiteEditorLoading();
+
+	// Sets the right context for the command center
+	const commandContext =
+		canvasMode === 'edit' && isEditorPage
+			? 'site-editor-edit'
+			: 'site-editor';
+	useCommandContext( commandContext );
 
 	// 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
@@ -131,7 +122,7 @@ export default function Layout() {
 
 	return (
 		<>
-			{ window?.__experimentalEnableCommandCenter && <CommandMenu /> }
+			<CommandMenu />
 			<KeyboardShortcutsRegister />
 			<KeyboardShortcutsGlobal />
 			{ fullResizer }
@@ -143,7 +134,7 @@ export default function Layout() {
 					navigateRegionsProps.className,
 					{
 						'is-full-canvas': isFullCanvas,
-						'is-edit-mode': canvasMode === 'edit',
+						'is-edit-mode': isEditing,
 						'has-fixed-toolbar': hasFixedToolbar,
 					}
 				) }
@@ -151,7 +142,7 @@ export default function Layout() {
 				<SiteHub ref={ hubRef } className="edit-site-layout__hub" />
 
 				<AnimatePresence initial={ false }>
-					{ isEditorPage && canvasMode === 'edit' && (
+					{ isEditorPage && isEditing && (
 						<NavigableRegion
 							className="edit-site-layout__header"
 							ariaLabel={ __( 'Editor top bar' ) }
@@ -173,7 +164,7 @@ export default function Layout() {
 								ease: 'easeOut',
 							} }
 						>
-							<Header />
+							{ isEditing && <Header /> }
 						</NavigableRegion>
 					) }
 				</AnimatePresence>
@@ -181,8 +172,7 @@ export default function Layout() {
 				<div className="edit-site-layout__content">
 					<AnimatePresence initial={ false }>
 						{ showSidebar && (
-							<ResizableBox
-								as={ motion.div }
+							<motion.div
 								initial={ {
 									opacity: 0,
 								} }
@@ -194,69 +184,17 @@ export default function Layout() {
 								} }
 								transition={ {
 									type: 'tween',
-									duration:
-										disableMotion || isResizing
-											? 0
-											: ANIMATION_DURATION,
+									duration: ANIMATION_DURATION,
 									ease: 'easeOut',
 								} }
-								size={ {
-									height: '100%',
-									width:
-										isResizingEnabled && forcedWidth
-											? forcedWidth
-											: defaultSidebarWidth,
-								} }
 								className="edit-site-layout__sidebar"
-								enable={ {
-									right: isResizingEnabled,
-								} }
-								onResizeStop={ ( event, direction, elt ) => {
-									setForcedWidth( elt.clientWidth );
-									setIsResizing( false );
-								} }
-								onResizeStart={ () => {
-									setIsResizing( true );
-								} }
-								onResize={ ( event, direction, elt ) => {
-									// This is a performance optimization
-									// We set the width imperatively to avoid re-rendering
-									// the whole component while resizing.
-									hubRef.current.style.width =
-										elt.clientWidth - 48 + 'px';
-								} }
-								handleComponent={ {
-									right: (
-										<ResizeHandle
-											direction="right"
-											variation="separator"
-											resizeWidthBy={ ( delta ) => {
-												setForcedWidth(
-													( forcedWidth ??
-														defaultSidebarWidth ) +
-														delta
-												);
-											} }
-										/>
-									),
-								} }
-								handleClasses={ undefined }
-								handleStyles={ {
-									right: emptyResizeHandleStyles,
-								} }
-								minWidth={ isResizingEnabled ? 320 : undefined }
-								maxWidth={
-									isResizingEnabled && fullSize
-										? fullSize.width - 360
-										: undefined
-								}
 							>
 								<NavigableRegion
 									ariaLabel={ __( 'Navigation' ) }
 								>
 									<Sidebar />
 								</NavigableRegion>
-							</ResizableBox>
+							</motion.div>
 						) }
 					</AnimatePresence>
 
@@ -270,10 +208,6 @@ export default function Layout() {
 									'is-resizing': isResizing,
 								}
 							) }
-							style={ {
-								paddingTop: showFrame ? canvasPadding : 0,
-								paddingBottom: showFrame ? canvasPadding : 0,
-							} }
 						>
 							{ canvasResizer }
 							{ !! canvasSize.width && (
@@ -281,7 +215,7 @@ export default function Layout() {
 									whileHover={
 										isEditorPage && canvasMode === 'view'
 											? {
-													scale: 1.005,
+													scale: 1.006,
 													transition: {
 														duration:
 															disableMotion ||
@@ -293,8 +227,14 @@ export default function Layout() {
 											  }
 											: {}
 									}
-									initial={ false }
-									layout="position"
+									// Setting a transform property (in this case scale) on an element makes it act as a containing block for its descendants.
+									// This means that the snackbar notices inside this component are repositioned to be relative to this element.
+									// To avoid the snackbars jumping about we need to ensure that a transform property is always set.
+									// Setting a scale of 1 is interpred by framer as no change, so once the animation completes
+									// the transform property of this element is set to none, thus removing its role as a container block.
+									// Instead we set the initial scale of this element to 1.0001 so that there is always a transform property set.
+									// If we set the initial scale to less than 1.001 then JavaScript rounds it to 1 and the problem reoccurs.
+									initial={ { scale: 1.001 } }
 									className="edit-site-layout__canvas"
 									transition={ {
 										type: 'tween',
@@ -305,31 +245,22 @@ export default function Layout() {
 										ease: 'easeOut',
 									} }
 								>
-									<motion.div
-										style={ {
-											position: 'absolute',
-											top: 0,
-											left: 0,
-											bottom: 0,
-										} }
-										initial={ false }
-										animate={ {
-											width: canvasWidth,
-										} }
-										transition={ {
-											type: 'tween',
-											duration:
-												disableMotion || isResizing
-													? 0
-													: ANIMATION_DURATION,
-											ease: 'easeOut',
-										} }
-									>
-										<ErrorBoundary>
-											{ isEditorPage && <Editor /> }
-											{ isListPage && <ListPage /> }
-										</ErrorBoundary>
-									</motion.div>
+									<ErrorBoundary>
+										{ isEditorPage && (
+											<ResizableFrame
+												isReady={ ! isEditorLoading }
+												isFullWidth={ isEditing }
+												oversizedClassName="edit-site-layout__resizable-frame-oversized"
+											>
+												<Editor
+													isLoading={
+														isEditorLoading
+													}
+												/>
+											</ResizableFrame>
+										) }
+										{ isListPage && <ListPage /> }
+									</ErrorBoundary>
 								</motion.div>
 							) }
 						</div>

package/src/components/layout/style.scss

@@ -105,7 +105,13 @@
 	left: 0;
 	bottom: 0;
 	width: 100%;
-	overflow: hidden;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	&:has(.edit-site-layout__resizable-frame-oversized) {
+		justify-content: flex-end;
+	}
 
 	& > div {
 		color: $gray-900;
@@ -243,5 +249,5 @@
 			z-index: 3;
 		}
 	}
-
 }
+

package/src/components/list/actions/index.js

@@ -3,7 +3,7 @@
  */
 import { useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { moreVertical } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
@@ -21,7 +21,6 @@ export default function Actions( { template } ) {
 	const { saveEditedEntityRecord } = useDispatch( coreStore );
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
-
 	const isRemovable = isTemplateRemovable( template );
 	const isRevertable = isTemplateRevertable( template );
 
@@ -38,9 +37,17 @@ export default function Actions( { template } ) {
 				template.id
 			);
 
-			createSuccessNotice( __( 'Entity reverted.' ), {
-				type: 'snackbar',
-			} );
+			createSuccessNotice(
+				sprintf(
+					/* translators: The template/part's name. */
+					__( '"%s" reverted.' ),
+					template.title.rendered
+				),
+				{
+					type: 'snackbar',
+					id: 'edit-site-template-reverted',
+				}
+			);
 		} catch ( error ) {
 			const errorMessage =
 				error.message && error.code !== 'unknown_error'

package/src/components/list/style.scss

@@ -33,6 +33,7 @@
 
 .edit-site {
 	.edit-site-list {
+		flex-grow: 1;
 		background: $white;
 		border-radius: $radius-block-ui * 4;
 		box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);