From 7da50c541f40b94887d0528a21cf7dedb47a471e Mon Sep 17 00:00:00 2001 From: Gerardo Date: Fri, 5 Jan 2024 17:17:17 +0100 Subject: [PATCH 1/8] Mobile - Fix missing Custom indicator for custom gradients --- .../test/__snapshots__/edit.native.js.snap | 6 +++ .../src/buttons/test/edit.native.js | 54 +++++++++++++++++++ .../src/color-palette/index.native.js | 27 +++++++--- .../color-settings/palette.screen.native.js | 12 +++-- 4 files changed, 86 insertions(+), 13 deletions(-) diff --git a/packages/block-library/src/buttons/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/buttons/test/__snapshots__/edit.native.js.snap index 1a55c807225d9..f04eacee4b91c 100644 --- a/packages/block-library/src/buttons/test/__snapshots__/edit.native.js.snap +++ b/packages/block-library/src/buttons/test/__snapshots__/edit.native.js.snap @@ -6,6 +6,12 @@ exports[`Buttons block color customization sets a background color 1`] = ` " `; +exports[`Buttons block color customization sets a custom gradient background color 1`] = ` +" +
+" +`; + exports[`Buttons block color customization sets a gradient background color 1`] = ` "
diff --git a/packages/block-library/src/buttons/test/edit.native.js b/packages/block-library/src/buttons/test/edit.native.js index f393a31c7330a..8b5f49bdb5e9b 100644 --- a/packages/block-library/src/buttons/test/edit.native.js +++ b/packages/block-library/src/buttons/test/edit.native.js @@ -391,5 +391,59 @@ describe( 'Buttons block', () => { // Assert expect( getEditorHtml() ).toMatchSnapshot(); } ); + + it( 'sets a custom gradient background color', async () => { + // Arrange + const screen = await initializeEditor(); + await addBlock( screen, 'Buttons' ); + + // Act + const buttonsBlock = getBlock( screen, 'Buttons' ); + fireEvent.press( buttonsBlock ); + + // Trigger onLayout for the list + await triggerBlockListLayout( buttonsBlock ); + + const buttonBlock = await getBlock( screen, 'Button' ); + fireEvent.press( buttonBlock ); + + // Open Block Settings. + fireEvent.press( screen.getByLabelText( 'Open Settings' ) ); + + // Wait for Block Settings to be visible. + const blockSettingsModal = screen.getByTestId( + 'block-settings-modal' + ); + await waitFor( () => blockSettingsModal.props.isVisible ); + + // Open Text color settings + fireEvent.press( screen.getByLabelText( 'Background, Default' ) ); + + // Tap on the gradient segment + fireEvent.press( screen.getByLabelText( 'Gradient' ) ); + + // Tap one gradient color + fireEvent.press( + screen.getByLabelText( 'Light green cyan to vivid green cyan' ) + ); + + // Tap on Customize Gradient + fireEvent.press( screen.getByLabelText( /Customize Gradient/ ) ); + + // Change the current angle + fireEvent.press( screen.getByText( '135', { hidden: true } ) ); + const angleTextInput = screen.getByDisplayValue( '135', { + hidden: true, + } ); + fireEvent.changeText( angleTextInput, '200' ); + + // Go back to the settings list. + fireEvent.press( await screen.findByLabelText( 'Go back' ) ); + + // Assert + const customButton = await screen.findByText( 'CUSTOM' ); + expect( customButton ).toBeVisible(); + expect( getEditorHtml() ).toMatchSnapshot(); + } ); } ); } ); diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js index 51a61785df9af..5149f2fe3d654 100644 --- a/packages/components/src/color-palette/index.native.js +++ b/packages/components/src/color-palette/index.native.js @@ -33,7 +33,7 @@ let scrollPosition = 0; let customIndicatorWidth = 0; function ColorPalette( { - enableCustomColor = true, + enableCustomColor = false, setColor, activeColor, isGradientColor, @@ -62,24 +62,35 @@ function ColorPalette( { const scale = useRef( new Animated.Value( 1 ) ).current; const opacity = useRef( new Animated.Value( 1 ) ).current; - const defaultColors = [ + const mergedColors = [ ...new Set( ( defaultSettings.colors ?? [] ).map( ( { color } ) => color ) ), ]; - const mergedColors = [ + const mergedGradients = [ + ...new Set( + ( defaultSettings.gradients ?? [] ).map( + ( { gradient } ) => gradient + ) + ), + ]; + const allAvailableColors = [ ...new Set( ( defaultSettings.allColors ?? [] ).map( ( { color } ) => color ) ), ]; - const defaultGradientColors = [ + const allAvailableGradiens = [ ...new Set( - ( defaultSettings.gradients ?? [] ).map( + ( defaultSettings.allGradients ?? [] ).map( ( { gradient } ) => gradient ) ), ]; - const colors = isGradientSegment ? defaultGradientColors : defaultColors; + + const colors = isGradientSegment ? mergedGradients : mergedColors; + const allColors = isGradientSegment + ? allAvailableGradiens + : allAvailableColors; const customIndicatorColor = isGradientSegment ? activeColor @@ -110,8 +121,8 @@ function ColorPalette( { function isSelectedCustom() { const isWithinColors = - activeColor && mergedColors && mergedColors.includes( activeColor ); - if ( enableCustomColor && activeColor ) { + activeColor && allColors && allColors.includes( activeColor ); + if ( activeColor ) { if ( isGradientSegment ) { return isGradientColor && ! isWithinColors; } diff --git a/packages/components/src/mobile/color-settings/palette.screen.native.js b/packages/components/src/mobile/color-settings/palette.screen.native.js index bc7187fd092b8..ef1d80ef022dc 100644 --- a/packages/components/src/mobile/color-settings/palette.screen.native.js +++ b/packages/components/src/mobile/color-settings/palette.screen.native.js @@ -29,7 +29,6 @@ import { colorsUtils } from './utils'; import styles from './style.scss'; const HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 }; -const THEME_PALETTE_NAME = 'Theme'; const PaletteScreen = () => { const route = useRoute(); @@ -48,7 +47,6 @@ const PaletteScreen = () => { const [ currentValue, setCurrentValue ] = useState( colorValue ); const isGradientColor = isGradient( currentValue ); const selectedSegmentIndex = isGradientColor ? 1 : 0; - const allAvailableColors = useMobileGlobalStylesColors(); const [ currentSegment, setCurrentSegment ] = useState( segments[ selectedSegmentIndex ] @@ -57,6 +55,10 @@ const PaletteScreen = () => { const currentSegmentColors = ! isGradientSegment ? defaultSettings.colors : defaultSettings.gradients; + const allAvailableColors = useMobileGlobalStylesColors(); + const allAvailableGradients = currentSegmentColors + .map( ( item ) => item.gradients || [] ) + .reduce( ( acc, val ) => acc.concat( val ), [] ); const horizontalSeparatorStyle = usePreferredColorSchemeStyle( styles.horizontalSeparator, @@ -184,10 +186,10 @@ const PaletteScreen = () => { colors: palette.colors, gradients: palette.gradients, allColors: allAvailableColors, + allGradients: allAvailableGradients, }; - const enableCustomColor = - ! isGradientSegment && - palette.name === THEME_PALETTE_NAME; + // Limit to show the custom indicator to the first available palette + const enableCustomColor = paletteKey === 0; return ( Date: Fri, 5 Jan 2024 17:22:44 +0100 Subject: [PATCH 2/8] Pass enableCustomColor in Cover block as true --- packages/block-library/src/cover/edit.native.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js index 81ff43128b1a3..989c5ec3a0d33 100644 --- a/packages/block-library/src/cover/edit.native.js +++ b/packages/block-library/src/cover/edit.native.js @@ -538,6 +538,7 @@ const Cover = ( { { ( { shouldEnableBottomSheetScroll } ) => ( Date: Mon, 8 Jan 2024 11:09:27 +0100 Subject: [PATCH 3/8] Fix typo --- packages/components/src/color-palette/index.native.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js index 5149f2fe3d654..2cd69b6479c2e 100644 --- a/packages/components/src/color-palette/index.native.js +++ b/packages/components/src/color-palette/index.native.js @@ -79,7 +79,7 @@ function ColorPalette( { ( defaultSettings.allColors ?? [] ).map( ( { color } ) => color ) ), ]; - const allAvailableGradiens = [ + const allAvailableGradients = [ ...new Set( ( defaultSettings.allGradients ?? [] ).map( ( { gradient } ) => gradient @@ -89,7 +89,7 @@ function ColorPalette( { const colors = isGradientSegment ? mergedGradients : mergedColors; const allColors = isGradientSegment - ? allAvailableGradiens + ? allAvailableGradients : allAvailableColors; const customIndicatorColor = isGradientSegment From e1e7391c9a1827de6e1969948eb91c5dc5b42834 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Mon, 8 Jan 2024 11:10:50 +0100 Subject: [PATCH 4/8] 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 ed3f7b5e961eb..da019add40401 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 +- [*] Fix missing custom color indicator for custom gradients [#57605] ## 1.110.0 - [*] [internal] Move InserterButton from components package to block-editor package [#56494] From 4a5d1726c70dbe4e38eea4e272537350f08c5d2a Mon Sep 17 00:00:00 2001 From: Gerardo Date: Mon, 8 Jan 2024 11:37:21 +0100 Subject: [PATCH 5/8] Fix condition --- packages/components/src/color-palette/index.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js index 2cd69b6479c2e..1ca919c6ff00f 100644 --- a/packages/components/src/color-palette/index.native.js +++ b/packages/components/src/color-palette/index.native.js @@ -122,7 +122,7 @@ function ColorPalette( { function isSelectedCustom() { const isWithinColors = activeColor && allColors && allColors.includes( activeColor ); - if ( activeColor ) { + if ( enableCustomColor && activeColor ) { if ( isGradientSegment ) { return isGradientColor && ! isWithinColors; } From 3fdabed0594fd75fcb5ac15135ab00227bbcd82e Mon Sep 17 00:00:00 2001 From: Gerardo Date: Wed, 10 Jan 2024 15:00:48 +0100 Subject: [PATCH 6/8] Update test to use the openBlockSettings helper --- packages/block-library/src/buttons/test/edit.native.js | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/buttons/test/edit.native.js b/packages/block-library/src/buttons/test/edit.native.js index 8b5f49bdb5e9b..af2ffe762e6a3 100644 --- a/packages/block-library/src/buttons/test/edit.native.js +++ b/packages/block-library/src/buttons/test/edit.native.js @@ -10,6 +10,7 @@ import { initializeEditor, triggerBlockListLayout, typeInRichText, + openBlockSettings, waitFor, } from 'test/helpers'; @@ -408,13 +409,7 @@ describe( 'Buttons block', () => { fireEvent.press( buttonBlock ); // Open Block Settings. - fireEvent.press( screen.getByLabelText( 'Open Settings' ) ); - - // Wait for Block Settings to be visible. - const blockSettingsModal = screen.getByTestId( - 'block-settings-modal' - ); - await waitFor( () => blockSettingsModal.props.isVisible ); + await openBlockSettings( screen ); // Open Text color settings fireEvent.press( screen.getByLabelText( 'Background, Default' ) ); From dd7b91a4df40180b6bb9d420bb94081679bef46e Mon Sep 17 00:00:00 2001 From: Gerardo Date: Wed, 10 Jan 2024 15:10:55 +0100 Subject: [PATCH 7/8] Simplify condition by adding optional chaining --- packages/components/src/color-palette/index.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js index 1ca919c6ff00f..a3d4175b31ac9 100644 --- a/packages/components/src/color-palette/index.native.js +++ b/packages/components/src/color-palette/index.native.js @@ -121,7 +121,7 @@ function ColorPalette( { function isSelectedCustom() { const isWithinColors = - activeColor && allColors && allColors.includes( activeColor ); + activeColor && allColors?.includes( activeColor ); if ( enableCustomColor && activeColor ) { if ( isGradientSegment ) { return isGradientColor && ! isWithinColors; From 32466822ae1da7b17fad76139832ea8f8dfb3354 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Wed, 10 Jan 2024 15:11:16 +0100 Subject: [PATCH 8/8] Use flatMap --- .../src/mobile/color-settings/palette.screen.native.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/mobile/color-settings/palette.screen.native.js b/packages/components/src/mobile/color-settings/palette.screen.native.js index ef1d80ef022dc..fcf03f9ecd448 100644 --- a/packages/components/src/mobile/color-settings/palette.screen.native.js +++ b/packages/components/src/mobile/color-settings/palette.screen.native.js @@ -57,8 +57,8 @@ const PaletteScreen = () => { : defaultSettings.gradients; const allAvailableColors = useMobileGlobalStylesColors(); const allAvailableGradients = currentSegmentColors - .map( ( item ) => item.gradients || [] ) - .reduce( ( acc, val ) => acc.concat( val ), [] ); + .flatMap( ( { gradients } ) => gradients ) + .filter( Boolean ); const horizontalSeparatorStyle = usePreferredColorSchemeStyle( styles.horizontalSeparator,