Preview dropdown: Include "Show template" toggle, and persist on refresh

[jasmussen]

The post and page editors default to an "abstracted view", where a title block is added, and everything from the Single template except the Content block is stripped out. Currently the way you toggle between show template and abstracted view, is here, in Template > Show template:

This is a valuable tool to switch between the views, yet it is very hidden there. By elevating this control to live in the view dropdown, and persisting on a refresh, it would give more prominence to the option. Mockup:

Note as well in the above mockup, there's an added "template type" icon in the document title interface. This used to be present towards the center near the title. Here it is added back, as a small indicator to help surface the differential in editing visualization. No icon: abstracted. Template template type, full preview.

[andrewserong]

Thanks for writing this up! I really like the idea of exposing it in the View menu — that feels like both a natural place and a good one for discoverability 👍

and persisting on a refresh

Does that mean we'd want this to also be a preference that can be set in the block editor settings? Or only for the current session? I like the idea of making it configurable so folks can set the editor to just the way they like it.

FYI @tellthemachines who I was chatting with about this feature.

[tellthemachines]

I'll have a go at a PR for this!

[andrewserong]

Nice one, thanks for picking this up! 🚀

[jasmussen]

I added a small note on an icon added to the document title. Potentially this can be extracted separate, but it's a useful addition.

[tellthemachines]

I just put up a draft for this as linked above. I haven't removed the "Show template" option from the post sidebar where it currently lives; should I do so?

My other question is about the persistance. Currently, "Show template" is disabled by default in the post editor and enabled by default in the Pages section of the site editor.

Given that the other options available inside the preview dropdown, namely Tablet and Mobile, don't persist on refresh, mightn't it be awkward or unexpected for "Show template" to do so?

[andrewserong]

I haven't removed the "Show template" option from the post sidebar where it currently lives; should I do so?

I'd vote for leaving it in the post sidebar so that it lives in both places.

Given that the other options available inside the preview dropdown, namely Tablet and Mobile, don't persist on refresh, mightn't it be awkward or unexpected for "Show template" to do so?

Good question. If we're undecided, I suppose we could always leave the persistence side of things to a follow-up PR?

[tellthemachines]

Follow-up question: for the document bar icon, assuming I'm using the BlockIcon component to render it, what's the best way to change its colour? By default it comes in black.

[andrewserong]

Follow-up question: for the document bar icon, assuming I'm using the BlockIcon component to render it, what's the best way to change its colour? By default it comes in black.

BlockIcon accepts a className as a parameter, so I'd probably give it a custom class name and attach whatever colour rules to that:

gutenberg/packages/block-editor/src/components/block-icon/index.js

Line 13 in c566725

function BlockIcon( { icon, showColors = false, className, context } ) {

Here's an example elsewhere in Gutenberg:

gutenberg/packages/patterns/src/components/style.scss

Lines 53 to 55 in cd77dd9

	.patterns-pattern-overrides-toolbar-indicator .patterns-pattern-overrides-toolbar-indicator-icon.has-colors svg {
	fill: var(--wp-block-synced-color);
	}

gutenberg/packages/patterns/src/components/pattern-overrides-block-controls.js

Lines 93 to 97 in 86a3bc9

	<BlockIcon
	icon={ icon }
	className="patterns-pattern-overrides-toolbar-indicator-icon"
	showColors
	/>

[andrewserong]

Also, just to add — an icon was recently removed from the DocumentBar in #65170, so we'll likely want to be careful adding in an icon again and make sure it's working nicely across different breakpoints. It's possible something from that PR might be useful if we're adding it back in again, though the design in this issue is different to what we had before.

I notice the icon in the design takes up the same position as the Back button, too, so if this part gets complex that could also potentially be something to look at in a different PR if it winds up getting complex.

[tellthemachines]

Also, just to add — an icon was recently removed from the DocumentBar in #65170, so we'll likely want to be careful adding in an icon again and make sure it's working nicely across different breakpoints.

The icon we're adding here occurs only in post/page editor when template preview is switched on, so it won't conflict with the Back button, because that only shows when actually editing the template.

In terms of responsive behaviour it seems to be looking ok where it occurs, however, I think we have a bigger problem. This is the view of the page editor on my mobile emulator:

This is reproducible on Gutenberg trunk, but fortunately not in 6.7 RC1 😅

[andrewserong]

This is the view of the page editor on my mobile emulator:

The page editor appears to be working okay for me with Gutenberg trunk, via Chrome, Safari, and the iOS simulator that ships with Xcode:

Do you mind opening an issue if you've got reproduction steps?

[tellthemachines]

Update: I suspect #66431 caused it due to removing legacy admin styles while admin markup remains in place 😬

I'll comment on it.

[andrewserong]

Update: I suspect #66431 caused it due to removing legacy admin styles while admin markup remains in place 😬

Good catch, thanks! I think I forgot to git pull on trunk before testing 🤦

I see it now! 😱

[tellthemachines]

Ok I've added the icon and made sure it's hidden on small screens so it doesn't end up looking squished. Due to the above bug the only way to test it is to either hide or delete the adminmenuwrap element. In any case, #66514 is now ready for review!

[jasmussen]

Figma, for anyone tinkering.

[stokesman]

I like the general idea of making "Show template" more readily accessible (and persistent). Out of any of the options so far, I lean toward the dropdown menu in the Document bar as shared by James in the linked PR #66514 (comment).

Besides that, I think perhaps the easiest way to have it readily accessible would be a command. I get that’s not equivalent but at least for some folks I could imagine it being the most preferable.

[jasmussen]

I get that’s not equivalent but at least for some folks I could imagine it being the most preferable.

You mean a command bar addition? Yes, anything you can find in ellipsis menus or dropdowns, on a particular screen you're seeing in that moment, should ideally be available as a command.