Add indicator for metadata changes to Save Panel when reviewing modified entities

packages/e2e-test-utils-playwright/src/editor/index.ts

@@ -16,6 +16,7 @@ import { clickBlockToolbarButton } from './click-block-toolbar-button';
 import { getBlocks } from './get-blocks';
 import { getEditedPostContent } from './get-edited-post-content';
 import { insertBlock } from './insert-block';
+import { modifyPostMetadata } from './modify-post-metadata';
 import { openDocumentSettingsSidebar } from './open-document-settings-sidebar';
 import { openPreviewPage } from './preview';
 import { publishPost } from './publish-post';
@@ -61,6 +62,9 @@ export class Editor {
 		getEditedPostContent.bind( this );
 	/** @borrows insertBlock as this.insertBlock */
 	insertBlock: typeof insertBlock = insertBlock.bind( this );
+	/** @borrows modifyPostMetadata as this.modifyPostMetadata */
+	modifyPostMetadata: typeof modifyPostMetadata =
+		modifyPostMetadata.bind( this );
 	/** @borrows openDocumentSettingsSidebar as this.openDocumentSettingsSidebar */
 	openDocumentSettingsSidebar: typeof openDocumentSettingsSidebar =
 		openDocumentSettingsSidebar.bind( this );

packages/e2e-test-utils-playwright/src/editor/modify-post-metadata.ts

@@ -0,0 +1,44 @@
+/**
+ * Internal dependencies
+ */
+import type { Editor } from './index';
+
+/**
+ * Clicks on the button in the header which opens Document Settings sidebar when
+ * it is closed.
+ *
+ * @param this
+ * @param postType
+ * @param postId
+ * @param metaKey
+ * @param metaValue
+ */
+export async function modifyPostMetadata(
+	this: Editor,
+	postType: string,
+	postId: string,
+	metaKey: string,
+	metaValue: string
+) {
+	await this.page.waitForFunction( () => window?.wp?.data );
+
+	const parameters = {
+		postType,
+		postId,
+		metaKey,
+		metaValue,
+	};
+
+	await this.page.evaluate( ( _parameters ) => {
+		window.wp.data
+			.dispatch( 'core' )
+			.editEntityRecord(
+				'postType',
+				_parameters.postType,
+				_parameters.postId,
+				{
+					meta: { [ _parameters.metaKey ]: _parameters.metaValue },
+				}
+			);
+	}, parameters );
+}

packages/editor/src/components/entities-saved-states/entity-record-item.js

@@ -1,49 +1,78 @@
 /**
  * WordPress dependencies
  */
-import { CheckboxControl, PanelRow } from '@wordpress/components';
+import { Icon, CheckboxControl, Flex, PanelRow } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
+import { connection } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 export default function EntityRecordItem( { record, checked, onChange } ) {
 	const { name, kind, title, key } = record;
 
 	// Handle templates that might use default descriptive titles.
-	const entityRecordTitle = useSelect(
+	const { entityRecordTitle, hasPostMetaChanges } = useSelect(
 		( select ) => {
 			if ( 'postType' !== kind || 'wp_template' !== name ) {
-				return title;
+				return {
+					entityRecordTitle: title,
+					hasPostMetaChanges: unlock(
+						select( editorStore )
+					).hasPostMetaChanges(),
+				};
 			}
 
 			const template = select( coreStore ).getEditedEntityRecord(
 				kind,
 				name,
 				key
 			);
-			return select( editorStore ).__experimentalGetTemplateInfo(
-				template
-			).title;
+			return {
+				entityRecordTitle:
+					select( editorStore ).__experimentalGetTemplateInfo(
+						template
+					).title,
+				hasPostMetaChanges: unlock(
+					select( editorStore )
+				).hasPostMetaChanges(),
+			};
 		},
 		[ name, kind, title, key ]
 	);
 
 	return (
-		<PanelRow>
-			<CheckboxControl
-				__nextHasNoMarginBottom
-				label={
-					decodeEntities( entityRecordTitle ) || __( 'Untitled' )
-				}
-				checked={ checked }
-				onChange={ onChange }
-			/>
-		</PanelRow>
+		<>
+			<PanelRow>
+				<CheckboxControl
+					__nextHasNoMarginBottom
+					label={
+						decodeEntities( entityRecordTitle ) || __( 'Untitled' )
+					}
+					checked={ checked }
+					onChange={ onChange }
+				/>
+			</PanelRow>
+			{ hasPostMetaChanges && (
+				<PanelRow>
+					<Flex className="entities-saved-states__post-meta">
+						<Icon
+							className="entities-saved-states__connections-icon"
+							icon={ connection }
+							size={ 24 }
+						/>
+						<span className="entities-saved-states__bindings-text">
+							{ __( 'Post Meta.' ) }
+						</span>
+					</Flex>
+				</PanelRow>
+			) }
+		</>
 	);
 }

packages/editor/src/components/entities-saved-states/style.scss

@@ -37,3 +37,16 @@
 		height: $header-height + $border-width;
 	}
 }
+
+.entities-saved-states__post-meta {
+	margin-left: $grid-unit-30;
+	align-items: center;
+}
+
+.entities-saved-states__connections-icon {
+	flex-grow: 0;
+}
+
+.entities-saved-states__bindings-text {
+	flex-grow: 1;
+}

packages/editor/src/components/post-publish-button/index.js

@@ -11,6 +11,7 @@ import { compose } from '@wordpress/compose';
  */
 import PublishButtonLabel from './label';
 import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 const noop = () => {};
 
@@ -45,14 +46,24 @@ export class PostPublishButton extends Component {
 
 	createOnClick( callback ) {
 		return ( ...args ) => {
-			const { hasNonPostEntityChanges, setEntitiesSavedStatesCallback } =
-				this.props;
+			const {
+				hasNonPostEntityChanges,
+				hasPostMetaChanges,
+				setEntitiesSavedStatesCallback,
+				isPublished,
+			} = this.props;
 			// If a post with non-post entities is published, but the user
 			// elects to not save changes to the non-post entities, those
 			// entities will still be dirty when the Publish button is clicked.
 			// We also need to check that the `setEntitiesSavedStatesCallback`
 			// prop was passed. See https://github.com/WordPress/gutenberg/pull/37383
-			if ( hasNonPostEntityChanges && setEntitiesSavedStatesCallback ) {
+			//
+			// TODO: Explore how to manage `hasPostMetaChanges` and pre-publish workflow properly.
+			if (
+				( hasNonPostEntityChanges ||
+					( hasPostMetaChanges && isPublished ) ) &&
+				setEntitiesSavedStatesCallback
+			) {
 				// The modal for multiple entity saving will open,
 				// hold the callback for saving/publishing the post
 				// so that we can call it if the post entity is checked.
@@ -212,7 +223,8 @@ export default compose( [
 			isSavingNonPostEntityChanges,
 			getEditedPostAttribute,
 			getPostEdits,
-		} = select( editorStore );
+			hasPostMetaChanges,
+		} = unlock( select( editorStore ) );
 		return {
 			isSaving: isSavingPost(),
 			isAutoSaving: isAutosavingPost(),
@@ -229,6 +241,7 @@ export default compose( [
 			postStatus: getEditedPostAttribute( 'status' ),
 			postStatusHasChanged: getPostEdits()?.status,
 			hasNonPostEntityChanges: hasNonPostEntityChanges(),
+			hasPostMetaChanges: hasPostMetaChanges(),
 			isSavingNonPostEntityChanges: isSavingNonPostEntityChanges(),
 		};
 	} ),

packages/editor/src/components/save-publish-panels/index.js

@@ -14,6 +14,7 @@ import PostPublishPanel from '../post-publish-panel';
 import PluginPrePublishPanel from '../plugin-pre-publish-panel';
 import PluginPostPublishPanel from '../plugin-post-publish-panel';
 import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 const { Fill, Slot } = createSlotFill( 'ActionsPanel' );
 
@@ -27,12 +28,19 @@ export default function SavePublishPanels( {
 } ) {
 	const { closePublishSidebar, togglePublishSidebar } =
 		useDispatch( editorStore );
-	const { publishSidebarOpened, hasNonPostEntityChanges } = useSelect(
+	const {
+		publishSidebarOpened,
+		hasNonPostEntityChanges,
+		hasPostMetaChanges,
+	} = useSelect(
 		( select ) => ( {
 			publishSidebarOpened:
 				select( editorStore ).isPublishSidebarOpened(),
 			hasNonPostEntityChanges:
 				select( editorStore ).hasNonPostEntityChanges(),
+			hasPostMetaChanges: unlock(
+				select( editorStore )
+			).hasPostMetaChanges(),
 		} ),
 		[]
 	);
@@ -54,7 +62,7 @@ export default function SavePublishPanels( {
 				PostPublishExtension={ PluginPostPublishPanel.Slot }
 			/>
 		);
-	} else if ( hasNonPostEntityChanges ) {
+	} else if ( hasNonPostEntityChanges || hasPostMetaChanges ) {
 		unmountableContent = (
 			<div className="editor-layout__toggle-entities-saved-states-panel">
 				<Button

packages/editor/src/store/private-selectors.js

@@ -17,6 +17,7 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import {
 	getRenderingMode,
+	getCurrentPost,
 	__experimentalGetDefaultTemplatePartAreas,
 } from './selectors';
 import { TEMPLATE_PART_POST_TYPE } from './constants';
@@ -135,3 +136,23 @@ export const getCurrentTemplateTemplateParts = createRegistrySelector(
 		return getFilteredTemplatePartBlocks( blocks, templateParts );
 	}
 );
+
+/**
+ * Returns true if there are unsaved changes to the
+ * post's meta fields, and false otherwise.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {boolean} Whether there are edits or not in the meta fields.
+ */
+export const hasPostMetaChanges = createRegistrySelector(
+	( select ) => ( state ) => {
+		const { type, id } = getCurrentPost( state );
+		const edits = select( coreStore ).getEntityRecordNonTransientEdits(
+			'postType',
+			type,
+			id
+		);
+		return !! edits?.meta;
+	}
+);

test/e2e/specs/editor/various/publish-panel.spec.js

@@ -113,4 +113,59 @@ test.describe( 'Post publish panel', () => {
 			} )
 		).toBeFocused();
 	} );
+
+	test( 'should show panel and indicator when metadata has been modified', async ( {
+		admin,
+		editor,
+		page,
+	} ) => {
+		await admin.createNewPost( {
+			title: 'Test metadata changes with save panel',
+		} );
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: {
+				content: 'paragraph default content',
+				metadata: {
+					bindings: {
+						content: {
+							source: 'core/post-meta',
+							args: { key: 'text_custom_field' },
+						},
+					},
+				},
+			},
+		} );
+		const postId = await editor.publishPost();
+		await editor.modifyPostMetadata(
+			'post',
+			postId,
+			'text_custom_field',
+			'test value'
+		);
+		const editorTopBar = page.getByRole( 'region', {
+			name: 'Editor top bar',
+		} );
+
+		const saveButton = editorTopBar.getByRole( 'button', {
+			name: 'Save',
+			exact: true,
+		} );
+
+		await expect( saveButton ).toBeVisible();
+
+		await saveButton.click();
+
+		const publishPanel = page.getByRole( 'region', {
+			name: 'Editor publish',
+		} );
+
+		await expect( publishPanel ).toBeVisible();
+
+		const postMetaPanel = publishPanel.locator(
+			'.entities-saved-states__post-meta'
+		);
+
+		await expect( postMetaPanel ).toBeVisible();
+	} );
 } );