{"id":233926,"date":"2023-02-24T13:51:00","date_gmt":"2023-02-24T10:51:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233926"},"modified":"2022-11-11T13:14:05","modified_gmt":"2022-11-11T10:14:05","slug":"crea-un-blocco-gutenberg-personalizzato-parte-3-oggetti-di-scena-e-componenti-di-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/crea-un-blocco-gutenberg-personalizzato-parte-3-oggetti-di-scena-e-componenti-di-wordpress\/","title":{"rendered":"Crea un blocco Gutenberg personalizzato – Parte 3: oggetti di scena e componenti di WordPress"},"content":{"rendered":"\n

Il passaggio precedente<\/a> di questa serie di tutorial ha spiegato come registrare un blocco personalizzato, sia in Javascript che in PHP. In questo passaggio impareremo come utilizzare i componenti di WordPress per aggiungere diversi tipi di campi e impostazioni.<\/p>\n

Per utilizzare i componenti di WordPress nel nostro blocco, dobbiamo prima conoscere gli oggetti di scena.<\/p>\n

Puntelli<\/h2>\n

Props \u00e8 una caratteristica importante in React ed \u00e8 fondamentalmente un modo per passare variabili o funzioni ad altri componenti. Se non hai familiarit\u00e0 con gli oggetti di scena di React, puoi leggere il tutorial ufficiale di React a<\/a> riguardo.<\/p>\n

WordPress fornisce alcuni oggetti di scena per le funzioni edit<\/code>e in. All’interno di questi oggetti di scena otteniamo accesso a cose critiche, come attributi e un metodo per aggiornare i nostri attributi. Esamineremo gli attributi in dettaglio nel passaggio successivo<\/a>! save``registerBlockType()<\/code><\/a><\/p>\n

Finora nel nostro blocco abbiamo scritto la funzione per edit<\/code>e in save<\/code>questo modo:<\/p>\n

edit:() => { \n    return <div>:)<\/div> \n},<\/code><\/pre>\n
Dovresti abituarti ad aggiungere il parametro props<\/code>a entrambi edit<\/code>e save<\/code>, in questo modo:<\/p>\n
edit: (props) => { \n    return <div>:)<\/div> \n},<\/code><\/pre>\n
Ora hai pieno accesso alla variabile props<\/code>e a tutto ci\u00f2 che contiene dall’interno edit<\/code>e save<\/code>. Se sei curioso, puoi aggiungere a console.log(props);<\/code>nella edit<\/code>funzione prima return<\/code>dell’istruzione. Dovresti vedere quali oggetti di scena sono disponibili nel debugger della console.<\/p>\n
Utilizzo dei componenti di WordPress<\/h2>\n
Come accennato in precedenza, abbiamo accesso a un’enorme libreria di componenti e funzioni utili all’interno del pacchetto globale wp<\/code>. Troverai componenti pronti per l’uso per qualsiasi tipo di componente relativo all’input che ti viene in mente. Gli esempi includono input di testo, input di testo RTF, menu a discesa, interruttori, caselle di controllo, pulsanti in stili diversi, caricatore multimediale e selettori di colori. Ci sono anche funzioni e componenti per funzionalit\u00e0 pi\u00f9 avanzate. Ad esempio, eseguire query su WordPress per i contenuti (post, categorie, ecc.) con funzioni integrate o recuperare con l’API REST.<\/p>\n
\u00c8 sia pi\u00f9 semplice che consigliato utilizzare i componenti dell’interfaccia utente di WordPress. Questo per assicurarsi che il design e la funzionalit\u00e0 siano il pi\u00f9 snelli possibile per non confondere o infastidire gli utenti.<\/p>\n
Ma sfortunatamente al momento in cui scrivo la documentazione per Gutenberg \u00e8 molto scarsa. Ho trovato il modo migliore per conoscere ci\u00f2 che esiste all’interno del wp<\/code>pacchetto e come funzionano i componenti effettivamente cercando nel loro repository Github Gutenberg<\/a> ufficiale. Alcuni dei pacchetti (cartelle) hanno un testo readme che offre un po’ di documentazione. Dai un’occhiata al readme per un pulsante<\/a> o per l’ interruttore<\/a>, ad esempio.<\/p>\n
Il repository Github dovrebbe corrispondere a ci\u00f2 che \u00e8 all’interno del wp<\/code>pacchetto (a seconda della versione che hai e del ramo che stai guardando in Github). Ci\u00f2 significa che ogni cartella che vedi nella directory principale in Github risiede nel pacchetto packages<\/code>globale. wp<\/code>Ad esempio, ricorda che la funzione che abbiamo usato nel passaggio precedente, registerBlockType()<\/code>, era inside wp.blocks<\/code>, il che significa che troverai il codice sorgente per questa funzione esportato all’interno di packages\/blocks\/<\/code>.<\/p>\n
Poich\u00e9 ho sviluppato una serie di blocchi Gutenberg personalizzati e ho approfondito un po’ il repository Github, ho scoperto che ci sono alcuni pacchetti che contengono le funzionalit\u00e0 pi\u00f9 comuni utilizzate per la creazione di blocchi personalizzati. Li includer\u00f2 di seguito.<\/p>\n
Per una panoramica pi\u00f9 completa dei componenti disponibili, consiglio di scaricare il mio eBook gratuito che copre i componenti disponibili in Gutenberg! Contiene i componenti pi\u00f9 comuni e utili con documentazione su prop ed esempi di codice:<\/p>\n
Una rapida panoramica dei pacchetti pi\u00f9 comuni che utilizzerai per i blocchi<\/h3>\n
Ovviamente ce ne sono molti di pi\u00f9 disponibili, ma quello che segue \u00e8 quello pi\u00f9 comune per lo sviluppo di blocchi. Utilizzeremo la maggior parte, se non tutti, di questi in questa serie di tutorial. Ogni volta che si desidera utilizzare un componente, \u00e8 necessario sapere in quale pacchetto si trova.<\/p>\n
wp.components<\/h4>\n
Troverai la maggior parte dei componenti di input dell’interfaccia utente all’interno di wp.components<\/code>. Esempi sono input di testo diversi, select, checkbox, pulsanti di opzione, componenti trascinabili, pulsanti, colorpicker, datepicker e cos\u00ec via. Troverai anche componenti dell’interfaccia utente che puoi utilizzare per la barra degli strumenti del blocco e il contenuto della barra laterale delle impostazioni (denominata InspectorControls) nell’editor.<\/p>\n
Controlla le cartelle nel repository Github<\/a>.<\/p>\n
wp.blockEditor e wp.editor<\/h4>\n
In questi due pacchetti troverai componenti utili per RTF, gestione di immagini\/caricatore multimediale e componenti per l’aggiunta effettiva di barre degli strumenti o pannelli Inspector (barra laterale) personalizzati.<\/p>\n
Alla fine di questa serie esamineremo la creazione di blocchi dinamici in cui utilizzeremo PHP per il rendering dell’output del blocco e per questo utilizzeremo un componente da wp.editor<\/code>.<\/p>\n
A quanto ho capito, la maggior parte dei componenti \u00e8 iniziata nei wp.editor<\/code>primi giorni di Gutenberg, ma soprattutto dopo WordPress 5.3, molti di essi sono stati spostati in wp.blockEditor<\/code>. Se utilizzi un componente in wp.editor<\/code>cui WordPress prevede di trasferirsi in wp.blockEditor<\/code>esso non fallir\u00e0 per ora, ma nel debugger della console riceverai avvisi che \u00e8 stato deprecato e che dovresti passare wp.blockEditor<\/code>quando puoi. E in modo reversibile, se stai seguendo questa serie con una versione precedente di WordPress per qualche motivo, potresti riscontrare errori durante la chiamata di componenti che non sono wp.blockEditor<\/code>ancora stati spostati.<\/p>\n
\"Crea<\/a><\/p>\n
elemento.wp<\/h4>\n
All’interno wp.element<\/code>troverai componenti che corrispondono ai componenti React. Ad esempio Component<\/code>(che corrisponde a React.Component<\/code>) e Fragment<\/code>( React.Fragment<\/code>). Li useremo quando inizieremo a dividere il nostro codice in componenti separati.<\/p>\n
wp.i18n<\/h4>\n
Come dice il nome, il wp.i18n<\/code>pacchetto contiene funzioni per la gestione della traduzione. Contiene le stesse funzioni di traduzione che conosciamo in PHP; per esempio __()<\/code>e _e()<\/code>. Lo esamineremo in dettaglio in <<<>>>> quando impareremo come tradurre il nostro blocco.<\/p>\n
wp.data<\/h4>\n
Il wp.data<\/code>pacchetto serve per interrogare WordPress per i dati al di fuori dell’editor. Ci sono componenti per l’invio dei messaggi withSelect<\/code>e select<\/code>che useremo pi\u00f9 avanti in questa serie per interrogare i post all’interno del nostro blocco.<\/p>\n
wp.compose<\/h4>\n
Il pacchetto precedente e wp.compose<\/code>sono per la costruzione di blocchi pi\u00f9 avanzati. All’interno di questo pacchetto troveremo componenti e funzioni per creare i cosiddetti componenti di ordine superiore. I componenti di ordine superiore<\/a> sono una tecnica di pattern in React per il riutilizzo di componenti e logica, e la useremo in combinazione con wp.data<\/code>per interrogare i post.<\/p>\n
Basta parlare: come usi in pratica alcuni di questi componenti?<\/h2>\n
Come menzionato prima; per utilizzare i componenti di WordPress devi sapere dove si trovano. Spero che la mia panoramica sopra combinata con il repository Github<\/a> ti dia un’idea di dove trovarli.<\/p>\n
Non dimenticare che puoi sempre aggiungere qualsiasi normale tag HTML, come div, span, intestazioni e cos\u00ec via. Ricorda solo di seguire le linee guida di React<\/a> negli attributi. Ad esempio class<\/code>\u00e8 una parola chiave riservata in React (per la creazione di componenti basati su classi), quindi se vuoi aggiungere una classe a un elemento HTML devi usare className<\/code>.<\/p>\n
Nota: durante lo sviluppo, non dimenticare di iniziare npm run start<\/code>a compilare il codice.<\/p>\n
Come semplice esempio, proviamo alcuni componenti per vedere come appaiono. Li destrutturiamo dai loro pacchetti corrispondenti e li usiamo nella nostra edit<\/code>funzione.<\/p>\n
const { registerBlockType } = wp.blocks;\nconst { RichText } = wp.blockEditor;\nconst { TextControl, TextareaControl } = wp.components;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n    ...\n    edit: (props) => { \n        return (<div>\n                Text input:\n                <TextControl \/> \n                Textarea:\n                <TextareaControl \/>\n                Richtext:\n                <RichText \/>\n            <\/div>\n        );\n    },\n    ...\n});<\/code><\/pre>\n
Questo, ad esempio, risulter\u00e0 nel nostro blocco simile a questo nell’editor.<\/p>\n
\"Crea<\/a><\/p>\n
Noterai che riceverai messaggi di errore in Console quando li digiti e che non salver\u00e0 ci\u00f2 che digiti durante l’aggiornamento del post (e l’aggiornamento). Questo perch\u00e9 ci mancano gli oggetti di scena sui componenti che sono la connessione agli attributi, dove sono archiviati tutti i nostri dati di blocco. Gli oggetti di scena sono responsabili del passaggio dei valori salvati e delle funzioni responsabili dell’aggiornamento dei nostri attributi quando qualcosa viene modificato nei nostri input. Questo \u00e8 ci\u00f2 che faremo nel passaggio successivo, dove inizieremo finalmente a scrivere del codice reale.<\/p>\n
Fonte di registrazione:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Nel passaggio precedente abbiamo registrato un blocco Gutenberg personalizzato. In questo passaggio impareremo come utilizzare i componenti di WordPress per aggiungere diversi tipi di impostazioni.<\/p>\n","protected":false},"author":1,"featured_media":151761,"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":["post-233926","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codice","category-sviluppatore","category-gutenberg-6","category-n-a","category-plugin-2","category-tutorial","category-wordpress-6","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/233926","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=233926"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/233926\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/151761"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=233926"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=233926"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=233926"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}