Edit Site: New template creation flow. (#22586)

* Edit Site: New template creation flow. * Block Editor: Fix block sync race condition. * Block Editor: Fix tests. * Fix tests. * Edit Site: Fix error when selecting "All Posts". * Edit Site: Add home icon to page switcher.
WordPress · May 28, 2020 · 30cd85a · 30cd85a
1 parent fdeb10a
commit 30cd85a
Show file tree

Hide file tree

Showing 14 changed files with 268 additions and 270 deletions.
diff --git a/lib/compat.php b/lib/compat.php
@@ -211,9 +211,9 @@ function gutenberg_render_block_with_assigned_block_context( $pre_render, $parse
 		'query'    => array( 'categoryIds' => array() ),
 	);
 
-	if ( isset( $wp_query->tax_query->queried_terms['category']['terms'] ) ) {
-		foreach ( $wp_query->tax_query->queried_terms['category']['terms'] as $category_id ) {
-			$context['query']['categoryIds'][] = $category_id;
+	if ( isset( $wp_query->tax_query->queried_terms['category'] ) ) {
+		foreach ( $wp_query->tax_query->queried_terms['category']['terms'] as $category_slug_or_id ) {
+			$context['query']['categoryIds'][] = 'slug' === $wp_query->tax_query->queried_terms['category']['field'] ? get_cat_ID( $category_slug_or_id ) : $category_slug_or_id;
 		}
 	}
 

diff --git a/lib/edit-site-page.php b/lib/edit-site-page.php
@@ -174,11 +174,7 @@ function gutenberg_edit_site_init( $hook ) {
 		'context' => 'page' === $settings['showOnFront'] ? array(
 			'postType' => 'page',
 			'postId'   => get_option( 'page_on_front' ),
-		) : array(
-			'query' => array(
-				'categoryIds' => array(),
-			),
-		),
+		) : array(),
 	);
 
 	// This is so other parts of the code can hook their own settings.

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/block-editor/src/components/provider/test/use-block-sync.js b/packages/block-editor/src/components/provider/test/use-block-sync.js
@@ -217,7 +217,6 @@ describe( 'useBlockSync hook', () => {
 			create(
 				<TestWrapper
 					setRegistry={ setRegistry }
-					clientId="test"
 					value={ value1 }
 					onChange={ onChange }
 					onInput={ onInput }
@@ -257,7 +256,6 @@ describe( 'useBlockSync hook', () => {
 			create(
 				<TestWrapper
 					setRegistry={ setRegistry }
-					clientId="test"
 					value={ value1 }
 					onChange={ onChange }
 					onInput={ onInput }
@@ -343,7 +341,6 @@ describe( 'useBlockSync hook', () => {
 			create(
 				<TestWrapper
 					setRegistry={ setRegistry }
-					clientId="test"
 					value={ value1 }
 					onChange={ onChange }
 					onInput={ onInput }

diff --git a/packages/block-editor/src/components/provider/use-block-sync.js b/packages/block-editor/src/components/provider/use-block-sync.js
@@ -80,7 +80,7 @@ export default function useBlockSync( {
 		setHasControlledInnerBlocks,
 		__unstableMarkNextChangeAsNotPersistent,
 	} = registry.dispatch( 'core/block-editor' );
-	const { getBlocks } = registry.select( 'core/block-editor' );
+	const { getBlockName, getBlocks } = registry.select( 'core/block-editor' );
 
 	const pendingChanges = useRef( { incoming: null, outgoing: [] } );
 
@@ -119,6 +119,16 @@ export default function useBlockSync( {
 		let previousAreBlocksDifferent = false;
 
 		const unsubscribe = registry.subscribe( () => {
+			// Sometimes, when changing block lists, lingering subscriptions
+			// might trigger before they are cleaned up. If the block for which
+			// the subscription runs is no longer in the store, this would clear
+			// its parent entity's block list. To avoid this, we bail out if
+			// the subscription is triggering for a block (`clientId !== null`)
+			// and its block name can't be found because it's not on the list.
+			// (`getBlockName( clientId ) === null`).
+			if ( clientId !== null && getBlockName( clientId ) === null )
+				return;
+
 			const newIsPersistent = isLastBlockChangePersistent();
 
 			const newBlocks = getBlocks( clientId );

diff --git a/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js b/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js
@@ -6,7 +6,12 @@ import { kebabCase } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { insertBlock, visitAdminPage } from '@wordpress/e2e-test-utils';
+import {
+	insertBlock,
+	visitAdminPage,
+	createNewPost,
+	publishPost,
+} from '@wordpress/e2e-test-utils';
 import { addQueryArgs } from '@wordpress/url';
 
 /**
@@ -42,30 +47,6 @@ const getTemplateDropdownElement = async ( itemName ) => {
 	return item;
 };
 
-const createTemplate = async ( templateName = 'Test Template' ) => {
-	// Click the "new template" button.
-	const createNewTemplateButton = await getTemplateDropdownElement( 'New' );
-	await createNewTemplateButton.click();
-	await page.waitForSelector( '.components-modal__frame' );
-
-	// Create a new template with the given name.
-	await page.keyboard.press( 'Tab' );
-	await page.keyboard.press( 'Tab' );
-	await page.keyboard.type( templateName );
-	const [ addTemplateButton ] = await page.$x(
-		'//div[contains(@class, "components-modal__frame")]//button[contains(., "Add")]'
-	);
-	await addTemplateButton.click();
-
-	// Wait for the site editor to load the new template.
-	await page.waitForXPath(
-		`//button[contains(@class, "components-dropdown-menu__toggle")][contains(text(), "${ kebabCase(
-			templateName
-		) }")]`,
-		{ timeout: 3000 }
-	);
-};
-
 const createTemplatePart = async (
 	templatePartName = 'test-template-part',
 	themeName = 'test-theme',
@@ -107,16 +88,23 @@ const openEntitySavePanel = async () => {
 	// Open the entity save panel if it is not already open.
 	try {
 		await page.waitForSelector( '.entities-saved-states__panel', {
-			timeout: 100,
+			timeout: 500,
 		} );
 	} catch {
 		try {
 			await page.click(
 				'.edit-site-save-button__button[aria-disabled=false]',
-				{ timeout: 100 }
+				{ timeout: 500 }
 			);
 		} catch {
-			return false; // Not dirty because the button is disabled.
+			try {
+				await page.click(
+					'.editor-post-publish-button__button.has-changes-dot',
+					{ timeout: 500 }
+				);
+			} catch {
+				return false; // Not dirty because the button is disabled.
+			}
 		}
 		await page.waitForSelector( '.entities-saved-states__panel' );
 	}
@@ -136,13 +124,6 @@ const openEntitySavePanel = async () => {
 	return true;
 };
 
-const clickBreadcrumbItem = async ( item ) => {
-	const [ breadcrumbItem ] = await page.$x(
-		`//button[contains(@class, "block-editor-block-breadcrumb__button")][contains(text(), "${ item }")]`
-	);
-	await breadcrumbItem.click();
-};
-
 const isEntityDirty = async ( name ) => {
 	const isOpen = await openEntitySavePanel();
 	if ( ! isOpen ) {
@@ -151,7 +132,7 @@ const isEntityDirty = async ( name ) => {
 	try {
 		await page.waitForXPath(
 			`//label[@class="components-checkbox-control__label"]//strong[contains(text(),"${ name }")]`,
-			{ timeout: 500 }
+			{ timeout: 1000 }
 		);
 		return true;
 	} catch {}
@@ -169,8 +150,9 @@ const removeErrorMocks = () => {
 };
 
 describe( 'Multi-entity editor states', () => {
+	// Setup & Teardown.
+	const templateName = 'Front Page';
 	const templatePartName = 'Test Template Part Name Edit';
-	const templateName = 'Test Template Name Edit';
 	const nestedTPName = 'Test Nested Template Part Name Edit';
 
 	useExperimentalFeatures( [
@@ -215,8 +197,13 @@ describe( 'Multi-entity editor states', () => {
 
 	describe( 'Multi-entity edit', () => {
 		beforeAll( async () => {
-			await visitSiteEditor();
-			await createTemplate( templateName );
+			await trashExistingPosts( 'wp_template' );
+			await trashExistingPosts( 'wp_template_part' );
+			await createNewPost( {
+				postType: 'wp_template',
+				title: kebabCase( templateName ),
+			} );
+			await publishPost();
 			await createTemplatePart( templatePartName );
 			await editTemplatePart( [
 				'Default template part test text.',
@@ -228,6 +215,7 @@ describe( 'Multi-entity editor states', () => {
 				true
 			);
 			await saveAllEntities();
+			await visitSiteEditor();
 			removeErrorMocks();
 		} );
 
@@ -238,7 +226,6 @@ describe( 'Multi-entity editor states', () => {
 
 		it( 'should only dirty the parent entity when editing the parent', async () => {
 			// Clear selection so that the block is not added to the template part.
-			await clickBreadcrumbItem( 'Document' );
 			await insertBlock( 'Paragraph' );
 
 			// Add changes to the main parent entity.
@@ -270,19 +257,5 @@ describe( 'Multi-entity editor states', () => {
 			expect( await isEntityDirty( templatePartName ) ).toBe( false );
 			expect( await isEntityDirty( nestedTPName ) ).toBe( true );
 		} );
-
-		it( 'should not dirty any entities when hovering over template preview', async () => {
-			const mainTemplateButton = await getTemplateDropdownElement(
-				kebabCase( templateName )
-			);
-			// Hover and wait for template/template part to load.
-			await mainTemplateButton.hover();
-			await page.waitForSelector(
-				'.edit-site-template-switcher__template-preview .wp-block[data-type="core/template-part"]'
-			);
-			expect( await isEntityDirty( templateName ) ).toBe( false );
-			expect( await isEntityDirty( templatePartName ) ).toBe( false );
-			expect( await isEntityDirty( nestedTPName ) ).toBe( false );
-		} );
 	} );
 } );
diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json
@@ -36,7 +36,6 @@
 		"@wordpress/editor": "file:../editor",
 		"@wordpress/element": "file:../element",
 		"@wordpress/hooks": "file:../hooks",
-		"@wordpress/html-entities": "file:../html-entities",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",
 		"@wordpress/interface": "file:../interface",

diff --git a/packages/edit-site/src/components/add-template/index.js b/packages/edit-site/src/components/add-template/index.js