Gutenberg: Show Preview of Templates and template Parts

[mtias]

It'd be interesting to render a _preview_ when hovering templates or template parts for context before switching.

It might get tricky to load them dynamically, but it's worth exploring how it might work. (It might actually function as a _preload_ for switching templates.)

[shaunandrews]

[johnstonphilip]

I love this, image previews are definitely much needed. Though I wonder if using hover as an action is generally a bad idea for accessibility, and also for mobile. Would these previews be available in any non-hover-based context?

[shaunandrews]

Would these previews be available in any non-hover-based context?

Its not shown in my (quick) mockup, but I'd imagine if you used the keyboard to navigate the items in the list that we could show the preview. So both :hover and :focus could trigger the preview.

[johnstonphilip]

Good point!

I am curious, is the general consensus about, say, a person with inaccurate/shaky hands that they should use the keyboard instead of the mouse? Or is it a goal to make moused-things as-easy-as-possible so they can use a mouse if they want to?

For :focus, This also wouldn't be available on mobile, is that right?

[johnstonphilip]

P.S. I think that area for This template will be used by default for all of the pages on your site is awesome. Anything like that to help reduce the overhead of learning about template hierarchy is probably going to be really important, I think.

[karmatosed]

I think as a v1 the hover and show @shaunandrews you added works for me. There could be some placing negotiation of that hover, but it feels like worth getting into code.

[shaunandrews]

I was originally trying to associate the preview with the item in the list by adjusting the vertical position. In reality, I think this is probably a bad idea; I think it could make it difficult to quickly _scrub_ through the list and compare the previews.

Instead, lets keep the position of the preview fixed as you hover items in the list:

[dwolfe]

To offer a contrasting opinion, I think the preview and the description are relevant and useful, but I wonder if showing it while hovering over items in a dropdown is the best place for it. What do you think about not showing previews here, but adding a "View all templates" link to the dropdown, and moving the thumbnail and description to a page where we have more space and control? (NOTE: We're already moving towards having a home for templates in #20477)

[shaunandrews]

What do you think about not showing previews here, but adding a "View all templates" link to the dropdown, and moving the thumbnail and description to a page where we have more space and control?

I explored something just like that this morning:

[mtias]

I like this last one. The previews on hover / focus is still a separate thing for quick selection. We already have it for the block inserter so there's nothing novel in this paradigm, just more consistency.