{"id":233759,"date":"2023-02-20T16:33:00","date_gmt":"2023-02-20T13:33:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233759"},"modified":"2023-02-24T18:45:49","modified_gmt":"2023-02-24T15:45:49","slug":"aggiungi-una-barra-laterale-custom-inspector-in-wordpress-gutenberg-con-post-meta","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/aggiungi-una-barra-laterale-custom-inspector-in-wordpress-gutenberg-con-post-meta\/","title":{"rendered":"Aggiungi una barra laterale Custom Inspector in WordPress Gutenberg con Post Meta"},"content":{"rendered":"\n

In questo tutorial esamineremo come aggiungere una barra laterale personalizzata all’Inspector (barra laterale destra) in WordPress Gutenberg. All’interno implementeremo un campo collegato a un post meta. Tutto \u00e8 implementato con Javascript, all’interno dell’editor Gutenberg, ed \u00e8 un’alternativa all’aggiunta di metabox in modo tradizionale.<\/p>\n

\"Aggiungi<\/a><\/p>\n

Dritta!<\/h3>\n

Questo \u00e8 un tutorial per creare la tua barra laterale personalizzata. Ma se sei interessato solo ad aggiungere meta\/impostazioni alla barra laterale standard di Inspector (scheda "Documento"), ho un tutorial esattamente per questo:<\/p>\n

Cosa creeremo<\/h2>\n

WordPress Gutenberg consente agli sviluppatori di creare barre laterali personalizzate utilizzando la creazione di un cosiddetto plug-in Javascript. (Da non confondere con i tradizionali plugin di WordPress). Utilizzando un plug-in Javascript possiamo creare una nuova barra laterale e anche collegarci al menu "Strumenti e opzioni".<\/p>\n

Aggiungeremo una nuova voce di menu negli "Strumenti" che aprir\u00e0 la nostra barra laterale personalizzata. Il contenuto della barra laterale dipende interamente da te, ma analizzer\u00f2 alcuni esempi, incluso come collegare un meta campo post al suo interno.<\/p>\n

\"Aggiungi<\/a><\/p>\n

Configurazione del tuo Javascript<\/h2>\n

Per questo tutorial scriver\u00f2 ES6\/ESNext Javascript con JSX, il che significa che dobbiamo impostare un compilatore. Se vuoi seguire e non scrivere Javascript ES5 dovrai configurare un ambiente di sviluppo che compili il tuo Javascript mentre procedi. Se non hai familiarit\u00e0 con questo, segui il mio post che spiega come configurarlo<\/a> e poi torna qui.<\/p>\n

Ho impostato il mio webpack.config.js<\/code>per compilare il mio file Javascript di origine nella mia cartella del tema \/assets\/js\/sidebar-plugin.js<\/code>. Questo file compilato \u00e8 ci\u00f2 di cui abbiamo bisogno per accodare all’editor Gutenberg. Mentre scrivo questo codice ho avviato il compilatore di runtime che ricompila Javascript ogni volta che salvo le modifiche nel codice sorgente (npm run start<\/code>). Tutto questo \u00e8 spiegato in modo approfondito nel tutorial precedentemente menzionato.<\/p>\n

Lo sto scrivendo in un tema, ma funziona allo stesso modo in un plugin. Ricorda solo di regolare i percorsi quando aggiungi lo script all’editor.<\/p>\n

Aggiunta dello script all’editor<\/h2>\n

Per aggiungere il nostro script all’editor Gutenberg abbiamo bisogno di scrivere del PHP. Se ti trovi in \u200b\u200bun tema, functions.php<\/code>\u00e8 un buon punto di partenza o da qualche parte nei tuoi file di plugin. Si noti che \u00e8 necessario aggiungere lo script compilato finale, non il codice sorgente. Nel mio esempio il Javascript compilato si trova nella cartella del mio tema \/assets\/js\/sidebar-plugin.js<\/code>.<\/p>\n

Creiamo una funzione agganciata a enqueue_block_editor_assets<\/code>. Dentro facciamo il solito [wp_enqueue_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_script\/)()<\/code>. Come dipendenze allo script ne aggiungiamo due; wp-plugins<\/code>, e wp-edit-post<\/code>. Questi due pacchetti devono essere caricati prima del nostro script poich\u00e9 utilizziamo le funzioni da essi.<\/p>\n

add_action('enqueue_block_editor_assets', function() {\n    wp_enqueue_script('awp-sidebar-plugin', get_stylesheet_directory_uri(). '\/assets\/js\/sidebar-plugin.js', ['wp-plugins', 'wp-edit-post']);\n});<\/code><\/pre>\n
Poich\u00e9 accodiamo lo script nell’hook, il enqueue_block_editor_assets<\/code>nostro script verr\u00e0 caricato solo quando l’editor Gutenberg \u00e8 attivo. Grande! Ora \u00e8 tutto pronto per scrivere il nostro plugin Javascript.<\/p>\n
Registra un plugin Javascript<\/h2>\n
Il primo passo \u00e8 la registrazione di un plugin. Lo facciamo con la [registerPlugin](https:\/\/github.com\/WordPress\/gutenberg\/tree\/master\/packages\/plugins#registerPlugin)<\/code>funzione in wp.plugins dall’interno del wp.plugins<\/code>pacchetto.<\/p>\n
Come parametro del registerPlugin forniamo un nome (assicurati che sia univoco) e un oggetto con le impostazioni. Come minimo \u00e8 necessario fornire un componente per la propriet\u00e0 render. Puoi anche aggiungere un’icona facoltativamente dai dashicon di WordPress<\/a>. Tieni presente che se non specifichi un’icona ricadr\u00e0 sull’icona del plug-in. A scopo dimostrativo sto usando l’ 'carrot'<\/code>icona.<\/p>\n
Per quanto riguarda il componente iniziamo definendo un componente base che restituisca un semplice div con del testo casuale al suo interno. E prima di tutto il codice destrutturiamo le funzioni dai pacchetti che vogliamo utilizzare.<\/p>\n
const { registerPlugin } = wp.plugins;\n\u00a0\nconst CustomSidebarComponent =() => {\n    return(\n        <div>Hey!<\/div>\n    );\n}\n\u00a0\nregisterPlugin('awp-customsidebar', {\n    render: CustomSidebarComponent,\n    icon: 'carrot'\n});<\/code><\/pre>\n
Se non succede nulla (nemmeno errori) quando si aggiorna Gutenberg siamo tutti a posto. Non vediamo il nostro componente perch\u00e9 non abbiamo detto a WordPress dove renderizzarlo. Il passaggio successivo \u00e8 l’aggancio al menu personalizzato della barra laterale e ai componenti del menu degli strumenti per il rendering delle nostre cose.<\/p>\n
Registra una barra laterale personalizzata<\/h2>\n
Ma prima una spiegazione su come Gutenberg gestisce le barre laterali personalizzate e perch\u00e9 dobbiamo fare quello che faremo. Quando registriamo correttamente una barra laterale personalizzata, all’inizio accadr\u00e0 automaticamente. Gutenberg aggiunger\u00e0 una scorciatoia alla nostra barra laterale nella barra degli strumenti in alto, accanto al menu Strumenti. Ci\u00f2 accade perch\u00e9 la nostra barra laterale viene automaticamente "bloccata".<\/p>\n
\"Aggiungi<\/a><\/p>\n
Il problema della semplice aggiunta di una barra laterale personalizzata \u00e8 che qualsiasi utente pu\u00f2 "sbloccare" questa scorciatoia. Quando lo fanno, non c’\u00e8 alcun punto di accesso per aprire di nuovo la barra laterale! Questo \u00e8 il motivo per cui dobbiamo aggiungere anche una voce di menu al menu Strumenti.<\/p>\n
La registrazione di una barra laterale personalizzata viene eseguita con il componente PluginSidebar<\/code>del wp.editPost<\/code>pacchetto. L’aggiunta di una voce di menu al menu Strumenti viene eseguita con il componente con il nome appropriato PluginSidebarMoreMenuItem<\/code>(anch’esso nel wp.editPost<\/code>pacchetto).<\/p>\n
Per il PluginSidebar<\/code>componente dobbiamo fornire alcuni oggetti di scena. Dovresti fornire come minimo name<\/code>e title<\/code>. L’elica title<\/code>si spiega da s\u00e9, questo \u00e8 il nome che apparir\u00e0 nella parte superiore della barra laterale. Nell’elica name<\/code>fornire una lumaca unica. Quando aggiungi la voce di menu devi fare riferimento a questo slug.<\/p>\n
L’aggiunta di un PluginSidebarMoreMenuItem<\/code>componente (menu strumenti) richiede almeno un prop; target<\/code>. Qui fornisci lo stesso nome che hai dato nel supporto della barra laterale name<\/code>. Come contenuto del componente scrivi il testo che verr\u00e0 visualizzato come voce di menu. Di solito questo sarebbe lo stesso della barra laterale title<\/code>.<\/p>\n
Poich\u00e9 React richiede un singolo nodo di wrapping attorno al reso del componente, avvolgiamo tutto all’interno di un Fragment<\/code>componente (dal wp.element<\/code>pacchetto). Sto anche avvolgendo le mie stringhe __()<\/code>dal wp.i18n<\/code>pacchetto per consentire la traduzione.<\/p>\n
const { registerPlugin } = wp.plugins;\nconst { __ } = wp.i18n;\nconst { Fragment } = wp.element;\nconst { PluginSidebarMoreMenuItem, PluginSidebar } = wp.editPost;\n\u00a0\nconst CustomSidebarComponent =() => {\n    return(\n        <Fragment>\n            <PluginSidebar \n                name=\"awp-custom-sidebar\" \n                title={__('My Custom sidebar', 'awp')}\n            >Hello there.<\/PluginSidebar>\n            <PluginSidebarMoreMenuItem \n                target='awp-custom-sidebar'\n                >{__('My Custom sidebar', 'awp')}<\/PluginSidebarMoreMenuItem>\n        <\/Fragment>\n    );\n}\n\u00a0\nregisterPlugin('awp-customsidebar', {\n    render: CustomSidebarComponent,\n    icon: 'carrot'\n});<\/code><\/pre>\n
Con il codice sopra otterremo le seguenti due (molto probabilmente tre) cose che accadono. Otterrai una scorciatoia per l’icona di una carota nella barra degli strumenti (se non l’hai ancora sbloccata). Cliccando su questo si aprir\u00e0 la barra laterale. Avrai anche una nuova voce di menu nella barra laterale nel menu Strumenti, sotto il titolo "Plugin".<\/p>\n
\"Aggiungi<\/a><\/p>\n
Aggiunta di contenuti alla barra laterale<\/h2>\n
Il contenuto effettivo della barra laterale dipende interamente da te. Devi solo aggiungere HTML o componenti all’interno del PluginSidebar<\/code>componente con quello che vuoi (al posto del testo "Hello there.").<\/p>\n
Potresti notare che al contenuto della barra laterale manca il riempimento. Questo \u00e8 intenzionale perch\u00e9 l’idea \u00e8 che creerai pannelli all’interno di questa barra laterale. I pannelli sono le sezioni pieghevoli nella normale barra laterale di Gutenberg. Questi sono componenti che puoi facilmente aggiungere all’interno della tua barra laterale personalizzata. Puoi aggiungere tutti i pannelli che vuoi e sono ottimi per raggruppare cose diverse.<\/p>\n
Aggiunta di pannelli nella nostra barra laterale<\/h3>\n
Diamo un’occhiata rapidamente a come possiamo aggiungere pannelli alla nostra barra laterale. Se hai creato i tuoi tipi di blocchi personalizzati, potresti avere familiarit\u00e0 con questi componenti. Usiamo PanelBody<\/code>e facoltativamente PanelRow<\/code>dal wp.components<\/code>pacchetto.<\/p>\n
Per un PanelBody<\/code>componente fornisci come minimo il prop title<\/code>. Puoi opzionalmente fornire true o false initialOpen<\/code>all’elica per decidere se il pannello deve essere espanso come predefinito o meno. Poich\u00e9 il contenuto all’interno del componente \u00e8 tutto all’interno del pannello.<\/p>\n
All’interno di un PanelBody<\/code>\u00e8 possibile utilizzare facoltativamente PanelRow<\/code>dei componenti. Non sono realmente necessari ma possono aiutarti a ottenere uno stile buono per il contenuto del tuo pannello.<\/p>\n
Per esempio, aggiungiamo due pannelli alla nostra barra laterale personalizzata.<\/p>\n
const { registerPlugin } = wp.plugins;\nconst { __ } = wp.i18n;\nconst { Fragment } = wp.element;\nconst { PluginSidebarMoreMenuItem, PluginSidebar } = wp.editPost;\nconst { PanelBody, PanelRow } = wp.components;\n\u00a0\nconst CustomSidebarComponent = () => {\n    return(\n        <Fragment>\n            <PluginSidebarMoreMenuItem \n                target='awp-custom-sidebar'\n                >{__('My Custom sidebar', 'awp')}<\/PluginSidebarMoreMenuItem>\n            <PluginSidebar \n                name=\"awp-custom-sidebar\" \n                title={__('My Custom sidebar', 'awp')}\n            >                \n                <PanelBody\n                    title={__('This is a panel section', 'awp')}\n                    initialOpen={true}\n                >\n                    <PanelRow>\n                        Put any component or content here.\n                    <\/PanelRow>\n                <\/PanelBody>\n                <PanelBody\n                    title={__('Another section', 'awp')}\n                    initialOpen={false}\n                >\n                    <PanelRow>\n                        This is a collapsed section by default.\n                    <\/PanelRow>\n                <\/PanelBody>\n            <\/PluginSidebar>\n        <\/Fragment>\n    );\n}\n\u00a0\nregisterPlugin('awp-customsidebar', {\n    render: CustomSidebarComponent,\n    icon: 'carrot'\n});<\/code><\/pre>\n
Con questo codice la nostra barra laterale personalizzata inizia a sembrare davvero come se appartenesse a Gutenberg!<\/p>\n
\"Aggiungi<\/a><\/p>\n
Aggiunta di meta campi post alla barra laterale personalizzata<\/h2>\n
Ora stiamo davvero entrando nel vivo delle cose utili per una barra laterale personalizzata; aggiungendo impostazioni e memorizzando i loro valori. Ma prima dobbiamo capire come.<\/p>\n
\u00c8 davvero facile aggiungere campi di impostazione (input, caselle di controllo, campi di commutazione, ecc.) Nella barra laterale utilizzando i componenti pronti all’uso nei pacchetti di WordPress. Tuttavia, dobbiamo considerare come memorizzare i valori. L’opzione pi\u00f9 ovvia \u00e8 salvarli come post meta. Ma il collegamento di un’impostazione a un meta campo post richiede del codice aggiuntivo. Pi\u00f9 specificamente, abbiamo bisogno di utilizzare i cosiddetti componenti<\/a> di ordine superiore per recuperare e aggiornare i post meta all’interno di Javascript. Dobbiamo anche registrare ogni meta post utilizzando PHP e renderli disponibili per l’API REST.<\/p>\n
Per chiudere questo tutorial dimostrer\u00f2 come aggiungere un meta post con una chiave awp_my_custom_meta<\/code>che dovrebbe essere archiviata come true o false. Nella barra laterale verr\u00e0 visualizzato come un campo di commutazione (un componente vero\/falso).<\/p>\n
Registra il meta meta per l’API REST<\/h3>\n
Il primo passo per aggiungere post meta nel nostro file Javascript \u00e8 registrarli e definirli come accessibili nell’API REST. Per fare ci\u00f2 torniamo di nuovo a PHP.<\/p>\n
All’interno di una funzione agganciata init<\/code>all’azione utilizziamo la [register_meta](https:\/\/developer.wordpress.org\/reference\/functions\/register_meta\/)()<\/code>funzione. Come parametri dobbiamo definire il tipo di oggetto come ‘ post<\/code>‘ perch\u00e9 lo stiamo usando come post meta (non esclude ad esempio il tipo di post di pagina). Forniamo la chiave meta e quindi un array di argomenti. La cosa fondamentale da aggiungere nell’array degli argomenti \u00e8 impostare ‘ show_in_rest<\/code>‘ su true<\/code>. Post meta \u00e8 comunemente usato come ‘ single<\/code>‘ (pensa a come usi get_post_meta()<\/code>). Definiamo anche il type<\/code>. Per quanto riguarda il nostro caso, lo abbiamo impostato su ‘ boolean<\/code>‘.<\/p>\n
add_action('init', function() {\n    register_meta('post', 'awp_my_custom_meta', [\n        'show_in_rest' => true,\n        'single' => true,\n        'type' => 'boolean'\n    ]);\n});<\/code><\/pre>\n
Con questo codice il campo ‘ awp_my_custom_meta<\/code>‘ post meta \u00e8 accessibile da Gutenberg. Devi ripetere register_meta()<\/code>per ogni meta post che desideri aggiungere nella barra laterale.<\/p>\n
Ora torniamo al nostro Javascript.<\/p>\n
Aggiunta di un’impostazione alla nostra barra laterale<\/h3>\n
Iniziamo con la parte facile: aggiungere l’input alla nostra barra laterale. Successivamente aggiungeremo pi\u00f9 codice per collegare effettivamente il campo delle impostazioni al post meta. A causa del modo in cui dobbiamo farlo, definiamo un nuovo componente separato per la nostra impostazione. Quindi all’interno del pannello a cui vuoi aggiungere le tue impostazioni chiama semplicemente questo nuovo componente.<\/p>\n
Chiamiamo il componente CustomSidebarMetaComponent<\/code>(potresti chiamarlo qualcosa di rilevante per il tuo progetto). All’interno di questo componente vogliamo rendere un campo di commutazione. Per fare ci\u00f2 utilizziamo il ToggleControl<\/code>componente del wp.components<\/code>pacchetto. Come supporto per ToggleControl forniamo un’etichetta di montaggio nell’oggetto title<\/code>. Un ToggleControl necessita anche degli oggetti di scena onChange<\/code>per l’aggiornamento del valore e checked<\/code>per il valore corrente. Ometteremo questi due per ora fino al passaggio successivo.<\/p>\n
...\nconst { PanelBody, PanelRow, ToggleControl } = wp.components;\n\u00a0\nconst CustomSidebarMetaComponent = () => {\n    return(\n        <ToggleControl\n            label={__('My custom post meta', 'awp')}\n        \/>\n    );\n}\n\u00a0\nconst CustomSidebarComponent = () => {\n    return(\n        ...       \n        <PanelBody\n            title={__('This is a panel section', 'awp')}\n            initialOpen={true}\n        >\n            <PanelRow>\n                <CustomSidebarMetaComponent \/>\n            <\/PanelRow>\n        <\/PanelBody>\n        ...<\/code><\/pre>\n
Con il codice sopra dovresti ottenere un campo di attivazione\/disattivazione nella barra laterale. \u00c8 deselezionato e non accade nulla quando si fa clic su di esso. Questo \u00e8 il passaggio successivo: collegarlo al nostro post meta.<\/p>\n
Accesso al meta post con withSelect e withDispatch<\/h3>\n
Per accedere e aggiornare un meta valore post, dobbiamo utilizzare componenti di ordine superiore (HOC) per accedere alla versione dei negozi di WordPress (simile a Redux). WordPress ci fornisce alcuni utili HOC con funzioni che possiamo utilizzare nel wp.data<\/code>pacchetto.<\/p>\n
Il componente di ordine superiore [withSelect](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-data\/#withSelect)<\/code>\u00e8 fornire al nostro componente oggetti di scena che, nel nostro caso, vengono recuperati da post meta. Lo usiamo per ottenere il valore del nostro post meta. All’interno withSelect<\/code>possiamo usare select('core\/editor').getEditedPostAttribute('meta')<\/code>per recuperare il meta del post corrente.<\/p>\n
D’altra parte, [withDispatch](https:\/\/developer.wordpress.org\/block-editor\/packages\/packages-data\/#withDispatch)<\/code>\u00e8 un componente di ordine superiore che pu\u00f2 eseguire azioni. Nel nostro caso vogliamo aggiornare il meta del post quando l’impostazione del campo corrispondente viene modificata nella nostra barra laterale. All’interno di questo componente utilizziamo dispatch('core\/editor').editPost()<\/code>per informare WordPress per inviare un’azione. All’interno dell’oggetto che forniamo diciamo a WordPress che \u00e8 meta che vogliamo aggiornare.<\/p>\n
Infine dobbiamo combinare withSelect<\/code>e withDispatch<\/code>con il nostro componente che gestisce il post meta campo (CustomSidebarMetaComponent<\/code>). Per fare questo utilizziamo WordPress’ compose<\/code>dal wp.compose<\/code>pacchetto. L’idea \u00e8 quella withSelect<\/code>e withDispatch<\/code>fornisce al nostro CustomSidebarMetaComponent<\/code>componente oggetti di scena. withSelect<\/code>fornisce il valore del meta post come prop e withDispatch<\/code>fornisce una funzione che possiamo chiamare per aggiornare il valore come prop. Impostiamo questi oggetti di scena sul nostro ToggleField checked<\/code>e onChange<\/code>, di conseguenza.<\/p>\n
Questo \u00e8 molto da spiegare. Diamo un’occhiata al codice effettivo:<\/p>\n
...\nconst { compose } = wp.compose;\nconst { withDispatch, withSelect } = wp.data;\n\u00a0\nconst CustomSidebarMetaComponent = (props) => {\n    return(\n        <ToggleControl\n            label={__('My custom post meta', 'awp')}\n            checked={props.customPostMetaValue}\n            onChange={props.setCustomPostMeta}\n        \/>\n    );\n}\n\u00a0\nconst CustomSidebarMeta = compose([\n    withSelect(select => {\n        return { customPostMetaValue: select('core\/editor').getEditedPostAttribute('meta')['awp_my_custom_meta'] }\n    }),\n    withDispatch(dispatch => {\n        return { \n            setCustomPostMeta: function(value) {\n                dispatch('core\/editor').editPost({ meta: { awp_my_custom_meta: value } });\n            }\n        }\n    })\n])(CustomSidebarMetaComponent);\n\u00a0\nconst CustomSidebarComponent = () => {\n    return(\n        ...\n        <PanelBody\n            title={__('This is a panel section', 'awp')}\n            initialOpen={true}\n        >\n            <PanelRow>\n                <CustomSidebarMeta \/>\n            <\/PanelRow>\n        <\/PanelBody>\n        ...<\/code><\/pre>\n
Cominciamo dall’inizio. Che \u00e8 in fondo. Alla riga #36<\/code>cambiamo il componente che renderizziamo nella nostra barra laterale con il componente che abbiamo creato con compose<\/code>(alla riga #15<\/code>). Il CustomSidebarMeta<\/code>componente unir\u00e0 i componenti withSelect<\/code>e withDispatch<\/code>e restituir\u00e0 il CustomSidebarMetaComponent<\/code>.<\/p>\n
Avranno CustomSidebarMetaComponent<\/code>accesso customPostMetaValue<\/code>all’elica di withSelect<\/code>, e setCustomPostMeta<\/code>all’elica di withDispatch<\/code>Questi due che usiamo per gli oggetti di scena checked<\/code>e in .onChange``ToggleField<\/code><\/p>\n
Nota che in linea #5<\/code>aggiungiamo props<\/code>come parametri ai componenti in modo da rendere gli oggetti di scena accessibili nel componente.<\/p>\n
Conclusione e parole finali<\/h2>\n
Spero che questo tutorial ti sia stato di qualche utilit\u00e0. Questo \u00e8 ci\u00f2 che sono riuscito a comprendere sull’argomento durante molti tentativi ed errori. Non c’\u00e8 ancora quasi nessuna documentazione su questo argomento. Sto ancora lottando con questo, specialmente quando si tratta di gestire in modo efficiente pi\u00f9 meta meta. Se riesco ad imparare qualche buon trucco aggiorner\u00f2 di sicuro questo tutorial!<\/p>\n
Si spera che seguendo questo tutorial dovresti avere un codice che aggiunge con successo una nuova barra laterale personalizzata all’editor Gutenberg di WordPress e, si spera, con alcuni contenuti e impostazioni significativi. Ecco il codice finale per la barra laterale personalizzata con il meta campo post.<\/p>\n
const { registerPlugin } = wp.plugins;\nconst { __ } = wp.i18n;\nconst { Fragment } = wp.element;\nconst { PluginSidebarMoreMenuItem, PluginSidebar } = wp.editPost;\nconst { PanelBody, PanelRow, ToggleControl } = wp.components;\nconst { compose } = wp.compose;\nconst { withDispatch, withSelect } = wp.data;\n\u00a0\nconst CustomSidebarMetaComponent = (props) => {\n    return(\n        <ToggleControl\n            label={__('My custom post meta', 'awp')}\n            checked={props.customPostMetaValue}\n            onChange={props.setCustomPostMeta}\n        \/>\n    );\n}\n\u00a0\nconst CustomSidebarMeta = compose([\n    withSelect(select => {\n        return { customPostMetaValue: select('core\/editor').getEditedPostAttribute('meta')['awp_my_custom_meta'] }\n    }),\n    withDispatch(dispatch => {\n        return { \n            setCustomPostMeta: function(value) {\n                dispatch('core\/editor').editPost({ meta: { awp_my_custom_meta: value } });\n            }\n        }\n    })\n])(CustomSidebarMetaComponent);\n\u00a0\nconst CustomSidebarComponent = () => {\n    return(\n        <Fragment>\n            <PluginSidebarMoreMenuItem \n                target='awp-custom-sidebar'\n                icon='carrot'\n            >{__('My Custom sidebar', 'awp')}<\/PluginSidebarMoreMenuItem>\n            <PluginSidebar \n                name=\"awp-custom-sidebar\" \n                title={__('My Custom sidebar', 'awp')}\n            >                \n                <PanelBody\n                    title={__('This is a panel section', 'awp')}\n                    initialOpen={true}\n                >\n                    <PanelRow>\n                        <CustomSidebarMeta \/>\n                    <\/PanelRow>\n                <\/PanelBody>\n                <PanelBody\n                    title={__('Another section', 'awp')}\n                    initialOpen={false}\n                >\n                    <PanelRow>\n                        This is a collapsed section by default.\n                    <\/PanelRow>\n                <\/PanelBody>\n            <\/PluginSidebar>\n        <\/Fragment>\n    );\n}\n\u00a0\nregisterPlugin('awp-customsidebar', {\n    render: CustomSidebarComponent,\n    icon: 'carrot'\n});<\/code><\/pre>\n
add_action('enqueue_block_editor_assets', function() {\n    wp_enqueue_script('awp-sidebar-plugin', get_stylesheet_directory_uri(). '\/assets\/js\/sidebar-plugin.js', ['wp-plugins', 'wp-edit-post']);\n});\n\u00a0\nadd_action('init', function() {\n    register_meta('post', 'awp_my_custom_meta', [\n        'show_in_rest' => true,\n        'single' => true,\n        'type' => 'boolean'\n    ]);\n});<\/code><\/pre>\n
Fonte di registrazione:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Un tutorial su come aggiungere una barra laterale personalizzata all’Inspector in WordPress Gutenberg. All’interno implementeremo un campo collegato a un post meta.<\/p>\n","protected":false},"author":1,"featured_media":223619,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[896,896,720,939,939,1110,814,814,720,844,844,865,865],"tags":[1168],"class_list":{"0":"post-233759","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-codice","9":"category-sviluppatore","10":"category-gutenberg-6","12":"category-n-a","13":"category-plugin-2","16":"category-tutorial","18":"category-wordpress-6","20":"tag-affiai-it"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/233759","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=233759"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/233759\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/223619"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=233759"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=233759"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=233759"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}