plugin development - How to add a gradient component to a custom block

admin管理员组

文章数量:1296463

I can't find any useful information in Gutenberg Handbook. Here is information about adding gradients, but it only works for some core blocks.

I use ColorPalette to create colors (or to use the color picker) but still don't know how to use gradients. I also found PanelColorSettings but still without success.

I am looking for instructions/documentation on how to add this component:

I can't find any useful information in Gutenberg Handbook. Here is information about adding gradients, but it only works for some core blocks.

I use ColorPalette to create colors (or to use the color picker) but still don't know how to use gradients. I also found PanelColorSettings but still without success.

I am looking for instructions/documentation on how to add this component:

• plugin-development
• block-editor

Share Improve this question asked Nov 3, 2020 at 17:51 kanlukaszkanlukasz 54488 silver badges2424 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 2

The documentation for that control does not exist at this time. Instructions have not been written yet. It is an experimental component.

---

You need to use an appropriate control in your blocks Edit component.

Note that these are very new components, their design will likely change, it should be considered experimental and unstable.

There is the GradientPicker component, https://github/WordPress/gutenberg/blob/master/packages/components/src/gradient-picker/index.js

And ColorGradientControl https://github/WordPress/gutenberg/blob/26e4d59e6fd3ed78d0213d60abca31c6dc1fa9cb/packages/block-editor/src/components/colors-gradients/control.js

        <ColorGradientControl
            { ...otherProps }
            onColorChange={ onChange }
            colorValue={ value }
            gradients={ [] }
            disableCustomGradients={ true }
        />

I found support for custom block, it really helps.

supports: {
    color: {
        // This also enables text and background UI controls.
        gradients: true; // Enable gradients UI control.
    }
}

https://developer.wordpress/block-editor/reference-guides/block-api/block-supports/

本文标签： plugin developmentHow to add a gradient component to a custom block