Edit Site: Avoid dirtying un-customized templates on first load. (#22876

)

* Template Part: Don't set post ID until the first edit.

* Entities Saved States: Call the save callback before actually saving.

* Edit Site: Set new templates' status and title right before saving instead of on load.

* Template Part: Don't set status on mount.

* Template Part: Update tests.

packages/block-library/src/template-part/edit/index.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { useRef, useEffect } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { EntityProvider } from '@wordpress/core-data';
 
 /**
@@ -14,6 +15,7 @@ import TemplatePartPlaceholder from './placeholder';
 export default function TemplatePartEdit( {
 	attributes: { postId: _postId, slug, theme },
 	setAttributes,
+	clientId,
 } ) {
 	const initialPostId = useRef( _postId );
 	const initialSlug = useRef( slug );
@@ -22,17 +24,32 @@ export default function TemplatePartEdit( {
 	// Resolve the post ID if not set, and load its post.
 	const postId = useTemplatePartPost( _postId, slug, theme );
 
-	// Set the post ID, once found, so that edits persist.
+	// Set the post ID, once found, so that edits persist,
+	// but wait until the third inner blocks change,
+	// because the first 2 are just the template part
+	// content loading.
+	const innerBlocks = useSelect(
+		( select ) => select( 'core/block-editor' ).getBlocks( clientId ),
+		[ clientId ]
+	);
+	const { editEntityRecord } = useDispatch( 'core' );
+	const blockChanges = useRef( 0 );
 	useEffect( () => {
+		if ( blockChanges.current < 4 ) blockChanges.current++;
+
 		if (
+			blockChanges.current === 3 &&
 			( initialPostId.current === undefined ||
 				initialPostId.current === null ) &&
 			postId !== undefined &&
 			postId !== null
 		) {
 			setAttributes( { postId } );
+			editEntityRecord( 'postType', 'wp_template_part', postId, {
+				status: 'publish',
+			} );
 		}
-	}, [ postId ] );
+	}, [ innerBlocks ] );
 
 	if ( postId ) {
 		// Part of a template file, post ID already resolved.

packages/block-library/src/template-part/edit/inner-blocks.js

@@ -7,10 +7,7 @@ import { InnerBlocks } from '@wordpress/block-editor';
 export default function TemplatePartInnerBlocks() {
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',
-		'wp_template_part',
-		{
-			initialEdits: { status: 'publish' },
-		}
+		'wp_template_part'
 	);
 	return (
 		<InnerBlocks

packages/e2e-tests/specs/experiments/multi-entity-editing.test.js

@@ -167,12 +167,6 @@ describe( 'Multi-entity editor states', () => {
 
 	it( 'should not display any dirty entities when loading the site editor', async () => {
 		await visitSiteEditor();
-		expect( await openEntitySavePanel() ).toBe( true );
-
-		await saveAllEntities();
-		await visitSiteEditor();
-
-		// Unable to open the save panel implies that no entities are dirty.
 		expect( await openEntitySavePanel() ).toBe( false );
 	} );
 

packages/e2e-tests/specs/experiments/template-part.test.js

@@ -54,16 +54,8 @@ describe( 'Template Part', () => {
 			await insertBlock( 'Paragraph' );
 			await page.keyboard.type( 'Header Template Part 123' );
 
-			// Save it, without saving the front page template.
+			// Save it.
 			await page.click( '.edit-site-save-button__button' );
-			const reviewChangesButton = await page.waitForSelector(
-				'.entities-saved-states__review-changes-button'
-			);
-			await reviewChangesButton.click();
-			const [ frontPageCheckbox ] = await page.$x(
-				'//strong[contains(text(),"Front Page")]/../preceding-sibling::span/input'
-			);
-			await frontPageCheckbox.click();
 			await page.click( '.editor-entities-saved-states__save-button' );
 			await page.waitForSelector(
 				'.edit-site-save-button__button:not(.is-busy)'

packages/edit-site/src/components/editor/index.js

@@ -57,7 +57,8 @@ function Editor() {
 		templateType,
 		page,
 		template,
-	} = useSelect( ( select ) => {
+		select,
+	} = useSelect( ( _select ) => {
 		const {
 			isFeatureActive,
 			__experimentalGetPreviewDeviceType,
@@ -66,28 +67,30 @@ function Editor() {
 			getTemplatePartId,
 			getTemplateType,
 			getPage,
-		} = select( 'core/edit-site' );
+		} = _select( 'core/edit-site' );
 		const _templateId = getTemplateId();
 		const _templatePartId = getTemplatePartId();
 		const _templateType = getTemplateType();
 		return {
 			isFullscreenActive: isFeatureActive( 'fullscreenMode' ),
 			deviceType: __experimentalGetPreviewDeviceType(),
-			sidebarIsOpened: !! select(
+			sidebarIsOpened: !! _select(
 				'core/interface'
 			).getActiveComplementaryArea( 'core/edit-site' ),
 			settings: getSettings(),
 			templateId: _templateId,
 			templatePartId: _templatePartId,
 			templateType: _templateType,
 			page: getPage(),
-			template: select( 'core' ).getEntityRecord(
+			template: _select( 'core' ).getEntityRecord(
 				'postType',
 				_templateType,
 				_templateType === 'wp_template' ? _templateId : _templatePartId
 			),
+			select: _select,
 		};
 	}, [] );
+	const { editEntityRecord } = useDispatch( 'core' );
 	const { setPage } = useDispatch( 'core/edit-site' );
 
 	const inlineStyles = useResizeCanvas( deviceType );
@@ -101,8 +104,20 @@ function Editor() {
 		[]
 	);
 	const closeEntitiesSavedStates = useCallback(
-		() => setIsEntitiesSavedStatesOpen( false ),
-		[]
+		( entitiesToSave ) => {
+			if ( entitiesToSave ) {
+				const { getEditedEntityRecord } = select( 'core' );
+				entitiesToSave.forEach( ( { kind, name, key } ) => {
+					const record = getEditedEntityRecord( kind, name, key );
+					editEntityRecord( kind, name, key, {
+						status: 'publish',
+						title: record.slug,
+					} );
+				} );
+			}
+			setIsEntitiesSavedStatesOpen( false );
+		},
+		[ select ]
 	);
 
 	// Set default query for misplaced Query Loop blocks, and

packages/edit-site/src/components/save-button/index.js

@@ -6,14 +6,12 @@ import { some } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { useEntityProp } from '@wordpress/core-data';
-import { useEffect } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 export default function SaveButton( { openEntitiesSavedStates } ) {
-	const { isDirty, isSaving, templateType } = useSelect( ( select ) => {
+	const { isDirty, isSaving } = useSelect( ( select ) => {
 		const {
 			__experimentalGetDirtyEntityRecords,
 			isSavingEntityRecord,
@@ -28,16 +26,6 @@ export default function SaveButton( { openEntitiesSavedStates } ) {
 		};
 	} );
 
-	const [ , setStatus ] = useEntityProp( 'postType', templateType, 'status' );
-	const [ , setTitle ] = useEntityProp( 'postType', templateType, 'title' );
-	const [ slug ] = useEntityProp( 'postType', templateType, 'slug' );
-
-	// Publish template if not done yet.
-	useEffect( () => {
-		setStatus( 'publish' );
-		setTitle( slug );
-	}, [ slug ] );
-
 	const disabled = ! isDirty || isSaving;
 	return (
 		<>

packages/editor/src/components/entities-saved-states/index.js

@@ -107,11 +107,11 @@ export default function EntitiesSavedStates( { isOpen, close } ) {
 			}
 		);
 
+		close( entitiesToSave );
+
 		entitiesToSave.forEach( ( { kind, name, key } ) => {
 			saveEditedEntityRecord( kind, name, key );
 		} );
-
-		close( entitiesToSave );
 	};
 
 	const [ isReviewing, setIsReviewing ] = useState( false );