{"id":229189,"date":"2022-10-19T12:27:00","date_gmt":"2022-10-19T09:27:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229189"},"modified":"2022-11-09T05:53:16","modified_gmt":"2022-11-09T02:53:16","slug":"aggiungi-controlli-alla-barra-laterale-dei-blocchi-principali-e-di-terze-parti-con-filtri-e-componenti-di-ordine-superiore","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/aggiungi-controlli-alla-barra-laterale-dei-blocchi-principali-e-di-terze-parti-con-filtri-e-componenti-di-ordine-superiore\/","title":{"rendered":"Aggiungi controlli alla barra laterale dei blocchi principali e di terze parti con filtri e componenti di ordine superiore"},"content":{"rendered":"\n<p>Nella nostra ultima guida abbiamo esaminato l&#8217; <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">aggiunta <code>InspectorControls<\/code>ai nostri blocchi personalizzati<\/a> per consentirci di utilizzare i controlli nella barra laterale dei blocchi. In questa guida ci baseremo su questo e aggiungeremo un controllo di attivazione\/disattivazione alla barra laterale dei blocchi di tutti i nostri blocchi, inclusi i blocchi principali e di terze parti che stiamo utilizzando.<\/p>\n<p>In questa guida creeremo la funzionalit\u00e0 &quot;blocco bozza&quot; presente nel mio <a href=\"https:\/\/wholesomecode.ltd\/plugins\/wholesome-publishing\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">plug-in Wholesome Publishing<\/a>.<\/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>Ho seguito la guida <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Aggiungi una barra laterale al tuo blocco WordPress personalizzato con InspectorControls<\/a><\/li>\n<\/ul>\n<h2>Preparativi per questa guida<\/h2>\n<p>Se hai seguito la <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guida Aggiungi una barra laterale<\/a>, ottimo. Ma ora dovr\u00f2 chiederti di annullare le modifiche che hai apportato al passaggio 4 di quella guida (il Draft Block Toggle), perch\u00e9 estrapoleremo quella funzionalit\u00e0 e la applicheremo a tutti i nostri blocchi.<\/p>\n<p>Se non hai seguito quella guida, assicurati di seguirla prima fino al passaggio 4, poich\u00e9 questa guida segue direttamente da quella.<\/p>\n<h2>Crea componenti di ordine superiore<\/h2>\n<p>I componenti di ordine superiore (HoC) vengono utilizzati in React per avvolgere un componente esistente e passare funzionalit\u00e0 o oggetti di scena a quel componente. Si chiamano HoC perch\u00e9 sono inseriti nel DOM prima del componente esistente, oppure si potrebbe dire in un &#8216;Ordine Superiore&#8217;.<\/p>\n<p>Creeremo due nuovi HoC, quindi crea una nuova cartella nel tuo plugin chiamato <code>components<\/code>e crea i seguenti due file:<\/p>\n<ul>\n<li><code>\/components\/withInspectorControls.js<\/code><\/li>\n<li><code>\/components\/withIsBlockDraft.js<\/code><\/li>\n<\/ul>\n<h3>con Controlli dell&#8217;ispettore<\/h3>\n<p>Apri <code>\/components\/withInspectorControls.js<\/code>e aggiungi il seguente codice:<\/p>\n<pre><code>import { InspectorControls } from '@wordpress\/block-editor';\nimport { PanelBody, ToggleControl } from '@wordpress\/components';\nimport { createHigherOrderComponent } from '@wordpress\/compose';\nimport { Fragment }    from '@wordpress\/element';\nimport { __ } from '@wordpress\/i18n';\n\nexport default createHigherOrderComponent( (BlockEdit) =&gt; {\n     return (props) =&gt; {\n        const {\n            attributes: {\n                isBlockDraft,\n            },\n            setAttributes,\n        } = props;\n\n        return (&lt;Fragment&gt;\n                &lt;BlockEdit { ...props } \/&gt;\n                &lt;InspectorControls&gt;\n                    &lt;PanelBody\n                        title={ __( 'Block Display Settings', 'wholesome-plugin') }\n                        icon=\"visibility\"\n                        initialOpen={ false }\n                    &gt;\n                        &lt;ToggleControl\n                            label={ __( 'Set Block as Draft', 'wholesome-plugin') }\n                            checked={ isBlockDraft }\n                            onChange={ (isBlockDraft) =&gt; setAttributes( { isBlockDraft }) }\n                            help={ __( 'If the block is set to draft it will not show on the front end.',\n                                'wholesome-plugin') }\n                        \/&gt;\n                    &lt;\/PanelBody&gt;\n                &lt;\/InspectorControls&gt;\n            &lt;\/Fragment&gt;\n        );\n    };\n }, 'withInspectorControls' );\n<\/code><\/pre>\n<p>Potresti riconoscere questo codice dal passaggio 4 della <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guida della barra laterale<\/a>. \u00c8 praticamente lo stesso codice, a parte il fatto che lo abbiamo racchiuso in <code>createHigherOrderComponent<\/code>.<\/p>\n<p><code>createHigherOrderComponent<\/code>Ci consente di accedere a questa <code>BlockEdit<\/code>\u00e8 la funzione di modifica originale del blocco che questo componente avvolger\u00e0. Scopriremo come questo viene passato quando creeremo i filtri a breve.<\/p>\n<h3>withIsBlockDraft<\/h3>\n<p>Apri <code>\/components\/withIsBlockDraft.js<\/code>e incolla il codice seguente:<\/p>\n<pre><code>import { createHigherOrderComponent } from '@wordpress\/compose';\n\nexport default createHigherOrderComponent( (BlockListBlock) =&gt; {\n     return (props) =&gt; {\n         const { attributes } = props;\n         const { isBlockDraft } = attributes;\n\n         return &lt;BlockListBlock { ...props } className={ isBlockDraft? 'draft-block': '' } \/&gt;;\n     };\n }, 'withIsBlockDraft' );\n<\/code><\/pre>\n<p>Questo <code>createHigherOrderComponent<\/code>ci consente di accedere <code>BlockListBlock<\/code>che ci consente di passare gli attributi nel wrapper del blocco dell&#8217;editor. Lo stiamo usando qui per impostare una classe &#8216;draft-block&#8217; sul wrapper se l&#8217;interruttore Draft Block \u00e8 stato impostato. Questo ricrea ci\u00f2 che avevamo precedentemente aggiunto al metodo di modifica nel passaggio 4 della <a href=\"https:\/\/wholesomecode.ltd\/guides\/sidebar-control-wordpress-block-inspectorcontrols\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Guida della barra laterale<\/a>.<\/p>\n<p>Ancora una volta abbiamo bisogno di impostare un filtro per <code>BlockListBlock<\/code>passare a questo controllo.<\/p>\n<h2>Imposta i filtri<\/h2>\n<p>Nella parte superiore del <code>\/src\/index.js<\/code>file aggiungi quanto segue:<\/p>\n<pre><code>import { addFilter } from '@wordpress\/hooks';\n\nimport withIsBlockDraft from '.\/components\/withIsBlockDraft';\nimport withInspectorControls from '.\/components\/withInspectorControls';\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<h3>Filtra gli attributi<\/h3>\n<p>Nello stesso file aggiungi il seguente codice:<\/p>\n<pre><code>addFilter(\n    'blocks.registerBlockType',\n    'wholesome-plugin\/block-draft-attributes', (settings) =&gt; {\n        const { attributes } = settings;\n        return {\n            ...settings,\n            attributes: {\n                ...attributes,\n                isBlockDraft: {\n                    default: false,\n                    type: 'boolean',\n                },\n            },\n        };\n    }\n);\n<\/code><\/pre>\n<p>Questo filtro aggiunge attributi aggiuntivi a tutti i blocchi nella build. In teoria potremmo filtrarlo in modo che sia solo per determinati blocchi, ma non lo faremo per il nostro esempio.<\/p>\n<p>Se volessimo limitare questo filtro a determinati blocchi, potremmo farlo in questo modo:<\/p>\n<pre><code>const { attributes, name } = settings;\nif ('core\/paragraph' !== name) {\n  return;\n}\n<\/code><\/pre>\n<h3>Filtra i controlli dell&#8217;ispettore<\/h3>\n<p>Aggiungi il seguente codice al <code>\/src\/index.js<\/code>file:<\/p>\n<pre><code>addFilter(\n    'editor.BlockEdit',\n    'wholesome-plugin\/block-draft-inspector',\n    withInspectorControls,\n);\n<\/code><\/pre>\n<p>Qui <code>BlockEdit<\/code>filtriamo in modo che passi questo al nostro HoC che abbiamo creato in precedenza.<\/p>\n<p>Se volessimo limitare questo filtro a determinati blocchi, faremmo quanto segue <strong>all&#8217;interno dell&#8217;HoC<\/strong> :<\/p>\n<pre><code>if ('core\/paragraph' === props.name) {\n  return &lt;BlockEdit { ...props } \/&gt;\n}\n<\/code><\/pre>\n<h3>Filtra il BlockListBlock<\/h3>\n<p>Infine aggiungiamo il filtro per il nostro <code>BlockListBlock<\/code>:<\/p>\n<pre><code>addFilter(\n    'editor.BlockListBlock',\n    'wholesome-plugin\/block-draft-class',\n    withIsBlockDraft\n);\n<\/code><\/pre>\n<p>Ancora una volta, se vuoi limitare questo blocco puoi farlo all&#8217;interno dell&#8217;HoC.<\/p>\n<h2>Aggiungi PHP e SCSS<\/h2>\n<p>Aggiungi quanto segue per <code>\/editor.scss<\/code>rendere carino il nostro banner Draft (questo pu\u00f2 essere fatto molto meglio, ma questo \u00e8 solo un esempio).<\/p>\n<pre><code>.editor-styles-wrapper {\n    .draft-block {\n\n        border-bottom: 1px dotted #cfcfcf;\n        border-left: 1px solid #cfcfcf;\n        border-right: 1px solid #cfcfcf;\n        margin-top: 3em;\n\n        &amp;::before {\n            background: #cfcfcf;\n            background-image: linear-gradient(45deg, #efefef 8.33%, #cfcfcf 8.33%, #cfcfcf 50%, #efefef 50%, #efefef 58.33%, #cfcfcf 58.33%, #cfcfcf 100%);\n            background-size: 8.49px 8.49px;\n            border-left: 1px solid #cfcfcf;\n            border-right: 1px solid #cfcfcf;\n            border-top: 1px solid #cfcfcf;\n            color: black;\n            content: 'Draft Block';\n            display: block;\n            font-family: monospace;\n            font-size: 1rem;\n            left: 0;\n            padding-left: 5px;\n            position: absolute;\n            top: -27px;\n            width: 100%;\n        }\n\n        opacity: .4;\n\n        &amp;.is-selected {\n            opacity: .8;\n        }\n    }\n}\n<\/code><\/pre>\n<p>Aggiungi quanto segue al file radice del plugin (nel nostro caso <code>wholesome-plugin.php<\/code>).<\/p>\n<pre><code>function wholesomecode_wholesome_plugin_remove_blocks_in_draft( $pre_render, $block) {\n\n    if (is_admin()) {\n        return $pre_render;\n    }\n\n    if (isset( $block['attrs']) &amp;&amp;\n        isset( $block['attrs']['isBlockDraft']) &amp;&amp;\n        $block['attrs']['isBlockDraft']) {\n        return false;\n    }\n\n    return $pre_render;\n}\nadd_filter( 'pre_render_block', 'wholesomecode_wholesome_plugin_remove_blocks_in_draft', 0, 2 );\n<\/code><\/pre>\n<p>Ci\u00f2 interromper\u00e0 l&#8217;output dei blocchi di bozze sul frontend.<\/p>\n<h2>Vederlo in azione<\/h2>\n<p>Ricorda di compilare <code>npm start<\/code>e ora possiamo impostare qualsiasi tipo di blocco su un blocco draft:<\/p>\n<p>Impostazione e disinserimento dei blocchi bozza<\/p>\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 di Gutenberg<\/a><\/li>\n<li>Prova ad <a href=\"https:\/\/wholesomecode.ltd\/guides\/controls-post-sidebar-plugindocumentsettingpanel\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">aggiungere controlli alla barra laterale del post<\/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>Nella nostra ultima guida abbiamo esaminato l&#8217;aggiunta di InspectorControls ai nostri blocchi personalizzati per consentirci di utilizzare i controlli nella barra laterale dei blocchi. In questa guida andremo a costruire su questo e aggiungeremo&#8230;<\/p>\n","protected":false},"author":1,"featured_media":221177,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[896,939,783,720],"tags":[1168],"class_list":["post-229189","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codice","category-gutenberg-6","category-software-open-source","category-sviluppatore","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/229189","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=229189"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/229189\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/221177"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=229189"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=229189"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=229189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}