Custom Block Icons (#8916)

* Custom icons for Blocks Uses custom svgs at a 24px base, 36px upscale for the inserter. WordPress should signal that block icons ought to be custom for the sake of clarity for users. * Update some more icons. * Add icons for several core blocks. * Use service icons for embeds. * Adjust embed icons. * Expand width of inserter, use lighter design. * Use ligher line arrow for panel collapse / expand. * Adjust inserter design giving more paddings. * Update more block icons and use color API for embeds. * Adjust svg sizes for non-dashicon icons. * Adjust block icon stack. * Use different icons for embed fallback. * Add more embed logos (WordPress, Tumblr). * Add remaining icons for code, shortcode, inline image. * Simplify image SVG and add new Heading icon. * Polish inline image & block chip This changes the icon for inline images to be bigger, and consistent with the image block. It also polishes the block chip to ensure it has the same size in the inspector and in the toolbar, and have the right size. * Cleanup SVG declarations. * Fix appender icons * Normalize SVGs and fix slash command * Normalize focus style in library. * Fix test issues. * Clean "Classic" icon and linter issues. * Polish focus, hover styles. * Tweak how scrolling area works, and add grid units. * It's padding, not margin. Sigh. * Fix switcher * Fix style variations. * Fix unit tests * Refactoring block icons rendering * Fix style lint * Remove debug code :) Sorry * Fix icon styles * Fix block icons e2e test * Make sure the e2e icons test validates the colors properly
WordPress · Aug 16, 2018 · f9e82d0 · f9e82d0
1 parent 63f0cf2
commit f9e82d0
Show file tree

Hide file tree

Showing 56 changed files with 308 additions and 259 deletions.
diff --git a/block-library/freeform/index.js b/block-library/freeform/index.js
@@ -16,7 +16,7 @@ export const settings = {
 
 	description: __( 'It’s the classic WordPress editor and it’s a block! Drop the editor right in.' ),
 
-	icon: 'editor-kitchensink',
+	icon: <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0,0h24v24H0V0z M0,0h24v24H0V0z" fill="none" /><path d="m20 7v10h-16v-10h16m0-2h-16c-1.1 0-1.99 0.9-1.99 2l-0.01 10c0 1.1 0.9 2 2 2h16c1.1 0 2-0.9 2-2v-10c0-1.1-0.9-2-2-2z" /><rect x="11" y="8" width="2" height="2" /><rect x="11" y="11" width="2" height="2" /><rect x="8" y="8" width="2" height="2" /><rect x="8" y="11" width="2" height="2" /><rect x="5" y="11" width="2" height="2" /><rect x="5" y="8" width="2" height="2" /><rect x="8" y="14" width="8" height="2" /><rect x="14" y="11" width="2" height="2" /><rect x="14" y="8" width="2" height="2" /><rect x="17" y="11" width="2" height="2" /><rect x="17" y="8" width="2" height="2" /></svg>,
 
 	category: 'formatting',
 

diff --git a/block-library/html/index.js b/block-library/html/index.js
@@ -20,7 +20,7 @@ export const settings = {
 
 	description: __( 'Add your own HTML (and view it right here as you edit!).' ),
 
-	icon: 'html',
+	icon: <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4.5,11h-2V9H1v6h1.5v-2.5h2V15H6V9H4.5V11z M7,10.5h1.5V15H10v-4.5h1.5V9H7V10.5z M14.5,10l-1-1H12v6h1.5v-3.9  l1,1l1-1V15H17V9h-1.5L14.5,10z M19.5,13.5V9H18v6h5v-1.5H19.5z" /></svg>,
 
 	category: 'formatting',
 

diff --git a/edit-post/assets/stylesheets/_mixins.scss b/edit-post/assets/stylesheets/_mixins.scss
@@ -214,11 +214,13 @@
 }
 
 @mixin block-style__hover {
-	box-shadow: inset 0 0 0 1px rgba($dark-gray-900, 0.2), 0 1px 3px rgba($dark-gray-900, 0.4);
+	background: $light-gray-100;
+	color: $dark-gray-900;
 }
 
 @mixin block-style__focus-active() {
-	box-shadow: inset 0 0 0 1px $dark-gray-300;
+	color: $dark-gray-900;
+	box-shadow: 0 0 0 2px $blue-medium-500;
 
 	// Windows High Contrast mode will show this outline, but not the box-shadow.
 	outline: 2px solid transparent;

diff --git a/edit-post/assets/stylesheets/_variables.scss b/edit-post/assets/stylesheets/_variables.scss
@@ -14,8 +14,13 @@ $editor-line-height: 1.8;
 $big-font-size: 18px;
 $mobile-text-min-font-size: 16px;	// Any font size below 16px will cause Mobile Safari to "zoom in"
 
+// Grid size
+$item-spacing: 10px; // Should deprecate this in favor of $grid-size.
+$grid-size-small: 4px;
+$grid-size: 8px;
+$grid-size-large: 16px;
+
 // Widths, heights & dimensions
-$item-spacing: 10px;
 $panel-padding: 16px;
 $header-height: 56px;
 $panel-header-height: 50px;

diff --git a/edit-post/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap b/edit-post/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap
@@ -27,25 +27,25 @@ exports[`PluginPostPublishPanel renders fill properly 1`] = `
             onClick={[Function]}
             type="button"
           >
-            <Dashicon
+            <svg
               className="components-panel__arrow"
-              icon="arrow-up"
+              height="24px"
+              viewBox="0 0 24 24"
+              width="24px"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                aria-hidden={true}
-                className="dashicon dashicons-arrow-up components-panel__arrow"
-                focusable="false"
-                height={20}
-                role="img"
-                viewBox="0 0 20 20"
-                width={20}
-                xmlns="http://www.w3.org/2000/svg"
-              >
+              <g>
                 <path
-                  d="M7 13l4.03-6L15 13H7z"
+                  d="M0,0h24v24H0V0z"
+                  fill="none"
                 />
-              </svg>
-            </Dashicon>
+              </g>
+              <g>
+                <path
+                  d="M12,8l-6,6l1.41,1.41L12,10.83l4.59,4.58L18,14L12,8z"
+                />
+              </g>
+            </svg>
             My panel title
           </button>
         </Button>

diff --git a/edit-post/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap b/edit-post/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap
@@ -27,25 +27,25 @@ exports[`PluginPrePublishPanel renders fill properly 1`] = `
             onClick={[Function]}
             type="button"
           >
-            <Dashicon
+            <svg
               className="components-panel__arrow"
-              icon="arrow-up"
+              height="24px"
+              viewBox="0 0 24 24"
+              width="24px"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                aria-hidden={true}
-                className="dashicon dashicons-arrow-up components-panel__arrow"
-                focusable="false"
-                height={20}
-                role="img"
-                viewBox="0 0 20 20"
-                width={20}
-                xmlns="http://www.w3.org/2000/svg"
-              >
+              <g>
                 <path
-                  d="M7 13l4.03-6L15 13H7z"
+                  d="M0,0h24v24H0V0z"
+                  fill="none"
                 />
-              </svg>
-            </Dashicon>
+              </g>
+              <g>
+                <path
+                  d="M12,8l-6,6l1.41,1.41L12,10.83l4.59,4.58L18,14L12,8z"
+                />
+              </g>
+            </svg>
             My panel title
           </button>
         </Button>

diff --git a/packages/block-library/src/archives/index.js b/packages/block-library/src/archives/index.js
@@ -15,7 +15,7 @@ export const settings = {
 
 	description: __( 'Display a monthly archive of your site’s Posts.' ),
 
-	icon: 'calendar-alt',
+	icon: <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z" /><g><path d="M7 11h2v2H7v-2zm14-5v14l-2 2H5l-2-2V6l2-2h1V2h2v2h8V2h2v2h1l2 2zM5 8h14V6H5v2zm14 12V10H5v10h14zm-4-7h2v-2h-2v2zm-4 0h2v-2h-2v2z" /></g></svg>,
 
 	category: 'widgets',
 

diff --git a/packages/block-library/src/audio/index.js b/packages/block-library/src/audio/index.js
@@ -16,7 +16,7 @@ export const settings = {
 
 	description: __( 'Embed an audio file and a simple audio player.' ),
 
-	icon: 'format-audio',
+	icon: <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0,0h24v24H0V0z" fill="none" /><path d="m12 3l0.01 10.55c-0.59-0.34-1.27-0.55-2-0.55-2.22 0-4.01 1.79-4.01 4s1.79 4 4.01 4 3.99-1.79 3.99-4v-10h4v-4h-6zm-1.99 16c-1.1 0-2-0.9-2-2s0.9-2 2-2 2 0.9 2 2-0.9 2-2 2z" /></svg>,
 
 	category: 'common',
 

diff --git a/packages/block-library/src/button/index.js b/packages/block-library/src/button/index.js
@@ -65,7 +65,7 @@ export const settings = {
 
 	description: __( 'Want visitors to click to subscribe, buy, or read more? Get their attention with a button.' ),
 
-	icon: 'button',
+	icon: <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z" /><g><path d="M19 6H5L3 8v8l2 2h14l2-2V8l-2-2zm0 10H5V8h14v8z" /></g></svg>,
 
 	category: 'layout',
 

diff --git a/packages/block-library/src/categories/index.js b/packages/block-library/src/categories/index.js
@@ -15,7 +15,7 @@ export const settings = {
 
 	description: __( 'Display a list of all your site’s categories.' ),
 
-	icon: 'list-view',
+	icon: <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0,0h24v24H0V0z" fill="none" /><path d="M12,2l-5.5,9h11L12,2z M12,5.84L13.93,9h-3.87L12,5.84z" /><path d="m17.5 13c-2.49 0-4.5 2.01-4.5 4.5s2.01 4.5 4.5 4.5 4.5-2.01 4.5-4.5-2.01-4.5-4.5-4.5zm0 7c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" /><path d="m3 21.5h8v-8h-8v8zm2-6h4v4h-4v-4z" /></svg>,
 
 	category: 'widgets',
 

diff --git a/packages/block-library/src/code/index.js b/packages/block-library/src/code/index.js
@@ -16,7 +16,7 @@ export const settings = {
 
 	description: __( 'Add text that respects your spacing and tabs -- perfect for displaying code.' ),
 
-	icon: 'editor-code',
+	icon: <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0,0h24v24H0V0z" fill="none" /><path d="M9.4,16.6L4.8,12l4.6-4.6L8,6l-6,6l6,6L9.4,16.6z M14.6,16.6l4.6-4.6l-4.6-4.6L16,6l6,6l-6,6L14.6,16.6z" /></svg>,
 
 	category: 'formatting',
 

diff --git a/packages/block-library/src/columns/index.js b/packages/block-library/src/columns/index.js
@@ -49,7 +49,7 @@ export const settings = {
 		__( 'beta' )
 	),
 
-	icon: 'columns',
+	icon: <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z" /><g><path d="M21 4H3L2 5v14l1 1h18l1-1V5l-1-1zM8 18H4V6h4v12zm6 0h-4V6h4v12zm6 0h-4V6h4v12z" /></g></svg>,
 
 	category: 'layout',
 

diff --git a/packages/block-library/src/cover-image/index.js b/packages/block-library/src/cover-image/index.js
@@ -59,7 +59,7 @@ export const settings = {
 
 	description: __( 'Add a full-width image, and layer text over it — great for headers.' ),
 
-	icon: 'cover-image',
+	icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 4h7V2H4c-1.1 0-2 .9-2 2v7h2V4zm6 9l-4 5h12l-3-4-2.03 2.71L10 13zm7-4.5c0-.83-.67-1.5-1.5-1.5S14 7.67 14 8.5s.67 1.5 1.5 1.5S17 9.33 17 8.5zM20 2h-7v2h7v7h2V4c0-1.1-.9-2-2-2zm0 18h-7v2h7c1.1 0 2-.9 2-2v-7h-2v7zM4 13H2v7c0 1.1.9 2 2 2h7v-2H4v-7z" /><path d="M0 0h24v24H0z" fill="none" /></svg>,
 
 	category: 'common',