@wordpress/edit-site 5.11.0 → 5.12.1

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

@@ -1,10 +1,7 @@
 .edit-site-document-actions {
-	display: flex;
-	align-items: center;
-	gap: $grid-unit;
+	display: grid;
+	grid-template-columns: 1fr 2fr 1fr;
 	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.
@@ -13,6 +10,7 @@
 	background: $gray-100;
 	border-radius: 4px;
 	width: min(100%, 450px);
+	overflow: hidden;
 
 	&:hover {
 		color: currentColor;
@@ -20,29 +18,90 @@
 	}
 }
 
+.edit-site-document-actions__command {
+	grid-column: 1 / -1;
+	display: grid;
+	grid-template-columns: 1fr 2fr 1fr;
+	grid-row: 1;
+}
+
+
 .edit-site-document-actions__title {
 	flex-grow: 1;
 	color: var(--wp-block-synced-color);
 	overflow: hidden;
+	grid-column: 2 / 3;
 
 	h1 {
-		color: var(--wp-block-synced-color);
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
+		color: var(--wp-block-synced-color);
+	}
+
+	.edit-site-document-actions.is-page & {
+		color: $gray-800;
+
+		h1 {
+			color: $gray-800;
+		}
+	}
+
+	.edit-site-document-actions.is-animated & {
+		animation: edit-site-document-actions__slide-in-left 0.3s;
+		@include reduce-motion("animation");
+	}
+
+	.edit-site-document-actions.is-animated.is-page & {
+		animation: edit-site-document-actions__slide-in-right 0.3s;
+		@include reduce-motion("animation");
 	}
 }
 
-.edit-site-document-actions__shortcut {
-	flex-shrink: 0;
-	color: $gray-700;
-	width: #{$grid-unit * 4.5};
-	&:hover {
-		color: $gray-700;
+.edit-site-document-actions__shortcut,
+.edit-site-document-actions__back {
+	color: $gray-800;
+
+	.edit-site-document-actions:hover & {
+		color: $gray-900;
 	}
 }
 
-.edit-site-document-actions__left {
+.edit-site-document-actions__shortcut {
+	text-align: right;
+}
+
+.edit-site-document-actions__back {
 	min-width: $button-size;
 	flex-shrink: 0;
+	grid-column: 1 / 2;
+	grid-row: 1;
+	z-index: 1;
+
+	.edit-site-document-actions.is-animated & {
+		animation: edit-site-document-actions__slide-in-left 0.3s;
+		@include reduce-motion("animation");
+	}
+}
+
+@keyframes edit-site-document-actions__slide-in-right {
+	from {
+		transform: translateX(-15%);
+		opacity: 0;
+	}
+	to {
+		transform: translateX(0);
+		opacity: 1;
+	}
+}
+
+@keyframes edit-site-document-actions__slide-in-left {
+	from {
+		transform: translateX(15%);
+		opacity: 0;
+	}
+	to {
+		transform: translateX(0);
+		opacity: 1;
+	}
 }

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

@@ -43,7 +43,7 @@ import {
 	getEditorCanvasContainerTitle,
 	useHasEditorCanvasContainer,
 } from '../editor-canvas-container';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { useShouldContextualToolbarShow } = unlock( blockEditorPrivateApis );
 
@@ -142,7 +142,8 @@ export default function HeaderEditMode() {
 
 	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
 
-	const isFocusMode = templateType === 'wp_template_part';
+	const isFocusMode =
+		templateType === 'wp_template_part' || templateType === 'wp_navigation';
 
 	/* translators: button label text should, if possible, be under 16 characters. */
 	const longLabel = _x(
@@ -268,8 +269,7 @@ export default function HeaderEditMode() {
 							<PreviewOptions
 								deviceType={ deviceType }
 								setDeviceType={ setPreviewDeviceType }
-								/* translators: button label text should, if possible, be under 16 characters. */
-								viewLabel={ __( 'View' ) }
+								label={ __( 'View' ) }
 							>
 								<MenuGroup>
 									<MenuItem

package/src/components/header-edit-mode/tools-more-menu-group/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -14,7 +9,7 @@ const { Fill: ToolsMoreMenuGroup, Slot } = createSlotFill(
 
 ToolsMoreMenuGroup.Slot = ( { fillProps } ) => (
 	<Slot fillProps={ fillProps }>
-		{ ( fills ) => ! isEmpty( fills ) && fills }
+		{ ( fills ) => fills && fills.length > 0 }
 	</Slot>
 );
 

package/src/components/keyboard-shortcuts/edit-mode.js

@@ -76,8 +76,12 @@ function KeyboardShortcutsEditMode() {
 		event.preventDefault();
 	} );
 
+	// Only opens the list view. Other functionality for this shortcut happens in the rendered sidebar.
 	useShortcut( 'core/edit-site/toggle-list-view', () => {
-		setIsListViewOpened( ! isListViewOpen );
+		if ( isListViewOpen ) {
+			return;
+		}
+		setIsListViewOpened( true );
 	} );
 
 	useShortcut( 'core/edit-site/toggle-block-settings-sidebar', ( event ) => {

package/src/components/keyboard-shortcuts/index.js

@@ -93,8 +93,12 @@ function KeyboardShortcuts() {
 		event.preventDefault();
 	} );
 
+	// Only opens the list view. Other functionality for this shortcut happens in the rendered sidebar.
 	useShortcut( 'core/edit-site/toggle-list-view', () => {
-		setIsListViewOpened( ! isListViewOpen );
+		if ( ! isListViewOpen ) {
+			return;
+		}
+		setIsListViewOpened( true );
 	} );
 
 	useShortcut( 'core/edit-site/toggle-block-settings-sidebar', ( event ) => {

package/src/components/keyboard-shortcuts/register.js

@@ -129,7 +129,7 @@ function KeyboardShortcutsRegister() {
 		} );
 
 		registerShortcut( {
-			name: `core/edit-site/transform-heading-to-paragraph`,
+			name: 'core/edit-site/transform-heading-to-paragraph',
 			category: 'block-library',
 			description: __( 'Transform heading to paragraph.' ),
 			keyCombination: {

package/src/components/layout/hooks.js

@@ -10,6 +10,8 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import useEditedEntityRecord from '../use-edited-entity-record';
 
+const MAX_LOADING_TIME = 10000; // 10 seconds
+
 export function useIsSiteEditorLoading() {
 	const { isLoaded: hasLoadedPost } = useEditedEntityRecord();
 	const [ loaded, setLoaded ] = useState( false );
@@ -22,6 +24,25 @@ export function useIsSiteEditorLoading() {
 		[ loaded ]
 	);
 
+	/*
+	 * If the maximum expected loading time has passed, we're marking the
+	 * editor as loaded, in order to prevent any failed requests from blocking
+	 * the editor canvas from appearing.
+	 */
+	useEffect( () => {
+		let timeout;
+
+		if ( ! loaded ) {
+			timeout = setTimeout( () => {
+				setLoaded( true );
+			}, MAX_LOADING_TIME );
+		}
+
+		return () => {
+			clearTimeout( timeout );
+		};
+	}, [ loaded ] );
+
 	useEffect( () => {
 		if ( inLoadingPause ) {
 			/*

package/src/components/layout/index.js

@@ -26,6 +26,7 @@ import {
 	privateApis as commandsPrivateApis,
 } from '@wordpress/commands';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
 
@@ -34,7 +35,6 @@ import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands
  */
 import Sidebar from '../sidebar';
 import Editor from '../editor';
-import ListPage from '../list';
 import ErrorBoundary from '../error-boundary';
 import { store as editSiteStore } from '../../store';
 import getIsListPage from '../../utils/get-is-list-page';
@@ -43,16 +43,19 @@ import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-e
 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 '../../private-apis';
+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 PageMain from '../page-main';
 import { useIsSiteEditorLoading } from './hooks';
 
 const { useCommands } = unlock( coreCommandsPrivateApis );
 const { useCommandContext } = unlock( commandsPrivateApis );
 const { useLocation } = unlock( routerPrivateApis );
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 const ANIMATION_DURATION = 0.5;
 
@@ -62,10 +65,12 @@ export default function Layout() {
 	useSyncCanvasModeWithURL();
 	useCommands();
 	useEditModeCommands();
+	useCommonCommands();
 
 	const hubRef = useRef();
 	const { params } = useLocation();
-	const isListPage = getIsListPage( params );
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const isListPage = getIsListPage( params, isMobileViewport );
 	const isEditorPage = ! isListPage;
 	const { hasFixedToolbar, canvasMode, previousShortcut, nextShortcut } =
 		useSelect( ( select ) => {
@@ -91,7 +96,6 @@ export default function Layout() {
 		next: nextShortcut,
 	} );
 	const disableMotion = useReducedMotion();
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const showSidebar =
 		( isMobileViewport && ! isListPage ) ||
 		( ! isMobileViewport && ( canvasMode === 'view' || ! isEditorPage ) );
@@ -113,6 +117,9 @@ export default function Layout() {
 			: 'site-editor';
 	useCommandContext( commandContext );
 
+	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
+	const [ gradientValue ] = useGlobalStyle( 'color.gradient' );
+
 	// 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
 	// which prevents any animations due to potential canvasMode value change.
@@ -171,20 +178,31 @@ export default function Layout() {
 
 				<div className="edit-site-layout__content">
 					<AnimatePresence initial={ false }>
-						{ showSidebar && (
+						{
 							<motion.div
 								initial={ {
 									opacity: 0,
 								} }
-								animate={ {
-									opacity: 1,
-								} }
+								animate={
+									showSidebar
+										? { opacity: 1, display: 'block' }
+										: {
+												opacity: 0,
+												transitionEnd: {
+													display: 'none',
+												},
+										  }
+								}
 								exit={ {
 									opacity: 0,
 								} }
 								transition={ {
 									type: 'tween',
-									duration: ANIMATION_DURATION,
+									duration:
+										// Disable transition in mobile to emulate a full page transition.
+										disableMotion || isMobileViewport
+											? 0
+											: ANIMATION_DURATION,
 									ease: 'easeOut',
 								} }
 								className="edit-site-layout__sidebar"
@@ -195,75 +213,79 @@ export default function Layout() {
 									<Sidebar />
 								</NavigableRegion>
 							</motion.div>
-						) }
+						}
 					</AnimatePresence>
 
 					<SavePanel />
 
 					{ showCanvas && (
-						<div
-							className={ classnames(
-								'edit-site-layout__canvas-container',
-								{
-									'is-resizing': isResizing,
-								}
-							) }
-						>
-							{ canvasResizer }
-							{ !! canvasSize.width && (
-								<motion.div
-									whileHover={
-										isEditorPage && canvasMode === 'view'
-											? {
-													scale: 1.006,
-													transition: {
-														duration:
-															disableMotion ||
-															isResizing
-																? 0
-																: 0.5,
-														ease: 'easeOut',
-													},
-											  }
-											: {}
-									}
-									// 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',
-										duration:
-											disableMotion || isResizing
-												? 0
-												: ANIMATION_DURATION,
-										ease: 'easeOut',
-									} }
+						<>
+							{ isListPage && <PageMain /> }
+							{ isEditorPage && (
+								<div
+									className={ classnames(
+										'edit-site-layout__canvas-container',
+										{
+											'is-resizing': isResizing,
+										}
+									) }
 								>
-									<ErrorBoundary>
-										{ isEditorPage && (
-											<ResizableFrame
-												isReady={ ! isEditorLoading }
-												isFullWidth={ isEditing }
-												oversizedClassName="edit-site-layout__resizable-frame-oversized"
-											>
-												<Editor
-													isLoading={
-														isEditorLoading
+									{ canvasResizer }
+									{ !! canvasSize.width && (
+										<motion.div
+											whileHover={
+												isEditorPage &&
+												canvasMode === 'view'
+													? {
+															scale: 1.005,
+															transition: {
+																duration:
+																	disableMotion ||
+																	isResizing
+																		? 0
+																		: 0.5,
+																ease: 'easeOut',
+															},
+													  }
+													: {}
+											}
+											initial={ false }
+											layout="position"
+											className="edit-site-layout__canvas"
+											transition={ {
+												type: 'tween',
+												duration:
+													disableMotion || isResizing
+														? 0
+														: ANIMATION_DURATION,
+												ease: 'easeOut',
+											} }
+										>
+											<ErrorBoundary>
+												<ResizableFrame
+													isReady={
+														! isEditorLoading
 													}
-												/>
-											</ResizableFrame>
-										) }
-										{ isListPage && <ListPage /> }
-									</ErrorBoundary>
-								</motion.div>
+													isFullWidth={ isEditing }
+													oversizedClassName="edit-site-layout__resizable-frame-oversized"
+													innerContentStyle={ {
+														background:
+															gradientValue ??
+															backgroundColor,
+													} }
+												>
+													<Editor
+														isLoading={
+															isEditorLoading
+														}
+													/>
+												</ResizableFrame>
+											</ErrorBoundary>
+										</motion.div>
+									) }
+								</div>
 							) }
-						</div>
+						</>
 					) }
 				</div>
 			</div>

package/src/components/layout/style.scss

@@ -81,6 +81,13 @@
 	}
 }
 
+.edit-site-layout__main {
+	flex-grow: 1;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+}
+
 .edit-site-layout__canvas-container {
 	position: relative;
 	flex-grow: 1;

package/src/components/list/index.js

@@ -16,7 +16,7 @@ import useRegisterShortcuts from './use-register-shortcuts';
 import Header from './header';
 import Table from './table';
 import useTitle from '../routes/use-title';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { useLocation } = unlock( routerPrivateApis );
 

package/src/components/list/table.js

@@ -13,8 +13,8 @@ import { decodeEntities } from '@wordpress/html-entities';
 /**
  * Internal dependencies
  */
+import TemplateActions from '../template-actions';
 import Link from '../routes/link';
-import Actions from './actions';
 import AddedBy from './added-by';
 
 export default function Table( { templateType } ) {
@@ -126,7 +126,11 @@ export default function Table( { templateType } ) {
 							) : null }
 						</td>
 						<td className="edit-site-list-table-column" role="cell">
-							<Actions template={ template } />
+							<TemplateActions
+								postType={ template.type }
+								postId={ template.id }
+								className="edit-site-list-table__actions"
+							/>
 						</td>
 					</tr>
 				) ) }

package/src/components/page/header.js

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHeading as Heading,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+	FlexBlock,
+	FlexItem,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+
+export default function Header( { title, subTitle, actions } ) {
+	return (
+		<HStack as="header" alignment="left" className="edit-site-page-header">
+			<FlexBlock className="edit-site-page-header__page-title">
+				<Heading
+					as="h1"
+					level={ 4 }
+					className="edit-site-page-header__title"
+				>
+					{ title }
+				</Heading>
+				{ subTitle && (
+					<Text as="p" className="edit-site-page-header__sub-title">
+						{ subTitle }
+					</Text>
+				) }
+			</FlexBlock>
+			<FlexItem className="edit-site-page-header__actions">
+				{ actions }
+			</FlexItem>
+		</HStack>
+	);
+}

package/src/components/page/index.js

@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { NavigableRegion } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import Header from './header';
+
+export default function Page( {
+	title,
+	subTitle,
+	actions,
+	children,
+	className,
+	hideTitleFromUI = false,
+} ) {
+	const classes = classnames( 'edit-site-page', className );
+
+	return (
+		<NavigableRegion className={ classes } ariaLabel={ title }>
+			{ ! hideTitleFromUI && title && (
+				<Header
+					title={ title }
+					subTitle={ subTitle }
+					actions={ actions }
+				/>
+			) }
+			<div className="edit-site-page-content">{ children }</div>
+		</NavigableRegion>
+	);
+}

package/src/components/page/style.scss

@@ -0,0 +1,38 @@
+.edit-site-page {
+	color: $gray-800;
+	background: $white;
+	flex-grow: 1;
+	overflow: auto;
+	margin: 0;
+	margin-top: $header-height;
+	@include break-medium() {
+		border-radius: 8px;
+		margin: $grid-unit-30 $grid-unit-30 $grid-unit-30 0;
+	}
+}
+
+.edit-site-page-header {
+	padding: 0 $grid-unit-40;
+	height: $header-height;
+	padding-left: $grid-unit-40;
+	border-bottom: 1px solid $gray-100;
+	background: $white;
+	position: sticky;
+	top: 0;
+	z-index: z-index(".edit-site-page-header");
+	.components-text {
+		color: $gray-800;
+	}
+	.components-heading {
+		color: $gray-900;
+	}
+	.edit-site-page-header__sub-title {
+		margin-top: $grid-unit-10;
+		color: $gray-700;
+	}
+}
+
+.edit-site-page-content {
+	padding: $grid-unit-40 $grid-unit-40;
+	overflow-x: auto;
+}