Use block icons in media placeholders (#11788)

* Use block icons in media placeholders * Add braces around BlockIcon components when used as attribute values. Co-Authored-By: ZebulanStanphill <[email protected]> * Vertically center content of placeholder label. * Change Media & Text block placeholder icon
WordPress · Feb 6, 2019 · a615ce6 · a615ce6
1 parent 71186b2
commit a615ce6
Show file tree

Hide file tree

Showing 26 changed files with 235 additions and 125 deletions.
diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js
@@ -1,25 +1,31 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { getBlobByURL, isBlobURL } from '@wordpress/blob';
 import {
 	Disabled,
 	IconButton,
 	PanelBody,
 	SelectControl,
-	Toolbar,
 	ToggleControl,
+	Toolbar,
 	withNotices,
 } from '@wordpress/components';
-import { Component, Fragment } from '@wordpress/element';
 import {
 	BlockControls,
+	BlockIcon,
 	InspectorControls,
 	MediaPlaceholder,
 	RichText,
 	mediaUpload,
 } from '@wordpress/editor';
-import { getBlobByURL, isBlobURL } from '@wordpress/blob';
+import { Component, Fragment } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import icon from './icon';
 
 /**
  * Internal dependencies
@@ -115,7 +121,7 @@ class AudioEdit extends Component {
 		if ( editing ) {
 			return (
 				<MediaPlaceholder
-					icon="media-audio"
+					icon={ <BlockIcon icon={ icon } /> }
 					className={ className }
 					onSelect={ onSelectAudio }
 					onSelectURL={ this.onSelectURL }

diff --git a/packages/block-library/src/audio/icon.js b/packages/block-library/src/audio/icon.js
@@ -0,0 +1,6 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/components';
+
+export default <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>;
diff --git a/packages/block-library/src/audio/index.js b/packages/block-library/src/audio/index.js
@@ -1,16 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { createBlobURL } from '@wordpress/blob';
+import { createBlock } from '@wordpress/blocks';
 import { RichText } from '@wordpress/editor';
-import { SVG, Path } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import edit from './edit';
-import { createBlock } from '@wordpress/blocks';
-import { createBlobURL } from '@wordpress/blob';
+import icon from './icon';
 
 export const name = 'core/audio';
 
@@ -19,7 +19,7 @@ export const settings = {
 
 	description: __( 'Embed a simple audio player.' ),
 
-	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>,
+	icon,
 
 	category: 'common',
 

diff --git a/packages/block-library/src/audio/test/__snapshots__/index.js.snap b/packages/block-library/src/audio/test/__snapshots__/index.js.snap
@@ -7,20 +7,27 @@ exports[`core/audio block edit matches snapshot 1`] = `
   <div
     class="components-placeholder__label"
   >
-    <svg
-      aria-hidden="true"
-      class="dashicon dashicons-media-audio"
-      focusable="false"
-      height="20"
-      role="img"
-      viewBox="0 0 20 20"
-      width="20"
-      xmlns="http://www.w3.org/2000/svg"
+    <span
+      class="editor-block-icon"
     >
-      <path
-        d="M12 2l4 4v12H4V2h8zm0 4h3l-3-3v3zm1 7.26V8.09c0-.11-.04-.21-.12-.29-.07-.08-.16-.11-.27-.1 0 0-3.97.71-4.25.78C8.07 8.54 8 8.8 8 9v3.37c-.2-.09-.42-.07-.6-.07-.38 0-.7.13-.96.39-.26.27-.4.58-.4.96 0 .37.14.69.4.95.26.27.58.4.96.4.34 0 .7-.04.96-.26.26-.23.64-.65.64-1.12V10.3l3-.6V12c-.67-.2-1.17.04-1.44.31-.26.26-.39.58-.39.95 0 .38.13.69.39.96.27.26.71.39 1.08.39.38 0 .7-.13.96-.39.26-.27.4-.58.4-.96z"
-      />
-    </svg>
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        height="24"
+        role="img"
+        viewBox="0 0 24 24"
+        width="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>
+    </span>
     Audio
   </div>
   <div

diff --git a/packages/block-library/src/cover/icon.js b/packages/block-library/src/cover/icon.js
@@ -0,0 +1,6 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/components';
+
+export default <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>;
diff --git a/packages/block-library/src/cover/index.js b/packages/block-library/src/cover/index.js
@@ -6,6 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { createBlock } from '@wordpress/blocks';
 import {
 	FocalPointPicker,
 	IconButton,
@@ -14,25 +15,28 @@ import {
 	ToggleControl,
 	Toolbar,
 	withNotices,
-	SVG,
-	Path,
 } from '@wordpress/components';
-import { Fragment } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { createBlock } from '@wordpress/blocks';
 import { compose } from '@wordpress/compose';
 import {
+	AlignmentToolbar,
 	BlockControls,
+	BlockIcon,
 	InspectorControls,
 	MediaPlaceholder,
 	MediaUpload,
 	MediaUploadCheck,
-	AlignmentToolbar,
 	PanelColorSettings,
 	RichText,
-	withColors,
 	getColorClassName,
+	withColors,
 } from '@wordpress/editor';
+import { Fragment } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import icon from './icon';
 
 const blockAttributes = {
 	title: {
@@ -84,7 +88,7 @@ export const settings = {
 
 	description: __( 'Add an image or video with a text overlay — great for headers.' ),
 
-	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>,
+	icon,
 
 	category: 'common',
 
@@ -308,7 +312,7 @@ export const settings = {
 
 			if ( ! url ) {
 				const hasTitle = ! RichText.isEmpty( title );
-				const icon = hasTitle ? undefined : 'format-image';
+				const placeholderIcon = hasTitle ? undefined : <BlockIcon icon={ icon } />;
 				const label = hasTitle ? (
 					<RichText
 						tagName="h2"
@@ -322,7 +326,7 @@ export const settings = {
 					<Fragment>
 						{ controls }
 						<MediaPlaceholder
-							icon={ icon }
+							icon={ placeholderIcon }
 							className={ className }
 							labels={ {
 								title: label,

diff --git a/packages/block-library/src/cover/test/__snapshots__/index.js.snap b/packages/block-library/src/cover/test/__snapshots__/index.js.snap
@@ -7,20 +7,27 @@ exports[`core/cover block edit matches snapshot 1`] = `
   <div
     class="components-placeholder__label"
   >
-    <svg
-      aria-hidden="true"
-      class="dashicon dashicons-format-image"
-      focusable="false"
-      height="20"
-      role="img"
-      viewBox="0 0 20 20"
-      width="20"
-      xmlns="http://www.w3.org/2000/svg"
+    <span
+      class="editor-block-icon"
     >
-      <path
-        d="M2.25 1h15.5c.69 0 1.25.56 1.25 1.25v15.5c0 .69-.56 1.25-1.25 1.25H2.25C1.56 19 1 18.44 1 17.75V2.25C1 1.56 1.56 1 2.25 1zM17 17V3H3v14h14zM10 6c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm3 5s0-6 3-6v10c0 .55-.45 1-1 1H5c-.55 0-1-.45-1-1V8c2 0 3 4 3 4s1-3 3-3 3 2 3 2z"
-      />
-    </svg>
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        height="24"
+        role="img"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <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>
+    </span>
     Cover
   </div>
   <div

diff --git a/packages/block-library/src/file/edit.js b/packages/block-library/src/file/edit.js
@@ -6,29 +6,35 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { getBlobByURL, revokeBlobURL, isBlobURL } from '@wordpress/blob';
+import {
+	getBlobByURL,
+	isBlobURL,
+	revokeBlobURL,
+} from '@wordpress/blob';
 import {
 	ClipboardButton,
 	IconButton,
 	Toolbar,
 	withNotices,
 } from '@wordpress/components';
+import { compose } from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
-import { Component, Fragment } from '@wordpress/element';
 import {
+	BlockControls,
+	BlockIcon,
 	MediaUpload,
-	MediaPlaceholder,
 	MediaUploadCheck,
-	BlockControls,
+	MediaPlaceholder,
 	RichText,
 	mediaUpload,
 } from '@wordpress/editor';
-import { compose } from '@wordpress/compose';
+import { Component, Fragment } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
+import icon from './icon';
 import FileBlockInspector from './inspector';
 
 class FileEdit extends Component {
@@ -136,7 +142,7 @@ class FileEdit extends Component {
 		if ( ! href || hasError ) {
 			return (
 				<MediaPlaceholder
-					icon="media-default"
+					icon={ <BlockIcon icon={ icon } /> }
 					labels={ {
 						title: __( 'File' ),
 						instructions: __( 'Drag a file, upload a new one or select a file from your library.' ),

diff --git a/packages/block-library/src/file/icon.js b/packages/block-library/src/file/icon.js
@@ -0,0 +1,6 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/components';
+
+export default <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><Path fill="none" d="M0 0h24v24H0V0z" /><Path d="M9 6l2 2h9v10H4V6h5m1-2H4L2 6v12l2 2h16l2-2V8l-2-2h-8l-2-2z" /></SVG>;
diff --git a/packages/block-library/src/file/index.js b/packages/block-library/src/file/index.js
@@ -11,12 +11,12 @@ import { createBlobURL } from '@wordpress/blob';
 import { createBlock } from '@wordpress/blocks';
 import { select } from '@wordpress/data';
 import { RichText } from '@wordpress/editor';
-import { SVG, Path } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import edit from './edit';
+import icon from './icon';
 
 export const name = 'core/file';
 
@@ -25,7 +25,7 @@ export const settings = {
 
 	description: __( 'Add a link to a downloadable file.' ),
 
-	icon: <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><Path fill="none" d="M0 0h24v24H0V0z" /><Path d="M9 6l2 2h9v10H4V6h5m1-2H4L2 6v12l2 2h16l2-2V8l-2-2h-8l-2-2z" /></SVG>,
+	icon,
 
 	category: 'common',
 

diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
@@ -7,12 +7,10 @@ import { filter, pick, map, get } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Component, Fragment } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
 import {
-	IconButton,
 	DropZone,
 	FormFileUpload,
+	IconButton,
 	PanelBody,
 	RangeControl,
 	SelectControl,
@@ -22,16 +20,20 @@ import {
 } from '@wordpress/components';
 import {
 	BlockControls,
-	MediaUpload,
+	BlockIcon,
 	MediaPlaceholder,
+	MediaUpload,
 	InspectorControls,
 	mediaUpload,
 } from '@wordpress/editor';
+import { Component, Fragment } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import GalleryImage from './gallery-image';
+import icon from './icon';
 
 const MAX_COLUMNS = 8;
 const linkOptions = [
@@ -220,7 +222,7 @@ class GalleryEdit extends Component {
 				<Fragment>
 					{ controls }
 					<MediaPlaceholder
-						icon="format-gallery"
+						icon={ <BlockIcon icon={ icon } /> }
 						className={ className }
 						labels={ {
 							title: __( 'Gallery' ),

diff --git a/packages/block-library/src/gallery/icon.js b/packages/block-library/src/gallery/icon.js
@@ -0,0 +1,6 @@
+/**
+ * WordPress dependencies
+ */
+import { G, Path, SVG } from '@wordpress/components';
+
+export default <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><Path fill="none" d="M0 0h24v24H0V0z" /><G><Path d="M20 4v12H8V4h12m0-2H8L6 4v12l2 2h12l2-2V4l-2-2z" /><Path d="M12 12l1 2 3-3 3 4H9z" /><Path d="M2 6v14l2 2h14v-2H4V6H2z" /></G></SVG>;
diff --git a/packages/block-library/src/gallery/index.js b/packages/block-library/src/gallery/index.js
@@ -10,12 +10,12 @@ import { __ } from '@wordpress/i18n';
 import { createBlock } from '@wordpress/blocks';
 import { RichText, mediaUpload } from '@wordpress/editor';
 import { createBlobURL } from '@wordpress/blob';
-import { G, Path, SVG } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { default as edit, defaultColumnsNumber, pickRelevantMediaFiles } from './edit';
+import icon from './icon';
 
 const blockAttributes = {
 	images: {
@@ -84,7 +84,7 @@ const parseShortcodeIds = ( ids ) => {
 export const settings = {
 	title: __( 'Gallery' ),
 	description: __( 'Display multiple images in a rich gallery.' ),
-	icon: <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><Path fill="none" d="M0 0h24v24H0V0z" /><G><Path d="M20 4v12H8V4h12m0-2H8L6 4v12l2 2h12l2-2V4l-2-2z" /><Path d="M12 12l1 2 3-3 3 4H9z" /><Path d="M2 6v14l2 2h14v-2H4V6H2z" /></G></SVG>,
+	icon,
 	category: 'common',
 	keywords: [ __( 'images' ), __( 'photos' ) ],
 	attributes: blockAttributes,