From 91e9e27a09b4eaeb3875c9c517364d04ec544b3c Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Thu, 30 Nov 2023 13:23:10 +0100 Subject: [PATCH 1/4] Fix issue related to receiving undefined ref in text color format In rare cases, `TextColorEdit` might receive the `RichText` ref as undefined. This ref is used to get the background color of the text and use it in the toolbar button. --- packages/format-library/src/text-color/index.native.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/format-library/src/text-color/index.native.js b/packages/format-library/src/text-color/index.native.js index 7c44e4efc001a..c19f2a3700ea7 100644 --- a/packages/format-library/src/text-color/index.native.js +++ b/packages/format-library/src/text-color/index.native.js @@ -33,9 +33,7 @@ const name = 'core/text-color'; const title = __( 'Text color' ); function getComputedStyleProperty( element, property ) { - const { - props: { style = {} }, - } = element; + const style = element?.props?.style ?? {}; if ( property === 'background-color' ) { const { backgroundColor, baseColors } = style; From ac587141bffc7e0d95404ff95d3709cb4549e483 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Thu, 30 Nov 2023 14:44:59 +0100 Subject: [PATCH 2/4] Update `react-native-editor` 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 4e509a232b3e5..7b154c3a5b5cd 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/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 - [***] Fix issue when backspacing in an empty Paragraph block [#56496] +- [**] Fix issue related to text color format and recieving in rare cases an undefined ref from `RichText` component [#56686] ## 1.109.0 - [*] Audio block: Improve legibility of audio file details on various background colors [#55627] From a2b47844e1effb5e946597437d9e0dc00166ffbd Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Thu, 30 Nov 2023 17:40:20 +0100 Subject: [PATCH 3/4] Add test to cover undefined `contentRef` case --- .../src/text-color/test/index.native.js | 64 ++++++++++++++++++- 1 file changed, 62 insertions(+), 2 deletions(-) diff --git a/packages/format-library/src/text-color/test/index.native.js b/packages/format-library/src/text-color/test/index.native.js index c7350cfe4bb6c..9a148dec4358b 100644 --- a/packages/format-library/src/text-color/test/index.native.js +++ b/packages/format-library/src/text-color/test/index.native.js @@ -2,17 +2,29 @@ * External dependencies */ import { + fireEvent, getEditorHtml, initializeEditor, - fireEvent, + render, waitFor, } from 'test/helpers'; /** * WordPress dependencies */ -import { setDefaultBlockName, unregisterBlockType } from '@wordpress/blocks'; +import { + registerBlockType, + setDefaultBlockName, + unregisterBlockType, +} from '@wordpress/blocks'; import { coreBlocks } from '@wordpress/block-library'; +import { BlockControls, BlockEdit } from '@wordpress/block-editor'; +import { SlotFillProvider } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import { textColor } from '..'; const COLOR_PINK = '#f78da7'; const paragraph = coreBlocks[ 'core/paragraph' ]; @@ -164,4 +176,52 @@ describe( 'Text color', () => { expect( getEditorHtml() ).toMatchSnapshot(); } ); + + it( 'renders when "contentRef" is undefined', () => { + registerBlockType( 'core/test-block', { + save: () => {}, + category: 'text', + title: 'block title', + edit: ( { children } ) => <>{ children }, + } ); + const TextColorEdit = textColor.edit; + // Empty text with black color set as the text color + const textValue = { + formats: [], + replacements: [], + text: '', + start: 0, + end: 0, + activeFormats: [ + { + type: 'core/text-color', + attributes: { + style: 'background-color:rgba(0, 0, 0, 0);color:#111111', + class: 'has-contrast-color', + }, + }, + ], + }; + + const { getByLabelText } = render( + + + + + + + ); + + const textColorButton = getByLabelText( 'Text color' ); + expect( textColorButton ).toBeDefined(); + } ); } ); From c79cca271bd277634b1941eddbcc64ebd5642881 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Thu, 30 Nov 2023 17:59:35 +0100 Subject: [PATCH 4/4] Correct typo in `changelog` --- packages/react-native-editor/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index 7b154c3a5b5cd..a38a925955216 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -11,7 +11,7 @@ For each user feature we should also add a importance categorization label to i ## Unreleased - [***] Fix issue when backspacing in an empty Paragraph block [#56496] -- [**] Fix issue related to text color format and recieving in rare cases an undefined ref from `RichText` component [#56686] +- [**] Fix issue related to text color format and receiving in rare cases an undefined ref from `RichText` component [#56686] ## 1.109.0 - [*] Audio block: Improve legibility of audio file details on various background colors [#55627]