Use dashicons instead of images for widget icons

[westonruter]

See conversation at https://twitter.com/joemcasta/status/414937640970878976

The question here will be how plugins will indicate their icon. Currently we're filtering widget_icon_url so that plugins can indicate the path to a PNG image. But if we're using icon fonts, would this all be handled in CSS instead? Would a plugin just need to enqueue a stylesheet to appear on the widgets admin page and in the customizer?

See also http://core.trac.wordpress.org/ticket/25419

Builds on #58

[bordoni]

@westonruter I think we could handle all the default dashicons that are available (not so hard). It's a matter of how to identify the difference between an URL and a possible group of classes that would represent the icons.

[westonruter]

@bordoni yeah, so instead of filtering widget_icon_url and rendering an image into the output of wp_widget_control(), it seems better if we just modified wp_widget_control() to add the widget's id_base as a class name (e.g. widget-{id_base} as in widget-calendar), and then the stylesheets can add the dashicon into the control where appropriate. This would allow plugins to alternatively use images instead of dashicons as well, as the stylesheets could define a background-image instead of text content.

<div id="widget-2_calendar-__i__" class="widget widget-calendar">
    <div class="widget-top">
        <div class="widget-title-action">
...

With this in mind, I don't believe there would really need to be any significant PHP to add. The only thing is adding the class name, and then the rest can be handled with CSS, and widgets can enqueue their own admin CSS to ensure the proper dashicon or background image is used.

/cc @MichaelArestad @shaunandrews

[MichaelArestad]

@westonruter Looks good to me. It allows authors to use whatever image file type they are comfortable with.

We could get clever with CSS for default dashicons:

.widget[class*="calendar"]:before {
  content: "\f145"; /* calendar */
}

[westonruter]

Great, so then we just need to have a standard location to target. How about a new element, widget-icon?

<div id="widget-2_calendar-__i__" class="widget widget-calendar">
    <div class="widget-top">
        <div class="widget-title-action">...</div>
        <div class="widget-icon"></div>
        <div class="widget-title"><h4>Calendar<span class="in-widget-title"></span></h4></div>
    </div>

The default CSS could then

.widget .widget-icon:before {
    font-family: 'dashicons';
    content: "\1234"; /* default widget icon */
}

A plugin can then override this with custom icon:

.widget-foo .widget-icon:before {
    font-family: 'foo-plugin-dashicons';
    content: "\abcd";
}

Or they could use an image instead of an icon:

.widget-foo .widget-icon:before {
    content: "";
}
.widget-foo .widget-icon {
    width: 32px;
    height: 32px;
    background-image: url( path/to/icon.svg );
}

[MichaelArestad]

widget-icon makes sense.

Although, if it's an element, I would remove :before and go with:

.widget .widget-icon {
    width: 24px;
    height: 24px;
    content: "\1234"; /* default widget icon */
    font: normal 24px/1 'dashicons';
}

And again, maybe even supplement it with some logical guesses at widget names like:

.widget[class*="calendar"] .widget-icon,
.widget[class*="month"] .widget-icon,
.widget[class*="date"] .widget-icon {
    content: "\f145"; /* calendar widget icon */
}
.widget[class*="text"] .widget-icon,
.widget[class*="wysiwyg"] .widget-icon {
    content: "\f119"; /* write widget icon */
}

[westonruter]

I seem to remember content only working with pseudo elements (:before/:after), per the CSS2 spec:

This property is used with the :before and :after pseudo-elements to generate content in a document.

It doesn't seem to work on non-pseudo elements: http://jsfiddle.net/westonruter/R6GLH/

[MichaelArestad]

Yep. You're right. Totally forgot about that.

[westonruter]

Who can take the existing PNG icons and turn them into a font which we can bundle with Widget Customizer and use for custom dashicons?

[bordoni]

@westonruter can we grab GPL icons from other places? Or just Dashicons?

[MichaelArestad]

@bordoni We technically could grab GPL icons from other places. I expect we ultimately would add to Dashicons so I would prefer we just create our own that fit nicely within the current Dashicons set.

It looks like @shaunandrews has already made a few. The ones we could add and/or make:

• Archives
• Custom Menu
• Meta
• Tag Cloud
• Text
• Default Widget

[westonruter]

Are the ones from @shaunandrews in vector format and suitable to embed in a font?

[MichaelArestad]

Yep. I'm embedding them in a font today.

[westonruter]

Great work @MichaelArestad! Your contribution will be part of the next release (0.13), likely coming out tonight.