Mobile - Block Selection Button - Use BlockIcon wrapper (#34499)

Co-authored-by: Gerardo Pacheco <gerardo.pacheco@automattic.com>
WordPress · Sep 2, 2021 · ec8632e · ec8632e
1 parent 594cc7d
commit ec8632e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/packages/block-editor/src/components/block-icon/index.native.js b/packages/block-editor/src/components/block-icon/index.native.js
@@ -17,6 +17,8 @@ import styles from './style.scss';
 
 export function BlockIcon( {
 	icon,
+	fill,
+	size,
 	showColors = false,
 	getStylesFromColorScheme,
 } ) {
@@ -29,10 +31,13 @@ export function BlockIcon( {
 	const renderedIcon = (
 		<Icon
 			icon={ icon && icon.src ? icon.src : icon }
-			{ ...getStylesFromColorScheme(
-				styles.iconPlaceholder,
-				styles.iconPlaceholderDark
-			) }
+			{ ...( fill && { fill } ) }
+			{ ...( size && { size } ) }
+			{ ...( ! fill &&
+				getStylesFromColorScheme(
+					styles.iconPlaceholder,
+					styles.iconPlaceholderDark
+				) ) }
 		/>
 	);
 	const style = showColors

diff --git a/packages/block-editor/src/components/block-list/block-selection-button.native.js b/packages/block-editor/src/components/block-list/block-selection-button.native.js
@@ -5,6 +5,7 @@ import { Icon } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 import { getBlockType } from '@wordpress/blocks';
+import { BlockIcon } from '@wordpress/block-editor';
 
 /**
  * External dependencies
@@ -58,11 +59,13 @@ const BlockSelectionButton = ( {
 							/>
 						</View>,
 					] }
-				<Icon
-					size={ 24 }
-					icon={ blockInformation?.icon?.src }
-					fill={ styles.icon.color }
-				/>
+				{ blockInformation?.icon && (
+					<BlockIcon
+						size={ 24 }
+						icon={ blockInformation.icon }
+						fill={ styles.icon.color }
+					/>
+				) }
 				<Text
 					maxFontSizeMultiplier={ 1.25 }
 					ellipsizeMode="tail"