@wordpress/edit-site 5.22.0 → 5.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.22.0",
+	"version": "5.24.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -28,49 +28,49 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@tanstack/react-table": "^8.10.3",
-		"@wordpress/a11y": "^3.45.0",
-		"@wordpress/api-fetch": "^6.42.0",
-		"@wordpress/block-editor": "^12.13.0",
-		"@wordpress/block-library": "^8.22.0",
-		"@wordpress/blocks": "^12.22.0",
-		"@wordpress/commands": "^0.16.0",
-		"@wordpress/components": "^25.11.0",
-		"@wordpress/compose": "^6.22.0",
-		"@wordpress/core-commands": "^0.14.0",
-		"@wordpress/core-data": "^6.22.0",
-		"@wordpress/data": "^9.15.0",
-		"@wordpress/date": "^4.45.0",
-		"@wordpress/deprecated": "^3.45.0",
-		"@wordpress/dom": "^3.45.0",
-		"@wordpress/editor": "^13.22.0",
-		"@wordpress/element": "^5.22.0",
-		"@wordpress/escape-html": "^2.45.0",
-		"@wordpress/hooks": "^3.45.0",
-		"@wordpress/html-entities": "^3.45.0",
-		"@wordpress/i18n": "^4.45.0",
-		"@wordpress/icons": "^9.36.0",
-		"@wordpress/interface": "^5.22.0",
-		"@wordpress/keyboard-shortcuts": "^4.22.0",
-		"@wordpress/keycodes": "^3.45.0",
-		"@wordpress/media-utils": "^4.36.0",
-		"@wordpress/notices": "^4.13.0",
-		"@wordpress/patterns": "^1.6.0",
-		"@wordpress/plugins": "^6.13.0",
-		"@wordpress/preferences": "^3.22.0",
-		"@wordpress/primitives": "^3.43.0",
-		"@wordpress/private-apis": "^0.27.0",
-		"@wordpress/reusable-blocks": "^4.22.0",
-		"@wordpress/router": "^0.14.0",
-		"@wordpress/style-engine": "^1.28.0",
-		"@wordpress/url": "^3.46.0",
-		"@wordpress/viewport": "^5.22.0",
-		"@wordpress/widgets": "^3.22.0",
-		"@wordpress/wordcount": "^3.45.0",
+		"@wordpress/a11y": "^3.47.0",
+		"@wordpress/api-fetch": "^6.44.0",
+		"@wordpress/blob": "^3.47.0",
+		"@wordpress/block-editor": "^12.15.0",
+		"@wordpress/block-library": "^8.24.0",
+		"@wordpress/blocks": "^12.24.0",
+		"@wordpress/commands": "^0.18.0",
+		"@wordpress/components": "^25.13.0",
+		"@wordpress/compose": "^6.24.0",
+		"@wordpress/core-commands": "^0.16.0",
+		"@wordpress/core-data": "^6.24.0",
+		"@wordpress/data": "^9.17.0",
+		"@wordpress/date": "^4.47.0",
+		"@wordpress/deprecated": "^3.47.0",
+		"@wordpress/dom": "^3.47.0",
+		"@wordpress/editor": "^13.24.0",
+		"@wordpress/element": "^5.24.0",
+		"@wordpress/escape-html": "^2.47.0",
+		"@wordpress/hooks": "^3.47.0",
+		"@wordpress/html-entities": "^3.47.0",
+		"@wordpress/i18n": "^4.47.0",
+		"@wordpress/icons": "^9.38.0",
+		"@wordpress/interface": "^5.24.0",
+		"@wordpress/keyboard-shortcuts": "^4.24.0",
+		"@wordpress/keycodes": "^3.47.0",
+		"@wordpress/media-utils": "^4.38.0",
+		"@wordpress/notices": "^4.15.0",
+		"@wordpress/patterns": "^1.8.0",
+		"@wordpress/plugins": "^6.15.0",
+		"@wordpress/preferences": "^3.24.0",
+		"@wordpress/primitives": "^3.45.0",
+		"@wordpress/private-apis": "^0.29.0",
+		"@wordpress/reusable-blocks": "^4.24.0",
+		"@wordpress/router": "^0.16.0",
+		"@wordpress/style-engine": "^1.30.0",
+		"@wordpress/url": "^3.48.0",
+		"@wordpress/viewport": "^5.24.0",
+		"@wordpress/widgets": "^3.24.0",
+		"@wordpress/wordcount": "^3.47.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.9.2",
 		"deepmerge": "^4.3.0",
-		"downloadjs": "^1.4.7",
 		"fast-deep-equal": "^3.1.3",
 		"is-plain-object": "^5.0.0",
 		"memize": "^2.1.0",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2a00e87b57b9c27ed2b9b0fd8d423ef3cada72c1"
+	"gitHead": "d98dff8ea96f29cfea045bf964269f46f040d539"
 }

package/src/components/actions/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { external, trash } from '@wordpress/icons';
+import { external, trash, backup } from '@wordpress/icons';
 import { addQueryArgs } from '@wordpress/url';
 import { useDispatch } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -10,6 +10,13 @@ import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { useMemo } from '@wordpress/element';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import {
+	Button,
+	__experimentalText as Text,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
@@ -17,38 +24,109 @@ import { unlock } from '../../lock-unlock';
 
 const { useHistory } = unlock( routerPrivateApis );
 
-export function useTrashPostAction() {
+export const trashPostAction = {
+	id: 'move-to-trash',
+	label: __( 'Move to Trash' ),
+	isPrimary: true,
+	icon: trash,
+	isEligible( { status } ) {
+		return status !== 'trash';
+	},
+	hideModalHeader: true,
+	RenderModal: ( { item: post, closeModal } ) => {
+		const { createSuccessNotice, createErrorNotice } =
+			useDispatch( noticesStore );
+		const { deleteEntityRecord } = useDispatch( coreStore );
+		return (
+			<VStack spacing="5">
+				<Text>
+					{ sprintf(
+						// translators: %s: The page's title.
+						__( 'Are you sure you want to delete "%s"?' ),
+						decodeEntities( post.title.rendered )
+					) }
+				</Text>
+				<HStack justify="right">
+					<Button variant="tertiary" onClick={ closeModal }>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						variant="primary"
+						onClick={ async () => {
+							try {
+								await deleteEntityRecord(
+									'postType',
+									post.type,
+									post.id,
+									{},
+									{ throwOnError: true }
+								);
+								createSuccessNotice(
+									sprintf(
+										/* translators: The page's title. */
+										__( '"%s" moved to the Trash.' ),
+										decodeEntities( post.title.rendered )
+									),
+									{
+										type: 'snackbar',
+										id: 'edit-site-page-trashed',
+									}
+								);
+							} catch ( error ) {
+								const errorMessage =
+									error.message &&
+									error.code !== 'unknown_error'
+										? error.message
+										: __(
+												'An error occurred while moving the page to the trash.'
+										  );
+
+								createErrorNotice( errorMessage, {
+									type: 'snackbar',
+								} );
+							}
+						} }
+					>
+						{ __( 'Delete' ) }
+					</Button>
+				</HStack>
+			</VStack>
+		);
+	},
+};
+
+export function usePermanentlyDeletePostAction() {
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
 	const { deleteEntityRecord } = useDispatch( coreStore );
 
 	return useMemo(
 		() => ( {
-			id: 'move-to-trash',
-			label: __( 'Move to Trash' ),
+			id: 'permanently-delete',
+			label: __( 'Permanently delete' ),
 			isPrimary: true,
 			icon: trash,
 			isEligible( { status } ) {
-				return status !== 'trash';
+				return status === 'trash';
 			},
-			async perform( post ) {
+			async callback( post ) {
 				try {
 					await deleteEntityRecord(
 						'postType',
 						post.type,
 						post.id,
-						{},
+						{ force: true },
 						{ throwOnError: true }
 					);
 					createSuccessNotice(
 						sprintf(
-							/* translators: The page's title. */
-							__( '"%s" moved to the Trash.' ),
+							/* translators: The posts's title. */
+							__( '"%s" permanently deleted.' ),
 							decodeEntities( post.title.rendered )
 						),
 						{
 							type: 'snackbar',
-							id: 'edit-site-page-trashed',
+							id: 'edit-site-post-permanently-deleted',
 						}
 					);
 				} catch ( error ) {
@@ -56,7 +134,7 @@ export function useTrashPostAction() {
 						error.message && error.code !== 'unknown_error'
 							? error.message
 							: __(
-									'An error occurred while moving the page to the trash.'
+									'An error occurred while permanently deleting the post.'
 							  );
 
 					createErrorNotice( errorMessage, { type: 'snackbar' } );
@@ -67,6 +145,64 @@ export function useTrashPostAction() {
 	);
 }
 
+export function useRestorePostAction() {
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+	const { editEntityRecord, saveEditedEntityRecord } =
+		useDispatch( coreStore );
+
+	return useMemo(
+		() => ( {
+			id: 'restore',
+			label: __( 'Restore' ),
+			isPrimary: true,
+			icon: backup,
+			isEligible( { status } ) {
+				return status === 'trash';
+			},
+			async callback( post ) {
+				await editEntityRecord( 'postType', post.type, post.id, {
+					status: 'draft',
+				} );
+				try {
+					await saveEditedEntityRecord(
+						'postType',
+						post.type,
+						post.id,
+						{ throwOnError: true }
+					);
+					createSuccessNotice(
+						sprintf(
+							/* translators: The posts's title. */
+							__( '"%s" has been restored.' ),
+							decodeEntities( post.title.rendered )
+						),
+						{
+							type: 'snackbar',
+							id: 'edit-site-post-restored',
+						}
+					);
+				} catch ( error ) {
+					const errorMessage =
+						error.message && error.code !== 'unknown_error'
+							? error.message
+							: __(
+									'An error occurred while restoring the post.'
+							  );
+
+					createErrorNotice( errorMessage, { type: 'snackbar' } );
+				}
+			},
+		} ),
+		[
+			createSuccessNotice,
+			createErrorNotice,
+			editEntityRecord,
+			saveEditedEntityRecord,
+		]
+	);
+}
+
 export const viewPostAction = {
 	id: 'view-post',
 	label: __( 'View' ),
@@ -75,7 +211,7 @@ export const viewPostAction = {
 	isEligible( post ) {
 		return post.status !== 'trash';
 	},
-	perform( post ) {
+	callback( post ) {
 		document.location.href = post.link;
 	},
 };
@@ -89,7 +225,7 @@ export function useEditPostAction() {
 			isEligible( { status } ) {
 				return status !== 'trash';
 			},
-			perform( post ) {
+			callback( post ) {
 				history.push( {
 					postId: post.id,
 					postType: post.type,
@@ -114,7 +250,7 @@ export const postRevisionsAction = {
 			post?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0;
 		return lastRevisionId && revisionsCount > 1;
 	},
-	perform( post ) {
+	callback( post ) {
 		const href = addQueryArgs( 'revision.php', {
 			revision: post?._links?.[ 'predecessor-version' ]?.[ 0 ]?.id,
 		} );

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

@@ -61,7 +61,6 @@ import {
 } from './utils';
 import AddCustomGenericTemplateModalContent from './add-custom-generic-template-modal-content';
 import TemplateActionsLoadingScreen from './template-actions-loading-screen';
-import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
 const { useHistory } = unlock( routerPrivateApis );
@@ -165,7 +164,6 @@ export default function NewTemplate( {
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
-	const { setTemplate } = unlock( useDispatch( editSiteStore ) );
 
 	const { homeUrl } = useSelect( ( select ) => {
 		const {
@@ -208,9 +206,6 @@ export default function NewTemplate( {
 				{ throwOnError: true }
 			);
 
-			// Set template before navigating away to avoid initial stale value.
-			setTemplate( newTemplate.id, newTemplate.slug );
-
 			// Navigate to the created template editor.
 			history.push( {
 				postId: newTemplate.id,

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

@@ -27,7 +27,7 @@ import {
 	NAVIGATION_POST_TYPE,
 } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
-import PageContentFocusManager from '../page-content-focus-manager';
+import PageContentFocusNotifications from '../page-content-focus-notifications';
 
 const LAYOUT = {
 	type: 'default',
@@ -134,6 +134,12 @@ export default function SiteEditorCanvas() {
 													isTemplateTypeNavigation,
 											}
 										) }
+										dropZoneElement={
+											// Pass in the html element of the iframe to ensure that
+											// the drop zone extends to the very edges of the iframe,
+											// even if the template is shorter than the viewport.
+											contentRef.current?.parentNode
+										}
 										layout={ LAYOUT }
 										renderAppender={ showBlockAppender }
 									/>
@@ -143,7 +149,7 @@ export default function SiteEditorCanvas() {
 					)
 				}
 			</EditorCanvasContainer.Slot>
-			<PageContentFocusManager contentRef={ contentRef } />
+			<PageContentFocusNotifications contentRef={ contentRef } />
 		</>
 	);
 }

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

@@ -172,90 +172,3 @@
 		box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
 	}
 }
-
-// Fixed contextual toolbar
-@include editor-left(".edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed");
-
-.edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
-	position: sticky;
-	top: 0;
-	z-index: z-index(".block-editor-block-popover");
-	display: block;
-	width: 100%;
-
-	// on desktop and tablet viewports the toolbar is fixed
-	// on top of interface header
-	$toolbar-margin: $grid-unit-80 * 3 - 2 * $grid-unit + $grid-unit-05;
-
-	@include break-medium() {
-		// leave room for block inserter, undo and redo, list view
-		margin-left: $toolbar-margin;
-		// position on top of interface header
-		position: fixed;
-		top: $admin-bar-height;
-		// Don't fill up when empty
-		min-height: initial;
-		// has to be flex for collapse button to fit
-		display: flex;
-
-		// Mimic the height of the parent, vertically align center, and provide a max-height.
-		height: $header-height;
-		align-items: center;
-
-
-		// on tablet viewports the toolbar is fixed
-		// on top of interface header and covers the whole header
-		// except for the inserter on the left
-		width: calc(100% - #{$toolbar-margin});
-
-		&.is-collapsed {
-			width: initial;
-		}
-
-		&:empty {
-			width: initial;
-		}
-
-		.is-fullscreen-mode & {
-			// leave room for block inserter, undo and redo, list view
-			// and some margin left
-			margin-left: $grid-unit-80 * 4 - 2 * $grid-unit;
-
-			top: 0;
-
-			&.is-collapsed {
-				width: initial;
-			}
-
-			&:empty {
-				width: initial;
-			}
-		}
-
-		.show-icon-labels & {
-			margin-left: $grid-unit-80 + 2 * $grid-unit; // inserter and margin
-			width: calc(100% + 40px - #{$toolbar-margin}); //there are no undo, redo and list view buttons
-
-			.is-fullscreen-mode & {
-				margin-left: $grid-unit * 18; // site hub, inserter and margin
-			}
-		}
-	}
-
-	// on desktop viewports the toolbar is fixed
-	// on top of interface header and leaves room
-	// for the block inserter the publish button
-	@include break-large() {
-		width: auto;
-		.show-icon-labels & {
-			width: auto; //there are no undo, redo and list view buttons
-		}
-
-		.is-fullscreen-mode & {
-			// in full screen mode we need to account for
-			// the combined with of the tools at the right of the header and the margin left
-			// of the toolbar which includes four buttons
-			width: calc(100% - 280px - #{4 * $grid-unit-80});
-		}
-	}
-}

package/src/components/block-editor/use-site-editor-settings.js

@@ -4,12 +4,16 @@
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { store as preferencesStore } from '@wordpress/preferences';
+
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
-import inserterMediaCategories from './inserter-media-categories';
+
+const { useBlockEditorSettings } = unlock( editorPrivateApis );
 
 function useArchiveLabel( templateSlug ) {
 	const taxonomyMatches = templateSlug?.match(
@@ -83,42 +87,25 @@ function useArchiveLabel( templateSlug ) {
 	);
 }
 
-export default function useSiteEditorSettings() {
+export function useSpecificEditorSettings() {
 	const { setIsInserterOpened } = useDispatch( editSiteStore );
-	const { storedSettings, canvasMode, templateType, siteSettings } =
-		useSelect(
-			( select ) => {
-				const { canUser, getEntityRecord } = select( coreStore );
-				const { getSettings, getCanvasMode, getEditedPostType } =
-					unlock( select( editSiteStore ) );
-				return {
-					storedSettings: getSettings( setIsInserterOpened ),
-					canvasMode: getCanvasMode(),
-					templateType: getEditedPostType(),
-					siteSettings: canUser( 'read', 'settings' )
-						? getEntityRecord( 'root', 'site' )
-						: undefined,
-				};
-			},
-			[ setIsInserterOpened ]
-		);
-
-	const settingsBlockPatterns =
-		storedSettings.__experimentalAdditionalBlockPatterns ?? // WP 6.0
-		storedSettings.__experimentalBlockPatterns; // WP 5.9
-	const settingsBlockPatternCategories =
-		storedSettings.__experimentalAdditionalBlockPatternCategories ?? // WP 6.0
-		storedSettings.__experimentalBlockPatternCategories; // WP 5.9
-
 	const {
-		restBlockPatterns,
-		restBlockPatternCategories,
 		templateSlug,
-		userPatternCategories,
+		focusMode,
+		isDistractionFree,
+		hasFixedToolbar,
+		keepCaretInsideBlock,
+		canvasMode,
+		settings,
 	} = useSelect( ( select ) => {
-		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
-		const { getEditedEntityRecord, getUserPatternCategories } =
-			select( coreStore );
+		const {
+			getEditedPostType,
+			getEditedPostId,
+			getCanvasMode,
+			getSettings,
+		} = unlock( select( editSiteStore ) );
+		const { get: getPreference } = select( preferencesStore );
+		const { getEditedEntityRecord } = select( coreStore );
 		const usedPostType = getEditedPostType();
 		const usedPostId = getEditedPostId();
 		const _record = getEditedEntityRecord(
@@ -127,75 +114,67 @@ export default function useSiteEditorSettings() {
 			usedPostId
 		);
 		return {
-			restBlockPatterns: select( coreStore ).getBlockPatterns(),
-			restBlockPatternCategories:
-				select( coreStore ).getBlockPatternCategories(),
 			templateSlug: _record.slug,
-			userPatternCategories: getUserPatternCategories(),
+			focusMode: !! getPreference( 'core/edit-site', 'focusMode' ),
+			isDistractionFree: !! getPreference(
+				'core/edit-site',
+				'distractionFree'
+			),
+			hasFixedToolbar: !! getPreference(
+				'core/edit-site',
+				'fixedToolbar'
+			),
+			keepCaretInsideBlock: !! getPreference(
+				'core/edit-site',
+				'keepCaretInsideBlock'
+			),
+			canvasMode: getCanvasMode(),
+			settings: getSettings(),
 		};
 	}, [] );
 	const archiveLabels = useArchiveLabel( templateSlug );
 
-	const blockPatterns = useMemo(
-		() =>
-			[
-				...( settingsBlockPatterns || [] ),
-				...( restBlockPatterns || [] ),
-			]
-				.filter(
-					( x, index, arr ) =>
-						index === arr.findIndex( ( y ) => x.name === y.name )
-				)
-				.filter( ( { postTypes } ) => {
-					return (
-						! postTypes ||
-						( Array.isArray( postTypes ) &&
-							postTypes.includes( templateType ) )
-					);
-				} ),
-		[ settingsBlockPatterns, restBlockPatterns, templateType ]
-	);
-
-	const blockPatternCategories = useMemo(
-		() =>
-			[
-				...( settingsBlockPatternCategories || [] ),
-				...( restBlockPatternCategories || [] ),
-			].filter(
-				( x, index, arr ) =>
-					index === arr.findIndex( ( y ) => x.name === y.name )
-			),
-		[ settingsBlockPatternCategories, restBlockPatternCategories ]
-	);
-	return useMemo( () => {
-		const {
-			__experimentalAdditionalBlockPatterns,
-			__experimentalAdditionalBlockPatternCategories,
-			focusMode,
-			...restStoredSettings
-		} = storedSettings;
-
+	const defaultEditorSettings = useMemo( () => {
 		return {
-			...restStoredSettings,
-			inserterMediaCategories,
-			__experimentalBlockPatterns: blockPatterns,
-			__experimentalBlockPatternCategories: blockPatternCategories,
-			__experimentalUserPatternCategories: userPatternCategories,
+			...settings,
+
+			__experimentalSetIsInserterOpened: setIsInserterOpened,
 			focusMode: canvasMode === 'view' && focusMode ? false : focusMode,
+			isDistractionFree,
+			hasFixedToolbar,
+			keepCaretInsideBlock,
+
+			// I wonder if they should be set in the post editor too
 			__experimentalArchiveTitleTypeLabel: archiveLabels.archiveTypeLabel,
 			__experimentalArchiveTitleNameLabel: archiveLabels.archiveNameLabel,
-			pageOnFront: siteSettings?.page_on_front,
-			pageForPosts: siteSettings?.page_for_posts,
 		};
 	}, [
-		storedSettings,
-		blockPatterns,
-		blockPatternCategories,
-		userPatternCategories,
+		settings,
+		setIsInserterOpened,
+		focusMode,
+		isDistractionFree,
+		hasFixedToolbar,
+		keepCaretInsideBlock,
 		canvasMode,
 		archiveLabels.archiveTypeLabel,
 		archiveLabels.archiveNameLabel,
-		siteSettings?.page_on_front,
-		siteSettings?.page_for_posts,
 	] );
+
+	return defaultEditorSettings;
+}
+
+export default function useSiteEditorSettings() {
+	const defaultEditorSettings = useSpecificEditorSettings();
+	const { postType, postId } = useSelect( ( select ) => {
+		const { getEditedPostType, getEditedPostId } = unlock(
+			select( editSiteStore )
+		);
+		const usedPostType = getEditedPostType();
+		const usedPostId = getEditedPostId();
+		return {
+			postType: usedPostType,
+			postId: usedPostId,
+		};
+	}, [] );
+	return useBlockEditorSettings( defaultEditorSettings, postType, postId );
 }