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 1a55c807225d9d..f04eacee4b91c1 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 f393a31c7330ad..af2ffe762e6a36 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';
@@ -391,5 +392,53 @@ 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.
+ await openBlockSettings( screen );
+
+ // 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/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js
index 81ff43128b1a35..989c5ec3a0d332 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 } ) => (
color )
),
];
- const mergedColors = [
+ const mergedGradients = [
+ ...new Set(
+ ( defaultSettings.gradients ?? [] ).map(
+ ( { gradient } ) => gradient
+ )
+ ),
+ ];
+ const allAvailableColors = [
...new Set(
( defaultSettings.allColors ?? [] ).map( ( { color } ) => color )
),
];
- const defaultGradientColors = [
+ const allAvailableGradients = [
...new Set(
- ( defaultSettings.gradients ?? [] ).map(
+ ( defaultSettings.allGradients ?? [] ).map(
( { gradient } ) => gradient
)
),
];
- const colors = isGradientSegment ? defaultGradientColors : defaultColors;
+
+ const colors = isGradientSegment ? mergedGradients : mergedColors;
+ const allColors = isGradientSegment
+ ? allAvailableGradients
+ : allAvailableColors;
const customIndicatorColor = isGradientSegment
? activeColor
@@ -110,7 +121,7 @@ function ColorPalette( {
function isSelectedCustom() {
const isWithinColors =
- activeColor && mergedColors && mergedColors.includes( activeColor );
+ activeColor && allColors?.includes( activeColor );
if ( enableCustomColor && 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 bc7187fd092b8c..fcf03f9ecd4483 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
+ .flatMap( ( { gradients } ) => gradients )
+ .filter( Boolean );
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 (