WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 2 years ago

Last modified 13 months ago

#28504 closed enhancement (maybelater)

Icons for Customizer Sections

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

Description

The admin menu has icons. Widgets have icons. With more and more options being added to the Theme Customizer in core and by themes and plugins, the addition of icons to section titles would make it easier to find the controls section you're looking for faster. This would work well with things like #27406.

Themes and plugins could specify their preferred dashicon when adding a customizer section, similarly to how they can specify icons when adding custom post types. I don't know that it would make sense to support custom (non-dash-) icons, though.

Attachments (17)

28504.png (11.3 KB) - added by celloexpressions 3 years ago.
28504.diff (2.5 KB) - added by celloexpressions 3 years ago.
Possible implementation of customizer section icons, with a way for plugins and themes to specify icons for their custom sections.
28504.twentyfourteen.diff (915 bytes) - added by celloexpressions 3 years ago.
Add a custom icon to Twenty Fourteen's "Featured Content" section.
28504.panels.png (94.0 KB) - added by celloexpressions 3 years ago.
Icons for panels, to provide hierarchy between panels and sections and to make it easier to find certain panels if they're in mixed sorting.
28504.panels.diff (2.1 KB) - added by celloexpressions 3 years ago.
Icons for panels only, using same API as the sections approach.
28504.panels-mixed-sorting.png (79.9 KB) - added by celloexpressions 3 years ago.
Icons for panels only, with mixed sorting between panels and sections.
customizer-text-align.png (97.6 KB) - added by folletto 3 years ago.
Customizer: text-aligned list items
28504.2.png (16.2 KB) - added by celloexpressions 3 years ago.
28504.2.diff (6.8 KB) - added by celloexpressions 3 years ago.
Refresh, with support for panels and top-level sections, and adding icons to all core and bundled theme sections. A default icon is shown for sections without icons.
28504-icon-over-title.png (13.2 KB) - added by ocean90 3 years ago.
28504.3.diff (6.8 KB) - added by celloexpressions 3 years ago.
Fix removal of icons in panels
28504.4.diff (6.9 KB) - added by SergeyBiryukov 3 years ago.
With src/
28504.5.diff (6.9 KB) - added by celloexpressions 3 years ago.
sanitize_html_class
28504.6.diff (7.5 KB) - added by celloexpressions 2 years ago.
Refresh.
28504.6.2.diff (7.5 KB) - added by celloexpressions 2 years ago.
Fix typos.
Screen Shot 2015-05-24 at 11.43.37.png (27.7 KB) - added by folletto 2 years ago.
Basic brightening of the icons
customizer-icons-colors.png (68.3 KB) - added by folletto 2 years ago.
Customizer Icon Color Selection (Palette of 4)

Download all attachments as: .zip

Change History (69)

@celloexpressions
3 years ago

Possible implementation of customizer section icons, with a way for plugins and themes to specify icons for their custom sections.

@celloexpressions
3 years ago

Add a custom icon to Twenty Fourteen's "Featured Content" section.

#1 @celloexpressions
3 years ago

  • Keywords has-patch added

If we move forward with this, it would probably be worth creating new Dashicons especially for the customizer, with better ones for the default sections and maybe a couple that would be commonly used by themes and plugins. For now, I selected reasonably relevant icons to demonstrate the potential implementation.

#2 @westonruter
3 years ago

  • Milestone changed from Awaiting Review to 4.0
  • Version set to 3.4

#3 @westonruter
3 years ago

  • Keywords ui-feedback ux-feedback added

#4 @ocean90
3 years ago

Not sure if icons are really needed. In Admin Menu they are still visible when the menu is collapsed, in Customizer they will not, yet.

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


3 years ago

#6 @helen
3 years ago

  • Milestone changed from 4.0 to Future Release

Punting - not convinced just yet, needs some more feedback.

#7 @celloexpressions
3 years ago

Alternate option, now: icons for panels, but not sections. See also #28979 and the need for visual hierarchy between panels and top-level sections.

@celloexpressions
3 years ago

Icons for panels, to provide hierarchy between panels and sections and to make it easier to find certain panels if they're in mixed sorting.

@celloexpressions
3 years ago

Icons for panels only, using same API as the sections approach.

@celloexpressions
3 years ago

Icons for panels only, with mixed sorting between panels and sections.

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


3 years ago

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


3 years ago

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


3 years ago

#11 @celloexpressions
3 years ago

  • Keywords needs-refresh added
  • Milestone changed from Future Release to 4.1

#28784 currently depends on this, so updating the milestone accordingly. We'd like to utilize icons so that we can improve the collapsed state on mobile (where you have to collapse to preview), and we'll probably also want to leverage that functionality on larger screens.

I can do an updated patch here for panels and top-level sections, with the ability to specify a dashicon when adding sections from plugins/themes. We should probably design some new ones for the core Customizer sections as well.

Still looking for UI/UX feedback here (and on #28784). Are there good reasons NOT to do this? Are there good alternatives for improving the mobile & collapsed states? Would it help if they were a slightly lighter color? Should they only be displayed on mobile? Also keep in mind that we don't really want the Customizer to look too much like the admin menu, as that could confuse users as to the difference between the Customizer and the admin.

#12 @folletto
3 years ago

Are there good reasons NOT to do this?

The only issue there can be one in my view: reduction of available space for translations. If however we don't have that concern I think it's a good idea. Note that even if this is a concern, given the available space still there, feels to me a minor one.

Are there good alternatives for improving the mobile & collapsed states?

I feel that a discussion I brought up in #28784 too is to switch everything from accordions to sliders. This will solve both mobile interactions and simplify the perception of the UI as well.

Would it help if they were a slightly lighter color?

Color can be a choice, but I feel another thing might actually be even better: align the text even with missing icons. ;)

Should they only be displayed on mobile?

Cross-screen consistency helps a lot in reinforcing visual recognition. So I would keep them on both screens. :)

Also keep in mind that we don't really want the Customizer to look too much like the admin menu, as that could confuse users as to the difference between the Customizer and the admin.

That's a good concern, but I don't think that the introduction of icons create ambiguity. If anything the removal of the same sections from the admin menu (#25571) and the "appearance" of that in the customizer will _reinforce_ that split. :)

@folletto
3 years ago

Customizer: text-aligned list items

@celloexpressions
3 years ago

Refresh, with support for panels and top-level sections, and adding icons to all core and bundled theme sections. A default icon is shown for sections without icons.

#13 @celloexpressions
3 years ago

  • Keywords ui-feedback ux-feedback needs-refresh removed

28504.2.diff is a refresh that adds support for icons to panels and top-level sections. Note that a default gear icon is used for any that don't specify an icon, like is done in the admin menu.

@folletto outlined all of the reasons for this pretty clearly, and icons give us lots of options for an improved collapsed view, etc. and will be especially nice once we implement panel-sliding behavior for sections to replace the current accordion.

I've opened #29855 for discussion of any new icons we want to create here, so that that doesn't hold this up.

#14 @celloexpressions
3 years ago

This is now a dependency for #29949, which leverages the icons in a re-designed collapsed mode for the Customizer, and is a huge UI improvement there.

#15 follow-up: @ocean90
3 years ago

Is it okay to only support Dashicons? Can we do something like we do for the admin menu? See trunk/src/wp-admin/menu.php#L111.

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

Replying to ocean90:

Is it okay to only support Dashicons? Can we do something like we do for the admin menu? See trunk/src/wp-admin/menu.php#L111.

We could support other icons directly, although I'd definitely rather not since we don't need to for back-compat (unlike the admin menu) and because pngs can't be recolored/resized if we ever want to do that, and doing that with SVGs can be tricky.

It would be pretty easy to specify a custom icon with CSS (either from another icon font or using a background image), especially since they can use any class. I'd rather keep it simple and start with more limited support, then add additional options later if there's a lot of demand for them, but I really don't think we should directly support custom icons here, at least for now. We should also add a few dashicons for common sections, per #29855, and could consider doing some things like widget icons do, making smarter decisions for fallback icons. But I don't think that's needed for the first pass.

#17 @ocean90
3 years ago

This

add_action( 'customize_register', function() {
	global $wp_customize;

	$wp_customize->add_panel( 'foo', array(
		'title'    => 'Foo',
		'capability' => 'customize',
		'priority' => 1,
	) );

	$wp_customize->add_section( 'bar', array(
		'title' => 'Bar',
		'capability' => 'edit_posts',
		'panel' => 'foo'
	) );

	$wp_customize->add_setting( 'foobar[foo]', array(
		'default'    => 'Foo',
		'capability' => 'edit_posts',
		'type'       => 'option',
	));

	$wp_customize->add_control('foobar', array(
		'label'    => 'Foobar',
		'section'  => 'bar',
		'settings' => 'foobar[foo]',
		'type'     => 'textarea',
	));
});

produces 28504-icon-over-title.png.

@celloexpressions
3 years ago

Fix removal of icons in panels

#18 @celloexpressions
3 years ago

Oops, I had the padding change but forgot to hide icons in sub-panels. There shouldn't be icons in panels because all sections within a panel should have similar functions, so it wouldn't make sense for them to all have similar icons. 28504.3.diff should do it.

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


3 years ago

@SergeyBiryukov
3 years ago

With src/

#20 follow-up: @obenland
3 years ago

FWIW, I'm not a huge fan of the icons either. They feel repetitive, especially when the same ones are used between a section and a menu item, in different contexts.

Looking at the latest patches, what do you think of adding the dashicon- prefix on output in class-wp-customize-panel.php and class-wp-customize-section.php? Shouldn't they be escaped too?

#21 in reply to: ↑ 20 ; follow-up: @celloexpressions
3 years ago

Replying to obenland:

Looking at the latest patches, what do you think of adding the dashicon- prefix on output in class-wp-customize-panel.php and class-wp-customize-section.php? Shouldn't they be escaped too?

By not assuming a dashicon prefix, we would allow other class-based font icons, or targeted background-image icons to be used (16) without worrying about potential conflicts with future dashicons. Also makes it clearer that it's a dashicon they're using when they add the icon.

We should probably add esc_attr() around the icon output, though.

#22 in reply to: ↑ 21 @DrewAPicture
3 years ago

Replying to celloexpressions:

We should probably add esc_attr() around the icon output, though.

Should probably use sanitize_html_class() there, there and a few other places nearby instead of esc_attr().

#23 @folletto
3 years ago

I'd rather keep it simple and start with more limited support, then add additional options later if there's a lot of demand for them, but I really don't think we should directly support custom icons here, at least for now.

Agreed. Also having something distinctive (either no icon, or a dimmed icon, or a placeholder icon) for the "extra" ones add a clear signal to the user to what's custom and what's native, something that people struggle with. :)

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


3 years ago

@celloexpressions
3 years ago

sanitize_html_class

#25 @celloexpressions
3 years ago

28504.diff adds escaping. I don't have a screenshot handy, but the default gear icon seemed to work pretty well in my testing.

#26 @ocean90
3 years ago

  • Keywords 4.2-early added
  • Milestone changed from 4.1 to Future Release

Let's put this together with #28784.

#27 @iseulde
3 years ago

  • Milestone changed from Future Release to 4.2

has-patch 4.2-early so moving to 4.2.

#28 @ocean90
3 years ago

  • Keywords 4.2-early removed
  • Milestone changed from 4.2 to Future Release

Moving back until we have a plan to tackle this.

@celloexpressions
2 years ago

Refresh.

#29 @celloexpressions
2 years ago

  • Milestone changed from Future Release to 4.3

Refreshed in 28504.6.diff. Unless I'm missing something, this is ready to go.

This ticket was mentioned in Slack in #core-customize by celloexpressions. View the logs.


2 years ago

#31 @paulwilde
2 years ago

There's a minor typo in the patch "Dasicon".

@celloexpressions
2 years ago

Fix typos.

#32 @celloexpressions
2 years ago

Fixed the typo in .6.2.diff.

#33 @obenland
2 years ago

  • Owner set to celloexpressions
  • Status changed from new to assigned

#34 @helen
2 years ago

I find this to be visually quite heavy and a bit distracting. Is the goal still a different "collapsed" mode? The current collapsed mode is more "hide" so you can see the site at the full browser width.

#35 @celloexpressions
2 years ago

The proposed new collapsed mode is in #29949. We should get this in first rather than continuing to try to keep a combined patch in sync, but if icons happen in the next couple weeks we shouldn't any issues getting the rest into 4.3.

The design is https://core.trac.wordpress.org/attachment/ticket/29949/customize-collapsed-after.png, which provides quicker access to controls entering and exiting the mode, while also address the issue of mistakenly being in the Customizer preview vs. previewing the actual site, while still giving an almost-full-width view.

We should also keep in mind that the navigation will (thoertically) no longer be displayed at the same time as options UI, so you'd only see the icons in the context of navigating to a particular section once #31336 happens.

This ticket was mentioned in Slack in #core-customize by celloexpressions. View the logs.


2 years ago

This ticket was mentioned in Slack in #core-customize by celloexpressions. View the logs.


2 years ago

This ticket was mentioned in Slack in #core-customize by celloexpressions. View the logs.


2 years ago

#39 @valendesigns
2 years ago

I really like the idea of having icons and I think we should 100% support them, but I'm not necessarily convinced they should be turned on by default for core sections. And if they are, there should be a way to turn them off if you don't want them.

@folletto
2 years ago

Basic brightening of the icons

#40 @folletto
2 years ago

I'm ok with either with or without, and I see @helen's point on weight — but an option to me seems overkill for such a detail. Let's try to make it less heavy visually and see if it work. If it doesn't, we don't add them or find a different way.

Here's a quick mock with a lighter version:

https://core.trac.wordpress.org/raw-attachment/ticket/28504/Screen%20Shot%202015-05-24%20at%2011.43.37.png

Another option could be to shrink them to 16px.

#41 @celloexpressions
2 years ago

I'm fine with a lighter color, what exact color would you prefer? (or feel free to update the patch) May also help to tint them slightly blue as many of the grays have been recently. Unfortunately we can't really change the size without losing clarity because dashicons are designed to a 20px grid. Ideally we'd match the admin menu directly, but we're using a light UI here instead of going with the dark navigation pattern of the admin, so there're much fewer options in terms of contrast and hierarchy.

@folletto
2 years ago

Customizer Icon Color Selection (Palette of 4)

#42 @folletto
2 years ago

Ok, I just uploaded four options based on the WordPress.org design handbook:

  1. Silver Gray
  2. Light Silver Gray
  3. Medium Blue
  4. Medium Blue / Tone 60%

I have probably a preference for "Silver Gray" since it matches a bit more the colors on the page, and "Medium Blue / Tone 60%" because it matches the button.

If she can, I'd love a check by @melchoice on this one tho. ;)

#43 @valendesigns
2 years ago

I would like Silver Gray with a Medium Blue / Tone 60% hover.

#44 @valendesigns
2 years ago

Though, if we end up doing a blue hover on the titles then I suppose a white hover would be appropriate.

#45 @celloexpressions
2 years ago

Silver gray looks the best, and the arrow icons should match that too if they don't currently.

This ticket was mentioned in Slack in #core-customize by celloexpressions. View the logs.


2 years ago

#47 follow-up: @melchoyce
2 years ago

I'm not super convinced the customizer needs icons, for a couple reasons:

  • We're putting a greater burden on people extending the customizer (like .org theme authors, who are now required to put their theme options in the Customizer) to pick (and maybe eventually add their own) icons, some of which might not easily be represented by an icon. Using an icon poorly can actually decrease the overall understanding of the section and confuse users.
  • Related to that point, we should not be using the same icon for two different parts of the admin. (This is actually something @jenmylo has been drilling into my head for the entire time I've been working on core.)
  • Visually, I agree the icons are very heavy. I actually think the grey icons are worse, because they start to feel really muddy and blurry, making them harder to understand.

I'm worried we're starting to get a little "icon happy" in the admin. We don't need to add icons everywhere.

#48 @folletto
2 years ago

I'm quite neutral on the subject of icons here — but I agree on all these points.

I'd be fine either way.

#49 in reply to: ↑ 47 @ocean90
2 years ago

  • Keywords close added
  • Milestone changed from 4.3 to Awaiting Review

Replying to melchoyce:

We don't need to add icons everywhere.

+1. Moving this ticket out of 4.3 for now.

#50 @celloexpressions
2 years ago

If we're not going to do this, let's just close the ticket once and for all rather than spending another year just sitting on it. If anyone else has opinions in favor of this, now would be the time to say something about it. I'm still in favor of adding icons, fwiw.

#51 @samuelsidler
2 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to maybelater
  • Status changed from assigned to closed

Based on comment:47 and comment:48, I'm going to call this a maybelater. If/when it makes sense, we should re-evaluate adding icons to the Customizer, but it doesn't make sense today and with the current design.

This ticket was mentioned in Slack in #themereview by celloexpressions. View the logs.


13 months ago

Note: See TracTickets for help on using tickets.