[RNMobile] Update Editor block inserter button styles and default text input placeholder/selection styles

packages/block-editor/src/components/inserter/index.native.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { AccessibilityInfo, Platform, Text } from 'react-native';
+import { AccessibilityInfo, Platform } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -35,46 +35,30 @@ const VOICE_OVER_ANNOUNCEMENT_DELAY = 1000;
 const defaultRenderToggle = ( {
 	onToggle,
 	disabled,
-	style,
-	containerStyle,
+	iconStyle,
+	buttonStyle,
 	onLongPress,
-	useExpandedMode,
 } ) => {
-	// The "expanded mode" refers to the editor's appearance when no blocks
-	// are currently selected. The "add block" button has a separate style
-	// for the "expanded mode", which are added via the below "expandedModeViewProps"
-	// and "expandedModeViewText" variables.
-	const expandedModeViewProps = useExpandedMode && {
-		icon: <Icon icon={ plus } style={ style } />,
-		customContainerStyles: containerStyle,
-		fixedRatio: false,
-	};
-	const expandedModeViewText = (
-		<Text style={ styles[ 'inserter-menu__add-block-button-text' ] }>
-			{ __( 'Add blocks' ) }
-		</Text>
-	);
-
 	return (
 		<ToolbarButton
 			title={ _x(
 				'Add block',
 				'Generic label for block inserter button'
 			) }
-			icon={ <Icon icon={ plusCircleFilled } style={ style } /> }
+			icon={ <Icon icon={ plus } style={ iconStyle } /> }
 			onClick={ onToggle }
 			extraProps={ {
 				hint: __( 'Double tap to add a block' ),
 				// testID is present to disambiguate this element for native UI tests. It's not
 				// usually required for components. See: https://github.com/WordPress/gutenberg/pull/18832#issuecomment-561411389.
 				testID: 'add-block-button',
 				onLongPress,
+				hitSlop: { top: 10, bottom: 10, left: 10, right: 10 },
 			} }
 			isDisabled={ disabled }
-			{ ...expandedModeViewProps }
-		>
-			{ useExpandedMode && expandedModeViewText }
-		</ToolbarButton>
+			customContainerStyles={ buttonStyle }
+			fixedRatio={ false }
+		/>
 	);
 };
 
@@ -249,23 +233,21 @@ export class Inserter extends Component {
 			renderToggle = defaultRenderToggle,
 			getStylesFromColorScheme,
 			showSeparator,
-			useExpandedMode,
 		} = this.props;
 		if ( showSeparator && isOpen ) {
 			return <BlockInsertionPoint />;
 		}
-		const style = useExpandedMode
-			? styles[ 'inserter-menu__add-block-button-icon--expanded' ]
-			: getStylesFromColorScheme(
-					styles[ 'inserter-menu__add-block-button-icon' ],
-					styles[ 'inserter-menu__add-block-button-icon--dark' ]
-			  );
-
-		const containerStyle = getStylesFromColorScheme(
+
+		const buttonStyle = getStylesFromColorScheme(
 			styles[ 'inserter-menu__add-block-button' ],
 			styles[ 'inserter-menu__add-block-button--dark' ]
 		);
 
+		const iconStyle = getStylesFromColorScheme(
+			styles[ 'inserter-menu__add-block-button-icon' ],
+			styles[ 'inserter-menu__add-block-button-icon--dark' ]
+		);
+
 		const onPress = () => {
 			this.setState(
 				{
@@ -301,10 +283,9 @@ export class Inserter extends Component {
 					onToggle: onPress,
 					isOpen,
 					disabled,
-					style,
-					containerStyle,
+					iconStyle,
+					buttonStyle,
 					onLongPress,
-					useExpandedMode,
 				} ) }
 				<Picker
 					ref={ ( instance ) => ( this.picker = instance ) }

packages/block-editor/src/components/inserter/style.native.scss

@@ -1,26 +1,21 @@
 /** @format */
-
-.inserter-menu__add-block-button-icon {
-	color: $blue-50;
+.inserter-menu__add-block-button {
+	border-radius: 2px;
+	background-color: $black;
+	margin: 9px $grid-unit-20 10px $grid-unit-20;
+	padding: 0;
 }
 
-.inserter-menu__add-block-button-icon--dark {
-	color: $blue-30;
+.inserter-menu__add-block-button--dark {
+	background-color: $white;
 }
 
-.inserter-menu__add-block-button-icon--expanded {
+.inserter-menu__add-block-button-icon {
 	color: $white;
 }
 
-.inserter-menu__add-block-button {
-	border-radius: 22px;
-	background-color: $blue-50;
-	margin: 8px;
-	padding: 6px 16px 6px 12px;
-}
-
-.inserter-menu__add-block-button--dark {
-	background-color: $blue-30;
+.inserter-menu__add-block-button-icon--dark {
+	color: $black;
 }
 
 .inserter-menu__add-block-button-text {

packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap

@@ -159,6 +159,7 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
           onStartShouldSetResponder={[Function]}
           placeholder="Add caption"
           placeholderTextColor="gray"
+          selectionColor="black"
           style={
             {
               "backgroundColor": undefined,
@@ -358,6 +359,7 @@ exports[`Audio block renders audio file without crashing 1`] = `
           onStartShouldSetResponder={[Function]}
           placeholder="Add caption"
           placeholderTextColor="gray"
+          selectionColor="black"
           style={
             {
               "backgroundColor": undefined,

packages/block-library/src/file/test/__snapshots__/edit.native.js.snap

@@ -94,6 +94,7 @@ exports[`File block renders file error state without crashing 1`] = `
           onStartShouldSetResponder={[Function]}
           placeholder="File name"
           placeholderTextColor="gray"
+          selectionColor="black"
           style={
             {
               "backgroundColor": undefined,
@@ -322,6 +323,7 @@ exports[`File block renders file without crashing 1`] = `
           onStartShouldSetResponder={[Function]}
           placeholder="File name"
           placeholderTextColor="gray"
+          selectionColor="black"
           style={
             {
               "backgroundColor": undefined,

packages/block-library/src/paragraph/test/__snapshots__/edit.native.js.snap

@@ -32,6 +32,7 @@ exports[`Paragraph block should render without crashing and match snapshot 1`] =
     onSelectionChange={[Function]}
     placeholder="Start writing…"
     placeholderTextColor="gray"
+    selectionColor="black"
     triggerKeyCodes={[]}
     value=""
   />

packages/block-library/src/preformatted/test/__snapshots__/edit.native.js.snap

@@ -39,6 +39,7 @@ exports[`Preformatted should match snapshot when content is empty 1`] = `
       onSelectionChange={[Function]}
       placeholder="Write preformatted text…"
       placeholderTextColor="gray"
+      selectionColor="black"
       triggerKeyCodes={[]}
       value=""
     />
@@ -85,6 +86,7 @@ exports[`Preformatted should match snapshot when content is not empty 1`] = `
       onSelectionChange={[Function]}
       placeholder="Write preformatted text…"
       placeholderTextColor="gray"
+      selectionColor="black"
       triggerKeyCodes={[]}
       value="<pre>Hello World!</pre>"
     />

packages/block-library/src/search/test/__snapshots__/edit.native.js.snap

@@ -52,6 +52,7 @@ exports[`Search Block renders block with button inside option 1`] = `
         onStartShouldSetResponder={[Function]}
         placeholder="Add label…"
         placeholderTextColor="gray"
+        selectionColor="black"
         style={
           {
             "backgroundColor": undefined,
@@ -168,6 +169,7 @@ exports[`Search Block renders block with button inside option 1`] = `
             onStartShouldSetResponder={[Function]}
             placeholder=""
             placeholderTextColor="gray"
+            selectionColor="black"
             style={
               {
                 "backgroundColor": undefined,
@@ -246,6 +248,7 @@ exports[`Search Block renders block with icon button option matches snapshot 1`]
         onStartShouldSetResponder={[Function]}
         placeholder="Add label…"
         placeholderTextColor="gray"
+        selectionColor="black"
         style={
           {
             "backgroundColor": undefined,
@@ -432,6 +435,7 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = `
             onStartShouldSetResponder={[Function]}
             placeholder=""
             placeholderTextColor="gray"
+            selectionColor="black"
             style={
               {
                 "backgroundColor": undefined,
@@ -510,6 +514,7 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
         onStartShouldSetResponder={[Function]}
         placeholder="Add label…"
         placeholderTextColor="gray"
+        selectionColor="black"
         style={
           {
             "backgroundColor": undefined,
@@ -626,6 +631,7 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
             onStartShouldSetResponder={[Function]}
             placeholder=""
             placeholderTextColor="gray"
+            selectionColor="black"
             style={
               {
                 "backgroundColor": undefined,
@@ -704,6 +710,7 @@ exports[`Search Block renders with no-button option matches snapshot 1`] = `
         onStartShouldSetResponder={[Function]}
         placeholder="Add label…"
         placeholderTextColor="gray"
+        selectionColor="black"
         style={
           {
             "backgroundColor": undefined,

packages/components/src/button/index.native.js

@@ -95,6 +95,7 @@ export function Button( props ) {
 		tooltipPosition,
 		isActiveStyle,
 		customContainerStyles,
+		hitSlop,
 	} = props;
 	const preferredColorScheme = usePreferredColorScheme();
 
@@ -184,6 +185,7 @@ export function Button( props ) {
 			style={ containerStyle }
 			disabled={ isDisabled }
 			testID={ testID }
+			hitSlop={ hitSlop }
 		>
 			<LongPressGestureHandler
 				minDurationMs={ 500 }

packages/edit-post/src/components/header/header-toolbar/index.native.js

@@ -6,7 +6,7 @@ import { Platform, ScrollView, View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { useCallback, useRef, useState, useEffect } from '@wordpress/element';
+import { useCallback, useRef, useEffect } from '@wordpress/element';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { withViewportMatch } from '@wordpress/viewport';
@@ -54,8 +54,10 @@ function HeaderToolbar( {
 	noContentSelected,
 } ) {
 	const anchorNodeRef = useRef();
-	const wasNoContentSelected = useRef( noContentSelected );
-	const [ isInserterOpen, setIsInserterOpen ] = useState( false );
+	const containerStyle = getStylesFromColorScheme(
+		styles[ 'header-toolbar__container' ],
+		styles[ 'header-toolbar__container--dark' ]
+	);
 
 	useEffect( () => {
 		const onUndoSubscription = subscribeOnUndoPressed( undo );
@@ -140,22 +142,6 @@ function HeaderToolbar( {
 		</ToolbarGroup>
 	);
 
-	const onToggleInserter = useCallback(
-		( isOpen ) => {
-			if ( isOpen ) {
-				wasNoContentSelected.current = noContentSelected;
-			}
-			setIsInserterOpen( isOpen );
-		},
-		[ noContentSelected ]
-	);
-
-	// Expanded mode should be preserved while the inserter is open.
-	// This way we prevent style updates during the opening transition.
-	const useExpandedMode = isInserterOpen
-		? wasNoContentSelected.current
-		: noContentSelected;
-
 	/* translators: accessibility text for the editor toolbar */
 	const toolbarAriaLabel = __( 'Document tools' );
 
@@ -164,14 +150,7 @@ function HeaderToolbar( {
 			ref={ anchorNodeRef }
 			testID={ toolbarAriaLabel }
 			accessibilityLabel={ toolbarAriaLabel }
-			style={ [
-				getStylesFromColorScheme(
-					styles[ 'header-toolbar__container' ],
-					styles[ 'header-toolbar__container--dark' ]
-				),
-				useExpandedMode &&
-					styles[ 'header-toolbar__container--expanded' ],
-			] }
+			style={ containerStyle }
 		>
 			<ScrollView
 				ref={ scrollViewRef }
@@ -184,11 +163,8 @@ function HeaderToolbar( {
 					styles[ 'header-toolbar__scrollable-content' ]
 				}
 			>
-				<Inserter
-					disabled={ ! showInserter }
-					useExpandedMode={ useExpandedMode }
-					onToggle={ onToggleInserter }
-				/>
+				<Inserter disabled={ ! showInserter } />
+
 				{ noContentSelected && renderMediaButtons }
 				<BlockToolbar
 					anchorNodeRef={ anchorNodeRef.current }

packages/react-native-editor/CHANGELOG.md

@@ -13,6 +13,7 @@ For each user feature we should also add a importance categorization label  to i
 -   [**] Add media inserter buttons to editor toolbar [#51827]
 -   [**] Update native BlockOutline component styles to remove blue border from blocks [#51222]
 -   [**] Move the undo/redo buttons to the navigation bar [#51766]
+-   [**] Update Editor block inserter button styles and default text input placeholder/selection styles [#52269]
 
 ## 1.99.0
 -   [*] Rename "Reusable blocks" to "Synced patterns", aligning with the web editor. [#51704]