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

[tellthemachines]

Description

When using the template switcher in the post editor sidebar to switch from a custom template back to the default one, there is a brief flash of layout reflow but apart from that no visual indication that the change was successful. Neither the template name in the sidebar or the layout actually changes.

Step-by-step reproduction instructions

1. In a block theme with more than one post (single) template, create a post and set it to use a non-default template.
2. Save and reload the page.
3. Try switching the template back to the default.

Screenshots, screen recording, code snippet

Environment info

I noticed this happening on the latest Gutenberg trunk, but it's also reproducible on WP 6.1.1 with no plugins enabled so it's not a regression from the last release.

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[ndiego]

Hmm, I see something different in 6.2 Beta 4 with Gutenberg tunk and without Gutenberg.

template-switching.mov

[tellthemachines]

@ndiego this issue only occurs when switching from a custom template to the default one, and you have to reload the page in between changes. So if your page is already set to a custom template and you go in and switch it to default, you should be able to reproduce the issue on both Core and Gutenberg.

[ndiego]

Ah I see, thanks for the clarification. I can now confirm as well.

[ndiego]

I moved to the 6.2 Board. It would be great to get a fix in place, but if we run out of time, I am comfortable punting given the issue has existed in 6.1.

[talldan]

Did some debugging of this. It looks like when selecting a default template the post editor falls back to using the __experimentalGetTemplateForLink selector:

gutenberg/packages/core-data/src/selectors.ts

Lines 1155 to 1177 in ee4a3ad

	export function __experimentalGetTemplateForLink(
	state: State,
	link: string
	): Optional< ET.Updatable< ET.WpTemplate > > | null {
	const records = getEntityRecords< ET.WpTemplate >(
	state,
	'postType',
	'wp_template',
	{
	'find-template': link,
	}
	);
	if ( records?.length ) {
	return getEditedEntityRecord< ET.WpTemplate >(
	state,
	'postType',
	'wp_template',
	records[ 0 ].id
	);
	}
	return null;
	}

It fetches the template for the post from the server. But the change back to the default template that the user just made hasn't been saved yet. The server is outdated, so the post switches back to showing the previous selection. Wow, this is a horrible bug.

The easiest fix might be to save the post as soon as the template is switched from the dropdown so that server is up to date.

There might be other options, but I'm not too familiar with the code.

[Mamaduka]

This is an old issue and probably a duplicate of #41449. There were a few attempts to fix it, but nothing straightforward to include this late in the cycle.

@ndiego, let's punt this for the next minor or major release.