@wordpress/edit-site 5.32.0 → 5.33.0

package/src/components/sync-state-with-url/use-init-edited-entity-from-url.js

@@ -28,42 +28,48 @@ const postTypesWithoutParentTemplate = [
 ];
 
 function useResolveEditedEntityAndContext( { path, postId, postType } ) {
-	const { hasLoadedAllDependencies, homepageId, url, frontPageTemplateId } =
-		useSelect( ( select ) => {
-			const { getSite, getUnstableBase, getEntityRecords } =
-				select( coreDataStore );
-			const siteData = getSite();
-			const base = getUnstableBase();
-			const templates = getEntityRecords(
-				'postType',
-				TEMPLATE_POST_TYPE,
-				{
-					per_page: -1,
-				}
+	const {
+		hasLoadedAllDependencies,
+		homepageId,
+		postsPageId,
+		url,
+		frontPageTemplateId,
+	} = useSelect( ( select ) => {
+		const { getSite, getUnstableBase, getEntityRecords } =
+			select( coreDataStore );
+		const siteData = getSite();
+		const base = getUnstableBase();
+		const templates = getEntityRecords( 'postType', TEMPLATE_POST_TYPE, {
+			per_page: -1,
+		} );
+		const _homepageId =
+			siteData?.show_on_front === 'page' &&
+			[ 'number', 'string' ].includes( typeof siteData.page_on_front ) &&
+			!! +siteData.page_on_front // We also need to check if it's not zero(`0`).
+				? siteData.page_on_front.toString()
+				: null;
+		const _postsPageId =
+			siteData?.show_on_front === 'page' &&
+			[ 'number', 'string' ].includes( typeof siteData.page_for_posts )
+				? siteData.page_for_posts.toString()
+				: null;
+		let _frontPageTemplateId;
+		if ( templates ) {
+			const frontPageTemplate = templates.find(
+				( t ) => t.slug === 'front-page'
 			);
-			let _frontPateTemplateId;
-			if ( templates ) {
-				const frontPageTemplate = templates.find(
-					( t ) => t.slug === 'front-page'
-				);
-				_frontPateTemplateId = frontPageTemplate
-					? frontPageTemplate.id
-					: false;
-			}
-
-			return {
-				hasLoadedAllDependencies: !! base && !! siteData,
-				homepageId:
-					siteData?.show_on_front === 'page' &&
-					[ 'number', 'string' ].includes(
-						typeof siteData.page_on_front
-					)
-						? siteData.page_on_front.toString()
-						: null,
-				url: base?.home,
-				frontPageTemplateId: _frontPateTemplateId,
-			};
-		}, [] );
+			_frontPageTemplateId = frontPageTemplate
+				? frontPageTemplate.id
+				: false;
+		}
+		return {
+			hasLoadedAllDependencies: !! base && !! siteData,
+			homepageId: _homepageId,
+			postsPageId: _postsPageId,
+			url: base?.home,
+			frontPageTemplateId: _frontPageTemplateId,
+		};
+	}, [] );
 
 	/**
 	 * This is a hook that recreates the logic to resolve a template for a given WordPress postID postTypeId
@@ -114,6 +120,14 @@ function useResolveEditedEntityAndContext( { path, postId, postType } ) {
 				if ( ! editedEntity ) {
 					return undefined;
 				}
+				// Check if the current page is the posts page.
+				if (
+					postTypeToResolve === 'page' &&
+					postsPageId === postIdToResolve
+				) {
+					return __experimentalGetTemplateForLink( editedEntity.link )
+						?.id;
+				}
 				// First see if the post/page has an assigned template and fetch it.
 				const currentTemplateSlug = editedEntity.template;
 				if ( currentTemplateSlug ) {
@@ -177,6 +191,7 @@ function useResolveEditedEntityAndContext( { path, postId, postType } ) {
 		},
 		[
 			homepageId,
+			postsPageId,
 			hasLoadedAllDependencies,
 			url,
 			postId,

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

@@ -21,7 +21,7 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { store as editSiteStore } from '../../store';
 import isTemplateRemovable from '../../utils/is-template-removable';
 import isTemplateRevertable from '../../utils/is-template-revertable';
-import RenameMenuItem from './rename-menu-item';
+import RenamePostMenuItem from '../rename-post-menu-item';
 import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 
 export default function TemplateActions( {
@@ -55,8 +55,8 @@ export default function TemplateActions( {
 				<MenuGroup>
 					{ isRemovable && (
 						<>
-							<RenameMenuItem
-								template={ template }
+							<RenamePostMenuItem
+								post={ template }
 								onClose={ onClose }
 							/>
 							<DeleteMenuItem
@@ -98,7 +98,7 @@ function ResetMenuItem( { template, onClose } ) {
 			createSuccessNotice(
 				sprintf(
 					/* translators: The template/part's name. */
-					__( '"%s" reverted.' ),
+					__( '"%s" reset.' ),
 					decodeEntities( template.title.rendered )
 				),
 				{
@@ -123,11 +123,8 @@ function ResetMenuItem( { template, onClose } ) {
 	}
 	return (
 		<>
-			<MenuItem
-				info={ __( 'Use the template as supplied by the theme.' ) }
-				onClick={ () => setIsModalOpen( true ) }
-			>
-				{ __( 'Clear customizations' ) }
+			<MenuItem onClick={ () => setIsModalOpen( true ) }>
+				{ __( 'Reset' ) }
 			</MenuItem>
 			<ConfirmDialog
 				isOpen={ isModalOpen }
@@ -136,9 +133,9 @@ function ResetMenuItem( { template, onClose } ) {
 					onClose();
 				} }
 				onCancel={ () => setIsModalOpen( false ) }
-				confirmButtonText={ __( 'Clear' ) }
+				confirmButtonText={ __( 'Reset' ) }
 			>
-				{ __( 'Are you sure you want to clear these customizations?' ) }
+				{ __( 'Rese to default and clear all customizations?' ) }
 			</ConfirmDialog>
 		</>
 	);

package/src/components/welcome-guide/style.scss

@@ -1,7 +1,7 @@
 .edit-site-welcome-guide {
 	width: 312px;
 
-	&.guide-editor .edit-site-welcome-guide__image
+	&.guide-editor .edit-site-welcome-guide__image,
 	&.guide-styles .edit-site-welcome-guide__image {
 		background: #00a0d2;
 	}

package/src/components/welcome-guide/styles.js

@@ -4,22 +4,23 @@
 import { useDispatch, useSelect } from '@wordpress/data';
 import { ExternalLink, Guide } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { store as interfaceStore } from '@wordpress/interface';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import WelcomeGuideImage from './image';
-import { store as editSiteStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const { interfaceStore } = unlock( editorPrivateApis );
 
 export default function WelcomeGuideStyles() {
 	const { toggle } = useDispatch( preferencesStore );
 
 	const { isActive, isStylesOpen } = useSelect( ( select ) => {
-		const sidebar = select( interfaceStore ).getActiveComplementaryArea(
-			editSiteStore.name
-		);
+		const sidebar =
+			select( interfaceStore ).getActiveComplementaryArea( 'core' );
 
 		return {
 			isActive: !! select( preferencesStore ).get(

package/src/hooks/commands/use-edit-mode-commands.js

@@ -13,14 +13,15 @@ import {
 	drawerLeft,
 	drawerRight,
 	blockDefault,
-	keyboard,
 	symbol,
 } from '@wordpress/icons';
 import { useCommandLoader } from '@wordpress/commands';
 import { decodeEntities } from '@wordpress/html-entities';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { store as interfaceStore } from '@wordpress/interface';
-import { store as editorStore } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -29,13 +30,12 @@ import { store as editSiteStore } from '../../store';
 import useEditedEntityRecord from '../../components/use-edited-entity-record';
 import isTemplateRemovable from '../../utils/is-template-removable';
 import isTemplateRevertable from '../../utils/is-template-revertable';
-import { KEYBOARD_SHORTCUT_HELP_MODAL_NAME } from '../../components/keyboard-shortcut-help-modal';
-import { PREFERENCES_MODAL_NAME } from '../../components/preferences-modal';
 import { PATTERN_MODALS } from '../../components/pattern-modal';
 import { unlock } from '../../lock-unlock';
 import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 import { useLink } from '../../components/routes/link';
 
+const { interfaceStore } = unlock( editorPrivateApis );
 const { useHistory } = unlock( routerPrivateApis );
 
 function usePageContentFocusCommands() {
@@ -154,9 +154,7 @@ function useManipulateDocumentCommands() {
 						decodeEntities( template.title )
 				  );
 		const path =
-			template.type === TEMPLATE_POST_TYPE
-				? '/wp_template'
-				: '/wp_template_part/all';
+			template.type === TEMPLATE_POST_TYPE ? '/wp_template' : '/patterns';
 		commands.push( {
 			name: 'core/remove-template',
 			label,
@@ -184,12 +182,10 @@ function useEditUICommands() {
 	const { canvasMode, activeSidebar } = useSelect( ( select ) => {
 		return {
 			canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(),
-			activeSidebar: select( interfaceStore ).getActiveComplementaryArea(
-				editSiteStore.name
-			),
+			activeSidebar:
+				select( interfaceStore ).getActiveComplementaryArea( 'core' ),
 		};
 	}, [] );
-	const { openModal } = useDispatch( interfaceStore );
 
 	if ( canvasMode !== 'edit' ) {
 		return { isLoading: false, commands: [] };
@@ -203,10 +199,10 @@ function useEditUICommands() {
 		icon: isRTL() ? drawerLeft : drawerRight,
 		callback: ( { close } ) => {
 			close();
-			if ( activeSidebar === 'edit-site/template' ) {
+			if ( activeSidebar === 'edit-post/document' ) {
 				closeGeneralSidebar();
 			} else {
-				openGeneralSidebar( 'edit-site/template' );
+				openGeneralSidebar( 'edit-post/document' );
 			}
 		},
 	} );
@@ -217,31 +213,14 @@ function useEditUICommands() {
 		icon: blockDefault,
 		callback: ( { close } ) => {
 			close();
-			if ( activeSidebar === 'edit-site/block-inspector' ) {
+			if ( activeSidebar === 'edit-site/block' ) {
 				closeGeneralSidebar();
 			} else {
-				openGeneralSidebar( 'edit-site/block-inspector' );
+				openGeneralSidebar( 'edit-site/block' );
 			}
 		},
 	} );
 
-	commands.push( {
-		name: 'core/open-preferences',
-		label: __( 'Editor preferences' ),
-		callback: () => {
-			openModal( PREFERENCES_MODAL_NAME );
-		},
-	} );
-
-	commands.push( {
-		name: 'core/open-shortcut-help',
-		label: __( 'Keyboard shortcuts' ),
-		icon: keyboard,
-		callback: () => {
-			openModal( KEYBOARD_SHORTCUT_HELP_MODAL_NAME );
-		},
-	} );
-
 	return {
 		isLoading: false,
 		commands,

package/src/hooks/push-changes-to-global-styles/index.js

@@ -27,6 +27,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import { useSupportedStyles } from '../../components/global-styles/hooks';
 import { unlock } from '../../lock-unlock';
 import cloneDeep from '../../utils/clone-deep';
+import setNestedValue from '../../utils/set-nested-value';
 
 const { cleanEmptyObject, GlobalStylesContext } = unlock(
 	blockEditorPrivateApis
@@ -236,46 +237,6 @@ function useChangesToPush( name, attributes, userConfig ) {
 	}, [ supports, attributes, blockUserConfig ] );
 }
 
-/**
- * Sets the value at path of object.
- * If a portion of path doesn’t exist, it’s created.
- * Arrays are created for missing index properties while objects are created
- * for all other missing properties.
- *
- * This function intentionally mutates the input object.
- *
- * Inspired by _.set().
- *
- * @see https://lodash.com/docs/4.17.15#set
- *
- * @todo Needs to be deduplicated with its copy in `@wordpress/core-data`.
- *
- * @param {Object} object Object to modify
- * @param {Array}  path   Path of the property to set.
- * @param {*}      value  Value to set.
- */
-function setNestedValue( object, path, value ) {
-	if ( ! object || typeof object !== 'object' ) {
-		return object;
-	}
-
-	path.reduce( ( acc, key, idx ) => {
-		if ( acc[ key ] === undefined ) {
-			if ( Number.isInteger( path[ idx + 1 ] ) ) {
-				acc[ key ] = [];
-			} else {
-				acc[ key ] = {};
-			}
-		}
-		if ( idx === path.length - 1 ) {
-			acc[ key ] = value;
-		}
-		return acc[ key ];
-	}, object );
-
-	return object;
-}
-
 function PushChangesToGlobalStylesControl( {
 	name,
 	attributes,

package/src/hooks/use-theme-style-variations/test/use-theme-style-variations-by-property.js

@@ -1079,6 +1079,10 @@ describe( 'removePropertyFromObject', () => {
 		expect( removePropertyFromObject( object, 'color' ) ).toEqual( object );
 	} );
 
+	it( 'should return with null', () => {
+		expect( removePropertyFromObject( null, 'color' ) ).toEqual( null );
+	} );
+
 	it( 'should remove the specified property from the object', () => {
 		expect(
 			removePropertyFromObject(

package/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js

@@ -28,7 +28,11 @@ export function removePropertyFromObject( object, property ) {
 		return object;
 	}
 
-	if ( typeof object !== 'object' || ! Object.keys( object ).length ) {
+	if (
+		typeof object !== 'object' ||
+		! object ||
+		! Object.keys( object ).length
+	) {
 		return object;
 	}
 

package/src/index.js

@@ -10,8 +10,12 @@ import {
 import { dispatch } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import { createRoot } from '@wordpress/element';
-import { store as editorStore } from '@wordpress/editor';
-import { store as interfaceStore } from '@wordpress/interface';
+import {
+	PluginMoreMenuItem,
+	PluginSidebar,
+	PluginSidebarMoreMenuItem,
+	store as editorStore,
+} from '@wordpress/editor';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
 	registerLegacyWidgetBlock,
@@ -71,11 +75,6 @@ export function initializeEditor( id, settings ) {
 		showListViewByDefault: false,
 	} );
 
-	dispatch( interfaceStore ).setDefaultComplementaryArea(
-		'core/edit-site',
-		'edit-site/template'
-	);
-
 	dispatch( editSiteStore ).updateSettings( settings );
 
 	// Keep the defaultTemplateTypes in the core/editor settings too,
@@ -103,8 +102,8 @@ export function reinitializeEditor() {
 	} );
 }
 
-export { default as PluginSidebar } from './components/sidebar-edit-mode/plugin-sidebar';
-export { default as PluginSidebarMoreMenuItem } from './components/header-edit-mode/plugin-sidebar-more-menu-item';
-export { default as PluginMoreMenuItem } from './components/header-edit-mode/plugin-more-menu-item';
+export { PluginMoreMenuItem };
+export { PluginSidebar };
+export { PluginSidebarMoreMenuItem };
 export { default as PluginTemplateSettingPanel } from './components/plugin-template-setting-panel';
 export { store } from './store';

package/src/store/actions.js

@@ -1,29 +1,27 @@
 /**
  * WordPress dependencies
  */
-import apiFetch from '@wordpress/api-fetch';
-import { parse, __unstableSerializeAndClean } from '@wordpress/blocks';
+import { parse } from '@wordpress/blocks';
 import deprecated from '@wordpress/deprecated';
-import { addQueryArgs } from '@wordpress/url';
-import { __ } from '@wordpress/i18n';
-import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
-import { store as interfaceStore } from '@wordpress/interface';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { store as editorStore } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
  */
-import { STORE_NAME as editSiteStoreName } from './constants';
-import isTemplateRevertable from '../utils/is-template-revertable';
 import {
 	TEMPLATE_POST_TYPE,
 	TEMPLATE_PART_POST_TYPE,
 	NAVIGATION_POST_TYPE,
 } from '../utils/constants';
-import { removeTemplates } from './private-actions';
+import { unlock } from '../lock-unlock';
+
+const { interfaceStore } = unlock( editorPrivateApis );
 
 /**
  * Dispatches an action that toggles a feature flag.
@@ -133,9 +131,13 @@ export const addTemplate =
  *
  * @param {Object} template The template object.
  */
-export const removeTemplate = ( template ) => {
-	return removeTemplates( [ template ] );
-};
+export const removeTemplate =
+	( template ) =>
+	( { registry } ) => {
+		return unlock( registry.dispatch( editorStore ) ).removeTemplates( [
+			template,
+		] );
+	};
 
 /**
  * Action that sets a template part.
@@ -219,7 +221,7 @@ export function setEditedPostContext( context ) {
  *
  * @deprecated
  *
- * @return {number} The resolved template ID for the page route.
+ * @return {Object} Action object.
  */
 export function setPage() {
 	deprecated( "dispatch( 'core/edit-site' ).setPage", {
@@ -345,130 +347,14 @@ export function setIsSaveViewOpened( isOpen ) {
  *                                      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 reverted.' ), {
-						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' } );
-		}
+	( template, options ) =>
+	( { registry } ) => {
+		return unlock( registry.dispatch( editorStore ) ).revertTemplate(
+			template,
+			options
+		);
 	};
+
 /**
  * Action that opens an editor sidebar.
  *
@@ -479,7 +365,7 @@ export const openGeneralSidebar =
 	( { registry } ) => {
 		registry
 			.dispatch( interfaceStore )
-			.enableComplementaryArea( editSiteStoreName, name );
+			.enableComplementaryArea( 'core', name );
 	};
 
 /**
@@ -488,9 +374,7 @@ export const openGeneralSidebar =
 export const closeGeneralSidebar =
 	() =>
 	( { registry } ) => {
-		registry
-			.dispatch( interfaceStore )
-			.disableComplementaryArea( editSiteStoreName );
+		registry.dispatch( interfaceStore ).disableComplementaryArea( 'core' );
 	};
 
 /**