{"id":233567,"date":"2023-02-16T14:08:00","date_gmt":"2023-02-16T11:08:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233567"},"modified":"2022-11-11T00:23:13","modified_gmt":"2022-11-10T21:23:13","slug":"crea-un-blocco-gutenberg-personalizzato-parte-1-impostazione-dellambiente-di-sviluppo","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/crea-un-blocco-gutenberg-personalizzato-parte-1-impostazione-dellambiente-di-sviluppo\/","title":{"rendered":"Crea un blocco Gutenberg personalizzato – Parte 1: Impostazione dell’ambiente di sviluppo"},"content":{"rendered":"\n

Nella prima parte di questa serie di tutorial su come creare blocchi Gutenberg personalizzati, dobbiamo configurare il nostro ambiente di sviluppo. Abbiamo bisogno di un posto dove possiamo scrivere il nostro codice nelle sintassi ES6\/ESNext e compilarlo in movimento. \u00c8 possibile scrivere blocchi Gutenberg personalizzati utilizzando la sintassi ES5 senza configurare Webpack e Babel. Ma il codice sar\u00e0 davvero ingombrante da leggere e scrivere. Se non sei sicuro del motivo per cui dobbiamo fare tutto questo, o qual \u00e8 la differenza, leggi il mio post che spiega questo<\/a>. Posso garantirti che quando tornerai sarai convinto a fare questo passo in pi\u00f9 per scrivere codice migliore.<\/p>\n

Presumo che tu abbia gi\u00e0 un WordPress locale in esecuzione su uno stack LAMP o simile. E che stai scrivendo un tema o un plugin. Per quanto mi riguarda, sto mettendo il mio codice in un tema che ho sviluppato, awp-starter-theme<\/code>, che si trova nella mia cartella del tema di WordPress. Voglio separare il mio sviluppo Gutenberg da tutti gli altri file del tema, quindi creo una sottodirectory gutenberg-dev<\/code>all’interno della mia cartella principale del tema. Questa sar\u00e0 la cartella del mio progetto e la cartella a cui far\u00f2 riferimento per il resto della serie di tutorial.<\/p>\n

Ho gi\u00e0 scritto una guida dettagliata su come configurare un ambiente di sviluppo per Gutenberg, quindi seguir\u00f2 rapidamente i passaggi qui. Se non l’hai mai fatto prima ti consiglio di leggere il post linkato qui sotto, in quanto contiene pi\u00f9 informazioni di quelle che troverai qui!<\/p>\n

Configura il progetto con il webpack<\/h2>\n

Usando il terminale (terminale iOS o Windows cmd funzionano entrambi bene) vai alla cartella del tuo progetto, (nel mio caso awp-starter-theme\/gutenberg-dev<\/code>). Iniziamo un nuovo progetto chiedendo a npm di generare un package.json<\/code>contenuto generico.<\/p>\n

Creazione di package.json<\/h3>\n
npm init -y<\/code><\/pre>\n
Successivamente installer\u00f2 gli script di WordPress che ci aiuteranno molto con la configurazione con questo comando (che aggiunger\u00e0 anche la sottocartella node_modules<\/code>) package-lock.json<\/code>:<\/p>\n
npm install --save-dev --save-exact @wordpress\/scripts<\/code><\/pre>\n
Apri il package.json<\/code>file nella cartella del progetto in un editor e trova la scripts<\/code>propriet\u00e0. Lo sostituiamo con due script del pacchetto WordPress appena installato:<\/p>\n
\"scripts\": {\n    \"build\": \"wp-scripts build\",\n    \"start\": \"wp-scripts start\"\n},<\/code><\/pre>\n
Lo script "build" compiler\u00e0 i miei file. Ma poich\u00e9 deve essere eseguito manualmente ogni volta che viene apportata una modifica, utilizzeremo piuttosto lo script "start" durante lo sviluppo. Quindi avvier\u00e0 una "modalit\u00e0 di visualizzazione" in cui ascolta alle modifiche apportate in uno qualsiasi dei tuoi file di script e li ricompila ogni volta che salvi le modifiche.<\/p>\n
Configurazione pacchetto Web<\/h3>\n
Il passaggio successivo \u00e8 la creazione di un file di configurazione del pacchetto web. Lo faccio perch\u00e9 non voglio usare i nomi di file e cartelle di origine e di output predefiniti. Voglio decidere da solo dove sono i miei file di origine e dove dovrebbero finire i file compilati.<\/p>\n
Con l’aiuto del @wordpress\/scripts<\/code>pacchetto che abbiamo installato possiamo ereditare la configurazione del webpack di WordPress e sovrascrivere solo le parti che vogliamo cambiare.<\/p>\n
Nella nostra cartella del progetto crea un nuovo file chiamato webpack.config.js<\/code>e aprilo in un editor. Aggiungi questo contenuto:<\/p>\n
const defaultConfig = require(\"@wordpress\/scripts\/config\/webpack.config\");\nconst path = require('path');\nmodule.exports = {\n    ...defaultConfig,\n    entry: {\n        'block-awhitepixel-myfirstblock': '.\/src\/block-awhitepixel-myfirstblock.js'\n    },\n    output: {\n        path: path.join(__dirname, '..\/assets\/js'),\n        filename: '[name].js'\n    }\n}<\/code><\/pre>\n
Ci\u00f2 che fa \u00e8 definire il mio file di ingresso (attualmente solo uno) nella entry<\/code>propriet\u00e0, che si trova in una sottocartella src<\/code>nella cartella del mio progetto, denominata block-awhitepixel-myfirstblock.js<\/code>. Ovviamente nomina i tuoi file come vuoi, ma ricorda di cambiare sia la chiave che il valore. Perch\u00e9 nella output<\/code>propriet\u00e0 sto chiedendo al webpack di compilare i miei file di ingresso con la chiave di ingresso come nome file. Nella path<\/code>propriet\u00e0 chiedo di posizionare tutti i file compilati un passo fuori dalla cartella del mio progetto e nella assets\/js<\/code>cartella del tema. Regola i nomi dei file e la posizione per adattarli al tuo progetto. Fare riferimento alla mia guida dettagliata<\/a> se sei confuso.<\/p>\n
Crea una sottocartella src\/<\/code>nella cartella del progetto ed \u00e8 qui che inseriremo tutti i file di origine. (Regola se hai cambiato la entry<\/code>posizione in webpack.config.js<\/code>). Crea un file block-awhitepixel-myfirstblock.js<\/code>qui e lascialo vuoto per ora.<\/p>\n
C’\u00e8 ancora un passaggio, e questo vale per noi che desideriamo utilizzare le funzionalit\u00e0 pi\u00f9 recenti in ESNext. La configurazione predefinita di WordPress Babel purtroppo manca questo. E poich\u00e9 voglio utilizzare funzionalit\u00e0 come le funzioni delle frecce, devo configurare anche Babel.<\/p>\n
Allestimento Babele<\/h2>\n
Per prima cosa dobbiamo installare alcuni pacchetti per la nostra configurazione Babel digitando questo comando:<\/p>\n
npm install --save-dev @babel\/preset-env @babel\/preset-react @babel\/plugin-proposal-class-properties<\/code><\/pre>\n
Al termine, crea un nuovo file .babelrc<\/code>nella nostra cartella del progetto. Qui \u00e8 dove metteremo la nostra configurazione di Babel:<\/p>\n
{\n    \"presets\": [\"@babel\/preset-env\", \"@babel\/preset-react\"],\n    \"plugins\": [\n        [\n            \"@babel\/plugin-proposal-class-properties\"\n        ]\n    ]\n}<\/code><\/pre>\n
E questo \u00e8 tutto per la configurazione del nostro ambiente di sviluppo!<\/p>\n
Costruisci comandi<\/h2>\n
Durante lo sviluppo dovrai compilare i tuoi file Javascript. Nel nostro package.json<\/code>abbiamo aggiunto due script proprio per questo.<\/p>\n
Ogni volta che vogliamo sviluppare nei nostri file Javascript, eseguiamo questo nel terminale:<\/p>\n
npm run build<\/code><\/pre>\n
Questo comando eseguir\u00e0 la compilazione ogni volta che lo esegui nel terminale. Provalo e dovresti vedere che genera il file block-awhitepixel-myfirstblock.js<\/code>(insieme a uno o due altri file "asset") nella cartella di output definita che hai definito in webpack.config.js<\/code>. Nel mio caso compare in awp-starter-theme\/assets\/js\/<\/code>.<\/p>\n
L’uso del comando sopra funziona bene, ma diventa fastidioso ripetere ogni volta che si apportano modifiche ai file. Probabilmente preferiresti invece eseguire questo comando:<\/p>\n
npm run start<\/code><\/pre>\n
Questo imposter\u00e0 il tuo terminale in "modalit\u00e0 orologio", rilevando eventuali modifiche salvate nei file Javascript e compilandole mentre procedi. Ogni volta che i tuoi file contengono errori, il terminale emetter\u00e0 i messaggi di errore. Premi CTRL + C per interrompere il processo di visualizzazione.<\/p>\n
\"Crea<\/a><\/p>\n
Come riferimento, la mia cartella del progetto ora assomiglia all’immagine. Preferisco separare tutti i file di configurazione e in particolare la sottocartella node_modules\/<\/code>(che contiene letteralmente decine di migliaia di file) dal resto del codice del mio tema. Semplifica l’impostazione di regole per l’ignorare, ad esempio i compilatori SCSS o git ignore. Abbiamo gi\u00e0 impostato la configurazione del webpack per compilare i file finali direttamente awp-starter-theme\/assets\/js\/<\/code>insieme ad altri file Javascript per il mio tema.<\/p>\n
Ora siamo pronti per la parte successiva<\/a> in cui inizieremo con la registrazione del nostro primo blocco personalizzato.<\/p>\n
Fonte di registrazione:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
La prima parte di questa serie di tutorial su come creare blocchi Gutenberg WordPress personalizzati impariamo come impostare il nostro ambiente di sviluppo.<\/p>\n","protected":false},"author":1,"featured_media":152983,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[896,896,939,939,1110,814,814,844,844,865,865],"tags":[1168],"class_list":{"0":"post-233567","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-codice","9":"category-gutenberg-6","11":"category-n-a","12":"category-plugin-2","14":"category-tutorial","16":"category-wordpress-6","18":"tag-affiai-it"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/233567","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=233567"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/233567\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/152983"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=233567"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=233567"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=233567"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}