Créer un bloc Gutenberg personnalisé – Partie 5 : Paramètres de l’inspecteur
Dans les étapes précédentes, nous avons appris les bases du rendu des composants et des attributs dans un bloc. Dans cette étape, nous allons nous concentrer sur ce que WordPress (au moins dans le code) appelle Inspector: la barre latérale sur le côté droit de l’éditeur. Nous aborderons quelques nouveaux composants qu’il est logique de placer dans la barre latérale et comment les gérer.
Composant inspecteur/barre latérale
Pour insérer vos paramètres personnalisés et HTML dans la barre latérale de l’inspecteur, vous encapsulez tout dans un composant appelé InspectorControls. Tout ce que vous mettez à l’intérieur de ce composant sera affiché dans la barre latérale et non à l’intérieur du bloc/éditeur lui-même. Vous pouvez essentiellement mettre le composant et son contenu partout dans le retour de la editfonction.
En dehors de cela, vous géreriez les paramètres à l’intérieur de la barre latérale comme ils l’étaient à l’intérieur du bloc. Chaque paramètre nécessite un attribut, et vous chargez et mettez à jour les attributs de la même manière.
Voyons d’abord à quoi ressemble la barre latérale de notre bloc (lorsque notre bloc est actif dans l’éditeur), en nous basant sur le code que nous avons trouvé à l’étape précédente.
Tous les blocs afficheront par défaut l’icône, le nom et la description du bloc, ainsi que la section Avancé – réduite. Dans Advanced, vous trouverez une entrée de texte pour fournir une classe CSS pour le bloc.
Ajout d’une section de barre latérale et de certains paramètres
La barre latérale est divisée en sections (appelées panneaux dans le code), et pour une conception et une fonctionnalité optimales (y compris la fonctionnalité de réduction ouverte), nous devons utiliser les composants de WordPress pour générer correctement les panneaux.
Utilisez le composant PanelBodypour ajouter une section (celles que vous pouvez ouvrir ou réduire), trouvé dans le wp.componentspackage. Le composant accepte quelques accessoires, par exemple pour le titre et si le panneau doit être ouvert ou fermé par défaut. Vous pouvez également fournir une classe personnalisée, une icône et attacher une fonction d’événement au déclencheur d’ouverture-fermeture.
Dans PanelBodyWordPress recommande ensuite d’utiliser le PanelRowcomposant qui agit comme des conteneurs génériques dans le panneau – pour assurer la rationalisation de la conception. Ce composant applique automatiquement un style de marge et de ligne flexible pour votre contenu. En raison du flex-direction: rowstyle " ", vous devez envelopper chaque paramètre dans un seul PanelRow. Ou vous pouvez l’ignorer complètement et prendre la responsabilité de le styler vous-même avec des divs et autres.
Ajout d’un panneau et de paramètres
Ajoutons un panneau de barre latérale pour notre bloc avec quelques paramètres à l’intérieur, juste pour le voir en pratique. Nous allons ajouter un contrôle à bascule, une entrée de sélection, un sélecteur de couleurs et une case à cocher – juste pour acquérir une certaine expérience avec différents types de composants d’entrée. J’ai laissé le contenu du bloc (avec les deux RichTexts) et la savefonction comme avant.
Comme toujours, nous commençons par déstructurer les composants et la fonction que nous voulons utiliser. À attributesl’intérieur registerBlockType(), nous définissons un attribut par entrée et correspondons au type – par exemple, le contrôle bascule attend un booléen et parce que les valeurs de la liste déroulante sont des chaînes, cet attribut doit également être une chaîne de type.
À la ligne, #41nous démarrons le InspectorControlscomposant, et tout, depuis ce point jusqu’à la ligne #80, apparaîtra dans la barre latérale. Le reste apparaîtra dans l’éditeur lui-même, et je n’y ai apporté aucune modification.
À l’ intérieur, nous créons d’abord un panneau avec PanelBodyet avec la prop initialOpendéfinie sur true, nous disons à Gutenberg que ce panneau doit être ouvert par défaut. Et ensuite, c’est à nous de décider quoi ajouter à l’intérieur de chacun PanelRow.
Pour le composant, ToggleControlnous utilisons les mêmes props que nous avons fait auparavant avec les entrées de texte, sauf qu’au lieu de la prop, valuenous fournissons la valeur de l’attribut à l’intérieur de la prop checked. Cela s’applique à toutes les entrées qui attendent un attribut coché en HTML brut, par exemple les cases à cocher. Pour les boutons radio, vous utiliserez le prop selected, car c’est également ce que vous utiliserez en HTML brut. N’oubliez pas que l’attribut de cette entrée doit être de type boolean.
Quant à la CheckboxControlcase à cocher lors de la gestion d’un singulier, elle fonctionne exactement de la même manière que ToggleControl– elle renvoie un booléen, qu’elle soit cochée ou non.
Le SelectControlgénère une liste déroulante de sélection et attend les choix possibles sous forme de tableau dans le prop options. Chaque élément doit être un objet avec les propriétés labelet value. Il en va de même pour les cases à cocher et les boutons radio (RadioControl). Dans des circonstances normales, vous généreriez probablement les choix en tant que variable en dehors de la sortie HTML.
Vous remarquerez peut-être que le ColorPickerfonctionne un peu différemment des autres car il s’agit d’un composant plus complexe et non d’une entrée HTML standard. Fournissez l’accessoire colorpour la couleur enregistrée, et au lieu de onChange(se déclenche une fois en cliquant mais aussi à chaque fois que la valeur est modifiée pendant le glissement – ce qui peut entraîner de nombreux incendies), utilisez onChangeComplete. Le prop renvoyé dans cet événement est également un objet dans lequel nous devons décider quelle partie nous voulons enregistrer dans notre attribut. Dans cet exemple, nous voulons enregistrer la valeur hexadécimale (sans alpha/opacité), donc à l’intérieur, setAttributes()nous extrayons la hexpropriété de l’ colorobjet renvoyé. C’est aussi pourquoi nous ajoutons la propriétédisableAlphaquant à supprimer l’interface utilisateur du canal alpha (pour contrôler l’opacité) car cela n’a aucun sens de l’offrir à l’utilisateur lorsque nous n’enregistrons jamais la valeur d’opacité.
Chacun des composants a un labelaccessoire disponible à l’exception du sélecteur de couleurs. Si vous souhaitez afficher une étiquette ou du texte avant, vous devrez modifier le code HTML ou le style pour vous assurer qu’il est beau.
Vous pouvez évidemment ajouter autant de panneaux que vous le souhaitez, il vous suffit d’ajouter un autre PanelBodycomposant après le précédent.
Si vous souhaitez en savoir plus sur l’ajout de paramètres de bloc, j’ai des didacticiels séparés pour des paramètres et des composants plus complexes pour Inspector. Comment ajouter une sélection d’image et comment ajouter un panneau de paramètres de couleur.
Manutentionsave
J’ai laissé la savefonction telle qu’elle était avant. C’est à vous de décider et tout dépend de ce que les paramètres contrôlent dans la sortie. Vous savez déjà comment obtenir les valeurs de chaque paramètre. Par exemple, supposons que l’attribut booléen activateLaserscontrôle le rendu ou non d’un élément HTML personnalisé. Si l’attribut est trueune div doit être sortie, sinon non. ifVous pouvez le faire avec la vérification if-check traditionnelle ou utiliser la ligne et l’ &&opérateur de JSX. En savoir plus à ce sujet dans le guide de React pour le rendu conditionnel.
Parce que nous utilisons RichTextcette sortie ne serait pas visible dans l’éditeur, mais elle apparaîtra dans le frontend.
Vous trouverez plus de composants dans le wp.components repo Github. La plupart de ces dossiers devraient vous fournir un fichier Lisez-moi avec de la documentation sur la façon de l’utiliser. J’ai appris la plupart de cela en regardant dans ce dépôt et aussi sur les composants de base de WordPress comment ils l’ont fait.
Dans la prochaine étape de la série, nous nous concentrerons sur la façon de contrôler la barre d’outils du bloc. Nous allons apprendre à gérer par exemple l’alignement d’un bloc et à ajouter des boutons personnalisés à la barre d’outils.