[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-patch needs-      |  javascript
  testing ux-feedback                |
-------------------------------------+-------------------------------------

Comment (by folletto):

 > The background colors behind the theme filters and the theme list feel a
 little awkward to me

 The new set of colors feels balanced. I'm not 100% convinced by making
 gray also the bar with search and filters — I feel white makes the
 distinction clearer — but I see the point, so if there's a preference to
 keep it gray, I'm good.

 > What if we showed your current theme (maybe condensed down to a smaller
 preview) above the Installed/.org filters?

 Worth an exploration. :)

 > It should now always sync the search bar, even if it's empty.

 Seems better, but I think there's a subtle bug still in there. Try this:

 1. Open the Customizer, see "Installed themes"
 2. Write a search that returns no theme, i.e. "dfdfdf"
 3. Switch to "WordPress.org themes", there still be no results
 4. Switch back to "Installed themes", clear the text field, all the
 installed themes should appear
 5. Switch back to "Wordpress.org themes", the list is empty

 Can you confirm?

 > My current thought is that it should be a separate section header, but
 that the actual uploading should take place in the preview area

 I agree there's a question to clear on what to show in the "preview" area
 if we go ahead with the i5 design. That said, we could also simply turn
 the component in a foldable one, so the page stays on whatever page it is,
 and the upload component is on the side.

 Another alternative approach is that when in the local view, the FIRST
 item isn't a theme, but an upload box.

 If we want instead to have upload in the "preview" area I need to explore
 it, I'm not sure about it.

 > One other note - can we live with the icons/animation on mobile for now,
 or do we want to try to go to the arrows? That's been a very tricky UI to
 implement in the past but we can try here.

 Currently it's odd because I see one item pre-selected, and it's not
 expected that clicking the circle goes down a level, so I'd say that it's
 important for mobile to have the arrows and no pre-selected default. I
 understand it might be a problem to deal with it, but I've tried other
 alternative designs and this makes things far more intuitive than any
 other approach.


 > WordPress.org themes should instead be "New Theme". That also includes
 uploading a theme. wordpress.org themes. The standard stuff.

 I think "New theme" is something that is confusing in the current WP Admin
 design, so I'd suggest to not use it. I'm not 100% convinced on
 "WordPress.org themes" either, but I don't think that going back is the
 right approach.

 I think we can change it, so let me explain the criteria that are
 underlying the current choice that I think are solid, and let's see if we
 can find intuitive alternatives that get close to this:

 1. The pair in the sidebar should be semantically consistent: "Installed
 themes" and "WordPress.org themes" are both pairs of adjective+noun that
 identify the place where the themes are.
 2. The structure is symmetric too: "$place themes", which makes this
 control potentially extensible in the future.
 3. While not a priority, it's nice that "WordPress.org themes" reinforces
 the source of the themes and the trust of the site they come from,
 reminding the users where they can find them outside of Customizer. This
 is especially relevant when the installation wasn't manual but provided by
 the host.

 ---

 I did a run of the current test site and here are some minor bits:

 1. See the "always sync the search bar" bug noted above with switching +
 empty search.
 2. The counter still seems off: if I type VERY quickly "fff" it shows "3
 themes" even if there are none below. Then I try again, and it shows
 correctly "0 themes". This seems to hinting at a race condition of some
 kind.
 3. The transparent overlay  with the "Setting up your live preview..." is
 too transparent and/or sometimes gets stuck at a alpha too high if it's
 animating and then triggers a page reload. Maybe we can make the
 transition faster, or no transition, and/or a darker alpha? Seems mostly a
 byproduct of the page starting to reload when the alpha is still animating
 tho (Too fast! :D).
 4. Tiny tiny thing: when I select "WordPress.org themes" the label
 "WordPress.org themes" moves 1px down, and vice versa when the selection
 goes back to "Installed themes".
 5. When I click on the (?) in the sidebar header the whole customizer
 reloads.

 That's all I have for now. :)

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