WordPress.org

Make WordPress Core

Changeset 26664


Ignore:
Timestamp:
12/05/13 06:37:20 (4 months 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:
7 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/wp-admin.css

    r26660 r26664  
    18751875    height: 30px; 
    18761876    margin: 0; 
     1877    background-repeat: no-repeat; 
     1878    background-position: center; 
    18771879    text-align: center; 
    18781880} 
  • trunk/src/wp-admin/includes/misc.php

    r26601 r26664  
    619619    $color_scheme = get_user_option( 'admin_color' ); 
    620620 
     621    // It's possible to have a color scheme set that is no longer registered. 
     622    if ( empty( $_wp_admin_css_colors[ $color_scheme ] ) ) { 
     623        $color_scheme = 'fresh'; 
     624    } 
     625 
    621626    if ( ! empty( $_wp_admin_css_colors[ $color_scheme ]->icon_colors ) ) { 
    622         echo '<script type="text/javascript">var _wpColorScheme = ' . json_encode( array( 'icons' => $_wp_admin_css_colors[ $color_scheme ]->icon_colors ) ) . ";</script>\n"; 
    623     } 
     627        $icon_colors = $_wp_admin_css_colors[ $color_scheme ]->icon_colors; 
     628    } elseif ( ! empty( $_wp_admin_css_colors['fresh']->icon_colors ) ) { 
     629        $icon_colors = $_wp_admin_css_colors['fresh']->icon_colors; 
     630    } else { 
     631        // Fall back to the default set of icon colors if the default scheme is missing. 
     632        $icon_colors = array( 'base' => '#999', 'focus' => '#2ea2cc', 'current' => '#fff' ); 
     633    } 
     634 
     635    echo '<script type="text/javascript">var _wpColorScheme = ' . json_encode( array( 'icons' => $icon_colors ) ) . ";</script>\n"; 
    624636} 
    625637add_action( 'admin_head', 'wp_color_scheme_settings' ); 
  • trunk/src/wp-admin/includes/plugin.php

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

    r26182 r26664  
    6868        $class = $class ? ' class="' . join( ' ', $class ) . '"' : ''; 
    6969        $id = ! empty( $item[5] ) ? ' id="' . preg_replace( '|[^a-zA-Z0-9_:.]|', '-', $item[5] ) . '"' : ''; 
    70         $img = ''; 
     70        $img = $img_style = $img_class = ''; 
     71 
    7172        // if the string 'none' (previously 'div') is passed instead of an URL, don't output the default menu image 
    7273        // so an icon can be added to div.wp-menu-image as background with CSS. 
    73         if ( ! empty( $item[6] ) ) 
    74             $img = ( 'none' === $item[6] || 'div' === $item[6] ) ? '<br />' : '<img src="' . $item[6] . '" alt="" />'; 
     74        // Dashicons and base64-encoded data:image/svg_xml URIs are also handled as special cases. 
     75        if ( ! empty( $item[6] ) ) { 
     76            $img = '<img src="' . $item[6] . '" alt="" />'; 
     77 
     78            if ( 'none' === $item[6] || 'div' === $item[6] ) { 
     79                $img = '<br />'; 
     80            } elseif ( 0 === strpos( $item[6], 'data:image/svg+xml;base64,' ) ) { 
     81                $img = '<br />'; 
     82                $img_style = ' style="background-image:url(\'' . esc_attr( $item[6] ) . '\')"'; 
     83            } elseif ( 0 === strpos( $item[6], 'dashicons-' ) ) { 
     84                $img = '<br />'; 
     85                $img_class = ' dashicons ' . sanitize_html_class( $item[6] ); 
     86            } 
     87        } 
    7588        $arrow = '<div class="wp-menu-arrow"><div></div></div>'; 
    7689 
     
    89102            if ( ! empty( $menu_hook ) || ( ( 'index.php' != $submenu_items[0][2] ) && file_exists( WP_PLUGIN_DIR . "/$menu_file" ) && ! file_exists( ABSPATH . "/wp-admin/$menu_file" ) ) ) { 
    90103                $admin_is_parent = true; 
    91                 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>"; 
     104                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>"; 
    92105            } else { 
    93                 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>"; 
     106                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>"; 
    94107            } 
    95108        } elseif ( ! empty( $item[2] ) && current_user_can( $item[1] ) ) { 
     
    100113            if ( ! empty( $menu_hook ) || ( ( 'index.php' != $item[2] ) && file_exists( WP_PLUGIN_DIR . "/$menu_file" ) && ! file_exists( ABSPATH . "/wp-admin/$menu_file" ) ) ) { 
    101114                $admin_is_parent = true; 
    102                 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>"; 
     115                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>"; 
    103116            } else { 
    104                 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>"; 
     117                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>"; 
    105118            } 
    106119        } 
  • trunk/src/wp-admin/menu.php

    r25133 r26664  
    108108    $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. 
    109109    $ptype_for_id = sanitize_html_class( $ptype ); 
     110 
    110111    if ( is_string( $ptype_obj->menu_icon ) ) { 
    111         $menu_icon   = esc_url( $ptype_obj->menu_icon ); 
     112        // Special handling for data:image/svg+xml and Dashicons. 
     113        if ( 0 === strpos( $ptype_obj->menu_icon, 'data:image/svg+xml;base64,' ) || 0 === strpos( $ptype_obj->menu_icon, 'dashicons-' ) ) { 
     114            $menu_icon = $ptype_obj->menu_icon; 
     115        } else { 
     116            $menu_icon = esc_url( $ptype_obj->menu_icon ); 
     117        } 
    112118        $ptype_class = $ptype_for_id; 
    113119    } else { 
  • trunk/src/wp-includes/js/svg-painter.js

    r26663 r26664  
    201201            } 
    202202 
    203             $element.attr( 'style', 'background-image: url("data:image/svg+xml;base64,' + xml + '") !important;' ); 
     203            $element.css( 'background-image', 'url("data:image/svg+xml;base64,' + xml + '")' ); 
    204204        } 
    205205    }; 
  • trunk/src/wp-includes/post.php

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