@wordpress/editor 13.31.0 → 13.32.0

package/src/store/private-actions.js

@@ -4,6 +4,7 @@
 import { store as coreStore } from '@wordpress/core-data';
 import { __ } 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';
 
 /**
@@ -109,3 +110,113 @@ 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
+				);
+			}
+		);
+		if ( ! entitiesToSave.length ) {
+			return;
+		}
+		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 }`
+					)
+			);
+	};

package/src/store/private-selectors.js

@@ -1,13 +1,31 @@
+/**
+ * External dependencies
+ */
+import createSelector from 'rememo';
+
 /**
  * WordPress dependencies
  */
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { 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 +40,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

@@ -105,16 +105,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 +1107,7 @@ export function canUserUseUnfilteredHTML( state ) {
  */
 export const isPublishSidebarEnabled = createRegistrySelector(
 	( select ) => () =>
-		!! select( preferencesStore ).get(
-			'core/edit-post',
-			'isPublishSidebarEnabled'
-		)
+		!! select( preferencesStore ).get( 'core', 'isPublishSidebarEnabled' )
 );
 
 /**
@@ -1706,8 +1698,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 +1727,7 @@ export const __experimentalGetDefaultTemplateType = createSelector(
 			) ?? EMPTY_OBJECT
 		);
 	},
-	( state, slug ) => [ __experimentalGetDefaultTemplateTypes( state ), slug ]
+	( state ) => [ __experimentalGetDefaultTemplateTypes( state ) ]
 );
 
 /**
@@ -1746,32 +1738,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 +1788,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;
+}

package/src/store/utils/get-filtered-template-parts.js

@@ -0,0 +1,69 @@
+/**
+ * External dependencies
+ */
+import memoize from 'memize';
+
+/**
+ * WordPress dependencies
+ */
+import { isTemplatePart } from '@wordpress/blocks';
+
+const EMPTY_ARRAY = [];
+
+/**
+ * Get a flattened and filtered list of template parts and the matching block for that template part.
+ *
+ * Takes a list of blocks defined within a template, and a list of template parts, and returns a
+ * flattened list of template parts and the matching block for that template part.
+ *
+ * @param {Array}  blocks        Blocks to flatten.
+ * @param {?Array} templateParts Available template parts.
+ * @return {Array} An array of template parts and their blocks.
+ */
+function getFilteredTemplatePartBlocks( blocks = EMPTY_ARRAY, templateParts ) {
+	const templatePartsById = templateParts
+		? // Key template parts by their ID.
+		  templateParts.reduce(
+				( newTemplateParts, part ) => ( {
+					...newTemplateParts,
+					[ part.id ]: part,
+				} ),
+				{}
+		  )
+		: {};
+
+	const result = [];
+
+	// Iterate over all blocks, recursing into inner blocks.
+	// Output will be based on a depth-first traversal.
+	const stack = [ ...blocks ];
+	while ( stack.length ) {
+		const { innerBlocks, ...block } = stack.shift();
+		// Place inner blocks at the beginning of the stack to preserve order.
+		stack.unshift( ...innerBlocks );
+
+		if ( isTemplatePart( block ) ) {
+			const {
+				attributes: { theme, slug },
+			} = block;
+			const templatePartId = `${ theme }//${ slug }`;
+			const templatePart = templatePartsById[ templatePartId ];
+
+			// Only add to output if the found template part block is in the list of available template parts.
+			if ( templatePart ) {
+				result.push( {
+					templatePart,
+					block,
+				} );
+			}
+		}
+	}
+
+	return result;
+}
+
+const memoizedGetFilteredTemplatePartBlocks = memoize(
+	getFilteredTemplatePartBlocks
+);
+
+export { memoizedGetFilteredTemplatePartBlocks as getFilteredTemplatePartBlocks };

package/src/store/utils/test/get-filtered-template-parts.js

@@ -0,0 +1,189 @@
+/**
+ * Internal dependencies
+ */
+import { getFilteredTemplatePartBlocks } from '../get-filtered-template-parts';
+
+const NESTED_BLOCKS = [
+	{
+		clientId: '1',
+		name: 'core/group',
+		innerBlocks: [
+			{
+				clientId: '2',
+				name: 'core/template-part',
+				attributes: {
+					slug: 'header',
+					theme: 'my-theme',
+				},
+				innerBlocks: [
+					{
+						clientId: '3',
+						name: 'core/group',
+						innerBlocks: [],
+					},
+				],
+			},
+			{
+				clientId: '4',
+				name: 'core/template-part',
+				attributes: {
+					slug: 'aside',
+					theme: 'my-theme',
+				},
+				innerBlocks: [],
+			},
+		],
+	},
+	{
+		clientId: '5',
+		name: 'core/paragraph',
+		innerBlocks: [],
+	},
+	{
+		clientId: '6',
+		name: 'core/template-part',
+		attributes: {
+			slug: 'footer',
+			theme: 'my-theme',
+		},
+		innerBlocks: [],
+	},
+];
+
+const FLATTENED_BLOCKS = [
+	{
+		block: {
+			clientId: '2',
+			name: 'core/template-part',
+			attributes: {
+				slug: 'header',
+				theme: 'my-theme',
+			},
+		},
+		templatePart: {
+			id: 'my-theme//header',
+			slug: 'header',
+			theme: 'my-theme',
+		},
+	},
+	{
+		block: {
+			clientId: '4',
+			name: 'core/template-part',
+			attributes: {
+				slug: 'aside',
+				theme: 'my-theme',
+			},
+		},
+		templatePart: {
+			id: 'my-theme//aside',
+			slug: 'aside',
+			theme: 'my-theme',
+		},
+	},
+	{
+		block: {
+			clientId: '6',
+			name: 'core/template-part',
+			attributes: {
+				slug: 'footer',
+				theme: 'my-theme',
+			},
+		},
+		templatePart: {
+			id: 'my-theme//footer',
+			slug: 'footer',
+			theme: 'my-theme',
+		},
+	},
+];
+
+const SINGLE_TEMPLATE_PART_BLOCK = {
+	clientId: '1',
+	name: 'core/template-part',
+	innerBlocks: [],
+	attributes: {
+		slug: 'aside',
+		theme: 'my-theme',
+	},
+};
+
+const TEMPLATE_PARTS = [
+	{
+		id: 'my-theme//header',
+		slug: 'header',
+		theme: 'my-theme',
+	},
+	{
+		id: 'my-theme//aside',
+		slug: 'aside',
+		theme: 'my-theme',
+	},
+	{
+		id: 'my-theme//footer',
+		slug: 'footer',
+		theme: 'my-theme',
+	},
+];
+
+describe( 'getFilteredTemplatePartBlocks', () => {
+	it( 'returns a flattened list of filtered template parts preserving a depth-first order', () => {
+		const flattenedFilteredTemplateParts = getFilteredTemplatePartBlocks(
+			NESTED_BLOCKS,
+			TEMPLATE_PARTS
+		);
+		expect( flattenedFilteredTemplateParts ).toEqual( FLATTENED_BLOCKS );
+	} );
+
+	it( 'returns a cached result when passed the same params', () => {
+		// Clear the cache and call the function twice.
+		getFilteredTemplatePartBlocks.clear();
+		getFilteredTemplatePartBlocks( NESTED_BLOCKS, TEMPLATE_PARTS );
+		expect(
+			getFilteredTemplatePartBlocks( NESTED_BLOCKS, TEMPLATE_PARTS )
+		).toEqual( FLATTENED_BLOCKS );
+
+		// The function has been called twice with the same params, so the cache size should be 1.
+		/**
+		 * TODO what should be done about this?
+		 * Can it be tested another way?
+		 * Is it necessary?
+		 */
+		// const [ , , originalSize ] =
+		// 	getFilteredTemplatePartBlocks.getCache();
+		// expect( originalSize ).toBe( 1 );
+
+		// Call the function again, with different params.
+		expect(
+			getFilteredTemplatePartBlocks(
+				[ SINGLE_TEMPLATE_PART_BLOCK ],
+				TEMPLATE_PARTS
+			)
+		).toEqual( [
+			{
+				block: {
+					clientId: '1',
+					name: 'core/template-part',
+					attributes: {
+						slug: 'aside',
+						theme: 'my-theme',
+					},
+				},
+				templatePart: {
+					id: 'my-theme//aside',
+					slug: 'aside',
+					theme: 'my-theme',
+				},
+			},
+		] );
+
+		// The function has been called with different params, so the cache size should now be 2.
+		/**
+		 * TODO what should be done about this?
+		 * Can it be tested another way?
+		 * Is it necessary?
+		 */
+		// const [ , , finalSize ] = getFilteredTemplatePartBlocks.getCache();
+		// expect( finalSize ).toBe( 2 );
+	} );
+} );

package/src/style.scss

@@ -9,6 +9,7 @@
 @import "./components/inserter-sidebar/style.scss";
 @import "./components/list-view-sidebar/style.scss";
 @import "./components/post-author/style.scss";
+@import "./components/post-card-panel/style.scss";
 @import "./components/post-excerpt/style.scss";
 @import "./components/post-featured-image/style.scss";
 @import "./components/post-format/style.scss";
@@ -29,4 +30,5 @@
 @import "./components/post-trash/style.scss";
 @import "./components/preview-dropdown/style.scss";
 @import "./components/table-of-contents/style.scss";
+@import "./components/template-areas/style.scss";
 @import "./components/template-validation-notice/style.scss";