Script React

Le script React dans blocks/{slug}/editor.jsx va permettre de définir les champs à remplir et la logique du block au sein de l'éditeur Gutenberg.

Vous pouvez changer l'icône du block via la méthode setIcon et en spécifiant un Dashicon

La méthode setEdit retourne le JSX nécessaire à la logique du block. Le composant InspectorControls permet de placer des éléments dans la sidebar de l'éditeur.

info

Pensez à bien effectuer la commande npm run dev lorsque vous manipuler les fichiers SCSS et JS/TS/JSX afin que tout se compile.

InnerBlocks est un composant très utile pour permettre d'autre d'autres blocks au sein de notre block.

astuce

N'hésitez pas à faire des console.log de wp.components et wp.blockEditor pour découvrir les composants disponibles.

blocks/colorized-section/editor.jsx

new GutenbergBlock(colorized_section)
    .setIcon("admin-appearance")
    .setEdit((props) => {
        return (
            <div
                className={props.className}
                style={{ background: props.attributes.color }}
            >
                <TextControl
                    label="Titre"
                    value={props.attributes.title}
                    onChange={(value) => props.setAttributes({ title: value })}
                />
                <InnerBlocks />

                <InspectorControls>
                    <ColorPicker
                        onChange={(value) =>
                            props.setAttributes({ color: value })
                        }
                        value={props.attributes.color}
                    />
                </InspectorControls>
            </div>
        );
    })
    .register();

Styliser votre block

Lors de la création du block via la commande, un fichier de style a été créer pour l'éditeur et automatiquement importé.

Dans notre exemple, ce fichier se trouve dans blocks/colorized_section/_index.scss

blocks/colorized_section/_index.scss

.wp-block-elementum-block-colorized_section {
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    padding: 20px;
    min-height: fit-content;
}