Here's a simple design that would enable a user to toggle the template into view whilst editing a post or page:

Re-labelling the "Preview" button to "View" seems sensible since the options therein are more than mere previews. Whether you're in desktop, tablet, or mobile view, and regardless of the template is visible or not, you are always able to directly manipulate the canvas contents. This subtle label change will create greater flexibility in terms of what sort of options we might put in this menu in the future. Another option that might live here could be entity switching while editing a template, which is also a requirement of #27814.

I'd love to hear any input on the animations here, I'm not sure how feasible it would be to relocate the post content this way? It would however seem beneficial to do so if possible, so that you always keep track of what is post content and what is part of the template as it comes in to view. Or perhaps there are other ways to do this that do not involve animation?

The animation is nice but I think its doing a lot of heavy lifting to primarily communicate what is happening. I think it would be clearer if it was more in context with the template dropdown. This way, the user can quickly make the connection of picking a template for their post and seeing what the post will look like in that template. It will also make the animation a nice addition instead of a must have.

I think it would be perfectly reasonable to try this without the animation to begin with. I may be entirely unfounded in my assumption that keeping visual track of the content is important in this flow.

I think the animation is important and aids in the flow. I was only wary of solely relying on it to communicate something.

Gotcha. It may be worth ideating on a more generic loading state, as the template itself would need to be fully loaded before an animation like above could be executed.

I shared my opinion on a different PR but I wanted to just add it here. Personally I feel this is not necessary because it's not very different from the edit mode itself, the distinction of the number of modes we're adding can become too difficult to understand for the user. We'd need ways to differentiate visually the different modes and sometimes the best way to do something is to avoid doing it :P

I would agree that we probably don't need it yet.

But I still see a use case for composing a post with the template visible around it. Essentially a preview that doesn't engage the template editor. It will be helpful for understanding how things like the Featured Image fit in with the content.

I believe this use case will become most apparent for less visually elaborate content executions. WooCommerce products are a good example – the display of the product data will likely be 90% driven by the template, with the content only making up a small section of that view:

In this case having the scope of the full template visible on the canvas will be particularly useful.

We can definitely revisit this later, or perhaps not at all :D

In some situations a user may wish to zoom out to see how the contents of the post they are editing will sit inside the broader page template.

In my case this would be "Always". They will always want to "zoom out" and see the contents of the post in the page template, with all the styles, layout elements and graphical adornments. That's my clients base expectation, and they are annoyed when they don't get it.

Case Study.
The clients I create sites for are decidedly non-technical, and also forgetful about instructions. They are companies with between 10 and 50 employees. The person tasked with updating the website is perhaps an intern, guided by a PDF instruction sheet. The person perhaps has very very limited technical aptitude.

What they tend to ask for is WYSIWYG : If the content is going to be displayed in a template they want to edit it in that same template. I get bitter complaints about it "looking different in the editor, I can't tell what it looks like"

The context menu item View/Layout/Show Template will mean nothing to them. It's dark arts sorcery talk.

What they expect as the standard experience is:

1: Create New Post
2: In Gutenberg page editor they see the default page styling, background graphics, sections and layout reflected in the editor, with the key elements such as the headline LOCKED in position, but editable, likewise the hero, body text, and any graphic elements, pull quotes, all LOCKED in position.
3: They edit the text areas, and put the pullquotes in where instructed to.
4: They decide they want this article to use the Magazine Layout which has been designed for them
5: They use the Template / "Layout" selector (To many clients the Design "Layout" is the way it's express, often being from a print mentality)
6: They use the Layout selector to choose "Magazine Layout" and the content is now displayed using a new template. The client can see in the editor that there are now prompts for sub-titles, credits, and more image boxes in position, and they fill those in.

This is a very loose description of how most clients edit a page, or wish to.

At the moment to deliver this I'm using a selection of hacks, content injections and workarounds.