@wordpress/edit-site 5.10.0 → 5.12.0

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/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 && (
@@ -305,31 +239,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/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);

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-actions/delete-page-menu-item.js

@@ -0,0 +1,71 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { useState } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	MenuItem,
+	__experimentalConfirmDialog as ConfirmDialog,
+} from '@wordpress/components';
+import { store as noticesStore } from '@wordpress/notices';
+
+export default function DeletePageMenuItem( { postId, onRemove } ) {
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+	const { deleteEntityRecord } = useDispatch( coreStore );
+	const page = useSelect(
+		( select ) =>
+			select( coreStore ).getEntityRecord( 'postType', 'page', postId ),
+		[ postId ]
+	);
+	async function removePage() {
+		try {
+			await deleteEntityRecord(
+				'postType',
+				'page',
+				postId,
+				{},
+				{ throwOnError: true }
+			);
+			createSuccessNotice(
+				sprintf(
+					/* translators: The page's title. */
+					__( '"%s" deleted.' ),
+					decodeEntities( page.title.rendered )
+				),
+				{
+					type: 'snackbar',
+					id: 'edit-site-page-removed',
+				}
+			);
+			onRemove?.();
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while deleting the page.' );
+
+			createErrorNotice( errorMessage, { type: 'snackbar' } );
+		} finally {
+			setIsModalOpen( false );
+		}
+	}
+	return (
+		<>
+			<MenuItem onClick={ () => setIsModalOpen( true ) } isDestructive>
+				{ __( 'Delete' ) }
+			</MenuItem>
+			<ConfirmDialog
+				isOpen={ isModalOpen }
+				onConfirm={ removePage }
+				onCancel={ () => setIsModalOpen( false ) }
+			>
+				{ __( 'Are you sure you want to delete this page?' ) }
+			</ConfirmDialog>
+		</>
+	);
+}

package/src/components/page-actions/index.js

@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { DropdownMenu, MenuGroup } from '@wordpress/components';
+import { moreVertical } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import DeletePageMenuItem from './delete-page-menu-item';
+
+export default function PageActions( {
+	postId,
+	className,
+	toggleProps,
+	onRemove,
+} ) {
+	return (
+		<DropdownMenu
+			icon={ moreVertical }
+			label={ __( 'Actions' ) }
+			className={ className }
+			toggleProps={ toggleProps }
+		>
+			{ () => (
+				<MenuGroup>
+					<DeletePageMenuItem
+						postId={ postId }
+						onRemove={ onRemove }
+					/>
+				</MenuGroup>
+			) }
+		</DropdownMenu>
+	);
+}

package/src/components/page-content-lock/constants.js

@@ -0,0 +1,5 @@
+export const CONTENT_BLOCK_TYPES = [
+	'core/post-title',
+	'core/post-featured-image',
+	'core/post-content',
+];

package/src/components/page-content-lock/index.js

@@ -0,0 +1,14 @@
+/**
+ * Internal dependencies
+ */
+import { useDisableNonContentBlocks } from './use-disable-non-content-blocks';
+
+/**
+ * Component that when rendered, locks the site editor so that only page content
+ * can be edited.
+ */
+export function PageContentLock() {
+	useDisableNonContentBlocks();
+}
+
+export { usePageContentLockNotifications } from './use-page-content-lock-notifications';

package/src/components/page-content-lock/use-disable-non-content-blocks.js

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { addFilter, removeFilter } from '@wordpress/hooks';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../private-apis';
+import { CONTENT_BLOCK_TYPES } from './constants';
+
+const { useBlockEditingMode } = unlock( blockEditorPrivateApis );
+
+/**
+ * Disables non-content blocks using the `useBlockEditingMode` hook.
+ */
+export function useDisableNonContentBlocks() {
+	useBlockEditingMode( 'disabled' );
+	useEffect( () => {
+		addFilter(
+			'editor.BlockEdit',
+			'core/edit-site/disable-non-content-blocks',
+			withDisableNonContentBlocks
+		);
+		return () =>
+			removeFilter(
+				'editor.BlockEdit',
+				'core/edit-site/disable-non-content-blocks'
+			);
+	}, [] );
+}
+
+const withDisableNonContentBlocks = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => {
+		const isContent = CONTENT_BLOCK_TYPES.includes( props.name );
+		const mode = isContent ? 'contentOnly' : undefined;
+		useBlockEditingMode( mode );
+		return <BlockEdit { ...props } />;
+	},
+	'withBlockEditingMode'
+);