Site Editing: Add option to preview template

[annezazu]

Description

Currently, when using the template editing flow as described in this call for testing, there's not a way to preview the changes. However, if you edit the same template using the Site Editor, an option is available to preview the template on desktop/mobile/tablet.

Step-by-step reproduction instructions

Please list the steps needed to reproduce the bug. For example:

1. Install Gutenberg 9.7+ and a FSE ready theme.
2. Go to Pages > Add New
3. Make some changes to the page > Save Draft or Publish.
4. Use the option to edit the template to switch into template editing mode in the post settings section.
5. Make some changes to the template.
6. See that there's no option to preview the changes.

Expected behaviour

I expect there to be a way to preview the changes similar to the ability to do so when using the Site Editor experience.

Actual behaviour

There's no way to preview the changes

Screenshots or screen recording (optional)

Here's a quick recording showing the two experiences: https://cloudup.com/cPYwQ1FAA_p

Page > Template editing:

Site Editor > Selecting a template:

WordPress information

• WordPress version: 5.6
• Gutenberg version: 9.7.2
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? Yes, TT1 blocks

[annezazu]

Pulling in some feedback from a recent WP Tavern post that feels both relevant and reflective of wider feedback I've seen:

There were so many inconsistencies between the site editor and the front end that there is little point in listing them all. Spacing was grossly off. I generally see that as a theme issue. I spent much of my time in trial-and-error mode, making an adjustment in the editor and refreshing to see the front-end result. Rinse. Repeat.

[priethor]

Moreover, the "Preview in Desktop/Tablet/Mobile" doesn't show a real preview of the Frontend and its stored HTML but only resizes the Editor to different sizes, causing the experience commented in WP Tavern. Such experience could be improved with a "Preview Site" or "Browse Mode" as described in #29398 and #23328, respectively.

[hanneslsm]

Can this be prioritised again, please? Changing something in the editor (no matter if it's the title, a text, an image, the publishing date or the template) should lead to a change in the preview. Since this issue is from 2021 and the screen recording a bit out of date, please also see https://github.com/WordPress/gutenberg/issues/50016

[priethor]

Now that content editing is possible in the Site Editor, the logical next step is to consolidate template editing there, which would supersede the template editing mode in general. I don't think this is actionable and we can close it, as it will be solved by such consolidation; what do you think, @annezazu?

[annezazu]

I disagree. I think the ability to change templates and then preview those changes is still needed. Right now, there isn't an option to swap templates when editing pages in the Site Editor: https://github.com/WordPress/gutenberg/pull/51477 When that's implemented, afaik, this same problem will remain. Until you save changes, you won't be able to preview. Am I missing anything?

[priethor]

I don't think you are. I think it's likely more actionable to make these improvements in the Site Editor and consolidate all template editing there (even when entering template editing mode from the post editor) than iterating the template editor itself. Let's keep it open then until we have more clarity on where template editing from the post editor is going to go :)

[cometgrrl]

+1. I would really love to be able to preview changes before saving a template.

[annezazu]

Noting that you can now preview a template when writing a post as of WP 6.6.1:

https://github.com/user-attachments/assets/e30821db-16ab-4b2f-8d78-8909ef2bed8c

Here's an example where I use the template editor to change the placement of the feature image and it properly shows the changes when previewing in the editor. However, if I try to preview in a new tab, the changes aren't reflected:

https://github.com/user-attachments/assets/2684fc87-3d1b-4799-a61e-e635b8ce8c2c

This leaves us in a better state! I wonder what's needed for the final step of having the template changes previewable on the front end.

[richtabor]

Noting that you can now preview a template when writing a post as of WP 6.6.1:

Could be interesting to potentially expose that option in the preview dropdown, rather than buried in the template setting.

[richtabor]

I wonder what's needed for the final step of having the template changes previewable on the front end.

Is this technically possible? Would you just preview any relative content?

There were so many inconsistencies between the site editor and the front end that there is little point in listing them all. Spacing was grossly off. I generally see that as a theme issue. I spent much of my time in trial-and-error mode, making an adjustment in the editor and refreshing to see the front-end result. Rinse. Repeat.

This is less and less prevalent. I suspect the idea of previewing changes before their "published" itself is becoming obsolete.

[annezazu]

Anecdotal but it’s most definitely not obsolete for me.

[richtabor]

It's not obsolete today, but certainly on that path.

I'm curious if we should invest effort into previewing templates, which is unlikely to be a clear implementation + experience.