Créer un bloc Gutenberg personnalisé – Partie 7 : Créez vos propres composants personnalisés

Jusqu’à présent, dans cette série de didacticiels, nous avons écrit tout le code dans registerBlockType()la editfonction de. Il est tout à fait possible, et souvent recommandé, d’affecter à la place la modification à un composant distinct. Ce faisant, nous pouvons utiliser des fonctionnalités telles que l’état des composants et les méthodes de cycle de vie. C’est aussi beaucoup plus propre, lisible et fournit un code réutilisable !

Si vous n’êtes pas familiarisé avec la création de composants React ou les méthodes d’état et de cycle de vie, je vous recommande de lire d’abord le guide officiel de React sur ce sujet.

Définition d’un composant de classe pouredit

Vous pouvez définir un composant soit comme une fonction soit comme une classe. Avec un composant de classe, vous pouvez utiliser des fonctionnalités telles que les méthodes d’état et de cycle de vie. Cependant, dans les nouvelles versions de React (16+), vous pouvez utiliser les crochets React pour simuler les méthodes d’état et de cycle de vie à l’intérieur des composants de fonction. Mais dans ce didacticiel, nous nous concentrerons sur la création d’un composant de classe. Ce que nous avons créé jusqu’à présent dans cette série, "en ligne" dans registerBlockType()for editet save, sont des composants de fonction.

Pour définir un composant de classe, nous étendons WordPress’ Component(dans wp.elementpackage), exactement comme vous étendriez un composant de classe à React.Component.

Gardez à l’esprit que votre composant de classe doit inclure la fonction render(). Et à cause du fonctionnement de Javascript, votre classe doit être définie avant votre registerBlockType()appel (écrivez d’abord votre composant de classe dans le fichier, et conservez-le registerBlockType()après. Plus tard dans cet article, nous apprendrons comment séparer les composants dans des fichiers séparés, exporter et inclure leur).

Bref, comme ça :

Les accessoires de editsont automatiquement appliqués à notre composant. N’oubliez pas qu’un composant de classe dont vous avez besoin pour faire référence aux accessoires avec this.props. Il est courant dans le noyau de WordPress Gutenberg d’utiliser des composants séparés pour les editfonctions car ils contiennent le plus souvent beaucoup plus de code. La savefonction peut souvent être laissée à registerBlockType()moins qu’elle ne contienne également beaucoup de code.

En faisant cela, vous pouvez maintenant écrire votre composant comme vous le feriez avec React. Vous pouvez ajouter des fonctions, des constructeurs, des états et des méthodes de cycle de vie.

Voici le code auquel nous nous sommes retrouvés à la dernière étape, converti en un composant de classe :

Si vous avez déstructuré attributeset setAttributesà partir d’accessoires comme nous l’avons fait, tout ce que vous devez changer lorsque vous passez à un composant de classe séparé est de changer une ligne ; #9de propsà this.props. Tout le code fonctionnera comme avant sans rien réparer d’autre. C’est la beauté de la déstructuration. Si vous ne l’avez pas déstructuré et que vous vous y êtes référé props.attributesdirectement, par exemple, vous devrez ajouter this.devant toutes les références individuelles à attributeset setAttributespartout.

Commençons à faire des choses que nous pouvons maintenant faire avec un composant de classe !

Définir les fonctions etthis

Certes, oui, vous pouvez définir des fonctions à partir du editcomposant de fonction, avant d’appeler return. Mais personnellement, j’ai toujours préféré séparer les fonctionnalités par la logique. Je trouve préférable de séparer les fonctions à des fins logiques et autres en dehors de la fonction responsable du rendu de la sortie. Certaines personnes préfèrent également appeler des fonctions dans des événements, au lieu de les faire en ligne comme nous l’avons fait jusqu’à présent (setAttributes()par onChangeexemple).

À l’heure actuelle, notre code contient deux choses qui pourraient être bénéfiques pour passer aux fonctions ; InspectorControlset BlockControls. Cela raccourcira returnconsidérablement notre et rendra notre code plus facile à lire.

Nous définissons deux fonctions qui renvoient le InspectorControlsbloc entier et le BlockControlsbloc entier. En utilisant les fonctions fléchées (functionName =() => { ... }), nous avons un accès complet à thispour obtenir des accessoires. Si vous n’avez pas fait la dernière partie de l’étape 1 – configurer Babel avec les syntaxes les plus récentes, vous obtiendrez des erreurs de compilation. Vous devrez recourir à la création d’un constructeur et d’une liaison thispour chaque fonction. Vous pouvez en savoir plus sur la manipulation thisau début de la page FAQ de React.

Rappelez-vous également que parce que nous sommes dans une classe maintenant, vous devez appeler toutes ses fonctions avec this.devant.

Notez que j’ai exclu le contenu réel de InspectorControlset BlockControlspour garder le code plus court. Rien dans leur code ne doit changer.

Nous utilisons également le fait que l’ returninstruction peut également renvoyer un tableau. Tout dans le tableau sera rendu comme d’habitude dans l’ordre dans lequel ils se trouvent. Cela nous permet d’appeler facilement des fonctions directement à l’intérieur de l’ returninstruction.

Vous pouvez évidemment également définir des méthodes de cycle de vie, telles que componentDidMount(). Il n’y a aucune différence à faire cela dans les composants Gutenberg que dans React.

Constructeur et état d’utilisation

Essayons d’implémenter l’état dans notre composant. Gardez à l’esprit que l’état n’est que quelque chose de stocké temporairement dans notre composant de classe et n’est enregistré nulle part, comme dans les attributs. C’est juste pour garder le contrôle de – enfin – l’état de votre composant. Les utilisations courantes de l’état consistent à utiliser l’état comme indicateur d’état en attendant le retour d’un appel asynchrone, à conserver le score de quelque chose de temporaire avant de l’enregistrer dans un attribut ou à implémenter des "modes de prévisualisation/édition" de bloc.

Vous vous référez à l’état et à l’état de mise à jour comme dans React ; avec this.stateet setState(). Normalement, vous initialisez l’état dans le constructeur. Et en ce qui concerne la définition d’un constructeur – c’est exactement comme dans React – n’oubliez pas de passer propset de faire super(props)aussi. Bref:

class FirstBlockEdit extends Component {
    constructor(props) {
        super(props);
 
        this.state = {
            example: 1
        }
    }
 
    render() {
        this.setState({ example: 2 });
        console.log(this.state.example);
        ...

Bascule d’édition/d’aperçu du mode bloc

Utilisons ce que nous avons appris à l’étape précédente dans les barres d’outils pour créer un "sélecteur de mode" pour notre bloc. Nous implémentons une barre d’outils avec un bouton qui bascule l’état entre le mode aperçu et le mode édition. En mode édition, le bloc obtient les deux composants RichText comme d’habitude. Mais lors du passage en mode aperçu, nous avons désactivé l’édition et rendu la sortie du bloc.

Nous créons d’abord un constructeur et configurons l’état avec une propriété booléenne ; editModequi commence par true. Le super(props)est nécessaire lors de la définition d’un constructeur dans un composant React basé sur une classe.

class FirstBlockEdit extends Component {
    constructor(props) {
        super(props);
        this.state = {
            editMode: true
        }
    }
    ...

Dans notre fonction de sortie des barres d’outils, nous modifions le bouton personnalisé que nous avons créé précédemment (qui ne fait que console.logquelque chose en cliquant dessus). Sur sa onClickprop, nous appelons setState()et annulons la editModevaleur booléenne actuelle. Pour faciliter la compréhension de l’utilisateur, nous basculons également entre l’icône et l’étiquette du bouton. Par exemple, lorsque le mode de prévisualisation est actif, le bouton affiche l’étiquette "Modifier" et une icône en forme de crayon qui est généralement acceptable comme modification.

Et enfin, dans la méthode de rendu principale de notre bloc, nous pouvons faire ce que nous voulons. Cette partie dépend vraiment de vous – vous faites la même chose que nous avons fait avec l’étiquette et l’icône sur le bouton ci-dessus. Nous ajoutons deux blocs de sortie, un if this.state.editModeis true(qui devrait être les composants modifiables habituels RichText), et un autre if it’s false.

À titre d’exemple, j’utilise deux composants WordPress de wp.components; Placeholderet Disabledpour le mode de prévisualisation. Le Placeholdercomposant place votre bloc dans une jolie boîte grise, ce qui indique très clairement qu’il n’est pas modifiable. Gardez à l’esprit qu’il est livré avec un style, donc si vous vouliez un aperçu parfait, cela pourrait ne pas être pour vous. Et Disabledj’enveloppe également tout dans un composant qui rend tout à l’intérieur non modifiable, non cliquable et non déplaçable. Voici notre nouvelle render()fonction dans notre composant :

J’utilise également un composant Fragment( wp.elementpackage) qui est le même que React.Fragment. Si vous ne le connaissez pas, nous encapsulons la sortie à l’intérieur lorsque nous ne voulons pas ajouter d’encapsuleurs HTML supplémentaires inutiles. Dans React, tout doit avoir un nœud racine. Lorsque le mode d’édition est actif (ligne #13), nous produisons deux RichTextcomposants l’un après l’autre, nous avons donc besoin d’un nœud racine autour d’eux.

Lorsque le mode aperçu est actif (ligne #29), nous affichons les RichTextvaleurs des deux composants. Comme nous le faisons dans save, nous utilisons RichText.Contentpour renvoyer leurs valeurs au lieu du petit éditeur.

Le composant Placeholderest disponible dans le style flex et par défaut avec la ligne flex-direction. Fournir truedans l’accessoire le isColumnLayoutchange en colonne flex-direction (donc tout s’empile). Mais comme mentionné précédemment, vous voudrez peut-être ignorer ce composant et plutôt générer votre aperçu exactement comme il le serait dans le frontend.

Et avec cela, nous avons un basculeur de prévisualisation/édition en mode bloc. Évidemment, vous pouvez ajuster le contenu du "mode d’édition" pour afficher par exemple les entrées de contrôle ou autres.

Vous pouvez créer autant de composants que vous le souhaitez, vous n’êtes pas limité à n’en avoir qu’un pour la editfonction! Créez simplement plus de composants et incluez-les dans une returndéclaration. C’est l’idée de React, en fait – construire des morceaux de code encapsulés, chacun gérant éventuellement son propre état et les combinant pour créer des interfaces utilisateur complexes.