GradientPicker

See the WordPress Storybook for more detailed, interactive documentation.

GradientPicker is a React component that renders a color gradient picker to
define a multi step gradient. There’s either a linear or a radial type
available.

import { useState } from 'react';
import { GradientPicker } from '@wordpress/components';

const MyGradientPicker = () => {
  const [ gradient, setGradient ] = useState( null );

  return (
    <GradientPicker
      value={ gradient }
      onChange={ ( currentGradient ) => setGradient( currentGradient ) }
      gradients={ [
        {
          name: 'JShine',
          gradient:
            'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
          slug: 'jshine',
        },
        {
          name: 'Moonlit Asteroid',
          gradient:
            'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',
          slug: 'moonlit-asteroid',
        },
        {
          name: 'Rastafarie',
          gradient:
            'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',
          slug: 'rastafari',
        },
      ] }
    />
  );
};

Props

__experimentalIsRenderedInSidebar

• Type: boolean
• Required: No
• Default: false

Whether this is rendered in the sidebar.

asButtons

• Type: boolean
• Required: No
• Default: false

Whether the control should present as a set of buttons,
each with its own tab stop.

aria-label

• Type: string
• Required: No

A label to identify the purpose of the control.

aria-labelledby

• Type: string
• Required: No

An ID of an element to provide a label for the control.

className

• Type: string
• Required: No

The class name added to the wrapper.

clearable

• Type: boolean
• Required: No
• Default: true

Whether the palette should have a clearing button or not.

disableCustomGradients

• Type: boolean
• Required: No
• Default: false

If true, the gradient picker will not be displayed and only defined
gradients from gradients will be shown.

enableAlpha

• Type: boolean
• Required: No
• Default: true

Whether to enable alpha transparency options in the picker.

gradients

• Type: GradientsProp
• Required: No
• Default: []

An array of objects as predefined gradients displayed above the gradient
selector. Alternatively, if there are multiple sets (or ‘origins’) of
gradients, you can pass an array of objects each with a name and a
gradients array which will in turn contain the predefined gradient objects.

headingLevel

• Type: 1 | 2 | 3 | 4 | 5 | 6 | "1" | "2" | "3" | "4" | ...
• Required: No
• Default: 2

The heading level. Only applies in cases where gradients are provided
from multiple origins (i.e. when the array passed as the gradients prop
contains two or more items).

loop

• Type: boolean
• Required: No
• Default: true

Prevents keyboard interaction from wrapping around.
Only used when asButtons is not true.

onChange

• Type: (currentGradient: string) => void
• Required: Yes

The function called when a new gradient has been defined. It is passed to
the currentGradient as an argument.

value

• Type: string
• Required: No
• Default: 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)'

The current value of the gradient. Pass a css gradient string (See default value for example).
Optionally pass in a null value to specify no gradient is currently selected.