Sviluppo Gutenberg con esempi: Google Maps (parte 1)

Pochi giorni fa abbiamo pubblicato un nuovo plugin nella directory dei plugin di WordPress.org: Nelio Maps. Come rivela il nome, è un plugin per mappe che aggiunge un nuovo tipo di blocco nell'editor di WordPress. Con esso, possiamo facilmente aggiungere una mappa di Google sulle nostre pagine o post. Ecco come appare:

Nelio Maps è uno dei nostri primi plugin interamente progettati per Gutenberg. Nonostante sia un plugin relativamente semplice, è un prodotto molto utile. Da un lato, perché qualsiasi utente che desidera aggiungere mappe al proprio sito Web ora può farlo installando un plug-in semplice e leggero. D'altronde, perché qualsiasi sviluppatore che voglia sviluppare in Gutenberg ora ha un vero esempio di come creare un plugin “da zero”, semplicemente leggendo questo post.

Poiché sono consapevole che lo sviluppo di un plugin come questo non è la cosa più semplice del mondo, ho organizzato questo tutorial in tre parti diverse. Oggi vi spiego come creare il plugin “da zero” in modo da ritrovarci con lo scheletro che utilizzeremo per costruire il prodotto finale. Nel secondo post spiegherò come ottenere una mappa interattiva nell'editor di blocchi di WordPress e vedremo tutti i componenti che ho creato per realizzare il plugin. Infine, nel terzo ed ultimo post vedremo come salvare la mappa nel database e come mostrarla nel frontend .

Definire il nostro progetto e il plugin che vogliamo

Può sembrare una banalità, ma prima di intraprendere qualsiasi nuovo progetto, la prima cosa che dobbiamo fare è definire cosa vogliamo ottenere con quel progetto. A seconda delle funzionalità che vogliamo includere, avremo un diverso insieme di requisiti. Quindi definiamo che tipo di plugin per mappe vogliamo implementare in questo tutorial.

Questi i requisiti del progetto:

1. Si dovrebbe essere in grado di aggiungere una mappa (o più di una) alle proprie pagine o post.
2. Dovrebbe essere possibile centrare la mappa ovunque
   
   • sia trascinando la mappa con il mouse
   • o cercando la posizione in una casella di ricerca.
3. La dimensione della mappa dovrebbe essere regolabile , sia in larghezza che in altezza
4. La mappa dovrebbe includere stili diversi (bianco e nero, tavolozze di colori personalizzate, ecc.)
5. L'utente dovrebbe essere in grado di aggiungere un indicatore nella mappa.
6. Se è presente un marker, la mappa deve essere accompagnata da una casella di testo con informazioni aggiuntive sul marker.

Ambizioso, vero? Bene, iniziamo!

Come creare un plug-in Gutenberg "da zero"

Se segui il nostro blog, probabilmente avrai visto che qualche giorno fa Antonio ha pubblicato un post in cui spiegava come creare plugin usando un plugin boilerplate che abbiamo creato in Nelio. Se non hai ancora letto il suo post, ti consiglio di leggerlo prima, perché il nostro plugin sarà basato sul plugin boilerplate wp-beb che Antonio spiega lì.

Per iniziare il nostro progetto, la prima cosa che faremo è rispecchiare il plug-in boilerplate di Nelio. Innanzitutto, crea un nuovo repository nel tuo account GitHub. Quindi, segui i passaggi descritti nelle pagine della guida di Github per rispecchiare il nostro boilerplate:

 git clone --bare https://github.com/avillegasn/wp-beb.git cd wp-beb.git git push --mirror https://github.com/your-username/your-repo.git

Una volta che il tuo progetto è pronto, segui le istruzioni che trovi in README.md per compilare il progetto e poterlo così vedere nel tuo sito WordPress.

Come trasformare il plug-in Boilerplate nel tuo plug-in

Come appare nella documentazione standard del plugin, la prima cosa che dobbiamo fare è cambiare il nome del progetto nel codice sorgente. Cioè, devi cambiare tutte le occorrenze di wp-beb (sia maiuscole che minuscole, con trattini o trattini bassi) con il nome del nostro plugin (nel mio caso, nelio-maps ).

Per questo, possiamo usare il seguente script:

Tieni solo a mente che dovrai sostituire la stringa nelio maps int righe 5, 8, 9 e 10 con qualunque sarà il nome del tuo plugin.

D'altra parte, ora è anche un buon momento per modificare la documentazione del plugin. Da un lato devi modificare i file README.md e readme.txt per riflettere lo scopo del tuo nuovo plugin (senza dimenticare di menzionare il fatto che stai usando il nostro boilerplate come base, ovviamente). Dall'altro, dovresti cambiare il primo commento nel file PHP principale, poiché sono i dati che WordPress utilizza per visualizzare il plug-in nella schermata Plugin .

Puoi vedere come ho apportato tutte queste modifiche nel primo commit del progetto Nelio Maps.

Come pulire la piastra della caldaia del plug-in da roba non necessaria

Il plug-in boilerplate di Nelio include, per impostazione predefinita, un paio di componenti: (a) un blocco demo e (b) un plug-in Gutenberg. Poiché ci interessa solo creare un blocco (la mappa), elimineremo tutto ciò che è rimasto (il plug-in Gutenberg).

Questo passaggio è abbastanza semplice, poiché fondamentalmente si basa sull'"eliminazione" di cose non necessarie dal plug-in. Nello specifico, dovremmo:

1. Elimina tutto il contenuto che appare nella cartella delle assets (che è dove è stato aggiunto il plug-in Gutenberg, il suo stile e la sua icona).
2. Pulisci il file webpack.config.js , poiché ci sono un paio di regole che hanno utilizzato i file nelle assets che abbiamo appena rimosso.
3. Pulisci il file principale del plugin, poiché accoda un foglio di stile e un file JavaScript che non esistono più.

Puoi vedere tutte le modifiche in questo commit. Se compili di nuovo il codice, vedrai che il blocco Demo esiste ancora, ma il plugin Gutenberg che è apparso nell'angolo in alto a destra dello schermo no.

Sommario

Nel post di oggi abbiamo visto come creare un plugin per Gutenberg. Per prima cosa abbiamo definito il tipo di progetto che vogliamo realizzare e ne abbiamo individuato i requisiti. Successivamente, abbiamo visto i passaggi necessari per adattare il plug-in boilerplate di Nelio a un nuovo progetto. Cioè, abbiamo visto come clonare il progetto boilerplate di Nelio e pulirlo per soddisfare le nostre esigenze particolari.

Ci vediamo la prossima settimana con la seconda parte di questo tutorial, dove modificheremo il blocco Demo in modo che esegua tutte le funzioni che abbiamo descritto all'inizio di questo post.

Immagine in primo piano di Brett Zeck su Unsplash .