@wordpress/components 19.4.1-next.f435e9e01b.0 → 19.6.0

package/src/mobile/bottom-sheet/index.native.js

@@ -121,9 +121,9 @@ class BottomSheet extends Component {
 
 		if ( duration && easing ) {
 			// This layout animation is the same as the React Native's KeyboardAvoidingView component.
-			// Reference: https://github.com/facebook/react-native/blob/266b21baf35e052ff28120f79c06c4f6dddc51a9/Libraries/Components/Keyboard/KeyboardAvoidingView.js#L119-L128
+			// Reference: https://github.com/facebook/react-native/blob/266b21baf35e052ff28120f79c06c4f6dddc51a9/Libraries/Components/Keyboard/KeyboardAvoidingView.js#L119-L128.
 			const animationConfig = {
-				// We have to pass the duration equal to minimal accepted duration defined here: RCTLayoutAnimation.m
+				// We have to pass the duration equal to minimal accepted duration defined here: RCTLayoutAnimation.m.
 				duration: duration > 10 ? duration : 10,
 				type: LayoutAnimation.Types[ easing ] || 'keyboard',
 			};
@@ -151,7 +151,7 @@ class BottomSheet extends Component {
 			// preexisting bug: https://git.io/JMPCV
 			// this.performRegularLayoutAnimation( {
 			// 	useLastLayoutAnimation: false,
-			// } );
+			// } );.
 		}
 	}
 
@@ -195,7 +195,7 @@ class BottomSheet extends Component {
 		);
 
 		// 'Will' keyboard events are not available on Android.
-		// Reference: https://reactnative.dev/docs/0.61/keyboard#addlistener
+		// Reference: https://reactnative.dev/docs/0.61/keyboard#addlistener.
 		this.keyboardShowListener = Keyboard.addListener(
 			Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow',
 			this.keyboardShow
@@ -249,7 +249,7 @@ class BottomSheet extends Component {
 		const statusBarHeight =
 			Platform.OS === 'android' ? StatusBar.currentHeight : 0;
 
-		// `maxHeight` when modal is opened along with a keyboard
+		// `maxHeight` when modal is opened along with a keyboard.
 		const maxHeightWithOpenKeyboard =
 			0.95 *
 			( Dimensions.get( 'window' ).height -
@@ -257,7 +257,7 @@ class BottomSheet extends Component {
 				statusBarHeight -
 				this.headerHeight );
 
-		// In landscape orientation, set `maxHeight` to ~96% of the height
+		// In landscape orientation, set `maxHeight` to ~96% of the height.
 		if ( width > height ) {
 			this.setState( {
 				maxHeight: Math.min(
@@ -265,7 +265,7 @@ class BottomSheet extends Component {
 					maxHeightWithOpenKeyboard
 				),
 			} );
-			// In portrait orientation, set `maxHeight` to ~59% of the height
+			// In portrait orientation, set `maxHeight` to ~59% of the height.
 		} else {
 			this.setState( {
 				maxHeight: Math.min(
@@ -419,7 +419,7 @@ class BottomSheet extends Component {
 		const panResponder = PanResponder.create( {
 			onMoveShouldSetPanResponder: ( evt, gestureState ) => {
 				// 'swiping-to-close' option is temporarily and partially disabled
-				//	on Android ( swipe / drag is still available in the top most area - near drag indicator)
+				// on Android ( swipe / drag is still available in the top most area - near drag indicator).
 				if ( Platform.OS === 'ios' ) {
 					// Activates swipe down over child Touchables if the swipe is long enough.
 					// With this we can adjust sensibility on the swipe vs tap gestures.
@@ -449,7 +449,7 @@ class BottomSheet extends Component {
 			listStyle = { maxHeight };
 
 			// Allow setting a "static" height of the bottom sheet
-			// by settting the min height to the max height.
+			// by setting the min height to the max height.
 			if ( this.props.setMinHeightToMaxHeight ) {
 				listStyle.minHeight = maxHeight;
 			}
@@ -495,12 +495,12 @@ class BottomSheet extends Component {
 		);
 
 		const showDragIndicator = () => {
-			// if iOS or not fullscreen show the drag indicator
+			// If iOS or not fullscreen show the drag indicator.
 			if ( Platform.OS === 'ios' || ! this.state.isFullScreen ) {
 				return true;
 			}
 
-			// Otherwise check the allowDragIndicator
+			// Otherwise check the allowDragIndicator.
 			return this.props.allowDragIndicator;
 		};
 

package/src/mobile/bottom-sheet/link-cell.native.js

@@ -22,7 +22,7 @@ export default function LinkCell( {
 		<Cell
 			icon={ showIcon && link }
 			label={ __( 'Link to' ) }
-			// since this is not actually editable, we treat value as a placeholder
+			// Since this is not actually editable, we treat value as a placeholder.
 			value={ valueMask || value || __( 'Search or type URL' ) }
 			valueStyle={
 				!! ( value || valueMask ) ? undefined : placeholderColor

package/src/mobile/bottom-sheet/link-suggestion-item-cell.native.js

@@ -38,7 +38,7 @@ const getSummaryForType = ( type ) => {
 	}
 };
 
-// we use some Cell styles here with a column flex-direction
+// We use some Cell styles here with a column flex-direction.
 function LinkSuggestionItemCell( { suggestion, onLinkPicked, ...props } ) {
 	const { title: contentTitle, url, type, isDirectEntry } = suggestion;
 	const title = isDirectEntry ? url : contentTitle;

package/src/mobile/bottom-sheet/nav-bar/back-button.native.js

@@ -89,6 +89,6 @@ function DismissButton( { onPress, iosText } ) {
 }
 
 Button.Back = BackButton;
-Button.Dismiss = DismissButton; // Cancel or Close Button
+Button.Dismiss = DismissButton; // Cancel or Close Button.
 
 export default Button;

package/src/mobile/color-settings/palette.screen.native.js

@@ -13,8 +13,10 @@ import {
 	ColorControl,
 	PanelBody,
 	BottomSheetContext,
+	useMobileGlobalStylesColors,
 } from '@wordpress/components';
 import { useRoute, useNavigation } from '@react-navigation/native';
+
 /**
  * Internal dependencies
  */
@@ -27,6 +29,7 @@ import { colorsUtils } from './utils';
 import styles from './style.scss';
 
 const HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 };
+const THEME_PALETTE_NAME = 'Theme';
 
 const PaletteScreen = () => {
 	const route = useRoute();
@@ -45,10 +48,15 @@ const PaletteScreen = () => {
 	const [ currentValue, setCurrentValue ] = useState( colorValue );
 	const isGradientColor = isGradient( currentValue );
 	const selectedSegmentIndex = isGradientColor ? 1 : 0;
+	const allAvailableColors = useMobileGlobalStylesColors();
 
 	const [ currentSegment, setCurrentSegment ] = useState(
 		segments[ selectedSegmentIndex ]
 	);
+	const isGradientSegment = currentSegment === colorsUtils.segments[ 1 ];
+	const currentSegmentColors = ! isGradientSegment
+		? defaultSettings.colors
+		: defaultSettings.gradients;
 
 	const horizontalSeparatorStyle = usePreferredColorSchemeStyle(
 		styles.horizontalSeparator,
@@ -176,15 +184,37 @@ const PaletteScreen = () => {
 					<NavBar.Heading>{ label } </NavBar.Heading>
 				</NavBar>
 			) }
-			<ColorPalette
-				setColor={ setColor }
-				activeColor={ currentValue }
-				isGradientColor={ isGradientColor }
-				currentSegment={ currentSegment }
-				onCustomPress={ onCustomPress }
-				shouldEnableBottomSheetScroll={ shouldEnableBottomSheetScroll }
-				defaultSettings={ defaultSettings }
-			/>
+
+			<View style={ styles.colorPalettes }>
+				{ currentSegmentColors.map( ( palette, paletteKey ) => {
+					const paletteSettings = {
+						colors: palette.colors,
+						gradients: palette.gradients,
+						allColors: allAvailableColors,
+					};
+					const enableCustomColor =
+						! isGradientSegment &&
+						palette.name === THEME_PALETTE_NAME;
+
+					return (
+						<ColorPalette
+							enableCustomColor={ enableCustomColor }
+							label={ palette.name }
+							key={ paletteKey }
+							setColor={ setColor }
+							activeColor={ currentValue }
+							isGradientColor={ isGradientColor }
+							currentSegment={ currentSegment }
+							onCustomPress={ onCustomPress }
+							shouldEnableBottomSheetScroll={
+								shouldEnableBottomSheetScroll
+							}
+							defaultSettings={ paletteSettings }
+						/>
+					);
+				} ) }
+			</View>
+
 			{ isCustomGadientShown && (
 				<>
 					<View style={ horizontalSeparatorStyle } />

package/src/mobile/color-settings/style.native.scss

@@ -16,6 +16,10 @@
 	padding: 12px $grid-unit-20;
 }
 
+.colorPalettes {
+	padding: $grid-unit-10 0;
+}
+
 .colorIndicator {
 	width: 24px;
 	height: 24px;

package/src/mobile/global-styles-context/test/fixtures/theme.native.js

@@ -20,6 +20,11 @@ export const GLOBAL_STYLES_PALETTE = [
 		color: '#D1D1E4',
 		name: 'Purple',
 	},
+	{
+		color: '#cf1594',
+		name: 'Color 2 ',
+		slug: 'custom-color-2',
+	},
 ];
 
 export const GLOBAL_STYLES_GRADIENTS = {
@@ -91,6 +96,11 @@ export const DEFAULT_GLOBAL_STYLES = {
 				fontSize: 'var(--wp--preset--font-size--normal)',
 			},
 		},
+		'core/separator': {
+			color: {
+				text: 'var:preset|color|custom-color-2',
+			},
+		},
 	},
 };
 
@@ -132,6 +142,11 @@ export const PARSED_GLOBAL_STYLES = {
 				fontSize: '18px',
 			},
 		},
+		'core/separator': {
+			color: {
+				text: '#cf1594',
+			},
+		},
 	},
 };
 
@@ -172,6 +187,18 @@ export const RAW_FEATURES = {
 					name: 'Purple',
 				},
 			],
+			custom: [
+				{
+					color: '#1bf5c1',
+					name: 'Color 1 ',
+					slug: 'custom-color-1',
+				},
+				{
+					color: '#cf1594',
+					name: 'Color 2 ',
+					slug: 'custom-color-2',
+				},
+			],
 		},
 		gradients: {
 			default: [

package/src/mobile/global-styles-context/test/utils.native.js

@@ -125,14 +125,14 @@ describe( 'getGlobalStyles', () => {
 
 		expect( globalStyles ).toEqual(
 			expect.objectContaining( {
-				colors: RAW_FEATURES.color,
-				gradients,
 				__experimentalFeatures: {
 					color: {
 						palette: RAW_FEATURES.color.palette,
 						gradients,
 						text: true,
 						background: true,
+						defaultPalette: true,
+						defaultGradients: true,
 					},
 					typography: {
 						fontSizes: RAW_FEATURES.typography.fontSizes,

package/src/mobile/global-styles-context/utils.native.js

@@ -7,7 +7,11 @@ import { Dimensions } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { getPxFromCssUnit } from '@wordpress/block-editor';
+import {
+	getPxFromCssUnit,
+	useSetting,
+	useMultipleOriginColorsAndGradients,
+} from '@wordpress/block-editor';
 
 export const BLOCK_STYLE_ATTRIBUTES = [
 	'textColor',
@@ -17,7 +21,7 @@ export const BLOCK_STYLE_ATTRIBUTES = [
 	'fontSize',
 ];
 
-// Mapping style properties name to native
+// Mapping style properties name to native.
 const BLOCK_STYLE_ATTRIBUTES_MAPPING = {
 	textColor: 'color',
 	text: 'color',
@@ -47,7 +51,7 @@ export function getBlockPaddings(
 		return blockPaddings;
 	}
 
-	// Prevent adding extra paddings to inner blocks without background colors
+	// Prevent adding extra paddings to inner blocks without background colors.
 	if (
 		mergedStyle?.padding &&
 		! wrapperPropsStyle?.backgroundColor &&
@@ -70,7 +74,7 @@ export function getBlockColors(
 	const customBlockStyles = blockStyleAttributes?.style?.color || {};
 	const blockGlobalStyles = baseGlobalStyles?.blocks?.[ blockName ];
 
-	// Global styles colors
+	// Global styles colors.
 	if ( blockGlobalStyles?.color ) {
 		Object.entries( blockGlobalStyles.color ).forEach(
 			( [ key, value ] ) => {
@@ -87,7 +91,7 @@ export function getBlockColors(
 			baseGlobalStyles?.styles?.color?.text;
 	}
 
-	// Global styles elements
+	// Global styles elements.
 	if ( blockGlobalStyles?.elements ) {
 		const linkColor = blockGlobalStyles.elements?.link?.color?.text;
 		const styleKey = BLOCK_STYLE_ATTRIBUTES_MAPPING.link;
@@ -97,7 +101,7 @@ export function getBlockColors(
 		}
 	}
 
-	// Custom colors
+	// Custom colors.
 	Object.entries( blockStyleAttributes ).forEach( ( [ key, value ] ) => {
 		const isCustomColor = startsWith( value, '#' );
 		let styleKey = key;
@@ -119,7 +123,7 @@ export function getBlockColors(
 		}
 	} );
 
-	// Color placeholder
+	// Color placeholder.
 	if ( blockStyles?.color ) {
 		blockStyles[ BLOCK_STYLE_ATTRIBUTES_MAPPING.placeholder ] =
 			blockStyles.color;
@@ -138,7 +142,7 @@ export function getBlockTypography(
 	const customBlockStyles = blockStyleAttributes?.style?.typography || {};
 	const blockGlobalStyles = baseGlobalStyles?.blocks?.[ blockName ];
 
-	// Global styles
+	// Global styles.
 	if ( blockGlobalStyles?.typography ) {
 		const fontSize = blockGlobalStyles?.typography?.fontSize;
 		const lineHeight = blockGlobalStyles?.typography?.lineHeight;
@@ -172,7 +176,7 @@ export function getBlockTypography(
 		}
 	}
 
-	// Custom styles
+	// Custom styles.
 	if ( customBlockStyles?.fontSize ) {
 		typographyStyles.fontSize = customBlockStyles?.fontSize;
 	}
@@ -186,7 +190,7 @@ export function getBlockTypography(
 
 export function parseStylesVariables( styles, mappedValues, customValues ) {
 	let stylesBase = styles;
-	const variables = [ 'preset', 'custom' ];
+	const variables = [ 'preset', 'custom', 'var' ];
 
 	if ( ! stylesBase ) {
 		return styles;
@@ -196,7 +200,9 @@ export function parseStylesVariables( styles, mappedValues, customValues ) {
 		// Examples
 		// var(--wp--preset--color--gray)
 		// var(--wp--custom--body--typography--font-family)
+		// var:preset|color|custom-color-2
 		const regex = new RegExp( `var\\(--wp--${ variable }--(.*?)\\)`, 'g' );
+		const varRegex = /\"var:preset\|color\|(.*?)\"/gm;
 
 		if ( variable === 'preset' ) {
 			stylesBase = stylesBase.replace( regex, ( _$1, $2 ) => {
@@ -219,13 +225,25 @@ export function parseStylesVariables( styles, mappedValues, customValues ) {
 					return get( customValuesData, path );
 				}
 
-				// Check for camelcase properties
+				// Check for camelcase properties.
 				return get( customValuesData, [
 					...path.slice( 0, path.length - 1 ),
 					camelCase( path[ path.length - 1 ] ),
 				] );
 			} );
 		}
+
+		if ( variable === 'var' ) {
+			stylesBase = stylesBase.replace( varRegex, ( _$1, $2 ) => {
+				if ( mappedValues?.color ) {
+					const matchedValue = find( mappedValues.color?.values, {
+						slug: $2,
+					} );
+					return `"${ matchedValue?.color }"`;
+				}
+				return UNKNOWN_VALUE;
+			} );
+		}
 	} );
 
 	return JSON.parse( stylesBase );
@@ -233,7 +251,12 @@ export function parseStylesVariables( styles, mappedValues, customValues ) {
 
 export function getMappedValues( features, palette ) {
 	const typography = features?.typography;
-	const colors = { ...palette?.theme, ...palette?.custom };
+	const colors = [
+		...( palette?.theme || [] ),
+		...( palette?.custom || [] ),
+		...( palette?.default || [] ),
+	];
+
 	const fontSizes = {
 		...typography?.fontSizes?.theme,
 		...typography?.fontSizes?.custom,
@@ -258,14 +281,14 @@ export function getMappedValues( features, palette ) {
  * @return {Object} normalized sizes.
  */
 function normalizeFontSizes( fontSizes ) {
-	// Adds normalized PX values for each of the different keys
+	// Adds normalized PX values for each of the different keys.
 	if ( ! fontSizes ) {
 		return fontSizes;
 	}
 	const normalizedFontSizes = {};
 	const dimensions = Dimensions.get( 'window' );
 
-	[ 'default', 'theme', 'user' ].forEach( ( key ) => {
+	[ 'default', 'theme', 'custom' ].forEach( ( key ) => {
 		if ( fontSizes[ key ] ) {
 			normalizedFontSizes[ key ] = fontSizes[ key ]?.map(
 				( fontSizeObject ) => {
@@ -286,6 +309,52 @@ function normalizeFontSizes( fontSizes ) {
 	return normalizedFontSizes;
 }
 
+export function useMobileGlobalStylesColors( type = 'colors' ) {
+	const colorGradientSettings = useMultipleOriginColorsAndGradients();
+	const availableThemeColors = colorGradientSettings?.[ type ]?.reduce(
+		( colors, origin ) => colors.concat( origin?.[ type ] ),
+		[]
+	);
+	// Default editor colors/gradients if it's not a block-based theme.
+	const colorPalette =
+		type === 'colors' ? 'color.palette' : 'color.gradients';
+	const editorDefaultPalette = useSetting( colorPalette );
+
+	return availableThemeColors.length >= 1
+		? availableThemeColors
+		: editorDefaultPalette;
+}
+
+export function getColorsAndGradients(
+	defaultEditorColors = [],
+	defaultEditorGradients = [],
+	rawFeatures
+) {
+	const features = rawFeatures ? JSON.parse( rawFeatures ) : {};
+
+	return {
+		__experimentalGlobalStylesBaseStyles: null,
+		__experimentalFeatures: {
+			color: {
+				...( ! features?.color
+					? {
+							text: true,
+							background: true,
+							palette: {
+								default: defaultEditorColors,
+							},
+							gradients: {
+								default: defaultEditorGradients,
+							},
+					  }
+					: features?.color ),
+				defaultPalette: defaultEditorColors?.length > 0,
+				defaultGradients: defaultEditorGradients?.length > 0,
+			},
+		},
+	};
+}
+
 export function getGlobalStyles( rawStyles, rawFeatures ) {
 	const features = rawFeatures ? JSON.parse( rawFeatures ) : {};
 	const mappedValues = getMappedValues( features, features?.color?.palette );
@@ -310,14 +379,14 @@ export function getGlobalStyles( rawStyles, rawFeatures ) {
 	const fontSizes = normalizeFontSizes( features?.typography?.fontSizes );
 
 	return {
-		colors,
-		gradients,
 		__experimentalFeatures: {
 			color: {
 				palette: colors?.palette,
 				gradients,
 				text: features?.color?.text ?? true,
 				background: features?.color?.background ?? true,
+				defaultPalette: features?.color?.defaultPalette ?? true,
+				defaultGradients: features?.color?.defaultGradients ?? true,
 			},
 			typography: {
 				fontSizes,

package/src/mobile/gradient/index.native.js

@@ -60,7 +60,7 @@ export function getGradientColorGroup( gradientValue ) {
 	const excludeSideOrCorner = /linear-gradient\(to\s+([a-z\s]+,)/;
 
 	// Parser has some difficulties with angle defined as a side or corner (e.g. `to left`)
-	// so it's going to be excluded in order to matching color groups
+	// so it's going to be excluded in order to matching color groups.
 	const modifiedGradientValue = gradientValue.replace(
 		excludeSideOrCorner,
 		'linear-gradient('
@@ -151,7 +151,7 @@ function Gradient( {
 			<SVG>
 				<Defs>
 					<RadialGradient
-						//eslint-disable-next-line no-restricted-syntax
+						// eslint-disable-next-line no-restricted-syntax
 						id="radialGradient"
 						gradientUnits="userSpaceOnUse"
 						rx="70%"

package/src/mobile/html-text-input/container.ios.js

@@ -23,9 +23,9 @@ class HTMLInputContainer extends Component {
 
 			onPanResponderMove: ( e, gestureState ) => {
 				if ( gestureState.dy > 100 && gestureState.dy < 110 ) {
-					//Keyboard.dismiss() and this.textInput.blur() are not working here
-					//They require to know the currentlyFocusedID under the hood but
-					//during this gesture there's no currentlyFocusedID
+					// Keyboard.dismiss() and this.textInput.blur() are not working here
+					// They require to know the currentlyFocusedID under the hood but
+					// during this gesture there's no currentlyFocusedID.
 					UIManager.blur( e.target );
 				}
 			},

package/src/mobile/html-text-input/index.native.js

@@ -52,7 +52,7 @@ export class HTMLTextInput extends Component {
 
 	componentWillUnmount() {
 		removeFilter( 'native.persist-html', 'html-text-input' );
-		//TODO: Blocking main thread
+		// TODO: Blocking main thread.
 		this.stopEditing();
 	}
 

package/src/mobile/html-text-input/test/index.native.js

@@ -8,12 +8,12 @@ import { render, fireEvent } from 'test/helpers';
  */
 import { HTMLTextInput } from '..';
 
-// Finds the Content TextInput in our HTMLInputView
+// Finds the Content TextInput in our HTMLInputView.
 const findContentTextInput = ( screen ) => {
 	return screen.getByA11yLabel( 'html-view-content' );
 };
 
-// Finds the Title TextInput in our HTMLInputView
+// Finds the Title TextInput in our HTMLInputView.
 const findTitleTextInput = ( screen ) => {
 	return screen.getByA11yLabel( 'html-view-title' );
 };
@@ -43,11 +43,11 @@ describe( 'HTMLTextInput', () => {
 			/>
 		);
 
-		// Simulate user typing text
+		// Simulate user typing text.
 		const htmlTextInput = findContentTextInput( screen );
 		fireEvent( htmlTextInput, 'changeText', 'text' );
 
-		//Check if the onChange is called and the state is updated
+		// Check if the onChange is called and the state is updated.
 		expect( onChange ).toHaveBeenCalledTimes( 1 );
 		expect( onChange ).toHaveBeenCalledWith( 'text' );
 
@@ -65,15 +65,15 @@ describe( 'HTMLTextInput', () => {
 			/>
 		);
 
-		// Simulate user typing text
+		// Simulate user typing text.
 		const htmlTextInput = findContentTextInput( screen );
 		fireEvent( htmlTextInput, 'changeText', 'text' );
 
-		//Simulate blur event
+		//Simulate blur event.
 		fireEvent( htmlTextInput, 'blur' );
 
-		//Normally prop.value is updated with the help of withSelect
-		//But we don't have it in tests so we just simulate it
+		// Normally prop.value is updated with the help of withSelect
+		// but we don't have it in tests so we just simulate it.
 		screen.update(
 			<HTMLTextInput
 				onPersist={ onPersist }
@@ -83,17 +83,17 @@ describe( 'HTMLTextInput', () => {
 			/>
 		);
 
-		//Check if the onPersist is called and the state is updated
+		// Check if the onPersist is called and the state is updated.
 		expect( onPersist ).toHaveBeenCalledTimes( 1 );
 		expect( onPersist ).toHaveBeenCalledWith( 'text' );
 
-		//Simulate blur event
+		//Simulate blur event.
 		fireEvent( htmlTextInput, 'blur' );
 
-		// Check that onPersist is not called for non-dirty state
+		// Check that onPersist is not called for non-dirty state.
 		expect( onPersist ).toHaveBeenCalledTimes( 1 );
 
-		//We expect state.value is getting propagated from prop.value
+		// We expect state.value is getting propagated from prop.value.
 		expect( screen.getByDisplayValue( 'text' ) ).toBeDefined();
 	} );
 
@@ -107,11 +107,11 @@ describe( 'HTMLTextInput', () => {
 			/>
 		);
 
-		// Simulate user typing text
+		// Simulate user typing text.
 		const textInput = findTitleTextInput( screen );
 		fireEvent( textInput, 'changeText', 'text' );
 
-		//Check if the setTitleAction is called
+		// Check if the setTitleAction is called.
 		expect( editTitle ).toHaveBeenCalledTimes( 1 );
 		expect( editTitle ).toHaveBeenCalledWith( 'text' );
 	} );

package/src/mobile/image/index.native.js

@@ -174,7 +174,7 @@ const ImageComponent = ( {
 		<View
 			style={ [
 				styles.container,
-				// only set alignItems if an image exists because alignItems causes the placeholder
+				// Only set alignItems if an image exists because alignItems causes the placeholder
 				// to disappear when an aligned image can't be downloaded
 				// https://github.com/wordpress-mobile/gutenberg-mobile/issues/1592
 				imageData && align && { alignItems: align },

package/src/mobile/image/style.native.scss

@@ -89,6 +89,7 @@
 	color: #fff;
 	font-size: 14;
 	margin-top: 5;
+	text-align: center;
 }
 
 .editContainer {

package/src/mobile/inserter-button/index.native.js

@@ -10,14 +10,13 @@ import { Component } from '@wordpress/element';
 import { Icon } from '@wordpress/components';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
-import { sparkles } from '@wordpress/icons';
 import { BlockIcon } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
-
+import sparkles from './sparkles';
 class MenuItem extends Component {
 	constructor() {
 		super( ...arguments );