WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#28655 closed enhancement (fixed)

Replace Customizer "close" button with an "X" icon

Reported by: celloexpressions Owned by: helen
Milestone: 4.0 Priority: normal
Severity: normal Version: 4.0
Component: Customize Keywords: has-patch
Focuses: ui Cc:

Description

@helen suggested on #27406 that perhaps the Customizer's "close" button should be replaced with an X (close) icon matching the placement of the arrow added there for sub-panels. Also discussed some in IRC.

This would make the Customizer controls feel more like a modal/panel over the site to help clarify the purpose of the Customizer as customization controls in a front-end context. Additionally, users could close the customizer from within a sub-panel by clicking twice in the same spot in the upper-left corner.

This would also align much better with other core UI patterns, and would be styled almost exactly the same as the theme browser's close button.

Attachments (14)

28655.png (106.8 KB) - added by celloexpressions 3 years ago.
Mockup of x icon in place of button-styled close button, modeled after theme browser modal and the customizer sub-panel back arrow.
28655.patch (2.0 KB) - added by gauravmittal1995 3 years ago.
Not Complete
28655.2.patch (2.8 KB) - added by gauravmittal1995 3 years ago.
28655.3.patch (2.8 KB) - added by gauravmittal1995 3 years ago.
28655.4.patch (3.1 KB) - added by gauravmittal1995 3 years ago.
Solves the AYS problem, we can still use close and cancel
28655.5.patch (1.4 KB) - added by gauravmittal1995 3 years ago.
New Class Included
28655.6.patch (2.0 KB) - added by gauravmittal1995 3 years ago.
Creation of a new class, also hides it on collapse
28655.7.patch (2.0 KB) - added by gauravmittal1995 3 years ago.
This doesnt use visibility: hidden
28655.diff (3.5 KB) - added by celloexpressions 3 years ago.
Based on .control-panel-back, use .screen-reader-text, change JS variable to reduce potential confusion.
28655.theme-install.png (426.1 KB) - added by celloexpressions 3 years ago.
Re-organized theme-install preview to use icons instead of buttons and make next/previous more prominent.
28655.2.diff (9.2 KB) - added by celloexpressions 3 years ago.
Replace close button with icon, also iconify the theme-install preview interface and make some associate tweaks there.
28655.theme-install-smaller-icons.png (305.5 KB) - added by celloexpressions 3 years ago.
Smaller icons for the theme-install previewer, matching the theme details modal instead of the Customizer.
28655.3.diff (9.2 KB) - added by celloexpressions 3 years ago.
Smaller theme-install previewer icons.
28655.4.diff (10.0 KB) - added by celloexpressions 3 years ago.
Refresh for [29025]; replace "back" terminology with "close" for clarity in customize-controls.js.

Download all attachments as: .zip

Change History (31)

@celloexpressions
3 years ago

Mockup of x icon in place of button-styled close button, modeled after theme browser modal and the customizer sub-panel back arrow.

#1 @celloexpressions
3 years ago

  • Keywords needs-patch added

Should be fairy straightforward to patch, but needs some more discussion to decide whether or not we want to do this.

@gauravmittal1995
3 years ago

Not Complete

#2 follow-up: @gauravmittal1995
3 years ago

  • Keywords has-patch added; needs-patch removed

In the above patch, if we directly go to the customize.php?theme=* , and if we click the "X", it takes us to themes.php correctly (which we want) ... but if we goto themes.php and then click the preview button of any theme and then click the "X" button , even though it takes us to the themes.php page, it doesnt change the displayed URL of the page irrespective of any page you go to from there onwards. Can anyone suggest what is wrong?

#3 in reply to: ↑ 2 @westonruter
3 years ago

Replying to gauravmittal1995:

In the above patch, if we directly go to the customize.php?theme=* , and if we click the "X", it takes us to themes.php correctly (which we want) ... but if we goto themes.php and then click the preview button of any theme and then click the "X" button , even though it takes us to the themes.php page, it doesnt change the displayed URL of the page irrespective of any page you go to from there onwards. Can anyone suggest what is wrong?

This is being addressed in #25457 (Go back whence we came when closing the Customizer)

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


3 years ago

#5 @gauravmittal1995
3 years ago

The above patch solves all the problems, I think!!

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


3 years ago

#7 follow-up: @helen
3 years ago

  • Milestone changed from Awaiting Review to 4.0

Moving to 4.0 to look at in context of #27406. Likely needs an AYS, since we would lose the Close/Cancel differentiation: #25439.

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

Replying to helen:

Moving to 4.0 to look at in context of #27406. Likely needs an AYS, since we would lose the Close/Cancel differentiation: #25439.

Patch for AYS attached to #25439.

@gauravmittal1995
3 years ago

Solves the AYS problem, we can still use close and cancel

#9 @gauravmittal1995
3 years ago

In the above patch, even though the cancel and close is not shown, its still used! Therefore, it can be used as it is being used now without any change.

#10 @gauravmittal1995
3 years ago

To celloexpressions,
Changing the class name was creating a small error described in comment 2.
Basically the patch one changed the class name only.

Thats one of the reasons i decided to keep back

@gauravmittal1995
3 years ago

New Class Included

@gauravmittal1995
3 years ago

Creation of a new class, also hides it on collapse

@gauravmittal1995
3 years ago

This doesnt use visibility: hidden

@celloexpressions
3 years ago

Based on .control-panel-back, use .screen-reader-text, change JS variable to reduce potential confusion.

#11 @celloexpressions
3 years ago

Thanks for your work on this, @gauravmittal1995.

28655.diff cleans things up to match styling with .control-panel-back, uses .screen-reader-text, and eliminates "back" to reduce potential confusion, as we now have the panel-back button as well. It also keys to color schemes.

Still to-do: decide whether we should do something similar in the theme-install preview, or if we should leave that for now. We would also want to use arrows for the previous/next buttons there if we switched to the X for close, and would probably end up making several other minor tweaks accordingly.

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


3 years ago

@celloexpressions
3 years ago

Re-organized theme-install preview to use icons instead of buttons and make next/previous more prominent.

@celloexpressions
3 years ago

Replace close button with icon, also iconify the theme-install preview interface and make some associate tweaks there.

#13 @celloexpressions
3 years ago

28655.2.diff takes care of the Customizer and the theme-install preview, also moving some things around in the preview per IRC. I have a feeling this will cause a lot more people to navigate through different available themes from the preview interface.

#14 follow-up: @ocean90
3 years ago

The icons are looking a bit to "heavy" in my eyes. Can't they have the same size as in the theme details modal, see https://cloudup.com/cyiwlF-Gp11/f?

@celloexpressions
3 years ago

Smaller icons for the theme-install previewer, matching the theme details modal instead of the Customizer.

@celloexpressions
3 years ago

Smaller theme-install previewer icons.

#15 in reply to: ↑ 14 @celloexpressions
3 years ago

Replying to ocean90:

The icons are looking a bit to "heavy" in my eyes. Can't they have the same size as in the theme details modal, see https://cloudup.com/cyiwlF-Gp11/f?

I think the issue is that this larger size and darker color is more appropriate in the Customizer, where they need to compete with a lot more for attention, but when they're all visible together in the theme-installer, they start to feel overwhelming.

I was wanting to keep them consistent with the Customizer, but it looks better to match the sizing from the theme details modal. The darker color is needed to keep a similar amount of contrast with the darker background. I think 28655.3.diff is probably a good balance.

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


3 years ago

@celloexpressions
3 years ago

Refresh for [29025]; replace "back" terminology with "close" for clarity in customize-controls.js.

#17 @helen
3 years ago

  • Owner set to helen
  • Resolution set to fixed
  • Status changed from new to closed

In 29031:

More consistent icons in place of some buttons for the Customizer and theme install preview.

  • Use a single close icon instead of a context-changing cancel/close button in the Customizer. In user testing, this small distinction in language was overlooked, and we use an AYS now instead. This also makes it consistent with the back arrow in Customizer panels.
  • Use the same close icon as well as the previous/next arrows from the theme details browser in the theme install preview.

props celloexpressions. fixes #28655.

Note: See TracTickets for help on using tickets.