WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#28550 closed enhancement (fixed)

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

Reported by: westonruter Owned by: ocean90
Milestone: 4.0 Priority: normal
Severity: normal Version: 3.4
Component: Customize Keywords: ux-feedback has-patch commit
Focuses: ui Cc:

Description

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:

https://www.evernote.com/shard/s248/sh/98ee2a8c-060e-4111-b859-60cbf794bd3c/962a29ba6f1757a0835f87d83d056970/deep/0/Screen-Shot-2014-06-15-at-10.17.58-PM.png

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.

Attachments (8)

28550.diff (3.1 KB) - added by westonruter 3 years ago.
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
28550.border.diff (550 bytes) - added by Kopepasah 3 years ago.
28550.1.diff (3.6 KB) - added by westonruter 3 years ago.
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
preview-site-help.png (29.8 KB) - added by Kopepasah 3 years ago.
preview-site-mark-title.jpg (14.1 KB) - added by Kopepasah 3 years ago.
preview-site-mark-header.jpg (14.3 KB) - added by Kopepasah 3 years ago.
28550.2.diff (3.8 KB) - added by celloexpressions 3 years ago.
"You are customizing / [site title]", with live-updating site title.
28550.3.diff (5.1 KB) - added by celloexpressions 3 years ago.
Refresh, fix #customize-info styling to have focus styling and act more like a regular accordion section.

Download all attachments as: .zip

Change History (29)

@westonruter
3 years ago

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

#1 @westonruter
3 years ago

  • Keywords has-patch added

#2 @danielbachhuber
3 years ago

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

#3 follow-up: @celloexpressions
3 years ago

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.

#4 in reply to: ↑ 3 ; follow-up: @westonruter
3 years ago

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?

#5 in reply to: ↑ 4 @celloexpressions
3 years ago

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.

#6 follow-up: @Kopepasah
3 years ago

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
3 years ago

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

#7 in reply to: ↑ 6 @westonruter
3 years ago

  • Milestone changed from Awaiting Review to 4.0
  • Owner set to ocean90
  • Status changed from new to reviewing

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

#8 @westonruter
3 years ago

  • Keywords commit added

#9 follow-up: @ocean90
3 years ago

  • Keywords commit removed

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"?

#10 in reply to: ↑ 9 @westonruter
3 years ago

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.

https://www.evernote.com/shard/s248/sh/41581dc3-3fd5-4625-b43b-218ce40be11c/6f06d23f7be2aa50fd9d36f185fb1612/deep/0/Customize-Twenty-Fourteen---WordPress.png

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?

#11 @westonruter
3 years ago

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.

#12 @Kopepasah
3 years ago

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.

Last edited 3 years ago by Kopepasah (previous) (diff)

#13 follow-up: @ocean90
3 years ago

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

#14 in reply to: ↑ 13 @Kopepasah
3 years ago

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.

This ticket was mentioned in IRC in #wordpress-dev by westonruter. View the logs.


3 years ago

#16 @celloexpressions
3 years ago

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.

#17 @celloexpressions
3 years ago

  • Keywords needs-patch ux-feedback added; has-patch removed

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
3 years ago

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

#18 follow-up: @celloexpressions
3 years ago

  • Keywords has-patch added; needs-patch removed

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.

#19 in reply to: ↑ 18 @westonruter
3 years ago

  • Keywords commit added

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.

This ticket was mentioned in IRC in #wordpress-dev by celloexpressions. View the logs.


3 years ago

@celloexpressions
3 years ago

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

#21 @helen
3 years ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

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.

Note: See TracTickets for help on using tickets.