@wordpress/editor 13.32.0 → 13.34.0

package/src/components/theme-support-check/test/index.js

@@ -3,27 +3,38 @@
  */
 import { render, screen } from '@testing-library/react';
 
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
-import { ThemeSupportCheck } from '../index';
+import ThemeSupportCheck from '../';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+
+function setupUseSelectMock( themeSupports = {}, postType = 'post' ) {
+	useSelect.mockImplementation( ( cb ) => {
+		return cb( () => ( {
+			getEditedPostAttribute: () => postType,
+			getThemeSupports: () => themeSupports,
+		} ) );
+	} );
+}
 
 describe( 'ThemeSupportCheck', () => {
 	it( "should not render if there's no support check provided", () => {
+		setupUseSelectMock( { 'post-thumbnails': true } );
 		render( <ThemeSupportCheck>foobar</ThemeSupportCheck> );
 		expect( screen.queryByText( 'foobar' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'should render if post-thumbnails are supported', () => {
-		const themeSupports = {
-			'post-thumbnails': true,
-		};
-		const supportKeys = 'post-thumbnails';
+		setupUseSelectMock( { 'post-thumbnails': true } );
 		render(
-			<ThemeSupportCheck
-				supportKeys={ supportKeys }
-				themeSupports={ themeSupports }
-			>
+			<ThemeSupportCheck supportKeys="post-thumbnails">
 				foobar
 			</ThemeSupportCheck>
 		);
@@ -31,16 +42,14 @@ describe( 'ThemeSupportCheck', () => {
 	} );
 
 	it( 'should render if post-thumbnails are supported for the post type', () => {
-		const themeSupports = {
-			'post-thumbnails': [ 'post' ],
-		};
-		const supportKeys = 'post-thumbnails';
+		setupUseSelectMock(
+			{
+				'post-thumbnails': [ 'post' ],
+			},
+			'post'
+		);
 		render(
-			<ThemeSupportCheck
-				supportKeys={ supportKeys }
-				postType={ 'post' }
-				themeSupports={ themeSupports }
-			>
+			<ThemeSupportCheck supportKeys="post-thumbnails">
 				foobar
 			</ThemeSupportCheck>
 		);
@@ -48,16 +57,14 @@ describe( 'ThemeSupportCheck', () => {
 	} );
 
 	it( "should not render if post-thumbnails aren't supported for the post type", () => {
-		const themeSupports = {
-			'post-thumbnails': [ 'post' ],
-		};
-		const supportKeys = 'post-thumbnails';
+		setupUseSelectMock(
+			{
+				'post-thumbnails': [ 'post' ],
+			},
+			'page'
+		);
 		render(
-			<ThemeSupportCheck
-				supportKeys={ supportKeys }
-				postType={ 'page' }
-				themeSupports={ themeSupports }
-			>
+			<ThemeSupportCheck supportKeys="post-thumbnails">
 				foobar
 			</ThemeSupportCheck>
 		);
@@ -65,16 +72,14 @@ describe( 'ThemeSupportCheck', () => {
 	} );
 
 	it( 'should not render if post-thumbnails is limited and false is passed for postType', () => {
-		const themeSupports = {
-			'post-thumbnails': [ 'post' ],
-		};
-		const supportKeys = 'post-thumbnails';
+		setupUseSelectMock(
+			{
+				'post-thumbnails': [ 'post' ],
+			},
+			false
+		);
 		render(
-			<ThemeSupportCheck
-				supportKeys={ supportKeys }
-				postType={ false }
-				themeSupports={ themeSupports }
-			>
+			<ThemeSupportCheck supportKeys="post-thumbnails">
 				foobar
 			</ThemeSupportCheck>
 		);
@@ -82,15 +87,11 @@ describe( 'ThemeSupportCheck', () => {
 	} );
 
 	it( "should not render if theme doesn't support post-thumbnails", () => {
-		const themeSupports = {
+		setupUseSelectMock( {
 			'post-thumbnails': false,
-		};
-		const supportKeys = 'post-thumbnails';
+		} );
 		render(
-			<ThemeSupportCheck
-				supportKeys={ supportKeys }
-				themeSupports={ themeSupports }
-			>
+			<ThemeSupportCheck supportKeys="post-thumbnails">
 				foobar
 			</ThemeSupportCheck>
 		);

package/src/hooks/pattern-overrides.js

@@ -6,6 +6,7 @@ import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { useBlockEditingMode } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
+import { store as blocksStore } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -14,7 +15,7 @@ import { store as editorStore } from '../store';
 import { unlock } from '../lock-unlock';
 
 const {
-	useSetPatternBindings,
+	PatternOverridesControls,
 	ResetOverridesControl,
 	PATTERN_TYPES,
 	PARTIAL_SYNCING_SUPPORTED_BLOCKS,
@@ -38,7 +39,6 @@ const withPatternOverrideControls = createHigherOrderComponent(
 		return (
 			<>
 				<BlockEdit { ...props } />
-				{ isSupportedBlock && <BindingUpdater { ...props } /> }
 				{ props.isSelected && isSupportedBlock && (
 					<ControlsWithStoreSubscription { ...props } />
 				) }
@@ -47,22 +47,24 @@ const withPatternOverrideControls = createHigherOrderComponent(
 	}
 );
 
-function BindingUpdater( props ) {
-	const postType = useSelect(
-		( select ) => select( editorStore ).getCurrentPostType(),
-		[]
-	);
-	useSetPatternBindings( props, postType );
-	return null;
-}
-
 // Split into a separate component to avoid a store subscription
 // on every block.
 function ControlsWithStoreSubscription( props ) {
 	const blockEditingMode = useBlockEditingMode();
-	const isEditingPattern = useSelect(
-		( select ) =>
-			select( editorStore ).getCurrentPostType() === PATTERN_TYPES.user,
+	const { hasPatternOverridesSource, isEditingPattern } = useSelect(
+		( select ) => {
+			const { getBlockBindingsSource } = unlock( select( blocksStore ) );
+
+			return {
+				// For editing link to the site editor if the theme and user permissions support it.
+				hasPatternOverridesSource: !! getBlockBindingsSource(
+					'core/pattern-overrides'
+				),
+				isEditingPattern:
+					select( editorStore ).getCurrentPostType() ===
+					PATTERN_TYPES.user,
+			};
+		},
 		[]
 	);
 
@@ -73,14 +75,23 @@ function ControlsWithStoreSubscription( props ) {
 			( binding ) => binding.source === 'core/pattern-overrides'
 		);
 
+	const shouldShowPatternOverridesControls =
+		isEditingPattern && blockEditingMode === 'default';
 	const shouldShowResetOverridesControl =
 		! isEditingPattern &&
 		!! props.attributes.metadata?.name &&
 		blockEditingMode !== 'disabled' &&
 		hasPatternBindings;
 
+	if ( ! hasPatternOverridesSource ) {
+		return null;
+	}
+
 	return (
 		<>
+			{ shouldShowPatternOverridesControls && (
+				<PatternOverridesControls { ...props } />
+			) }
 			{ shouldShowResetOverridesControl && (
 				<ResetOverridesControl { ...props } />
 			) }

package/src/private-apis.js

@@ -1,42 +1,73 @@
+/**
+ * WordPress dependencies
+ */
+import * as interfaceApis from '@wordpress/interface';
+
 /**
  * Internal dependencies
  */
+import CollapsableBlockToolbar from './components/collapsible-block-toolbar';
 import EditorCanvas from './components/editor-canvas';
 import { ExperimentalEditorProvider } from './components/provider';
 import { lock } from './lock-unlock';
 import { EntitiesSavedStatesExtensible } from './components/entities-saved-states';
+import useAutoSwitchEditorSidebars from './components/provider/use-auto-switch-editor-sidebars';
 import useBlockEditorSettings from './components/provider/use-block-editor-settings';
 import DocumentTools from './components/document-tools';
 import InserterSidebar from './components/inserter-sidebar';
 import ListViewSidebar from './components/list-view-sidebar';
-import ModeSwitcher from './components/mode-switcher';
+import MoreMenu from './components/more-menu';
 import PatternOverridesPanel from './components/pattern-overrides-panel';
 import PluginPostExcerpt from './components/post-excerpt/plugin';
 import PostPanelRow from './components/post-panel-row';
 import PostViewLink from './components/post-view-link';
 import PreviewDropdown from './components/preview-dropdown';
 import PreferencesModal from './components/preferences-modal';
+import PostActions from './components/post-actions';
 import { usePostActions } from './components/post-actions/actions';
 import PostCardPanel from './components/post-card-panel';
+import PostStatus from './components/post-status';
+import ToolsMoreMenuGroup from './components/more-menu/tools-more-menu-group';
+import ViewMoreMenuGroup from './components/more-menu/view-more-menu-group';
+import { PrivatePostExcerptPanel } from './components/post-excerpt/panel';
+import PostPublishButtonOrToggle from './components/post-publish-button/post-publish-button-or-toggle';
+import SavePublishPanels from './components/save-publish-panels';
+import PostContentInformation from './components/post-content-information';
+import PostLastEditedPanel from './components/post-last-edited-panel';
+
+const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis;
 
 export const privateApis = {};
 lock( privateApis, {
+	CollapsableBlockToolbar,
 	DocumentTools,
 	EditorCanvas,
 	ExperimentalEditorProvider,
 	EntitiesSavedStatesExtensible,
 	InserterSidebar,
 	ListViewSidebar,
-	ModeSwitcher,
+	MoreMenu,
 	PatternOverridesPanel,
 	PluginPostExcerpt,
+	PostActions,
 	PostPanelRow,
 	PostViewLink,
 	PreviewDropdown,
 	PreferencesModal,
 	usePostActions,
 	PostCardPanel,
+	PostStatus,
+	ToolsMoreMenuGroup,
+	ViewMoreMenuGroup,
+	PrivatePostExcerptPanel,
+	PostPublishButtonOrToggle,
+	SavePublishPanels,
+	PostContentInformation,
+	PostLastEditedPanel,
 
 	// This is a temporary private API while we're updating the site editor to use EditorProvider.
+	useAutoSwitchEditorSidebars,
 	useBlockEditorSettings,
+	interfaceStore,
+	...remainingInterfaceApis,
 } );

package/src/store/constants.js

@@ -20,3 +20,10 @@ export const ONE_MINUTE_IN_MS = 60 * 1000;
 export const AUTOSAVE_PROPERTIES = [ 'title', 'excerpt', 'content' ];
 export const TEMPLATE_POST_TYPE = 'wp_template';
 export const TEMPLATE_PART_POST_TYPE = 'wp_template_part';
+export const PATTERN_POST_TYPE = 'wp_block';
+export const NAVIGATION_POST_TYPE = 'wp_navigation';
+export const TEMPLATE_ORIGINS = {
+	custom: 'custom',
+	theme: 'theme',
+	plugin: 'plugin',
+};

package/src/store/private-actions.js

@@ -2,10 +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.
@@ -140,9 +150,6 @@ export const saveDirtyEntities =
 				);
 			}
 		);
-		if ( ! entitiesToSave.length ) {
-			return;
-		}
 		close?.( entitiesToSave );
 		const siteItemsToSave = [];
 		const pendingSavedRecords = [];
@@ -220,3 +227,261 @@ export const saveDirtyEntities =
 					)
 			);
 	};
+
+/**
+ * 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

@@ -1,13 +1,8 @@
-/**
- * External dependencies
- */
-import createSelector from 'rememo';
-
 /**
  * WordPress dependencies
  */
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { createRegistrySelector } from '@wordpress/data';
+import { createSelector, createRegistrySelector } from '@wordpress/data';
 import {
 	layout,
 	symbol,

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';
@@ -843,7 +838,9 @@ export const getSuggestedPostFormat = createRegistrySelector(
 	( select ) => () => {
 		const blocks = select( blockEditorStore ).getBlocks();
 
-		if ( blocks.length > 2 ) return null;
+		if ( blocks.length > 2 ) {
+			return null;
+		}
 
 		let name;
 		// If there is only one block in the content of the post grab its name

package/src/store/utils/is-template-revertable.js

@@ -0,0 +1,23 @@
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_ORIGINS } from '../constants';
+
+// Copy of the function from packages/edit-site/src/utils/is-template-revertable.js
+
+/**
+ * Check if a template is revertable to its original theme-provided template file.
+ *
+ * @param {Object} template The template entity to check.
+ * @return {boolean} Whether the template is revertable.
+ */
+export default function isTemplateRevertable( template ) {
+	if ( ! template ) {
+		return false;
+	}
+	/* eslint-disable camelcase */
+	return (
+		template?.source === TEMPLATE_ORIGINS.custom && template?.has_theme_file
+	);
+	/* eslint-enable camelcase */
+}