GradientPicker
Edit
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.
Usage
Render a GradientPicker.
import { GradientPicker } from '@wordpress/components';
import { useState } from '@wordpress/element';
const myGradientPicker = () => {
const [ gradient, setGradient ] = useState( null );
return (
<GradientPicker
__nextHasNoMargin
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
The component accepts the following props:
value
The current value of the gradient. Pass a css gradient like linear-gradient(90deg, rgb(6, 147, 227) 0%, rgb(155, 81, 224) 100%)
. Optionally pass in a null
value to specify no gradient is currently selected.
- Type:
string
- Required: No
- Default:
linear-gradient(90deg, rgb(6, 147, 227) 0%, rgb(155, 81, 224) 100%)
onChange
The function called when a new gradient has been defined. It is passed the currentGradient
as an argument.
- Type:
Function
- Required: Yes
gradients
An array of objects of predefined gradients which show up as CircularOptionPicker
above the gradient selector.
- Type:
array
- Required: No
clearable
Whether the palette should have a clearing button or not.
- Type:
Boolean
- Required: No
- Default: true
clearGradient
Called when a new gradient has been defined. It is passed the currentGradient
as an argument.
- Type:
Function
- Required: No
disableCustomGradients
If true, the gradient picker will not be displayed and only defined gradients from gradients
are available.
- Type:
Boolean
- Required: No
- Default: false
__nextHasNoMargin
Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4. (The prop can be safely removed once this happens.)
- Type:
Boolean
- Required: No
- Default:
false
headingLevel
The heading level.
- Type:
1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6'
- Required: No
- Default:
2