Customizer: Only show theme info when doing Live Preview of theme switch

[westonruter]

When opening the Customizer outside of the context of a Live Preview for a theme switch, it doesn't make much sense to display the customize-info element which says “You are previewing {theme name}” since that theme is already active:

Either this element should be removed entirely if not doing a Live Preview theme switch, or it should be changed to give instructions for how the Customizer works.

Related to #28542, where the document title for the Customizer need not include the theme name: it should instead include the blog name.

[westonruter]

Only include theme customize-info if doing Live Preview theme switch. See changes without whitespace differences: ​https://github.com/x-team/wordpress-develop/commit/159948664a5981bb3af8d500feb7fcff435f13fe?w=1 Part of PR on GitHub: ​https://github.com/x-team/wordpress-develop/pull/18

[danielbachhuber]

It'd be nice to do this as a part of #27993

[celloexpressions]

I like the idea of potentially using this space for help; I envision page descriptions doing similar in #27406. Do need to consider the UX of sometimes having or not having access to that, though. This is great because it also shifts the focus of the customizer from being strictly on theme-related components to being broader.

[westonruter]

Replying to celloexpressions:

I like the idea of potentially using this space for help; I envision page descriptions doing similar in #27406. Do need to consider the UX of sometimes having or not having access to that, though. This is great because it also shifts the focus of the customizer from being strictly on theme-related components to being broader.

So if not in a Live Preview theme switch, should we still include the element in the page, but let it be hidden and lack the theme-specific info?

[celloexpressions]

Replying to westonruter:

So if not in a Live Preview theme switch, should we still include the element in the page, but let it be hidden and lack the theme-specific info?

Actually, for now it's probably best to just leave it out entirely. Looking at help in the customizer could be a future enhancement, and I don't think there's anything else we would put there only outside of the live-preview context in the meantime.

[Kopepasah]

Did some testing and everything looks good except a small border discrepancy when the #customize-info section is removed. The attachment:28550.border.diff​ fixes that issue and also allows adding this section back without modifying the styles again.

[westonruter]

Fix small border discrepancy when the #customize-info section is removed. Also fixes that issue and also allows adding this section back without modifying the styles again. Commit: ​https://github.com/x-team/wordpress-develop/commit/5928d219b76adb105488a4986506e3f57f4069fd Pull request: ​https://github.com/x-team/wordpress-develop/pull/18

[westonruter]

Replying to Kopepasah:

Did some testing and everything looks good except a small border discrepancy when the #customize-info section is removed. The attachment:28550.border.diff​ fixes that issue and also allows adding this section back without modifying the styles again.

Cheers! I amended your patch to the overall one in 28550.1.diff​

[ocean90]

I'm not a fan of removing the "You are previewing $theme" line. Beginning users should be informed about the preview feature because not every user starts with a theme install preview.

or it should be changed to give instructions for how the Customizer works.

What about this? Can we change the line to ""You are previewing your current theme"?

[westonruter]

Replying to ocean90:

I'm not a fan of removing the "You are previewing $theme" line. Beginning users should be informed about the preview feature because not every user starts with a theme install preview.

or it should be changed to give instructions for how the Customizer works.

What about this? Can we change the line to ""You are previewing your current theme"?

Of if such instructions should be retained, I don't think “theme” need even be mentioned: just mention “site” instead. So:

You are previewing your site.

But what would then be displayed in the section when it is expanded? When previewing a theme switch, it shows the screenshot followed by the theme description. So instead it should show additional information about how the customizer works?

[westonruter]

I'd think such general information about how the customizer works should be made available somewhere else in the UI, perhaps as a “?” question mark appearing with the “Close” and “Save” buttons.

[Kopepasah]

Although I am a bit indifferent regarding the notice, I can see the benefits of keeping the notice when previewing the current theme.

As for the section containing general information, I've put together three examples of how I think the UI could work.

preview-site-help.png​
preview-site-mark-title.jpg​
preview-site-mark-header.jpg​

I think the action for general information best fits in the title area and not the header (all the more reason to keep it). In addition, I think the question mark (or perhaps an icon from #28504) fits best, in lieu of 'Help' with a toggle.

[ocean90]

A help button beside the close button will not fit for many translations. Instead of a question mark we should use the Dashicon, see image editor help: ​https://cloudup.com/cBDSBvDrPT5

[Kopepasah]

Replying to ocean90:

A help button beside the close button will not fit for many translations. Instead of a question mark we should use the Dashicon, see image editor help: ​https://cloudup.com/cBDSBvDrPT5

Agreed.

Now the question is should the help toggle (if we add it) expand like a normal toggle or do something different. In addition, what default information should it contain.

I think expanding like the other accordion sections is a good place to start, but not sure what content to add for users.

[celloexpressions]

I think we should keep customizer help out-of-scope for this ticket and just focus on what to do with #customize-info when not doing a live preview. The two lines of text, with one serving as a title do serve a good purpose in helping to define what the customizer UI is there for (especially with different panels of controls - #27406).

What about "You are customizing / [site title]"? We could live-update the site title when that control is updated.

Alternatively, we could drop the first line everywhere (including for live previews), although it provides nice hierarchy since it makes this section taller than the others.

For now, we should probably just make this section .cannot-expand.

[celloexpressions]

If this is going to make 4.0 we need to decide on the best approach and do a new patch soon.

Specifically, we need to decide what to replace "You are previewing: Theme Name" with. If we can reach a consensus on that, we can do that and just make this section .cannot-expand outside of theme previews for 4.0, possibly adding contents to it later. Or I would be okay with adding some brief text now that explained that everything here is previewed and is pushed live to the site when the save button is pushed, similar to what we have in the widget panel description.

I still think "You are customizing / [site title]", with some live-updating (see also #28682), would be the best solution, FWIW. The "you are customizing" part would match what we did for panels in #27406 nicely.

[celloexpressions]

"You are customizing / [site title]", with live-updating site title.

[celloexpressions]

28550.2.diff​ implements my previous suggestion to use "You are customizing / [site title]", with the site title updating as the corresponding control input is changed. This matches the format of Panel titles and descriptions added in #27406. I also added a brief explanation of the Customizer as the contents of the section, similar to the widgets panel explanation.

[westonruter]

Replying to celloexpressions:

28550.2.diff​ implements my previous suggestion to use "You are customizing / [site title]", with the site title updating as the corresponding control input is changed. This matches the format of Panel titles and descriptions added in #27406. I also added a brief explanation of the Customizer as the contents of the section, similar to the widgets panel explanation.

I really like this.

By the way, this would be a good opportunity to also update the widgets panel description to indicate that if you don't see the desired widget area section, you can navigate around the site to get to a page that has the sidebar on it and then it would appear in the customizer.

[celloexpressions]

Refresh, fix #customize-info styling to have focus styling and act more like a regular accordion section.

[helen]

In 29034:

Customizer info section:

• Only show the theme info when doing a live preview of another theme.
• Replace with helper text about what you are customizing and what the Customizer is for.
• Fix focus styling.

props celloexpressions, westonruter. fixes #28550.