Share
Il nuovo editor WordPress (nome in codice Gutenberg) è previsto per il rilascio nella versione 5.0. Ora è il momento perfetto per fare i conti con esso prima che arrivi al nucleo di WordPress.
Ti mostrerò come lavorare con l'API di blocco e creare blocchi di contenuto molto personali che puoi utilizzare per creare post e pagine.
Non c'è ancora una data precisa per quando verrà rilasciato WordPress 5.0, ma dovrebbe essere un po 'di tempo entro i prossimi mesi. Fino ad allora, Gutenberg è disponibile come plugin standalone.
Consiglio vivamente di provare il nuovo editor Gutenberg se non lo hai già fatto. È molto facile da installare direttamente dal tuo amministratore di WordPress. Tuttavia, poiché questa è ancora una versione beta del nuovo editor, non è consigliabile utilizzarla ancora sui siti di produzione. Conservalo per i siti di sviluppo locale solo per ora.
Inoltre, avere Gutenberg installato è fondamentale se si desidera seguire questo tutorial. In questo modo, puoi provare a creare blocchi personalizzati. Lo sviluppo del nuovo editor è stato rapidamente accelerato negli ultimi mesi, con diverse versioni fino ad ora nel 2018. L'ultima versione di Gutenberg è attualmente 2.7.0 al momento della stesura di questo articolo..
Con ogni versione, vengono aggiunte nuove funzionalità e l'interfaccia dell'editor viene costantemente migliorata in base al feedback degli utenti. Sta iniziando a sembrare molto più fluido rispetto alle versioni precedenti. Inoltre, molti bug sono stati corretti, rendendo l'editor molto più robusto.
Gutenberg offre un nuovo modo di creare contenuti di post tramite "blocchi", che possono essere impilati uno sopra l'altro per formare una pagina completa. Ogni singolo blocco esiste indipendentemente da altri blocchi e può contenere quasi tutti i markup, gli stili e il JavaScript che desideri.
Nel corso di questo tutorial, copriremo tutto ciò che è necessario sapere sull'API del blocco in modo da poter iniziare a creare i propri blocchi personalizzati subito. Una volta acquisiti i fondamenti, creare blocchi più complessi è più facile di quanto si possa pensare!
Il progetto Gutenberg è una grande novità per WordPress per un altro motivo importante. È costruito su React. Proprio così, per la prima volta in WordPress, React sarà incluso nel core! Questa è una grande notizia per gli sviluppatori di temi e plugin, dato che React può essere facilmente aggiunto a qualsiasi pagina sfruttando le librerie React e ReactDOM incluse nel core di WordPress.
Molto presto sarai in grado di creare componenti dell'interfaccia utente per tutti i tuoi progetti WordPress direttamente in React. In precedenza, se si desidera utilizzare le librerie React e ReactDOM, è necessario includerle manualmente. Avendoli nel nucleo rende molto più conveniente.
Pensa a quanto sarebbe fantastico creare una schermata di opzioni del plugin interamente in React! O che ne pensi di alcuni fantastici controlli avanzati di personalizzazione? Questi nuovi strumenti offriranno agli sviluppatori molta libertà e flessibilità per creare alcune grandi interfacce utente interattive.
Prevedo che lo sviluppo di WordPress nei prossimi due anni sarà molto interessante e anche molto divertente!
Il concetto di blocchi nel nuovo editor è un vero cambiamento di turno rispetto all'attuale editor basato su TinyMCE, quindi diamo un'occhiata più da vicino a quale blocco ci troviamo prima di immergerci nell'API del blocco. Pensa ai blocchi come a scatole nere, ognuna contenente un mucchio di markup, stili e JavaScript racchiusi in una comoda entità chiamata "blocco".
Quando un blocco viene aggiunto all'editor, viene visualizzata un'anteprima di come apparirà sul front-end. Quasi tutti i blocchi hanno impostazioni per personalizzare ulteriormente il loro aspetto e / o comportamento.
Alcuni dei blocchi disponibili di default nel nuovo editor sono:
Questo ti dà un'idea del tipo di contenuto che puoi aggiungere all'editor usando i blocchi inclusi nel nuovo editor. Tutti questi tipi di blocchi sono utili ma abbastanza semplici, quindi aspettati un sacco di plugin per iniziare a comparire con blocchi molto più completi per aggiungere quasi tutti i tipi di contenuti che puoi immaginare.
Potresti aver già pensato ad alcuni blocchi di contenuti che ti servono per i tuoi progetti. Se nessuno di questi è disponibile in Gutenberg, probabilmente sono buoni candidati per creare il tuo blocco personalizzato.
Ti consigliamo di provare il codice presentato in questa serie di tutorial poiché è il modo migliore per imparare a creare i tuoi blocchi utilizzando l'API di blocco. Prima di tutto leggi il tutorial per capire come funziona l'API del blocco, ma torna indietro e prova un po 'del codice e inizia a creare alcuni blocchi!
Questa è una serie di tutorial di livello medio-avanzato, quindi si presume che tu non sia nuovo nello sviluppo di WordPress. Per ottenere il massimo da questa serie, è necessario avere almeno una conoscenza pratica di quanto segue:
Se hai bisogno di rispolverare uno di questi argomenti, può essere una buona idea farlo prima di procedere. Spiegherò i concetti mentre procediamo, ma è al di fuori dello scopo del tutorial spiegare ogni piccolo dettaglio.
È prassi comune creare blocchi personalizzati in WordPress usando JSX, ma questo non è assolutamente necessario. Se sei abituato a sviluppare componenti React in JavaScript vaniglia, puoi farlo anche in WordPress. La scelta è tutta tua. Tuttavia, la maggior parte del codice di blocco che incontrerai sarà scritto in JSX (incluso questo tutorial), quindi troverai più facile capire i concetti se usi anche JSX.
Il progetto Gutenberg è ancora molto in evoluzione, quindi alcune cose potrebbero essere soggette a cambiamenti anche quando leggerete questo tutorial. Ciò potrebbe includere modifiche all'interfaccia dell'editor, nuovi componenti principali, ecc.
Tuttavia, il nuovo editor è piuttosto stabile ora e le funzionalità aggiunte di recente, come i blocchi nidificati e il riordino del trascinamento / rilascio, sono piuttosto eccitanti. Anche se alcuni dei dettagli minori di Come implementare i blocchi può cambiare, la cosa importante da ricordare è il concetto generale di blocchi e come è possibile utilizzarli per creare qualsiasi tipo di contenuto.
Se ti blocchi, ti consiglio di dare un'occhiata al manuale ufficiale di Gutenberg, che è tenuto aggiornato con le ultime modifiche. Controlla anche il progetto Gutenberg su GitHub per ispezionare il codice sorgente e registrare eventuali problemi che potresti incontrare.
Ciò aiuterà il progetto a diventare più forte, più le persone lo testeranno. Questa è un'altra grande ragione per iniziare a sviluppare blocchi ora, prima che ufficialmente facciano parte di WordPress!
Per seguire insieme al codice in questo tutorial, avrai bisogno di quanto segue:
Se non si dispone già di un ambiente di sviluppo locale, è possibile utilizzare qualcosa come Local by Flywheel o DesktopServer poiché entrambi hanno versioni gratuite disponibili e supportano più sistemi operativi.
Assicurati di utilizzare le ultime versioni di WordPress e il plug-in Gutenberg per assicurarti di utilizzare tutte le funzionalità più recenti. Inoltre, ci sono alcuni grandi editor di codice là fuori, quindi se non ne hai già uno installato allora dai un'occhiata a editor gratuiti come Visual Studio Code o Atom, che dovrebbero essere più che sufficienti.
Per creare facilmente nuovi blocchi, utilizzeremo un toolkit relativamente nuovo chiamato creare-Guten-block. Ti consente di avviare rapidamente un nuovo plug-in contenente tutte le impostazioni e il codice di avviamento necessari per creare blocchi. È anche un toolkit di configurazione zero, quindi funziona subito fuori dalla scatola in modo simile a Create-reagiscono-app toolkit per l'impalcatura di nuove app React con il minimo sforzo. Quindi se hai mai usato Create-reagiscono-app, saprai cosa aspettarti.
Diamo un'occhiata ora a come possiamo usare questo strumento per creare blocchi Gutenberg. Apri una finestra di terminale all'interno della cartella dei plugin (/ Wp-content / plugins /) per il tuo sito di sviluppo locale e inserisci quanto segue:
npx create-guten-block my-custom-block cd my-custom-block npm start
(Nota: npm v5.2 + è richiesto per usare il NPX comando.)
Dopo alcuni minuti, verrà creato un nuovo plug-in all'interno di una cartella denominata my-custom-block contenente tutti i file e gli strumenti necessari per creare blocchi usando React! Non male, eh?
Il nome del plugin nell'amministratore di WordPress sarà my-custom-block - CGB Gutenberg Block Plugin. Vai avanti e attivalo.
Il plugin crea un nuovo blocco che è disponibile per noi nell'editor di Gutenberg. Per testare il nostro nuovo blocco, vai all'editor dei post e fai clic sul testo segnaposto etichettato Scrivi la tua storia.
Quindi, colpisci / chiave per visualizzare una finestra pop-up che possiamo usare per cercare tutti i blocchi disponibili.
Nota: ci sono altri modi per cercare un blocco, ma mi piace usare / per visualizzare la finestra del blocco di ricerca piuttosto rapidamente e comodamente. Ma usa il metodo con cui ti senti più a tuo agio.
Con la casella di ricerca aperta, inizia a digitare my-custom-block e selezionare my-custom-block - Blocco CGB. Questo mostrerà il nostro blocco personalizzato all'interno della finestra dell'editor.
Al momento è solo un blocco di piastre, che in realtà non fa altro che visualizzare il testo segnaposto all'interno di una scatola colorata. Tuttavia, evidenzia un aspetto interessante della creazione di blocchi.
Clic Visualizza post per vedere come apparirà il post ai visitatori del sito.
Come puoi vedere, sia il contenuto che gli stili del blocco renderizzato sono diversi sul front-end e sul back-end. Questo vale anche per il codice JavaScript, che può essere diverso anche per il front-end.
Il motivo della differenza nel rendering è dovuto al fatto che durante la creazione di blocchi, è necessario dichiarare specificamente funzioni di rendering front-end e back-end separate.
Questo perché molti blocchi richiedono la visualizzazione di ulteriori elementi dell'interfaccia utente all'interno dell'editor dei post per aiutare a configurare le impostazioni dei blocchi. Poiché questo è rilevante solo per l'editor di post, è completamente ridondante quando si esegue il rendering del blocco sul lato anteriore. Pertanto, si specifica l'output che deve essere visualizzato sul front-end in una funzione di rendering separata.
Sebbene questo approccio abbia senso e funzioni bene, solleva problemi di duplicazione del codice. Se non stai attento, potresti finire con molte definizioni duplicate di contenuti.
Ove possibile, è una buona idea separare il contenuto comune alle funzioni di rendering front-end e back-end per ridurre la duplicazione. Seguiremo questo approccio in questa serie di tutorial.
In questo tutorial, ho introdotto il concetto di cosa sia un blocco e perché il nuovo editor Gutenberg diventerà una grande novità quando viene fornito con WordPress 5.0. È un vero cambiamento di turno rispetto all'attuale editor basato su TinyMCE.
Per aiutare a creare blocchi rapidamente, creare-Guten-block è uno strumento molto utile che ti consente di creare un plug-in completo contenente un blocco di avvio funzionante pronto per la personalizzazione.
Abbiamo risolto il problema vedendo come utilizzare il nostro blocco personalizzato all'interno del nuovo editor di post e abbiamo scoperto che il rendering su front e back end può sembrare molto diverso. In Gutenberg, non è necessario abbinare l'output di sorta!
Nella parte 2, entreremo nello specifico dell'API del blocco e su come utilizzarlo per creare blocchi personalizzati.
Nel frattempo, controlla alcuni dei nostri altri post su WordPress Gutenberg!
Accentsconagua