From 586c241bad5132d90a9a3de6e53ef0922a2b0660 Mon Sep 17 00:00:00 2001 From: Derek Blank Date: Mon, 26 Jun 2023 16:17:36 +1000 Subject: [PATCH 01/13] Update Add Blocks inserter button styles --- .../src/components/inserter/index.native.js | 46 ++++++++++--------- .../src/components/inserter/style.native.scss | 29 ++++++------ 2 files changed, 39 insertions(+), 36 deletions(-) diff --git a/packages/block-editor/src/components/inserter/index.native.js b/packages/block-editor/src/components/inserter/index.native.js index a3e6981e6ecfc..f8fea34fda10d 100644 --- a/packages/block-editor/src/components/inserter/index.native.js +++ b/packages/block-editor/src/components/inserter/index.native.js @@ -35,20 +35,15 @@ 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, - }; + // are currently selected. The "add block" button has an style object + // for the expanded mode to correct the margins and padding: + // .inserter-menu__add-block-button--expanded const expandedModeViewText = ( { __( 'Add blocks' ) } @@ -61,7 +56,7 @@ const defaultRenderToggle = ( { 'Add block', 'Generic label for block inserter button' ) } - icon={ } + icon={ } onClick={ onToggle } extraProps={ { hint: __( 'Double tap to add a block' ), @@ -71,7 +66,8 @@ const defaultRenderToggle = ( { onLongPress, } } isDisabled={ disabled } - { ...expandedModeViewProps } + customContainerStyles={ buttonStyle } + fixedRatio={ false } > { useExpandedMode && expandedModeViewText } @@ -254,18 +250,24 @@ export class Inserter extends Component { 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 buttonColorScheme = getStylesFromColorScheme( styles[ 'inserter-menu__add-block-button' ], styles[ 'inserter-menu__add-block-button--dark' ] ); + const buttonStyle = { + ...buttonColorScheme, + ...( useExpandedMode + ? styles[ 'inserter-menu__add-block-button--expanded' ] + : {} ), + }; + + const iconStyle = getStylesFromColorScheme( + styles[ 'inserter-menu__add-block-button-icon' ], + styles[ 'inserter-menu__add-block-button-icon--dark' ] + ); + const onPress = () => { this.setState( { @@ -301,8 +303,8 @@ export class Inserter extends Component { onToggle: onPress, isOpen, disabled, - style, - containerStyle, + iconStyle, + buttonStyle, onLongPress, useExpandedMode, } ) } diff --git a/packages/block-editor/src/components/inserter/style.native.scss b/packages/block-editor/src/components/inserter/style.native.scss index fd17217da75da..20ffbc26a7b81 100644 --- a/packages/block-editor/src/components/inserter/style.native.scss +++ b/packages/block-editor/src/components/inserter/style.native.scss @@ -1,26 +1,27 @@ /** @format */ - -.inserter-menu__add-block-button-icon { - color: $blue-50; +.inserter-menu__add-block-button { + border-radius: 2px; + background-color: $black; + margin: 8px; + padding: 2px; } -.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 { - color: $white; +.inserter-menu__add-block-button--expanded { + border-radius: 2px; + margin: 10px; + padding: 2px 8px 2px 2px; } -.inserter-menu__add-block-button { - border-radius: 22px; - background-color: $blue-50; - margin: 8px; - padding: 6px 16px 6px 12px; +.inserter-menu__add-block-button-icon { + color: $white; } -.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 { From bff8162096d7b77ddf8f6028ad34f21b33f07978 Mon Sep 17 00:00:00 2001 From: Derek Blank Date: Mon, 26 Jun 2023 16:35:43 +1000 Subject: [PATCH 02/13] Update native Rich Text placeholder color --- packages/rich-text/src/component/style.native.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/rich-text/src/component/style.native.scss b/packages/rich-text/src/component/style.native.scss index 7a885c83063bb..d0b94c6f8e950 100644 --- a/packages/rich-text/src/component/style.native.scss +++ b/packages/rich-text/src/component/style.native.scss @@ -12,7 +12,7 @@ } .richTextPlaceholder { - color: $gray; + color: $gray-20; } .richTextPlaceholderDark { From 76f065ed918aba72c1abba6a87110ba5d72f010f Mon Sep 17 00:00:00 2001 From: Derek Blank Date: Mon, 26 Jun 2023 16:36:01 +1000 Subject: [PATCH 03/13] Update native inserter button margin and padding --- .../block-editor/src/components/inserter/style.native.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/inserter/style.native.scss b/packages/block-editor/src/components/inserter/style.native.scss index 20ffbc26a7b81..735519831855e 100644 --- a/packages/block-editor/src/components/inserter/style.native.scss +++ b/packages/block-editor/src/components/inserter/style.native.scss @@ -2,8 +2,8 @@ .inserter-menu__add-block-button { border-radius: 2px; background-color: $black; - margin: 8px; - padding: 2px; + margin: 8px 8px 8px 10px; + padding: 2px 1px; } .inserter-menu__add-block-button--dark { From f7516100bd3c75e51e02605c9124e5370bd69ec5 Mon Sep 17 00:00:00 2001 From: Derek Blank Date: Tue, 4 Jul 2023 15:42:04 +1000 Subject: [PATCH 04/13] Add defaultSelectionColor value to native RichText component --- .../src/components/rich-text/index.native.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/rich-text/index.native.js b/packages/block-editor/src/components/rich-text/index.native.js index b0c82848db687..c47b440b6d0f6 100644 --- a/packages/block-editor/src/components/rich-text/index.native.js +++ b/packages/block-editor/src/components/rich-text/index.native.js @@ -15,7 +15,11 @@ import { findTransform, isUnmodifiedDefaultBlock, } from '@wordpress/blocks'; -import { useInstanceId, useMergeRefs } from '@wordpress/compose'; +import { + useInstanceId, + useMergeRefs, + usePreferredColorSchemeStyle, +} from '@wordpress/compose'; import { __experimentalRichText as RichText, __unstableCreateElement, @@ -203,6 +207,11 @@ function RichTextWrapper( ); } + const defaultSelectionColor = usePreferredColorSchemeStyle( + 'black', + 'white' + ); + const onSelectionChange = useCallback( ( selectionChangeStart, selectionChangeEnd ) => { selectionChange( @@ -619,7 +628,9 @@ function RichTextWrapper( deleteEnter={ deleteEnter } placeholderTextColor={ placeholderTextColor } textAlign={ textAlign } - selectionColor={ selectionColor } + selectionColor={ + selectionColor ? selectionColor : defaultSelectionColor + } tagsToEliminate={ tagsToEliminate } disableEditingMenu={ disableEditingMenu } fontSize={ fontSize } From cb2b36165ea3119335d39f4fa67bc3fae97d6890 Mon Sep 17 00:00:00 2001 From: Derek Blank Date: Wed, 5 Jul 2023 14:33:47 +1000 Subject: [PATCH 05/13] Remove expanded mode from block inserter button --- .../src/components/inserter/index.native.js | 28 ++----------------- .../header/header-toolbar/index.native.js | 22 +++++---------- 2 files changed, 10 insertions(+), 40 deletions(-) diff --git a/packages/block-editor/src/components/inserter/index.native.js b/packages/block-editor/src/components/inserter/index.native.js index f8fea34fda10d..7026e87c92472 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 @@ -38,18 +38,7 @@ const defaultRenderToggle = ( { iconStyle, buttonStyle, onLongPress, - useExpandedMode, } ) => { - // The "expanded mode" refers to the editor's appearance when no blocks - // are currently selected. The "add block" button has an style object - // for the expanded mode to correct the margins and padding: - // .inserter-menu__add-block-button--expanded - const expandedModeViewText = ( - - { __( 'Add blocks' ) } - - ); - return ( - { useExpandedMode && expandedModeViewText } - + /> ); }; @@ -245,24 +232,16 @@ export class Inserter extends Component { renderToggle = defaultRenderToggle, getStylesFromColorScheme, showSeparator, - useExpandedMode, } = this.props; if ( showSeparator && isOpen ) { return ; } - const buttonColorScheme = getStylesFromColorScheme( + const buttonStyle = getStylesFromColorScheme( styles[ 'inserter-menu__add-block-button' ], styles[ 'inserter-menu__add-block-button--dark' ] ); - const buttonStyle = { - ...buttonColorScheme, - ...( useExpandedMode - ? styles[ 'inserter-menu__add-block-button--expanded' ] - : {} ), - }; - const iconStyle = getStylesFromColorScheme( styles[ 'inserter-menu__add-block-button-icon' ], styles[ 'inserter-menu__add-block-button-icon--dark' ] @@ -306,7 +285,6 @@ export class Inserter extends Component { iconStyle, buttonStyle, onLongPress, - useExpandedMode, } ) } ( this.picker = instance ) } diff --git a/packages/edit-post/src/components/header/header-toolbar/index.native.js b/packages/edit-post/src/components/header/header-toolbar/index.native.js index b9b91c8d4f558..007e06c7f11ed 100644 --- a/packages/edit-post/src/components/header/header-toolbar/index.native.js +++ b/packages/edit-post/src/components/header/header-toolbar/index.native.js @@ -43,8 +43,14 @@ function HeaderToolbar( { noContentSelected, } ) { const wasNoContentSelected = useRef( noContentSelected ); + // eslint-disable-next-line no-unused-vars const [ isInserterOpen, setIsInserterOpen ] = useState( false ); + const containerStyle = getStylesFromColorScheme( + styles[ 'header-toolbar__container' ], + styles[ 'header-toolbar__container--dark' ] + ); + const scrollViewRef = useRef( null ); const scrollToStart = () => { // scrollview doesn't seem to automatically adjust to RTL on Android so, scroll to end when Android @@ -93,12 +99,6 @@ function HeaderToolbar( { [ 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' ); @@ -106,14 +106,7 @@ function HeaderToolbar( { { renderHistoryButtons() } From 94701c8caf078dd564bfde536c70417fa61f3200 Mon Sep 17 00:00:00 2001 From: Derek Blank Date: Wed, 5 Jul 2023 14:48:27 +1000 Subject: [PATCH 06/13] Update CHANGELOG --- packages/react-native-editor/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index 3d72851e7f0c9..aa34a82f2592d 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -10,6 +10,7 @@ For each user feature we should also add a importance categorization label to i --> ## Unreleased +- [**] Update Editor block inserter button styles and default text input placeholder/selection styles ## 1.98.0 - [*] Image block - Fix issue where in some cases the image doesn't display the right aspect ratio [#51463] From 85c9f6e38450cad5b46053f40a9b56ae06599236 Mon Sep 17 00:00:00 2001 From: Derek Blank Date: Thu, 6 Jul 2023 11:04:08 +1000 Subject: [PATCH 07/13] Add hitSlop to inserter button --- packages/block-editor/src/components/inserter/index.native.js | 1 + packages/components/src/button/index.native.js | 2 ++ 2 files changed, 3 insertions(+) diff --git a/packages/block-editor/src/components/inserter/index.native.js b/packages/block-editor/src/components/inserter/index.native.js index 7026e87c92472..6edef19583b3f 100644 --- a/packages/block-editor/src/components/inserter/index.native.js +++ b/packages/block-editor/src/components/inserter/index.native.js @@ -53,6 +53,7 @@ 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 } customContainerStyles={ buttonStyle } diff --git a/packages/components/src/button/index.native.js b/packages/components/src/button/index.native.js index 02820e1731f71..9643f442d28c6 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 } > Date: Mon, 10 Jul 2023 17:06:07 +0200 Subject: [PATCH 08/13] RichText - Move selectionColor logic to the RichText's component instead, also take into account block themes --- .../src/components/rich-text/index.native.js | 15 ++------ .../rich-text/src/component/index.native.js | 35 ++++++++++++++++++- .../rich-text/src/component/style.native.scss | 8 +++++ 3 files changed, 44 insertions(+), 14 deletions(-) diff --git a/packages/block-editor/src/components/rich-text/index.native.js b/packages/block-editor/src/components/rich-text/index.native.js index c47b440b6d0f6..b0c82848db687 100644 --- a/packages/block-editor/src/components/rich-text/index.native.js +++ b/packages/block-editor/src/components/rich-text/index.native.js @@ -15,11 +15,7 @@ import { findTransform, isUnmodifiedDefaultBlock, } from '@wordpress/blocks'; -import { - useInstanceId, - useMergeRefs, - usePreferredColorSchemeStyle, -} from '@wordpress/compose'; +import { useInstanceId, useMergeRefs } from '@wordpress/compose'; import { __experimentalRichText as RichText, __unstableCreateElement, @@ -207,11 +203,6 @@ function RichTextWrapper( ); } - const defaultSelectionColor = usePreferredColorSchemeStyle( - 'black', - 'white' - ); - const onSelectionChange = useCallback( ( selectionChangeStart, selectionChangeEnd ) => { selectionChange( @@ -628,9 +619,7 @@ function RichTextWrapper( deleteEnter={ deleteEnter } placeholderTextColor={ placeholderTextColor } textAlign={ textAlign } - selectionColor={ - selectionColor ? selectionColor : defaultSelectionColor - } + selectionColor={ selectionColor } tagsToEliminate={ tagsToEliminate } disableEditingMenu={ disableEditingMenu } fontSize={ fontSize } diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js index 2d48d1263cb61..47a50c9b200f3 100644 --- a/packages/rich-text/src/component/index.native.js +++ b/packages/rich-text/src/component/index.native.js @@ -1049,6 +1049,37 @@ export class RichText extends Component { : defaultColor; } + getSelectionColor() { + const { + baseGlobalStyles, + getStylesFromColorScheme, + selectionColor: currentSelectionColor, + } = this.props; + let selectionColor = getStylesFromColorScheme( + styles[ 'rich-text-selection' ], + styles[ 'rich-text-selection--dark' ] + ).color; + + if ( currentSelectionColor ) { + selectionColor = currentSelectionColor; + } + + if ( this.getIsBlockBasedTheme() ) { + const colordTextColor = colord( selectionColor ); + const colordBackgroundColor = colord( + baseGlobalStyles?.color?.background + ); + const isColordTextReadable = colordTextColor.isReadable( + colordBackgroundColor + ); + if ( ! isColordTextReadable ) { + selectionColor = baseGlobalStyles?.color?.text; + } + } + + return selectionColor; + } + render() { const { tagName, @@ -1154,6 +1185,8 @@ export class RichText extends Component { }, ]; + const selectionColor = this.getSelectionColor(); + const EditableView = ( props ) => { this.customEditableOnKeyDown = props?.onKeyDown; @@ -1238,7 +1271,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 d0b94c6f8e950..3ba3be6a7150b 100644 --- a/packages/rich-text/src/component/style.native.scss +++ b/packages/rich-text/src/component/style.native.scss @@ -18,3 +18,11 @@ .richTextPlaceholderDark { color: $gray-50; } + +.rich-text-selection { + color: $black; +} + +.rich-text-selection--dark { + color: $white; +} From ba326e025ba20b9bfebc636b6679cc0466c8e17a Mon Sep 17 00:00:00 2001 From: Gerardo Date: Mon, 10 Jul 2023 17:06:45 +0200 Subject: [PATCH 09/13] Update snapshots after adding a selectionColor prop to RichText --- .../src/audio/test/__snapshots__/edit.native.js.snap | 2 ++ .../src/file/test/__snapshots__/edit.native.js.snap | 2 ++ .../src/paragraph/test/__snapshots__/edit.native.js.snap | 1 + .../preformatted/test/__snapshots__/edit.native.js.snap | 2 ++ .../src/search/test/__snapshots__/edit.native.js.snap | 7 +++++++ 5 files changed, 14 insertions(+) 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 4d43cef74385e..22c927a4a657e 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 7596b30df9883..34750c8559bd0 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 c1bcb2e853c8c..adc6ab4210efa 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 7c0a7aa1dcf48..db1c80c514206 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 47652cd448c32..c63e66508f324 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, From c641dc1c7aed7f983be65d4207587984b59cf375 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Mon, 10 Jul 2023 17:06:57 +0200 Subject: [PATCH 10/13] Add rich-text-selection to styleMock --- test/native/__mocks__/styleMock.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/test/native/__mocks__/styleMock.js b/test/native/__mocks__/styleMock.js index f52f60f233560..a3707d71e3d3b 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', + }, }; From 6ed81c72404e6abe77a00cf89870a318398a58fe Mon Sep 17 00:00:00 2001 From: Gerardo Date: Mon, 10 Jul 2023 17:07:31 +0200 Subject: [PATCH 11/13] Inserter - Update Add block button styles --- .../src/components/inserter/style.native.scss | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/inserter/style.native.scss b/packages/block-editor/src/components/inserter/style.native.scss index 735519831855e..cc4b8d95a2201 100644 --- a/packages/block-editor/src/components/inserter/style.native.scss +++ b/packages/block-editor/src/components/inserter/style.native.scss @@ -2,20 +2,14 @@ .inserter-menu__add-block-button { border-radius: 2px; background-color: $black; - margin: 8px 8px 8px 10px; - padding: 2px 1px; + margin: 9px $grid-unit-20 10px $grid-unit-20; + padding: 0; } .inserter-menu__add-block-button--dark { background-color: $white; } -.inserter-menu__add-block-button--expanded { - border-radius: 2px; - margin: 10px; - padding: 2px 8px 2px 2px; -} - .inserter-menu__add-block-button-icon { color: $white; } From 3b4c5c2f2406a6879bce9a43f030de4f1eade8e0 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Mon, 10 Jul 2023 17:15:52 +0200 Subject: [PATCH 12/13] HeaderToolbar - Remove unused onToggleInserter code --- .../header/header-toolbar/index.native.js | 21 ++----------------- 1 file changed, 2 insertions(+), 19 deletions(-) diff --git a/packages/edit-post/src/components/header/header-toolbar/index.native.js b/packages/edit-post/src/components/header/header-toolbar/index.native.js index a45f127e1b506..b04a8612a15f7 100644 --- a/packages/edit-post/src/components/header/header-toolbar/index.native.js +++ b/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 } from '@wordpress/element'; +import { useCallback, useRef } from '@wordpress/element'; import { compose, withPreferredColorScheme } from '@wordpress/compose'; import { withSelect, withDispatch } from '@wordpress/data'; import { withViewportMatch } from '@wordpress/viewport'; @@ -50,10 +50,6 @@ function HeaderToolbar( { noContentSelected, } ) { const anchorNodeRef = useRef(); - const wasNoContentSelected = useRef( noContentSelected ); - // eslint-disable-next-line no-unused-vars - const [ isInserterOpen, setIsInserterOpen ] = useState( false ); - const containerStyle = getStylesFromColorScheme( styles[ 'header-toolbar__container' ], styles[ 'header-toolbar__container--dark' ] @@ -152,16 +148,6 @@ function HeaderToolbar( { ); - const onToggleInserter = useCallback( - ( isOpen ) => { - if ( isOpen ) { - wasNoContentSelected.current = noContentSelected; - } - setIsInserterOpen( isOpen ); - }, - [ noContentSelected ] - ); - /* translators: accessibility text for the editor toolbar */ const toolbarAriaLabel = __( 'Document tools' ); @@ -183,10 +169,7 @@ function HeaderToolbar( { styles[ 'header-toolbar__scrollable-content' ] } > - + { noContentSelected && renderMediaButtons } { renderHistoryButtons() } From df3a2f7d85ade664aff00449d66b0e399a2e2a60 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Wed, 12 Jul 2023 13:07:53 +0200 Subject: [PATCH 13/13] Memize getSelectionColor --- .../rich-text/src/component/index.native.js | 71 ++++++++++--------- 1 file changed, 39 insertions(+), 32 deletions(-) diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js index 47a50c9b200f3..14fd806d95b3a 100644 --- a/packages/rich-text/src/component/index.native.js +++ b/packages/rich-text/src/component/index.native.js @@ -63,6 +63,35 @@ const flatColorPalettes = memize( ( colorsPalettes ) => [ ...( 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', @@ -1049,37 +1078,6 @@ export class RichText extends Component { : defaultColor; } - getSelectionColor() { - const { - baseGlobalStyles, - getStylesFromColorScheme, - selectionColor: currentSelectionColor, - } = this.props; - let selectionColor = getStylesFromColorScheme( - styles[ 'rich-text-selection' ], - styles[ 'rich-text-selection--dark' ] - ).color; - - if ( currentSelectionColor ) { - selectionColor = currentSelectionColor; - } - - if ( this.getIsBlockBasedTheme() ) { - const colordTextColor = colord( selectionColor ); - const colordBackgroundColor = colord( - baseGlobalStyles?.color?.background - ); - const isColordTextReadable = colordTextColor.isReadable( - colordBackgroundColor - ); - if ( ! isColordTextReadable ) { - selectionColor = baseGlobalStyles?.color?.text; - } - } - - return selectionColor; - } - render() { const { tagName, @@ -1185,7 +1183,16 @@ export class RichText extends Component { }, ]; - const selectionColor = this.getSelectionColor(); + 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;