[wp-meta] [Making WordPress.org] #6059: Display style variations for block themes in the theme directory

[Making WordPress.org]

#6059: Display style variations for block themes in the theme directory
-----------------------------+---------------------
 Reporter:  poena            |       Owner:  (none)
     Type:  enhancement      |      Status:  new
 Priority:  normal           |   Milestone:
Component:  Theme Directory  |  Resolution:
 Keywords:                   |
-----------------------------+---------------------

Comment (by Joen):

 Excellent work, this is a substantial step forward. If it launches as is,
 it will showcase the diversity and community contributions to
 TwentyTwentyThree in a substantially better way, and it is a strength for
 all block themes. Thank you!

 > Do we need a state on the global styles card that denotes it's the one
 being previewed?

 Yes, good catch. Can you just show the border in black? Focus remains the
 thicker blue, but the resting 1px goes from light gray to black which
 should be sufficient contrast to show an active state. See also the gif
 I'll add after this comment for what the block editor does.

 > Should we append the name of the style variation somewhere? ... they are
 kind of neat.
 > Maybe overlayed on the thumbnail?

 After this comment I'll upload the most recent trunk version of how
 variations are shown in the block editor, which changed just recently to
 show the name on hover and select. I think we can probably mimic this here
 as well, what do you think?

 > You can't get back to the original thumbnail, is that a problem?

 Can you show the thumbnail when you click the default style variation
 card? Otherwise, no strong opinion.



 ----

 In the category of nitpicks — not blockers, but good to address at some
 point:

 * Instead of "Loading..." can we show a spinner? Whichever spinner is used
 across the site at this point, but eventually can update that spinner
 across the site with the simple half-circle used in the block editor.
 * The metrics of the style card are slightly off. I've attached a
 comparison card between the block editor and what's shipping here, it's
 little things: 118x74px dimensions, 18px gap between text and dots, 30px
 font size, 8px gap between the two dots. The card in the block editor is
 actually scaled down from original metrics so the numbers are a bit fuzzy
 and it doesn't have to be perfect, but we can probably get a bit closer
 with a tiny bit of massaging.

 Hope that was useful!

-- 
Ticket URL: <https://meta.trac.wordpress.org/ticket/6059#comment:18>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org