Try: Graduate all Gutenberg icons to the icon font. (#402)

Helps fix WordPress/gutenberg#20003. Back in the day when we moved from a manual process, to a build script for Dashicons, we put Gutenberg icons in a separate folder that was not included in the icon font. The context for that started in a meeting here: https://wordpress.slack.com/archives/C03EESJAW/p1498836928887730 — this meeting outlined the process of creating a trac ticket for every icon created and approved separately. Some of that process is outlined in https://wordpress.slack.com/archives/C03EESJAW/p1498838219357464. In order to stay nimble and allow us to move fast with creating Gutenberg icons, it was suggested (https://wordpress.slack.com/archives/C03EESJAW/p1498838530476355) to put Gutenberg icons in a separte folder that is not included in the icon font, landing only in the React component. But the icons have been there for a bit now, and in effort to fix #20003, these icons now need to graduate. Because of their time in the editor, it feels fair to review them all in a single ticket.
WordPress · Mar 18, 2020 · 3994d85 · 3994d85
1 parent 3c2dc45
commit 3994d85
Show file tree

Hide file tree

Showing 44 changed files with 519 additions and 15 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -70,7 +70,7 @@ module.exports = function( grunt ) {
 			},
 		},
 
-		// Generate a web font, omit Gutenberg files for now, as they need separate approval
+		// Generate a web font.
 		webfont: {
 			icons: {
 				src: 'svg-min/*.svg',

diff --git a/codepoints.json b/codepoints.json
@@ -241,7 +241,6 @@
     "trash": 61826,
     "heading": 61710,
     "insert": 61711,
-    "saved": 61715,
     "align-full-width": 61716,
     "button": 61722,
     "align-wide": 61723,
@@ -259,7 +258,6 @@
     "admin-site-alt": 61725,
     "admin-site-alt2": 61726,
     "admin-site-alt3": 61727,
-    "html": 61729,
     "rest-api": 61732,
     "yes-alt": 61738,
     "buddicons-bbpress-logo": 62583,
@@ -278,5 +276,31 @@
     "plugins-checked": 62597,
     "text-page": 61729,
     "update-alt": 61715,
-    "code-standards": 61754
+    "code-standards": 61754,
+    "align-pull-left": 61706,
+    "align-pull-right": 61707,
+    "block-default": 61739,
+    "cloud-saved": 61751,
+    "cloud-upload": 61755,
+    "columns": 61756,
+    "cover-image": 61757,
+    "embed-audio": 61758,
+    "embed-generic": 61759,
+    "embed-photo": 61764,
+    "embed-post": 61766,
+    "embed-video": 61769,
+    "exit": 61770,
+    "html": 61771,
+    "info-outline": 61772,
+    "insert-after": 61773,
+    "insert-before": 61774,
+    "remove": 61775,
+    "shortcode": 61776,
+    "table-col-after": 61777,
+    "table-col-before": 61778,
+    "table-col-delete": 61786,
+    "table-row-after": 61787,
+    "table-row-before": 61788,
+    "table-row-delete": 61789,
+    "saved": 61790
 }
diff --git a/icon-font/css/dashicons.css b/icon-font/css/dashicons.css
diff --git a/icon-font/dashicons.html b/icon-font/dashicons.html
diff --git a/icon-font/fonts/dashicons.eot b/icon-font/fonts/dashicons.eot
diff --git a/icon-font/fonts/dashicons.ttf b/icon-font/fonts/dashicons.ttf
diff --git a/icon-font/fonts/dashicons.woff2 b/icon-font/fonts/dashicons.woff2
diff --git a/react/example.js b/react/example.js
diff --git a/react/example.jsx b/react/example.jsx
@@ -43,12 +43,16 @@ module.exports = React.createClass( {
 				<Dashicon icon="album" size={ 40 } onClick={ this.handleClick.bind( this, 'album' ) } />
 				<Dashicon icon="align-center" size={ 40 } onClick={ this.handleClick.bind( this, 'align-center' ) } />
 				<Dashicon icon="gutenberg/align-full-width" size={ 40 } onClick={ this.handleClick.bind( this, 'gutenberg/align-full-width' ) } />
+				<Dashicon icon="align-full-width" size={ 40 } onClick={ this.handleClick.bind( this, 'align-full-width' ) } />
 				<Dashicon icon="align-left" size={ 40 } onClick={ this.handleClick.bind( this, 'align-left' ) } />
 				<Dashicon icon="align-none" size={ 40 } onClick={ this.handleClick.bind( this, 'align-none' ) } />
 				<Dashicon icon="gutenberg/align-pull-left" size={ 40 } onClick={ this.handleClick.bind( this, 'gutenberg/align-pull-left' ) } />
+				<Dashicon icon="align-pull-left" size={ 40 } onClick={ this.handleClick.bind( this, 'align-pull-left' ) } />
+				<Dashicon icon="align-pull-right" size={ 40 } onClick={ this.handleClick.bind( this, 'align-pull-right' ) } />
 				<Dashicon icon="gutenberg/align-pull-right" size={ 40 } onClick={ this.handleClick.bind( this, 'gutenberg/align-pull-right' ) } />
 				<Dashicon icon="align-right" size={ 40 } onClick={ this.handleClick.bind( this, 'align-right' ) } />
 				<Dashicon icon="gutenberg/align-wide" size={ 40 } onClick={ this.handleClick.bind( this, 'gutenberg/align-wide' ) } />
+				<Dashicon icon="align-wide" size={ 40 } onClick={ this.handleClick.bind( this, 'align-wide' ) } />
 				<Dashicon icon="analytics" size={ 40 } onClick={ this.handleClick.bind( this, 'analytics' ) } />
 				<Dashicon icon="archive" size={ 40 } onClick={ this.handleClick.bind( this, 'archive' ) } />
 				<Dashicon icon="arrow-down-alt" size={ 40 } onClick={ this.handleClick.bind( this, 'arrow-down-alt' ) } />
@@ -67,6 +71,7 @@ module.exports = React.createClass( {
 				<Dashicon icon="art" size={ 40 } onClick={ this.handleClick.bind( this, 'art' ) } />
 				<Dashicon icon="awards" size={ 40 } onClick={ this.handleClick.bind( this, 'awards' ) } />
 				<Dashicon icon="backup" size={ 40 } onClick={ this.handleClick.bind( this, 'backup' ) } />
+				<Dashicon icon="block-default" size={ 40 } onClick={ this.handleClick.bind( this, 'block-default' ) } />
 				<Dashicon icon="gutenberg/block-default" size={ 40 } onClick={ this.handleClick.bind( this, 'gutenberg/block-default' ) } />
 				<Dashicon icon="book-alt" size={ 40 } onClick={ this.handleClick.bind( this, 'book-alt' ) } />
 				<Dashicon icon="book" size={ 40 } onClick={ this.handleClick.bind( this, 'book' ) } />
@@ -86,6 +91,7 @@ module.exports = React.createClass( {
 				<Dashicon icon="businessperson" size={ 40 } onClick={ this.handleClick.bind( this, 'businessperson' ) } />
 				<Dashicon icon="businesswoman" size={ 40 } onClick={ this.handleClick.bind( this, 'businesswoman' ) } />
 				<Dashicon icon="gutenberg/button" size={ 40 } onClick={ this.handleClick.bind( this, 'gutenberg/button' ) } />
+				<Dashicon icon="button" size={ 40 } onClick={ this.handleClick.bind( this, 'button' ) } />
 				<Dashicon icon="calendar-alt" size={ 40 } onClick={ this.handleClick.bind( this, 'calendar-alt' ) } />
 				<Dashicon icon="calendar" size={ 40 } onClick={ this.handleClick.bind( this, 'calendar' ) } />
 				<Dashicon icon="camera-alt" size={ 40 } onClick={ this.handleClick.bind( this, 'camera-alt' ) } />
@@ -100,10 +106,13 @@ module.exports = React.createClass( {
 				<Dashicon icon="clipboard" size={ 40 } onClick={ this.handleClick.bind( this, 'clipboard' ) } />
 				<Dashicon icon="clock" size={ 40 } onClick={ this.handleClick.bind( this, 'clock' ) } />
 				<Dashicon icon="gutenberg/cloud-saved" size={ 40 } onClick={ this.handleClick.bind( this, 'gutenberg/cloud-saved' ) } />
+				<Dashicon icon="cloud-saved" size={ 40 } onClick={ this.handleClick.bind( this, 'cloud-saved' ) } />
+				<Dashicon icon="cloud-upload" size={ 40 } onClick={ this.handleClick.bind( this, 'cloud-upload' ) } />
 				<Dashicon icon="gutenberg/cloud-upload" size={ 40 } onClick={ this.handleClick.bind( this, 'gutenberg/cloud-upload' ) } />
 				<Dashicon icon="cloud" size={ 40 } onClick={ this.handleClick.bind( this, 'cloud' ) } />
 				<Dashicon icon="code-standards" size={ 40 } onClick={ this.handleClick.bind( this, 'code-standards' ) } />
 				<Dashicon icon="color-picker" size={ 40 } onClick={ this.handleClick.bind( this, 'color-picker' ) } />
+				<Dashicon icon="columns" size={ 40 } onClick={ this.handleClick.bind( this, 'columns' ) } />
 				<Dashicon icon="gutenberg/columns" size={ 40 } onClick={ this.handleClick.bind( this, 'gutenberg/columns' ) } />
 				<Dashicon icon="controls-back" size={ 40 } onClick={ this.handleClick.bind( this, 'controls-back' ) } />
 				<Dashicon icon="controls-forward" size={ 40 } onClick={ this.handleClick.bind( this, 'controls-forward' ) } />
@@ -114,6 +123,7 @@ module.exports = React.createClass( {
 				<Dashicon icon="controls-skipforward" size={ 40 } onClick={ this.handleClick.bind( this, 'controls-skipforward' ) } />
 				<Dashicon icon="controls-volumeoff" size={ 40 } onClick={ this.handleClick.bind( this, 'controls-volumeoff' ) } />
 				<Dashicon icon="controls-volumeon" size={ 40 } onClick={ this.handleClick.bind( this, 'controls-volumeon' ) } />
+				<Dashicon icon="cover-image" size={ 40 } onClick={ this.handleClick.bind( this, 'cover-image' ) } />
 				<Dashicon icon="gutenberg/cover-image" size={ 40 } onClick={ this.handleClick.bind( this, 'gutenberg/cover-image' ) } />
 				<Dashicon icon="dashboard" size={ 40 } onClick={ this.handleClick.bind( this, 'dashboard' ) } />
 				<Dashicon icon="desktop" size={ 40 } onClick={ this.handleClick.bind( this, 'desktop' ) } />
@@ -155,17 +165,24 @@ module.exports = React.createClass( {
 				<Dashicon icon="editor-underline" size={ 40 } onClick={ this.handleClick.bind( this, 'editor-underline' ) } />
 				<Dashicon icon="editor-unlink" size={ 40 } onClick={ this.handleClick.bind( this, 'editor-unlink' ) } />
 				<Dashicon icon="editor-video" size={ 40 } onClick={ this.handleClick.bind( this, 'editor-video' ) } />
+				<Dashicon icon="ellipsis" size={ 40 } onClick={ this.handleClick.bind( this, 'ellipsis' ) } />
 				<Dashicon icon="gutenberg/ellipsis" size={ 40 } onClick={ this.handleClick.bind( this, 'gutenberg/ellipsis' ) } />
 				<Dashicon icon="email-alt" size={ 40 } onClick={ this.handleClick.bind( this, 'email-alt' ) } />
 				<Dashicon icon="email-alt2" size={ 40 } onClick={ this.handleClick.bind( this, 'email-alt2' ) } />
 				<Dashicon icon="email" size={ 40 } onClick={ this.handleClick.bind( this, 'email' ) } />
 				<Dashicon icon="gutenberg/embed-audio" size={ 40 } onClick={ this.handleClick.bind( this, 'gutenberg/embed-audio' ) } />
+				<Dashicon icon="embed-audio" size={ 40 } onClick={ this.handleClick.bind( this, 'embed-audio' ) } />
 				<Dashicon icon="gutenberg/embed-generic" size={ 40 } onClick={ this.handleClick.bind( this, 'gutenberg/embed-generic' ) } />
+				<Dashicon icon="embed-generic" size={ 40 } onClick={ this.handleClick.bind( this, 'embed-generic' ) } />
 				<Dashicon icon="gutenberg/embed-photo" size={ 40 } onClick={ this.handleClick.bind( this, 'gutenberg/embed-photo' ) } />
+				<Dashicon icon="embed-photo" size={ 40 } onClick={ this.handleClick.bind( this, 'embed-photo' ) } />
 				<Dashicon icon="gutenberg/embed-post" size={ 40 } onClick={ this.handleClick.bind( this, 'gutenberg/embed-post' ) } />
+				<Dashicon icon="embed-post" size={ 40 } onClick={ this.handleClick.bind( this, 'embed-post' ) } />
+				<Dashicon icon="embed-video" size={ 40 } onClick={ this.handleClick.bind( this, 'embed-video' ) } />
 				<Dashicon icon="gutenberg/embed-video" size={ 40 } onClick={ this.handleClick.bind( this, 'gutenberg/embed-video' ) } />
 				<Dashicon icon="excerpt-view" size={ 40 } onClick={ this.handleClick.bind( this, 'excerpt-view' ) } />
 				<Dashicon icon="gutenberg/exit" size={ 40 } onClick={ this.handleClick.bind( this, 'gutenberg/exit' ) } />
+				<Dashicon icon="exit" size={ 40 } onClick={ this.handleClick.bind( this, 'exit' ) } />
 				<Dashicon icon="external" size={ 40 } onClick={ this.handleClick.bind( this, 'external' ) } />
 				<Dashicon icon="facebook-alt" size={ 40 } onClick={ this.handleClick.bind( this, 'facebook-alt' ) } />
 				<Dashicon icon="facebook" size={ 40 } onClick={ this.handleClick.bind( this, 'facebook' ) } />
@@ -186,8 +203,10 @@ module.exports = React.createClass( {
 				<Dashicon icon="groups" size={ 40 } onClick={ this.handleClick.bind( this, 'groups' ) } />
 				<Dashicon icon="hammer" size={ 40 } onClick={ this.handleClick.bind( this, 'hammer' ) } />
 				<Dashicon icon="gutenberg/heading" size={ 40 } onClick={ this.handleClick.bind( this, 'gutenberg/heading' ) } />
+				<Dashicon icon="heading" size={ 40 } onClick={ this.handleClick.bind( this, 'heading' ) } />
 				<Dashicon icon="heart" size={ 40 } onClick={ this.handleClick.bind( this, 'heart' ) } />
 				<Dashicon icon="hidden" size={ 40 } onClick={ this.handleClick.bind( this, 'hidden' ) } />
+				<Dashicon icon="html" size={ 40 } onClick={ this.handleClick.bind( this, 'html' ) } />
 				<Dashicon icon="gutenberg/html" size={ 40 } onClick={ this.handleClick.bind( this, 'gutenberg/html' ) } />
 				<Dashicon icon="id-alt" size={ 40 } onClick={ this.handleClick.bind( this, 'id-alt' ) } />
 				<Dashicon icon="id" size={ 40 } onClick={ this.handleClick.bind( this, 'id' ) } />
@@ -202,9 +221,13 @@ module.exports = React.createClass( {
 				<Dashicon icon="images-alt2" size={ 40 } onClick={ this.handleClick.bind( this, 'images-alt2' ) } />
 				<Dashicon icon="index-card" size={ 40 } onClick={ this.handleClick.bind( this, 'index-card' ) } />
 				<Dashicon icon="gutenberg/info-outline" size={ 40 } onClick={ this.handleClick.bind( this, 'gutenberg/info-outline' ) } />
+				<Dashicon icon="info-outline" size={ 40 } onClick={ this.handleClick.bind( this, 'info-outline' ) } />
 				<Dashicon icon="info" size={ 40 } onClick={ this.handleClick.bind( this, 'info' ) } />
+				<Dashicon icon="insert-after" size={ 40 } onClick={ this.handleClick.bind( this, 'insert-after' ) } />
 				<Dashicon icon="gutenberg/insert-after" size={ 40 } onClick={ this.handleClick.bind( this, 'gutenberg/insert-after' ) } />
+				<Dashicon icon="insert-before" size={ 40 } onClick={ this.handleClick.bind( this, 'insert-before' ) } />
 				<Dashicon icon="gutenberg/insert-before" size={ 40 } onClick={ this.handleClick.bind( this, 'gutenberg/insert-before' ) } />
+				<Dashicon icon="insert" size={ 40 } onClick={ this.handleClick.bind( this, 'insert' ) } />
 				<Dashicon icon="gutenberg/insert" size={ 40 } onClick={ this.handleClick.bind( this, 'gutenberg/insert' ) } />
 				<Dashicon icon="instagram" size={ 40 } onClick={ this.handleClick.bind( this, 'instagram' ) } />
 				<Dashicon icon="laptop" size={ 40 } onClick={ this.handleClick.bind( this, 'laptop' ) } />
@@ -257,9 +280,11 @@ module.exports = React.createClass( {
 				<Dashicon icon="randomize" size={ 40 } onClick={ this.handleClick.bind( this, 'randomize' ) } />
 				<Dashicon icon="redo" size={ 40 } onClick={ this.handleClick.bind( this, 'redo' ) } />
 				<Dashicon icon="gutenberg/remove" size={ 40 } onClick={ this.handleClick.bind( this, 'gutenberg/remove' ) } />
+				<Dashicon icon="remove" size={ 40 } onClick={ this.handleClick.bind( this, 'remove' ) } />
 				<Dashicon icon="rest-api" size={ 40 } onClick={ this.handleClick.bind( this, 'rest-api' ) } />
 				<Dashicon icon="rss" size={ 40 } onClick={ this.handleClick.bind( this, 'rss' ) } />
 				<Dashicon icon="gutenberg/saved" size={ 40 } onClick={ this.handleClick.bind( this, 'gutenberg/saved' ) } />
+				<Dashicon icon="saved" size={ 40 } onClick={ this.handleClick.bind( this, 'saved' ) } />
 				<Dashicon icon="schedule" size={ 40 } onClick={ this.handleClick.bind( this, 'schedule' ) } />
 				<Dashicon icon="screenoptions" size={ 40 } onClick={ this.handleClick.bind( this, 'screenoptions' ) } />
 				<Dashicon icon="search" size={ 40 } onClick={ this.handleClick.bind( this, 'search' ) } />
@@ -269,6 +294,7 @@ module.exports = React.createClass( {
 				<Dashicon icon="shield-alt" size={ 40 } onClick={ this.handleClick.bind( this, 'shield-alt' ) } />
 				<Dashicon icon="shield" size={ 40 } onClick={ this.handleClick.bind( this, 'shield' ) } />
 				<Dashicon icon="gutenberg/shortcode" size={ 40 } onClick={ this.handleClick.bind( this, 'gutenberg/shortcode' ) } />
+				<Dashicon icon="shortcode" size={ 40 } onClick={ this.handleClick.bind( this, 'shortcode' ) } />
 				<Dashicon icon="slides" size={ 40 } onClick={ this.handleClick.bind( this, 'slides' ) } />
 				<Dashicon icon="smartphone" size={ 40 } onClick={ this.handleClick.bind( this, 'smartphone' ) } />
 				<Dashicon icon="smiley" size={ 40 } onClick={ this.handleClick.bind( this, 'smiley' ) } />
@@ -279,12 +305,18 @@ module.exports = React.createClass( {
 				<Dashicon icon="star-half" size={ 40 } onClick={ this.handleClick.bind( this, 'star-half' ) } />
 				<Dashicon icon="sticky" size={ 40 } onClick={ this.handleClick.bind( this, 'sticky' ) } />
 				<Dashicon icon="store" size={ 40 } onClick={ this.handleClick.bind( this, 'store' ) } />
+				<Dashicon icon="table-col-after" size={ 40 } onClick={ this.handleClick.bind( this, 'table-col-after' ) } />
 				<Dashicon icon="gutenberg/table-col-after" size={ 40 } onClick={ this.handleClick.bind( this, 'gutenberg/table-col-after' ) } />
+				<Dashicon icon="table-col-before" size={ 40 } onClick={ this.handleClick.bind( this, 'table-col-before' ) } />
 				<Dashicon icon="gutenberg/table-col-before" size={ 40 } onClick={ this.handleClick.bind( this, 'gutenberg/table-col-before' ) } />
 				<Dashicon icon="gutenberg/table-col-delete" size={ 40 } onClick={ this.handleClick.bind( this, 'gutenberg/table-col-delete' ) } />
+				<Dashicon icon="table-col-delete" size={ 40 } onClick={ this.handleClick.bind( this, 'table-col-delete' ) } />
+				<Dashicon icon="table-row-after" size={ 40 } onClick={ this.handleClick.bind( this, 'table-row-after' ) } />
 				<Dashicon icon="gutenberg/table-row-after" size={ 40 } onClick={ this.handleClick.bind( this, 'gutenberg/table-row-after' ) } />
 				<Dashicon icon="gutenberg/table-row-before" size={ 40 } onClick={ this.handleClick.bind( this, 'gutenberg/table-row-before' ) } />
+				<Dashicon icon="table-row-before" size={ 40 } onClick={ this.handleClick.bind( this, 'table-row-before' ) } />
 				<Dashicon icon="gutenberg/table-row-delete" size={ 40 } onClick={ this.handleClick.bind( this, 'gutenberg/table-row-delete' ) } />
+				<Dashicon icon="table-row-delete" size={ 40 } onClick={ this.handleClick.bind( this, 'table-row-delete' ) } />
 				<Dashicon icon="tablet" size={ 40 } onClick={ this.handleClick.bind( this, 'tablet' ) } />
 				<Dashicon icon="tag" size={ 40 } onClick={ this.handleClick.bind( this, 'tag' ) } />
 				<Dashicon icon="tagcloud" size={ 40 } onClick={ this.handleClick.bind( this, 'tagcloud' ) } />

diff --git a/react/index.js b/react/index.js