TemplatePanel: Fixed a problem that when a new template is created, t…

…he template is not displayed in the select box. (#32744)
WordPress · Jun 22, 2021 · 4daab2c · 4daab2c
1 parent 4f04e82
commit 4daab2c
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 11 deletions.
diff --git a/packages/e2e-tests/specs/experiments/post-editor-template-mode.test.js b/packages/e2e-tests/specs/experiments/post-editor-template-mode.test.js
@@ -15,7 +15,14 @@ const openSidebarPanelWithTitle = async ( title ) => {
 	const panel = await page.waitForXPath(
 		`//div[contains(@class,"edit-post-sidebar")]//button[@class="components-button components-panel__body-toggle"][contains(text(),"${ title }")]`
 	);
-	await panel.click();
+
+	const expanded = await page.evaluate(
+		( element ) => element.getAttribute( 'aria-expanded' ),
+		panel
+	);
+	if ( expanded === 'false' ) {
+		await panel.click();
+	}
 };
 
 const disableTemplateWelcomeGuide = async () => {

diff --git a/packages/edit-post/src/components/sidebar/template/index.js b/packages/edit-post/src/components/sidebar/template/index.js
@@ -1,12 +1,13 @@
 /**
  * External dependencies
  */
-import { partial, isEmpty, map } from 'lodash';
+import { partial, isEmpty, map, fromPairs } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
 import { PanelBody, SelectControl } from '@wordpress/components';
 import { store as editorStore } from '@wordpress/editor';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -29,6 +30,7 @@ export function TemplatePanel() {
 		isOpened,
 		selectedTemplate,
 		availableTemplates,
+		fetchedTemplates,
 		isViewable,
 		template,
 		supportsTemplateMode,
@@ -43,24 +45,43 @@ export function TemplatePanel() {
 			getEditorSettings,
 			getCurrentPostType,
 		} = select( editorStore );
-		const { getPostType } = select( coreStore );
+		const { getPostType, getEntityRecords } = select( coreStore );
 		const _isViewable =
 			getPostType( getCurrentPostType() )?.viewable ?? false;
 		const _supportsTemplateMode =
 			select( editorStore ).getEditorSettings().supportsTemplateMode &&
 			_isViewable;
 
+		const wpTemplates = getEntityRecords( 'postType', 'wp_template', {
+			per_page: -1,
+		} );
+
+		const newAvailableTemplates = fromPairs(
+			( wpTemplates || [] ).map( ( { slug, title } ) => [
+				slug,
+				title.rendered,
+			] )
+		);
+
 		return {
 			isEnabled: isEditorPanelEnabled( PANEL_NAME ),
 			isOpened: isEditorPanelOpened( PANEL_NAME ),
 			selectedTemplate: getEditedPostAttribute( 'template' ),
 			availableTemplates: getEditorSettings().availableTemplates,
+			fetchedTemplates: newAvailableTemplates,
 			template: _supportsTemplateMode && getEditedPostTemplate(),
 			isViewable: _isViewable,
 			supportsTemplateMode: _supportsTemplateMode,
 		};
 	}, [] );
 
+	const templates = useMemo( () => {
+		return {
+			...availableTemplates,
+			...fetchedTemplates,
+		};
+	}, [ availableTemplates, fetchedTemplates ] );
+
 	const { toggleEditorPanelOpened } = useDispatch( editPostStore );
 	const { editPost } = useDispatch( editorStore );
 
@@ -92,19 +113,20 @@ export function TemplatePanel() {
 			<SelectControl
 				hideLabelFromVision
 				label={ __( 'Template:' ) }
-				value={ selectedTemplate }
+				value={
+					Object.keys( templates ).includes( selectedTemplate )
+						? selectedTemplate
+						: ''
+				}
 				onChange={ ( templateSlug ) => {
 					editPost( {
 						template: templateSlug || '',
 					} );
 				} }
-				options={ map(
-					availableTemplates,
-					( templateName, templateSlug ) => ( {
-						value: templateSlug,
-						label: templateName,
-					} )
-				) }
+				options={ map( templates, ( templateName, templateSlug ) => ( {
+					value: templateSlug,
+					label: templateName,
+				} ) ) }
 			/>
 			<PostTemplateActions />
 		</PanelBody>