Scroll down for screenshots, etc. For historical purposes, and to aid future PM work, here is my working to-do list for tasks completed so far:

• Create themes panel, update themes top level heading, sliding animation to open
• Active theme customize workflow/back arrow
• Themes section, with tab headings (shows its contents), create one for each category
• Migrate existing themes section and contents to new installed tab (possibly as subsection, try to contain management of getting and for others loading controls in section class based on params (could even do a switch for the type of themes))
• Don't load any theme data or controls until panel/section is expanded
• Pull data from .org API for each new theme section
• Build out available theme control, vs. installed theme control, adjust for consistency as needed
• Update theme count on section switch
• Load paged themes from .org
• Search themes section (header as input)
• Favorites theme section
• Theme feature filter section
• Ensure available themes that are already installed are handled appropriately, with direct live preview/customize button that works
• Install action, add control to installed section and update buttons once installed
• Install & Preview functionality
• Deal with the same theme in multiple sections - ensure installed status is updated
• Help text at top of panel explaining install then activate workflow
• Warning about saving before switching themes when settings are dirty, with ability to save & publish inline
• Upload button in header with slide-down UI
• Check theme details modal actions for installed and available themes
• Set data.theme.active based on previewed theme, not active theme (in PHP)
• Todo audit
• Check everything on mobile

This represents about 60 hours of development time, in addition to the prior UX design work. Remaining tasks:

• Installed themes filter when can't install themes/on multisite
• "Shiny" theme upload ajax action, add new theme control to installed section, focus() control
• Add theme updates support
• Shiny theme deletion, rerender as uninstalled in sections
• Ability to load reviews, via ajax call

Overview of the new themes experience in 37661.diff​.

Theme installation and Install & Preview flow in 37661.diff​.

Theme details modal and general flow on mobile in 37661.diff​.

First pass, see completed and pending to-do lists above.

Along with #34923 and (potentially) #35395, this is a high-priority customize component ticket for 4.7, under the theme of eliminating usability dead ends. We'll likely start holding some regular meetings to work on these and other customize tickets and projects.

In the meantime, feedback and testing is needed. There remain a few tasks to do, listed above, as well. While accessibility is considered in the UI that this adapts, it will probably need some work, particularly around the more dynamic elements here.

Now that's awesome! Great job bud :)

Just adding note that it would be great to see added to the task list user testing, this is something absolutely should have that as a phase along with design feedback.

I'm also going to request this gets discussion as part of this week's design meeting. It's a good time to get input and feedback.

My own thoughts are I do find it a little disjointed as an experience. I think the page design wise needs a lot of work. This may be because I'm trained to expect a format. It also may be the transitions. I'd be interested to see if the UX improvements you are suggesting smooth this out. I'd be very interested in user feedback on this through testing.

Of course - user testing and and design iterations will absolutely be necessary here. I should have clarified that the list above is base functionality that still needs to be developed, but I wanted to get the rest out there in the meantime so that we can start iterating on the design and UX. Any feedback and discussion during the design meeting would be fantastic as a first step. I'm adding a couple more visuals including a still of the main panel view to help document the current state of the patch.

I'll also note that most of the UI currently in the patch is derived from the themes pages in the admin. I think we should be willing to diverge from that UI here as we work to optimize the experience, and improvements to the admin page could be synced back in the future.

Error handling, and save & publish notice/functionality in the themes panel.

Still view of the installed themes section, to facilitate more refined UI discussions.

@celloexpressions This is incredible! Customizer FTW!

@celloexpressions

The feature filter will be really useful.

Still looking for volunteers to iterate on the design and coordinate user testing. Let me know if you're interested. We'll have weekly discussions on this project during the customize component meetings Mondays at 17:00 UTC, see ​https://make.wordpress.org/core/2016/08/25/customize-kickoff-and-weekly-meetings-for-4-7/.

View for users who can't install themes and on multisite.

Add theme updating and deletion, improve view when users can't install themes, clean up theme details events.

37661.1.diff​ adds:

• Refine UI for users that can't install themes (and multisite), and restore the existing installed themes filter for these users. We need to figure out how to maintain the grid of themes when some of them are hidden (the nth-child approach for margins breaks when elements are hidden).
• Clean up JS events for theme details buttons.
• Delete themes (shiny), which also updates instances of the theme in other sections accordingly.
• Update themes (shiny). We're now patching updates.js as well so we definitely can't use a plugin for testing unfortunately. We also need to define the JS pagenow global in the customizer now for updates and deletion to work properly. I unfortunately can't test whether the UI is updated appropriately on a successful update, as my internet connection is currently too slow for my local server to download a theme from .org, but update failures are working well.

I also investigated adding theme reviews to the details modal. Per the above discussion in #meta, the themes api doesn't have a way to query theme reviews yet. This may be possible now that the forums have been updated from bbPress 1.x, but we'll explore further in a separate ticket in a future release, and coordinate was needed with the meta team for API support.

That leaves only on more major development task:

• "Shiny" theme upload ajax action, add new theme control to installed section, focus() control.

With nearly all of the functionality complete, now is the time for testing to pick up. @karmatosed will be coordinating user tests soon, and anyone who knows how to install a patch is highly encouraged to test the patch and comment here with feedback. Once we go through a round of user testing and design adjustments (I believe @folletto has some suggestions?), we can do a make/core post for additional feedback.

@celloexpressions I looked at the patch today and I think before we user test we probably want to tidy up some of the big UI issues. I'm a little concerned at this point that users would get caught up on some of the things over give us experience feedback.

Small things like padding and format I think if fixed will at least give the feature a chance.

I also discovered hitches like this, which if not fixed would just confuse in a user test:

The more I explored this, the more I'm thinking something isn't working in the patch or my setup. Perhaps we can start with working out if that is the case?

@karmatosed yeah looks like you're not getting the CSS (and/or maybe JS) changes in the patch - it shouldn't look anything like that :) It should be similar to all of the screenshots I posted.

You could try a hard refresh in your browser, and make sure you're seeing a modified version of customize-controls.css and customize-controls.js in the browser inspector after applying the patch. You could also search for #customize-theme-section-navigation in both files - if that's not there then it's still the old version. And also make sure SCRIPT_DEBUG is on, etc.

There's also a possibility that something's wrong with the patch - can anyone else test to confirm?

I ran an informal in-person user test today. The user recently moved her personal site to WordPress and also uses WordPress in a role overseeing contributors and publishing some content herself at ​http://annenbergdl.org/. Her background is in communication and design. Her feedback was:

• The way it works with unsaved changes is confusing. The notice at the top of the themes page isn't obvious, you want to scroll down and browse through the themes.
• Maybe putting a notice under the change button [on the top level of the customizer] would help make it more obvious [we could do this only if it's a theme preview, not the active theme].
• "Why would you install a theme without previewing it?"
• "I would never use the favorites feature."
• "Every time I look at the featured themes, there are no themes I'd want to use. It might be better if they were more curated or something."

Aside: I also had her play with #34923 and she liked it, only concern was regarding editing posts after they're created.

On the subject of favorites, in my testing I found very few users that I tried had any favorites set (including myself). I primarily checked members of the theme review team and core contributors, but I wonder if we can get some stats from .org on how many users have favorite themes.

Tested a bit, haven't looked in depth at the code though. Here's some notes, I'm pretty sure many of these things are already known :)

1. initial focus: seems it doesn't work the second time the panel opens, to reproduce: use the keyboard, press "Change", the panel slides in, initial focus is on the "Customize" button, press Enter, panel slides out, press again Enter on the "Change" button
2. it's not so clear the button "Customize" actually means "Go back"
3. consider to add a "Go back" button at the end of the themes list
4. clicking on the search field makes all themes disappear (see following issue): I guess this is intentional but doesn't feel right to me
5. search doesn't work consistently when using only the keyboard, works correctly only when first clicking on the search field
6. not sure about how search is debounced (I may be wrong)
7. debounce delay should be 500 to be consistent with other similar search implementations
8. search field events should be standardised to input and keyup, see for example https://core.trac.wordpress.org/ticket/37233#comment:21
9. the search placeholder has a space before the hellip, see also the hidden label
10. consider to announce the search results (also when there are no results) via wp.a11y.speak()
11. consider to announce errors via wp.a11y.speak()
12. go to the "Popular" tab and ensure it is showing some of your installed themes: clicking on an *installed* theme details gives error Cannot read property 'delete' of undefined
13. browsing themes details doesn't show *installed themes* and gives error Cannot read property 'delete' of undefined
14. in any section: press Escape > all themes disappear: would be more consistent to use Escape to go back
15. open any theme details > press Escape > all themes disappear
16. consider to move the Help at the beginning
17. the help button "circular focus" is a bit bigger than usual
18. keyboard navigation should be constrained within the full overlay
19. the responsive view needs some love: see the theme name when too long, help button hidden by help panel, see screenshot below
20. please don't hate me :)

Thanks for the detailed feedback @afercia!

1. There are two customize buttons after the featured section has loaded, and the one in the current theme control is focused when re-opening. We need to update the selector for the initial focus in the panel to be unique to the top button.
2. Does anyone else have feedback on "Customize" meaning to go back to customizing the current theme?
3. Good idea. Maybe a link at the bottom of the panel, floated right, with the text "Back to customize"? This will also show up when there are no themes or themes are loading.
4. Maybe we should remove the click handler for expanding the search section?
5. The search handler needs to ensure the search section is expanded on keyup, which would also make 4. work.
6. Search is debounced to 800 ms. We could bring it down to 500 to match elsewhere. It's so high because we start loading up to 100 themes as soon as it's called, so I want to make sure we minimize extra hits there.
7. See 6.
8. With #38021, we should be able to standardize to only using input here.
9. Quick fix.
10. Good idea.
11. Good idea.
12. <# if ( data.actions['delete'] ) { #> should check for data.actions first in tmpl-customize-themes-details-view.
13. Fixed by 12.
14. Escape is collapsing the section; we should have it collapse the panel directly.
15. Escape is collapsing the section; if details are open it should collapse the details modal instead.
16. Easy fix.
17. It's because there's a larger tap target here. We could move the focus to :before and make it smaller but wouldn't this also make it easier to see? Or is consistency better?
18. For some reason this isn't happening within the custom panel. We'll need to migrate the logic from other sections and panels over.
19. This is inherited from theme-install.php and, yes, could use some work. Does anyone have design ideas for the filter bar on mobile other than continuing the floated links approach?
20. Quite the contrary :)

I can make those changes later this week unless anyone else is interested in tackling some of them sooner. Also need some design decisions as noted in the list above.

Noting that it seems necessary to hard-refresh the browser (typically something like Ctrl-F5) whenever these patches are applied or reverted for whatever reason. If something looks broken, please hard-refresh and it should be resolved.