un espacement responsive sur gutenberg

Si vous utilisez Gutenberg régulièrement (l’éditeur actuel proposé par le CMS WordPress), vous savez combien il peut être compliqué de disposer harmonieusement ses contenus entre les différentes tailles de supports numériques (mobile et ordinateur par exemple).

Un problème d’espacement

Le problème réside principalement dans la gestion des espacements qui génère des zones vides utilisées principalement pour séparer un contenu d’un autre.
Gutenberg propose actuellement un bloc permettant d’intégrer à ses contenus des espaces, mais ce bloc n’est pas multisupport, il ne s’adapte pas en fonction du support numérique de l’utilisateur (mobile, tablette, ordinateur, etc.).
Il est possible de jouer avec des classes CSS ou des valeurs relatives à la taille d’écran pour résoudre cette problématique, mais c’est une méthode complexe pour n’importe quel rédacteur qui n’a pas de connaissance en développements web.

Une solution customisée

Gutenberg nous impose ses limites, mais ne nous laisse pas les mains vides face à elles. De multiples outils nous permettent d’étendre le champ des possibles de Gutenberg dont notamment, le développement de blocs customisés intégrés dans une extension (un plugin) WordPress !

Nous avons découvert en détail dans les trois articles précédents, comment construire une extension de blocs customisés et créer son premier bloc, modifier son aspect visuel et gérer des attributs personnalisés et personnalisables.
Au fur et à mesure des trois articles, nous avons développé un espaceur multisupports facile d’utilisation. C’est de ces trois articles fusionnés que nous allons aboutir à une extension pouvant répondre à la problématique actuelle.

Télécharger l’extension

Si vous ne souhaitez pas développer votre bloc customisé vous-même, vous pouvez vous rendre directement en fin d’article où se trouve un lien vers la solution et si vous avez besoin d’un développeur, je vous invite à me contacter !

Développer l’extension

La suite de cet article consiste donc en une version simplifiée des trois derniers articles de ce site. Si vous êtes déjà sensibilisé aux développements de blocs customisés sur Gutenberg, vous pouvez suivre cet article sans difficultés. En revanche, si vous n’avez pas encore développé de blocs customisés, je vous invite à lire attentivement les trois derniers articles (nous allons voir beaucoup de langages, pas simplement du HTML et CSS).

Préparer notre extension

Avant de développer notre extension, nous devons concevoir une architecture simple d’utilisation et viable aux longs termes.
Pour cela, le schéma suivant que nous avons étudié dans un précédent article sera parfaitement adapté.

Structure espacement responsive

C’est une structure simple d’utilisation qui nous permet d’ajouter facilement des blocs customisés si cela s’avère nécessaire plus tard.

Déclarer notre extension

Si vous regardez bien l’architecture de notre extension, il y a un fichier « bloc-customises.php » à la racine de celle-ci ; il s’agit du fichier permettant de déclarer notre extension ; C’est ce fichier que Worpdres va « chercher » et « exécuter » lorsque nous aurons installé notre extension parmi nos nombreux plugins disponibles sur l’interface d’administration de WordPress.

Pour déclarer notre extension, il nous faut saisir le code suivant dans le fichier « bloc-customises.php » que nous venons d’évoquer.

Javascript/bloc-customises.php
 <?php
/**
* Plugin Name: Librairie de blocs customisés WordPress
* Description: Cette extension propose à ses utilisateurs un espaceur responsive !
* 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' );

Même sans suivre le reste de l’article, vous pouvez déjà constater dans l’interface d’administration de WordPress que notre extension est bien en place et qu’elle contient les informations que nous venons de renseigner (comme sur l’image ci-dessous).

extension de bloc customises wordpress

Définir les dépendances de notre extension

Avant de continuer, nous allons avoir besoin de définir les dépendances utilisées par notre extension.
Pour cela, nous devons ouvrir le fichier « package.json » et copier le code suivant :

Javascript/package.json
{
    "name": "bloc-customises",
    "private": true,
    "author": "Pierre Lejeune (pierrelejeune.fr)",
    "devDependencies": {
        "@wordpress/components": "^19.7.0",
        "@wordpress/scripts": "^22.3.0"
    },
    "scripts": {
        "start": "wp-scripts start src/index.js --output-path=build",
        "build": "wp-scripts build src/index.js --output-path=build"
    }
}

Ici, nous n’utilisons que deux dépendances, wordpress/components et wordpress/scripts.

Pour installer nos dépendances, nous allons dans un premier temps nous assurer que « node » est bien installé sur notre machine ; une fois installées, il nous faut ouvrir un terminal à la racine de notre extension et taper la commande npm install. Elle se chargera pour nous de télécharger les fichiers nécessaires pour faire fonctionner notre extension. Vérifier qu’aucune erreur n’est survenue durant l’installation avant de continuer !

Définir notre blocs et ses attributs

Notre architecture d’extension est en place, nous pouvons ouvrir le fichier « ResponsiveSpacer.js » et saisir le code suivant :

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'icone 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'icon 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
    attributes:{ //Déclaration des attributs de notre bloc
        mobileHeight: { // Déclaration du nom de notre attribut
            type: "string", // Le type de notre attribut
            default: "50px" // La valeur par défaut de notre attribut
        },
        desktopHeight: {
            type: "string",
            default: "100px"
        },
    },
}

Nous définissons à l’intérieur les deux attributs nécessaires à notre espacement multisupports, notre attribut « mobileHeight » (avec comme valeur par défaut « 50px » ) pour la hauteur sur mobile et l’attribut « desktopHeight » (avec comme valeur par défaut « 100px ») pour la hauteur sur ordinateur.

Si vous souhaitez personnaliser les icônes de notre bloc ou si quelque chose ne vous semble pas assez clair, vous pouvez lire (ou relire) les articles précédents, chaque étape est plus détaillée.

Comportement du bloc

Nous avons défini nos attributs pour notre espacement multisupports, il est désormais temps de lui définir son comportement sur l’éditeur (le back-office) ainsi que sur la partie publique (le front-office).

Comportement dans l’éditeur

Nous allons ouvrir le fichier « ResponsiveSpacerEdit.js » et saisir le script suivant :

Javascript/src/ResponsiveSpacer/ResponsiveSpacerEdit.js
import { useBlockProps, InspectorControls} from '@wordpress/block-editor'; // Récupération de la méthode permettant à WordPress de nous transmettre les attributs propres à notre bloc
import { PanelBody, TextControl,ResizableBox     } from '@wordpress/components'; // Récupération des composants utilisé pour notre bloc

import "./ResponsiveSpacer.scss";

const ResponsiveSpacerEdit = ({setAttributes, attributes, toggleSelection}) => { //La fonction affichant notre premier bloc sur l'interface d'administration
    const {
        mobileHeight,
        desktopHeight,
    } = attributes; // Récupération des attributs customisés définit.
    const blockProps = useBlockProps() // Récupération des attributs propres à notre bloc
    return (
        <>
            <InspectorControls>
                <PanelBody>
                    <TextControl
                        label={"Hauteur de l'espacement sur rdinateur"} //Ce bloc (TextControl) sera affiché dans la colonne de droite sur Gutenberg
                        value={desktopHeight} //Il contient la valeur de attribut d'espacement sur ordinateur
                        onChange={(newDesktopHeight)=>setAttributes({desktopHeight: newDesktopHeight})} //Il peut être modifié
                    />
                    <TextControl
                        label={"Hauteur de l'espacement sur mobile"} //Ce bloc (TextControl) sera affiché dans la colonne de droite sur Gutenberg
                        value={mobileHeight} //Il contient la valeur de attribut d'espacement sur mobile
                        onChange={(newMobileHeight)=>setAttributes({mobileHeight: newMobileHeight})}//Il peut être modifié
                    />
                </PanelBody>
            </InspectorControls>
            <div {...blockProps}>
                <div className={"bloc-customises-responsive-spacer-container"}>
                    <div
                        className={"bloc-customises-responsive-spacer-mobile"}
                        aria-hidden="true"
                        style={{
                            height: mobileHeight,
                        }}
                    >
                        {mobileHeight.includes('px') && //Si l'utilisateur renseigne une hauteur en pixel, alors on affiche une "boite redimenssionable"
                            <ResizableBox
                                size={ { //Elle permet à l'utilisateur de sélectionner la hauteur du bloc en faisant "glisser" une barre sur l'éditeur
                                    height: mobileHeight,
                                } }
                                minHeight="20"
                                maxHeight="500"
                                enable={ {
                                    top: false,
                                    right: false,
                                    bottom: true,
                                    left: false,
                                    topRight: false,
                                    bottomRight: false,
                                    bottomLeft: false,
                                    topLeft: false,
                                } }
                                onResizeStop={ ( event, direction, elt, delta ) => {
                                    let newHeight = parseInt( parseInt(mobileHeight.replace('px', '')) + delta.height, 10 );
                                    setAttributes( {
                                        mobileHeight: newHeight+'px',
                                    } );
                                } }
                            />
                        }
                    </div>
                    <div
                        className={"bloc-customises-responsive-spacer-desktop"}
                        aria-hidden="true"
                        style={{
                            height: desktopHeight,
                        }}
                    >
                        {desktopHeight.includes("px") && //Si l'utilisateur renseigne une hauteur en pixel, alors on affiche une "boite redimenssionable"
                            <ResizableBox
                                size={ { //Elle permet à l'utilisateur de sélectionner la hauteur du bloc en faisant "glisser" une barre sur l'éditeur
                                    height: desktopHeight,
                                } }
                                minHeight="20"
                                maxHeight="500"
                                enable={ {
                                    top: false,
                                    right: false,
                                    bottom: true,
                                    left: false,
                                    topRight: false,
                                    bottomRight: false,
                                    bottomLeft: false,
                                    topLeft: false,
                                } }
                                onResizeStop={ ( event, direction, elt, delta ) => {
                                    let newHeight = parseInt( parseInt(desktopHeight.replace('px', '')) + delta.height, 10 );
                                    setAttributes( {
                                        desktopHeight: newHeight+'px',
                                    } );
                                } }
                            />
                        }
                    </div>
                </div>
            </div>
        </>
       
    ); //Affichage de notre bloc
}
export default ResponsiveSpacerEdit;

Il s’agit du fichier nous permettant d’éditer notre bloc depuis le back-office.

L’amélioration apportée aux codes des précédents articles est l’ajout d’une boîte redimensionnable qui permet à l’utilisateur de sélectionner la hauteur de l’espacement en faisant glisser une barre depuis Gutenberg.

Comportement en front office

Contrairement au comportement dans l’éditeur, le comportement de notre espacement sur la partie publique est beaucoup plus simple. Il faut simplement afficher nos deux espacements (mobile et ordinateur) tels quels (avec des simples balises HTML rudimentaires). Pour cela, nous devons copier le script suivant dans le fichier « ResponsiveSpacerSave.js » :

Javascript/src/ResponsiveSpacer/ResponsiveSpacerSave.js
import { useBlockProps } from '@wordpress/block-editor';// Récupération de la méthode permettant à WordPress de nous transmettre les attributs propres à notre bloc

import "./ResponsiveSpacer.scss";

const ResponsiveSpacerSave = ({attributes}) => {//La fonction affichant notre premier bloc sur l'interface public
    const {
        mobileHeight,
        desktopHeight,
    } = attributes;
    const blockProps = useBlockProps.save();// Récupération des attributs propres à notre bloc
    return (
        <div {...blockProps}>
            <div className={"bloc-customises-responsive-spacer-container"}>
                <div
                    className={"bloc-customises-responsive-spacer-mobile"}
                    aria-hidden="true"
                    style={{
                        height: mobileHeight,
                    }}
                />
                <div
                    className={"bloc-customises-responsive-spacer-desktop"}
                    aria-hidden="true"
                    style={{
                        height: desktopHeight,
                    }}
                />
            </div>
        </div>
    );//Affichage de notre bloc
}

export default ResponsiveSpacerSave;

Notre bloc affiche désormais les deux espacements (ordinateur et mobile), nous allons devoir le customiser un petit peu visuellement pour qu’il soit plus ergonomique est simple d’utilisation.

Styliser notre bloc

Proposer à l’utilisateur de modifier les espacements sur mobile et sur ordinateur en utilisant deux colonnes distinctes semble être (à mon sens) le choix ergonomique le plus efficace. Pour cela, nous allons devoir ouvrir notre feuille de style « ResponsiveSpacer.scss » qui contient les règles de styles de notre bloc et nous permet de mettre en forme de bloc et coller style CSS suivant :

SCSS/src/ResponsiveSpacer/ResponsiveSpacerSave.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;
            }
        }
    }
}

Le style est importé par le fichier « ResponsiveSpacer.js » que nous avons défini plus tôt dans l’article.

Importer notre bloc

Notre bloc est désormais fonctionnel, il possède des attributs, un comportement fonctionne sur l’éditeur (en back-office), sur notre partie publique (en front office) et possède des règles de styles.
Il ne reste donc plus qu’à le déclarer dans notre extension, nous allons devoir l’importer dans notre fichier « index.js » à la racine de notre répertoire « src ».
Voici le code qu’il nous faut écrire dans le fichier « index.js » :

Javascript/src/index.js
import { registerBlockType } from '@wordpress/blocks';

import * as ResponsiveSpacer from './ResponsiveSpacer/ResponsiveSpacer';
export const listeDeBlocsCustomises = () => [
    ResponsiveSpacer,
]

const registerBlock = (block) => {
    if ( ! block ) {
        return;
    }
    const { name, settings } = block;
    registerBlockType( `pierrelejeune/${name}`, settings );
}
const registerPierrelejeuneBlocks = (blocks = listeDeBlocsCustomises()) => {
    blocks.forEach( registerBlock );
};
registerPierrelejeuneBlocks();

Si vous regardez bien, il est facile de comprendre comment ajouter un bloc customisé à notre extension, il suffit de saisir deux lignes dans notre fichier, une pour importer le fichier « associé » à notre bloc (ici, c’est la ligne 3) et une pour « instancier » notre bloc (ici, c’est la ligne 5).

Compiler l’extension

Une fois le code copié, nous pouvons compiler notre extension (builder en anglais) en ouvrant un terminal à la racine de notre extension et en tapant la commande npm run build suite à quoi nous pourrons pleinement profiter de notre espaceur responsive comme sur l’image animée suivante ou je peux insérer un espaceur responsive sans aucunes difficultés dans la mise en page de mon site.

Espaceur multi-supports sur Gutenberg

Félicitations ! Vous avez réussi.

Télécharger le projet

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