Fix visual indication of switch to default template in the post editor

packages/edit-post/src/store/selectors.js

@@ -594,12 +594,27 @@ export const getEditedPostTemplate = createRegistrySelector(
 		}
 
 		const post = select( editorStore ).getCurrentPost();
-		if ( post.link ) {
-			return select( coreStore ).__experimentalGetTemplateForLink(
-				post.link
-			);
+		let slugToCheck;
+		// In `draft` status we might not have a slug available, so we use the `single`
+		// post type templates slug(ex page, single-post, single-product etc..).
+		// Pages do not need the `single` prefix in the slug to be prioritized
+		// through template hierarchy.
+		if ( post.slug ) {
+			slugToCheck =
+				post.type === 'page'
+					? `${ post.type }-${ post.slug }`
+					: `single-${ post.type }-${ post.slug }`;
+		} else {
+			slugToCheck =
+				post.type === 'page' ? 'page' : `single-${ post.type }`;
 		}
-
-		return null;
+		const defaultTemplateId = select( coreStore ).getDefaultTemplateId( {
+			slug: slugToCheck,
+		} );
+		return select( coreStore ).getEditedEntityRecord(
+			'postType',
+			'wp_template',
+			defaultTemplateId
+		);
 	}
 );

packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js

@@ -128,10 +128,25 @@ function useResolveEditedEntityAndContext( { postId, postType } ) {
 						return currentTemplate.id;
 					}
 				}
-
 				// If no template is assigned, use the default template.
+				let slugToCheck;
+				// In `draft` status we might not have a slug available, so we use the `single`
+				// post type templates slug(ex page, single-post, single-product etc..).
+				// Pages do not need the `single` prefix in the slug to be prioritized
+				// through template hierarchy.
+				if ( editedEntity.slug ) {
+					slugToCheck =
+						postTypeToResolve === 'page'
+							? `${ postTypeToResolve }-${ editedEntity.slug }`
+							: `single-${ postTypeToResolve }-${ editedEntity.slug }`;
+				} else {
+					slugToCheck =
+						postTypeToResolve === 'page'
+							? 'page'
+							: `single-${ postTypeToResolve }`;
+				}
 				return getDefaultTemplateId( {
-					slug: `${ postTypeToResolve }-${ editedEntity?.slug }`,
+					slug: slugToCheck,
 				} );
 			}
 

test/e2e/specs/editor/various/post-editor-template-mode.spec.js

@@ -70,6 +70,42 @@ test.describe( 'Post Editor Template mode', () => {
 		).toBeVisible();
 	} );
 
+	test( 'Swap templates and proper template resolution when switching to default template', async ( {
+		editor,
+		page,
+		requestUtils,
+		postEditorTemplateMode,
+	} ) => {
+		await requestUtils.activateTheme( 'emptytheme' );
+		await postEditorTemplateMode.createPostAndSaveDraft();
+		await page.reload();
+		await postEditorTemplateMode.disableTemplateWelcomeGuide();
+		await postEditorTemplateMode.openTemplatePopover();
+		// Swap to a custom template, save and reload.
+		await page
+			.getByRole( 'menuitem', {
+				name: 'Swap template',
+			} )
+			.click();
+		await page
+			.getByRole( 'option', {
+				name: 'Custom',
+			} )
+			.click();
+		await editor.saveDraft();
+		await page.reload();
+		// Swap to the default template.
+		await postEditorTemplateMode.openTemplatePopover();
+		await page
+			.getByRole( 'menuitem', {
+				name: 'Use default template',
+			} )
+			.click();
+		await expect(
+			page.getByRole( 'button', { name: 'Template options' } )
+		).toHaveText( 'Single Entries' );
+	} );
+
 	test( 'Allow creating custom block templates in classic themes', async ( {
 		editor,
 		page,