Site Editor - 'Preview Site' feature.

[Addison-Stavlo]

What problem does this address?

Currently in the site editor we are able to preview the current template or page. We are also able to navigate between our templates and pages and preview them individually. However, we cannot 'preview' the site as a whole.

What is your proposed solution?

A new feature to consider would be a 'site preview'. Whether this is a working preview inside the editor that lets the user navigate via navigation links, or another option under 'view' that just opens the front end of the site in an external window, some action to easily preview the site should be considered.

[paaljoachim]

I believe James @jameskoster is also been looking into the (pre)view feature. I just went through the FSE call for testing and at the end I was not able to (pre)view the web site. I expected to see a similar preview drop down as in the post editor. This can of course be especially modified for the Site Editor. But it would be nice to look at the feature for the post and site editor to look at how this can be improved.

[carolinan]

I did not understand why the preview/view in the site editor was changed from the behavior in the block editor. My preference would be to revert it to so that the previews behave the same.

[jameskoster]

I think there are two things to consider here:

• View modes – IE retaining full edit-ability but simulating devices (mobile etc).
• Live preview mode – this would essentially load the frontend, but still provide quick access back to edit mode.

They are separate exercises, but not mutually exclusive. I may want to see a live preview and simulate a mobile device without having to manually resize my browser window or open the browser inspector. Inversely I may want to concentrate on optimising my site for a mobile device, in which case I need the simulation and edit-ability together.

I can't find the issue(s), but in the past I believe a "Browse mode" (alongside Edit and Select) has been suggested for this live preview affordance. That still makes sense to me as it would allow users to quickly switch between viewing and editing, while retaining the Desktop / Tablet / Mobile view options.

[jameskoster]

Possibly a terrible idea, but sharing here to at least stimulate more creative juices...

I've seen other apps use a "Play button" to switch to "live mode" which can work quite well:

https://user-images.githubusercontent.com/846565/109496844-1c5e9180-7a89-11eb-93f4-bc721775f744.mp4

[mtias]

This seems like the same issue that was being discussed in https://github.com/WordPress/gutenberg/issues/23328.

@mtias suggested it might be nice to explore the idea of a third mode allowing the user to browse around their site within the editor.

[mattwiebe]

I haven't delved into the mechanics of this, but to actually preview things on the frontend of the site before saving will be a non-trivial task, particularly given the manner in which multiple entities (post content across multiple posts/template( part)s, options) can be edited simultaneously in the Site Editor.

Post previews were "easy" because the functionality already existed in the previous post editor. We would need a new, robust system to preview things in the same manner for the Site Editor. There is prior art on the options/theme mods side of things with the Customizer that we can likely leverage, but a whole new system would be required to orchestrate that and post content all in one place.

[bph]

From a mere user point of view, I'd appreciate if the block editor and site editor functionality of the Preview would be the same. I agree with @carolinan.

A reminder alert, that I haven't saved the current changes yet, would teach me that not all is viewable when unsaved.
That's learned knowledge from the block post editor as well as from the Classic editor. For the use case, that I actually did save all my changes, I would have an easy way, known way to preview things, and make sure what I did displays well on the front end, too.

At least for the Prototype/MVP phase, I am hoping for a "view in new tab" feature to return.

[paullacey78]

First time GitHub commenter here.... Go easy on me :)

So in my opinion, preview mode is a good idea. But the problem at the moment is that edit mode is a kind of preview mode, but it's not accurate at all. And it doesn't have to be.
If edit mode was mostly about structure - and wasn't even attempting to look even slightly like the end design - it was kind of like wireframe mode (Divi has this) and you can adjust settings and content.
You can see and example of this in this gif - watch and you will see the UI switch to wireframe mode. https://www.elegantthemes.com/blog/wp-content/uploads/2017/04/wireframe-mod-2-small-compressor.gif

But, you hypothetically then go to preview mode and see exactly what you are going to get. You can then for instance click on blocks still, but only edit content (words and pictures) when in this mode.

Check this video. This is Wallace inline editori (for Beaver Builder). When using this add-on you can only edit content - you can't move things around. It's so user friendly.
https://www.youtube.com/watch?v=v-rc88wadJU&feature=emb_title

I believe the current editor isn't good for a mixed preview wysiwyg, but if you were to take away the attempt to make it look a bit like the end result, and make it more like wireframe view then it might be less confusing. And preview mode is for seeing your result, and you can still make minor edits, but only to editorial elements (image swapping, text changes, amend video etc).

I hope this all made sense.

[annezazu]

Previewing the site came up as a major piece of feedback in the second round of testing for the FSE Outreach program. Please head to the linked post for specifics!

[paaljoachim]

For the very first iteration it would be nice to have preview/view look and feel (UI) identical to the post/page content preview drop down options. Making it possible to in some way view the full site. Then iterate from there.

[bph]

It's a learned behavior to double-check on the front end of the site via "Preview in New Tab" To make this available also for the Site editor, would mean the user will trust their capabilities and the process faster. Small wins.

[bobbingwide]

I don't use Preview at all. I Save and View. But after Saving I expect to be able to find a View button.

Since there is no View changes button appearing you have to go look for where you might expect to see it.

• It's not in the right panel area like when you've saved a post.
• It's not down the bottom, like when when you save a post - you know the slide up button that often goes away before your mouse gets there.
• It's not under the W on the top left.
• It's not under the More tools and options icon top right.

The secret is.

1. Click on More tools and options ( top right - avoiding the very similar button for the browser ).
2. Turn off Fullscreen mode.
3. Go all the way over to the left to choose the Visit site icon.

Alternatively. Keep another tab open. And try to remember not to choose the Site Edit button on the other tab.

Sorry if this comment appears flippant. I'm often having to explain all these shenanigans to others who haven't had as much experience using the block editor as me. I can't explain why the next control to choose is so far away from the previous one while at the same time too close to other controls I don't want them to use.

[bph]

I agree with @bobbingwide that a (pre-)View on the front-end shouldn't be something that is omitted with the site editor. The work-around he describes it no unfamiliar to me and many other users. Especially those of us you have listened to the promise of WYSIWYG before and were utterly disappointed, we need assurances, we need to see to believe. It's more a decade old reflex rather than something conscious. It will aggravate many people to make it conscious by omitting this little tool. What do you gain, though?

[carolinan]

This feedback was received during user testing at Yoast on April 9:

It’s confusing that the Preview option is still not a real preview, there’s all the extra padding from the block editor that distorts how the page would look to visitors. I don’t see an easy way to view the actual page as it renders on the frontend.

[hedgefield]

I agree, and I love @jameskoster's exploration, I was thinking something similar. It would be great if you could toggle from the FSE Edit mode into a true Preview mode, something that strips away all the FSE and block UI (and their extra padding!) so you can freely navigate your site like a visitor normally would. Currently FSE just isn't fully representative of what the site will look like once you save your changes, that's a problem.

[celloexpressions]

The customize API (not UI, necessarily) provides a good technical framework for this and already exists in WordPress core. It includes a customize_changeset post type that can simultaneously be used to enable drafts, scheduled changes, and public preview links for site-wide editing changes. The Customize Posts plugin provides prior art for integrating post edits/previews with this API.

Like the customizer on small screens, the site editor could toggle the site preview and edit modes with a toggle button.

[paaljoachim]

Something I do over and over again is use the Preview option to view a site on the frontend.

Something is missing here....

It would be very helpful to have the same Preview option as seen in the Post Editor included into the Site Editor Preview drop down. Not having it there cases frustration. As one would of course assume that the Preview drop down would contain the same options. As it is important to keep a consistency where we can between the Post Editor and the Site Editor. Not having "Preview in new tab" included might seem like a bug. Users will wonder how to easily preview the site on the frontend like any other post or page.

It seems like a nice and simple solution to just include the "Preview in new tab" also in the Site Editor. One can at a later time explore other options. What is important at this stage is to figure out how to make the experience as smooth as possible. So that people can use the knowledge they have from the Post Editor also in the Site Editor.

[mtias]

It seems like a nice and simple solution to just include the "Preview in new tab" also in the Site Editor.

It's not that simple — what would it do? There are many things you could do in the site editor that cannot be "previewed" in the traditional sense as you are making modifications across the site.

[jameskoster]

Yes I don't think a frontend preview makes sense whilst editing a template without any context.

It makes more sense when editing the "site", because that is when we have context.

Personally I think https://github.com/WordPress/gutenberg/issues/36207 would be a good idea to try here.

TLDR: When you click into the site editor, you see the site name / url in the top bar instead of the name of the template you are editing. That can serve as a pathway to view the frontend.

Edit: Granted, this wouldn't be a preview, but that is something we could consider adding as a separate feature if it makes sense.

[paaljoachim]

One very tricky thing going on here is the almost duplication of the Preview control from the Post Editor. Users will come to the Site Editor see the similar Preview control and believe it functions in the same way, and wonder what is wrong when the Preview in a new tab link is not seen.

I am thinking that we need to create a stronger diffraction between the Preview drop down in the Post Editor vs the Site Editor. Making a clear difference when people see it. I will think about it some more...

--

Edit: I am wondering if there should just be a View button (instead of the Preview drop down). Click it and go to Full Screen mode hiding any sidebars that might be visible. With View active have Icons + names for Desktop, Tablet and Mobile become visible.

[jordesign]

@Addison-Stavlo @jameskoster with the number of changes to the Site Editor interface since this issue was opened, and the fact we now have a 'view site' button in the Site Editor sidebar - are we ok to close this issue?

[jameskoster]

I think we're still missing a way to preview unsaved changes.

[dinhtungdu]

The site is made of templates, template parts, and synced patterns. They are all WordPress post types so they can use revision, which opens up the ability to preview unsaved changes by following the Core's approach for post preview:

• Create revision of editing templates/parts/synced patterns when a user clicks on the preview button.
• Generate a preview link with some parameters.
• Serve the templates/parts/synced patterns from the revisions instead of saved ones.

The missing puzzle here is how to determine which page is used for previewing each template. As the template doesn't necessarily have content using it. While editing a tag template, I'd expect to preview a tag page, not the home page as it is right now. But a site may or may not have a tag, or may have multiple tags. A tag may or may not have posts attached to it. I haven't had a clear answer to this question.

Plugin also has specific needs, like a merchant editing the Product Catalog template would want to preview the change on the Shop page like @jarekmorawski mentioned in https://github.com/woocommerce/woocommerce/issues/47877.

What do you think? Do we have any previous experiments on this topic? Is this direction worth exploring?