Créer et définir des variables pour nos blocs customisés Gutenberg

Dans les deux articles précédents, nous avons vu comment créer une librairie de blocs customisés, définir un premier bloc (un espaceur multisupport en l’occurrence), modifier l’icône associée et lui définir un style personnalisé.
Ce bloc fonctionne très bien, il ajoute une zone vide de 100 pixels sur ordinateur et 50 pixels sur mobile ! Mais certaines situations demandent à intégrer des espacements de tailles différentes ce qui n’est pas possible actuellement avec notre bloc customisé. L’espaceur (non-multisupport) proposé par Gutenberg offre quant à lui la possibilité de faire varier la hauteur de l’espacement avec un système extrêmement simple, voyez plutôt.

Espaceur Gutenberg

Nous allons dans cet article découvrir comment définir et modifier des valeurs associées à nos blocs.

Attributs de blocs

Gutenberg offre un grand nombre de fonctionnalités aux développeurs afin de concevoir des blocs complexes pouvant répondre à de nombreuses demandes. Parmi toutes ses fonctionnalités, celle qui va nous intéresser le plus dans cet article et celle des attributs personnalisés. Vous vous souvenez de notre fichier « ResponsiveSpacer.js » où nous avons défini les composants principaux de notre bloc (son titre, sa description, etc…) ? Et bien, c’est dans ce même fichier que nous allons pouvoir transmettre des attributs à notre bloc, en utilisant l’identifiant attributes de Gutenberg.

Définir un attribut ?

Selon la complexité de votre bloc, vous pourriez avoir besoin de nombreux attributs. C’est pourquoi je vous invite tout particulièrement à mettre vos idées sur papier avant de commencer le développement de votre bloc et de définir le plus d’attributs possibles. Cela vous sera très utile aux longs termes.
Dans notre cas, la réflexion en amont est relativement simple, nous souhaitons réaliser un espaceur multisupports permettant de faire varier la hauteur de l’espacement sur mobile et sur ordinateur. Il va donc nous falloir deux valeurs ! La hauteur sur mobile et la hauteur sur ordinateur.

Gutenberg à besoin d’un identifiant et d’un type pour créer votre attribut, c’est le minimum pour qu’il puisse générer l’attribut demandé. Vous pouvez également renseigner une valeur par défaut ou les valeurs acceptées, vous trouverez la documentation officielle ici.

Nous pouvons désormais ouvrir notre fichier « ResponsiveSpacer.js » et définir nos deux attributs :

Javascript/src/ResponsiveSpacer/ResponsiveSpacer.js
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"
   },
},

Ces 10 lignes sont suffisantes pour que Gutenberg fasse le nécessaire et assigne deux attributs de type « string » (chaîne de caractère) à notre bloc avec comme valeur « 50px » et « 100px ».

Utiliser notre attribut

Nos attributs sont créés, c’est un bon début ! Il nous faut désormais les utiliser ! Pour cela, nous allons devoir récupérer nos deux attributs et les appliquer à notre bloc.

Ouvrez votre fichier « ResponsiveSpacerEdit.js » et remplacer le code déjà en place par le suivant :

Javascript/src/ResponsiveSpacer/ResponsiveSpacerEdit.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 ResponsiveSpacerEdit = ({setAttributes, attributes}) => { //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 (
        <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 ResponsiveSpacerEdit;

Le code n’est pas bien différent du précédent, il intègre simplement nos attributs désormais !
Si vous faites attention, vous verrez que la variable setAttributes et récupérer lors de la déclaration de notre bloc, mais elle n’est pas utilisée. Il s’agit en réalité d’une fonction permettant de modifier la valeur d’un attribut. C’est ce que nous allons utiliser pour laisser la possibilité à notre utilisateur de customiser la hauteur de son espacement.

Modifier un attribut

Il y a trois grandes parties dans Gutenberg. La zone de contenu qui vous permet de rédiger votre publication. La barre fixe en haut de l’éditeur qui vous permet d’accéder aux actions rapides (revenir sur WordPress, publier la publication, …). Enfin, la colonne de droite où se trouvent toutes les actions possibles sur Gutenberg relatives à votre publication ou au bloc sélectionné, cette colonne nous intéresse particulièrement, car comme expliqué, elle affiche les actions relatives à notre bloc sélectionné (voir l’image ci-dessous).

Aperçu de l'éditeur au clic sur l'espaceur

Lorsque nous utilisons un espaceur natif (non-multisupports), Gutenberg propose à l’utilisateur (dans la colonne de gauche toujours) de modifier la valeur de l’espacement. C’est ce qu’il faut reproduire pour notre bloc.

Les composants Gutenberg

Les éléments permettant d’inviter l’utilisateur à modifier l’état d’un bloc son appelé les « composants » (ou les « éditeurs de bloc ») sur Gutenberg. Ils sont nombreux et faciles d’utilisation, vous pouvez consulter le Github de Gutenberg pour en apprendre davantage sur les composants disponibles.

Celui qui nous intéresse dans notre cas, c’est un contrôleur pour modifier ou saisir du texte, car les attributs de notre espaceur multisupports sont des chaînes de caractères. Nous allons donc utiliser le composant « TextControl ».

Utiliser des composants

Reprenons notre fichier « ResponsiveSpacerEdit.js » et ajoutons-y nos composants.

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 } from '@wordpress/components'; // Récupération des composants utilisé pour notre bloc

Vous remarquerez qu’en plus du composant « TextControl » nous avons ajouté « InspectorControls » et « PanelBody »… « InspectorControls » nous permet d’utiliser la colonne de gauche de Gutenberg et « PanelBody » de réaliser des groupes de composants dans notre colonne.

Une fois nos composants appelés, nous devons les afficher, toujours dans le fichier « ResponsiveSpacerEdit.js », il faut adapter le rendu du bloc dans l’éditeur:

Javascript/src/ResponsiveSpacer/ResponsiveSpacerEdit.js
return (
    <>
        <InspectorControls>
            <PanelBody>
                <TextControl
                    label={"Hauteur de l'espacement sur ordinateur"}
                    value={desktopHeight}
                    onChange={(newDesktopHeight)=>setAttributes({desktopHeight: newDesktopHeight})}
                />
                <TextControl
                    label={"Hauteur de l'espacement sur mobile"}
                    value={mobileHeight}
                    onChange={(newMobileHeight)=>setAttributes({mobileHeight: newMobileHeight})}
                />
            </PanelBody>
        </InspectorControls>
        <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

Si vous faites attention, vous retrouverez nos composants d’édition de bloc, notre InspectorControls, notre PanelBody et notre TextControl.

Les composants TextControl prennent la valeur de nos attributs précédemment définis. Lorsque l’utilisateur essayera d’en modifier la valeur, nous utiliserons la méthode setAttributes pour modifier l’attribut sélectionné.

Nous sommes désormais en mesure de voir l’éditeur réagir en direct à nos modifications !

Espaceur multi-supports sur Gutenberg

Il est désormais temps de modifier notre fichier « ResponsiveSpacerSave.js » (pour rappel, c’est le fichier qui affiche notre bloc sur le front office, la partie « public » du site internet). Ouvrons le fichier « RepsonsiveSpacerSave.js » et copions le code suivant :

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; // Récupération des valeurs stockés pour nos attributs
    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;

Une fois le code copié, nous pouvons compiler notre extension et admirer le résultat sur notre site internet !

Félicitations ! Vous avez réussi.

Nous ferons prochainement une synthèse des trois derniers articles et ajouterons la possibilité de modifier les valeurs de notre espaceur avec des contrôleurs de redimensionnement (comme sur Gutenberg).

Télécharger le projet

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