Site Editor: Provide Context and Direct Links to Fix Empty Templates

[mrfoxtalbot]

What problem does this address?

If a user deletes all the blocks in their templates, they will see:

Despite our best efforts to lock template blocks and warn users when they are about to delete them, we still see users routinely getting stuck there. They are unsure why their site is showing black or how to fix it.

What is your proposed solution?

We should provide basic context so users can understand what happened and include direct links to help them fix it.

The Message

Let's explain that the templates necessary to display their content for the current view/template were deleted via the Site Editor.

This template is used to display X (single posts, archives, search results... etc). It looks like the template was deleted, you can restore to via Appearance > Editor > Templates > Template's Name. You can also click on the "Edit Site" link on the tool bar at the top to access this template directly (maybe include a screenshot!?)

The Links

Adding some (of all!) of these direct links would be useful:

• Edit this template: A link to edit the current template. This would be a bit redundant since we already have the "Edit Site" link on the top toolbar and would not be particularly helpful to inexperienced users since setting up a theme template from scratch is challenging.
• Reset this template A link to reset the template to its initial estate. This is probably the fastest and most effective way to get most users "out of the weeds. The drawback: They would lose any customizations they made to the template before deleting it.
• Restore a previous version of this template: A link to edit the revisions on that template. This option would be a good balance between the previous two.

We could also include more than one option!

This enhancement could be relevant in the context of:

• Site Editor & Templates Roadmap #41241

[mtias]

There's probably something more refined we can do here that connects better with the new template flows vs blank canvas start, including zoom out, starter layouts, etc.

[mrfoxtalbot]

My proposed solution was mostly to illustrate the problem but let's explore more ambitious and elegant solutions, for sure!

What did you have in mind, @mtias?

[ariel-maidana]

Suggestion: we could add a "Reset template" button to that page, which would trigger a confirmation message explaining the implications of the reset. Clicking on the confirmation button should do two things:

• reset the template.
• reload the page the user was trying to see originally.

[seifeldinio]

To address this, here are two options:

Alert Message: Show an alert indicating the template might be deleted or empty, with buttons to Reset Template or Edit Template.

Mockup:

Card Component: Use a Card component to present the same message and actions more visually.

Mockup:

Would love to hear your thoughts!

[richtabor]

@annezazu do we know if this is common? I wonder if we are smarter with where "Edit site" call to actions are placed, if this would be less of a problem.

[annezazu]

This was noted as a common blocker for end users on WordPress.com that "creates a lot of confusion and support requests" from @mrfoxtalbot :) Curious to hear from more folks.

[mrfoxtalbot]

do we know if this is common?

@richtabor this is extremely common. I personally talk to users facing this problem at least 2-3 times a week on dotcom's live chat support. You can see plenty of examples in the dotcom forums. I'm sharing a link to the dotcom forums because the search results are more relevant but this is happening in the dotorg forums too:

• https://wordpress.org/support/topic/cannot-find-my-main-page
• https://wordpress.org/support/topic/error-message-empty-template-index

I even found an example on Reddit :S

[richtabor]

I think we could come up with a simple empty state, where you can edit reset, pick from an existing template, or edit the empty template.

[mtias]

Yeah, it seems we can try the modal route as a simple start. We need to ensure it only renders on first load so you can actually have a blank template to start building with if you dismiss.

[mrfoxtalbot]

We need to ensure it only renders on first load so you can actually have a blank template to start building with if you dismiss.

@mtias , this "Empty Template: {Template Name}" shows in the public site, not in the editor. I do not see the "have a blank template to start building" part being relevant or helpful here.

In other words, if an admin faces a blank (empty) template when they visit their site, this "escape hatch" I propose should always be visible somewhere.

[mtias]

@mrfoxtalbot yeah, both things are a problem. A fully blank template should be caught while editing, and there should also be a pathway on the front for logged in / editor if it still occurs.

[vcanales]

Implementing a warning when the template is rendered requires a Core change rather than a change in Gutenberg.

I've created a track ticket and a PR with a proposed alert when rendering a blank template. The warning is only shown to logged-in users and points them through the button to the Site Editor page, where they can edit or Reset the template.

Notice that the warning page uses theme styles for buttons. This is the easiest way I found to avoid using more CSS for this alert.

Ticket, for discussion: https://core.trac.wordpress.org/ticket/62053
PR: WordPress/wordpress-develop#7354

[mrfoxtalbot]

Thank you for working on this, @vcanales.

I'd like to polish how the message is worded and discuss the possibility of adding a secondary "reset template" link/button. The current "Edit template" option might not be super helpful for newbies.

[vcanales]

I'd like to polish how the message is worded and discuss the possibility of adding a secondary "reset template" link/button.

I looked into this, but directly resetting the template requires an API call which would make the modification more difficult to achieve and possibly too involved; the leaner we keep this change, the more likely it is to pass reviews later.

Could we compromise and add a "Reset Template" button on the screen where the user is prompted to select a Pattern? This is where users would land when they click the Edit Template button on the front end.

Something I like about this approach is that the Reset Template button could be useful beyond the problem we're trying to solve here.

[mrfoxtalbot]

I looked into this, but directly resetting the template requires an API call which would make the modification more difficult to achieve and possibly too involved; the leaner we keep this change, the more likely it is to pass reviews later.

Understood! A lean solution is a lot better than no solution :)

Could we compromise and add a "Reset Template" button on the screen where the user is prompted to select a Pattern? This is where users would land when they click the Edit Template button on the front end.

Sure, let's give users a simpler option. The big "Edit Template" button looks great. Just one more request, could we modify the text so it includes a link to the documentation? https://wordpress.org/documentation/article/site-editor/ ? I ask because there are instructions on how to reset a template there.

Something like this:

This page is blank because your theme's template is currently empty. It may have been accidentally deleted, but don't worry! You can easily reset or edit this template in the site editor.

Thank you, Vicente!

[mikachan]

Thanks @mrfoxtalbot! I've applied those changes to the wordpress-develop PR here: WordPress/wordpress-develop@5d23d4c.

[richtabor]

Could we compromise and add a "Reset Template" button on the screen where the user is prompted to select a Pattern? This is where users would land when they click the Edit Template button on the front end.

I think this would be confusing for when you're creating a template and see this modal for the first time.

I shared feedback on WordPress/wordpress-develop#7354. I like the approach, let's just simplify it a bit.

[mikachan]

Thanks for all the feedback on this! We can close this issue now that WordPress/wordpress-develop#7354 has been committed to Core.

[annezazu]

Thank you so much for pushing this forward!