@wordpress/edit-site 5.11.0 → 5.12.0

package/src/components/add-new-page/index.js

@@ -0,0 +1,105 @@
+/**
+ * External dependencies
+ */
+import { kebabCase } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Modal,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	TextControl,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as noticesStore } from '@wordpress/notices';
+
+export default function AddNewPageModal( { onSave, onClose } ) {
+	const [ isCreatingPage, setIsCreatingPage ] = useState( false );
+	const [ title, setTitle ] = useState( '' );
+
+	const { saveEntityRecord } = useDispatch( coreStore );
+	const { createErrorNotice, createSuccessNotice } =
+		useDispatch( noticesStore );
+
+	async function createPage( event ) {
+		event.preventDefault();
+
+		if ( isCreatingPage ) {
+			return;
+		}
+		setIsCreatingPage( true );
+		try {
+			const newPage = await saveEntityRecord(
+				'postType',
+				'page',
+				{
+					status: 'draft',
+					title,
+					slug: kebabCase( title || __( 'No title' ) ),
+				},
+				{ throwOnError: true }
+			);
+
+			onSave( newPage );
+
+			createSuccessNotice(
+				sprintf(
+					// translators: %s: Title of the created template e.g: "Category".
+					__( '"%s" successfully created.' ),
+					newPage.title?.rendered || title
+				),
+				{
+					type: 'snackbar',
+				}
+			);
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while creating the page.' );
+
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+			} );
+		} finally {
+			setIsCreatingPage( false );
+		}
+	}
+
+	return (
+		<Modal title={ __( 'Draft a new page' ) } onRequestClose={ onClose }>
+			<form onSubmit={ createPage }>
+				<VStack spacing={ 3 }>
+					<TextControl
+						/* eslint-disable jsx-a11y/no-autofocus */
+						autoFocus
+						/* eslint-enable jsx-a11y/no-autofocus */
+						label={ __( 'Page title' ) }
+						onChange={ setTitle }
+						placeholder={ __( 'No title' ) }
+						value={ title }
+					/>
+					<HStack spacing={ 2 } justify="end">
+						<Button variant="tertiary" onClick={ onClose }>
+							{ __( 'Cancel' ) }
+						</Button>
+						<Button
+							variant="primary"
+							type="submit"
+							isBusy={ isCreatingPage }
+							aria-disabled={ isCreatingPage }
+						>
+							{ __( 'Create draft' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		</Modal>
+	);
+}

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

@@ -13,6 +13,7 @@ import {
 	__experimentalText as Text,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
+import { decodeEntities } from '@wordpress/html-entities';
 import { useState } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
@@ -140,7 +141,7 @@ export default function NewTemplate( {
 				sprintf(
 					// translators: %s: Title of the created template e.g: "Category".
 					__( '"%s" successfully created.' ),
-					newTemplate.title?.rendered || title
+					decodeEntities( newTemplate.title?.rendered || title )
 				),
 				{
 					type: 'snackbar',

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

@@ -38,6 +38,10 @@ import ResizableEditor from './resizable-editor';
 import EditorCanvas from './editor-canvas';
 import { unlock } from '../../private-apis';
 import EditorCanvasContainer from '../editor-canvas-container';
+import {
+	PageContentLock,
+	usePageContentLockNotifications,
+} from '../page-content-lock';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 
@@ -49,20 +53,25 @@ const LAYOUT = {
 
 export default function BlockEditor() {
 	const { setIsInserterOpened } = useDispatch( editSiteStore );
-	const { storedSettings, templateType, canvasMode } = useSelect(
-		( select ) => {
-			const { getSettings, getEditedPostType, getCanvasMode } = unlock(
-				select( editSiteStore )
-			);
-
-			return {
-				storedSettings: getSettings( setIsInserterOpened ),
-				templateType: getEditedPostType(),
-				canvasMode: getCanvasMode(),
-			};
-		},
-		[ setIsInserterOpened ]
-	);
+	const { storedSettings, templateType, canvasMode, hasPageContentLock } =
+		useSelect(
+			( select ) => {
+				const {
+					getSettings,
+					getEditedPostType,
+					getCanvasMode,
+					hasPageContentLock: _hasPageContentLock,
+				} = unlock( select( editSiteStore ) );
+
+				return {
+					storedSettings: getSettings( setIsInserterOpened ),
+					templateType: getEditedPostType(),
+					canvasMode: getCanvasMode(),
+					hasPageContentLock: _hasPageContentLock(),
+				};
+			},
+			[ setIsInserterOpened ]
+		);
 
 	const settingsBlockPatterns =
 		storedSettings.__experimentalAdditionalBlockPatterns ?? // WP 6.0
@@ -137,6 +146,7 @@ export default function BlockEditor() {
 		contentRef,
 		useClipboardHandler(),
 		useTypingObserver(),
+		usePageContentLockNotifications(),
 	] );
 	const isMobileViewport = useViewportMatch( 'small', '<' );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
@@ -162,6 +172,7 @@ export default function BlockEditor() {
 			onChange={ onChange }
 			useSubRegistry={ false }
 		>
+			{ hasPageContentLock && <PageContentLock /> }
 			<TemplatePartConverter />
 			<SidebarInspectorFill>
 				<BlockInspector />

package/src/components/editor/index.js

@@ -37,7 +37,6 @@ import WelcomeGuide from '../welcome-guide';
 import StartTemplateOptions from '../start-template-options';
 import { store as editSiteStore } from '../../store';
 import { GlobalStylesRenderer } from '../global-styles-renderer';
-
 import useTitle from '../routes/use-title';
 import CanvasSpinner from '../canvas-spinner';
 import { unlock } from '../../private-apis';
@@ -74,6 +73,7 @@ export default function Editor( { isLoading } ) {
 		isListViewOpen,
 		showIconLabels,
 		showBlockBreadcrumbs,
+		hasPageContentLock,
 	} = useSelect( ( select ) => {
 		const {
 			getEditedPostContext,
@@ -81,6 +81,7 @@ export default function Editor( { isLoading } ) {
 			getCanvasMode,
 			isInserterOpened,
 			isListViewOpened,
+			hasPageContentLock: _hasPageContentLock,
 		} = unlock( select( editSiteStore ) );
 		const { __unstableGetEditorMode } = select( blockEditorStore );
 		const { getActiveComplementaryArea } = select( interfaceStore );
@@ -105,6 +106,7 @@ export default function Editor( { isLoading } ) {
 				'core/edit-site',
 				'showBlockBreadcrumbs'
 			),
+			hasPageContentLock: _hasPageContentLock(),
 		};
 	}, [] );
 	const { setEditedPostContext } = useDispatch( editSiteStore );
@@ -122,9 +124,10 @@ export default function Editor( { isLoading } ) {
 	const secondarySidebarLabel = isListViewOpen
 		? __( 'List View' )
 		: __( 'Block Library' );
-	const blockContext = useMemo(
-		() => ( {
-			...context,
+	const blockContext = useMemo( () => {
+		const { postType, postId, ...nonPostFields } = context ?? {};
+		return {
+			...( hasPageContentLock ? context : nonPostFields ),
 			queryContext: [
 				context?.queryContext || { page: 1 },
 				( newQueryContext ) =>
@@ -136,9 +139,8 @@ export default function Editor( { isLoading } ) {
 						},
 					} ),
 			],
-		} ),
-		[ context, setEditedPostContext ]
-	);
+		};
+	}, [ hasPageContentLock, context, setEditedPostContext ] );
 
 	let title;
 	if ( hasLoadedPost ) {
@@ -227,7 +229,11 @@ export default function Editor( { isLoading } ) {
 							footer={
 								shouldShowBlockBreakcrumbs && (
 									<BlockBreadcrumb
-										rootLabelText={ __( 'Template' ) }
+										rootLabelText={
+											hasPageContentLock
+												? __( 'Page' )
+												: __( 'Template' )
+										}
 									/>
 								)
 							}

package/src/components/editor/style.scss

@@ -19,16 +19,11 @@
 }
 
 // Adjust the position of the notices
-.edit-site {
-	.components-editor-notices__snackbar {
-		position: fixed;
-		right: 0;
-		bottom: 0;
-		padding: 16px;
-	}
-	.is-edit-mode .components-editor-notices__snackbar {
-		bottom: 24px;
-	}
+.edit-site .components-editor-notices__snackbar {
+	position: absolute;
+	right: 0;
+	bottom: 40px;
+	padding-left: 16px;
+	padding-right: 16px;
 }
-
 @include editor-left(".edit-site .components-editor-notices__snackbar")

package/src/components/global-styles/screen-revisions/use-global-styles-revisions.js

@@ -5,10 +5,7 @@ import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { useContext, useMemo } from '@wordpress/element';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
+
 /**
  * Internal dependencies
  */
@@ -75,7 +72,12 @@ export default function useGlobalStylesRevisions() {
 		}
 
 		// Adds an item for unsaved changes.
-		if ( isDirty && ! isEmpty( userConfig ) && currentUser ) {
+		if (
+			isDirty &&
+			userConfig &&
+			Object.keys( userConfig ).length > 0 &&
+			currentUser
+		) {
 			const unsavedRevision = {
 				id: 'unsaved',
 				styles: userConfig?.styles,

package/src/components/global-styles/ui.js

@@ -237,6 +237,33 @@ function GlobalStylesBlockLink() {
 	}, [ selectedBlockClientId, selectedBlockName, blockHasGlobalStyles ] );
 }
 
+function GlobalStylesEditorCanvasContainerLink() {
+	const { goTo, location } = useNavigator();
+	const editorCanvasContainerView = useSelect(
+		( select ) =>
+			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
+		[]
+	);
+
+	// If the user switches the editor canvas container view, redirect
+	// to the appropriate screen. This effectively allows deep linking to the
+	// desired screens from outside the global styles navigation provider.
+	useEffect( () => {
+		if ( editorCanvasContainerView === 'global-styles-revisions' ) {
+			// Switching to the revisions container view should
+			// redirect to the revisions screen.
+			goTo( '/revisions' );
+		} else if (
+			!! editorCanvasContainerView &&
+			location?.path === '/revisions'
+		) {
+			// Switching to any container other than revisions should
+			// redirect from the revisions screen to the root global styles screen.
+			goTo( '/' );
+		}
+	}, [ editorCanvasContainerView, location?.path, goTo ] );
+}
+
 function GlobalStylesUI() {
 	const blocks = getBlockTypes();
 	const editorCanvasContainerView = useSelect(
@@ -326,6 +353,7 @@ function GlobalStylesUI() {
 
 			<GlobalStylesActionMenu />
 			<GlobalStylesBlockLink />
+			<GlobalStylesEditorCanvasContainerLink />
 		</NavigatorProvider>
 	);
 }

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

@@ -1,8 +1,13 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { sprintf, __ } from '@wordpress/i18n';
-import { useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	Button,
 	VisuallyHidden,
@@ -10,27 +15,88 @@ import {
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
 import { BlockIcon } from '@wordpress/block-editor';
-import { privateApis as commandsPrivateApis } from '@wordpress/commands';
+import { store as commandsStore } from '@wordpress/commands';
+import {
+	chevronLeftSmall as chevronLeftSmallIcon,
+	page as pageIcon,
+} from '@wordpress/icons';
+import { useEntityRecord } from '@wordpress/core-data';
 import { displayShortcut } from '@wordpress/keycodes';
+import { useState, useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import useEditedEntityRecord from '../../use-edited-entity-record';
-import { unlock } from '../../../private-apis';
-
-const { store: commandsStore } = unlock( commandsPrivateApis );
+import { store as editSiteStore } from '../../../store';
 
 export default function DocumentActions() {
-	const { open: openCommandCenter } = useDispatch( commandsStore );
+	const isPage = useSelect( ( select ) => select( editSiteStore ).isPage() );
+	return isPage ? <PageDocumentActions /> : <TemplateDocumentActions />;
+}
+
+function PageDocumentActions() {
+	const { hasPageContentLock, context } = useSelect(
+		( select ) => ( {
+			hasPageContentLock: select( editSiteStore ).hasPageContentLock(),
+			context: select( editSiteStore ).getEditedPostContext(),
+		} ),
+		[]
+	);
+
+	const { hasResolved, editedRecord } = useEntityRecord(
+		'postType',
+		context.postType,
+		context.postId
+	);
+
+	const { setHasPageContentLock } = useDispatch( editSiteStore );
+
+	const [ hasEditedTemplate, setHasEditedTemplate ] = useState( false );
+	const prevHasPageContentLock = useRef( false );
+	useEffect( () => {
+		if ( prevHasPageContentLock.current && ! hasPageContentLock ) {
+			setHasEditedTemplate( true );
+		}
+		prevHasPageContentLock.current = hasPageContentLock;
+	}, [ hasPageContentLock ] );
+
+	if ( ! hasResolved ) {
+		return null;
+	}
+
+	if ( ! editedRecord ) {
+		return (
+			<div className="edit-site-document-actions">
+				{ __( 'Document not found' ) }
+			</div>
+		);
+	}
+
+	return hasPageContentLock ? (
+		<BaseDocumentActions
+			className={ classnames( 'is-page', {
+				'is-animated': hasEditedTemplate,
+			} ) }
+			icon={ pageIcon }
+		>
+			{ editedRecord.title }
+		</BaseDocumentActions>
+	) : (
+		<TemplateDocumentActions
+			className="is-animated"
+			onBack={ () => setHasPageContentLock( true ) }
+		/>
+	);
+}
+
+function TemplateDocumentActions( { className, onBack } ) {
 	const { isLoaded, record, getTitle, icon } = useEditedEntityRecord();
 
-	// Return a simple loading indicator until we have information to show.
 	if ( ! isLoaded ) {
 		return null;
 	}
 
-	// Return feedback that the template does not seem to exist.
 	if ( ! record ) {
 		return (
 			<div className="edit-site-document-actions">
@@ -45,31 +111,59 @@ export default function DocumentActions() {
 			: __( 'template' );
 
 	return (
-		<Button
-			className="edit-site-document-actions"
-			onClick={ () => openCommandCenter() }
+		<BaseDocumentActions
+			className={ className }
+			icon={ icon }
+			onBack={ onBack }
+		>
+			<VisuallyHidden as="span">
+				{ sprintf(
+					/* translators: %s: the entity being edited, like "template"*/
+					__( 'Editing %s: ' ),
+					entityLabel
+				) }
+			</VisuallyHidden>
+			{ getTitle() }
+		</BaseDocumentActions>
+	);
+}
+
+function BaseDocumentActions( { className, icon, children, onBack } ) {
+	const { open: openCommandCenter } = useDispatch( commandsStore );
+	return (
+		<div
+			className={ classnames( 'edit-site-document-actions', className ) }
 		>
-			<span className="edit-site-document-actions__left"></span>
-			<HStack
-				spacing={ 1 }
-				justify="center"
-				className="edit-site-document-actions__title"
+			{ onBack && (
+				<Button
+					className="edit-site-document-actions__back"
+					icon={ chevronLeftSmallIcon }
+					onClick={ ( event ) => {
+						event.stopPropagation();
+						onBack();
+					} }
+				>
+					{ __( 'Back' ) }
+				</Button>
+			) }
+			<Button
+				className="edit-site-document-actions__command"
+				onClick={ () => openCommandCenter() }
 			>
-				<BlockIcon icon={ icon } />
-				<Text size="body" as="h1">
-					<VisuallyHidden as="span">
-						{ sprintf(
-							/* translators: %s: the entity being edited, like "template"*/
-							__( 'Editing %s: ' ),
-							entityLabel
-						) }
-					</VisuallyHidden>
-					{ getTitle() }
-				</Text>
-			</HStack>
-			<span className="edit-site-document-actions__shortcut">
-				{ displayShortcut.primary( 'k' ) }
-			</span>
-		</Button>
+				<HStack
+					className="edit-site-document-actions__title"
+					spacing={ 1 }
+					justify="center"
+				>
+					<BlockIcon icon={ icon } />
+					<Text size="body" as="h1">
+						{ children }
+					</Text>
+				</HStack>
+				<span className="edit-site-document-actions__shortcut">
+					{ displayShortcut.primary( 'k' ) }
+				</span>
+			</Button>
+		</div>
 	);
 }

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,86 @@
 	}
 }
 
+.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};
+	text-align: right;
+
 	&:hover {
 		color: $gray-700;
 	}
 }
 
-.edit-site-document-actions__left {
+.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/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>
 );