[RNMobile] Update "add block" button style in default editor view

packages/base-styles/_variables.scss

@@ -111,6 +111,7 @@ $block-bg-padding--h: 2.375em;
 
 // Dimensions.
 $mobile-header-toolbar-height: 44px;
+$mobile-header-toolbar-expanded-height: 52px;
 $mobile-floating-toolbar-height: 44px;
 $mobile-floating-toolbar-margin: 8px;
 $mobile-color-swatch: 48px;

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { AccessibilityInfo, Platform } from 'react-native';
+import { AccessibilityInfo, Platform, Text } from 'react-native';
 import { delay } from 'lodash';
 
 /**
@@ -15,6 +15,7 @@ import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
 import {
 	Icon,
+	plus,
 	plusCircle,
 	plusCircleFilled,
 	insertAfter,
@@ -32,27 +33,51 @@ import { store as blockEditorStore } from '../../store';
 
 const VOICE_OVER_ANNOUNCEMENT_DELAY = 1000;
 
-const defaultRenderToggle = ( { onToggle, disabled, style, onLongPress } ) => (
-	<ToolbarButton
-		title={ _x( 'Add block', 'Generic label for block inserter button' ) }
-		icon={
-			<Icon
-				icon={ plusCircleFilled }
-				style={ style }
-				color={ style.color }
-			/>
-		}
-		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://git.io/JeQ7G.
-			testID: 'add-block-button',
-			onLongPress,
-		} }
-		isDisabled={ disabled }
-	/>
-);
+const defaultRenderToggle = ( {
+	onToggle,
+	disabled,
+	style,
+	containerStyle,
+	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 } /> }
+			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://git.io/JeQ7G.
+				testID: 'add-block-button',
+				onLongPress,
+			} }
+			isDisabled={ disabled }
+			{ ...expandedModeViewProps }
+		>
+			{ useExpandedMode && expandedModeViewText }
+		</ToolbarButton>
+	);
+};
 
 export class Inserter extends Component {
 	constructor() {
@@ -219,13 +244,21 @@ export class Inserter extends Component {
 			renderToggle = defaultRenderToggle,
 			getStylesFromColorScheme,
 			showSeparator,
+			useExpandedMode,
 		} = this.props;
 		if ( showSeparator && isOpen ) {
 			return <BlockInsertionPoint />;
 		}
-		const style = getStylesFromColorScheme(
-			styles.addBlockButton,
-			styles.addBlockButtonDark
+		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(
+			styles[ 'inserter-menu__add-block-button' ],
+			styles[ 'inserter-menu__add-block-button--dark' ]
 		);
 
 		const onPress = () => {
@@ -265,7 +298,9 @@ export class Inserter extends Component {
 					isOpen,
 					disabled,
 					style,
+					containerStyle,
 					onLongPress,
+					useExpandedMode,
 				} ) }
 				<Picker
 					ref={ ( instance ) => ( this.picker = instance ) }

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

@@ -1,13 +1,34 @@
 /** @format */
 
-.addBlockButton {
-	color: $blue-wordpress;
+.inserter-menu__add-block-button-icon {
+	color: $blue-50;
 }
 
-.addBlockButtonDark {
+.inserter-menu__add-block-button-icon--dark {
 	color: $blue-30;
 }
 
+.inserter-menu__add-block-button-icon--expanded {
+	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-text {
+	color: $white;
+	font-weight: 500;
+	align-self: center;
+}
+
 .inserter-menu__list-wrapper {
 	flex: 1;
 }

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 { useRef } from '@wordpress/element';
+import { useCallback, useRef, useState } from '@wordpress/element';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { withViewportMatch } from '@wordpress/viewport';
@@ -40,7 +40,11 @@ function HeaderToolbar( {
 	getStylesFromColorScheme,
 	onHideKeyboard,
 	isRTL,
+	noContentSelected,
 } ) {
+	const wasNoContentSelected = useRef( noContentSelected );
+	const [ isInserterOpen, setIsInserterOpen ] = useState( false );
+
 	const scrollViewRef = useRef( null );
 	const scrollToStart = () => {
 		// scrollview doesn't seem to automatically adjust to RTL on Android so, scroll to end when Android
@@ -79,12 +83,32 @@ function HeaderToolbar( {
 		return isRTL ? buttons.reverse() : buttons;
 	};
 
+	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;
+
 	return (
 		<View
-			style={ getStylesFromColorScheme(
-				styles.container,
-				styles.containerDark
-			) }
+			style={ [
+				getStylesFromColorScheme(
+					styles[ 'header-toolbar__container' ],
+					styles[ 'header-toolbar__container--dark' ]
+				),
+				useExpandedMode &&
+					styles[ 'header-toolbar__container--expanded' ],
+			] }
 		>
 			<ScrollView
 				ref={ scrollViewRef }
@@ -93,14 +117,24 @@ function HeaderToolbar( {
 				showsHorizontalScrollIndicator={ false }
 				keyboardShouldPersistTaps="always"
 				alwaysBounceHorizontal={ false }
-				contentContainerStyle={ styles.scrollableContent }
+				contentContainerStyle={
+					styles[ 'header-toolbar__scrollable-content' ]
+				}
 			>
-				<Inserter disabled={ ! showInserter } />
+				<Inserter
+					disabled={ ! showInserter }
+					useExpandedMode={ useExpandedMode }
+					onToggle={ onToggleInserter }
+				/>
 				{ renderHistoryButtons() }
 				<BlockToolbar />
 			</ScrollView>
 			{ showKeyboardHideButton && (
-				<ToolbarGroup passedStyle={ styles.keyboardHideContainer }>
+				<ToolbarGroup
+					passedStyle={
+						styles[ 'header-toolbar__keyboard-hide-container' ]
+					}
+				>
 					<ToolbarButton
 						title={ __( 'Hide keyboard' ) }
 						icon={ keyboardClose }
@@ -121,8 +155,13 @@ export default compose( [
 			getBlockRootClientId,
 			getBlockSelectionEnd,
 			hasInserterItems,
+			hasSelectedBlock,
 		} = select( blockEditorStore );
-		const { getEditorSettings } = select( editorStore );
+		const { getEditorSettings, isPostTitleSelected } = select(
+			editorStore
+		);
+		const isAnyBlockSelected = hasSelectedBlock();
+		const isTitleSelected = isPostTitleSelected();
 		return {
 			hasRedo: select( editorStore ).hasEditorRedo(),
 			hasUndo: select( editorStore ).hasEditorUndo(),
@@ -136,6 +175,7 @@ export default compose( [
 			isTextModeEnabled:
 				select( editPostStore ).getEditorMode() === 'text',
 			isRTL: select( blockEditorStore ).getSettings().isRTL,
+			noContentSelected: ! isAnyBlockSelected && ! isTitleSelected,
 		};
 	} ),
 	withDispatch( ( dispatch ) => {

packages/edit-post/src/components/header/header-toolbar/style.native.scss

@@ -1,22 +1,26 @@
 
-.container {
+.header-toolbar__container {
 	height: $mobile-header-toolbar-height;
 	flex-direction: row;
 	background-color: $app-background;
 	border-top-color: #e9eff3;
 	border-top-width: 1px;
 }
 
-.containerDark {
+.header-toolbar__container--dark {
 	background-color: $app-background-dark-alt;
 	border-top-color: $background-dark-elevated;
 }
 
-.scrollableContent {
+.header-toolbar__container--expanded {
+	height: $mobile-header-toolbar-expanded-height;
+}
+
+.header-toolbar__scrollable-content {
 	flex-grow: 1; // Fixes RTL issue on Android.
 }
 
-.keyboardHideContainer {
+.header-toolbar__keyboard-hide-container {
 	padding-right: 0;
 	padding-left: 0;
 	padding-top: 4px;

packages/edit-post/src/components/layout/index.native.js

@@ -115,7 +115,7 @@ class Layout extends Component {
 		// Add a margin view at the bottom for the header.
 		const marginBottom =
 			Platform.OS === 'android' && ! isHtmlView
-				? headerToolbarStyles.container.height
+				? headerToolbarStyles[ 'header-toolbar__container' ].height
 				: 0;
 
 		const toolbarKeyboardAvoidingViewStyle = {

packages/react-native-editor/CHANGELOG.md

@@ -11,6 +11,7 @@ For each user feature we should also add a importance categorization label  to i
 
 ## Unreleased
 
+-   [**] Update "add block" button's style in default editor view. [#39726]
 -   [*] Remove banner error notification on upload failure [#39694]
 
 ## 1.73.1

test/native/__mocks__/styleMock.js

@@ -156,4 +156,7 @@ module.exports = {
 	addMediaButton: {
 		color: 'white',
 	},
+	'header-toolbar__container': {
+		height: 44,
+	},
 };