BlockControls<\/code>(from wp.blockEditor<\/code>). \u00c0 l’int\u00e9rieur de ce composant, nous pouvons ajouter l’un des composants WordPress pour les barres d’outils standard que nous connaissons \u00e0 partir d’autres blocs (par exemple l’alignement) ou nous pouvons ajouter notre propre barre d’outils.<\/p>\nPar d\u00e9faut, un bloc aura une barre d’outils contenant uniquement l’ic\u00f4ne du bloc (pour la fonctionnalit\u00e9 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.<\/p>\n
Cependant, certains composants WordPress ajouteront eux-m\u00eames leurs propres barres d’outils. \u00c0 l’heure actuelle, notre bloc affiche une barre d’outils pour la mise en forme du texte provenant du RichText<\/code>composant que nous avons ajout\u00e9.<\/p>\n![\"Cr\u00e9er](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153353-61e50c7785e80.png\")
<\/a><\/p>\nAjout d’une barre d’outils d’alignement de blocs<\/h2>\n
La barre d’outils d’alignement des blocs existe sur pratiquement tous les types de blocs WordPress, alors ajoutons-la \u00e9galement \u00e0 notre bloc. Dans les coulisses, il existe un composant BlockAlignmentToolbar<\/code>que nous pourrions ajouter, mais je recommande de ne pas le faire. Son utilisation n\u00e9cessite de g\u00e9rer manuellement les classes pour l’alignement des blocs et de s’assurer que le bloc \u00e9tend sa largeur dans l’\u00e9diteur lorsque vous choisissez "large largeur" \u200b\u200bou "pleine largeur". Heureusement, WordPress a rendu sa mise en \u0153uvre tr\u00e8s facile, enti\u00e8rement automatique.<\/p>\nPS: Le th\u00e8me actif doit activement avoir ajout\u00e9 un support de th\u00e8me pour ces deux alignements de blocs. Vous pouvez ajouter un support pour ceux-ci en ayant add_theme_support('align-wide')<\/code>dans le after_setup_theme<\/code>crochet.<\/p>\nNous pouvons ajouter une nouvelle propri\u00e9t\u00e9 \u00e0 notre configuration d’objet dans registerBlockType()<\/code>, appel\u00e9e supports<\/code>. Il existe quelques autres fonctionnalit\u00e9s, mais ce qui nous int\u00e9resse ici, c’est align<\/code>. Nous pouvons soit configurer align<\/code>pour true<\/code>ajouter tous les alignements possibles, soit fournir un tableau pr\u00e9cis des alignements que nous autorisons pour notre bloc.<\/p>\n...\nregisterBlockType('awp\/firstblock', {\n ...\n supports: {\n align: true\n },\n edit: (props) => {\n ...\n});<\/code><\/pre>\nCe qui nous donne ceci dans l’\u00e9diteur :<\/p>\n
![\"Cr\u00e9er](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153353-61e50c7967acd.png\")
<\/a><\/p>\nSi vous vouliez par exemple emp\u00eacher quiconque d’utiliser Wide Width ou Full Width, vous pouvez fournir un tableau et exclure ces deux \u00e9l\u00e9ments. Les noms des alignements de blocs sont les suivants: left<\/code>, right<\/code>, center<\/code>, wide<\/code>, et full<\/code>.<\/p>\nsupports: {\n align: ['left', 'right', 'center']\n},<\/code><\/pre>\nBesoin d’un alignement par d\u00e9faut\u00a0?<\/h3>\n
Par d\u00e9faut, le bloc n’obtient aucun alignement de bloc. Si vous le souhaitez, vous pouvez d\u00e9finir une valeur par d\u00e9faut en cr\u00e9ant un attribut avec la cl\u00e9 align<\/code>, d\u00e9finissez le type sur string<\/code>et d\u00e9finissez la valeur par d\u00e9faut ici. WordPress connectera automatiquement cet attribut \u00e0 l’alignement du bloc.<\/p>\nattributes: {\n align: {\n type: 'string',\n default: 'center'\n }\n},\nsupports: {\n align: true\n},<\/code><\/pre>\nAvec cela, chaque fois qu’un nouveau bloc de notre type est cr\u00e9\u00e9, l’alignement de bloc par d\u00e9faut est centr\u00e9.<\/p>\n
D\u00e9sordre de style d’alignement de bloc\u00a0? Pas notre faute<\/h3>\n
Remarque :<\/strong> Le style de bloc par d\u00e9faut de WordPress perturbera le flux de votre contenu de publication lors de l’utilisation de l’alignement de bloc gauche et droit. La m\u00eame chose se produit \u00e9galement avec d’autres types de blocs de WordPress et n’est pas exclusivement le probl\u00e8me de notre bloc. Cela est d\u00fb \u00e0 l’ajout de float \u00e0 l’\u00e9l\u00e9ment, ce qui r\u00e9duit l’\u00e9l\u00e9ment parent. Croyez-moi, j’ai essay\u00e9 de construire le bloc pour \u00e9viter ce probl\u00e8me. La seule chose que j’ai trouv\u00e9e qui fonctionne correctement sans perturber les autres alignements de blocs est d’ajouter un style \u00e0 l’\u00e9diteur et d’ajuster le style flottant.<\/p>\n![\"Cr\u00e9er](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153353-61e50c7baa1f0.png\")
<\/a><\/p>\nQuoi qu’il en soit, WordPress a rendu assez facile la mise en \u0153uvre de l’alignement des blocs. Regardons maintenant les autres barres d’outils que nous pouvons utiliser.<\/p>\n
Ajout d’une barre d’outils d’alignement de texte<\/h2>\n
Si vous pr\u00e9f\u00e9rez 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 \u00e0 gauche, au centre et \u00e0 droite. En fait, vous pouvez utiliser \u00e0 la fois l’alignement du texte et l’alignement des blocs – ils fonctionnent s\u00e9par\u00e9ment. 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\u00f4ler l’alignement \u00e0 gauche, au centre ou \u00e0 droite. En faisant cela, vous \u00e9vitez le probl\u00e8me mentionn\u00e9 ci-dessus<\/strong> avec le flux de blocs dans l’\u00e9diteur. C’est \u00e0 vous de d\u00e9cider comment vous voulez que votre bloc fonctionne.<\/p>\nWordPress 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 – \u00e0 la fois dans l’\u00e9diteur et dans le frontend (pour autant que j’ai trouv\u00e9 au moins !). Nous devons ajouter et mettre \u00e0 jour manuellement un attribut pour l’alignement du texte.<\/p>\n
Ajout BlockControls<\/code>etAlignmentToolbar<\/code><\/h3>\nAjoutons enfin BlockControls<\/code>\u00e0 notre edit<\/code>fonction pour notre sortie dans la barre d’outils. Le composant pour l’alignement du texte provient AlignmentToolbar<\/code>de wp.blockEditor<\/code>package.<\/p>\nconst { registerBlockType } = wp.blocks;\nconst { RichText, InspectorControls, BlockControls, AlignmentToolbar } = wp.blockEditor;\nconst { ToggleControl, PanelBody, PanelRow, CheckboxControl, SelectControl, ColorPicker } = wp.components;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n title: 'My first block',\n category: 'common',\n icon: 'smiley',\n description: 'Learning in progress',\n keywords: ['example', 'test'],\n attributes: {\n myRichHeading: {\n type: 'string',\n },\n myRichText: {\n type: 'string',\n source: 'html',\n selector: 'p'\n },\n textAlignment: {\n type: 'string',\n }\n },\n supports: {\n align: ['wide', 'full']\n },\n edit: (props) => {\n const { attributes, setAttributes } = props;\n const alignmentClass = (attributes.textAlignment != null)? 'has-text-align-' + attributes.textAlignment: '';\n\u00a0\n return (<div className={alignmentClass}>\n <InspectorControls>\n ... \n <\/InspectorControls>\n <BlockControls>\n <AlignmentToolbar\n value={attributes.textAlignment}\n onChange={(newalign) => setAttributes({ textAlignment: newalign })}\n \/>\n <\/BlockControls>\n <RichText \n tagName=\"h2\"\n placeholder=\"Write your heading here\"\n value={attributes.myRichHeading}\n onChange={(newtext) => setAttributes({ myRichHeading: newtext })}\n \/>\n <RichText\n tagName=\"p\"\n placeholder=\"Write your paragraph here\"\n value={attributes.myRichText}\n onChange={(newtext) => setAttributes({ myRichText: newtext })}\n \/>\n <\/div>\n );\n\u00a0\n },\n save: (props) => { \n const { attributes } = props;\n\u00a0\n const alignmentClass = (attributes.textAlignment != null)? 'has-text-align-' + attributes.textAlignment: '';\n return (<div className={alignmentClass}>\n <RichText.Content \n tagName=\"h2\"\n value={attributes.myRichHeading}\n \/>\n <RichText.Content \n tagName=\"p\"\n value={attributes.myRichText}\n \/>\n {attributes.activateLasers && \n <div className=\"lasers\">Lasers activated<\/div>\n }\n <\/div>\n );\n }\n});<\/code><\/pre>\nNotez que j’ai exclu le contenu de tout ce que nous avons cr\u00e9\u00e9 \u00e0 InspectorControls<\/code>l’\u00e9tape pr\u00e9c\u00e9dente pour raccourcir le code.<\/p>\nEntre les lignes #37<\/code>se #42<\/code>trouve l’int\u00e9gralit\u00e9 du contenu de notre barre d’outils (\u00e0 l’exception de l’alignement des blocs automatiquement ajout\u00e9 par la supports<\/code>propri\u00e9t\u00e9 et de la mise en forme du texte ajout\u00e9e par nos RichText<\/code>composants). Nous utilisons BlockControls<\/code>pour acc\u00e9der \u00e0 la barre d’outils, et \u00e0 l’int\u00e9rieur nous ajoutons le AlignmentToolbar<\/code>composant.<\/p>\nComme nous l’avons fait plusieurs fois avec des entr\u00e9es, nous fournissons un value<\/code>accessoire pour afficher la valeur enregistr\u00e9e et un onChange<\/code>accessoire pour mettre \u00e0 jour notre attribut au AlignmentToolbar<\/code>composant. L’attribut que nous utiliserons pour stocker l’alignement de texte choisi est d\u00e9fini comme textAlignment<\/code>et doit \u00eatre de type string<\/code>. Comme d’habitude, vous pouvez fournir un default<\/code>pour vous assurer que les blocs nouvellement cr\u00e9\u00e9s obtiennent un alignement par d\u00e9faut.<\/p>\nAfin de s’assurer que le bloc g\u00e9n\u00e8re \u00e0 la fois les informations d’alignement et est \u00e9galement styl\u00e9 correctement (nous voyons donc l’alignement du changement de texte) \u00e0 la fois dans l’\u00e9diteur et dans le frontend, nous devons configurer manuellement la bonne classe sur la div d’emballage. Dans les deux edit<\/code>et save<\/code>je d\u00e9finis une variable qui v\u00e9rifie si attributes.textAlignment<\/code>est d\u00e9fini. 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 \u00e0 notre bloc et s’assurera que notre bloc est visuellement correctement align\u00e9, \u00e0 la fois dans l’\u00e9diteur et le frontend.<\/p>\nAjout de barres d’outils personnalis\u00e9es avec nos propres boutons<\/h3>\n
Vous pouvez \u00e9galement 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 Toolbar<\/code>et \u00e0 l’int\u00e9rieur de cet \u00e9l\u00e9ment ajouter un IconButton<\/code>(les deux dans le wp.components<\/code>package). Le tout \u00e0 l’int\u00e9rieur BlockControls<\/code>bien s\u00fbr.<\/p>\nRemarque<\/strong>: Selon WordPress, le journal des modifications de Gutenberg IconButton<\/code>est obsol\u00e8te au profit de l’utilisation de Button<\/code>. Cependant, je n’arrive pas \u00e0 faire appara\u00eetre une ic\u00f4ne en utilisant le Button<\/code>composant, peu importe ce que je fais, m\u00eame s’il est cens\u00e9 le prendre en charge. Donc \u00e0 partir de maintenant j’utiliserai IconButton<\/code>.<\/p>\nVous pouvez \u00e9videmment combiner plusieurs composants de barre d’outils dans BlockControls<\/code>. Avec le code ci-dessous, nous ajoutons la barre d’outils d’alignement du texte et notre barre d’outils personnalis\u00e9e avec un bouton apr\u00e8s.<\/p>\n<BlockControls>\n <AlignmentToolbar\n value={attributes.textAlignment}\n onChange={(newalign) => setAttributes({ textAlignment: newalign })}\n \/>\n <Toolbar>\n <IconButton\n label=\"My very own custom button\"\n icon=\"edit\"\n className=\"my-custom-button\"\n onClick={() => console.log('pressed button')}\n \/>\n <\/Toolbar>\n<\/BlockControls><\/code><\/pre>\n