WordPress

Créer un bloc Gutenberg sur mesure sans extension

Publié en avril 2019 2 extraits de code par Rémy Montangé

Fiche écrite en 2019, pour les navigateurs et les versions de l’époque. Vérifiez qu’elle correspond encore à votre environnement avant de l’appliquer.

Pour offrir aux rédacteurs un bloc maison (un encadré, une fiche, un appel à l’action), on n’a besoin ni d’une extension de blocs payante ni d’une chaîne de compilation. Un fichier PHP pour déclarer le bloc, un fichier JavaScript écrit sans JSX, et WordPress fait le reste.

PHP

<?php
/**
* Plugin Name: W4U Encadré
*/

defined('ABSPATH') || exit;

add_action('init', function () {
    wp_register_script(
        'w4u-encadre',
        plugins_url('encadre.js', __FILE__),
        ['wp-blocks', 'wp-element', 'wp-editor'],
        '1.0.0'
    );
    wp_register_style('w4u-encadre', plugins_url('encadre.css', __FILE__), [], '1.0.0');

    register_block_type('w4u/encadre', [
        'editor_script' => 'w4u-encadre',
        'style'         => 'w4u-encadre', // chargé dans l'éditeur ET sur le site
    ]);
});

Le bloc reçoit automatiquement la classe wp-block-w4u-encadre, qu’il suffit de styler dans encadre.css. Attention à la fonction save : c’est son résultat qui est enregistré dans le contenu. Si on la modifie après coup, les blocs déjà publiés seront signalés comme invalides dans l’éditeur. On la fige donc tôt, et on fait évoluer le style plutôt que le balisage.

JavaScript

( function ( blocks, element, editor ) {
  var el = element.createElement;
  var RichText = editor.RichText;

  blocks.registerBlockType( 'w4u/encadre', {
    title: 'Encadré à retenir',
    icon: 'info',
    category: 'common',
    attributes: {
      contenu: { type: 'string', source: 'html', selector: 'p' }
    },

    edit: function ( props ) {
      return el( RichText, {
        tagName: 'p',
        className: props.className,
        value: props.attributes.contenu,
        placeholder: 'Le point à retenir…',
        onChange: function ( valeur ) {
          props.setAttributes( { contenu: valeur } );
        }
      } );
    },

    save: function ( props ) {
      return el( RichText.Content, { tagName: 'p', value: props.attributes.contenu } );
    }
  } );
} )( window.wp.blocks, window.wp.element, window.wp.editor );

Sources

Manuel de l’éditeur de blocs, WordPress Developer Resources developer.wordpress.org

Sources

Autres fiches WordPress