Templates: Apply template for new post only (#9288)

* Templates: Apply template for new post only

* Testing: Update snapshot name for single template block removal

packages/editor/src/store/effects.js

@@ -122,11 +122,12 @@ export default {
 		const state = getState();
 		const template = getTemplate( state );
 		const templateLock = getTemplateLock( state );
+		const isNewPost = post.status === 'auto-draft';
 
 		// Parse content as blocks
 		let blocks;
 		let isValidTemplate = true;
-		if ( post.content.raw ) {
+		if ( ! isNewPost ) {
 			blocks = parse( post.content.raw );
 
 			// Unlocked templates are considered always valid because they act as default values only.
@@ -145,7 +146,7 @@ export default {
 
 		// Include auto draft title in edits while not flagging post as dirty
 		const edits = {};
-		if ( post.status === 'auto-draft' ) {
+		if ( isNewPost ) {
 			edits.title = post.title.raw;
 		}
 

test/e2e/specs/__snapshots__/templates.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Using a CPT with a predefined template Should add a custom post types with a predefined template 1`] = `
+exports[`templates Using a CPT with a predefined template Should add a custom post types with a predefined template 1`] = `
 "<!-- wp:image -->
 <figure class=\\"wp-block-image\\"><img alt=\\"\\"/></figure>
 <!-- /wp:image -->
@@ -27,3 +27,29 @@ exports[`Using a CPT with a predefined template Should add a custom post types w
 <!-- /wp:column --></div>
 <!-- /wp:columns -->"
 `;
+
+exports[`templates Using a CPT with a predefined template Should respect user edits to not re-apply template after save (full delete) 1`] = `""`;
+
+exports[`templates Using a CPT with a predefined template Should respect user edits to not re-apply template after save (single block removal) 1`] = `
+"<!-- wp:paragraph {\\"placeholder\\":\\"Add a book description\\"} -->
+<p></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:quote -->
+<blockquote class=\\"wp-block-quote\\"></blockquote>
+<!-- /wp:quote -->
+
+<!-- wp:columns -->
+<div class=\\"wp-block-columns has-2-columns\\"><!-- wp:column -->
+<div class=\\"wp-block-column\\"><!-- wp:image -->
+<figure class=\\"wp-block-image\\"><img alt=\\"\\"/></figure>
+<!-- /wp:image --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class=\\"wp-block-column\\"><!-- wp:paragraph {\\"placeholder\\":\\"Add a inner paragraph\\"} -->
+<p></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;

test/e2e/specs/nux.test.js

@@ -5,6 +5,7 @@ import {
 	clickBlockAppender,
 	clickOnMoreMenuItem,
 	newPost,
+	saveDraft,
 } from '../support/utils';
 
 describe( 'New User Experience (NUX)', () => {
@@ -164,10 +165,7 @@ describe( 'New User Experience (NUX)', () => {
 		await page.keyboard.type( 'Post title' );
 		await clickBlockAppender();
 		await page.keyboard.type( 'Post content goes here.' );
-		// Save the post as a draft.
-		await page.click( '.editor-post-save-draft' );
-
-		await page.waitForSelector( '.editor-post-saved-state.is-saved' );
+		await saveDraft();
 
 		// Refresh the page; tips should be disabled.
 		await page.reload();

test/e2e/specs/templates.test.js

@@ -1,25 +1,56 @@
 /**
  * Internal dependencies
  */
-import { clickOnMoreMenuItem, newPost } from '../support/utils';
+import {
+	META_KEY,
+	newPost,
+	getEditedPostContent,
+	saveDraft,
+	pressWithModifier,
+} from '../support/utils';
 import { activatePlugin, deactivatePlugin } from '../support/plugins';
 
-describe( 'Using a CPT with a predefined template', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-plugin-templates' );
-		await newPost( { postType: 'book' } );
-	} );
+describe( 'templates', () => {
+	describe( 'Using a CPT with a predefined template', () => {
+		beforeAll( async () => {
+			await activatePlugin( 'gutenberg-test-plugin-templates' );
+		} );
 
-	afterAll( async () => {
-		await deactivatePlugin( 'gutenberg-test-plugin-templates' );
-	} );
+		beforeEach( async () => {
+			await newPost( { postType: 'book' } );
+		} );
+
+		afterAll( async () => {
+			await deactivatePlugin( 'gutenberg-test-plugin-templates' );
+		} );
+
+		it( 'Should add a custom post types with a predefined template', async () => {
+			expect( await getEditedPostContent() ).toMatchSnapshot();
+		} );
+
+		it( 'Should respect user edits to not re-apply template after save (single block removal)', async () => {
+			// Remove a block from the template to verify that it's not
+			// re-added after saving and reloading the editor.
+			await page.click( '.editor-post-title__input' );
+			await page.keyboard.press( 'ArrowDown' );
+			await page.keyboard.press( 'Backspace' );
+			await saveDraft();
+			await page.reload();
+
+			expect( await getEditedPostContent() ).toMatchSnapshot();
+		} );
 
-	it( 'Should add a custom post types with a predefined template', async () => {
-		//Switch to Code Editor to check HTML output
-		await clickOnMoreMenuItem( 'Code Editor' );
+		it( 'Should respect user edits to not re-apply template after save (full delete)', async () => {
+			// Remove all blocks from the template to verify that they're not
+			// re-added after saving and reloading the editor.
+			await page.type( '.editor-post-title__input', 'My Empty Book' );
+			await page.keyboard.press( 'ArrowDown' );
+			await pressWithModifier( META_KEY, 'A' );
+			await page.keyboard.press( 'Backspace' );
+			await saveDraft();
+			await page.reload();
 
-		// Assert that the post already contains the template defined blocks
-		const textEditorContent = await page.$eval( '.editor-post-text-editor', ( element ) => element.value );
-		expect( textEditorContent ).toMatchSnapshot();
+			expect( await getEditedPostContent() ).toMatchSnapshot();
+		} );
 	} );
 } );

test/e2e/support/utils.js

@@ -294,6 +294,17 @@ export async function publishPost() {
 	return page.waitForSelector( '.components-notice.is-success' );
 }
 
+/**
+ * Saves the post as a draft, resolving once the request is complete (once the
+ * "Saved" indicator is displayed).
+ *
+ * @return {Promise} Promise resolving when draft save is complete.
+ */
+export async function saveDraft() {
+	await page.click( '.editor-post-save-draft' );
+	return page.waitForSelector( '.editor-post-saved-state.is-saved' );
+}
+
 /**
  * Given the clientId of a block, selects the block on the editor.
  *