[Mobile] Update toolbar icons and colors (#52336)

* Update toolbar icons and colors * Update colors to add $app-safe-area-background * Button component - Update icon colors * SVG component - Update colors to support dark/light themes * ToolbarGroup - Update border colors * HeaderToolbar - Update colors * Layout - Update safe area color * TextColor Format - Update toolbar icon styles * Update changelog * Add missing file extension * Update styleMock * Update BlockMover snapshot * Restores the Fill/Slot logic for the BlockSettingsButton * Adds initial Block Toolbar integration tests related to the block settings button * Add missing style to the styleMock file * Update usage of Platform * Rename $app-safe-area-background to $app-safe-area-background-dark
WordPress · Jul 17, 2023 · 372b9b1 · 372b9b1
1 parent 32278f0
commit 372b9b1
Show file tree

Hide file tree

Showing 19 changed files with 222 additions and 88 deletions.
diff --git a/packages/base-styles/_colors.native.scss b/packages/base-styles/_colors.native.scss
@@ -102,6 +102,7 @@ $dark-ultra-dim: #ffffff14; //rgba(255, 255, 255, 0.08);
 $app-background: $white;
 $app-background-dark: $black;
 $app-background-dark-alt: $background-dark-elevated;
+$app-safe-area-background-dark: #141414;
 
 $modal-background: $white;
 $modal-background-dark: $background-dark-elevated;

diff --git a/packages/block-editor/src/components/block-mover/test/__snapshots__/index.native.js.snap b/packages/block-editor/src/components/block-mover/test/__snapshots__/index.native.js.snap
@@ -49,6 +49,9 @@ exports[`Block Mover Picker should render without crashing and match snapshot 1`
       {
         "height": 44,
       },
+      {
+        "borderLeftWidth": 0.5,
+      },
       undefined,
     ]
   }
@@ -108,7 +111,6 @@ exports[`Block Mover Picker should render without crashing and match snapshot 1`
           }
         >
           <Svg
-            colorScheme="light"
             height={24}
             style={{}}
             viewBox="0 0 24 24"
@@ -176,7 +178,6 @@ exports[`Block Mover Picker should render without crashing and match snapshot 1`
           }
         >
           <Svg
-            colorScheme="light"
             height={24}
             style={{}}
             viewBox="0 0 24 24"

diff --git a/packages/block-editor/src/components/block-settings/button.native.js b/packages/block-editor/src/components/block-settings/button.native.js
@@ -1,20 +1,35 @@
 /**
  * WordPress dependencies
  */
-import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
+import { createSlotFill, ToolbarButton } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { withDispatch } from '@wordpress/data';
 import { cog } from '@wordpress/icons';
 
-const SettingsButton = ( { onOpenBlockSettings } ) => {
-	return (
-		<ToolbarGroup>
-			<ToolbarButton
-				title={ __( 'Open Settings' ) }
-				icon={ cog }
-				onClick={ onOpenBlockSettings }
-			/>
-		</ToolbarGroup>
-	);
-};
+const { Fill, Slot } = createSlotFill( 'SettingsToolbarButton' );
 
-export default SettingsButton;
+const SettingsButton = ( { openGeneralSidebar } ) => (
+	<ToolbarButton
+		title={ __( 'Open Settings' ) }
+		icon={ cog }
+		onClick={ openGeneralSidebar }
+	/>
+);
+
+const SettingsButtonFill = ( props ) => (
+	<Fill>
+		<SettingsButton { ...props } />
+	</Fill>
+);
+
+const SettingsToolbarButton = withDispatch( ( dispatch ) => {
+	const { openGeneralSidebar } = dispatch( 'core/edit-post' );
+
+	return {
+		openGeneralSidebar: () => openGeneralSidebar( 'edit-post/block' ),
+	};
+} )( SettingsButtonFill );
+
+SettingsToolbarButton.Slot = Slot;
+
+export default SettingsToolbarButton;
diff --git a/packages/block-editor/src/components/block-toolbar/index.native.js b/packages/block-editor/src/components/block-toolbar/index.native.js
@@ -20,7 +20,7 @@ const REMOVE_EMPY_PARENT_BLOCKS = [
 	'core/social-links',
 ];
 
-export default function BlockToolbar( { anchorNodeRef, onOpenBlockSettings } ) {
+export default function BlockToolbar( { anchorNodeRef } ) {
 	const {
 		rootClientId,
 		blockClientId,
@@ -93,9 +93,15 @@ export default function BlockToolbar( { anchorNodeRef, onOpenBlockSettings } ) {
 		<>
 			{ isValidAndVisual && (
 				<>
-					<BlockSettingsButton
-						onOpenBlockSettings={ onOpenBlockSettings }
-					/>
+					<BlockSettingsButton.Slot>
+						{ /* Render only one settings icon even if we have more than one fill - need for hooks with controls. */ }
+						{ ( fills = [ null ] ) => {
+							if ( ! fills?.length > 0 ) {
+								return null;
+							}
+							return fills[ 0 ];
+						} }
+					</BlockSettingsButton.Slot>
 
 					<BlockControls.Slot group="block" />
 					<BlockControls.Slot />

diff --git a/packages/block-editor/src/components/block-toolbar/test/index.native.js b/packages/block-editor/src/components/block-toolbar/test/index.native.js
@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	fireEvent,
+	getBlock,
+	initializeEditor,
+	setupCoreBlocks,
+} from 'test/helpers';
+
+setupCoreBlocks();
+
+describe( 'Block Toolbar', () => {
+	it( "doesn't render the block settings button if there aren't any settings for the current selected block", async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Image' );
+
+		// Act
+		fireEvent(
+			screen.getByTestId( 'media-options-picker' ),
+			'backdropPress'
+		);
+
+		// Assert
+		expect( screen.queryByLabelText( 'Open Settings' ) ).toBeNull();
+	} );
+
+	it( 'renders the block settings button for the current selected block', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = await getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+
+		// Assert
+		expect( screen.queryByLabelText( 'Open Settings' ) ).toBeVisible();
+	} );
+} );
diff --git a/packages/block-editor/src/components/inspector-controls/fill.native.js b/packages/block-editor/src/components/inspector-controls/fill.native.js
@@ -6,6 +6,7 @@ import { View } from 'react-native';
 /**
  * WordPress dependencies
  */
+import { Children } from '@wordpress/element';
 import { BottomSheetConsumer } from '@wordpress/components';
 import warning from '@wordpress/warning';
 import deprecated from '@wordpress/deprecated';
@@ -15,6 +16,7 @@ import deprecated from '@wordpress/deprecated';
  */
 import groups from './groups';
 import useDisplayBlockControls from '../use-display-block-controls';
+import { BlockSettingsButton } from '../block-settings';
 
 export default function InspectorControlsFill( {
 	children,
@@ -53,6 +55,7 @@ export default function InspectorControlsFill( {
 					</BottomSheetConsumer>
 				}
 			</Fill>
+			{ Children.count( children ) > 0 && <BlockSettingsButton /> }
 		</>
 	);
 }
diff --git a/packages/components/src/button/index.native.js b/packages/components/src/button/index.native.js
@@ -24,6 +24,7 @@ import {
  */
 import Tooltip from '../tooltip';
 import Icon from '../icon';
+import style from './style.scss';
 
 const isAndroid = Platform.OS === 'android';
 const marginBottom = isAndroid ? -0.5 : 0;
@@ -51,8 +52,6 @@ const styles = StyleSheet.create( {
 		justifyContent: 'center',
 		alignItems: 'center',
 		borderRadius: 6,
-		borderColor: '#2e4453',
-		backgroundColor: '#2e4453',
 	},
 	subscriptInactive: {
 		color: '#7b9ab1', // $toolbar-button.
@@ -106,10 +105,16 @@ export function Button( props ) {
 		customContainerStyles && { ...customContainerStyles },
 	];
 
+	const buttonActiveColorStyles = usePreferredColorSchemeStyle(
+		style[ 'components-button-light--active' ],
+		style[ 'components-button-dark--active' ]
+	);
+
 	const buttonViewStyle = {
 		opacity: isDisabled ? 0.3 : 1,
 		...( fixedRatio && styles.fixedRatio ),
 		...( isPressed ? styles.buttonActive : styles.buttonInactive ),
+		...( isPressed ? buttonActiveColorStyles : {} ),
 		...( isPressed &&
 			isActiveStyle?.borderRadius && {
 				borderRadius: isActiveStyle.borderRadius,
@@ -159,7 +164,6 @@ export function Button( props ) {
 
 	const newIcon = icon
 		? cloneElement( <Icon icon={ icon } size={ iconSize } />, {
-				colorScheme: preferredColorScheme,
 				isPressed,
 		  } )
 		: null;

diff --git a/packages/components/src/button/style.native.scss b/packages/components/src/button/style.native.scss
@@ -0,0 +1,9 @@
+.components-button-light--active {
+	border-color: $light-dim;
+	background-color: $light-dim;
+}
+
+.components-button-dark--active {
+	border-color: $dark-quaternary;
+	background-color: $dark-quaternary;
+}
diff --git a/packages/components/src/toolbar/toolbar-group/style.native.scss b/packages/components/src/toolbar/toolbar-group/style.native.scss
@@ -1,11 +1,10 @@
 .container {
 	flex-direction: row;
-	border-left-width: 1px;
-	border-color: #e9eff3;
+	border-color: $light-quaternary;
 	padding-left: 5px;
 	padding-right: 5px;
 }
 
 .containerDark {
-	border-color: #525354;
+	border-color: $dark-quaternary;
 }
diff --git a/packages/components/src/toolbar/toolbar-group/toolbar-group-container.native.js b/packages/components/src/toolbar/toolbar-group/toolbar-group-container.native.js
@@ -1,31 +1,26 @@
 /**
  * External dependencies
  */
-import { View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 /**
  * WordPress dependencies
  */
-import { withPreferredColorScheme } from '@wordpress/compose';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
 
-const ToolbarGroupContainer = ( {
-	getStylesFromColorScheme,
-	passedStyle,
-	children,
-} ) => (
-	<View
-		style={ [
-			getStylesFromColorScheme( styles.container, styles.containerDark ),
-			passedStyle,
-		] }
-	>
-		{ children }
-	</View>
-);
+const ToolbarGroupContainer = ( { passedStyle, children } ) => {
+	const groupStyles = [
+		usePreferredColorSchemeStyle( styles.container, styles.containerDark ),
+		{ borderLeftWidth: StyleSheet.hairlineWidth },
+		passedStyle,
+	];
 
-export default withPreferredColorScheme( ToolbarGroupContainer );
+	return <View style={ groupStyles }>{ children }</View>;
+};
+
+export default ToolbarGroupContainer;