Move the insert dashicon to the icons package (#19943)

WordPress · Jan 30, 2020 · 06f02c9 · 06f02c9
1 parent 5832c30
commit 06f02c9
Show file tree

Hide file tree

Showing 10 changed files with 30 additions and 27 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
@@ -35,6 +35,7 @@
 		"@wordpress/hooks": "file:../hooks",
 		"@wordpress/html-entities": "file:../html-entities",
 		"@wordpress/i18n": "file:../i18n",
+		"@wordpress/icons": "file:../icons",
 		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
 		"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 		"@wordpress/keycodes": "file:../keycodes",

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -418,7 +418,8 @@
 		background: $white;
 		height: $block-padding * 2;
 		width: $block-padding * 2;
-		padding: $grid-size-small;
+		padding: 0;
+		justify-content: center;
 
 		&:not(:disabled):not([aria-disabled="true"]):hover {
 			box-shadow: none;

diff --git a/packages/block-editor/src/components/button-block-appender/index.js b/packages/block-editor/src/components/button-block-appender/index.js
@@ -6,8 +6,9 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Button, Icon, Tooltip } from '@wordpress/components';
+import { Button, Tooltip } from '@wordpress/components';
 import { _x, sprintf } from '@wordpress/i18n';
+import { Icon, plusCircle } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -39,7 +40,7 @@ function ButtonBlockAppender( { rootClientId, className, __experimentalSelectBlo
 							label={ label }
 						>
 							<span className="screen-reader-text">{ label }</span>
-							<Icon icon="insert" />
+							<Icon icon={ plusCircle } />
 						</Button>
 					</Tooltip>
 				);

diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js
@@ -11,9 +11,8 @@ import { Dropdown, Button } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose, ifCondition } from '@wordpress/compose';
-import {
-	createBlock,
-} from '@wordpress/blocks';
+import { createBlock } from '@wordpress/blocks';
+import { plusCircle } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -30,7 +29,7 @@ const defaultRenderToggle = ( { onToggle, disabled, isOpen, blockTitle, hasSingl
 	}
 	return (
 		<Button
-			icon="insert"
+			icon={ plusCircle }
 			label={ label }
 			tooltipPosition="bottom"
 			onClick={ onToggle }

diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
@@ -24,13 +24,6 @@ $block-inserter-search-height: 38px;
 }
 
 .block-editor-inserter__toggle {
-	display: inline-flex;
-	align-items: center;
-	color: $dark-gray-500;
-	background: none;
-	cursor: pointer;
-	border: none;
-	outline: none;
 	transition: color 0.2s ease;
 	@include reduce-motion("transition");
 }

diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
@@ -206,12 +206,6 @@
 			flex: 0 0 auto;
 		}
 
-		// Ensure that even SVG icons that don't include the .dashicon class are colored.
-		svg {
-			fill: currentColor;
-			outline: none;
-		}
-
 		&:not([aria-disabled="true"]):active:focus:enabled {
 			box-shadow: none;
 		}
@@ -227,17 +221,16 @@
 			flex: 0 0 auto;
 		}
 
-		// Ensure that even SVG icons that don't include the .dashicon class are colored.
-		svg {
-			fill: currentColor;
-			outline: none;
-		}
-
 		&.has-text svg {
 			margin-right: 8px;
 		}
 	}
 
+	svg {
+		fill: currentColor;
+		outline: none;
+	}
+
 	// Fixes a Safari+VoiceOver bug, where the screen reader text is announced not respecting the source order.
 	// See https://core.trac.wordpress.org/ticket/42006 and https://github.com/h5bp/html5-boilerplate/issues/1985
 	.screen-reader-text {

diff --git a/packages/components/src/custom-gradient-picker/index.js b/packages/components/src/custom-gradient-picker/index.js
@@ -10,6 +10,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useRef, useReducer, useState } from '@wordpress/element';
+import { plusCircle } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -55,7 +56,7 @@ function InsertPoint( {
 						onToggle();
 					} }
 					className="components-custom-gradient-picker__insert-point"
-					icon="insert"
+					icon={ plusCircle }
 					style={ {
 						left: insertPosition !== null ? `${ insertPosition }%` : undefined,
 					} }

diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
@@ -27,6 +27,7 @@ export { default as more } from './library/more';
 export { default as navigation } from './library/navigation';
 export { default as pageBreak } from './library/page-break';
 export { default as paragraph } from './library/paragraph';
+export { default as plusCircle } from './library/plus-circle';
 export { default as postList } from './library/post-list';
 export { default as preformatted } from './library/preformatted';
 export { default as pullquote } from './library/pullquote';

diff --git a/packages/icons/src/library/plus-circle.js b/packages/icons/src/library/plus-circle.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const plusCircle = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24">
+		<Path d="M10 1c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm0 16c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7zm1-11H9v3H6v2h3v3h2v-3h3V9h-3V6zM10 1c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm0 16c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7zm1-11H9v3H6v2h3v3h2v-3h3V9h-3V6z" />
+	</SVG>
+);
+
+export default plusCircle;