blocks: remove BlockIcon wrapper in multiple blocks.

Follow-up from #13324
Automattic · Feb 1, 2022 · 9c6b031 · 9c6b031
1 parent 7d15e1e
commit 9c6b031
Show file tree

Hide file tree

Showing 16 changed files with 38 additions and 69 deletions.
diff --git a/projects/plugins/jetpack/changelog/update-block-icons b/projects/plugins/jetpack/changelog/update-block-icons
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Blocks: remove BlockIcon wrapper for multiple blocks.
diff --git a/projects/plugins/jetpack/extensions/blocks/amazon/edit.js b/projects/plugins/jetpack/extensions/blocks/amazon/edit.js
@@ -7,12 +7,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * WordPress dependencies
  */
-import {
-	BlockIcon,
-	ContrastChecker,
-	InspectorControls,
-	PanelColorSettings,
-} from '@wordpress/block-editor';
+import { ContrastChecker, InspectorControls, PanelColorSettings } from '@wordpress/block-editor';
 import {
 	Button,
 	ExternalLink,
@@ -80,7 +75,7 @@ function AmazonEdit( {
 		<Placeholder
 			label={ __( 'Amazon', 'jetpack' ) }
 			instructions={ __( 'Search by entering an Amazon product name or ID below.', 'jetpack' ) }
-			icon={ <BlockIcon icon={ icon } /> }
+			icon={ icon }
 			notices={ noticeUI } // TODO
 		>
 			<form>

diff --git a/projects/plugins/jetpack/extensions/blocks/business-hours/edit.js b/projects/plugins/jetpack/extensions/blocks/business-hours/edit.js
@@ -5,7 +5,6 @@ import apiFetch from '@wordpress/api-fetch';
 import classNames from 'classnames';
 import { __ } from '@wordpress/i18n';
 import { __experimentalGetSettings } from '@wordpress/date';
-import { BlockIcon } from '@wordpress/block-editor';
 import { Component } from '@wordpress/element';
 import { Placeholder } from '@wordpress/components';
 
@@ -60,12 +59,7 @@ class BusinessHours extends Component {
 		const localizedWeek = days.concat( days.slice( 0, startOfWeek ) ).slice( startOfWeek );
 
 		if ( ! hasFetched ) {
-			return (
-				<Placeholder
-					icon={ <BlockIcon icon={ icon } /> }
-					label={ __( 'Loading business hours', 'jetpack' ) }
-				/>
-			);
+			return <Placeholder icon={ icon } label={ __( 'Loading business hours', 'jetpack' ) } />;
 		}
 
 		if ( ! isSelected ) {

diff --git a/projects/plugins/jetpack/extensions/blocks/calendly/edit.js b/projects/plugins/jetpack/extensions/blocks/calendly/edit.js
@@ -8,7 +8,7 @@ import queryString from 'query-string';
 /**
  * WordPress dependencies
  */
-import { BlockIcon, InnerBlocks } from '@wordpress/block-editor';
+import { InnerBlocks } from '@wordpress/block-editor';
 import { Button, ExternalLink, Placeholder, Spinner, withNotices } from '@wordpress/components';
 import { useEffect, useState } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
@@ -128,7 +128,7 @@ export function CalendlyEdit( props ) {
 		<Placeholder
 			label={ __( 'Calendly', 'jetpack' ) }
 			instructions={ __( 'Enter your Calendly web address or embed code below.', 'jetpack' ) }
-			icon={ <BlockIcon icon={ icon } /> }
+			icon={ icon }
 			notices={ noticeUI }
 		>
 			<form onSubmit={ parseEmbedCode }>

diff --git a/projects/plugins/jetpack/extensions/blocks/conversation/edit.js b/projects/plugins/jetpack/extensions/blocks/conversation/edit.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useCallback, useMemo, useState } from '@wordpress/element';
-import { InnerBlocks, InspectorControls, BlockIcon } from '@wordpress/block-editor';
+import { InnerBlocks, InspectorControls } from '@wordpress/block-editor';
 import {
 	Panel,
 	PanelBody,
@@ -199,7 +199,7 @@ function ConversationEdit( {
 						</div>
 					</>
 				}
-				icon={ <BlockIcon icon={ icon } /> }
+				icon={ icon }
 				notices={ noticeUI }
 			>
 				<div className={ `${ baseClassName }__placeholder` }>

diff --git a/projects/plugins/jetpack/extensions/blocks/eventbrite/edit.js b/projects/plugins/jetpack/extensions/blocks/eventbrite/edit.js
@@ -11,7 +11,7 @@ import {
 	ExternalLink,
 	withNotices,
 } from '@wordpress/components';
-import { BlockControls, BlockIcon, InnerBlocks } from '@wordpress/block-editor';
+import { BlockControls, InnerBlocks } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -176,7 +176,7 @@ export class EventbriteEdit extends Component {
 						'Paste a link to an Eventbrite event to embed ticket checkout.',
 						'jetpack'
 					) }
-					icon={ <BlockIcon icon={ icon } /> }
+					icon={ icon }
 					notices={ noticeUI }
 				>
 					<form onSubmit={ this.submitForm }>

diff --git a/projects/plugins/jetpack/extensions/blocks/google-calendar/edit.js b/projects/plugins/jetpack/extensions/blocks/google-calendar/edit.js
@@ -3,15 +3,9 @@
  */
 import { __, _x } from '@wordpress/i18n';
 import { useEffect, useState } from '@wordpress/element';
-import {
-	Placeholder,
-	SandBox,
-	Button,
-	ExternalLink,
-	withNotices,
-} from '@wordpress/components';
+import { Placeholder, SandBox, Button, ExternalLink, withNotices } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
-import { BlockIcon, InspectorControls } from '@wordpress/block-editor';
+import { InspectorControls } from '@wordpress/block-editor';
 import { withViewportMatch } from '@wordpress/viewport';
 import { getBlockDefaultClassName } from '@wordpress/blocks';
 
@@ -67,7 +61,7 @@ export function GoogleCalendarEdit( props ) {
 		);
 	};
 
-	const handleEmbed = ( event ) => {
+	const handleEmbed = event => {
 		if ( event ) {
 			event.preventDefault();
 		}
@@ -84,7 +78,7 @@ export function GoogleCalendarEdit( props ) {
 		noticeOperations.removeAllNotices();
 	};
 
-	const getEditForm = ( formClassName ) => (
+	const getEditForm = formClassName => (
 		<form onSubmit={ handleEmbed } className={ formClassName }>
 			<textarea
 				type="text"
@@ -116,25 +110,25 @@ export function GoogleCalendarEdit( props ) {
 			<GoogleCalendarInspectorControls
 				className={ `${ defaultClassName }-embed-form-sidebar` }
 				embedValue={ editedEmbed }
-				onChange={ ( event ) => setEditedEmbed( event.target.value ) }
+				onChange={ event => setEditedEmbed( event.target.value ) }
 				onSubmit={ handleEmbed }
 			/>
 		</InspectorControls>
 	);
 
 	if ( editingUrl || ! url ) {
 		const supportLink =
-				 isSimpleSite() || isAtomicSite()
-					 ? 'https://en.support.wordpress.com/wordpress-editor/blocks/google-calendar/'
-					 : 'https://jetpack.com/support/jetpack-blocks/google-calendar/';
+			isSimpleSite() || isAtomicSite()
+				? 'https://en.support.wordpress.com/wordpress-editor/blocks/google-calendar/'
+				: 'https://jetpack.com/support/jetpack-blocks/google-calendar/';
 
 		return (
 			<div className={ className }>
 				{ controls }
 				<Placeholder
 					className={ className }
 					label={ __( 'Google Calendar', 'jetpack' ) }
-					icon={ <BlockIcon icon={ icon } /> }
+					icon={ icon }
 					instructions={
 						<ol className={ `${ defaultClassName }-placeholder-instructions` }>
 							<li>{ permissionsLink }</li>
@@ -167,10 +161,7 @@ export function GoogleCalendarEdit( props ) {
 			<div>
 				<SandBox html={ html } onFocus={ hideOverlay } />
 				{ ! interactive && (
-					<div
-						className="block-library-embed__interactive-overlay"
-						onMouseUp={ hideOverlay }
-					/>
+					<div className="block-library-embed__interactive-overlay" onMouseUp={ hideOverlay } />
 				) }
 			</div>
 		</div>

diff --git a/projects/plugins/jetpack/extensions/blocks/opentable/edit.js b/projects/plugins/jetpack/extensions/blocks/opentable/edit.js
@@ -8,7 +8,7 @@ import { isEmpty, isEqual, join } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { BlockIcon, InspectorControls, InspectorAdvancedControls } from '@wordpress/block-editor';
+import { InspectorControls, InspectorAdvancedControls } from '@wordpress/block-editor';
 import {
 	ExternalLink,
 	PanelBody,
@@ -236,7 +236,7 @@ function OpenTableEdit( {
 	const blockPlaceholder = (
 		<Placeholder
 			label={ __( 'OpenTable Reservation', 'jetpack' ) }
-			icon={ <BlockIcon icon={ icon } /> }
+			icon={ icon }
 			instructions={ __(
 				'Enter your restaurant name, or paste an OpenTable Reservation Widget embed code.',
 				'jetpack'

diff --git a/projects/plugins/jetpack/extensions/blocks/pinterest/components/edit-url-form.js b/projects/plugins/jetpack/extensions/blocks/pinterest/components/edit-url-form.js
@@ -3,7 +3,6 @@
  */
 import { __, _x } from '@wordpress/i18n';
 import { Placeholder, Button } from '@wordpress/components';
-import { BlockIcon } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -20,11 +19,7 @@ export default function EditUrlForm( { className, onSubmit, noticeUI, url, setUr
 
 	return (
 		<div className={ className }>
-			<Placeholder
-				label={ __( 'Pinterest', 'jetpack' ) }
-				icon={ <BlockIcon icon={ icon } /> }
-				notices={ noticeUI }
-			>
+			<Placeholder label={ __( 'Pinterest', 'jetpack' ) } icon={ icon } notices={ noticeUI }>
 				<form onSubmit={ onSubmitForm }>
 					<input
 						type="url"

diff --git a/projects/plugins/jetpack/extensions/blocks/podcast-player/edit.js b/projects/plugins/jetpack/extensions/blocks/podcast-player/edit.js
@@ -26,7 +26,6 @@ import { compose, withInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import {
 	BlockControls,
-	BlockIcon,
 	InspectorControls,
 	withColors,
 	PanelColorSettings,
@@ -270,7 +269,7 @@ const PodcastPlayerEdit = ( {
 	if ( state.isEditing ) {
 		return (
 			<Placeholder
-				icon={ <BlockIcon icon={ queueMusic } /> }
+				icon={ queueMusic }
 				label={ __( 'Podcast Player', 'jetpack' ) }
 				instructions={ __( 'Enter your podcast RSS feed URL.', 'jetpack' ) }
 				className={ 'jetpack-podcast-player__placeholder' }
@@ -303,7 +302,7 @@ const PodcastPlayerEdit = ( {
 	if ( ! state.feedData.tracks?.length ) {
 		return (
 			<Placeholder
-				icon={ <BlockIcon icon={ queueMusic } /> }
+				icon={ queueMusic }
 				label={ __( 'Podcast Player', 'jetpack' ) }
 				instructions={ __( 'Loading podcast feed…', 'jetpack' ) }
 			>

diff --git a/projects/plugins/jetpack/extensions/blocks/revue/edit.js b/projects/plugins/jetpack/extensions/blocks/revue/edit.js
@@ -6,7 +6,7 @@ import { isEqual } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { BlockIcon, InnerBlocks, InspectorControls } from '@wordpress/block-editor';
+import { InnerBlocks, InspectorControls } from '@wordpress/block-editor';
 import {
 	Button,
 	ToggleControl,
@@ -73,7 +73,7 @@ export default function RevueEdit( { attributes, className, setAttributes } ) {
 		<div className={ className }>
 			{ ! revueUsername && (
 				<Placeholder
-					icon={ <BlockIcon icon={ icon } /> }
+					icon={ icon }
 					instructions={ __( 'Enter your Revue username.', 'jetpack' ) }
 					label={ __( 'Revue', 'jetpack' ) }
 				>

diff --git a/projects/plugins/jetpack/extensions/blocks/slideshow/edit.js b/projects/plugins/jetpack/extensions/blocks/slideshow/edit.js
@@ -7,12 +7,7 @@ import { compose } from '@wordpress/compose';
 import { filter, get, map, pick } from 'lodash';
 import { isBlobURL } from '@wordpress/blob';
 import { withDispatch, withSelect } from '@wordpress/data';
-import {
-	BlockIcon,
-	MediaPlaceholder,
-	BlockControls,
-	InspectorControls,
-} from '@wordpress/block-editor';
+import { MediaPlaceholder, BlockControls, InspectorControls } from '@wordpress/block-editor';
 import { mediaUpload } from '@wordpress/editor';
 import { DropZone, FormFileUpload, withNotices } from '@wordpress/components';
 
@@ -155,7 +150,7 @@ export class SlideshowEdit extends Component {
 				<Fragment>
 					{ controls }
 					<MediaPlaceholder
-						icon={ <BlockIcon icon={ icon } /> }
+						icon={ icon }
 						className={ className }
 						labels={ {
 							title: __( 'Slideshow', 'jetpack' ),

diff --git a/projects/plugins/jetpack/extensions/blocks/story/edit.js b/projects/plugins/jetpack/extensions/blocks/story/edit.js
@@ -11,7 +11,7 @@ import { Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { isBlobURL } from '@wordpress/blob';
 import { useDispatch } from '@wordpress/data';
-import { BlockIcon, MediaPlaceholder } from '@wordpress/block-editor';
+import { MediaPlaceholder } from '@wordpress/block-editor';
 import { withNotices } from '@wordpress/components';
 
 /**
@@ -101,7 +101,7 @@ export default withNotices( function StoryEdit( {
 			isAppender={ hasImages }
 			className={ className }
 			disableMediaButtons={ hasImages && ! isSelected }
-			icon={ ! hasImages && <BlockIcon icon={ icon } /> }
+			icon={ ! hasImages && icon }
 			labels={ {
 				title: ! hasImages && __( 'Story', 'jetpack' ),
 				instructions:

diff --git a/projects/plugins/jetpack/extensions/blocks/story/edit.native.js b/projects/plugins/jetpack/extensions/blocks/story/edit.native.js
@@ -7,15 +7,13 @@ import { Text, View, TouchableWithoutFeedback } from 'react-native';
  */
 import { Image } from '@wordpress/components';
 import {
-	BlockIcon,
 	MediaPlaceholder,
 	BlockMediaUpdateProgress,
 	MEDIA_TYPE_IMAGE,
 	MEDIA_TYPE_VIDEO,
 } from '@wordpress/block-editor';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { useEffect, useState } from '@wordpress/element';
-import { getProtocol } from '@wordpress/url';
 import {
 	requestMediaFilesFailedRetryDialog,
 	requestMediaFilesSaveCancelDialog,
@@ -182,7 +180,7 @@ const StoryEdit = ( { attributes, isSelected, clientId, setAttributes, onFocus }
 		// trigger the ADD MEDIA bottom sheet just yet, but only give the placedholder the right appearance.
 		<View pointerEvents="none" style={ styles[ 'content-placeholder' ] }>
 			<MediaPlaceholder
-				icon={ <BlockIcon icon={ icon } /> }
+				icon={ icon }
 				labels={ {
 					title: __( 'Story', 'jetpack' ),
 					instructions: __( 'ADD MEDIA', 'jetpack' ),

diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/edit.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/edit.js
@@ -6,7 +6,6 @@ import { Component, Fragment } from '@wordpress/element';
 import { filter, get, pick } from 'lodash';
 import {
 	BlockControls,
-	BlockIcon,
 	InspectorControls,
 	MediaPlaceholder,
 	MediaUpload,
@@ -260,7 +259,7 @@ class TiledGalleryEdit extends Component {
 				<Fragment>
 					{ controls }
 					<MediaPlaceholder
-						icon={ <BlockIcon icon={ icon } /> }
+						icon={ icon }
 						className={ className }
 						labels={ {
 							title: __( 'Tiled Gallery', 'jetpack' ),

diff --git a/projects/plugins/jetpack/extensions/blocks/tiled-gallery/edit.native.js b/projects/plugins/jetpack/extensions/blocks/tiled-gallery/edit.native.js
@@ -9,7 +9,6 @@ import { concat } from 'lodash';
  */
 import {
 	store as blockEditorStore,
-	BlockIcon,
 	MediaPlaceholder,
 	useBlockProps,
 	useInnerBlocksProps,
@@ -156,7 +155,7 @@ const TiledGalleryEdit = props => {
 	const mediaPlaceholder = (
 		<MediaPlaceholder
 			isAppender={ images.length > 0 }
-			icon={ <BlockIcon icon={ icon } /> }
+			icon={ icon }
 			className={ className }
 			labels={ {
 				title: __( 'Tiled Gallery', 'jetpack' ),