Changeset 11206 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/page-dashicons.php

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

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/page-dashicons.php (modified) (2 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/page-dashicons.php

@@ -11 +11 @@
 
 wp_enqueue_style(  'dashicons-page', get_template_directory_uri() . '/stylesheets/page-dashicons.css', array(), '20200427' );
-wp_enqueue_script( 'dashicons-page', get_template_directory_uri() . '/js/page-dashicons.js', array( 'jquery', 'wp-util' ), '20200427' );
+wp_enqueue_script( 'dashicons-page', get_template_directory_uri() . '/js/page-dashicons.js', array( 'jquery', 'wp-util' ), '20210826' );
 
 get_header(); ?>
@@ -40 +40 @@
                     echo "<!-- {$group} -->\n";
 
+                    echo "<ul>\n";
                     foreach ( $group_info['icons'] as $name => $info ) {
                         printf(
-                            '<div alt="%s" class="dashicons %s">%s</div>' . "\n",
-                            $info['code'],
-                            $name,
-                            $info['keywords']
+                            '<li data-keywords="%s" data-code="%s" class="dashicons %s"><span>%s</span></li>' . "\n",
+                            esc_attr( $info['keywords'] ),
+                            esc_attr( $info['code'] ),
+                            esc_attr( $name ),
+                            $info['label']
                         );
                     }
+                    echo "</ul>\n";
                 endforeach;
                 ?>