Try new icons for reusable blocks and template parts. (#34002)

* Try icons for RBs and TPs.

* fix icon usage

* Rename templatePart and reusableBlockType icons to symbolFilled and symbol.

* Fix ESLint error

Co-authored-by: ntsekouras <ntsekouras@outlook.com>
Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com>

packages/block-editor/src/store/selectors.js

@@ -28,8 +28,8 @@ import {
 	getPossibleBlockTransformations,
 	parse,
 } from '@wordpress/blocks';
-import { SVG, Rect, G, Path } from '@wordpress/components';
 import { Platform } from '@wordpress/element';
+import { symbol } from '@wordpress/icons';
 
 /**
  * A block selection object.
@@ -46,14 +46,6 @@ import { Platform } from '@wordpress/element';
 const MILLISECONDS_PER_HOUR = 3600 * 1000;
 const MILLISECONDS_PER_DAY = 24 * 3600 * 1000;
 const MILLISECONDS_PER_WEEK = 7 * 24 * 3600 * 1000;
-const templateIcon = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Rect x="0" fill="none" width="24" height="24" />
-		<G>
-			<Path d="M19 3H5c-1.105 0-2 .895-2 2v14c0 1.105.895 2 2 2h14c1.105 0 2-.895 2-2V5c0-1.105-.895-2-2-2zM6 6h5v5H6V6zm4.5 13C9.12 19 8 17.88 8 16.5S9.12 14 10.5 14s2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5zm3-6l3-5 3 5h-6z" />
-		</G>
-	</SVG>
-);
 
 /**
  * Shared reference to an empty array for cases where it is important to avoid
@@ -1587,9 +1579,7 @@ export const getInserterItems = createSelector(
 				name: 'core/block',
 				initialAttributes: { ref: reusableBlock.id },
 				title: reusableBlock.title.raw,
-				icon: referencedBlockType
-					? referencedBlockType.icon
-					: templateIcon,
+				icon: referencedBlockType ? referencedBlockType.icon : symbol,
 				category: 'reusable',
 				keywords: [],
 				isDisabled: false,

packages/block-library/src/block/index.js

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { symbol as icon } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
@@ -10,4 +15,5 @@ export { metadata, name };
 
 export const settings = {
 	edit,
+	icon,
 };

packages/block-library/src/template-part/index.js

@@ -8,7 +8,7 @@ import { startCase } from 'lodash';
  */
 import { store as coreDataStore } from '@wordpress/core-data';
 import { select } from '@wordpress/data';
-import { layout } from '@wordpress/icons';
+import { symbolFilled } from '@wordpress/icons';
 import { addFilter } from '@wordpress/hooks';
 
 /**
@@ -22,7 +22,7 @@ const { name } = metadata;
 export { metadata, name };
 
 export const settings = {
-	icon: layout,
+	icon: symbolFilled,
 	__experimentalLabel: ( { slug, theme } ) => {
 		// Attempt to find entity title if block is a template part.
 		// Require slug to request, otherwise entity is uncreated and will throw 404.

packages/icons/src/index.js

@@ -174,6 +174,7 @@ export { default as removeBug } from './library/remove-bug';
 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 symbol } from './library/symbol';
 export { default as rotateLeft } from './library/rotate-left';
 export { default as rotateRight } from './library/rotate-right';
 export { default as rss } from './library/rss';
@@ -204,6 +205,7 @@ export { default as tableRowBefore } from './library/table-row-before';
 export { default as tableRowDelete } from './library/table-row-delete';
 export { default as table } from './library/table';
 export { default as tag } from './library/tag';
+export { default as symbolFilled } from './library/symbol-filled';
 export { default as termDescription } from './library/term-description';
 export { default as footer } from './library/footer';
 export { default as header } from './library/header';

packages/icons/src/library/symbol-filled.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const symbolFilled = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M21.3 10.8l-5.6-5.6c-.7-.7-1.8-.7-2.5 0l-5.6 5.6c-.7.7-.7 1.8 0 2.5l5.6 5.6c.3.3.8.5 1.2.5s.9-.2 1.2-.5l5.6-5.6c.8-.7.8-1.9.1-2.5zm-17.6 1L10 5.5l-1-1-6.3 6.3c-.7.7-.7 1.8 0 2.5L9 19.5l1.1-1.1-6.3-6.3c-.2 0-.2-.2-.1-.3z" />
+	</SVG>
+);
+
+export default symbolFilled;

packages/icons/src/library/symbol.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const symbol = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M21.3 10.8l-5.6-5.6c-.7-.7-1.8-.7-2.5 0l-5.6 5.6c-.7.7-.7 1.8 0 2.5l5.6 5.6c.3.3.8.5 1.2.5s.9-.2 1.2-.5l5.6-5.6c.8-.7.8-1.9.1-2.5zm-1 1.4l-5.6 5.6c-.1.1-.3.1-.4 0l-5.6-5.6c-.1-.1-.1-.3 0-.4l5.6-5.6s.1-.1.2-.1.1 0 .2.1l5.6 5.6c.1.1.1.3 0 .4zm-16.6-.4L10 5.5l-1-1-6.3 6.3c-.7.7-.7 1.8 0 2.5L9 19.5l1.1-1.1-6.3-6.3c-.2 0-.2-.2-.1-.3z" />
+	</SVG>
+);
+
+export default symbol;