{"id":228763,"date":"2022-10-19T11:07:00","date_gmt":"2022-10-19T08:07:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228763"},"modified":"2022-11-09T04:11:14","modified_gmt":"2022-11-09T01:11:14","slug":"ajouter-des-controles-a-la-barre-laterale-de-publication-avec-plugindocumentsettingpanel","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/ajouter-des-controles-a-la-barre-laterale-de-publication-avec-plugindocumentsettingpanel\/","title":{"rendered":"Ajouter des contr\u00f4les \u00e0 la barre lat\u00e9rale de publication avec PluginDocumentSettingPanel"},"content":{"rendered":"\n<p>Jusqu&rsquo;\u00e0 pr\u00e9sent, nous avons examin\u00e9 la barre lat\u00e9rale des blocs en <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ajoutant <code>InspectorControls<\/code>\u00e0 nos blocs personnalis\u00e9s<\/a> et <a href=\"https:\/\/wholesomecode.ltd\/guides\/block-sidebar-filters-higher-order-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">en ajoutant des contr\u00f4les \u00e0 la barre lat\u00e9rale des blocs principaux et tiers avec des filtres et des composants d&rsquo;ordre sup\u00e9rieur<\/a>. Dans ce guide, nous allons examiner l&rsquo;ajout de contr\u00f4les \u00e0 la barre lat\u00e9rale de publication.<\/p>\n<p>Param\u00e8tres d&rsquo;affichage dans la barre lat\u00e9rale des messages<\/p>\n<p>Dans ce guide, nous allons cr\u00e9er un contr\u00f4le &quot;Param\u00e8tres d&rsquo;affichage&quot; qui permettra uniquement aux utilisateurs connect\u00e9s de voir le message lorsqu&rsquo;il est activ\u00e9.<\/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>Lisez le guide Utilisation des champs Meta Post pour stocker les attributs dans le guide <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPress Block Editor (Gutenberg)<\/a><\/li>\n<\/ul>\n<h2>Enregistrement du Post Meta en PHP<\/h2>\n<p>Veuillez suivre les \u00e9tapes du <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guide de cr\u00e9ation de plugin<\/a> pour nous donner notre plugin initial, nous d\u00e9velopperons cela dans notre guide.<\/p>\n<p>Apr\u00e8s avoir fait cela, configurons la m\u00e9ta de publication dont nous avons besoin pour notre contr\u00f4le de basculement des autorisations. Ouvrez le fichier racine du plugin (dans notre cas <code>wholesome-plugin.php<\/code>) et ajoutez le code suivant\u00a0:<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_register_post_meta() {\n    register_meta(\n        'post',\n        '_wholesomecode_wholesome_plugin_require_login',\n        [\n            'auth_callback' =&gt; '__return_true',\n            'default'       =&gt; false,\n            'show_in_rest'  =&gt; true,\n            'single'        =&gt; true,\n            'type'          =&gt; 'boolean',\n        ]\n    );\n}\nadd_action( 'init', 'wholesomecode_wholesome_plugin_register_post_meta' );\n<\/code><\/pre>\n<p>Si vous avez jet\u00e9 un coup d&rsquo;\u0153il au <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guide des champs m\u00e9ta post<\/a>, cela devrait vous sembler un peu familier. Tout ce qu&rsquo;il fait, c&rsquo;est qu&rsquo;il permet d&rsquo;acc\u00e9der \u00e0 notre post meta depuis l&rsquo;\u00e9diteur de blocs (Gutenberg).<\/p>\n<p>Dans votre plugin, cr\u00e9ez un nouveau dossier appel\u00e9 <code>components<\/code>et cr\u00e9ez le fichier suivant <code>\/components\/Sidebar.js<\/code>. Dans ce fichier collez le code suivant :<\/p>\n<pre><code>import { ToggleControl } from '@wordpress\/components';\nimport { dispatch, select } from '@wordpress\/data';\nimport { PluginDocumentSettingPanel } from '@wordpress\/edit-post';\nimport { Component } 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;PluginDocumentSettingPanel\n            name=\"wholesomecode-wholesome-plugin-sidebar\"\n            title={ __( 'Display Settings', 'wholesome-plugin') }\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              } }\n              \/&gt;\n          &lt;\/PluginDocumentSettingPanel&gt;\n        );\n    }\n}\n<\/code><\/pre>\n<p>Nous l&rsquo; <code>ToggleControl<\/code>avons d\u00e9j\u00e0 vu dans nos guides lat\u00e9raux pr\u00e9c\u00e9dents, mais le panneau que nous utilisons est l\u00e9g\u00e8rement nouveau. Nous utilisons <code>PluginDocumentSettingPanel<\/code>pour identifier que ce contr\u00f4le doit appara\u00eetre dans la barre lat\u00e9rale de la publication.<\/p>\n<p>Notez \u00e9galement qu&rsquo;au lieu d&rsquo;extraire des attributs, nous obtenons nos m\u00e9tadonn\u00e9es avec le code suivant\u00a0:<\/p>\n<pre><code>const meta = select( 'core\/editor' ).getEditedPostAttribute( 'meta' );\nconst exampleToggle = meta['_wholesomecode_wholesome_plugin_require_login'];\n<\/code><\/pre>\n<p>et nous l&rsquo;enregistrons via notre <code>onChange<\/code>m\u00e9thode en utilisant ce code :<\/p>\n<pre><code>onChange={ (value) =&gt; {\n  dispatch( 'core\/editor' ).editPost( {\n    meta: {\n      '_wholesomecode_wholesome_plugin_require_login': value,\n    },\n  } );\n} }\n<\/code><\/pre>\n<p>Cela met \u00e0 jour la m\u00e9ta du message actuel. Il ne sera pas enregistr\u00e9 tant que nous n&rsquo;aurons pas enregistr\u00e9 notre message, donc toute l&rsquo;enregistrement est g\u00e9r\u00e9 pour nous.<\/p>\n<p>Il y a une derni\u00e8re chose que nous devons faire avec notre barre lat\u00e9rale de publication, et c&rsquo;est de l&rsquo;enregistrer. En haut du <code>\/src\/index.js<\/code>fichier, ajoutez ce qui suit\u00a0:<\/p>\n<pre><code>import { registerPlugin } from '@wordpress\/plugins';\nimport render from '.\/components\/Sidebar';\n\nregisterPlugin(\n    'wholesomecode-wholesome-plugin-sidebar',\n    {\n        icon: 'visibility',\n        render,\n    }\n);\n<\/code><\/pre>\n<p>Nous devrions vraiment penser \u00e0 modifier la structure de notre plugin afin que le code qui enregistre le bloc soit import\u00e9 d&rsquo;un autre fichier, mais pour plus de simplicit\u00e9, nous utiliserons le m\u00eame fichier.<\/p>\n<p>Ici, nous utilisons <code>registerPlugin<\/code>pour enregistrer la barre lat\u00e9rale. Nous transmettons le composant Sidebar que nous avons cr\u00e9\u00e9 en tant que m\u00e9thode &lsquo;render&rsquo;, avec une ic\u00f4ne.<\/p>\n<h2>Ajouter la logique Masquer si d\u00e9connect\u00e9<\/h2>\n<p>Ouvrez \u00e0 nouveau le fichier racine du plugin (dans notre cas <code>wholesome-plugin.php<\/code>) et d\u00e9posez-y le code suivant. Il existe de bien meilleures fa\u00e7ons de le faire, mais je le garde court \u00e0 des fins d&rsquo;exemple:<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_require_login() {\n    global $post, $wp_query;\n\n    if (is_admin() ||! is_singular() ||! $post) {\n        return;\n    }\n\n    if (is_user_logged_in()) {\n        return;\n    }\n\n    $login_required = get_post_meta( $post-&gt;ID, '_wholesomecode_wholesome_plugin_require_login', true );\n\n    if (! $login_required) {\n        return;\n    }\n\n    $wp_query-&gt;set_404();\n    status_header( 401 );\n}\nadd_action( 'wp', 'wholesomecode_wholesome_plugin_require_login' );\n<\/code><\/pre>\n<p>Ce code renvoie simplement notre mod\u00e8le 404 et un statut de 401 (non autoris\u00e9) si le basculement est d\u00e9fini sur vrai.<\/p>\n<p>Jetons un coup d&rsquo;\u0153il aux commandes de la barre lat\u00e9rale de publication en action.<\/p>\n<p>Contr\u00f4le des autorisations via la barre lat\u00e9rale de publication<\/p>\n<p>Dans cet exemple, nous basculons le commutateur sur vrai, affichons notre page dans une nouvelle fen\u00eatre de navigateur (d\u00e9connect\u00e9e) et apr\u00e8s une actualisation, voyons qu&rsquo;elle renvoie la page 404, puis basculons-la sur faux, actualisons et voil\u00e0, la publication est \u00e0 nouveau visible. Magie de Gutenberg\u00a0!<\/p>\n<ul>\n<li>Jetez un \u0153il \u00e0 la cr\u00e9ation d&rsquo;une <a href=\"https:\/\/wholesomecode.ltd\/guides\/custom-sidebar-pluginsidebar\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">barre lat\u00e9rale personnalis\u00e9e autonome<\/a><\/li>\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>Jusqu&rsquo;\u00e0 pr\u00e9sent, nous avons jet\u00e9 un coup d&rsquo;\u0153il \u00e0 la barre lat\u00e9rale des blocs en ajoutant InspectorControls \u00e0 nos blocs personnalis\u00e9s et en ajoutant des contr\u00f4les \u00e0 la barre lat\u00e9rale des blocs principaux et tiers avec des filtres et des options sup\u00e9rieures.<\/p>\n","protected":false},"author":1,"featured_media":221243,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[915,893,717,936,862],"tags":[1167],"class_list":["post-228763","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-autre","category-code-2","category-developpeur","category-gutenberg-3","category-wordpress-3","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/228763","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=228763"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/228763\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/221243"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=228763"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=228763"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=228763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}