search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.54k stars 4.21k forks source link

Clarify what the template icon in the document title bar means #67163

Open jameskoster opened 5 days ago

jameskoster commented 5 days ago

Image

An icon appears on the document title bar based on the 'Show template' setting. But if you're unfamiliar with that setting it's unclear what the icon means, and even if you are familiar with it, the icon feels very disconnected from the setting.

Another issue is that every other icon in the top bar is interactive, suggesting this one would be too.

Potential solutions

Ideally the icon is somehow better connected to the setting. The smallest change could be to surface a tooltip on hover to say that the template is visible. However, I suspect that will lead users to want to interact, which leads me to a suggestion in the original PR; make the icon the entry point for editing this setting.

Image

When toggled on the button would be isPressed.

Alternatively we might use different icons to reflect the current setting, similar to toolbar menus for things like text alignment:

Image

In the future this menu could contain other template related actions like edit, switch, create new.

cc @WordPress/gutenberg-design

hanneslsm commented 4 days ago

I feel like this would be just another place to hide settings. I like that 'Show template' is in the "View" settings since GB 19.7. Perfect place with fitting naming.

hanneslsm commented 4 days ago

Do we actually still need the icon as an indicator if the template is shown? We also don't have an icon for Spotlight or Distraction free mode. Brings me to the suggestion to rather utilize the "View" Modal more and also move the Spotlight and Distraction mode to it. If anything feels "weird" with the view, people then know to check there - no additional icons needed.

jameskoster commented 3 days ago

Do we actually still need the icon as an indicator if the template is shown?

Good point. In most cases the canvas should make it clear whether the template is visible or not. Maybe the simplest solution is just to remove the icon :)

t-hamano commented 2 days ago

Personally, I lean towards removing the icon from the document title bar for now.

cc @tellthemachines : Because this icon was added by #66514

jasmussen commented 12 hours ago

The icon exists primarily to be an extra affordance to indicate: you are now seeing the template. Shown in this GIF, toggling on/off the "Show template" option for the abstracted editors (Posts > Add new/Pages > Add new):

Image

It's possible there's a better design for it, but I wouldn't remove it until we have one.

carolinan commented 8 hours ago

Maybe it is the "desktop" icon that needs to change to the template icon when the template is visible. To me, this desktop icon is unrelated to the action of previewing the template. +1 to removing the icon.

t-hamano commented 7 hours ago

Maybe it is the "desktop" icon that needs to change to the template icon when the template is visible.

The Show Template setting is available in all views, Desktop, Tabled, and Mobile. Therefore, I think it will be difficult to integrate it with the device icon.

jameskoster commented 5 hours ago

An alternative to removing the icon could be to show a tooltip; "Template visible" or similar. Then at least users can interpret what it means.

hanneslsm commented 5 hours ago

An alternative to removing the icon could be to show a tooltip; "Template visible" or similar. Then at least users can interpret what it means.

i think if an icon needs a tooltip as an explanation it loses the actual purpose of being an icon

It's possible there's a better design for it, but I wouldn't remove it until we have one.

The "Show template" option is a pretty good design imo. The checkmark also indicates that the option is toggled on.