{"id":229198,"date":"2022-10-19T10:25:00","date_gmt":"2022-10-19T07:25:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229198"},"modified":"2022-11-09T05:55:42","modified_gmt":"2022-11-09T02:55:42","slug":"aggiungi-controlli-alla-barra-laterale-del-post-con-plugindocumentsettingpanel","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/aggiungi-controlli-alla-barra-laterale-del-post-con-plugindocumentsettingpanel\/","title":{"rendered":"Aggiungi controlli alla barra laterale del post con PluginDocumentSettingPanel"},"content":{"rendered":"\n<p>Finora abbiamo dato un&#8217;occhiata alla barra laterale dei blocchi <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">aggiungendo <code>InspectorControls<\/code>ai nostri blocchi personalizzati<\/a> e <a href=\"https:\/\/wholesomecode.ltd\/guides\/block-sidebar-filters-higher-order-components\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">aggiungendo controlli alla barra laterale dei blocchi principali e di terze parti con filtri e componenti di ordine superiore<\/a>. In questa guida esamineremo l&#8217;aggiunta di controlli alla barra laterale del post.<\/p>\n<p>Visualizza le impostazioni nella barra laterale del post<\/p>\n<p>In questa guida creeremo un controllo &quot;Impostazioni di visualizzazione&quot; che consentir\u00e0 solo agli utenti che hanno effettuato l&#8217;accesso di visualizzare il post quando attivato.<\/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>Leggi la guida <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Utilizzo dei meta campi post per memorizzare gli attributi nella<\/a> guida di WordPress Block Editor (Gutenberg).<\/li>\n<\/ul>\n<h2>Registrazione del Post Meta in PHP<\/h2>\n<p>Si prega di completare i passaggi nella <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guida alla creazione del plug<\/a> -in per fornirci il nostro plug-in iniziale, lo espanderemo nella nostra guida.<\/p>\n<p>Dopo aver fatto ci\u00f2, impostiamo il meta meta di cui abbiamo bisogno per le nostre autorizzazioni per attivare\/disattivare il controllo. Apri il file root del plugin (nel nostro caso <code>wholesome-plugin.php<\/code>) e aggiungi il seguente codice:<\/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>Se hai dato un&#8217;occhiata alla <a href=\"https:\/\/wholesomecode.ltd\/guides\/post-meta-fields-store-attributes-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guida ai meta campi dei post<\/a>, dovrebbe sembrare un po &#8216;familiare. Tutto ci\u00f2 che fa \u00e8 consentire l&#8217;accesso al nostro post meta dall&#8217;interno dell&#8217;editor di blocchi (Gutenberg).<\/p>\n<p>Nel tuo plugin crea una nuova cartella chiamata <code>components<\/code>e crea il seguente file <code>\/components\/Sidebar.js<\/code>. In quel file incolla il seguente codice:<\/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>L&#8217; <code>ToggleControl<\/code>abbiamo visto prima nelle nostre precedenti guide della barra laterale, ma il pannello che stiamo utilizzando \u00e8 leggermente nuovo. Usiamo <code>PluginDocumentSettingPanel<\/code>per identificare che questo controllo dovrebbe apparire nella barra laterale del post.<\/p>\n<p>Nota inoltre che invece di inserire gli attributi, otteniamo i nostri metadati con il seguente codice:<\/p>\n<pre><code>const meta = select( 'core\/editor' ).getEditedPostAttribute( 'meta' );\nconst exampleToggle = meta['_wholesomecode_wholesome_plugin_require_login'];\n<\/code><\/pre>\n<p>e lo salviamo tramite il nostro <code>onChange<\/code>metodo usando questo codice:<\/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>Questo aggiorna il meta del post corrente. In realt\u00e0 non verr\u00e0 salvato fino a quando non salveremo il nostro post, quindi tutto il salvataggio viene gestito per noi.<\/p>\n<p>C&#8217;\u00e8 un&#8217;ultima cosa che dobbiamo fare con la nostra barra laterale dei post, ed \u00e8 registrarla. Nella parte superiore del <code>\/src\/index.js<\/code>file aggiungi quanto segue:<\/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>Dovremmo proprio pensare di modificare la struttura del nostro plugin in modo che il codice che registra il blocco venga importato da un altro file, ma per semplicit\u00e0 utilizzeremo lo stesso file.<\/p>\n<p>Qui usiamo <code>registerPlugin<\/code>per registrare la barra laterale. Passiamo nel componente Sidebar che abbiamo creato come metodo di &quot;rendering&quot;, insieme a un&#8217;icona.<\/p>\n<h2>Aggiungi la logica Nascondi se disconnesso<\/h2>\n<p>Ancora una volta apri il file root del plugin (nel nostro caso <code>wholesome-plugin.php<\/code>) e inserisci il codice seguente. Ci sono modi molto migliori per farlo, ma lo tengo breve a scopo di esempio:<\/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>Questo codice restituisce semplicemente il nostro modello 404 e uno stato di 401 (non autorizzato) se Toggle \u00e8 impostato su true.<\/p>\n<p>Diamo un&#8217;occhiata ai controlli della barra laterale del post in azione.<\/p>\n<p>Controllo delle autorizzazioni tramite la barra laterale del post<\/p>\n<p>In questo esempio attiviamo l&#8217;interruttore su true, visualizziamo la nostra pagina in una nuova finestra del browser (disconnessa) e dopo un aggiornamento vediamo che restituisce la pagina 404, quindi lo attiviamo su false, refresh e voil\u00e0, il post \u00e8 di nuovo visibile. Magia di Gutenberg!<\/p>\n<ul>\n<li>Dai un&#8217;occhiata alla creazione di una <a href=\"https:\/\/wholesomecode.ltd\/guides\/custom-sidebar-pluginsidebar\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">barra laterale personalizzata autonoma<\/a><\/li>\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>Finora abbiamo dato un&#8217;occhiata alla barra laterale dei blocchi aggiungendo InspectorControls ai nostri blocchi personalizzati e aggiungendo controlli alla barra laterale dei blocchi principali e di terze parti con filtri e Higher &#8230;<\/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":[918,896,939,720,865],"tags":[1168],"class_list":["post-229198","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-altro","category-codice","category-gutenberg-6","category-sviluppatore","category-wordpress-6","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/229198","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=229198"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/229198\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/221243"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=229198"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=229198"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=229198"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}