diff --git a/packages/block-editor/src/components/inserter/index.native.js b/packages/block-editor/src/components/inserter/index.native.js index a3e6981e6ecfc7..6edef19583b3fc 100644 --- a/packages/block-editor/src/components/inserter/index.native.js +++ b/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,33 +35,17 @@ 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: , - customContainerStyles: containerStyle, - fixedRatio: false, - }; - const expandedModeViewText = ( - - { __( 'Add blocks' ) } - - ); - return ( } + icon={ } onClick={ onToggle } extraProps={ { hint: __( 'Double tap to add a block' ), @@ -69,12 +53,12 @@ const defaultRenderToggle = ( { // 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 } - + customContainerStyles={ buttonStyle } + fixedRatio={ false } + /> ); }; @@ -249,23 +233,21 @@ export class Inserter extends Component { renderToggle = defaultRenderToggle, getStylesFromColorScheme, showSeparator, - useExpandedMode, } = this.props; if ( showSeparator && isOpen ) { return ; } - 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, } ) } ( this.picker = instance ) } diff --git a/packages/block-editor/src/components/inserter/style.native.scss b/packages/block-editor/src/components/inserter/style.native.scss index fd17217da75da1..cc4b8d95a22011 100644 --- a/packages/block-editor/src/components/inserter/style.native.scss +++ b/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 { diff --git a/packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap index 4d43cef74385e4..22c927a4a657e0 100644 --- a/packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap +++ b/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, diff --git a/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap index 7596b30df9883a..34750c8559bd08 100644 --- a/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap +++ b/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, diff --git a/packages/block-library/src/paragraph/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/paragraph/test/__snapshots__/edit.native.js.snap index c1bcb2e853c8cd..adc6ab4210efa5 100644 --- a/packages/block-library/src/paragraph/test/__snapshots__/edit.native.js.snap +++ b/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="" /> diff --git a/packages/block-library/src/preformatted/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/preformatted/test/__snapshots__/edit.native.js.snap index 7c0a7aa1dcf48c..db1c80c514206b 100644 --- a/packages/block-library/src/preformatted/test/__snapshots__/edit.native.js.snap +++ b/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="
Hello World!
" /> diff --git a/packages/block-library/src/search/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/search/test/__snapshots__/edit.native.js.snap index 47652cd448c328..c63e66508f324f 100644 --- a/packages/block-library/src/search/test/__snapshots__/edit.native.js.snap +++ b/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, diff --git a/packages/components/src/button/index.native.js b/packages/components/src/button/index.native.js index 02820e1731f71c..9643f442d28c6a 100644 --- a/packages/components/src/button/index.native.js +++ b/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 } > { const onUndoSubscription = subscribeOnUndoPressed( undo ); @@ -140,22 +142,6 @@ function HeaderToolbar( { ); - 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 } > - + + { noContentSelected && renderMediaButtons } [ ...( colorsPalettes?.default || [] ), ] ); +const getSelectionColor = memize( + ( + currentSelectionColor, + defaultSelectionColor, + baseGlobalStyles, + isBlockBasedTheme + ) => { + let selectionColor = defaultSelectionColor; + if ( currentSelectionColor ) { + selectionColor = currentSelectionColor; + } + + if ( isBlockBasedTheme ) { + const colordTextColor = colord( selectionColor ); + const colordBackgroundColor = colord( + baseGlobalStyles?.color?.background + ); + const isColordTextReadable = colordTextColor.isReadable( + colordBackgroundColor + ); + if ( ! isColordTextReadable ) { + selectionColor = baseGlobalStyles?.color?.text; + } + } + + return selectionColor; + } +); + const gutenbergFormatNamesToAztec = { 'core/bold': 'bold', 'core/italic': 'italic', @@ -1154,6 +1183,17 @@ export class RichText extends Component { }, ]; + const defaultSelectionColor = getStylesFromColorScheme( + styles[ 'rich-text-selection' ], + styles[ 'rich-text-selection--dark' ] + ).color; + const selectionColor = getSelectionColor( + this.props.selectionColor, + defaultSelectionColor, + baseGlobalStyles, + this.getIsBlockBasedTheme() + ); + const EditableView = ( props ) => { this.customEditableOnKeyDown = props?.onKeyDown; @@ -1238,7 +1278,7 @@ export class RichText extends Component { { ...( this.isIOS ? { maxWidth } : {} ) } minWidth={ minWidth } id={ this.props.id } - selectionColor={ this.props.selectionColor } + selectionColor={ selectionColor } disableAutocorrection={ this.props.disableAutocorrection } /> { isSelected && ( diff --git a/packages/rich-text/src/component/style.native.scss b/packages/rich-text/src/component/style.native.scss index 7a885c83063bba..3ba3be6a7150b6 100644 --- a/packages/rich-text/src/component/style.native.scss +++ b/packages/rich-text/src/component/style.native.scss @@ -12,9 +12,17 @@ } .richTextPlaceholder { - color: $gray; + color: $gray-20; } .richTextPlaceholderDark { color: $gray-50; } + +.rich-text-selection { + color: $black; +} + +.rich-text-selection--dark { + color: $white; +} diff --git a/test/native/__mocks__/styleMock.js b/test/native/__mocks__/styleMock.js index f52f60f233560b..a3707d71e3d3bc 100644 --- a/test/native/__mocks__/styleMock.js +++ b/test/native/__mocks__/styleMock.js @@ -187,4 +187,7 @@ module.exports = { placeholderColor: { color: 'gray', }, + 'rich-text-selection': { + color: 'black', + }, };