Changeset 26664

Timestamp:

12/05/2013 06:37:20 AM (13 years ago)

Author:

nacin

Message:

Allow for Dashicons and base64-encoded data:image/svg+xml URIs when specifying menu icons.

Both of these icons can be colored to match the color scheme, including hover states.
Both are accepted for register_post_type()'s menu_icon argument, and also add_menu_page()'s $icon_url argument.

To use a Dashicon, pass the name of the helper class, e.g. 'dashicons-piechart'.
To use an SVG, pass a valid data URI string starting with 'data:image/svg+xml;base64,'.

props helen.
fixes #25147.

Location:

trunk/src

Files:

• wp-admin/css/wp-admin.css (modified) (1 diff)
• wp-admin/includes/misc.php (modified) (1 diff)
• wp-admin/includes/plugin.php (modified) (1 diff)
• wp-admin/menu-header.php (modified) (3 diffs)
• wp-admin/menu.php (modified) (1 diff)
• wp-includes/js/svg-painter.js (modified) (1 diff)
• wp-includes/post.php (modified) (1 diff)

trunk/src/wp-admin/css/wp-admin.css

@@ -1875 +1875 @@
         height: 30px;
         margin: 0;
+        background-repeat: no-repeat;
+        background-position: center;
         text-align: center;
 }

trunk/src/wp-admin/includes/misc.php

@@ -619 +619 @@
         $color_scheme = get_user_option( 'admin_color' );
 
+        // It's possible to have a color scheme set that is no longer registered.
+        if ( empty( $_wp_admin_css_colors[ $color_scheme ] ) ) {
+                $color_scheme = 'fresh';
+        }
+
         if ( ! empty( $_wp_admin_css_colors[ $color_scheme ]->icon_colors ) ) {
-                echo '<script type="text/javascript">var _wpColorScheme = ' . json_encode( array( 'icons' => $_wp_admin_css_colors[ $color_scheme ]->icon_colors ) ) . ";</script>\n";
-        }
+                $icon_colors = $_wp_admin_css_colors[ $color_scheme ]->icon_colors;
+        } elseif ( ! empty( $_wp_admin_css_colors['fresh']->icon_colors ) ) {
+                $icon_colors = $_wp_admin_css_colors['fresh']->icon_colors;
+        } else {
+                // Fall back to the default set of icon colors if the default scheme is missing.
+                $icon_colors = array( 'base' => '#999', 'focus' => '#2ea2cc', 'current' => '#fff' );
+        }
+
+        echo '<script type="text/javascript">var _wpColorScheme = ' . json_encode( array( 'icons' => $icon_colors ) ) . ";</script>\n";
 }
 add_action( 'admin_head', 'wp_color_scheme_settings' );

trunk/src/wp-admin/includes/plugin.php

@@ -967 +967 @@
  * @param string $menu_slug The slug name to refer to this menu by (should be unique for this menu)
  * @param callback $function The function to be called to output the content for this page.
- * @param string $icon_url The url to the icon to be used for this menu. Using 'none' would leave div.wp-menu-image empty
- *                         so an icon can be added as background with CSS.
+ * @param string $icon_url The url to the icon to be used for this menu.
+ *     * Pass a base64-encoded SVG using a data URI, which will be colored to match the color scheme.
+ *       This should begin with 'data:image/svg+xml;base64,'.
+ *     * Pass the name of a Dashicons helper class to use a font icon, e.g. 'dashicons-piechart'.
+ *     * Pass 'none' to leave div.wp-menu-image empty so an icon can be added via CSS.
  * @param int $position The position in the menu order this one should appear
  *

trunk/src/wp-admin/menu-header.php

@@ -68 +68 @@
                 $class = $class ? ' class="' . join( ' ', $class ) . '"' : '';
                 $id = ! empty( $item[5] ) ? ' id="' . preg_replace( '|[^a-zA-Z0-9_:.]|', '-', $item[5] ) . '"' : '';
-                $img = '';
+                $img = $img_style = $img_class = '';
+
                 // if the string 'none' (previously 'div') is passed instead of an URL, don't output the default menu image
                 // so an icon can be added to div.wp-menu-image as background with CSS.
-                if ( ! empty( $item[6] ) )
-                        $img = ( 'none' === $item[6] || 'div' === $item[6] ) ? '<br />' : '<img src="' . $item[6] . '" alt="" />';
+                // Dashicons and base64-encoded data:image/svg_xml URIs are also handled as special cases.
+                if ( ! empty( $item[6] ) ) {
+                        $img = '<img src="' . $item[6] . '" alt="" />';
+
+                        if ( 'none' === $item[6] || 'div' === $item[6] ) {
+                                $img = '<br />';
+                        } elseif ( 0 === strpos( $item[6], 'data:image/svg+xml;base64,' ) ) {
+                                $img = '<br />';
+                                $img_style = ' style="background-image:url(\'' . esc_attr( $item[6] ) . '\')"';
+                        } elseif ( 0 === strpos( $item[6], 'dashicons-' ) ) {
+                                $img = '<br />';
+                                $img_class = ' dashicons ' . sanitize_html_class( $item[6] );
+                        }
+                }
                 $arrow = '<div class="wp-menu-arrow"><div></div></div>';
 
@@ -89 +102 @@
                         if ( ! empty( $menu_hook ) || ( ( 'index.php' != $submenu_items[0][2] ) && file_exists( WP_PLUGIN_DIR . "/$menu_file" ) && ! file_exists( ABSPATH . "/wp-admin/$menu_file" ) ) ) {
                                 $admin_is_parent = true;
-                                echo "<a href='admin.php?page={$submenu_items[0][2]}'$class $aria_attributes>$arrow<div class='wp-menu-image'>$img</div><div class='wp-menu-name'>$title</div></a>";
+                                echo "<a href='admin.php?page={$submenu_items[0][2]}'$class $aria_attributes>$arrow<div class='wp-menu-image$img_class'$img_style>$img</div><div class='wp-menu-name'>$title</div></a>";
                         } else {
-                                echo "\n\t<a href='{$submenu_items[0][2]}'$class $aria_attributes>$arrow<div class='wp-menu-image'>$img</div><div class='wp-menu-name'>$title</div></a>";
+                                echo "\n\t<a href='{$submenu_items[0][2]}'$class $aria_attributes>$arrow<div class='wp-menu-image$img_class'$img_style>$img</div><div class='wp-menu-name'>$title</div></a>";
                         }
                 } elseif ( ! empty( $item[2] ) && current_user_can( $item[1] ) ) {
@@ -100 +113 @@
                         if ( ! empty( $menu_hook ) || ( ( 'index.php' != $item[2] ) && file_exists( WP_PLUGIN_DIR . "/$menu_file" ) && ! file_exists( ABSPATH . "/wp-admin/$menu_file" ) ) ) {
                                 $admin_is_parent = true;
-                                echo "\n\t<a href='admin.php?page={$item[2]}'$class $aria_attributes>$arrow<div class='wp-menu-image'>$img</div><div class='wp-menu-name'>{$item[0]}</div></a>";
+                                echo "\n\t<a href='admin.php?page={$item[2]}'$class $aria_attributes>$arrow<div class='wp-menu-image$img_class'$img_style>$img</div><div class='wp-menu-name'>{$item[0]}</div></a>";
                         } else {
-                                echo "\n\t<a href='{$item[2]}'$class $aria_attributes>$arrow<div class='wp-menu-image'>$img</div><div class='wp-menu-name'>{$item[0]}</div></a>";
+                                echo "\n\t<a href='{$item[2]}'$class $aria_attributes>$arrow<div class='wp-menu-image$img_class'$img_style>$img</div><div class='wp-menu-name'>{$item[0]}</div></a>";
                         }
                 }

trunk/src/wp-admin/menu.php

@@ -108 +108 @@
         $ptype_menu_position = is_int( $ptype_obj->menu_position ) ? $ptype_obj->menu_position : ++$_wp_last_object_menu; // If we're to use $_wp_last_object_menu, increment it first.
         $ptype_for_id = sanitize_html_class( $ptype );
+
         if ( is_string( $ptype_obj->menu_icon ) ) {
-                $menu_icon   = esc_url( $ptype_obj->menu_icon );
+                // Special handling for data:image/svg+xml and Dashicons.
+                if ( 0 === strpos( $ptype_obj->menu_icon, 'data:image/svg+xml;base64,' ) || 0 === strpos( $ptype_obj->menu_icon, 'dashicons-' ) ) {
+                        $menu_icon = $ptype_obj->menu_icon;
+                } else {
+                        $menu_icon = esc_url( $ptype_obj->menu_icon );
+                }
                 $ptype_class = $ptype_for_id;
         } else {

trunk/src/wp-includes/js/svg-painter.js

@@ -201 +201 @@
                         }
 
-                        $element.attr( 'style', 'background-image: url("data:image/svg+xml;base64,' + xml + '") !important;' );
+                        $element.css( 'background-image', 'url("data:image/svg+xml;base64,' + xml + '")' );
                 }
         };

trunk/src/wp-includes/post.php

@@ -1130 +1130 @@
  *     * Defaults to null, which places it at the bottom of its area.
  * - menu_icon - The url to the icon to be used for this menu. Defaults to use the posts icon.
+ *     * Pass a base64-encoded SVG using a data URI, which will be colored to match the color scheme.
+ *      This should begin with 'data:image/svg+xml;base64,'.
+ *     * Pass the name of a Dashicons helper class to use a font icon, e.g. 'dashicons-piechart'.
+ *     * Pass 'none' to leave div.wp-menu-image empty so an icon can be added via CSS.
  * - capability_type - The string to use to build the read, edit, and delete capabilities. Defaults to 'post'.
  *     * May be passed as an array to allow for alternative plurals when using this argument as a base to construct the