wp<\/code>Il pacchetto globale e la destrutturazione<\/h2>\nQuando ci troviamo in un file Javascript accodato nell’editor Gutenberg, abbiamo accesso a un oggetto\/pacchetto globale: wp<\/code>. Questo \u00e8 un oggetto Javascript molto, molto grande e contiene un sacco di componenti e funzioni utili che useremo per creare blocchi. Quando scrivi Javascript per blocchi personalizzati ti riferirai a wp<\/code>parecchio.<\/p>\nPertanto \u00e8 comune, sia nel moderno Javascript che in React, destrutturare ci\u00f2 che vogliamo utilizzare da esso. Fondamentalmente significa solo che definiamo variabili locali da parti di una struttura pi\u00f9 grande. Ad esempio, la prima funzione che useremo \u00e8 registerBlockType()<\/code>che esiste all’interno di wp.blocks<\/code>. Potremmo invocare la funzione in questo modo:<\/p>\nwp.blocks.registerBlockType();<\/code><\/pre>\nMa \u00e8 pi\u00f9 facile destrutturarlo in questo modo:<\/p>\n
const { registerBlockType } = wp.blocks;\nregisterBlockType();<\/code><\/pre>\nOra puoi fare riferimento direttamente alla funzione senza anteporre ad essa la sua struttura. Diventa molto pi\u00f9 utile quando ci riferiamo a funzioni o componenti che ripeteremo spesso.<\/p>\n
Effettueremo la ristrutturazione in questa serie e man mano che avanziamo nel tutorial vedremo quanto diventa pi\u00f9 leggibile e pi\u00f9 breve il nostro codice.<\/p>\n
Registrazione di un nuovo blocco<\/h2>\n
Nel pacchetto \u00e8 registerBlockType()<\/code>disponibile la funzione per la registrazione di un nuovo blocco personalizzato. wp.blocks<\/code>Accetta due parametri; prima una stringa con lo spazio dei nomi e il nome del blocco e, in secondo luogo, un oggetto con la configurazione completa del blocco.<\/p>\nGutenberg si aspetta che tutti i blocchi abbiano uno spazio dei nomi e un nome, definiti con una barra nel mezzo. Lo spazio dei nomi serve a garantire che il nome del blocco non sia in conflitto con altri blocchi che potrebbero utilizzare lo stesso nome. Tutti i blocchi in WordPress utilizzano lo spazio dei nomi core<\/code>. Ad esempio, il blocco di paragrafo standard in WordPress ha il nome core\/paragraph<\/code>. Se scegli un altro spazio dei nomi puoi anche creare un blocco denominato paragrafo senza causare problemi.<\/p>\nDecidi uno spazio dei nomi della versione slug che sia unico per te. User\u00f2 lo spazio dei nomi awp<\/code>(versione breve di A White Pixel) in questa serie.<\/p>\nApri il file sorgente che abbiamo creato nell’ultimo passaggio; src\/block-awhitepixel-myfirstblock.js<\/code>, in un editore. Per prima cosa chiameremo registerBlockType<\/code>da destructed wp.blocks<\/code>, con il nome awp\/firstblock<\/code>. Modifica il tuo nome e spazio dei nomi mentre procedi.<\/p>\nconst { registerBlockType } = wp.blocks;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n \/\/ Your block configuration and code here\n});<\/code><\/pre>\nNel secondo parametro, l’oggetto di configurazione del blocco, \u00e8 necessario definire alcune propriet\u00e0 affinch\u00e9 venga registrato correttamente. Ricorda che la configurazione del blocco \u00e8 un oggetto, il che significa che devi scrivere tutto come coppie chiave + valore, separate da virgola. Ci sono alcune possibili propriet\u00e0 di configurazione, quindi esaminiamole e vedremo il codice finale alla fine.<\/p>\n
Richiesto: titolo<\/h3>\n
La prima propriet\u00e0 richiesta \u00e8 title<\/code>. Questo \u00e8 il nome che apparir\u00e0 quando selezioni tra i blocchi. Imposta questa propriet\u00e0 come qualsiasi nome desideri in una stringa.<\/p>\nAggiungeremo quanto segue come titolo:<\/p>\n
title: 'My first block',<\/code><\/pre>\nPS: Rivisiteremo il modo in cui scriviamo tutte le stringhe nel nostro blocco per assicurarci che possano essere tradotte nella parte 8. Ma per ora lo manterremo semplice e scriveremo semplicemente stringhe.<\/p>\n
Obbligatorio: categoria<\/h3>\n
La propriet\u00e0 category<\/code>definisce dove in quale categoria di blocco apparir\u00e0 il tuo blocco quando selezioni i blocchi da inserire nell’editor. I valori possibili sono common<\/code>, formatting<\/code>, layout<\/code>, widgets<\/code>, embed<\/code>.<\/p>\nMettiamola in common<\/code>, la prima categoria di blocco.<\/p>\ncategory: 'common',<\/code><\/pre>\nOpzionale: icona<\/h3>\n
Se hai usato Gutenberg, probabilmente avrai notato che tutti i blocchi hanno icone. Puoi aggiungere un’icona al tuo blocco con una stringa che fa riferimento a qualsiasi Dashicon di WordPress<\/a> oppure puoi fornire un svg<\/code>elemento personalizzato.<\/p>\nScelgo solo uno dei dashicon di WordPress, lo smiley<\/a>, ma puoi scegliere quello che vuoi. Nota che salti l’inclusione di "dashicon-" nel nome della classe dell’icona.<\/p>\nicon: 'smiley',<\/code><\/pre>\nFacoltativo: descrizione<\/h3>\n
Puoi fornire una descrizione che verr\u00e0 visualizzata nella barra laterale Impostazioni (sul lato destro) quando il blocco \u00e8 attivo.<\/p>\n
Aggiungo solo un breve testo come esempio:<\/p>\n
description: 'Learning in progress',<\/code><\/pre>\nFacoltativo: parole chiave<\/h3>\n
Gutenberg supporta una funzionalit\u00e0 di ricerca quando si scelgono i tipi di blocco. \u00c8 possibile fornire una serie di possibili corrispondenze nella propriet\u00e0 keywords<\/code>. Senza keywords<\/code>di te troveresti il \u200b\u200btuo blocco solo cercando il suo nome.<\/p>\nAggiunger\u00f2 example<\/code>e test<\/code>, in modo da poter trovare facilmente il nostro blocco personalizzato quando iniziamo a digitare una di queste parole chiave.<\/p>\nkeywords: ['example', 'test'],<\/code><\/pre>\nFacoltativo: attributi<\/h3>\n
La propriet\u00e0 attributes<\/code>\u00e8 una propriet\u00e0 molto importante che rivisiteremo abbastanza spesso in questa serie di tutorial. Qui \u00e8 dove memorizzi i tuoi dati strutturati e le informazioni di input dell’utente per il tuo blocco. Puoi immaginarlo come variabile. Non lo aggiungeremo per ora, ma torneremo sicuramente su questo molto presto.<\/p>\n(Tipo di) richiesto: modifica e facoltativo: salva<\/h3>\n
All’interno edit<\/code>e save<\/code>le propriet\u00e0 \u00e8 in realt\u00e0 dove aggiungerai tutto il codice sia per l’output dell’editor che per il rendering del frontend. Entrambe queste propriet\u00e0 si aspettano una funzione che dovrebbe restituire un output.<\/p>\nLa propriet\u00e0 edit<\/code>descrive la struttura del blocco all’interno dell’editor. La save<\/code>propriet\u00e0 gestisce fondamentalmente due cose; l’output del tuo blocco nel frontend, ma anche la struttura di come il tuo blocco viene salvato nel database. Lavorerai principalmente in edit<\/code>quanto \u00e8 qui che aggiungi input per inserire o scegliere cose e aggiornare i dati del blocco. La save<\/code>funzione non dovrebbe aggiornare o modificare i dati in alcun modo, dovrebbe solo emettere.<\/p>\nGutenberg deve essere in grado di ricostruire il tuo blocco con tutte le sue impostazioni nell’editor da ci\u00f2 che viene restituito nella save<\/code>funzione (e negli attributi). Se Gutenberg apre un post in cui l’output del blocco salvato in precedenza differisce (anche solo leggermente) da ci\u00f2 che \u00e8 definito in save, il tuo blocco non sar\u00e0 pi\u00f9 valido.<\/p>\n![\"Crea](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151978-61e4d21609214.png\")
<\/a><\/p>\nPosso garantirti che lo incontrerai molto durante lo sviluppo di blocchi personalizzati. Quando ci\u00f2 accade \u00e8 necessario rimuovere il blocco (dai punti nella barra degli strumenti) e aggiungerlo nuovamente. Consiglio anche di eseguire un aggiornamento del browser (F5 o CTRL+R).<\/p>\n
WordPress ha una pagina di documentazione dedicata<\/a> per le funzioni di modifica e salvataggio del blocco se vuoi saperne di pi\u00f9.<\/p>\nPer quanto riguarda il nostro primo blocco, produciamo qualcosa di base. Restituiremo lo stesso per entrambi edit<\/code>e save<\/code>; un “:)" avvolto in <div><\/code>. Dopotutto, l’icona del blocco \u00e8 una faccina.<\/p>\nedit:() => { \n return <div>:)<\/div> \n},\nsave:() => { \n return <div>:)<\/div> \n}<\/code><\/pre>\nAltre propriet\u00e0<\/h3>\n
Ci sono pi\u00f9 propriet\u00e0 facoltative per registerBlockType<\/code>; parent<\/code>, supports<\/code>, transforms<\/code>, example<\/code>, e styles<\/code>. Salteremo questi per ora poich\u00e9 la maggior parte sono per la costruzione di blocchi pi\u00f9 avanzati o personalizzati. Se sei interessato a leggere di pi\u00f9 su questi, dai un’occhiata alla documentazione di WordPress<\/a>.<\/p>\nCodice blocco registro finale<\/h2>\n
Il nostro codice ora assomiglia a questo.<\/p>\n
const { registerBlockType } = wp.blocks;\n\u00a0\nregisterBlockType('awp\/firstblock', {\n title: 'My first block',\n category: 'common',\n icon: 'smiley',\n description: 'Learning in progress',\n keywords: ['example', 'test'],\n edit: () => { \n return <div>:)<\/div> \n },\n save: () => { \n return <div>:)<\/div> \n }\n});<\/code><\/pre>\nCon questo abbiamo abbastanza per registrare con successo il nostro blocco come blocco personalizzato. Vediamolo in pratica all’interno dell’editor di Gutenberg.<\/p>\n
Ti sei ricordato di compilare il tuo Javascript? Nel passaggio precedente abbiamo appreso che non possiamo caricare questo file Javascript in Gutenberg; abbiamo bisogno della versione compilata. Di solito ti svilupperesti con npm run start<\/code>l’esecuzione in background, oppure puoi eseguire solo npm run build<\/code>una volta ora. Questo dovrebbe compilare il nostro Javascript sorgente e posizionarlo dove l’hai definito per essere inserito e nominato nel tuo webpack.config.js<\/code>.<\/p>\nLa parte PHP della registrazione di un blocco<\/h2>\n
Per ogni blocco \u00e8 necessario registrare il file Javascript e questo \u00e8 proprio come registreresti qualsiasi altro script in WordPress, utilizzando [wp_register_script](https:\/\/developer.wordpress.org\/reference\/functions\/wp_register_script\/)()<\/code>. Si noti che registriamo lo script, non lo accodiamo. Questo perch\u00e9 abbiamo anche bisogno di chiamare una funzione PHP per registrare ogni blocco personalizzato e quella funzione \u00e8 responsabile dell’accodamento dello script quando \u00e8 necessario.<\/p>\nPreferisco mantenere il codice relativo a Gutenberg in un file separato nei miei temi. Ma puoi, e lo faremo in questo tutorial, scrivere semplicemente tutto il codice PHP direttamente all’interno del tema functions.php<\/code>per motivi di semplicit\u00e0.<\/p>\nConsiglio di usare l’ init<\/code>hook per la tua funzione e non enqueue_block_assets<\/code>. Possiamo mettere insieme sia la registrazione dello script che la registrazione del blocco.<\/p>\nadd_action('init', function() {\n wp_register_script('awp-myfirstblock-js', get_template_directory_uri(). '\/assets\/js\/gutenberg\/block-awhitepixel-myfirstblock.js');\n\u00a0\n register_block_type('awp\/firstblock', [\n 'editor_script' => 'awp-myfirstblock-js',\n ]);\n});<\/code><\/pre>\nLa funzione PHP che useremo per registrare un nuovo blocco \u00e8 [register_block_type](https:\/\/developer.wordpress.org\/reference\/functions\/register_block_type\/)()<\/code>. Allo stesso modo di Javascript, registerBlockType()<\/code>accetta due parametri; lo spazio dei nomi e il nome del blocco e un array con argomenti. Assicurati di fornire lo stesso spazio dei nomi e lo stesso nome in PHP come in Javascript.<\/p>\nNel secondo argomento ci sono alcuni possibili argomenti (alcuni dei quali torneremo pi\u00f9 avanti in questa serie). Ma il pi\u00f9 importante \u00e8 editor_script<\/code>dove si fornisce l’handle (primo parametro di wp_register_script()<\/code>) dello script registrato.<\/p>\nE questo \u00e8 tutto!<\/p>\n
Il nostro blocco nell’editor di Gutenberg<\/h2>\n
Ora, quando aggiorni il tuo editor in alcuni post, dovresti trovare il nostro blocco, aprendo la categoria Comune o cercando una qualsiasi delle parole chiave o del nome che hai fornito.<\/p>\n
![\"Crea](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151978-61e4d216d1cdb.png\")
<\/a>![\"Crea](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151978-61e4d217e1762.gif\")
<\/a><\/p>\nIl nostro blocco rende un semplice ":)" sia nell’editor che nel frontend. A partire da ora non puoi modificare nulla nel blocco, ma questo \u00e8 ci\u00f2 che impareremo nei prossimi passaggi!<\/p>\n