@wordpress/edit-site 5.8.0 → 5.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.8.0",
+	"version": "5.10.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,46 +27,48 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.31.0",
-		"@wordpress/api-fetch": "^6.28.0",
-		"@wordpress/block-editor": "^11.8.0",
-		"@wordpress/block-library": "^8.8.0",
-		"@wordpress/blocks": "^12.8.0",
-		"@wordpress/commands": "^0.2.0",
-		"@wordpress/components": "^23.8.0",
-		"@wordpress/compose": "^6.8.0",
-		"@wordpress/core-data": "^6.8.0",
-		"@wordpress/data": "^9.1.0",
-		"@wordpress/deprecated": "^3.31.0",
-		"@wordpress/dom": "^3.31.0",
-		"@wordpress/editor": "^13.8.0",
-		"@wordpress/element": "^5.8.0",
-		"@wordpress/hooks": "^3.31.0",
-		"@wordpress/html-entities": "^3.31.0",
-		"@wordpress/i18n": "^4.31.0",
-		"@wordpress/icons": "^9.22.0",
-		"@wordpress/interface": "^5.8.0",
-		"@wordpress/keyboard-shortcuts": "^4.8.0",
-		"@wordpress/keycodes": "^3.31.0",
-		"@wordpress/media-utils": "^4.22.0",
-		"@wordpress/notices": "^3.31.0",
-		"@wordpress/plugins": "^5.8.0",
-		"@wordpress/preferences": "^3.8.0",
-		"@wordpress/private-apis": "^0.13.0",
-		"@wordpress/reusable-blocks": "^4.8.0",
-		"@wordpress/style-engine": "^1.14.0",
-		"@wordpress/url": "^3.32.0",
-		"@wordpress/viewport": "^5.8.0",
-		"@wordpress/widgets": "^3.8.0",
+		"@wordpress/a11y": "^3.33.0",
+		"@wordpress/api-fetch": "^6.30.0",
+		"@wordpress/block-editor": "^12.1.0",
+		"@wordpress/block-library": "^8.10.0",
+		"@wordpress/blocks": "^12.10.0",
+		"@wordpress/commands": "^0.4.0",
+		"@wordpress/components": "^24.0.0",
+		"@wordpress/compose": "^6.10.0",
+		"@wordpress/core-commands": "^0.2.0",
+		"@wordpress/core-data": "^6.10.0",
+		"@wordpress/data": "^9.3.0",
+		"@wordpress/date": "^4.33.0",
+		"@wordpress/deprecated": "^3.33.0",
+		"@wordpress/dom": "^3.33.0",
+		"@wordpress/editor": "^13.10.0",
+		"@wordpress/element": "^5.10.0",
+		"@wordpress/hooks": "^3.33.0",
+		"@wordpress/html-entities": "^3.33.0",
+		"@wordpress/i18n": "^4.33.0",
+		"@wordpress/icons": "^9.24.0",
+		"@wordpress/interface": "^5.10.0",
+		"@wordpress/keyboard-shortcuts": "^4.10.0",
+		"@wordpress/keycodes": "^3.33.0",
+		"@wordpress/media-utils": "^4.24.0",
+		"@wordpress/notices": "^4.1.0",
+		"@wordpress/plugins": "^6.1.0",
+		"@wordpress/preferences": "^3.10.0",
+		"@wordpress/private-apis": "^0.15.0",
+		"@wordpress/reusable-blocks": "^4.10.0",
+		"@wordpress/router": "^0.2.0",
+		"@wordpress/style-engine": "^1.16.0",
+		"@wordpress/url": "^3.34.0",
+		"@wordpress/viewport": "^5.10.0",
+		"@wordpress/widgets": "^3.10.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.9.2",
 		"downloadjs": "^1.4.7",
 		"fast-deep-equal": "^3.1.3",
-		"history": "^5.1.0",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
 		"react-autosize-textarea": "^7.1.0",
-		"rememo": "^4.0.0"
+		"rememo": "^4.0.2"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
@@ -75,5 +77,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d61700b9f1c72ba0b030fc815ef1685b4f4031ec"
+	"gitHead": "e936127e1e13881f1a940b7bd1593a9e500147f3"
 }

package/src/components/add-new-template/add-custom-template-modal.js

@@ -51,16 +51,25 @@ function SuggestionListItem( {
 				)
 			}
 		>
-			<span className={ `${ baseCssClass }__title` }>
+			<Text
+				size="body"
+				lineHeight={ 1.53846153846 } // 20px
+				weight={ 500 }
+				className={ `${ baseCssClass }__title` }
+			>
 				<TextHighlight
 					text={ decodeEntities( suggestion.name ) }
 					highlight={ search }
 				/>
-			</span>
+			</Text>
 			{ suggestion.link && (
-				<span className={ `${ baseCssClass }__info` }>
+				<Text
+					size="body"
+					lineHeight={ 1.53846153846 } // 20px
+					className={ `${ baseCssClass }__info` }
+				>
 					{ suggestion.link }
-				</span>
+				</Text>
 			) }
 		</CompositeItem>
 	);
@@ -221,10 +230,17 @@ function AddCustomTemplateModal( {
 								} );
 							} }
 						>
-							<Text as="span" weight={ 600 }>
+							<Text
+								as="span"
+								weight={ 500 }
+								lineHeight={ 1.53846153846 } // 20px
+							>
 								{ entityForSuggestions.labels.all_items }
 							</Text>
-							<Text as="span">
+							<Text
+								as="span"
+								lineHeight={ 1.53846153846 } // 20px
+							>
 								{
 									// translators: The user is given the choice to set up a template for all items of a post type or taxonomy, or just a specific one.
 									__( 'For all items' )
@@ -238,10 +254,17 @@ function AddCustomTemplateModal( {
 								setShowSearchEntities( true );
 							} }
 						>
-							<Text as="span" weight={ 600 }>
+							<Text
+								as="span"
+								weight={ 500 }
+								lineHeight={ 1.53846153846 } // 20px
+							>
 								{ entityForSuggestions.labels.singular_name }
 							</Text>
-							<Text as="span">
+							<Text
+								as="span"
+								lineHeight={ 1.53846153846 } // 20px
+							>
 								{
 									// translators: The user is given the choice to set up a template for all items of a post type or taxonomy, or just a specific one.
 									__( 'For a specific item' )

package/src/components/add-new-template/new-template-part.js

@@ -8,17 +8,20 @@ import { __ } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
 import { plus } from '@wordpress/icons';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
-import { useHistory } from '../routes';
 import CreateTemplatePartModal from '../create-template-part-modal';
 import {
 	useExistingTemplateParts,
 	getUniqueTemplatePartTitle,
 	getCleanTemplatePartSlug,
 } from '../../utils/template-part-create';
+import { unlock } from '../../private-apis';
+
+const { useHistory } = unlock( routerPrivateApis );
 
 export default function NewTemplatePart( {
 	postType,

package/src/components/add-new-template/new-template.js

@@ -24,12 +24,14 @@ import {
 	post,
 	postAuthor,
 	postDate,
+	postList,
 	search,
 	tag,
 	layout as customGenericTemplateIcon,
 } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -45,12 +47,14 @@ import {
 } from './utils';
 import AddCustomGenericTemplateModal from './add-custom-generic-template-modal';
 import TemplateActionsLoadingScreen from './template-actions-loading-screen';
-import { useHistory } from '../routes';
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../private-apis';
 
+const { useHistory } = unlock( routerPrivateApis );
+
 const DEFAULT_TEMPLATE_SLUGS = [
 	'front-page',
+	'home',
 	'single',
 	'page',
 	'index',
@@ -66,6 +70,7 @@ const DEFAULT_TEMPLATE_SLUGS = [
 
 const TEMPLATE_ICONS = {
 	'front-page': home,
+	home: postList,
 	single: post,
 	page,
 	archive,

package/src/components/add-new-template/style.scss

@@ -18,16 +18,20 @@
 }
 
 .edit-site-custom-template-modal {
+	&__suggestions_list {
+		margin-left: - $grid-unit-15;
+		margin-right: - $grid-unit-15;
+	}
+
 	&__contents {
 		> .components-button {
 			padding: $grid-unit-30;
-			box-shadow: inset 0 0 0 $border-width $gray-600;
 			border-radius: $radius-block-ui;
-			width: 256px;
 			height: auto;
 			display: flex;
 			flex-direction: column;
-			gap: $grid-unit;
+			justify-content: center;
+			border: $border-width solid $gray-300;
 
 			// Show the boundary of the button, in High Contrast Mode.
 			outline: 1px solid transparent;
@@ -42,15 +46,17 @@
 
 			&:hover {
 				color: var(--wp-admin-theme-color-darker-10);
-				box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color-darker-10);
+				background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+				border-color: transparent;
 
-				span:first-child {
+				span {
 					color: var(--wp-admin-theme-color);
 				}
 			}
 
 			&:focus {
 				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+				border-color: transparent;
 
 				// Windows High Contrast mode will show this outline, but not the box-shadow.
 				outline: 3px solid transparent;
@@ -77,60 +83,58 @@
 	@include break-medium() {
 		width: 456px;
 	}
-}
-
-.edit-site-custom-template-modal__suggestions_list {
-	@include break-small() {
-		height: 232px;
-		overflow: scroll;
-	}
-
-	&__list-item {
-		display: block;
-		width: 100%;
-		text-align: left;
-		white-space: pre-wrap;
-		overflow-wrap: break-word;
-		height: auto;
 
-		mark {
-			font-weight: 700;
-			background: none;
+	.edit-site-custom-template-modal__suggestions_list {
+		@include break-small() {
+			height: 232px;
+			overflow: scroll;
 		}
 
-		&:hover {
-			background-color: $gray-100;
+		&__list-item {
+			display: block;
+			width: 100%;
+			text-align: left;
+			white-space: pre-wrap;
+			overflow-wrap: break-word;
+			height: auto;
+			padding: $grid-unit-10 $grid-unit-15;
 
 			mark {
-				color: var(--wp-admin-theme-color);
+				font-weight: 700;
+				background: none;
 			}
-		}
 
-		&:focus {
-			background-color: $gray-100;
-		}
+			&:hover {
+				background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 
-		&:focus:not(:disabled) {
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
-		}
+				* {
+					color: var(--wp-admin-theme-color);
+				}
 
-		&__title,
-		&__info {
-			overflow: hidden;
-			text-overflow: ellipsis;
-			display: block;
-		}
+				mark {
+					color: var(--wp-admin-theme-color);
+				}
+			}
 
-		&__title {
-			font-weight: 500;
-			margin-bottom: 0.2em;
-		}
+			&:focus {
+				background-color: $gray-100;
+			}
+
+			&:focus:not(:disabled) {
+				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
+			}
 
-		&__info {
-			color: $gray-700;
-			font-size: 0.9em;
-			line-height: 1.3;
-			word-break: break-all;
+			&__title,
+			&__info {
+				overflow: hidden;
+				text-overflow: ellipsis;
+				display: block;
+			}
+
+			&__info {
+				word-break: break-all;
+				color: $gray-700;
+			}
 		}
 	}
 }

package/src/components/app/index.js

@@ -8,13 +8,16 @@ import { store as noticesStore } from '@wordpress/notices';
 import { useDispatch } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import { PluginArea } from '@wordpress/plugins';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
-import { Routes } from '../routes';
 import Layout from '../layout';
 import { GlobalStylesProvider } from '../global-styles/global-styles-provider';
+import { unlock } from '../../private-apis';
+
+const { RouterProvider } = unlock( routerPrivateApis );
 
 export default function App() {
 	const { createErrorNotice } = useDispatch( noticesStore );
@@ -37,10 +40,10 @@ export default function App() {
 				<GlobalStylesProvider>
 					<Popover.Slot />
 					<UnsavedChangesWarning />
-					<Routes>
+					<RouterProvider>
 						<Layout />
 						<PluginArea onError={ onPluginAreaError } />
-					</Routes>
+					</RouterProvider>
 				</GlobalStylesProvider>
 			</SlotFillProvider>
 		</ShortcutProvider>

package/src/components/block-editor/back-button.js

@@ -4,11 +4,14 @@
 import { Button } from '@wordpress/components';
 import { arrowLeft } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
-import { useLocation, useHistory } from '../routes';
+import { unlock } from '../../private-apis';
+
+const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 function BackButton() {
 	const location = useLocation();

package/src/components/block-editor/editor-canvas.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -9,6 +14,9 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
+import { ENTER, SPACE } from '@wordpress/keycodes';
+import { useState, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -31,6 +39,30 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const deviceStyles = useResizeCanvas( deviceType );
 	const mouseMoveTypingRef = useMouseMoveTypingReset();
+	const [ isFocused, setIsFocused ] = useState( false );
+
+	useEffect( () => {
+		if ( canvasMode === 'edit' ) {
+			setIsFocused( false );
+		}
+	}, [ canvasMode ] );
+
+	const viewModeProps = {
+		'aria-label': __( 'Editor Canvas' ),
+		role: 'button',
+		tabIndex: 0,
+		onFocus: () => setIsFocused( true ),
+		onBlur: () => setIsFocused( false ),
+		onKeyDown: ( event ) => {
+			const { keyCode } = event;
+			if ( keyCode === ENTER || keyCode === SPACE ) {
+				event.preventDefault();
+				setCanvasMode( 'edit' );
+			}
+		},
+		onClick: () => setCanvasMode( 'edit' ),
+		readonly: true,
+	};
 
 	return (
 		<Iframe
@@ -40,15 +72,11 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 			style={ enableResizing ? {} : deviceStyles }
 			ref={ mouseMoveTypingRef }
 			name="editor-canvas"
-			className="edit-site-visual-editor__editor-canvas"
+			className={ classnames( 'edit-site-visual-editor__editor-canvas', {
+				'is-focused': isFocused && canvasMode === 'view',
+			} ) }
 			{ ...props }
-			role={ canvasMode === 'view' ? 'button' : undefined }
-			onClick={
-				canvasMode === 'view'
-					? () => setCanvasMode( 'edit' )
-					: undefined
-			}
-			readonly={ canvasMode === 'view' }
+			{ ...( canvasMode === 'view' ? viewModeProps : {} ) }
 		>
 			<EditorStyles styles={ settings.styles } />
 			<style>{

package/src/components/block-editor/index.js

@@ -36,8 +36,8 @@ import { store as editSiteStore } from '../../store';
 import BackButton from './back-button';
 import ResizableEditor from './resizable-editor';
 import EditorCanvas from './editor-canvas';
-import StyleBook from '../style-book';
 import { unlock } from '../../private-apis';
+import EditorCanvasContainer from '../editor-canvas-container';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 
@@ -165,19 +165,19 @@ export default function BlockEditor() {
 			<SidebarInspectorFill>
 				<BlockInspector />
 			</SidebarInspectorFill>
-			{ /* Potentially this could be a generic slot (e.g. EditorCanvas.Slot) if there are other uses for it. */ }
-			<StyleBook.Slot>
-				{ ( [ styleBook ] ) =>
-					styleBook ? (
+			<EditorCanvasContainer.Slot>
+				{ ( [ editorCanvasView ] ) =>
+					editorCanvasView ? (
 						<div className="edit-site-visual-editor is-focus-mode">
 							<ResizableEditor enableResizing>
-								{ styleBook }
+								{ editorCanvasView }
 							</ResizableEditor>
 						</div>
 					) : (
 						<BlockTools
 							className={ classnames( 'edit-site-visual-editor', {
-								'is-focus-mode': isTemplatePart || !! styleBook,
+								'is-focus-mode':
+									isTemplatePart || !! editorCanvasView,
 								'is-view-mode': isViewMode,
 							} ) }
 							__unstableContentRef={ contentRef }
@@ -211,7 +211,7 @@ export default function BlockEditor() {
 						</BlockTools>
 					)
 				}
-			</StyleBook.Slot>
+			</EditorCanvasContainer.Slot>
 			<ReusableBlocksMenuItems />
 		</ExperimentalBlockEditorProvider>
 	);

package/src/components/block-editor/style.scss

@@ -29,9 +29,14 @@
 
 	.edit-site-visual-editor__editor-canvas {
 		height: 100%;
-		background: $white;
+
+		&.is-focused {
+			outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
+			outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
+		}
 	}
 
+
 	&.is-focus-mode {
 		.edit-site-layout.is-full-canvas & {
 			padding: $grid-unit-60;
@@ -55,14 +60,16 @@
 		overflow: auto;
 	}
 
-	/*
-		Temporary to hide the contextual toolbar in view mode.
-		See: https://github.com/WordPress/gutenberg/pull/46298
-		This rule can possibly be removed once the
-		contextual toolbar has been redesigned.
-		See: https://github.com/WordPress/gutenberg/issues/40450
-	*/
 	&.is-view-mode {
+		box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
+
+		/*
+			Temporary to hide the contextual toolbar in view mode.
+			See: https://github.com/WordPress/gutenberg/pull/46298
+			This rule can possibly be removed once the
+			contextual toolbar has been redesigned.
+			See: https://github.com/WordPress/gutenberg/issues/40450
+		*/
 		.block-editor-block-contextual-toolbar {
 			display: none;
 		}

package/src/components/editor/index.js

@@ -1,10 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
+import { useEffect, useMemo, useState } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { Notice } from '@wordpress/components';
-import { EntityProvider } from '@wordpress/core-data';
+import { EntityProvider, store as coreStore } from '@wordpress/core-data';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
 	BlockContextProvider,
@@ -37,6 +37,7 @@ import useTitle from '../routes/use-title';
 import CanvasSpinner from '../canvas-spinner';
 import { unlock } from '../../private-apis';
 import useEditedEntityRecord from '../use-edited-entity-record';
+import { SidebarFixedBottomSlot } from '../sidebar-edit-mode/sidebar-fixed-bottom';
 
 const interfaceLabels = {
 	/* translators: accessibility text for the editor content landmark region. */
@@ -49,6 +50,39 @@ const interfaceLabels = {
 	footer: __( 'Editor footer' ),
 };
 
+function useIsSiteEditorLoading() {
+	const { isLoaded: hasLoadedPost } = useEditedEntityRecord();
+	const { hasResolvingSelectors } = useSelect( ( select ) => {
+		return {
+			hasResolvingSelectors: select( coreStore ).hasResolvingSelectors(),
+		};
+	} );
+	const [ loaded, setLoaded ] = useState( false );
+	const inLoadingPause = ! loaded && ! hasResolvingSelectors;
+
+	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;
+}
+
 export default function Editor() {
 	const {
 		record: editedPost,
@@ -152,12 +186,11 @@ export default function Editor() {
 	// action in <URlQueryController> from double-announcing.
 	useTitle( hasLoadedPost && title );
 
-	if ( ! hasLoadedPost ) {
-		return <CanvasSpinner />;
-	}
+	const isLoading = useIsSiteEditorLoading();
 
 	return (
 		<>
+			{ isLoading ? <CanvasSpinner /> : null }
 			{ isEditMode && <WelcomeGuide /> }
 			<EntityProvider kind="root" type="site">
 				<EntityProvider
@@ -171,7 +204,12 @@ export default function Editor() {
 						<InterfaceSkeleton
 							enableRegionNavigation={ false }
 							className={ showIconLabels && 'show-icon-labels' }
-							notices={ isEditMode && <EditorSnackbars /> }
+							notices={
+								( isEditMode ||
+									window?.__experimentalEnableThemePreviews ) && (
+									<EditorSnackbars />
+								)
+							}
 							content={
 								<>
 									<GlobalStylesRenderer />
@@ -209,7 +247,10 @@ export default function Editor() {
 							sidebar={
 								isEditMode &&
 								isRightSidebarOpen && (
-									<ComplementaryArea.Slot scope="core/edit-site" />
+									<>
+										<ComplementaryArea.Slot scope="core/edit-site" />
+										<SidebarFixedBottomSlot />
+									</>
 								)
 							}
 							footer={