Write something about Preview in the Site Editor vs content / template editor

[bobbingwide]

From Carolina's comment https://github.com/WordPress/gutenberg/issues/29398#issuecomment-817695028

It’s confusing that the Preview option is still not a real preview...

I was just creating a custom template for a page. After saving the page I viewed the site and realised that what I was looking at was nothing like what I saw in the the Preview.

Note: This was the Preview in the normal block editor.

Viewing the page in the front end the custom template is used. Here I've used the inspector to preview display on an iPad.

In order to see the Preview using the correct template for the page I needed to:

1. Open Site Editor
2. Choose Toggle Navigation
3. Choose Page Templates
4. Choose Page Template hierarchy
5. Choose Navigation again
6. Choose Templates
7. Choose Theme
8. Choose Pages
9. Search for the page
10. Choose Template Hierarchy
11. Toggle settings off
12. Then choose Preview

And the results are subtly different from the actual front end.

[bobbingwide]

I also noted that my custom HTML block looked a bit better if it was also switched into Preview mode. I found this had already been suggested. See https://github.com/WordPress/gutenberg/issues/23328

The subtle differences were:

• Unwanted padding and margins.

Part of the difference between the Preview and View is that the site's style.css is not loaded in Preview. Perhaps this can be improved by using editor styles.

• Navigation blocks are different
• Shortcodes are not expanded

The 12 step process was quite a faff. It's much easier to save and view.