web-dev-qa-db-fra.com

Implémenter le contrôle de l'inspecteur de couleur dans Gutenberg

J'essaie d'implémenter Panel Color dans Inspector Control pour un bloc personnalisé, mais je n'arrive pas à le comprendre. Vous trouverez ci-dessous le code JSX qui le tente. Il restitue le bloc, mais lorsqu'il est actif, il rencontre un erreur de réaction minifiée n ° 130 .

const { registerBlockType, InspectorControls, PanelColor } = wp.blocks;

registerBlockType( 'test/test', {
    title: 'Test',
    icon: 'universal-access-alt',
    category: 'layout',

    edit( { attributes, className, setAttributes } ) {
        const { backgroundColor } = attributes;
        const onChangeBackgroundColor = newBackgroundColor => {
            setAttributes( { backgroundColor: newBackgroundColor } );
        };

        return (
            <div className={ className }>
            { !! focus && (
              <InspectorControls>
                <PanelColor
                  title={ 'Background Color' }
                  value={ backgroundColor }
                  onChange={ onChangeBackgroundColor }
                />
              </InspectorControls>
            ) }
          </div>
        );
    },
    save( { attributes, className } ) {
        const { backgroundColor } = attributes;
        return (
            <div className={ className }>
            </div>
        );
    },
} );
block-editor
4
Nathan Johnson

De nombreux contrôles wp.blocks.* ont été déplacés vers wp.editor.* (voir notes de version ).

Plus précisément, wp.blocks.InspectorControls est maintenant wp.editor.InspectorControls - vous devrez modifier la première ligne de votre code.

Remarque: registerBlockType est toujours importé de wp.blocks.* iirc.

En remarque, j'ai également constaté que l'astuce focus && n'était plus nécessaire, car GB affichait automatiquement les contrôles Inspector lorsque le bloc est actif.

3
developerjack

Je vais vous donner un point de vue, parce que je me suis battu aussi :)

Importez d'abord la InspectorControls

const { InspectorControls } = wp.editor;

puis importez des composants tels que ColorPalette

const { ColorPalette } = wp.components;

Afin de sauvegarder l'état, vous devez définir un attribut:

attributes: {
    // To storage background colour of the div
    background_color: { 
        type: 'string', 
        default: 'red', // Default value for newly added block
    },           
    // To storage the complete style of the div that will be 'merged' with the selected colors
    block_style: { 
        selector: 'div', // From tag a
        source: 'attribute', // binds an attribute of the tag
        attribute: 'style', // binds style of a: the dynamic colors
    }
},

Puis, à la fonction edit ... Définissez la onChangeColorHandler et une variable pour conserver la valeur modifiée dansJSX, car vous ne pouvez bien sûr pas utiliser le fichier css.

Dans la partie return, renvoyez un tableau de deux éléments [], le Inspector et le rendu div dans l'éditeur

edit: function( props ) {

    var background_color = props.attributes.background_color // To bind button background color

    // Style object for the button
    // I created a style in JSX syntax to keep it here for
    // the dynamic changes
    var block_style = props.attributes.block_style // To bind the style of the button
    block_style = {
        backgroundColor: background_color,
        color: '#000',
        padding: '14px 25px',
        fontSize: '16px', 
    }

    //
    // onChange event functions
    //
    function onChangeBgColor ( content ) {
        props.setAttributes({background_color: content})
    }

    // Creates a <p class='wp-block-cgb-block-gtm-audio-block'></p>.
    return [
        <InspectorControls>
            <label class="blocks-base-control__label">background color</label>
            <ColorPalette // Element Tag for Gutenberg standard colour selector
                onChange={onChangeBgColor} // onChange event callback
            />
        </InspectorControls>
        ,
        <div className={ props.className } style={block_style}>
            <p>— Hello from the backend.</p>
        </div>
    ];
},

** FINALEMENT: ** la méthode de sauvegarde, il suffit de créer une variable pour le style et de donner à div rendu le style JSX de cette valeur.

save: function( props ) {

    var block_style = {
        backgroundColor: props.attributes.background_color
    }
    return (
        <div style={block_style}>
            <p>— Hello from the frontend.</p>
        </div>
    );
},

voici un résumé complet du fichier

1
Biskrem Muhammad