Modifier l'apparence d'un bloc customisé sur Gutenberg

Dans l’article précédent, nous avons découvert comment créer une extension nous permettant d’ajouter à Gutenberg une librairie de blocs customisés. Pour le moment, il n’y a qu’un seul bloc customisé qui nous permet d’afficher « Mon premier Bloc » sur notre éditeur préféré « Gutenberg » ainsi que sur la page visible au grand public. Le résultat à l’image ci-dessous.

Image animée de mon premier bloc

Fonction du bloc

Vous pouvez le constater, ce bloc est extrêmement simple et aurait bien besoin de quelques améliorations !
Avant de s’attaquer à la personnalisation visuelle de notre bloc et à l’intégration de la fonctionnalité souhaitée, nous devons définir la raison pour laquelle notre bloc existe.
C’est la problématique qui nous a poussés à créer notre bloc ! Vous aviez peut-être besoin d’un accordéon ? D’un carrousel ? Comment en sommes-nous arrivés là ?

Pour ma part, j’ai très souvent besoin de définir un espace entre deux blocs de l’éditeur Gutenberg. Le bloc « espacement » sert à cela, mais ce bloc n’est pas responsive, c’est-à-dire qu’il ne s’adapte pas entre différents supports numériques !
Mettre un espacement de 100 pixels entre deux blocs ne donnera pas le même effet sur mobile et sur ordinateur, l’expérience utilisateur sera négativement impactée sur l’un des deux supports qui risque de perdre en lisibilité et en compréhension.

Il est cependant possible de palier à ce problème en « jouant » avec les unités utilisées pour générer notre espacement (utiliser les unités relatives au lieu des pixels), mais ce n’est pas forcément quelque chose d’évident à utiliser pour un novice de Gutenberg (ou plus généralement de l’informatique) ! L’expérience du rédacteur importe tout autant que celle du lecteur !

Nous allons donc faire de notre bloc un espaceur multisupport !

Customiser son bloc

Notre espaceur multisupport est construit sur un concept simple, générer deux zones vides de respectivement 100 et 50 pixels ; celle de 100 pixels sera affichée sur ordinateur et celle de 50 pixels, sur mobile. Nous verrons dans un prochain article comment permettre à l’utilisateur de choisir lui-même la hauteur de ses deux zones.

Pour commencer, nous allons reprendre nos fichiers et notre répertoire « MonPremierBloc » (que nous avons créé dans l’article précédent) pour renommer notre bloc « ResponsiveSpacer » (ou tout autre nom qui pourrait vous convenir). N’oubliez pas de renommer en plus de vos fichiers, les classes contenues dans ceux-ci.
Nous pouvons également mettre à jour notre fichier « MonPremierBloc.js » (Que nous avons renommé normalement « ResponsiveSpacer.js ») pour renseigner les nouvelles informations associées.
Nous devrions avoir un résultat comme celui ci-dessous :

Javascript/src/ResponsiveSpacer/ResponsiveSpacer.js
import ResponsiveSpacerEdit from './ResponsiveSpacerEdit'; //Notre bloc sur l'interface d'administration
import ResponsiveSpacerSave from './ResponsiveSpacerSave'; //Notre bloc sur l'interface public
import { resizeCornerNE as icon } from '@wordpress/icons'; //L'icône de notre bloc
export const name = "responsive-spacer"; //Le nom de notre bloc
export const settings = { // Les paramètres de notre bloc
    title: "Espacement",  //Le titre de notre bloc
    description: "Un espacement responsive !", // La description de notre bloc
    category: "design", //La category de notre bloc
    icon:icon, //L'icône de notre bloc
    edit:ResponsiveSpacerEdit, // La fonction à appeler pour afficher notre bloc sur l'interface d'administration
    save:ResponsiveSpacerSave // La fonction à appeler pour afficher notre bloc sur l'interface public
}

Nous pouvons voir dans ce code qu’en plus des champs textuels, le champ « icon » utilise la ressource « resizeCornerNE » (regarder à la ligne 3, c’est ici que nous appelons la ressource). Il s’agit en réalité de l’icône présentement utilisée par Gutenberg pour le bloc espacement. En voici le résultat :

Espacement Multi-support Gutenberg Details

Modifier l’icône utilisée

Peut-être avez-vous envie d’afficher une icône personnalisée ? Il s’avère que c’est assez simple, il suffit de créer la ressource contenant l’icône en question et de l’appeler dans notre fichier « ResponsiveSpacer.js » à la place de « resizeCornerNE ». Pour cela, nous devons créer un fichier « ResponsiveSpacerIcon.js » dans notre répertoire « ResponsiveSpacer », cela dans l’objectif de toujours conserver une architecture simple et lisible. Voici la structure à suivre :

Structure bloc customise

Ouvrez votre fichier « ResponsiveSpacerIcon.js » et saisissez les lignes suivantes :

Javascript/src/ResponsiveSpacer/ResponsiveSpacerIcon.js
import { SVG, Polygon } from '@wordpress/primitives'; //Import de nos balises SVG utilisées

const ResponsiveSpacerIcon=()=>{ //Déclaration de notre variable contenant l'icône
    return (
        <SVG
            width="24"
            height="24"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
        >
            <Polygon points="1,1 20,1 20,20 1,20"/>
        </SVG>
    ); // Déclaration de notre icône
};
export default ResponsiveSpacerIcon; //Nous exportons notre icône, comme il n'y a que cette ressources sur ce fichier, nous l'exportons par défaut.

Nous pouvons constater que nos icônes sont créées en utilisant le format SVG. Vous devez maîtriser ce format pour éditer vos icônes !
Sur l’exemple que nous venons de copier, nous n’affichons qu’un carré, mais vous pouvez, si vous le souhaitez, modifier l’apparence du SVG.

Une fois notre fichier enregistré, il faut l’appeler dans notre fichier « ResponsiveSpacer.js » à la place de l’icône actuelle « resizeCornerNE ». Nous allons ouvrir le fichier en question est remplacer la ligne 3 par :

Javascript/src/ResponsiveSpacer/ResponsiveSpacer.js
import icon from './ResponsiveSpacerIcon'; //L'icone de notre bloc

Et notre icône est fonctionnelle, elle s’affiche correctement sur Gutenberg !

Ajouter du style

Nous venons d’ajouter une icône à notre bloc, nous allons pouvoir ajouter les deux blocs qui vont nous permettre de générer les deux espacements de 50 et 100 pixels et personnaliser leur affichage.

Nous allons ouvrir nos fichiers « ResponsiveSpacerEdit.js » et « ResponsiveSpacerSave.js » pour modifier le rendu de notre bloc afin qu’il affiche deux zones vides.
À la place de notre ligne ou est affiché le paragraphe contenant « Mon premier Bloc » nous allons saisir les lignes suivantes :

JavascriptResponsiveSpacerEdit.js et ResponsiveSpacerSave.js
<div className={"bloc-customises-responsive-spacer-container"}>
   <div
      className={"bloc-customises-responsive-spacer-mobile"}
      aria-hidden="true"
      style={{
         height: "50px",
      }}
   />
   <div
      className={"bloc-customises-responsive-spacer-desktop"}
      aria-hidden="true"
      style={{
         height: "100px",
      }}
   />
</div>

Si vous essayez d’afficher votre bloc tel qu’il est présentement sur Gutenberg, vous obtiendrez une zone vide de 150 pixels puisque nous n’avons pas défini les règles de styles permettant d’afficher ou non la bonne zone en fonction du support numérique de l’utilisateur.
Pour cela, nous allons créer un nouveau fichier « ResponsiveSpacer.scss ». Ce qui va donner l’architecture suivante à notre bloc :

Structure bloc customise

Il faut désormais importer ce fichier dans notre bloc, ajouter en début de fichier de votre document « ResponsiveSpacer.js » :

Javascript/src/ResponsiveSpacer/ResponsiveSpacer.js
import "./ResponsiveSpacer.scss";

Chaque fichier du format « scss » que nous pourrons créer à l’avenir sera compilé en un seul par notre extension. Il nous faut modifier notre fichier « bloc-customises.php » que nous avons créé dans l’article précédent pour informer à WordPress d’utiliser le fichier CSS compilé par notre extension.

Le fichier « bloc-customises.php » doit désormais ressembler à cela :

PHP/bloc-customises.php
 <?php
/**
* Plugin Name: Librairie de blocs customisés WordPress
* Description: Cette extension propose à ses utilisateurs de nouveaux blocs pour l'éditeur Gutenberg !
* Author: Pierre Lejeune
* Author URI: https://pierrelejeune.fr
* Version: 0.1
*/
if( !defined( 'WPINC' ) ) { die; } // On vérifie que notre extension se trouve bien dans un répertoire WordPress

/**
 *  On renseigne les dépendances de notre extension à charger dans l'éditeur Gutenberg
 * */
function load_bloccustomises_gutenberg_dependencies() {
    $dir = plugin_dir_url(__FILE__) . 'build';
    wp_enqueue_script( "bloccustomises-js", "$dir/index.js", [ 'wp-blocks', 'wp-dom' ] , false, true );
    wp_enqueue_style( "bloccustomises-css", "$dir/index.css", [ 'wp-edit-blocks' ] );
}
add_action( 'enqueue_block_editor_assets', 'load_bloccustomises_gutenberg_dependencies', 100 );

/**
 * On renseigne les dépendances de notre extension à charger sur la partie public
 */
function load_bloccustomises_frontoffice_dependencies() {
    $dir = plugin_dir_url(__FILE__) . 'build';
    wp_enqueue_style( "bloccustomises-css", "$dir/index.css");
}
add_action( 'wp_enqueue_scripts', 'load_bloccustomises_frontoffice_dependencies' );

Ouvrez votre fichier « ResponsiveSpacer.scss » et coller à l’intérieur le contenu suivant :

SCSS/src/ResponsiveSpacer/ResponsiveSpacer.scss
body.wp-admin{
    .bloc-customises-responsive-spacer-container{
        display: grid;
        grid-template-columns: 1fr 1fr;
        >div{
            display: block;
            position: relative;
            background-color: rgba(0,0,0,.1);
            &::before{
                position: absolute;
                top: 0;
                left: 0;
                font-size: 14px;
            }
            &.bloc-customises-responsive-spacer-mobile::before{
                content: "Mobile"
            }
            &.bloc-customises-responsive-spacer-desktop::before{
                content: "Ordinateur"
            }
        };
    }
}
body:not(.wp-admin){
    .bloc-customises-responsive-spacer-container{
        @media (min-width: 360px) {
            .bloc-customises-responsive-spacer-mobile{
                display: none;
            }
        }
        @media (max-width: 360px) {
            .bloc-customises-responsive-spacer-desktop{
                display: none;
            }
        }
    }
}

Il s’agit des règles visuelles de notre bloc, en dessous de 360px, nous affichons l’espaceur mobile, au-dessus, nous affichons l’espaceur pour ordinateur.

Compiler son bloc

Vous pouvez désormais compiler votre extension en utilisant la commande npm run build dans votre terminal. Attendez que votre console vous dise que tout est correctement compilé. Vous pouvez ensuite ouvrir votre éditeur préféré « Gutenberg » et si tout s’est bien passé, vous devriez voir à l’écran le résultat de notre dur labeur.

espaceur responsive

Félicitations ! Vous avez réussi.

Nous verrons prochainement comment stocker les hauteurs de nos deux zones dans des attributs de bloc customisés !

Télécharger le projet

Vous pouvez télécharger le projet sur mon GitHub en cliquant ici.