Editeur : React

Le fichier editor.jsx dans le dossier de votre bloc permet de définir l'interface d'édition dans l'éditeur Gutenberg. Il est compilé automatiquement par lorsque vous utilisez la commande npm run dev.

Structure de base

blocks/mon-bloc/editor.jsx

// Import des composants WordPress
const { TextControl, ColorPicker } = wp.components;
const { InspectorControls, InnerBlocks } = wp.blockEditor;

// Création d'une nouvelle instance de GutenbergBlock
new GutenbergBlock(mon_bloc)
    // Configuration du bloc
    .setIcon("admin-appearance") // Utilisez un Dashicon
    // Configuration de l'édition
    .setEdit((props) => {
        const { attributes, setAttributes, className } = props;

        return (
            <div
                className={className}
                style={{ backgroundColor: attributes.color }}
            >
                <TextControl
                    label="Titre"
                    value={attributes.title}
                    onChange={(title) => setAttributes({ title })}
                />

                <InnerBlocks />

                <InspectorControls>
                    <div style={{ padding: "16px" }}>
                        <h3>Paramètres du bloc</h3>
                        <ColorPicker
                            color={attributes.color}
                            onChangeComplete={(color) =>
                                setAttributes({ color: color.hex })
                            }
                            disableAlpha
                        />
                    </div>
                </InspectorControls>
            </div>
        );
    })
    .register();

Méthodes de GutenbergBlock

Configuration du bloc

Méthode	Description
setTitle(string)	Définit le nom affiché du bloc
setIcon(string)	Définit l'icône du bloc (Dashicon)
setCategory(string)	Catégorie du bloc (common, layout, widgets, etc.)
setKeywords(array)	Mots-clés pour la recherche
setSupports(object)	Fonctionnalités supportées par le bloc
addAttribute(string, string, mixed)	Ajoute un attribut (nom, type, valeur par défaut)
setEdit(function)	Définit le composant d'édition
register()	Enregistre le bloc

Données injectées depuis PHP

Les données envoyées via addToEditorScript() côté PHP sont accessibles directement dans l'objet global du bloc (celui passé à new GutenbergBlock(...)).

console.log(colorizedcolor.colors);

new GutenbergBlock(colorizedcolor)
    .setEdit((props) => {
        const palette = colorizedcolor.colors || {};
        return (
            <div className={props.className}>
                Palette: {Object.keys(palette).length}
            </div>
        );
    })
    .register();

Composants utiles

Contrôles principaux

Composant	Usage
TextControl	Champ de texte simple
TextareaControl	Zone de texte multiligne
SelectControl	Menu déroulant
CheckboxControl	Case à cocher
ToggleControl	Interrupteur
ColorPalette	Sélecteur de couleurs
MediaUpload	Upload d'images/médias

Mise en page

Composant	Usage
PanelBody	Section pliable dans l'inspecteur
TabPanel	Onglets pour organiser les contrôles
ToolbarButton	Bouton dans la barre d'outils

Bonnes pratiques

3. Séparation : Divisez les composants complexes en sous-composants
4. Validation : Validez toujours les entrées utilisateur
5. Accessibilité : Utilisez aria-* et des libellés appropriés

Débogage

// Affiche tous les composants disponibles
console.log({
    components: wp.components,
    blockEditor: wp.blockEditor,
    element: wp.element,
});

Styles de l'éditeur

Les styles de l'éditeur sont définis dans blocks/votre-bloc/_index.scss et sont automatiquement chargés. Utilisez la classe du bloc comme sélecteur principal :

.wp-block-mon-namespace-mon-bloc {
    // Styles spécifiques à l'éditeur
    padding: 20px;
    border: 1px solid #ddd;

    // Cibler les éléments dans l'éditeur
    .block-editor-inner-blocks {
        margin-top: 15px;
    }
}

Astuces

1. Utilisez InnerBlocks pour permettre l'ajout d'autres blocs à l'intérieur du vôtre
2. Les attributs sont automatiquement sauvegardés dans le contenu du bloc
3. Pour ajouter des contrôles dans la barre d'outils du bloc :

.setEdit((props) => {
    return (
        <>
            <BlockControls>
                <ToolbarGroup>
                    <ToolbarButton
                        icon="smiley"
                        label="Action"
                        onClick={() => console.log('Action!')}
                    />
                </ToolbarGroup>
            </BlockControls>
            {/* Votre contenu */}
        </>
    );
})

4. Pour utiliser des composants de style avancés :

import { __experimentalBoxControl as BoxControl } from "@wordpress/components";

// Dans votre composant
<BoxControl
    label="Marges"
    values={attributes.spacing}
    onChange={(value) => setAttributes({ spacing: value })}
/>;