{"id":228789,"date":"2022-10-19T13:52:00","date_gmt":"2022-10-19T10:52:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228789"},"modified":"2022-11-09T04:16:31","modified_gmt":"2022-11-09T01:16:31","slug":"creer-une-barre-laterale-personnalisee-avec-pluginsidebar","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/creer-une-barre-laterale-personnalisee-avec-pluginsidebar\/","title":{"rendered":"Cr\u00e9er une barre lat\u00e9rale personnalis\u00e9e avec PluginSidebar"},"content":{"rendered":"\n<p><a href=\"https:\/\/hashnode.com\/@wholesomecode\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a><\/p>\n<p>Nous avons examin\u00e9 les barres lat\u00e9rales de <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">blocs<\/a> personnalis\u00e9es, les barres lat\u00e9rales de blocs <a href=\"https:\/\/wholesomecode.ltd\/guides\/block-sidebar-filters-higher-order-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">tiers<\/a> via InspectorControls et comment ajouter des contr\u00f4les \u00e0 la <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">barre lat\u00e9rale de publication<\/a>. Dans ce guide, nous allons voir comment placer nos commandes dans leur propre barre lat\u00e9rale personnalis\u00e9e.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168447-61e7cd4993d41.png\" alt=\"Cr\u00e9er une barre lat\u00e9rale personnalis\u00e9e avec PluginSidebar\" \/>Notre barre lat\u00e9rale personnalis\u00e9e<\/p>\n<p>La capture d&rsquo;\u00e9cran ci-dessus montre ce que nous allons construire. Pour la plupart, nous allons juste modifier l\u00e9g\u00e8rement le code que nous avons construit dans le <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guide Post Sidebar<\/a>, alors assurez-vous d&rsquo;avoir d&rsquo;abord termin\u00e9 ce guide.<\/p>\n<h2>Conditions pr\u00e9alables<\/h2>\n<ul>\n<li>Avoir suivi le guide <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Cr\u00e9ation d&rsquo;un plugin pour l&rsquo;\u00e9diteur de blocs WordPress (Gutenberg)<\/a><\/li>\n<li>Lisez les guides de la barre lat\u00e9rale pr\u00e9c\u00e9dente (<a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">barre lat\u00e9rale pour un bloc personnalis\u00e9<\/a> et <a href=\"https:\/\/wholesomecode.ltd\/guides\/block-sidebar-filters-higher-order-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">barre lat\u00e9rale pour un bloc existant<\/a> )<\/li>\n<li>Avoir suivi le guide <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Ajouter des contr\u00f4les \u00e0 la barre lat\u00e9rale de publication avec PluginDocumentSettingPanel<\/a><\/li>\n<\/ul>\n<p>Nous allons utiliser le code du <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guide Post Sidebar<\/a>, donc si vous n&rsquo;avez pas termin\u00e9 ce guide, veuillez le faire. C&rsquo;est bon, j&rsquo;attendrai.<\/p>\n<p>Ouvrez le <code>\/components\/Sidebar.js<\/code>fichier que vous avez cr\u00e9\u00e9 dans le guide pr\u00e9c\u00e9dent. Nous allons remplacer la ligne qui importe le <code>PluginDocumentSettingPanel<\/code>par le code suivant :<\/p>\n<pre><code>import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress\/edit-post';\n<\/code><\/pre>\n<p>Remplacez maintenant le balisage <code>&lt;PluginDocumentSettingPanel...<\/code>par <code>&lt;PluginSidebar...<\/code>et le travail est fait\u00a0! Droit?<\/p>\n<p>Eh bien, oui et non. Cela nous donne une barre lat\u00e9rale, mais c&rsquo;est moche! Nous avons besoin de panneaux pour que les contr\u00f4les soient format\u00e9s correctement.<\/p>\n<p>De plus, la barre lat\u00e9rale est absente du menu &quot;Options&quot;. Pour r\u00e9soudre ce probl\u00e8me, nous devons impl\u00e9menter <code>PluginSidebarMoreMenuItem<\/code>.<\/p>\n<p>Modifiez <code>\/components\/Sidebar.js<\/code>\u00e0 nouveau et collez le code suivant\u00a0:<\/p>\n<pre><code>import { Panel, PanelBody, ToggleControl } from '@wordpress\/components';\nimport { dispatch, select } from '@wordpress\/data';\nimport { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress\/edit-post';\nimport { Component, Fragment } from '@wordpress\/element';\nimport { __ } from '@wordpress\/i18n';\n\nexport default class Sidebar extends Component {\n    render() {\n        const meta = select( 'core\/editor' ).getEditedPostAttribute( 'meta' );\n        const exampleToggle = meta['_wholesomecode_wholesome_plugin_require_login'];\n\n        return (&lt;Fragment&gt;\n                &lt;PluginSidebarMoreMenuItem target=\"wholesomecode-wholesome-plugin-sidebar\"&gt;\n                { __( 'Display Settings', 'wholesome-plugin') }\n                &lt;\/PluginSidebarMoreMenuItem&gt;\n                &lt;PluginSidebar\n                    name=\"wholesomecode-wholesome-plugin-sidebar\"\n                    title={ __( 'Display Settings', 'wholesome-plugin') }\n                &gt;\n                    &lt;Panel&gt;\n                        &lt;PanelBody\n                            title={ __( 'Display Settings', 'wholesome-plugin') }\n                            icon=\"visibility\"\n                        &gt;\n                            &lt;ToggleControl\n                                checked={ exampleToggle }\n                                help={ __( 'User must be logged-in in to view this post.', 'wholesome-plugin') }\n                                label={ __( 'Require Login', 'wholesome-plugin') }\n                                onChange={ (value) =&gt; {\n                                    dispatch( 'core\/editor' ).editPost( {\n                                        meta: {\n                                            '_wholesomecode_wholesome_plugin_require_login': value,\n                                        },\n                                    } );\n                                    this.setState( { exampleToggle: value } );\n                                } }\n                            \/&gt;\n                        &lt;\/PanelBody&gt;\n                    &lt;\/Panel&gt;\n                &lt;\/PluginSidebar&gt;\n            &lt;\/Fragment&gt;\n        );\n    }\n}\n<\/code><\/pre>\n<p>C&rsquo;est mieux, nous avons utilis\u00e9 exactement le m\u00eame code que dans notre exemple de barre lat\u00e9rale de publication pr\u00e9c\u00e9dente, mais maintenant, il ressemble \u00e0 la pi\u00e8ce.<\/p>\n<p>Maintenant que nous avons notre code en place, n&rsquo;oubliez pas de le lancer <code>npm start<\/code>pour le compiler, et il devrait maintenant ressembler \u00e0 ceci\u00a0:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168447-61e7cd4bd2a51.gif\" alt=\"Cr\u00e9er une barre lat\u00e9rale personnalis\u00e9e avec PluginSidebar\" \/>Notre barre lat\u00e9rale personnalis\u00e9e en action<\/p>\n<p>Comme dans notre guide de la barre lat\u00e9rale des plugins, nous basculons la bascule de connexion requise, actualisons une publication d\u00e9connect\u00e9e, la d\u00e9sactivons et actualisons \u00e0 nouveau la publication. Lorsqu&rsquo;il est activ\u00e9, nous ne pouvons pas acc\u00e9der au message.<\/p>\n<p>Le nom de notre barre lat\u00e9rale est <code>wholesomecode-wholesome-plugin-sidebar'<\/code>. Si nous le souhaitons, nous pouvons automatiquement ouvrir et fermer cette barre lat\u00e9rale depuis n&rsquo;importe o\u00f9 dans l&rsquo;\u00e9diteur. Disons que nous avons un bouton avec une action de clic qui fait cela.<\/p>\n<p>Le code pour ouvrir la barre lat\u00e9rale dynamiquement est le suivant\u00a0:<\/p>\n<pre><code>wp.data.dispatch('core\/edit-post').openGeneralSidebar( 'wholesomecode-wholesome-plugin-sidebar\/wholesomecode-wholesome-plugin-sidebar' );\n<\/code><\/pre>\n<p>De m\u00eame, nous pouvons fermer dynamiquement la barre lat\u00e9rale comme suit\u00a0:<\/p>\n<pre><code>wp.data.dispatch('core\/edit-post').closeGeneralSidebar( 'wholesomecode-wholesome-plugin-sidebar\/wholesomecode-wholesome-plugin-sidebar' );\n<\/code><\/pre>\n<ul>\n<li>D\u00e9couvrez comment cr\u00e9er <a href=\"https:\/\/wholesomecode.ltd\/guides\/template-innerblocks-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">des blocs enfants imbriqu\u00e9s avec le <code>InnerBlocks<\/code>composant<\/a><\/li>\n<li>Jetez un \u0153il \u00e0 <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">l&rsquo;utilisation des champs post-m\u00e9ta dans les blocs Gutenberg<\/a> (si vous ne l&rsquo;avez pas d\u00e9j\u00e0 fait) et <a href=\"https:\/\/wholesomecode.ltd\/guides\/custom-meta-boxes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">des bo\u00eetes m\u00e9ta personnalis\u00e9es pilot\u00e9es par les composants Gutenberg<\/a><\/li>\n<li>Jetez un \u0153il \u00e0 <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">la cr\u00e9ation d&rsquo;une page de param\u00e8tres avec les composants Gutenberg<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nous avons examin\u00e9 les barres lat\u00e9rales de blocs personnalis\u00e9es, les barres lat\u00e9rales de blocs tiers via InspectorControls et comment ajouter des contr\u00f4les \u00e0 la barre lat\u00e9rale de publication. Dans ce guide, nous allons examiner &#8230;<\/p>\n","protected":false},"author":1,"featured_media":221001,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[893,717,936,801,841,862],"tags":[1167],"class_list":["post-228789","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-2","category-developpeur","category-gutenberg-3","category-php-3","category-tutoriels","category-wordpress-3","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/228789","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=228789"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/228789\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/221001"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=228789"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=228789"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=228789"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}