InspectorControls<\/code>. Tout ce que vous mettez \u00e0 l’int\u00e9rieur de ce composant sera affich\u00e9 dans la barre lat\u00e9rale et non \u00e0 l’int\u00e9rieur du bloc\/\u00e9diteur lui-m\u00eame. Vous pouvez essentiellement mettre le composant et son contenu partout dans le retour de la edit<\/code>fonction.<\/p>\nEn dehors de cela, vous g\u00e9reriez les param\u00e8tres \u00e0 l’int\u00e9rieur de la barre lat\u00e9rale comme ils l’\u00e9taient \u00e0 l’int\u00e9rieur du bloc. Chaque param\u00e8tre n\u00e9cessite un attribut, et vous chargez et mettez \u00e0 jour les attributs de la m\u00eame mani\u00e8re.<\/p>\n
![\"Cr\u00e9er](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153127-61e50856030af.png\")
<\/a><\/p>\nVoyons d’abord \u00e0 quoi ressemble la barre lat\u00e9rale de notre bloc (lorsque notre bloc est actif dans l’\u00e9diteur), en nous basant sur le code que nous avons trouv\u00e9 \u00e0 l’\u00e9tape pr\u00e9c\u00e9dente.<\/p>\n
Tous les blocs afficheront par d\u00e9faut l’ic\u00f4ne, le nom et la description du bloc, ainsi que la section Avanc\u00e9 \u2013 r\u00e9duite. Dans Advanced, vous trouverez une entr\u00e9e de texte pour fournir une classe CSS pour le bloc.<\/p>\n
Ajout d’une section de barre lat\u00e9rale et de certains param\u00e8tres<\/h2>\n
La barre lat\u00e9rale est divis\u00e9e en sections (appel\u00e9es panneaux dans le code), et pour une conception et une fonctionnalit\u00e9 optimales (y compris la fonctionnalit\u00e9 de r\u00e9duction ouverte), nous devons utiliser les composants de WordPress pour g\u00e9n\u00e9rer correctement les panneaux.<\/p>\n
Utilisez le composant PanelBody<\/code>pour ajouter une section (celles que vous pouvez ouvrir ou r\u00e9duire), trouv\u00e9 dans le wp.components<\/code>package. Le composant accepte quelques accessoires, par exemple pour le titre et si le panneau doit \u00eatre ouvert ou ferm\u00e9 par d\u00e9faut. Vous pouvez \u00e9galement fournir une classe personnalis\u00e9e, une ic\u00f4ne et attacher une fonction d’\u00e9v\u00e9nement au d\u00e9clencheur d’ouverture-fermeture.<\/p>\nDans PanelBody<\/code>WordPress recommande ensuite d’utiliser le PanelRow<\/code>composant qui agit comme des conteneurs g\u00e9n\u00e9riques 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: row<\/code>style " ", vous devez envelopper chaque param\u00e8tre dans un seul PanelRow<\/code>. Ou vous pouvez l’ignorer compl\u00e8tement et prendre la responsabilit\u00e9 de le styler vous-m\u00eame avec des divs et autres.<\/p>\nAjout d’un panneau et de param\u00e8tres<\/h3>\n
Ajoutons un panneau de barre lat\u00e9rale pour notre bloc avec quelques param\u00e8tres \u00e0 l’int\u00e9rieur, juste pour le voir en pratique. Nous allons ajouter un contr\u00f4le \u00e0 bascule, une entr\u00e9e de s\u00e9lection, un s\u00e9lecteur de couleurs et une case \u00e0 cocher – juste pour acqu\u00e9rir une certaine exp\u00e9rience avec diff\u00e9rents types de composants d’entr\u00e9e. J’ai laiss\u00e9 le contenu du bloc (avec les deux RichText<\/code>s) et la save<\/code>fonction comme avant.<\/p>\nconst { registerBlockType } = wp.blocks;\nconst { RichText, InspectorControls } = 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 toggle: {\n type: 'boolean',\n default: true\n },\n favoriteAnimal: {\n type: 'string',\n default: 'dogs'\n },\n favoriteColor: {\n type: 'string',\n default: '#DDDDDD'\n },\n activateLasers: {\n type: 'boolean',\n default: false\n }\n },\n edit: (props) => { \n const { attributes, setAttributes } = props;\n return (<div>\n <InspectorControls>\n <PanelBody\n title=\"Most awesome settings ever\"\n initialOpen={true}\n >\n <PanelRow>\n <ToggleControl\n label=\"Toggle me\"\n checked={attributes.toggle}\n onChange={(newval) => setAttributes({ toggle: newval })}\n \/>\n <\/PanelRow>\n <PanelRow>\n <SelectControl\n label=\"What's your favorite animal?\"\n value={attributes.favoriteAnimal}\n options={[\n {label: \"Dogs\", value: 'dogs'},\n {label: \"Cats\", value: 'cats'},\n {label: \"Something else\", value: 'weird_one'},\n ]}\n onChange={(newval) => setAttributes({ favoriteAnimal: newval })}\n \/>\n <\/PanelRow>\n <PanelRow>\n <ColorPicker\n color={attributes.favoriteColor}\n onChangeComplete={(newval) => setAttributes({ favoriteColor: newval.hex })}\n disableAlpha\n \/>\n <\/PanelRow>\n <PanelRow>\n <CheckboxControl\n label=\"Activate lasers?\"\n checked={attributes.activateLasers}\n onChange={(newval) => setAttributes({ activateLasers: newval })}\n \/>\n <\/PanelRow>\n <\/PanelBody>\n <\/InspectorControls>\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 },\n save: (props) => { \n const { attributes } = props;\n return (<div>\n <RichText.Content \n tagName=\"h2\"\n value={attributes.myRichHeading}\n \/>\n <RichText.Content \n tagName=\"p\"\n value={attributes.myRichText}\n \/>\n <\/div>\n );\n }\n});<\/code><\/pre>\nComme toujours, nous commen\u00e7ons par d\u00e9structurer les composants et la fonction que nous voulons utiliser. \u00c0 attributes<\/code>l’int\u00e9rieur registerBlockType()<\/code>, nous d\u00e9finissons un attribut par entr\u00e9e et correspondons au type – par exemple, le contr\u00f4le bascule attend un bool\u00e9en et parce que les valeurs de la liste d\u00e9roulante sont des cha\u00eenes, cet attribut doit \u00e9galement \u00eatre une cha\u00eene de type.<\/p>\n\u00c0 la ligne, #41<\/code>nous d\u00e9marrons le InspectorControls<\/code>composant, et tout, depuis ce point jusqu’\u00e0 la ligne #80<\/code>, appara\u00eetra dans la barre lat\u00e9rale. Le reste appara\u00eetra dans l’\u00e9diteur lui-m\u00eame, et je n’y ai apport\u00e9 aucune modification.<\/p>\n![\"Cr\u00e9er](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153127-61e50857e3c95.png\")
<\/a><\/p>\n\u00c0 l’ int\u00e9rieur, nous cr\u00e9ons d’abord un panneau avec PanelBody<\/code>et avec la prop initialOpen<\/code>d\u00e9finie sur true, nous disons \u00e0 Gutenberg que ce panneau doit \u00eatre ouvert par d\u00e9faut. Et ensuite, c’est \u00e0 nous de d\u00e9cider quoi ajouter \u00e0 l’int\u00e9rieur de chacun PanelRow<\/code>.<\/p>\nPour le composant, ToggleControl<\/code>nous utilisons les m\u00eames props que nous avons fait auparavant avec les entr\u00e9es de texte, sauf qu’au lieu de la prop, value<\/code>nous fournissons la valeur de l’attribut \u00e0 l’int\u00e9rieur de la prop checked<\/code>. Cela s’applique \u00e0 toutes les entr\u00e9es qui attendent un attribut coch\u00e9 en HTML brut, par exemple les cases \u00e0 cocher. Pour les boutons radio, vous utiliserez le prop selected<\/code>, car c’est \u00e9galement ce que vous utiliserez en HTML brut. N’oubliez pas que l’attribut de cette entr\u00e9e doit \u00eatre de type boolean<\/code>.<\/p>\nQuant \u00e0 la CheckboxControl<\/code>case \u00e0 cocher lors de la gestion d’un singulier, elle fonctionne exactement de la m\u00eame mani\u00e8re que ToggleControl<\/code>– elle renvoie un bool\u00e9en, qu’elle soit coch\u00e9e ou non.<\/p>\nLe SelectControl<\/code>g\u00e9n\u00e8re une liste d\u00e9roulante de s\u00e9lection et attend les choix possibles sous forme de tableau dans le prop options<\/code>. Chaque \u00e9l\u00e9ment doit \u00eatre un objet avec les propri\u00e9t\u00e9s label<\/code>et value<\/code>. Il en va de m\u00eame pour les cases \u00e0 cocher et les boutons radio (RadioControl<\/code>). Dans des circonstances normales, vous g\u00e9n\u00e9reriez probablement les choix en tant que variable en dehors de la sortie HTML.<\/p>\nVous remarquerez peut-\u00eatre que le ColorPicker<\/code>fonctionne un peu diff\u00e9remment des autres car il s’agit d’un composant plus complexe et non d’une entr\u00e9e HTML standard. Fournissez l’accessoire color<\/code>pour la couleur enregistr\u00e9e, et au lieu de onChange<\/code>(se d\u00e9clenche une fois en cliquant mais aussi \u00e0 chaque fois que la valeur est modifi\u00e9e pendant le glissement – ce qui peut entra\u00eener de nombreux incendies), utilisez onChangeComplete<\/code>. Le prop renvoy\u00e9 dans cet \u00e9v\u00e9nement est \u00e9galement un objet dans lequel nous devons d\u00e9cider quelle partie nous voulons enregistrer dans notre attribut. Dans cet exemple, nous voulons enregistrer la valeur hexad\u00e9cimale (sans alpha\/opacit\u00e9), donc \u00e0 l’int\u00e9rieur, setAttributes()<\/code>nous extrayons la hex<\/code>propri\u00e9t\u00e9 de l’ color<\/code>objet renvoy\u00e9. C’est aussi pourquoi nous ajoutons la propri\u00e9t\u00e9disableAlpha<\/code>quant \u00e0 supprimer l’interface utilisateur du canal alpha (pour contr\u00f4ler l’opacit\u00e9) car cela n’a aucun sens de l’offrir \u00e0 l’utilisateur lorsque nous n’enregistrons jamais la valeur d’opacit\u00e9.<\/p>\nChacun des composants a un label<\/code>accessoire disponible \u00e0 l’exception du s\u00e9lecteur de couleurs. Si vous souhaitez afficher une \u00e9tiquette ou du texte avant, vous devrez modifier le code HTML ou le style pour vous assurer qu’il est beau.<\/p>\nVous pouvez \u00e9videmment ajouter autant de panneaux que vous le souhaitez, il vous suffit d’ajouter un autre PanelBody<\/code>composant apr\u00e8s le pr\u00e9c\u00e9dent.<\/p>\nSi vous souhaitez en savoir plus sur l’ajout de param\u00e8tres de bloc, j’ai des didacticiels s\u00e9par\u00e9s pour des param\u00e8tres et des composants plus complexes pour Inspector. Comment ajouter une s\u00e9lection d’image<\/a> et comment ajouter un panneau de param\u00e8tres de couleur<\/a>.<\/p>\nManutentionsave<\/code><\/h3>\nJ’ai laiss\u00e9 la save<\/code>fonction telle qu’elle \u00e9tait avant. C’est \u00e0 vous de d\u00e9cider et tout d\u00e9pend de ce que les param\u00e8tres contr\u00f4lent dans la sortie. Vous savez d\u00e9j\u00e0 comment obtenir les valeurs de chaque param\u00e8tre. Par exemple, supposons que l’attribut bool\u00e9en activateLasers<\/code>contr\u00f4le le rendu ou non d’un \u00e9l\u00e9ment HTML personnalis\u00e9. Si l’attribut est true<\/code>une div doit \u00eatre sortie, sinon non. if<\/code>Vous pouvez le faire avec la v\u00e9rification if-check traditionnelle ou utiliser la ligne et l’ &&<\/code>op\u00e9rateur de JSX. En savoir plus \u00e0 ce sujet dans le guide de React pour le rendu conditionnel<\/a>.<\/p>\nsave: (props) => { \n const { attributes } = props;\n return (<div>\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}<\/code><\/pre>\nParce que nous utilisons RichText<\/code>cette sortie ne serait pas visible dans l’\u00e9diteur, mais elle appara\u00eetra dans le frontend.<\/p>\nVous trouverez plus de composants dans le wp.components<\/code> repo Github<\/a>. La plupart de ces dossiers devraient vous fournir un fichier Lisez-moi avec de la documentation sur la fa\u00e7on de l’utiliser. J’ai appris la plupart de cela en regardant dans ce d\u00e9p\u00f4t et aussi sur les composants de base de WordPress comment ils l’ont fait.<\/p>\n