Apprenons Gutenberg depuis zéro

Article en cours de rédaction – mis à jour le 09/02/2019

Je te propose de suivre avec moi la création d’un block pour l’éditeur de WordPress Gutemberg.

Je vais essayer de partir de zéro, vraiment sans utiliser de plugin, et documenter ce que j’apprends et ce que je vois au fur et à mesure.
Ca me servira de carnet de notes, et peut-être que ça te servira aussi à toi.

Déjà, mon but est de créer un block de formulaire.
Je souhaite que l’utilisateur puisse facilement créer un formulaire et qu’il puisse administrer les champs et le design. J’aimerais l’intégrer avec Stripe pour à la fin développer un plugin qui permettra à l’utilisateur de créer un formulaire Stripe complètement personnalisé.

Déjà, j’ai crée un plugin boilerplate, vraiment juste pour démarrer rapidement en utilisant : WORDPRESS PLUGIN BOILERPLATE GENERATOR.
Je nomme le plugin Stripe Beautiful Forms.

Je commence par créer un fichier block.js.
Je le charge avec :

wp_enqueue_script( 'block', plugin_dir_url( __FILE__ ) . 'js/block.js', array( 'wp-element', 'wp-blocks', 'wp-components' ), $this->version, false );

Ce qu’il est surtout intéressant de noter ici, c’est l’utilisation du tableau de dépendances. Il faut spécifier les dépendances JS si on veut que notre bloc marche parce qu’on fait appel à ces fonctions par la suite.

Attention : wp-blocks prends un s à la fin, sinon ça ne marchera pas. J’ai trouvé que je devais mettre ‘wp-element’ et ‘wp-blocks’ à force d’essayer et de voir si mon plugin se chargeait ou non. Puis au bout de quelques minutes, j’ai en fait j’ai trouvé la référence des handles pour les dépendances ici : https://wordpress.org/gutenberg/handbook/contributors/develop/scripts/
Ca veut dire que si on souhaite utiliser l’internationalisation dans notre block, il faudra utiliser l’object i18N qui a le handle wp-i18n.

Pour créer mon bloc, il suffit de lui donner un namespace, ici sbf/form, et un objets d’attributs qui contiennent quelques informations basique du bloc : un titre, une description, une catégorie (important sinon le bloc ne se charge pas dans la liste, et deux fonctions edit et save :

var el = wp.element.createElement,
    registerBlockType = wp.blocks.registerBlockType;

registerBlockType( 'sbf/form', {
    title: 'Formulaire',
    description: 'A nice Stripe form.',
    category: 'layout',

    edit() {
        return el("p", null, "Bonjour");
    },

    save() {
        return el("p", null, "Saved");
    },
} );

Ici tu remarques sans doute que je n’utilise pas la syntaxe JSX. Loin de moi l’idée d’être un puriste ou quoi, je souhaite montrer que ce qu’on utilise ce n’est pas magique; c’est juste du ReactJS avec un peu de sucre WordPress par dessus.

Par la suite, bien sûr il est conseillé d’utiliser directement JSX, mais pour ça il faudra installer un outil de build, etc, chose que je ne voulais pas faire pour ne pas m’embrouiller et vraiment rester sur mon objectif premier. Mais au bout du compte, les deux fonction edit et save ci-dessus, reviennent à ça en JSX :

edit() {
    return <p>Bonjour</p>
},

save() {
    return <p>Saved</p>
},

Commentaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *