Making WordPress.org

Changeset 11206


Ignore:
Timestamp:
08/26/2021 11:34:14 PM (3 years ago)
Author:
coffee2code
Message:

Developer, Dashicons: Use human-readable labels for icons instead of character codes.

Makes it clear when scanning grid what a particular icon represents and facilitates in-page (ctrl-f) browser searches for finding an icon.

  • Outputs icons as list items instead of divs
  • Reformats output markup of dashicons to avoid use of hidden text
  • Embeds keywords and character codes as data attributes
  • Preserves filtered keyword search

Props dufresnesteven, ryelle, coffee2code.
Fixes #5014

Location:
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/js/page-dashicons.js

    r9777 r11206  
    1313
    1414        random: function() {
    15             var divs = jQuery("#iconlist div").get().sort(function(){
     15            const listItems = jQuery("#iconlist li").get().sort(function(){
    1616                    return Math.round(Math.random())-0.5;
    1717                }).slice(0,1);
    1818
    19             attr = jQuery(divs).attr('alt');
    20             cssClass = jQuery(divs).attr('class');
     19            attr = jQuery(listItems).attr('data-code');
     20            cssClass = jQuery(listItems).attr('class');
    2121            dashicons.display( attr, cssClass );
    2222        },
     
    3535            glyphtext = jQuery('#temp').text();
    3636
    37             var sectionName = jQuery('#iconlist div.dashicons-' + permalink ).prevAll('h4').first().text();
     37            var sectionName = jQuery('#iconlist li.dashicons-' + permalink ).parent().prevAll('h4').first().text();
    3838
    3939            var tmpl = wp.template( 'glyphs' );
     
    6565            }
    6666
    67             attr = jQuery( '.' + permalink ).attr( 'alt' );
     67            attr = jQuery( '.' + permalink ).attr( 'data-code' );
    6868            cssClass = jQuery( '.' + permalink ).attr('class');
    6969            dashicons.display( attr, cssClass );
     
    7272        }
    7373
    74         jQuery( '#iconlist div' ).click(function() {
     74        jQuery( '#iconlist li' ).click(function() {
    7575
    76             attr = jQuery( this ).attr( 'alt' );
     76            attr = jQuery( this ).attr( 'data-code' );
    7777            cssClass = jQuery( this ).attr( 'class' );
    7878
     
    8282        });
    8383
    84         var $rows = jQuery('#iconlist div');
     84        var $rows = jQuery('#iconlist li');
    8585        jQuery('#search').keyup(function() {
    8686
     
    9595
    9696            $rows.show().filter(function() {
    97                 var text = jQuery(this).text().replace(/\s+/g, ' ').toLowerCase();
     97                var text = jQuery(this).attr('data-keywords').replace(/\s+/g, ' ').toLowerCase();
    9898                return !~text.indexOf(val);
    9999            }).hide();
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/page-dashicons.php

    r11196 r11206  
    1111
    1212wp_enqueue_style(  'dashicons-page', get_template_directory_uri() . '/stylesheets/page-dashicons.css', array(), '20200427' );
    13 wp_enqueue_script( 'dashicons-page', get_template_directory_uri() . '/js/page-dashicons.js', array( 'jquery', 'wp-util' ), '20200427' );
     13wp_enqueue_script( 'dashicons-page', get_template_directory_uri() . '/js/page-dashicons.js', array( 'jquery', 'wp-util' ), '20210826' );
    1414
    1515get_header(); ?>
     
    4040                    echo "<!-- {$group} -->\n";
    4141
     42                    echo "<ul>\n";
    4243                    foreach ( $group_info['icons'] as $name => $info ) {
    4344                        printf(
    44                             '<div alt="%s" class="dashicons %s">%s</div>' . "\n",
    45                             $info['code'],
    46                             $name,
    47                             $info['keywords']
     45                            '<li data-keywords="%s" data-code="%s" class="dashicons %s"><span>%s</span></li>' . "\n",
     46                            esc_attr( $info['keywords'] ),
     47                            esc_attr( $info['code'] ),
     48                            esc_attr( $name ),
     49                            $info['label']
    4850                        );
    4951                    }
     52                    echo "</ul>\n";
    5053                endforeach;
    5154                ?>
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/page-dashicons.scss

    r11203 r11206  
    104104        }
    105105
     106        ul {
     107            margin: 0;
     108        }
     109
    106110        .dashicons {
    107111            position: relative;
     
    111115            width: $size;
    112116            height: $size;
    113             overflow: hidden;
    114117            white-space: nowrap;
    115118            font-size: $iconsize;
     
    117120            cursor: pointer;
    118121
    119             &:before {
    120                 margin-right: $size;
    121                 position: relative;
    122                 left: 20px;
    123             }
    124 
    125             &:after {
    126                 content: attr(alt);
     122            &:hover {
     123                color: #d54e21;
     124            }
     125
     126            span {
    127127                display: block;
    128128                font-size: 14px;
    129                 color: #999;
     129                color: #888;
     130                margin-top: $gutter;
    130131                text-align: center;
    131                 margin-top: $gutter;
    132             }
    133 
    134             &:hover {
    135                 color: #d54e21;
     132                word-wrap: break-word;
     133                white-space: normal;
    136134            }
    137135        }
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/page-dashicons.css

    r11203 r11206  
    101101}
    102102
     103.dashicons-page #iconlist ul {
     104  margin: 0;
     105}
     106
    103107.dashicons-page #iconlist .dashicons {
    104108  position: relative;
     
    108112  width: 96px;
    109113  height: 96px;
    110   overflow: hidden;
    111114  white-space: nowrap;
    112115  font-size: 60px;
     
    115118}
    116119
    117 .dashicons-page #iconlist .dashicons:before {
    118   margin-right: 96px;
    119   position: relative;
    120   left: 20px;
    121 }
    122 
    123 .dashicons-page #iconlist .dashicons:after {
    124   content: attr(alt);
     120.dashicons-page #iconlist .dashicons:hover {
     121  color: #d54e21;
     122}
     123
     124.dashicons-page #iconlist .dashicons span {
    125125  display: block;
    126126  font-size: 14px;
    127   color: #999;
     127  color: #888;
     128  margin-top: 10px;
    128129  text-align: center;
    129   margin-top: 10px;
    130 }
    131 
    132 .dashicons-page #iconlist .dashicons:hover {
    133   color: #d54e21;
     130  word-wrap: break-word;
     131  white-space: normal;
    134132}
    135133
Note: See TracChangeset for help on using the changeset viewer.