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 <zebulanstanphill@gmail.com> * Vertically center content of placeholder label. * Change Media & Text block placeholder icon
WordPress · Mar 6, 2019 · 5fe0dfe · 5fe0dfe
1 parent 8bdad59
commit 5fe0dfe
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,