@wordpress/editor 13.31.0 → 13.33.0

package/src/store/private-actions.js

@@ -2,9 +2,20 @@
  * WordPress dependencies
  */
 import { store as coreStore } from '@wordpress/core-data';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { addQueryArgs } from '@wordpress/url';
+import apiFetch from '@wordpress/api-fetch';
+import { parse, __unstableSerializeAndClean } from '@wordpress/blocks';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import isTemplateRevertable from './utils/is-template-revertable';
+import { TEMPLATE_POST_TYPE } from './constants';
 
 /**
  * Returns an action object used to set which template is currently being used/edited.
@@ -109,3 +120,368 @@ export const hideBlockTypes =
 			.dispatch( preferencesStore )
 			.set( 'core', 'hiddenBlockTypes', [ ...mergedBlockNames ] );
 	};
+
+/**
+ * Save entity records marked as dirty.
+ *
+ * @param {Object}   options                      Options for the action.
+ * @param {Function} [options.onSave]             Callback when saving happens.
+ * @param {object[]} [options.dirtyEntityRecords] Array of dirty entities.
+ * @param {object[]} [options.entitiesToSkip]     Array of entities to skip saving.
+ * @param {Function} [options.close]              Callback when the actions is called. It should be consolidated with `onSave`.
+ */
+export const saveDirtyEntities =
+	( { onSave, dirtyEntityRecords = [], entitiesToSkip = [], close } = {} ) =>
+	( { registry } ) => {
+		const PUBLISH_ON_SAVE_ENTITIES = [
+			{ kind: 'postType', name: 'wp_navigation' },
+		];
+		const saveNoticeId = 'site-editor-save-success';
+		const homeUrl = registry.select( coreStore ).getUnstableBase()?.home;
+		registry.dispatch( noticesStore ).removeNotice( saveNoticeId );
+		const entitiesToSave = dirtyEntityRecords.filter(
+			( { kind, name, key, property } ) => {
+				return ! entitiesToSkip.some(
+					( elt ) =>
+						elt.kind === kind &&
+						elt.name === name &&
+						elt.key === key &&
+						elt.property === property
+				);
+			}
+		);
+		close?.( entitiesToSave );
+		const siteItemsToSave = [];
+		const pendingSavedRecords = [];
+		entitiesToSave.forEach( ( { kind, name, key, property } ) => {
+			if ( 'root' === kind && 'site' === name ) {
+				siteItemsToSave.push( property );
+			} else {
+				if (
+					PUBLISH_ON_SAVE_ENTITIES.some(
+						( typeToPublish ) =>
+							typeToPublish.kind === kind &&
+							typeToPublish.name === name
+					)
+				) {
+					registry
+						.dispatch( coreStore )
+						.editEntityRecord( kind, name, key, {
+							status: 'publish',
+						} );
+				}
+
+				pendingSavedRecords.push(
+					registry
+						.dispatch( coreStore )
+						.saveEditedEntityRecord( kind, name, key )
+				);
+			}
+		} );
+		if ( siteItemsToSave.length ) {
+			pendingSavedRecords.push(
+				registry
+					.dispatch( coreStore )
+					.__experimentalSaveSpecifiedEntityEdits(
+						'root',
+						'site',
+						undefined,
+						siteItemsToSave
+					)
+			);
+		}
+		registry
+			.dispatch( blockEditorStore )
+			.__unstableMarkLastChangeAsPersistent();
+		Promise.all( pendingSavedRecords )
+			.then( ( values ) => {
+				return onSave ? onSave( values ) : values;
+			} )
+			.then( ( values ) => {
+				if (
+					values.some( ( value ) => typeof value === 'undefined' )
+				) {
+					registry
+						.dispatch( noticesStore )
+						.createErrorNotice( __( 'Saving failed.' ) );
+				} else {
+					registry
+						.dispatch( noticesStore )
+						.createSuccessNotice( __( 'Site updated.' ), {
+							type: 'snackbar',
+							id: saveNoticeId,
+							actions: [
+								{
+									label: __( 'View site' ),
+									url: homeUrl,
+								},
+							],
+						} );
+				}
+			} )
+			.catch( ( error ) =>
+				registry
+					.dispatch( noticesStore )
+					.createErrorNotice(
+						`${ __( 'Saving failed.' ) } ${ error }`
+					)
+			);
+	};
+
+/**
+ * Reverts a template to its original theme-provided file.
+ *
+ * @param {Object}  template            The template to revert.
+ * @param {Object}  [options]
+ * @param {boolean} [options.allowUndo] Whether to allow the user to undo
+ *                                      reverting the template. Default true.
+ */
+export const revertTemplate =
+	( template, { allowUndo = true } = {} ) =>
+	async ( { registry } ) => {
+		const noticeId = 'edit-site-template-reverted';
+		registry.dispatch( noticesStore ).removeNotice( noticeId );
+		if ( ! isTemplateRevertable( template ) ) {
+			registry
+				.dispatch( noticesStore )
+				.createErrorNotice( __( 'This template is not revertable.' ), {
+					type: 'snackbar',
+				} );
+			return;
+		}
+
+		try {
+			const templateEntityConfig = registry
+				.select( coreStore )
+				.getEntityConfig( 'postType', template.type );
+
+			if ( ! templateEntityConfig ) {
+				registry
+					.dispatch( noticesStore )
+					.createErrorNotice(
+						__(
+							'The editor has encountered an unexpected error. Please reload.'
+						),
+						{ type: 'snackbar' }
+					);
+				return;
+			}
+
+			const fileTemplatePath = addQueryArgs(
+				`${ templateEntityConfig.baseURL }/${ template.id }`,
+				{ context: 'edit', source: 'theme' }
+			);
+
+			const fileTemplate = await apiFetch( { path: fileTemplatePath } );
+			if ( ! fileTemplate ) {
+				registry
+					.dispatch( noticesStore )
+					.createErrorNotice(
+						__(
+							'The editor has encountered an unexpected error. Please reload.'
+						),
+						{ type: 'snackbar' }
+					);
+				return;
+			}
+
+			const serializeBlocks = ( {
+				blocks: blocksForSerialization = [],
+			} ) => __unstableSerializeAndClean( blocksForSerialization );
+
+			const edited = registry
+				.select( coreStore )
+				.getEditedEntityRecord(
+					'postType',
+					template.type,
+					template.id
+				);
+
+			// We are fixing up the undo level here to make sure we can undo
+			// the revert in the header toolbar correctly.
+			registry.dispatch( coreStore ).editEntityRecord(
+				'postType',
+				template.type,
+				template.id,
+				{
+					content: serializeBlocks, // Required to make the `undo` behave correctly.
+					blocks: edited.blocks, // Required to revert the blocks in the editor.
+					source: 'custom', // required to avoid turning the editor into a dirty state
+				},
+				{
+					undoIgnore: true, // Required to merge this edit with the last undo level.
+				}
+			);
+
+			const blocks = parse( fileTemplate?.content?.raw );
+			registry
+				.dispatch( coreStore )
+				.editEntityRecord( 'postType', template.type, fileTemplate.id, {
+					content: serializeBlocks,
+					blocks,
+					source: 'theme',
+				} );
+
+			if ( allowUndo ) {
+				const undoRevert = () => {
+					registry
+						.dispatch( coreStore )
+						.editEntityRecord(
+							'postType',
+							template.type,
+							edited.id,
+							{
+								content: serializeBlocks,
+								blocks: edited.blocks,
+								source: 'custom',
+							}
+						);
+				};
+
+				registry
+					.dispatch( noticesStore )
+					.createSuccessNotice( __( 'Template reset.' ), {
+						type: 'snackbar',
+						id: noticeId,
+						actions: [
+							{
+								label: __( 'Undo' ),
+								onClick: undoRevert,
+							},
+						],
+					} );
+			}
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'Template revert failed. Please reload.' );
+			registry
+				.dispatch( noticesStore )
+				.createErrorNotice( errorMessage, { type: 'snackbar' } );
+		}
+	};
+
+/**
+ * Action that removes an array of templates.
+ *
+ * @param {Array} items An array of template or template part objects to remove.
+ */
+export const removeTemplates =
+	( items ) =>
+	async ( { registry } ) => {
+		const isTemplate = items[ 0 ].type === TEMPLATE_POST_TYPE;
+		const promiseResult = await Promise.allSettled(
+			items.map( ( item ) => {
+				return registry
+					.dispatch( coreStore )
+					.deleteEntityRecord(
+						'postType',
+						item.type,
+						item.id,
+						{ force: true },
+						{ throwOnError: true }
+					);
+			} )
+		);
+
+		// If all the promises were fulfilled with sucess.
+		if ( promiseResult.every( ( { status } ) => status === 'fulfilled' ) ) {
+			let successMessage;
+
+			if ( items.length === 1 ) {
+				// Depending on how the entity was retrieved its title might be
+				// an object or simple string.
+				const title =
+					typeof items[ 0 ].title === 'string'
+						? items[ 0 ].title
+						: items[ 0 ].title?.rendered;
+				successMessage = sprintf(
+					/* translators: The template/part's name. */
+					__( '"%s" deleted.' ),
+					decodeEntities( title )
+				);
+			} else {
+				successMessage = isTemplate
+					? __( 'Templates deleted.' )
+					: __( 'Template parts deleted.' );
+			}
+
+			registry
+				.dispatch( noticesStore )
+				.createSuccessNotice( successMessage, {
+					type: 'snackbar',
+					id: 'site-editor-template-deleted-success',
+				} );
+		} else {
+			// If there was at lease one failure.
+			let errorMessage;
+			// If we were trying to delete a single template.
+			if ( promiseResult.length === 1 ) {
+				if ( promiseResult[ 0 ].reason?.message ) {
+					errorMessage = promiseResult[ 0 ].reason.message;
+				} else {
+					errorMessage = isTemplate
+						? __( 'An error occurred while deleting the template.' )
+						: __(
+								'An error occurred while deleting the template part.'
+						  );
+				}
+				// If we were trying to delete a multiple templates
+			} else {
+				const errorMessages = new Set();
+				const failedPromises = promiseResult.filter(
+					( { status } ) => status === 'rejected'
+				);
+				for ( const failedPromise of failedPromises ) {
+					if ( failedPromise.reason?.message ) {
+						errorMessages.add( failedPromise.reason.message );
+					}
+				}
+				if ( errorMessages.size === 0 ) {
+					errorMessage = isTemplate
+						? __(
+								'An error occurred while deleting the templates.'
+						  )
+						: __(
+								'An error occurred while deleting the template parts.'
+						  );
+				} else if ( errorMessages.size === 1 ) {
+					errorMessage = isTemplate
+						? sprintf(
+								/* translators: %s: an error message */
+								__(
+									'An error occurred while deleting the templates: %s'
+								),
+								[ ...errorMessages ][ 0 ]
+						  )
+						: sprintf(
+								/* translators: %s: an error message */
+								__(
+									'An error occurred while deleting the template parts: %s'
+								),
+								[ ...errorMessages ][ 0 ]
+						  );
+				} else {
+					errorMessage = isTemplate
+						? sprintf(
+								/* translators: %s: a list of comma separated error messages */
+								__(
+									'Some errors occurred while deleting the templates: %s'
+								),
+								[ ...errorMessages ].join( ',' )
+						  )
+						: sprintf(
+								/* translators: %s: a list of comma separated error messages */
+								__(
+									'Some errors occurred while deleting the template parts: %s'
+								),
+								[ ...errorMessages ].join( ',' )
+						  );
+				}
+			}
+			registry
+				.dispatch( noticesStore )
+				.createErrorNotice( errorMessage, { type: 'snackbar' } );
+		}
+	};

package/src/store/private-selectors.js

@@ -2,12 +2,25 @@
  * WordPress dependencies
  */
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { createRegistrySelector } from '@wordpress/data';
+import { createSelector, createRegistrySelector } from '@wordpress/data';
+import {
+	layout,
+	symbol,
+	navigation,
+	page as pageIcon,
+	verse,
+} from '@wordpress/icons';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
-import { getRenderingMode } from './selectors';
+import {
+	getRenderingMode,
+	__experimentalGetDefaultTemplatePartAreas,
+} from './selectors';
+import { TEMPLATE_PART_POST_TYPE } from './constants';
+import { getFilteredTemplatePartBlocks } from './utils/get-filtered-template-parts';
 
 const EMPTY_INSERTION_POINT = {
 	rootClientId: undefined,
@@ -22,30 +35,100 @@ const EMPTY_INSERTION_POINT = {
  *
  * @return {Object} The root client ID, index to insert at and starting filter value.
  */
-export const getInsertionPoint = createRegistrySelector(
-	( select ) => ( state ) => {
-		if ( typeof state.blockInserterPanel === 'object' ) {
-			return state.blockInserterPanel;
-		}
+export const getInsertionPoint = createRegistrySelector( ( select ) =>
+	createSelector(
+		( state ) => {
+			if ( typeof state.blockInserterPanel === 'object' ) {
+				return state.blockInserterPanel;
+			}
+
+			if ( getRenderingMode( state ) === 'template-locked' ) {
+				const [ postContentClientId ] =
+					select( blockEditorStore ).getBlocksByName(
+						'core/post-content'
+					);
+				if ( postContentClientId ) {
+					return {
+						rootClientId: postContentClientId,
+						insertionIndex: undefined,
+						filterValue: undefined,
+					};
+				}
+			}
 
-		if ( getRenderingMode( state ) === 'template-locked' ) {
+			return EMPTY_INSERTION_POINT;
+		},
+		( state ) => {
 			const [ postContentClientId ] =
 				select( blockEditorStore ).getBlocksByName(
 					'core/post-content'
 				);
-			if ( postContentClientId ) {
-				return {
-					rootClientId: postContentClientId,
-					insertionIndex: undefined,
-					filterValue: undefined,
-				};
-			}
+			return [
+				state.blockInserterPanel,
+				getRenderingMode( state ),
+				postContentClientId,
+			];
 		}
-
-		return EMPTY_INSERTION_POINT;
-	}
+	)
 );
 
 export function getListViewToggleRef( state ) {
 	return state.listViewToggleRef;
 }
+const CARD_ICONS = {
+	wp_block: symbol,
+	wp_navigation: navigation,
+	page: pageIcon,
+	post: verse,
+};
+
+export const getPostIcon = createRegistrySelector(
+	( select ) => ( state, postType, options ) => {
+		{
+			if (
+				postType === 'wp_template_part' ||
+				postType === 'wp_template'
+			) {
+				return (
+					__experimentalGetDefaultTemplatePartAreas( state ).find(
+						( item ) => options.area === item.area
+					)?.icon || layout
+				);
+			}
+			if ( CARD_ICONS[ postType ] ) {
+				return CARD_ICONS[ postType ];
+			}
+			const postTypeEntity = select( coreStore ).getPostType( postType );
+			// `icon` is the `menu_icon` property of a post type. We
+			// only handle `dashicons` for now, even if the `menu_icon`
+			// also supports urls and svg as values.
+			if ( postTypeEntity?.icon?.startsWith( 'dashicons-' ) ) {
+				return postTypeEntity.icon.slice( 10 );
+			}
+			return pageIcon;
+		}
+	}
+);
+
+/**
+ * Returns the template parts and their blocks for the current edited template.
+ *
+ * @param {Object} state Global application state.
+ * @return {Array} Template parts and their blocks in an array.
+ */
+export const getCurrentTemplateTemplateParts = createRegistrySelector(
+	( select ) => () => {
+		const templateParts = select( coreStore ).getEntityRecords(
+			'postType',
+			TEMPLATE_PART_POST_TYPE,
+			{ per_page: -1 }
+		);
+
+		const clientIds =
+			select( blockEditorStore ).getBlocksByName( 'core/template-part' );
+		const blocks =
+			select( blockEditorStore ).getBlocksByClientId( clientIds );
+
+		return getFilteredTemplatePartBlocks( blocks, templateParts );
+	}
+);

package/src/store/reducer.js

@@ -360,6 +360,18 @@ export function listViewToggleRef( state = { current: null } ) {
 	return state;
 }
 
+export function publishSidebarActive( state = false, action ) {
+	switch ( action.type ) {
+		case 'OPEN_PUBLISH_SIDEBAR':
+			return true;
+		case 'CLOSE_PUBLISH_SIDEBAR':
+			return false;
+		case 'TOGGLE_PUBLISH_SIDEBAR':
+			return ! state;
+	}
+	return state;
+}
+
 export default combineReducers( {
 	postId,
 	postType,
@@ -377,4 +389,5 @@ export default combineReducers( {
 	blockInserterPanel,
 	listViewPanel,
 	listViewToggleRef,
+	publishSidebarActive,
 } );

package/src/store/selectors.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import createSelector from 'rememo';
-
 /**
  * WordPress dependencies
  */
@@ -14,7 +9,7 @@ import {
 } from '@wordpress/blocks';
 import { isInTheFuture, getDate } from '@wordpress/date';
 import { addQueryArgs, cleanForSlug } from '@wordpress/url';
-import { createRegistrySelector } from '@wordpress/data';
+import { createSelector, createRegistrySelector } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import { Platform } from '@wordpress/element';
 import { layout } from '@wordpress/icons';
@@ -105,16 +100,11 @@ export const isEditedPostDirty = createRegistrySelector(
 		// inferred to contain unsaved values.
 		const postType = getCurrentPostType( state );
 		const postId = getCurrentPostId( state );
-		if (
-			select( coreStore ).hasEditsForEntityRecord(
-				'postType',
-				postType,
-				postId
-			)
-		) {
-			return true;
-		}
-		return false;
+		return select( coreStore ).hasEditsForEntityRecord(
+			'postType',
+			postType,
+			postId
+		);
 	}
 );
 
@@ -1112,10 +1102,7 @@ export function canUserUseUnfilteredHTML( state ) {
  */
 export const isPublishSidebarEnabled = createRegistrySelector(
 	( select ) => () =>
-		!! select( preferencesStore ).get(
-			'core/edit-post',
-			'isPublishSidebarEnabled'
-		)
+		!! select( preferencesStore ).get( 'core', 'isPublishSidebarEnabled' )
 );
 
 /**
@@ -1706,8 +1693,8 @@ export function __experimentalGetDefaultTemplateTypes( state ) {
 export const __experimentalGetDefaultTemplatePartAreas = createSelector(
 	( state ) => {
 		const areas =
-			getEditorSettings( state )?.defaultTemplatePartAreas || [];
-		return areas?.map( ( item ) => {
+			getEditorSettings( state )?.defaultTemplatePartAreas ?? [];
+		return areas.map( ( item ) => {
 			return { ...item, icon: getTemplatePartIcon( item.icon ) };
 		} );
 	},
@@ -1735,7 +1722,7 @@ export const __experimentalGetDefaultTemplateType = createSelector(
 			) ?? EMPTY_OBJECT
 		);
 	},
-	( state, slug ) => [ __experimentalGetDefaultTemplateTypes( state ), slug ]
+	( state ) => [ __experimentalGetDefaultTemplateTypes( state ) ]
 );
 
 /**
@@ -1746,32 +1733,39 @@ export const __experimentalGetDefaultTemplateType = createSelector(
  * @param {Object} template The template for which we need information.
  * @return {Object} Information about the template, including title, description, and icon.
  */
-export function __experimentalGetTemplateInfo( state, template ) {
-	if ( ! template ) {
-		return EMPTY_OBJECT;
-	}
+export const __experimentalGetTemplateInfo = createSelector(
+	( state, template ) => {
+		if ( ! template ) {
+			return EMPTY_OBJECT;
+		}
 
-	const { description, slug, title, area } = template;
-	const { title: defaultTitle, description: defaultDescription } =
-		__experimentalGetDefaultTemplateType( state, slug );
+		const { description, slug, title, area } = template;
+		const { title: defaultTitle, description: defaultDescription } =
+			__experimentalGetDefaultTemplateType( state, slug );
 
-	const templateTitle = typeof title === 'string' ? title : title?.rendered;
-	const templateDescription =
-		typeof description === 'string' ? description : description?.raw;
-	const templateIcon =
-		__experimentalGetDefaultTemplatePartAreas( state ).find(
-			( item ) => area === item.area
-		)?.icon || layout;
+		const templateTitle =
+			typeof title === 'string' ? title : title?.rendered;
+		const templateDescription =
+			typeof description === 'string' ? description : description?.raw;
+		const templateIcon =
+			__experimentalGetDefaultTemplatePartAreas( state ).find(
+				( item ) => area === item.area
+			)?.icon || layout;
 
-	return {
-		title:
-			templateTitle && templateTitle !== slug
-				? templateTitle
-				: defaultTitle || slug,
-		description: templateDescription || defaultDescription,
-		icon: templateIcon,
-	};
-}
+		return {
+			title:
+				templateTitle && templateTitle !== slug
+					? templateTitle
+					: defaultTitle || slug,
+			description: templateDescription || defaultDescription,
+			icon: templateIcon,
+		};
+	},
+	( state ) => [
+		__experimentalGetDefaultTemplateTypes( state ),
+		__experimentalGetDefaultTemplatePartAreas( state ),
+	]
+);
 
 /**
  * Returns a post type label depending on the current post.
@@ -1789,3 +1783,14 @@ export const getPostTypeLabel = createRegistrySelector(
 		return postType?.labels?.singular_name;
 	}
 );
+
+/**
+ * Returns true if the publish sidebar is opened.
+ *
+ * @param {Object} state Global application state
+ *
+ * @return {boolean} Whether the publish sidebar is open.
+ */
+export function isPublishSidebarOpened( state ) {
+	return state.publishSidebarActive;
+}