@wordpress/edit-site 5.12.0 → 5.12.1

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

@@ -19,10 +19,11 @@ import { store as commandsStore } from '@wordpress/commands';
 import {
 	chevronLeftSmall as chevronLeftSmallIcon,
 	page as pageIcon,
+	navigation as navigationIcon,
 } from '@wordpress/icons';
-import { useEntityRecord } from '@wordpress/core-data';
 import { displayShortcut } from '@wordpress/keycodes';
 import { useState, useEffect, useRef } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -36,36 +37,46 @@ export default function DocumentActions() {
 }
 
 function PageDocumentActions() {
-	const { hasPageContentLock, context } = useSelect(
-		( select ) => ( {
-			hasPageContentLock: select( editSiteStore ).hasPageContentLock(),
-			context: select( editSiteStore ).getEditedPostContext(),
-		} ),
+	const { hasPageContentFocus, hasResolved, isFound, title } = useSelect(
+		( select ) => {
+			const {
+				hasPageContentFocus: _hasPageContentFocus,
+				getEditedPostContext,
+			} = select( editSiteStore );
+			const { getEditedEntityRecord, hasFinishedResolution } =
+				select( coreStore );
+			const context = getEditedPostContext();
+			const queryArgs = [ 'postType', context.postType, context.postId ];
+			const page = getEditedEntityRecord( ...queryArgs );
+			return {
+				hasPageContentFocus: _hasPageContentFocus(),
+				hasResolved: hasFinishedResolution(
+					'getEditedEntityRecord',
+					queryArgs
+				),
+				isFound: !! page,
+				title: page?.title,
+			};
+		},
 		[]
 	);
 
-	const { hasResolved, editedRecord } = useEntityRecord(
-		'postType',
-		context.postType,
-		context.postId
-	);
-
-	const { setHasPageContentLock } = useDispatch( editSiteStore );
+	const { setHasPageContentFocus } = useDispatch( editSiteStore );
 
 	const [ hasEditedTemplate, setHasEditedTemplate ] = useState( false );
-	const prevHasPageContentLock = useRef( false );
+	const prevHasPageContentFocus = useRef( false );
 	useEffect( () => {
-		if ( prevHasPageContentLock.current && ! hasPageContentLock ) {
+		if ( prevHasPageContentFocus.current && ! hasPageContentFocus ) {
 			setHasEditedTemplate( true );
 		}
-		prevHasPageContentLock.current = hasPageContentLock;
-	}, [ hasPageContentLock ] );
+		prevHasPageContentFocus.current = hasPageContentFocus;
+	}, [ hasPageContentFocus ] );
 
 	if ( ! hasResolved ) {
 		return null;
 	}
 
-	if ( ! editedRecord ) {
+	if ( ! isFound ) {
 		return (
 			<div className="edit-site-document-actions">
 				{ __( 'Document not found' ) }
@@ -73,19 +84,19 @@ function PageDocumentActions() {
 		);
 	}
 
-	return hasPageContentLock ? (
+	return hasPageContentFocus ? (
 		<BaseDocumentActions
 			className={ classnames( 'is-page', {
 				'is-animated': hasEditedTemplate,
 			} ) }
 			icon={ pageIcon }
 		>
-			{ editedRecord.title }
+			{ title }
 		</BaseDocumentActions>
 	) : (
 		<TemplateDocumentActions
 			className="is-animated"
-			onBack={ () => setHasPageContentLock( true ) }
+			onBack={ () => setHasPageContentFocus( true ) }
 		/>
 	);
 }
@@ -105,15 +116,12 @@ function TemplateDocumentActions( { className, onBack } ) {
 		);
 	}
 
-	const entityLabel =
-		record.type === 'wp_template_part'
-			? __( 'template part' )
-			: __( 'template' );
+	const entityLabel = getEntityLabel( record.type );
 
 	return (
 		<BaseDocumentActions
 			className={ className }
-			icon={ icon }
+			icon={ record.type === 'wp_navigation' ? navigationIcon : icon }
 			onBack={ onBack }
 		>
 			<VisuallyHidden as="span">
@@ -167,3 +175,20 @@ function BaseDocumentActions( { className, icon, children, onBack } ) {
 		</div>
 	);
 }
+
+function getEntityLabel( entityType ) {
+	let label = '';
+	switch ( entityType ) {
+		case 'wp_navigation':
+			label = 'navigation menu';
+			break;
+		case 'wp_template_part':
+			label = 'template part';
+			break;
+		default:
+			label = 'template';
+			break;
+	}
+
+	return label;
+}

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

@@ -58,15 +58,19 @@
 	}
 }
 
-.edit-site-document-actions__shortcut {
-	color: $gray-700;
-	text-align: right;
+.edit-site-document-actions__shortcut,
+.edit-site-document-actions__back {
+	color: $gray-800;
 
-	&:hover {
-		color: $gray-700;
+	.edit-site-document-actions:hover & {
+		color: $gray-900;
 	}
 }
 
+.edit-site-document-actions__shortcut {
+	text-align: right;
+}
+
 .edit-site-document-actions__back {
 	min-width: $button-size;
 	flex-shrink: 0;

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/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,69 +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.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',
-									} }
+						<>
+							{ 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/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;
+}