[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:  celloexpressions
     Type:  feature request          |      Status:  assigned
 Priority:  high                     |   Milestone:  4.7
Component:  Customize                |     Version:  4.2
 Severity:  normal                   |  Resolution:
 Keywords:  has-patch has-           |     Focuses:  ui, accessibility,
  screenshots needs-testing has-     |  javascript
  user-testing ux-feedback           |
-------------------------------------+-------------------------------------

Comment (by celloexpressions):

 In [attachment:37661.7.diff]:

 - Scroll to the top of the themes list when changing sections.
 - Fix closing the details modal on a successful theme install if the
 installed theme is still open in the modal, so it isn't stuck
 "installing...".
 - Mobile loading indicator in header on filters view.
 - Go straight to themes view on mobile, then toggle to open filters.
 - Smooth the themes fadeIn and unify it with the displaying count text
 fadeIn. Eliminate a jump in the header actions when they loaded. Also
 animate theme count changes to soften the jumpy effect.
 - Show the installed tab on the current theme when it comes up in .org
 results.
 - Insert section headings before the themes container in the DOM,
 restoring keyboard accessibility for the filters with infinite scroll.
 - Feature Filter — the entry shouldn't select, it should just open. The
 search and selection is triggered only once one of the options is
 activated, thus avoiding any blank screen, and preserving the accordion
 visual.
 - Favorites — the entry shouldn't select, but should update the list once
 "Get Favorites" is clicked.
 - Search — If there's a text inside the search box and the search get
 focus, the control should get selected and search initiated with the
 existing text.
 - For the above three items, all sections that have user-defined
 information aren't expanded (marked as checked and shown in the themes
 area) until the user-defined info is present.
 - There is no longer a slight 4px white "tab" on the left of accordions
 when open.
 - (Mobile) Button switcher labels — See X themes changed to "Show X
 themes". Keeping filter themes for now since themes are shown before the
 filters now.
 - Check marks — position of the circle was a half-pixel too low, now it's
 a half-pixel too high.
 - Glass — position of the icon is too high, again should be vertically
 centered - the icon is low in the grid, but I think it was only one pixel
 too high, moved down by one.
 - Feature Filters design — updated per @folletto with a few adjustments;
 keeping the accordion behavior for now due to the length of the list and
 intentionally maintaining some hierarchy between top-level section
 "filters" and these feature filters due to the way they currently work
 with the .org API.

 With all of those fixed, we should be ready to move on to the code review
 workflow pending any additional feedback from other teams (particularly
 curious about accessibility with this latest patch @afercia). A couple of
 notes for @folletto:

 > The loading spinner on the right while the thumbnails get loaded would
 be great it it could be centered also  vertically.
 Unfortunately this isn't feasible because it's the same spinner used for
 infinite scroll, so it would become visally lost in that context.

 > Background color — I'd suggest as per mockup to have a slightly darker
 gray for the right area with the - thumbnails (#DDDDDD). This if it aligns
 with the current color standards of customizer. It helps achieving a -
 better contrast.
 I tried this but unfortunately it worked considerably worse because it
 clashed with the customize sidebar being #eee (the current color).
 Probably better to leave it for now, but I'd like to get more contrast in
 the customizer in general.

 > The mouse cursor shouldn't be pointer but default on items that are
 already selected (search excluded).
 Going to skip this for now since that isn't the convention anywhere else
 in core, and we'd also need to unset the hover styling. Probably better to
 address that universally.

 There are a few pending questions that should be addressed in 4.7 but not
 necessarily before an initial commit:
 - Button labels, and whether we need two separate buttons. Note that "Live
 Preview" is what themes in the admin do as well, so it would probably be
 better to change everywhere in a unified way later. "Install & Preview" is
 useful because it lets users make a decision in one click/one step and (to
 an extent) implies that it may take a bit of time to actually install.
 However, at least one user has found the wording confusing so far; let's
 see if a pattern emerges.
 - Double loading indicators - if we have two buttons that both install,
 they'll both get loading spinners. Probably the best solution is to
 eliminate a button.
 - Screenshots don’t render before scrolling sometimes. It isn't
 consistently reproducible and is likely due to a race condition with an
 arbitrary delay in the JS.
 - We're starting to build up some larger design ideas and potential
 improvements to iterate on in future releases as well.

 = Schedule =
 I'm calling this patch the final major design adjustments for 4.7. Let's
 focus on clear bugs and the "pending items" list directly above. Anything
 else that comes up in multiple user tests/multiple people report having
 issue with could also be considered. The primary focus until Wednesday
 (10/12) is addressing flow/mobile, accessibility, docs, i18n, and security
 issues that those corresponding reviewers locate. From that point, there
 will be a hard freeze on functional changes so that @westonruter can do a
 final code review and we can make any necessary adjustments there.
 Finally, there will be at least a week after the merge to reconsider
 enhancements and around a month to fix additional bugs.

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