Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Creazione di plugin a blocchi per WordPress con Node.js


Creazione di plugin a blocchi per WordPress con Node.js


Per creare plugin di blocco per WordPress utilizzando Node.js, segui questi passaggi:

1. Installa Node.js e npm:
- Assicurati di avere Node.js installato sul tuo computer. In caso contrario, scaricalo e installalo dal sito Web ufficiale di Node.js[1][2].

2. Imposta un plugin per il blocco iniziale:
- Passa alla directory "wp-content/plugins" della tua installazione di sviluppo locale. Quindi, esegui il comando `npx @wordpress/create-block` per impalcare un plugin di blocco. Questo comando genera tutto il codice necessario per avviare un progetto e integra una moderna configurazione di build JavaScript senza alcuna configurazione richiesta[3] [4].

3. Configura il plugin del blocco:
- Il comando `create-block` richiede input passo dopo passo. Puoi anche utilizzare la modalità di avvio rapido per passare opzioni specifiche direttamente nella riga di comando, eliminando la necessità di prompt interattivi[4].

4. Crea ed esegui il plugin Block:
- Esegui `npm start` per avviare un server di sviluppo e ricostruire automaticamente il blocco ogni volta che viene rilevata una modifica al codice. Quando sei pronto per distribuire il tuo blocco, usa `npm run build` per ottimizzare il tuo codice e renderlo pronto per la produzione[4].

5. Integrazione con WordPress:
- Attiva il plugin generato in WordPress. Ciò renderà il blocco disponibile nell'Editor[4].

6. Personalizza ed estendi il blocco:
- Modificare il codice boilerplate per personalizzare ed estendere il blocco secondo necessità. Ciò implica l'utilizzo di JavaScript moderno (ESNext e JSX) e lo sfruttamento del pacchetto `wp-scripts` per le attività di compilazione e linting[4].

Seguendo questi passaggi, puoi creare e gestire plugin di blocco personalizzati per WordPress utilizzando Node.js e il pacchetto `@wordpress/create-block`.

Citazioni:
[1] https://wpdevelopment.courses/articles/wordpress-create-block/
[2] https://kinsta.com/courses/gutenberg-block-development/setting-up-a-block-plugin/
[3] https://www.npmjs.com/package/%40wordpress/create-block
[4] https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-create-block/
[5] https://www.youtube.com/watch?v=-aa4F4Dn9GY