Add reusable block icon. (#23552)

* Add reusable block icon. * Move external link icon to the right. Needs a follow up in one of the PRs in #24539. * Update checkmark. Fixes #23185. * Allow both shortcuts and icons. * Update snapshots. * Optically balance more. * Add download icon, use for "Export". * Update snaps again.
WordPress · Sep 3, 2020 · 3e57ffd · 3e57ffd
1 parent 430c938
commit 3e57ffd
Show file tree

Hide file tree

Showing 18 changed files with 83 additions and 58 deletions.
diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
@@ -66,7 +66,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M9 18.6L3.5 13l1-1L9 16.4l9.5-9.9 1 1z"
+                d="M18.3 5.6L9.9 16.9l-4.6-3.4-.9 1.2 5.8 4.3 9.3-12.6z"
               />
             </svg>
           </div>

diff --git a/packages/block-editor/src/components/preview-options/style.scss b/packages/block-editor/src/components/preview-options/style.scss
@@ -28,9 +28,7 @@
 	}
 
 	.components-menu-group + .components-menu-group {
-		padding: $grid-unit-10 $grid-unit-15;
-		margin-left: -$grid-unit-15;
-		margin-right: -$grid-unit-15;
+		padding: $grid-unit-10;
 	}
 }
 

diff --git a/packages/components/src/color-palette/test/__snapshots__/index.js.snap b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
@@ -357,7 +357,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <Path
-                    d="M9 18.6L3.5 13l1-1L9 16.4l9.5-9.9 1 1z"
+                    d="M18.3 5.6L9.9 16.9l-4.6-3.4-.9 1.2 5.8 4.3 9.3-12.6z"
                   />
                 </SVG>
               }
@@ -380,10 +380,10 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <Path
-                    d="M9 18.6L3.5 13l1-1L9 16.4l9.5-9.9 1 1z"
+                    d="M18.3 5.6L9.9 16.9l-4.6-3.4-.9 1.2 5.8 4.3 9.3-12.6z"
                   >
                     <path
-                      d="M9 18.6L3.5 13l1-1L9 16.4l9.5-9.9 1 1z"
+                      d="M18.3 5.6L9.9 16.9l-4.6-3.4-.9 1.2 5.8 4.3 9.3-12.6z"
                     />
                   </Path>
                 </svg>

diff --git a/packages/components/src/dropdown-menu/style.scss b/packages/components/src/dropdown-menu/style.scss
@@ -53,11 +53,12 @@
 	.components-menu-item__button.components-button {
 		min-height: $button-size;
 		height: auto;
-		padding-left: $button-size-small + $grid-unit-10 + $grid-unit-10;
 		text-align: left;
+		padding-left: $grid-unit-10;
+		padding-right: $grid-unit-10;
 
-		&.has-icon {
-			padding-left: $grid-unit-10;
+		.components-menu-item__info-wrapper {
+			max-width: calc(100% - #{ $button-size-small + $grid-unit-10 });
 		}
 	}
 
@@ -87,7 +88,3 @@
 		}
 	}
 }
-
-.components-dropdown-menu__menu.no-icons  .components-menu-item__button.components-button {
-	padding: 0 $grid-unit-15;
-}
diff --git a/packages/components/src/menu-group/style.scss b/packages/components/src/menu-group/style.scss
@@ -5,7 +5,8 @@
 }
 
 .components-menu-group__label {
-	padding: 0;
+	padding: 0 $grid-unit-10;
+	margin-top: $grid-unit-05;
 	margin-bottom: $grid-unit-15;
 	color: $gray-700;
 	text-transform: uppercase;

diff --git a/packages/components/src/menu-item/index.js b/packages/components/src/menu-item/index.js
@@ -14,6 +14,7 @@ import { cloneElement, forwardRef } from '@wordpress/element';
  */
 import Shortcut from '../shortcut';
 import Button from '../button';
+import Icon from '../icon';
 
 /**
  * Renders a generic menu item for use inside the more menu.
@@ -63,7 +64,6 @@ export function MenuItem(
 	return (
 		<Button
 			ref={ ref }
-			icon={ icon }
 			// Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked
 			aria-checked={
 				role === 'menuitemcheckbox' || role === 'menuitemradio'
@@ -79,6 +79,7 @@ export function MenuItem(
 				className="components-menu-item__shortcut"
 				shortcut={ shortcut }
 			/>
+			{ icon && <Icon icon={ icon } /> }
 		</Button>
 	);
 }

diff --git a/packages/components/src/menu-item/style.scss b/packages/components/src/menu-item/style.scss
@@ -2,19 +2,16 @@
 .components-menu-item__button.components-button {
 	width: 100%;
 
-	// Target plugin icons that can have arbitrary classes by using an aggressive selector.
-	// @todo: is this still necessary?
-	.dashicon,
-	.components-menu-items__item-icon,
-	svg.components-menu-items__item-icon,
-	> span > svg {
-		margin-right: $grid-unit-10;
-	}
-
 	.components-menu-items__item-icon {
+		margin-right: -2px; // This optically balances the icon.
+		margin-left: auto;
 		display: inline-block;
 		flex: 0 0 auto;
 	}
+
+	.components-menu-item__shortcut + .components-menu-items__item-icon {
+		margin-left: $grid-unit-10;
+	}
 }
 
 .components-menu-item__info-wrapper {

diff --git a/packages/components/src/menu-item/test/__snapshots__/index.js.snap b/packages/components/src/menu-item/test/__snapshots__/index.js.snap
@@ -4,17 +4,6 @@ exports[`MenuItem should match snapshot when all props provided 1`] = `
 <ForwardRef(Button)
   aria-checked={true}
   className="components-menu-item__button my-class"
-  icon={
-    <SVG
-      className="components-menu-items__item-icon"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <Path
-        d="M4 9v1.5h16V9H4zm12 5.5h4V13h-4v1.5zm-6 0h4V13h-4v1.5zm-6 0h4V13H4v1.5z"
-      />
-    </SVG>
-  }
   onClick={[Function]}
   role="menuitemcheckbox"
 >
@@ -23,6 +12,19 @@ exports[`MenuItem should match snapshot when all props provided 1`] = `
     className="components-menu-item__shortcut"
     shortcut="mod+shift+alt+w"
   />
+  <Icon
+    icon={
+      <SVG
+        className="components-menu-items__item-icon"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <Path
+          d="M4 9v1.5h16V9H4zm12 5.5h4V13h-4v1.5zm-6 0h4V13h-4v1.5zm-6 0h4V13H4v1.5z"
+        />
+      </SVG>
+    }
+  />
 </ForwardRef(Button)>
 `;
 
@@ -50,17 +52,6 @@ exports[`MenuItem should match snapshot when info is provided 1`] = `
 exports[`MenuItem should match snapshot when isSelected and role are optionally provided 1`] = `
 <ForwardRef(Button)
   className="components-menu-item__button my-class"
-  icon={
-    <SVG
-      className="components-menu-items__item-icon"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <Path
-        d="M4 9v1.5h16V9H4zm12 5.5h4V13h-4v1.5zm-6 0h4V13h-4v1.5zm-6 0h4V13H4v1.5z"
-      />
-    </SVG>
-  }
   onClick={[Function]}
   role="menuitem"
 >
@@ -69,6 +60,19 @@ exports[`MenuItem should match snapshot when isSelected and role are optionally
     className="components-menu-item__shortcut"
     shortcut="mod+shift+alt+w"
   />
+  <Icon
+    icon={
+      <SVG
+        className="components-menu-items__item-icon"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <Path
+          d="M4 9v1.5h16V9H4zm12 5.5h4V13h-4v1.5zm-6 0h4V13h-4v1.5zm-6 0h4V13H4v1.5z"
+        />
+      </SVG>
+    }
+  />
 </ForwardRef(Button)>
 `;
 

diff --git a/packages/components/src/menu-items-choice/style.scss b/packages/components/src/menu-items-choice/style.scss
@@ -1,12 +1,10 @@
 .components-menu-items-choice,
 .components-menu-items-choice.components-button {
-	padding-left: $button-size-small + $grid-unit-10 + $grid-unit-10;
-
 	svg {
-		margin-right: $grid-unit-10;
+		margin-right: $grid-unit-15;
 	}
 
 	&.has-icon {
-		padding-left: $grid-unit-10;
+		padding-left: $grid-unit-15;
 	}
 }
diff --git a/packages/edit-post/src/components/device-preview/index.js b/packages/edit-post/src/components/device-preview/index.js
@@ -47,8 +47,8 @@ export default function DevicePreview() {
 						forcePreviewLink={ isSaving ? null : undefined }
 						textContent={
 							<>
-								<Icon icon={ external } />
 								{ __( 'Preview in new tab' ) }
+								<Icon icon={ external } />
 							</>
 						}
 					/>

diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
@@ -107,7 +107,7 @@
 	justify-content: flex-start;
 
 	svg {
-		margin-right: $grid-unit-10;
+		margin-left: auto;
 	}
 }
 

diff --git a/...post/src/components/options-modal/options/test/__snapshots__/enable-custom-fields.js.snap b/...post/src/components/options-modal/options/test/__snapshots__/enable-custom-fields.js.snap
@@ -32,7 +32,7 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M9 18.6L3.5 13l1-1L9 16.4l9.5-9.9 1 1z"
+            d="M18.3 5.6L9.9 16.9l-4.6-3.4-.9 1.2 5.8 4.3 9.3-12.6z"
           />
         </svg>
       </span>
@@ -90,7 +90,7 @@ exports[`EnableCustomFieldsOption renders a checked checkbox when custom fields
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M9 18.6L3.5 13l1-1L9 16.4l9.5-9.9 1 1z"
+            d="M18.3 5.6L9.9 16.9l-4.6-3.4-.9 1.2 5.8 4.3 9.3-12.6z"
           />
         </svg>
       </span>

diff --git a/packages/edit-site/src/plugins/index.js b/packages/edit-site/src/plugins/index.js
@@ -11,6 +11,7 @@ import { __ } from '@wordpress/i18n';
 import { registerPlugin } from '@wordpress/plugins';
 import { addQueryArgs } from '@wordpress/url';
 import apiFetch from '@wordpress/api-fetch';
+import { download } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -24,7 +25,7 @@ registerPlugin( 'edit-site', {
 				<ToolsMoreMenuGroup>
 					<MenuItem
 						role="menuitem"
-						icon="download"
+						icon={ download }
 						onClick={ () =>
 							apiFetch( {
 								path: '/__experimental/edit-site/v1/export',

diff --git a/packages/editor/src/components/reusable-blocks-buttons/reusable-block-convert-button.js b/packages/editor/src/components/reusable-blocks-buttons/reusable-block-convert-button.js
@@ -4,6 +4,7 @@
 import { hasBlockSupport, isReusableBlock } from '@wordpress/blocks';
 import { BlockSettingsMenuControls } from '@wordpress/block-editor';
 import { MenuItem } from '@wordpress/components';
+import { reusableBlock } from '@wordpress/icons';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
@@ -68,6 +69,7 @@ export default function ReusableBlockConvertButton( { clientIds } ) {
 		<BlockSettingsMenuControls>
 			{ ( { onClose } ) => (
 				<MenuItem
+					icon={ reusableBlock }
 					onClick={ () => {
 						convertBlockToReusable( clientIds );
 						onClose();

diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
@@ -15,6 +15,7 @@ export { default as audio } from './library/audio';
 export { default as backup } from './library/backup';
 export { default as blockDefault } from './library/block-default';
 export { default as blockTable } from './library/block-table';
+export { default as box } from './library/box';
 export { default as brush } from './library/brush';
 export { default as button } from './library/button';
 export { default as calendar } from './library/calendar';
@@ -50,6 +51,7 @@ export { default as currencyEuro } from './library/currency-euro';
 export { default as currencyPound } from './library/currency-pound';
 export { default as desktop } from './library/desktop';
 export { default as dragHandle } from './library/drag-handle';
+export { default as download } from './library/download';
 export { default as edit } from './library/edit';
 export { default as external } from './library/external';
 export { default as file } from './library/file';
@@ -128,7 +130,6 @@ export { default as postFeaturedImage } from './library/post-featured-image';
 export { default as postList } from './library/post-list';
 export { default as postTitle } from './library/post-title';
 export { default as preformatted } from './library/preformatted';
-export { default as box } from './library/box';
 export { default as pullLeft } from './library/pull-left';
 export { default as pullRight } from './library/pull-right';
 export { default as pullquote } from './library/pullquote';
@@ -137,6 +138,7 @@ export { default as receipt } from './library/receipt';
 export { default as redo } from './library/redo';
 export { default as replace } from './library/replace';
 export { default as resizeCornerNE } from './library/resize-corner-n-e';
+export { default as reusableBlock } from './library/reusable-block';
 export { default as rotateLeft } from './library/rotate-left';
 export { default as rotateRight } from './library/rotate-right';
 export { default as rss } from './library/rss';

diff --git a/packages/icons/src/library/check.js b/packages/icons/src/library/check.js
@@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const check = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M9 18.6L3.5 13l1-1L9 16.4l9.5-9.9 1 1z" />
+		<Path d="M18.3 5.6L9.9 16.9l-4.6-3.4-.9 1.2 5.8 4.3 9.3-12.6z" />
 	</SVG>
 );
 

diff --git a/packages/icons/src/library/download.js b/packages/icons/src/library/download.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const download = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M18 11.3l-1-1.1-4 4V3h-1.5v11.3L7 10.2l-1 1.1 6.2 5.8 5.8-5.8zm.5 3.7v3.5h-13V15H4v5h16v-5h-1.5z" />
+	</SVG>
+);
+
+export default download;
diff --git a/packages/icons/src/library/reusable-block.js b/packages/icons/src/library/reusable-block.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const reusableBlock = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M7 7.2h8.2L13.5 9l1.1 1.1 3.6-3.6-3.5-4-1.1 1 1.9 2.3H7c-.9 0-1.7.3-2.3.9-1.4 1.5-1.4 4.2-1.4 5.6v.2h1.5v-.3c0-1.1 0-3.5 1-4.5.3-.3.7-.5 1.2-.5zm13.8 4V11h-1.5v.3c0 1.1 0 3.5-1 4.5-.3.3-.7.5-1.3.5H8.8l1.7-1.7-1.1-1.1L5.9 17l3.5 4 1.1-1-1.9-2.3H17c.9 0 1.7-.3 2.3-.9 1.5-1.4 1.5-4.2 1.5-5.6z" />
+	</SVG>
+);
+
+export default reusableBlock;