Customizer: Introduce theme uploading

[melchoyce]

This is an offshoot of #37661. Please note: this ticket only addresses uploading themes to the Customizer. It does not touch on browsing and discovering new themes.

Theme switching in the Customizer was introduced in 4.2. Within the Customizer, you can preview any theme you currently have installed on your site. This feature would allow you to upload new themes directly from the Customizer, so you can preview them immediately without having to jump back into your themes admin screen.

Additionally, this introduces a new header for the Themes section, which was initially mocked up in #21666. This header will hopefully clarify some of the confusion between going in and out of the Themes section, by adapting the back arrow the other Customizer panels use.

See mockups for specific details and interactions.

[lukecavanagh]

@melchoyce

The mock-ups for the theme uploader in the Customizer, seems very clear on flow.

[karmatosed]

+1 this is something people have been asking for. I look forward to running some tests once we have this coded.

[westonruter]

Minor note: I believe the Undo/Redo/History controls in customizer-theme-uploads-i1.png​ are not intended to be part of the proposed design for the feature here.

[melchoyce]

Replying to westonruter:

Minor note: I believe the Undo/Redo/History controls in customizer-theme-uploads-i1.png​ are not intended to be part of the proposed design for the feature here.

True, that's leftover from #21666 :)

[celloexpressions]

This would be most appropriate as part of #37661. As I mentioned in Slack, upload support without the ability to install themes directly undermines the WordPress.org repository and promotes a poor user experience. Additionally, #37661 integrates shiny updates/installs into the customizer and provides a much more robust themes framework than what currently exists; there are significant technical advantages to building this as a part of that project or following its inclusion in core. The next step is to build out the shiny upload functionality and implement the previously-approved theme uploads design in #37661.

[westonruter]

In 41368:

Customize: Add rightward-facing back button to Themes section header to improve navigation (since the section slides in from the left).

Also serves to prototype for an upward-facing arrow in this location for a Publish Settings section.

Props melchoyce, westonruter.
See #39896, #40278, #21666.

[celloexpressions]

If anyone would still like to tackle this for 4.9, the first step is to implement the server-side support for shiny uploads. Then, that can be amended to #37661 with the UI as designed in the mockups on that ticket. The framework for shiny install + upload + preview is already present there. Not sure why we would step back to something like customizer-theme-uploads-i1.png​, which de-emphasizes existing themes and undermines official avenues for finding themes as noted above.

[melchoyce]

Latest mockup, taken from #37661: customizer-theme-showcase-i5.png​. Designs by @folletto.

[melchoyce]

Worth maybe just adding a link to upload themes so it exists for 4.9?

[celloexpressions]

Replying to melchoyce:

Worth maybe just adding a link to upload themes so it exists for 4.9?

This is a similar idea to the 4.2 proposal to link to adding themes in the customizer. It's a similar problem of lost context here, and the question is whether that's worth the lack of discovery of not having it.

If someone has time to flesh out an implementation for theme uploading, maybe it could be added during beta? Or, this could be a good minor release feature candidate for 4.9.1. I think the first thing to do is to finish the design for uploading in the preview area, off of the upload theme section heading.

[johnbillion]

This isn't something to go into a minor release.

[anonymized_11892634]

How would this interact with theme's which require specific plugins after installing? For example, many themes require plugins via a notification that appears after the theme has been activated - ​https://github.com/TGMPA/TGM-Plugin-Activation.

If less experienced users start to install themes via the Customizer, they may find that the theme does not work correctly, yet have no idea that this is due to a missing plugin.

Would it be possible to display a notification within the Customizer in this case?

[melchoyce]

Good point, @philclothier, and one that folks are probably already encountering. I think it would be reasonable to display those notifications within the Customizer, maybe with an additional caveat that to finish setting up the necessary plugins, you need to exit the Customizer.

[boemedia]

We discussed this in our weekly design ticket triage. Being able to install new themes from the customizer seems to avoid unnecessary movement between the customizer and the WP dashboard. As for the additional installation of plugins: it would be wise to add a notification within the Customizer. But in the old situation (present), you have to move away from themes to plugin installation too. So that's not really changing, is it?

Is there a possibility to add install possibilities within the notification, like it sometimes occurs in the dashboard as well?

Saying something like: this theme requires the xx-plugin <install now> / <ignore> / <dismiss>

We're also curious to see where this goes after WP5.0 and what the Gutenberg effect on this would be.

[melchoyce]

Punting to Future Release; don't see this coming in 5.0.

[karmatosed]

As this has feedback, going to remove the ux-feedback keyword for now.

[celloexpressions]

This ticket is ready for development based on customizer-theme-showcase-i5.png​.

The upload new theme controls should be contained within a new customize section, likely extending WP_Customize_Themes_Section. The section should contain one control that has a title, description, upload button/dropzone, and upload progress bar. This control could potentially extend (or take inspiration from) WP_Customize_Media_Control.

The upload should send an ajax request using the "shiny updates" functionality to upload and install the theme similar to the process for installing a WordPress.org theme. On success, the upload control should transform to show a "Live Preview" primary button that matches the behavior of installing a WordPress.org theme.