{"id":80203,"date":"2025-01-20T09:21:00","date_gmt":"2025-01-20T08:21:00","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=80203&preview=true&preview_id=80203"},"modified":"2025-01-20T12:24:34","modified_gmt":"2025-01-20T11:24:34","slug":"plugin-gutenberg","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/plugin-gutenberg\/","title":{"rendered":"Come costruire un plugin Gutenberg per aggiungere funzionalit\u00e0 all’editor a blocchi"},"content":{"rendered":"

Nel corso degli anni abbiamo esplorato Gutenberg da molti punti di vista. Abbiamo analizzato le funzionalit\u00e0 dell’editor<\/a>, le abbiamo confrontate con quelle di altri page builder<\/a>, abbiamo costruito blocchi personalizzati statici<\/a> e dinamici<\/a> e molto altro<\/a>.<\/p>\n

Con le ultime versioni di WordPress, nuove funzionalit\u00e0 e strumenti permettono di creare layout complessi in modo pi\u00f9 semplice, arricchendo e migliorando le funzionalit\u00e0 dell’editor di blocchi senza dover costruire blocchi personalizzati.<\/p>\n

Grazie all’introduzione dei block pattern<\/a> e di strumenti per sviluppatori come l’API Block Bindings<\/a>, i casi di utilizzo dei blocchi personalizzati sono diminuiti. Ora \u00e8 possibile creare strutture di blocchi complesse, iniettare valori di metadati nei propri contenuti e automatizzare buona parte del flusso di lavoro senza lasciare l’interfaccia dell’editor. In breve, oggi WordPress permette di creare siti complessi con pochi clic come mai prima d’ora.<\/p>\n

L’aggiunta di controlli e strumenti personalizzati all’editor pu\u00f2 contribuire a rendere pi\u00f9 fluido il processo di creazione dei contenuti. Ad esempio, potreste aver bisogno di aggiungere un pannello alla barra laterale dei post per aggiungere funzionalit\u00e0 o creare una barra laterale personalizzata per gestire pi\u00f9 campi meta.<\/p>\n

Iniziamo!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Come creare un plugin per l’editor a blocchi senza creare un blocco personalizzato<\/h2>\n

WordPress mette a disposizione un comodo strumento a riga di comando<\/a> che permette di installare un ambiente di sviluppo Node.js locale con tutti i file e le dipendenze necessarie per creare un blocco personalizzato. Basta digitare npx @wordpress\/create-block<\/code> nello strumento a riga di comando, attendere qualche secondo e il gioco \u00e8 fatto.<\/p>\n

Tuttavia, l’impalcatura di un blocco personalizzato non \u00e8 necessaria quando si deve aggiungere solo una barra laterale o un semplice pannello di impostazioni. In questo caso, \u00e8 necessario creare un plugin Gutenberg.<\/p>\n

WordPress non fornisce un’utility per automatizzare il processo di creazione di un plugin per Gutenberg, quindi dovrete farlo manualmente. Ma non preoccupatevi: il processo \u00e8 relativamente semplice e ci saremo noi a guidarvi. Ecco i passi da seguire:<\/p>\n

<\/div><\/kinsta-auto-toc>\n

1. Scaricare e installare un ambiente di sviluppo locale<\/h3>\n

Prima di tutto:<\/strong> anche se \u00e8 possibile sviluppare un plugin Gutenberg in un ambiente remoto, potrebbe essere pi\u00f9 conveniente installare un sito WordPress di sviluppo in locale. Potete utilizzare qualsiasi ambiente basato su PHP e MySQL. Tra le tante alternative<\/a> disponibili, vi consigliamo DevKinsta<\/a>. \u00c8 gratuito, completo, facile da usare e compatibile al 100% con l’hosting Kinsta.<\/p>\n

Una volta configurato il sito di sviluppo, sarete pronti a creare un plugin per l’editor di blocchi Gutenberg.<\/p>\n

2. Scaricare e installare Node.js e npm<\/h3>\n

Scaricate Node.js da nodejs.org<\/a> e installatelo sul vostro computer. In questo modo installerete anche npm, il gestore di pacchetti Node.<\/p>\n

Una volta fatto questo, lanciate lo strumento a riga di comando ed eseguite node -v<\/code> e npm -v<\/code>. Dovreste vedere le versioni installate di Node.js e npm.<\/p>\n

\"Verificare
Verificare le versioni di node e npm<\/figcaption><\/figure>\n

3. Creare la cartella del plugin<\/h3>\n

Create una nuova cartella sotto wp-content\/plugins<\/code> e rinominatela my-sidebar-plugin<\/code> o qualcosa di simile. Ricordate che questo nome deve riflettere il nome del plugin.<\/p>\n

Aprite il terminale, navigate nella cartella del plugin e inizializzate un progetto npm con il seguente comando:<\/p>\n

npm init -y<\/code><\/pre>\n
In questo modo verr\u00e0 creato un file di base package.json<\/code>.<\/p>\n
\"Creare
Creare un file package.json di base<\/figcaption><\/figure>\n
4. Installare le dipendenze<\/h3>\n
Nel vostro strumento a riga di comando, digitate il seguente comando:<\/p>\n
npm install @wordpress\/plugins @wordpress\/scripts --save-dev<\/code><\/pre>\n