[wp-trac] [WordPress Trac] #37661: A New Experience for Discovering, Installing, and Previewing Themes in the Customizer

[WordPress Trac]

#37661: A New Experience for Discovering, Installing, and Previewing Themes in the
Customizer
-------------------------------------+-------------------------------------
 Reporter:  celloexpressions         |       Owner:  westonruter
     Type:  feature request          |      Status:  reviewing
 Priority:  high                     |   Milestone:  4.9
Component:  Customize                |     Version:  4.2
 Severity:  normal                   |  Resolution:
 Keywords:  has-screenshots has-     |     Focuses:  ui, accessibility,
  user-testing has-ux-feedback has-  |  javascript
  patch needs-testing                |
-------------------------------------+-------------------------------------

Comment (by folletto):

 > Uploading themes. I'd like to propose working through that in #40278
 after this is initially committed so that we can iterate a bit on that
 aspect of the design (in the next week or so). I'm not convinced that it
 should be part of the installed section header, but that may be the best
 option. Wondering if @melchoyce has other ideas here as well.

 The way the design is built makes working on uploading later.

 An alternative way to do it would be to use a normal menu "Upload theme >"
 white control (the ones there are in the main Customizer menu). I feel it
 would create a bit more disconnection and would look too much like a third
 option, hence the approach suggested above, but if that's preferred we can
 try. I'd however like to try first the button on the control.

 > It doesn't feel quite right to fake the radio buttons for the sections.
 I kept the checkmark for now, but we can probably come up with something
 else that works better.

 Why? It's semantically correct: the user is filtering one or the other.
 Using the "fake" checkmark seems less effective than the standard option
 control. Can we try to build first as in the design, and review from
 there?

 > Feature filter headers currently use the core styling rather than
 introducing the bottom border and respacing them as the mockup shows (we
 should look at changing this everywhere in core).

 That's ok. I used @melchoyce's design exploration for the headers as a
 starting point, but there's no need to do it right now — we can align this
 later. I agree to start with the same WP Admin core styling.

 > Feature filter "features" list has been condensed to eliminate less-
 useful options to better emphasize the more-useful options.
 > Reasons for removal include [...]

 How did you determine this? Can you share the data that you used to make
 this selection?
 Regardless, I would advise to not change the filter number, label or else
 in this ticket. It should be a discussion on its own, separate, to be done
 after this piece gets wrapped up.

 ---

 I did a quick test, here's the checklist of changes I spotted that I'd
 make:

 1. Use full adjective+noun form for labels for clarity: "Installed themes"
 and "WordPress.org themes".
 2. Use the option form controls for clarity.
 3. Remove "(0)" to "Filter themes" button when there are no themes
 selected.
 4. Align the right edge of "Filter themes" button to the right edge of the
 theme thumbnails below.
 5. The three-columns filters snap to one-column at 1120px, while there's
 still plenty of space. Let's make them snap to one-column later at 980px.
 6. The Filter Themes dropdown should push the themes down, not overlay
 them. This to ensure that the themes are visible while the filters update,
 also to allow the users to interact with the full form without closing it
 every time just to see the first entry.
 7. Trying to use it made me wonder of the "Live Preview" label on the
 action button. It doesn't seem correct in this context. The wording here
 is tricky because it's not "activating", but it's "being previewed in
 customizer and will get activated only if the user saves changes in
 customizer". I'm thinking something like to "Try Theme" or "Pick Theme".
 Even just "Preview" I think it would work better, given we are inside the
 customizer. Can anyone think of other alternatives?
 8. When a theme is being "Previewed" there needs to be an option to revert
 back to the original theme. But currently the original theme is shown in
 the list as any other, and the one being previewed is marked as "Current".
 I think we can improve something here to make sure the user can easily
 pick again the original theme, and be also assured it's not really
 "Current" but being tried out in customizer. An option would be to mark
 the the theme currently "Live" (in production) with a button that says
 "Revert" instead of "Preview", while the label of the theme active in
 customizer should be instead of "Current:", "Previewing:". Makes sense?
 9. The "Setting up live preview" message (given it needs to have later a
 language aligned with the button change in points 7-8 above): can we move
 the text below the spinner indicator, and use a darker gray to enhance
 readability?
 10. When something is typed in the search box it currently hides all the
 themes and show the spinner. Would be possible to keep the themes visible
 but maybe with an "alpha" channel and visualize the spinner near the
 search box? It's not a big deal, but feels a bit jumpy otherwise.
 11. Also, the spinner doesn't show up for "Installed themes", just for
 "WordPress.org themes".
 12. I'm not 100% sure about this, but I think the search should be
 preserved between the two options: if I search for "twenty" in "Installed
 themes", when I switch to "WordPress.org themes" it should preserve the
 "twenty" search, and vice-versa. Makes sense?

 As for mobile — I expected to behave similarly to i3, but I can mock
 something specific.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/37661#comment:181>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform