Comment utiliser PanelColorSettings dans un bloc Gutenberg personnalisé?

Question

Je travaille sur un bloc personnalisé de Gutenberg. J'ai utilisé <PanelBody><BaseControl> et <ColorPalette> pour créer des sélecteurs de couleurs personnalisés. Toutefois, il semble plus efficace d'utiliser le composant intégré <PanelColorSettings>.

Quelqu'un at-il utilisé le composant <PanelColorSettings> dans un bloc personnalisé? La seule discussion sur cette technique que j'ai pu trouver se trouvait ici: https://stackoverflow.com/questions/50480454/add-the-inbuilt-colour-palette-for-gutenberg-custom-block

Answer 1

Vous devez d'abord importer le composant -

const {
    PanelColorSettings,
} = wp.editor;

puis à l'intérieur de InspectorControls vous appelez le composant

<PanelColorSettings
                    title={ __( 'Color Settings' ) }
                    colorSettings={ [
                        {
                            value: color,
                            onChange: ( colorValue ) => setAttributes( { color: colorValue } ),
                            label: __( 'Background Color' ),
                        },
                        {
                            value: textColor,
                            onChange: ( colorValue ) => setAttributes( { textColor: colorValue } ),
                            label: __( 'Text Color' ),
                        },
                    ] }
                >

</PanelColorSettings>