@wordpress/edit-site 5.32.0 → 5.34.0

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;
 	}
 
@@ -149,22 +153,53 @@ export default function useThemeStyleVariationsByProperty( {
 				? cloneDeep( baseVariation )
 				: null;
 
-		let processedStyleVariations = variations.map( ( variation ) => {
-			let result = {
-				...filterObjectByProperty( cloneDeep( variation ), property ),
-				title: variation?.title,
-				description: variation?.description,
-			};
-
-			if ( clonedBaseVariation ) {
-				/*
-				 * Overwrites all baseVariation object `styleProperty` properties
-				 * with the theme variation `styleProperty` properties.
-				 */
-				result = mergeBaseAndUserConfigs( clonedBaseVariation, result );
-			}
-			return result;
-		} );
+		let processedStyleVariations = variations.reduce(
+			( accumulator, variation ) => {
+				const variationFilteredByProperty = filterObjectByProperty(
+					cloneDeep( variation ),
+					property
+				);
+				// Remove variations that are empty once the property is filtered out.
+				if ( Object.keys( variationFilteredByProperty ).length === 0 ) {
+					return accumulator;
+				}
+
+				let result = {
+					...variationFilteredByProperty,
+					title: variation?.title,
+					description: variation?.description,
+				};
+
+				if ( clonedBaseVariation ) {
+					/*
+					 * Overwrites all baseVariation object `styleProperty` properties
+					 * with the theme variation `styleProperty` properties.
+					 */
+					result = mergeBaseAndUserConfigs(
+						clonedBaseVariation,
+						result
+					);
+				}
+
+				// Detect if this is a duplicate variation.
+				const isDuplicate = accumulator.some( ( item ) => {
+					return (
+						JSON.stringify( item.styles ) ===
+							JSON.stringify( result?.styles ) &&
+						JSON.stringify( item.settings ) ===
+							JSON.stringify( result?.settings )
+					);
+				} );
+				if ( isDuplicate ) {
+					return accumulator;
+				}
+
+				// If the variation is not a duplicate, add it to the accumulator.
+				accumulator.push( result );
+				return accumulator;
+			},
+			[] // Initial accumulator value.
+		);
 
 		if ( 'function' === typeof filter ) {
 			processedStyleVariations =
@@ -174,3 +209,25 @@ export default function useThemeStyleVariationsByProperty( {
 		return processedStyleVariations;
 	}, [ variations, property, baseVariation, filter ] );
 }
+
+/**
+ * Compares a style variation to the same variation filtered by a single property.
+ * Returns true if the variation contains only the property specified.
+ *
+ * @param {Object} variation The variation to compare.
+ * @param {string} property  The property to compare.
+ * @return {boolean} Whether the variation contains only a single property.
+ */
+export function isVariationWithSingleProperty( variation, property ) {
+	const variationWithProperty = filterObjectByProperty(
+		cloneDeep( variation ),
+		property
+	);
+
+	return (
+		JSON.stringify( variationWithProperty?.styles ) ===
+			JSON.stringify( variation?.styles ) &&
+		JSON.stringify( variationWithProperty?.settings ) ===
+			JSON.stringify( variation?.settings )
+	);
+}

package/src/index.js

@@ -11,7 +11,6 @@ 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 { store as preferencesStore } from '@wordpress/preferences';
 import {
 	registerLegacyWidgetBlock,
@@ -71,11 +70,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 +97,6 @@ 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 { default as PluginTemplateSettingPanel } from './components/plugin-template-setting-panel';
 export { store } from './store';
+export * from './deprecated';

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' );
 	};
 
 /**

package/src/store/private-actions.js

@@ -4,15 +4,6 @@
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { store as editorStore } from '@wordpress/editor';
-import { store as coreStore } from '@wordpress/core-data';
-import { store as noticesStore } from '@wordpress/notices';
-import { __, sprintf } from '@wordpress/i18n';
-import { decodeEntities } from '@wordpress/html-entities';
-
-/**
- * Internal dependencies
- */
-import { TEMPLATE_POST_TYPE } from '../utils/constants';
 
 /**
  * Action that switches the canvas mode.
@@ -62,127 +53,3 @@ export const setEditorCanvasContainerView =
 			view,
 		} );
 	};
-
-/**
- * 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/test/actions.js

@@ -4,15 +4,20 @@
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { createRegistry } from '@wordpress/data';
-import { store as interfaceStore } from '@wordpress/interface';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { store as editorStore } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '..';
+import { unlock } from '../../lock-unlock';
+
+const { interfaceStore } = unlock( editorPrivateApis );
 
 function createRegistryWithStores() {
 	// create a registry

package/src/style.scss

@@ -1,4 +1,3 @@
-@import "../../interface/src/style.scss";
 @import "../../dataviews/src/style.scss";
 
 @import "./components/add-new-template/style.scss";
@@ -11,17 +10,15 @@
 @import "./components/page/style.scss";
 @import "./components/page-pages/style.scss";
 @import "./components/page-patterns/style.scss";
-@import "./components/page-templates-template-parts/style.scss";
+@import "./components/page-templates/style.scss";
 @import "./components/table/style.scss";
 @import "./components/sidebar-edit-mode/style.scss";
-@import "./components/sidebar-edit-mode/page-panels/style.scss";
 @import "./components/sidebar-edit-mode/settings-header/style.scss";
 @import "./components/sidebar-edit-mode/template-panel/style.scss";
 @import "./components/editor/style.scss";
 @import "./components/create-template-part-modal/style.scss";
 @import "./components/welcome-guide/style.scss";
 @import "./components/start-template-options/style.scss";
-@import "./components/keyboard-shortcut-help-modal/style.scss";
 @import "./components/layout/style.scss";
 @import "./components/save-hub/style.scss";
 @import "./components/save-panel/style.scss";
@@ -95,9 +92,6 @@ body.js.site-editor-php {
 		display: none;
 	}
 
-	.interface-interface-skeleton__content {
-		background-color: $gray-300;
-	}
 }
 
 /**

package/src/utils/constants.js

@@ -21,6 +21,7 @@ export const TEMPLATE_ORIGINS = {
 	plugin: 'plugin',
 };
 export const TEMPLATE_PART_AREA_DEFAULT_CATEGORY = 'uncategorized';
+export const TEMPLATE_PART_ALL_AREAS_CATEGORY = 'all-parts';
 
 // Patterns.
 export const {
@@ -49,7 +50,7 @@ export const POST_TYPE_LABELS = {
 export const LAYOUT_GRID = 'grid';
 export const LAYOUT_TABLE = 'table';
 export const LAYOUT_LIST = 'list';
-export const ENUMERATION_TYPE = 'enumeration';
+
 export const OPERATOR_IS = 'is';
 export const OPERATOR_IS_NOT = 'isNot';
 export const OPERATOR_IS_ANY = 'isAny';

package/src/utils/set-nested-value.js

@@ -0,0 +1,39 @@
+/**
+ * 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.
+ */
+export default 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;
+}