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

[celloexpressions]

@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.

[celloexpressions]

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

[celloexpressions]

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

[gauravmittal1995]

Not Complete

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

[westonruter]

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)

[gauravmittal1995]

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

[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.

[westonruter]

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]

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

[gauravmittal1995]

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.

[gauravmittal1995]

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]

New Class Included

[gauravmittal1995]

Creation of a new class, also hides it on collapse

[gauravmittal1995]

This doesnt use visibility: hidden

[celloexpressions]

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

[celloexpressions]

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.

[celloexpressions]

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

[celloexpressions]

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

[celloexpressions]

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.

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

[celloexpressions]

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

[celloexpressions]

Smaller theme-install previewer icons.

[celloexpressions]

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.

[celloexpressions]

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

[helen]

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.