@wordpress/edit-site 5.14.0 → 5.16.0

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

@@ -66,6 +66,7 @@ export default function HeaderEditMode() {
 		homeUrl,
 		showIconLabels,
 		editorCanvasView,
+		hasFixedToolbar,
 	} = useSelect( ( select ) => {
 		const {
 			__experimentalGetPreviewDeviceType,
@@ -83,6 +84,8 @@ export default function HeaderEditMode() {
 			getUnstableBase, // Site index.
 		} = select( coreStore );
 
+		const { get: getPreference } = select( preferencesStore );
+
 		return {
 			deviceType: __experimentalGetPreviewDeviceType(),
 			templateType: postType,
@@ -94,23 +97,24 @@ export default function HeaderEditMode() {
 			isVisualMode: getEditorMode() === 'visual',
 			blockEditorMode: __unstableGetEditorMode(),
 			homeUrl: getUnstableBase()?.home,
-			showIconLabels: select( preferencesStore ).get(
-				'core/edit-site',
+			showIconLabels: getPreference(
+				editSiteStore.name,
 				'showIconLabels'
 			),
 			editorCanvasView: unlock(
 				select( editSiteStore )
 			).getEditorCanvasContainerView(),
-			isDistractionFree: select( preferencesStore ).get(
-				'core/edit-site',
+			isDistractionFree: getPreference(
+				editSiteStore.name,
 				'distractionFree'
 			),
+			hasFixedToolbar: getPreference(
+				editSiteStore.name,
+				'fixedToolbar'
+			),
 		};
 	}, [] );
 
-	const { get: getPreference } = useSelect( preferencesStore );
-	const hasFixedToolbar = getPreference( editSiteStore.name, 'fixedToolbar' );
-
 	const {
 		__experimentalSetPreviewDeviceType: setPreviewDeviceType,
 		setIsInserterOpened,
@@ -319,21 +323,24 @@ export default function HeaderEditMode() {
 								setDeviceType={ setPreviewDeviceType }
 								label={ __( 'View' ) }
 							>
-								<MenuGroup>
-									<MenuItem
-										href={ homeUrl }
-										target="_blank"
-										icon={ external }
-									>
-										{ __( 'View site' ) }
-										<VisuallyHidden as="span">
-											{
-												/* translators: accessibility text */
-												__( '(opens in a new tab)' )
-											}
-										</VisuallyHidden>
-									</MenuItem>
-								</MenuGroup>
+								{ ( { onClose } ) => (
+									<MenuGroup>
+										<MenuItem
+											href={ homeUrl }
+											target="_blank"
+											icon={ external }
+											onClick={ onClose }
+										>
+											{ __( 'View site' ) }
+											<VisuallyHidden as="span">
+												{
+													/* translators: accessibility text */
+													__( '(opens in a new tab)' )
+												}
+											</VisuallyHidden>
+										</MenuItem>
+									</MenuGroup>
+								) }
 							</PreviewOptions>
 						</div>
 					) }

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

@@ -33,10 +33,8 @@ function KeyboardShortcutsEditMode() {
 	);
 	const { redo, undo } = useDispatch( coreStore );
 	const {
-		isFeatureActive,
 		setIsListViewOpened,
 		switchEditorMode,
-		toggleFeature,
 		setIsInserterOpened,
 		closeGeneralSidebar,
 	} = useDispatch( editSiteStore );
@@ -47,7 +45,8 @@ function KeyboardShortcutsEditMode() {
 	const { getBlockName, getSelectedBlockClientId, getBlockAttributes } =
 		useSelect( blockEditorStore );
 
-	const { set: setPreference } = useDispatch( preferencesStore );
+	const { get: getPreference } = useSelect( preferencesStore );
+	const { set: setPreference, toggle } = useDispatch( preferencesStore );
 	const { createInfoNotice } = useDispatch( noticesStore );
 
 	const toggleDistractionFree = () => {
@@ -135,9 +134,9 @@ function KeyboardShortcutsEditMode() {
 
 	useShortcut( 'core/edit-site/toggle-distraction-free', () => {
 		toggleDistractionFree();
-		toggleFeature( 'distractionFree' );
+		toggle( 'core/edit-site', 'distractionFree' );
 		createInfoNotice(
-			isFeatureActive( 'distractionFree' )
+			getPreference( 'core/edit-site', 'distractionFree' )
 				? __( 'Distraction free mode turned on.' )
 				: __( 'Distraction free mode turned off.' ),
 			{

package/src/components/layout/index.js

@@ -121,6 +121,8 @@ export default function Layout() {
 	const [ fullResizer ] = useResizeObserver();
 	const [ isResizing ] = useState( false );
 	const isEditorLoading = useIsSiteEditorLoading();
+	const [ isResizableFrameOversized, setIsResizableFrameOversized ] =
+		useState( false );
 
 	// This determines which animation variant should apply to the header.
 	// There is also a `isDistractionFreeHovering` state that gets priority
@@ -218,6 +220,7 @@ export default function Layout() {
 							edit: { x: 0 },
 						} }
 						ref={ hubRef }
+						isTransparent={ isResizableFrameOversized }
 						className="edit-site-layout__hub"
 					/>
 
@@ -257,28 +260,35 @@ export default function Layout() {
 				</motion.div>
 
 				<div className="edit-site-layout__content">
-					<motion.div
-						// The sidebar is needed for routing on mobile
-						// (https://github.com/WordPress/gutenberg/pull/51558/files#r1231763003),
-						// so we can't remove the element entirely. Using `inert` will make
-						// it inaccessible to screen readers and keyboard navigation.
-						inert={ showSidebar ? undefined : 'inert' }
-						animate={ { opacity: showSidebar ? 1 : 0 } }
-						transition={ {
-							type: 'tween',
-							duration:
-								// Disable transition in mobile to emulate a full page transition.
-								disableMotion || isMobileViewport
-									? 0
-									: ANIMATION_DURATION,
-							ease: 'easeOut',
-						} }
-						className="edit-site-layout__sidebar"
+					{ /*
+						The NavigableRegion must always be rendered and not use
+						`inert` otherwise `useNavigateRegions` will fail.
+					*/ }
+					<NavigableRegion
+						ariaLabel={ __( 'Navigation' ) }
+						className="edit-site-layout__sidebar-region"
 					>
-						<NavigableRegion ariaLabel={ __( 'Navigation' ) }>
+						<motion.div
+							// The sidebar is needed for routing on mobile
+							// (https://github.com/WordPress/gutenberg/pull/51558/files#r1231763003),
+							// so we can't remove the element entirely. Using `inert` will make
+							// it inaccessible to screen readers and keyboard navigation.
+							inert={ showSidebar ? undefined : 'inert' }
+							animate={ { opacity: showSidebar ? 1 : 0 } }
+							transition={ {
+								type: 'tween',
+								duration:
+									// Disable transition in mobile to emulate a full page transition.
+									disableMotion || isMobileViewport
+										? 0
+										: ANIMATION_DURATION,
+								ease: 'easeOut',
+							} }
+							className="edit-site-layout__sidebar"
+						>
 							<Sidebar />
-						</NavigableRegion>
-					</motion.div>
+						</motion.div>
+					</NavigableRegion>
 
 					<SavePanel />
 
@@ -315,7 +325,13 @@ export default function Layout() {
 											}
 											initial={ false }
 											layout="position"
-											className="edit-site-layout__canvas"
+											className={ classnames(
+												'edit-site-layout__canvas',
+												{
+													'is-right-aligned':
+														isResizableFrameOversized,
+												}
+											) }
 											transition={ {
 												type: 'tween',
 												duration:
@@ -331,7 +347,18 @@ export default function Layout() {
 														! isEditorLoading
 													}
 													isFullWidth={ isEditing }
-													oversizedClassName="edit-site-layout__resizable-frame-oversized"
+													defaultSize={ {
+														width:
+															canvasSize.width -
+															24 /* $canvas-padding */,
+														height: canvasSize.height,
+													} }
+													isOversized={
+														isResizableFrameOversized
+													}
+													setIsOversized={
+														setIsResizableFrameOversized
+													}
 													innerContentStyle={ {
 														background:
 															gradientValue ??

package/src/components/layout/style.scss

@@ -58,9 +58,10 @@
 	display: flex;
 }
 
-.edit-site-layout__sidebar {
+.edit-site-layout__sidebar-region {
 	z-index: z-index(".edit-site-layout__sidebar");
 	width: 100vw;
+	flex-shrink: 0;
 
 	@include break-medium {
 		width: $nav-sidebar-width;
@@ -74,7 +75,7 @@
 		top: 0;
 	}
 
-	> div {
+	.edit-site-layout__sidebar {
 		display: flex;
 		flex-direction: column;
 		height: 100%;
@@ -120,7 +121,7 @@
 	justify-content: center;
 	align-items: center;
 
-	&:has(.edit-site-layout__resizable-frame-oversized) {
+	&.is-right-aligned {
 		justify-content: flex-end;
 	}
 

package/src/components/page/index.js

@@ -26,17 +26,17 @@ export default function Page( {
 
 	return (
 		<NavigableRegion className={ classes } ariaLabel={ title }>
-			{ ! hideTitleFromUI && title && (
-				<Header
-					title={ title }
-					subTitle={ subTitle }
-					actions={ actions }
-				/>
-			) }
 			<div className="edit-site-page-content">
+				{ ! hideTitleFromUI && title && (
+					<Header
+						title={ title }
+						subTitle={ subTitle }
+						actions={ actions }
+					/>
+				) }
 				{ children }
-				<EditorSnackbars />
 			</div>
+			<EditorSnackbars />
 		</NavigableRegion>
 	);
 }

package/src/components/page/style.scss

@@ -2,7 +2,7 @@
 	color: $gray-800;
 	background: $white;
 	flex-grow: 1;
-	overflow: auto;
+	overflow: hidden;
 	margin: 0;
 	margin-top: $header-height;
 	@include break-medium() {
@@ -13,8 +13,7 @@
 
 .edit-site-page-header {
 	padding: 0 $grid-unit-40;
-	height: $header-height;
-	padding-left: $grid-unit-40;
+	min-height: $header-height;
 	border-bottom: 1px solid $gray-100;
 	background: $white;
 	position: sticky;
@@ -33,6 +32,10 @@
 }
 
 .edit-site-page-content {
-	padding: $grid-unit-40 $grid-unit-40;
-	overflow-x: auto;
+	height: 100%;
+	display: flex;
+	overflow: auto;
+	flex-flow: column;
+	position: relative;
+	z-index: z-index(".edit-site-page-content");
 }

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

@@ -8,7 +8,7 @@ import { moreVertical } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import DeletePageMenuItem from './delete-page-menu-item';
+import TrashPageMenuItem from './trash-page-menu-item';
 
 export default function PageActions( {
 	postId,
@@ -25,7 +25,7 @@ export default function PageActions( {
 		>
 			{ () => (
 				<MenuGroup>
-					<DeletePageMenuItem
+					<TrashPageMenuItem
 						postId={ postId }
 						onRemove={ onRemove }
 					/>

package/src/components/page-actions/{delete-page-menu-item.js → trash-page-menu-item.js}

@@ -3,17 +3,12 @@
  */
 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 { MenuItem } from '@wordpress/components';
 import { store as noticesStore } from '@wordpress/notices';
 
-export default function DeletePageMenuItem( { postId, onRemove } ) {
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
+export default function TrashPageMenuItem( { postId, onRemove } ) {
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
 	const { deleteEntityRecord } = useDispatch( coreStore );
@@ -34,12 +29,12 @@ export default function DeletePageMenuItem( { postId, onRemove } ) {
 			createSuccessNotice(
 				sprintf(
 					/* translators: The page's title. */
-					__( '"%s" deleted.' ),
+					__( '"%s" moved to the Trash.' ),
 					decodeEntities( page.title.rendered )
 				),
 				{
 					type: 'snackbar',
-					id: 'edit-site-page-removed',
+					id: 'edit-site-page-trashed',
 				}
 			);
 			onRemove?.();
@@ -47,26 +42,18 @@ export default function DeletePageMenuItem( { postId, onRemove } ) {
 			const errorMessage =
 				error.message && error.code !== 'unknown_error'
 					? error.message
-					: __( 'An error occurred while deleting the page.' );
+					: __(
+							'An error occurred while moving the page to the trash.'
+					  );
 
 			createErrorNotice( errorMessage, { type: 'snackbar' } );
-		} finally {
-			setIsModalOpen( false );
 		}
 	}
 	return (
 		<>
-			<MenuItem onClick={ () => setIsModalOpen( true ) } isDestructive>
-				{ __( 'Delete' ) }
+			<MenuItem onClick={ () => removePage() } isDestructive>
+				{ __( 'Move to Trash' ) }
 			</MenuItem>
-			<ConfirmDialog
-				isOpen={ isModalOpen }
-				onConfirm={ removePage }
-				onCancel={ () => setIsModalOpen( false ) }
-				confirmButtonText={ __( 'Delete' ) }
-			>
-				{ __( 'Are you sure you want to delete this page?' ) }
-			</ConfirmDialog>
 		</>
 	);
 }

package/src/components/page-content-focus-manager/disable-non-page-content-blocks.js

@@ -10,16 +10,22 @@ import { useEffect } from '@wordpress/element';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import { PAGE_CONTENT_BLOCK_TYPES } from './constants';
 
 const { useBlockEditingMode } = unlock( blockEditorPrivateApis );
 
+const PAGE_CONTENT_BLOCK_TYPES = [
+	'core/post-title',
+	'core/post-featured-image',
+	'core/post-content',
+];
+
 /**
  * Component that when rendered, makes it so that the site editor allows only
  * page content to be edited.
  */
 export default function DisableNonPageContentBlocks() {
 	useDisableNonPageContentBlocks();
+	return null;
 }
 
 /**
@@ -43,8 +49,11 @@ export function useDisableNonPageContentBlocks() {
 
 const withDisableNonPageContentBlocks = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
-		const isContent = PAGE_CONTENT_BLOCK_TYPES.includes( props.name );
-		const mode = isContent ? 'contentOnly' : undefined;
+		const isDescendentOfQueryLoop = props.context.queryId !== undefined;
+		const isPageContent =
+			PAGE_CONTENT_BLOCK_TYPES.includes( props.name ) &&
+			! isDescendentOfQueryLoop;
+		const mode = isPageContent ? 'contentOnly' : undefined;
 		useBlockEditingMode( mode );
 		return <BlockEdit { ...props } />;
 	},

package/src/components/page-patterns/duplicate-menu-item.js

@@ -0,0 +1,196 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuItem } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import {
+	TEMPLATE_PARTS,
+	PATTERNS,
+	SYNC_TYPES,
+	USER_PATTERNS,
+	USER_PATTERN_CATEGORY,
+} from './utils';
+import {
+	useExistingTemplateParts,
+	getUniqueTemplatePartTitle,
+	getCleanTemplatePartSlug,
+} from '../../utils/template-part-create';
+import { unlock } from '../../lock-unlock';
+
+const { useHistory } = unlock( routerPrivateApis );
+
+function getPatternMeta( item ) {
+	if ( item.type === PATTERNS ) {
+		return { wp_pattern_sync_status: SYNC_TYPES.unsynced };
+	}
+
+	const syncStatus = item.reusableBlock.wp_pattern_sync_status;
+	const isUnsynced = syncStatus === SYNC_TYPES.unsynced;
+
+	return {
+		...item.reusableBlock.meta,
+		wp_pattern_sync_status: isUnsynced ? syncStatus : undefined,
+	};
+}
+
+export default function DuplicateMenuItem( {
+	categoryId,
+	item,
+	label = __( 'Duplicate' ),
+	onClose,
+} ) {
+	const { saveEntityRecord } = useDispatch( coreStore );
+	const { createErrorNotice, createSuccessNotice } =
+		useDispatch( noticesStore );
+
+	const history = useHistory();
+	const existingTemplateParts = useExistingTemplateParts();
+
+	async function createTemplatePart() {
+		try {
+			const copiedTitle = sprintf(
+				/* translators: %s: Existing template part title */
+				__( '%s (Copy)' ),
+				item.title
+			);
+			const title = getUniqueTemplatePartTitle(
+				copiedTitle,
+				existingTemplateParts
+			);
+			const slug = getCleanTemplatePartSlug( title );
+			const { area, content } = item.templatePart;
+
+			const result = await saveEntityRecord(
+				'postType',
+				'wp_template_part',
+				{ slug, title, content, area },
+				{ throwOnError: true }
+			);
+
+			createSuccessNotice(
+				sprintf(
+					// translators: %s: The new template part's title e.g. 'Call to action (copy)'.
+					__( '"%s" created.' ),
+					title
+				),
+				{
+					type: 'snackbar',
+					id: 'edit-site-patterns-success',
+					actions: [
+						{
+							label: __( 'Edit' ),
+							onClick: () =>
+								history.push( {
+									postType: TEMPLATE_PARTS,
+									postId: result?.id,
+									categoryType: TEMPLATE_PARTS,
+									categoryId,
+								} ),
+						},
+					],
+				}
+			);
+
+			onClose();
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __(
+							'An error occurred while creating the template part.'
+					  );
+
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+				id: 'edit-site-patterns-error',
+			} );
+			onClose();
+		}
+	}
+
+	async function createPattern() {
+		try {
+			const isThemePattern = item.type === PATTERNS;
+			const title = sprintf(
+				/* translators: %s: Existing pattern title */
+				__( '%s (Copy)' ),
+				item.title
+			);
+
+			const result = await saveEntityRecord(
+				'postType',
+				'wp_block',
+				{
+					content: isThemePattern
+						? item.content
+						: item.reusableBlock.content,
+					meta: getPatternMeta( item ),
+					status: 'publish',
+					title,
+				},
+				{ throwOnError: true }
+			);
+
+			const actionLabel = isThemePattern
+				? __( 'View my patterns' )
+				: __( 'Edit' );
+
+			const newLocation = isThemePattern
+				? {
+						categoryType: USER_PATTERNS,
+						categoryId: USER_PATTERN_CATEGORY,
+						path: '/patterns',
+				  }
+				: {
+						categoryType: USER_PATTERNS,
+						categoryId: USER_PATTERN_CATEGORY,
+						postType: USER_PATTERNS,
+						postId: result?.id,
+				  };
+
+			createSuccessNotice(
+				sprintf(
+					// translators: %s: The new pattern's title e.g. 'Call to action (copy)'.
+					__( '"%s" added to my patterns.' ),
+					title
+				),
+				{
+					type: 'snackbar',
+					id: 'edit-site-patterns-success',
+					actions: [
+						{
+							label: actionLabel,
+							onClick: () => history.push( newLocation ),
+						},
+					],
+				}
+			);
+
+			onClose();
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while creating the pattern.' );
+
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+				id: 'edit-site-patterns-error',
+			} );
+			onClose();
+		}
+	}
+
+	const createItem =
+		item.type === TEMPLATE_PARTS ? createTemplatePart : createPattern;
+
+	return <MenuItem onClick={ createItem }>{ label }</MenuItem>;
+}