{"id":229216,"date":"2022-10-19T14:13:00","date_gmt":"2022-10-19T11:13:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229216"},"modified":"2022-11-09T06:00:57","modified_gmt":"2022-11-09T03:00:57","slug":"crea-una-barra-laterale-personalizzata-con-pluginsidebar","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/crea-una-barra-laterale-personalizzata-con-pluginsidebar\/","title":{"rendered":"Crea una barra laterale personalizzata con PluginSidebar"},"content":{"rendered":"\n<p><a href=\"https:\/\/hashnode.com\/@wholesomecode\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a><\/p>\n<p>Abbiamo esaminato le barre laterali dei <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">blocchi personalizzate, le barre laterali<\/a> dei blocchi di <a href=\"https:\/\/wholesomecode.ltd\/guides\/block-sidebar-filters-higher-order-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">terze parti<\/a> tramite InspectorControls e come aggiungere controlli alla <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">barra laterale dei post<\/a>. In questa guida vedremo come inserire i nostri controlli nella loro barra laterale personalizzata.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168447-61e7cd4993d41.png\" alt=\"Crea una barra laterale personalizzata con PluginSidebar\" \/>La nostra barra laterale personalizzata<\/p>\n<p>Lo screenshot qui sopra mostra cosa costruiremo. Per la maggior parte, modificheremo leggermente il codice che abbiamo creato nella <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guida Post Sidebar<\/a>, quindi assicurati di aver completato prima quella guida.<\/p>\n<h2>Prerequisiti<\/h2>\n<ul>\n<li>Ho seguito la guida <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Creazione di un plug-in per l&#8217;editor di blocchi di WordPress (Gutenberg)<\/a>.<\/li>\n<li>Leggi le precedenti guide della barra laterale (<a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">barra laterale per un blocco personalizzato<\/a> e <a href=\"https:\/\/wholesomecode.ltd\/guides\/block-sidebar-filters-higher-order-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">barra laterale per un blocco esistente<\/a> )<\/li>\n<li>Ho seguito la guida Aggiungi controlli alla barra laterale del post con la guida <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">PluginDocumentSettingPanel<\/a><\/li>\n<\/ul>\n<p>Utilizzeremo il codice della <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guida Post Sidebar<\/a>, quindi se non hai completato quella guida, fallo. Va bene, aspetter\u00f2.<\/p>\n<p>Apri il <code>\/components\/Sidebar.js<\/code>file che hai creato nella guida precedente. Sostituiremo la riga che importa il <code>PluginDocumentSettingPanel<\/code>con il seguente codice:<\/p>\n<pre><code>import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress\/edit-post';\n<\/code><\/pre>\n<p>Ora sostituisci il markup <code>&lt;PluginDocumentSettingPanel...<\/code>con <code>&lt;PluginSidebar...<\/code>e lavoro fatto! Destra?<\/p>\n<p>Ebbene s\u00ec e no. Questo ci d\u00e0 una barra laterale, ma \u00e8 brutto! Abbiamo bisogno di alcuni pannelli in modo che i controlli siano formattati correttamente.<\/p>\n<p>Anche la barra laterale non \u00e8 presente nel menu &quot;Opzioni&quot;. Per risolvere questo abbiamo bisogno di implementare <code>PluginSidebarMoreMenuItem<\/code>.<\/p>\n<p>Modifica <code>\/components\/Sidebar.js<\/code>di nuovo e incolla il codice seguente:<\/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>\u00c8 meglio, abbiamo usato lo stesso identico codice del nostro precedente esempio della barra laterale del post, ma ora sembra la parte.<\/p>\n<p>Ora che abbiamo il nostro codice in atto, non dimenticare di eseguire <code>npm start<\/code>per compilarlo e ora dovrebbe apparire come segue:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168447-61e7cd4bd2a51.gif\" alt=\"Crea una barra laterale personalizzata con PluginSidebar\" \/>La nostra barra laterale personalizzata in azione<\/p>\n<p>Come nella nostra guida alla barra laterale dei plug-in, cambiamo l&#8217;interruttore di accesso richiesto, aggiorniamo un post disconnesso, lo riattiviamo e aggiorniamo nuovamente il post. Se attivato, non possiamo accedere al post.<\/p>\n<p>Il nome della nostra barra laterale \u00e8 <code>wholesomecode-wholesome-plugin-sidebar'<\/code>. Se lo desideriamo, possiamo aprire e chiudere automaticamente questa barra laterale da un&#8217;altra parte dell&#8217;editor. Diciamo che abbiamo un pulsante con un&#8217;azione di clic che fa questo.<\/p>\n<p>Il codice per aprire dinamicamente la barra laterale \u00e8 il seguente:<\/p>\n<pre><code>wp.data.dispatch('core\/edit-post').openGeneralSidebar( 'wholesomecode-wholesome-plugin-sidebar\/wholesomecode-wholesome-plugin-sidebar' );\n<\/code><\/pre>\n<p>Allo stesso modo possiamo chiudere dinamicamente la barra laterale in questo modo:<\/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>Dai un&#8217;occhiata alla creazione <a href=\"https:\/\/wholesomecode.ltd\/guides\/template-innerblocks-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">di blocchi figlio nidificati con il <code>InnerBlocks<\/code>componente<\/a><\/li>\n<li>Dai un&#8217;occhiata <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">all&#8217;utilizzo dei meta campi post nei blocchi Gutenberg<\/a> (se non l&#8217;hai gi\u00e0 fatto) e nelle <a href=\"https:\/\/wholesomecode.ltd\/guides\/custom-meta-boxes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">meta box personalizzate guidate da componenti Gutenberg<\/a><\/li>\n<li>Dai un&#8217;occhiata alla <a href=\"https:\/\/wholesomecode.ltd\/guides\/create-settings-page-wordpress-gutenberg-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">creazione di una pagina delle impostazioni con i componenti Gutenberg<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte di registrazione:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Abbiamo esaminato le barre laterali dei blocchi personalizzate, le barre laterali dei blocchi di terze parti tramite InspectorControls e come aggiungere controlli alla barra laterale dei post. In questa guida esamineremo&#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":[896,939,804,720,844,865],"tags":[1168],"class_list":["post-229216","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codice","category-gutenberg-6","category-php-6","category-sviluppatore","category-tutorial","category-wordpress-6","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/229216","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/comments?post=229216"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/229216\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/221001"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=229216"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=229216"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=229216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}