Dans cet article, nous apprendrons comment ajouter les barres d’outils de WordPress à notre bloc, c’est-à-dire pour l’alignement et l’alignement des blocs. Nous apprendrons également à ajouter nos propres barres d’outils avec nos propres boutons pour effectuer des actions personnalisées.
Ajout de barres d’outils
Afin d’ajouter quelque chose à la barre d’outils de notre bloc, nous devrons encapsuler ce que nous voulons dans un composant appelé BlockControls(from wp.blockEditor). À l’intérieur de ce composant, nous pouvons ajouter l’un des composants WordPress pour les barres d’outils standard que nous connaissons à partir d’autres blocs (par exemple l’alignement) ou nous pouvons ajouter notre propre barre d’outils.
Par défaut, un bloc aura une barre d’outils contenant uniquement l’icône du bloc (pour la fonctionnalité Transformer en) et le menu du bloc pour, par exemple, supprimer le bloc. Nous ne pouvons pas les supprimer, mais nous pouvons ajouter nos propres boutons et barres d’outils entre les deux.
Cependant, certains composants WordPress ajouteront eux-mêmes leurs propres barres d’outils. À l’heure actuelle, notre bloc affiche une barre d’outils pour la mise en forme du texte provenant du RichTextcomposant que nous avons ajouté.
Ajout d’une barre d’outils d’alignement de blocs
La barre d’outils d’alignement des blocs existe sur pratiquement tous les types de blocs WordPress, alors ajoutons-la également à notre bloc. Dans les coulisses, il existe un composant BlockAlignmentToolbarque nous pourrions ajouter, mais je recommande de ne pas le faire. Son utilisation nécessite de gérer manuellement les classes pour l’alignement des blocs et de s’assurer que le bloc étend sa largeur dans l’éditeur lorsque vous choisissez "large largeur" ou "pleine largeur". Heureusement, WordPress a rendu sa mise en œuvre très facile, entièrement automatique.
PS: Le thème actif doit activement avoir ajouté un support de thème pour ces deux alignements de blocs. Vous pouvez ajouter un support pour ceux-ci en ayant add_theme_support('align-wide')dans le after_setup_themecrochet.
Nous pouvons ajouter une nouvelle propriété à notre configuration d’objet dans registerBlockType(), appelée supports. Il existe quelques autres fonctionnalités, mais ce qui nous intéresse ici, c’est align. Nous pouvons soit configurer alignpour trueajouter tous les alignements possibles, soit fournir un tableau précis des alignements que nous autorisons pour notre bloc.
Ce qui nous donne ceci dans l’éditeur :
Si vous vouliez par exemple empêcher quiconque d’utiliser Wide Width ou Full Width, vous pouvez fournir un tableau et exclure ces deux éléments. Les noms des alignements de blocs sont les suivants: left, right, center, wide, et full.
supports: {
align: ['left', 'right', 'center']
},Besoin d’un alignement par défaut ?
Par défaut, le bloc n’obtient aucun alignement de bloc. Si vous le souhaitez, vous pouvez définir une valeur par défaut en créant un attribut avec la clé align, définissez le type sur stringet définissez la valeur par défaut ici. WordPress connectera automatiquement cet attribut à l’alignement du bloc.
attributes: {
align: {
type: 'string',
default: 'center'
}
},
supports: {
align: true
},Avec cela, chaque fois qu’un nouveau bloc de notre type est créé, l’alignement de bloc par défaut est centré.
Désordre de style d’alignement de bloc ? Pas notre faute
Remarque : Le style de bloc par défaut de WordPress perturbera le flux de votre contenu de publication lors de l’utilisation de l’alignement de bloc gauche et droit. La même chose se produit également avec d’autres types de blocs de WordPress et n’est pas exclusivement le problème de notre bloc. Cela est dû à l’ajout de float à l’élément, ce qui réduit l’élément parent. Croyez-moi, j’ai essayé de construire le bloc pour éviter ce problème. La seule chose que j’ai trouvée qui fonctionne correctement sans perturber les autres alignements de blocs est d’ajouter un style à l’éditeur et d’ajuster le style flottant.
Quoi qu’il en soit, WordPress a rendu assez facile la mise en œuvre de l’alignement des blocs. Regardons maintenant les autres barres d’outils que nous pouvons utiliser.
Ajout d’une barre d’outils d’alignement de texte
Si vous préférez la barre d’outils pour l’alignement du texte, vous pouvez le faire au lieu de l’alignement des blocs – dans cette barre d’outils, nous n’avons que l’alignement à gauche, au centre et à droite. En fait, vous pouvez utiliser à la fois l’alignement du texte et l’alignement des blocs – ils fonctionnent séparément. Afin de ne pas confondre les utilisateurs, vous pouvez par exemple ajouter uniquement la prise en charge de l’alignement de bloc large et pleine largeur, et utiliser la barre d’outils d’alignement de texte pour contrôler l’alignement à gauche, au centre ou à droite. En faisant cela, vous évitez le problème mentionné ci-dessus avec le flux de blocs dans l’éditeur. C’est à vous de décider comment vous voulez que votre bloc fonctionne.
WordPress a un composant pour sortir la barre d’outils d’alignement du texte, mais aucune gestion automatique de l’ajout des bonnes classes pour aligner le contenu – à la fois dans l’éditeur et dans le frontend (pour autant que j’ai trouvé au moins !). Nous devons ajouter et mettre à jour manuellement un attribut pour l’alignement du texte.
Ajout BlockControlsetAlignmentToolbar
Ajoutons enfin BlockControlsà notre editfonction pour notre sortie dans la barre d’outils. Le composant pour l’alignement du texte provient AlignmentToolbarde wp.blockEditorpackage.
Notez que j’ai exclu le contenu de tout ce que nous avons créé à InspectorControlsl’étape précédente pour raccourcir le code.
Entre les lignes #37se #42trouve l’intégralité du contenu de notre barre d’outils (à l’exception de l’alignement des blocs automatiquement ajouté par la supportspropriété et de la mise en forme du texte ajoutée par nos RichTextcomposants). Nous utilisons BlockControlspour accéder à la barre d’outils, et à l’intérieur nous ajoutons le AlignmentToolbarcomposant.
Comme nous l’avons fait plusieurs fois avec des entrées, nous fournissons un valueaccessoire pour afficher la valeur enregistrée et un onChangeaccessoire pour mettre à jour notre attribut au AlignmentToolbarcomposant. L’attribut que nous utiliserons pour stocker l’alignement de texte choisi est défini comme textAlignmentet doit être de type string. Comme d’habitude, vous pouvez fournir un defaultpour vous assurer que les blocs nouvellement créés obtiennent un alignement par défaut.
Afin de s’assurer que le bloc génère à la fois les informations d’alignement et est également stylé correctement (nous voyons donc l’alignement du changement de texte) à la fois dans l’éditeur et dans le frontend, nous devons configurer manuellement la bonne classe sur la div d’emballage. Dans les deux editet saveje définis une variable qui vérifie si attributes.textAlignmentest défini. Si c’est le cas, je construis le nom de la classe en suivant les normes de WordPress pour les alignements de texte, qui est "has-text-align-(left|center|right)". Avec cette classe, WordPress appliquera son style à notre bloc et s’assurera que notre bloc est visuellement correctement aligné, à la fois dans l’éditeur et le frontend.
Ajout de barres d’outils personnalisées avec nos propres boutons
Vous pouvez également ajouter vos propres boutons dans la barre d’outils pour faire ce que vous voulez en cliquant dessus. Pour ce faire, vous voudrez ajouter le composant Toolbaret à l’intérieur de cet élément ajouter un IconButton(les deux dans le wp.componentspackage). Le tout à l’intérieur BlockControlsbien sûr.
Remarque: Selon WordPress, le journal des modifications de Gutenberg IconButtonest obsolète au profit de l’utilisation de Button. Cependant, je n’arrive pas à faire apparaître une icône en utilisant le Buttoncomposant, peu importe ce que je fais, même s’il est censé le prendre en charge. Donc à partir de maintenant j’utiliserai IconButton.
Vous pouvez évidemment combiner plusieurs composants de barre d’outils dans BlockControls. Avec le code ci-dessous, nous ajoutons la barre d’outils d’alignement du texte et notre barre d’outils personnalisée avec un bouton après.
Le composant IconButton accepte une icône dashicon WordPress ou un SVG dans le prop icon. Nous pouvons fournir d’autres accessoires tels que classNameet label(apparaîtra dans l’info-bulle lorsque vous survolerez le bouton). Le prop qui nous intéresse le plus est évidemment le onClickprop qui se déclenche lorsque le bouton est cliqué. Ici, nous pouvons fournir une fonction et faire essentiellement ce que nous voulons. Les possibilités sont infinies et dépendent de ce que vous voulez faire. Dans le code ci-dessus, je console simplement quelque chose lorsque le bouton est cliqué. Au fur et à mesure que nous progressons dans cette série de didacticiels, vous aurez probablement des idées sur la façon de faire en sorte que votre bouton personnalisé fasse ce que vous voulez qu’il fasse.
C’est ce que nous avons fait jusqu’à présent. Dans la prochaine étape de la série, nous commencerons à examiner des éléments plus avancés et nous apprendrons à créer nos propres composants pour utiliser l’état et d’autres avantages.