npm<\/code> script utile per creare un plug-in di blocco<\/a> che crea un blocco di avvio in modo da poter iniziare rapidamente a funzionare.<\/p>\nPer impostazione predefinita, il tipo di plug-in WordPress creato \u00e8 un "blocco", ma ci offre anche un buon punto di partenza per altri tipi di plug-in Gutenberg.<\/p>\n
Prerequisiti<\/h2>\n\n- Node deve essere installato sulla tua macchina in<\/a> modo da poter usare il
npm<\/code>comando (che sta per Node Package Manager)<\/li>\n- Installazione WordPress<\/li>\n
- Editor di codice<\/li>\n
- Accesso al Terminale<\/li>\n<\/ul>\n
Crea il tuo plugin<\/h2>\n
Dopo aver installato il nodo sulla tua macchina, dovresti avere accesso al npm<\/code>comando nel tuo terminale.<\/p>\nApri il tuo terminale e assicurati di aver cd<\/code>‘d (Changed Directory) nella cartella dei plugin nell’installazione di WordPress (ad es cd wp-content\/plugins<\/code>. ).<\/p>\nUna volta l\u00ec, esegui il seguente comando:<\/p>\n
npm init @wordpress\/block\n<\/code><\/pre>\nQuesto scaricher\u00e0 tutto ci\u00f2 di cui lo script ha bisogno per avviare la build. Una volta terminato, lo script ti porr\u00e0 una serie di domande necessarie per configurare il tuo plugin.<\/p>\n
Utilizzo del terminale per eseguire lo script di creazione<\/p>\n
Domande di configurazione<\/h3>\n
Lo script far\u00e0 le seguenti domande, ecco le mie risposte di esempio:<\/p>\n
\n- \n
Lo slug del blocco utilizzato per l’identificazione (anche il nome del plug-in e della cartella di output)<\/strong>: voglio che il mio blocco venga chiamato Wholesome Plugin<\/code>, quindi ho inserito wholesome-plugin<\/code>.<\/p>\n<\/li>\n- \n
Lo spazio dei nomi interno per il nome del blocco (qualcosa di unico per i tuoi prodotti)<\/strong>: poich\u00e9 dovrebbe essere univoco per tutti i miei prodotti che ho inserito wholesomecode<\/code>, poich\u00e9 questo \u00e8 il nome della mia azienda.<\/p>\n<\/li>\n- \n
Il titolo visualizzato per il tuo blocco<\/strong>: ho inserito il titolo del plugin, Wholesome Plugin<\/code>.<\/p>\n<\/li>\n- \n
La breve descrizione per il tuo blocco (facoltativo)<\/strong> \u2014 Ho inserito ” An example plugin to demonstrate the create-block-script<\/code>“.<\/p>\n<\/li>\n- \n
Il dashicon per semplificare l’identificazione del blocco (opzionale)<\/strong> \u2014 Facendo apparire rapidamente la risorsa Dashicon di WordPress<\/a>, ho scelto admin-plugins<\/code>perch\u00e9 ha un’icona di plug-in. Ricordarsi di omettere dashicon- dal prefisso dashicon quando si esegue questa operazione.<\/p>\n<\/li>\n- \n
Il nome della categoria per aiutare gli utenti a navigare e scoprire il tuo blocco (usa i tasti freccia)<\/strong> \u2014 ho scelto design<\/code>. Anche se una categoria personalizzata sarebbe probabilmente pi\u00f9 adatta.<\/p>\n<\/li>\n- \n
Il nome dell’autore del plugin (facoltativo). \u00c8 possibile elencare pi\u00f9 autori utilizzando le virgole<\/strong>: ho inserito wholesomecode<\/code>.<\/p>\n<\/li>\n- \n
Il nome breve della licenza del plugin (opzionale)<\/strong>: ho premuto invio per accettare la GPL v2.0 o successiva.<\/p>\n<\/li>\n- \n
Un collegamento al testo completo della licenza (opzionale)<\/strong>: ho premuto invio per inserire l’URL della licenza GPL v2.0.<\/p>\n<\/li>\n- \n
Il numero di versione corrente del plugin<\/strong>: ho premuto invio per inserire 0.1.0<\/code>.<\/p>\n<\/li>\n<\/ul>\n![\"Creazione](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0d770fb3.png\")
Domande sulla configurazione dello script<\/p>\n
Lo script terminer\u00e0 quindi l’esecuzione.<\/p>\n
Cosa \u00e8 appena successo?<\/h3>\n
Alcune cose accadono mentre lo script \u00e8 in esecuzione, queste sono:<\/p>\n
\n- Crea la cartella del plugin,<\/li>\n
- Genera tutti i file del plug-in (vedi Esplorazione del plug-in per i dettagli su ci\u00f2 che fanno<\/a> )<\/li>\n
- Installa le dipendenze di cui ha bisogno, incluso il
@wordpress\/scripts<\/code>pacchetto (questo fa il lavoro pesante in termini di costruzione del plugin)<\/li>\n- Compila il codice<\/li>\n
- Emette un elenco di comandi che puoi usare<\/li>\n<\/ul>\n
![\"Creazione](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0d865300.png\")
Costruisci comandi<\/p>\n
Li esploreremo di pi\u00f9 nella sezione dedicata all’esplorazione del plugin<\/a>.<\/p>\nUtilizzo del plug-in<\/h2>\n
Prima di poter utilizzare il plugin, dovrai attivarlo. Puoi farlo scegliendo Plugins<\/code>dal menu di amministrazione di WordPress, quindi selezionando activate<\/code>sotto il nome del plug-in.<\/p>\n![\"Creazione](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0d958ea6.gif\")
Attiva il Plugin<\/p>\n
Ora devi modificare un post in WordPress e inserire il plug-in utilizzando l’editor Gutenberg.<\/p>\n
![\"Creazione](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0db497f6.gif\")
Inserimento del blocco in un post<\/p>\n
Nota che il plugin non \u00e8 molto predefinito, crea solo un blocco. Tuttavia, fornisce un framework da utilizzare per creare il proprio plug-in.<\/p>\n
Visualizzazione del blocco sul front-end<\/h3>\n
Per impostazione predefinita, il blocco ha questo aspetto sul front-end. Nota che ha un aspetto leggermente diverso, questo \u00e8 intenzionale in modo da poter familiarizzare con i CSS sul front e sul backend di WordPress.<\/p>\n
![\"Creazione](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0dd10fa2.png\")
Il blocco sul front-end<\/p>\n
Esplorazione del plug-in<\/h2>\n
L’intero scopo di Create Block Script \u00e8 che tu crei il tuo plug-in. Esploriamo i file che ha generato in modo pi\u00f9 dettagliato:<\/p>\n
![\"Creazione](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0de1777f.png\")
File generati<\/p>\n
wholesome-plugin<\/code><\/strong>\u2014 Questa \u00e8 la cartella principale del plugin, ha lo stesso nome di quella che ho inserito per lo ‘slug’ nelle domande di installazione.<\/p>\n**\/build**<\/code>\u2014 Questa \u00e8 la cartella build. Contiene tutte le risorse JavaScript e PHP generate dalla \/src<\/code>cartella. Questi vengono accodati tramite il wholesome-notes.php<\/code>file del caricatore principale.<\/p>\n**\/build\/index.assets.php**<\/code>\u2014 Questo file PHP viene generato automaticamente quando la \/src<\/code>cartella viene compilata. Contiene un array di tutte le decenze JavaScript di WordPress Editor (Gutenberg) utilizzate dal tuo plugin. Viene accodato tramite il wholesome-plugin.php<\/code>file del caricatore principale.<\/p>\n**\/build\/index.css**<\/code>\u2014 Questo \u00e8 il file CSS dell’editor ed \u00e8 accodato tramite il wholesome-plugin.php<\/code>file di caricamento principale.<\/p>\n**\/build\/index.js**<\/code>\u2014 Questo \u00e8 il file JavaScript compilato principale e viene accodato tramite il wholesome-plugin.php<\/code>file del caricatore principale.<\/p>\n**\/build\/style-index.css**<\/code>\u2014 Questo \u00e8 il file CSS front-end e viene accodato tramite il wholesome-plugin.php<\/code>file di caricamento principale.<\/p>\n**\/build\/index.js.map**<\/code>\u2014 Questo file viene generato solo quando si compilano gli asset per la modalit\u00e0 di sviluppo (IE lo si esegue npm start<\/code>e non npm build<\/code>quando si compilano gli asset. \u00c8 un file utile per i debugger JavaScript per aiutare a identificare i nomi dei file e i numeri di riga in caso di errori.<\/p>\n\n- \n
**\/node_modules**<\/code>\u2014 Questa \u00e8 la cartella in cui sono installate tutte le dipendenze JavaScript per il tuo plugin.<\/p>\n<\/li>\n- \n
**\/src**<\/code>\u2014 Questa \u00e8 la cartella che contiene tutte le risorse non compilate per il tuo plugin.<\/p>\n<\/li>\n- \n
**\/src\/edit.js**<\/code>\u2014 Questa \u00e8 la funzione di modifica del blocco e controlla come il blocco viene visualizzato nell’editor di blocchi quando \u00e8 in modalit\u00e0 di modifica.<\/p>\n<\/li>\n- \n
**\/src\/editor.scss**<\/code>\u2014 Questo \u00e8 l’SCSS non compilato per l’editor, verr\u00e0 compilato in \/build\/index.css<\/code>.<\/p>\n<\/li>\n- \n
**\/src\/index.js**<\/code>\u2014 Questo \u00e8 il principale file JavaScript non compilato per il blocco dell’editor di WordPress (Gutenberg). Registra il blocco e contiene le impostazioni predefinite.<\/p>\n<\/li>\n- \n
**\/src\/save.js**<\/code>\u2014 Questa \u00e8 la funzione di salvataggio del blocco e controlla il markup del blocco quando viene salvato.<\/p>\n<\/li>\n- \n
**\/src\/style.scss**<\/code>\u2014 Questo \u00e8 l’SCSS non compilato per il front-end, verr\u00e0 compilato in \/build\/style-index.css<\/code>.<\/p>\n<\/li>\n- \n
**\/.editorconfig**<\/code>\u2014 Questo file contiene utili predefiniti per il tuo IDE (Integrated Development Environment), come Visual Studio Code.<\/p>\n<\/li>\n- \n
**\/.gitignore**<\/code>\u2014 Questo file dice a git di ignorare determinati file quando esegui il commit in un repository git (come GitHub).<\/p>\n<\/li>\n- \n
**\/editor.css**<\/code>\u2014 Gli stili in questo file vengono emessi solo nell’editor, viene accodato tramite il wholesome-notes.php<\/code>file del caricatore principale.<\/p>\n<\/li>\n- \n
**\/block.json**<\/code>\u2014 Questo file definisce il plug-in in modo che possa essere rilevato dalla libreria di blocchi di WordPress. Se apporti modifiche al plugin, assicurati che questo file sia aggiornato. Nelle versioni pi\u00f9 recenti dello script NPM, questo file viene utilizzato invece di \/src\/index.js<\/code>registrare il blocco.<\/p>\n<\/li>\n- \n
**\/package.json**<\/code>\u2014 Questo file contiene tutte le dipendenze npm per il plugin e i comandi che puoi eseguire. Nota che il plugin utilizza wp-scripts<\/code>( @wordpress\/scripts<\/code>) come base, quindi inizialmente le dipendenze caricate sono per quel pacchetto.<\/p>\n<\/li>\n- \n
**\/readme.txt**<\/code>\u2014 Questo file \u00e8 un file readme del repository di plugin di WordPress, necessario se si desidera che il blocco sia elencato nel repository di plugin.<\/p>\n<\/li>\n- \n
**\/wholesome-plugin.php**<\/code>\u2014 Questo \u00e8 il file di caricamento principale per il plugin. Il suo nome \u00e8 stato impostato tramite lo "slug" che abbiamo inserito nello script di installazione iniziale. Accoda tutte le risorse JavaScript necessarie per il plugin.<\/p>\n<\/li>\n<\/ul>\nEsplorazione dei comandi di costruzione<\/h3>\n
Prima di poter eseguire i nostri comandi di build, dobbiamo assicurarci di essere nella cartella dei plugin. In questo esempio verremmo eseguiti cd wholesome-plugin<\/code>nel terminale per cambiare la directory nella nostra cartella dei plugin.<\/p>\nPossiamo quindi eseguire i seguenti comandi:<\/p>\n
\n- \n
**npm start**<\/code>\u2014 Avvia la build per lo sviluppo. Se apporti una modifica al plug-in, devi farlo per visualizzare le modifiche (probabilmente dovrai aggiornare anche il browser).<\/p>\n<\/li>\n- \n
**npm run build**<\/code>\u2014 Crea il codice per la produzione. Fallo se stai creando una versione di rilascio del plugin.<\/p>\n<\/li>\n- \n
**npm run format:js**<\/code>\u2014 Formatta automaticamente i file JavaScript, utilizzando le migliori pratiche.<\/p>\n<\/li>\n- \n
**npm run lint:css**<\/code>\u2014 Lints (cerca errori nei) file CSS.<\/p>\n<\/li>\n- \n
**npm run lint:js**<\/code>\u2014 Lints (cerca errori nei) file JavaScript.<\/p>\n<\/li>\n- \n
**npm run packages-update**<\/code>\u2014 Aggiorna i pacchetti di WordPress all’ultima versione.<\/p>\n<\/li>\n<\/ul>\nUtilizzeremo uno o pi\u00f9 di questi durante la modifica del plugin.<\/p>\n
Modifica del plug-in<\/h2>\n
Iniziamo rendendo modificabile il nostro blocco.<\/p>\n
Aggiungi attributi a\/src\/index.js<\/code><\/h3>\nApri \/src\/index.js<\/code>nel tuo editor e aggiungi quanto segue all’interno della registerBlockType<\/code>funzione, sotto apiVersion<\/code>:<\/p>\nattributes: {\n blockText: {\n default: 'Wholesome Plugin \u2013 hello from the editor!',\n type: 'string',\n },\n},\n<\/code><\/pre>\nQuesto ci dar\u00e0 un posto dove archiviare i dati nel nostro plugin chiamato blockText<\/code>accessibile tramite la attributes<\/code>propriet\u00e0 (prop). Nota che gli abbiamo assegnato un valore predefinito del testo originale generato dallo script di creazione del plug-in.<\/p>\nAggiungi RichText a\/src\/edit.js<\/code><\/h3>\nApri \/src\/edit.js<\/code>nel tuo editor e sostituisci l’importazione per useBlockProps<\/code>con quanto segue:<\/p>\nimport { RichText, useBlockProps } from '@wordpress\/block-editor';\n<\/code><\/pre>\nQuesto ci consentir\u00e0 di utilizzare il componente RichText nel nostro metodo di rendering di modifica.<\/p>\n
Quindi cambia l’intera funzione Modifica come segue:<\/p>\n
export default function Edit( { attributes, setAttributes }) {\n const { blockText } = attributes;\n return (<p { ...useBlockProps() }>\n <RichText\n className=\"block__text\"\n keepPlaceholderOnFocus\n onChange={ (blockText) => setAttributes( { blockText }) }\n placeholder={ __( 'Block Text', 'wholesome-plugin') }\n tagName=\"span\"\n value={ blockText }\n \/>\n <\/p>\n );\n}\n<\/code><\/pre>\nCi\u00f2 imposta il valore del RichText<\/code>componente in modo che sia lo stesso di quello memorizzato blockText<\/code>nell’attributo e la onChange<\/code>propriet\u00e0 imposta l’ blockText<\/code>attributo su ci\u00f2 che \u00e8 stato inserito nel RichText<\/code>componente.<\/p>\nEmetti gli attributi in\/src\/save.js<\/code><\/h3>\nApri \/src\/save.js<\/code>nel tuo editor e sostituisci la save<\/code>funzione con la seguente:<\/p>\nexport default function save( { attributes }) {\n const { blockText } = attributes;\n return (<p { ...useBlockProps.save() }>\n { blockText }\n <\/p>\n );\n}\n<\/code><\/pre>\nQuesto semplicemente restituisce il valore di blockText<\/code>nel paragrafo.<\/p>\nCompilazione del plugin<\/h3>\n
Apri il terminale, assicurati di essere nella directory principale del tuo plugin ed esegui il seguente comando:<\/p>\n
Lo script verr\u00e0 compilato. In caso di errori, il terminale dovrebbe informarti di cosa sono.<\/p>\n
![\"Creazione](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0df5e2a4.gif\")
Costruire il plug-in<\/p>\n
Inserimento del plugin<\/h3>\n
Assicurati di aver aggiornato il tuo post. La versione precedente del blocco potrebbe ora essere rotta, va bene, basta cancellarla e inserirne una nuova.<\/p>\n
Inserire il blocco utilizzando il simbolo pi\u00f9 in alto a sinistra dell’editor, e una volta inserito cliccare sul suo testo. Dovresti. ora \u00e8 possibile modificare il testo.<\/p>\n
![\"Creazione](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0e151e82.gif\")
Inserimento del blocco modificabile<\/p>\n
Visualizzazione del plug-in<\/h3>\n
Salva il post e visualizzalo sul front-end del sito Web, il testo che hai modificato dovrebbe essere visualizzato al posto del testo originale.<\/p>\n
![\"Creazione](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0e327430.png\")
Blocco modificabile sul front-end del sito web<\/p>\n
Se desideri che i tuoi blocchi vengano visualizzati in una categoria di blocchi personalizzata, aggiungi semplicemente il seguente codice alla radice del tuo plug-in (in questo caso wholesome-plugin.php<\/code>:<\/p>\nfunction wholesomecode_wholesome_plugin_block_categories( $categories) {\n return array_merge(\n $categories,\n [\n [\n 'slug' => 'wholesome-blocks',\n 'title' => __( 'Wholesome Blocks', 'wholesome-boilerplate' ),\n ],\n ]\n );\n}\nadd_action( 'block_categories', 'wholesomecode_wholesome_plugin_block_categories', 10, 2 );\n<\/code><\/pre>\nQuesto registrer\u00e0 una categoria di blocco personalizzata nell’inseritore di blocchi.<\/p>\n
Quindi tutto ci\u00f2 che devi fare \u00e8 regolare l’ category<\/code>argomento della registerBlockType<\/code>funzione \/src\/index.js<\/code>per fare riferimento alla categoria del tuo blocco e ricompilare:<\/p>\n\ncategory: 'wholesome-blocks',\n<\/code><\/pre>\nOra quando verrai a inserire il tuo blocco, lo troverai nella categoria di blocco appena creata:<\/p>\n
![\"Creazione](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168531-61e7d0e40fe2e.png\")
Categoria blocco personalizzato nell’inseritore blocco<\/p>\n
\n- Dai un’occhiata all’utilizzo di PHP per rendere il tuo blocco con blocchi dinamici<\/a><\/li>\n
- Guarda l’utilizzo dei meta campi dei post come attributi nel tuo blocco<\/a><\/li>\n
- Aggiungi una barra laterale del blocco con InspectorControls<\/a><\/li>\n
- Estendi il tuo plug-in aggiungendo ulteriori punti di ingresso al file webpack.config<\/a><\/li>\n<\/ul>\n