La tua guida definitiva all'utilizzo del prossimo editor Gutenberg di WordPress

Nei prossimi mesi, il modo in cui crei contenuti con WordPress cambierà radicalmente. L'attuale editor di testo che usi da anni scomparirà, sostituito dal nuovissimo WordPress Editor Gutenberg.

Un grande cambiamento come questo probabilmente sta facendo suonare dei campanelli d'allarme nella tua testa...

I tuoi flussi di lavoro verranno interrotti? I tuoi attuali plugin e temi continueranno a funzionare? Come puoi continuare a creare ottimi contenuti con questo nuovo editor?

In questo post imparerai le risposte a queste domande e molto altro ancora .

Questa è la guida definitiva all'editor Gutenberg di WordPress per chiunque crei contenuti con WordPress.

Imparerai:

1. Che cos'è l'editor Gutenberg di WordPress, perché/quando arriverà e le risposte ad alcune domande frequenti di base.
2. Come puoi imitare l'attuale funzionalità dell'editor e creare un post sul blog di base con Gutenberg.
3. Alcuni suggerimenti nascosti per lavorare in modo più produttivo con Gutenberg ( basato sulla mia esperienza pratica nell'usarlo su un sito live ).
4. Come sfruttare le nuove funzionalità di Gutenberg per beneficiare di contenuti e funzionalità di layout a cui non hai mai avuto accesso prima.

Questo nuovo editor è in arrivo, qualunque cosa accada, quindi prenditi del tempo per familiarizzare con l'editor Gutenberg di WordPress in modo da essere pronto a partire subito dopo il suo rilascio!

Che cos'è l'editor Gutenberg e perché dovrebbe interessarti

L'editor Gutenberg è una rivisitazione completa dell'attuale editor di testo di WordPress che utilizzi per creare post o pagine con WordPress.

Dico reimmaginazione piuttosto che riprogettazione perché sta veramente ricostruendo l'esperienza di editing da zero .

Una volta completato lo sviluppo, Gutenberg sostituirà l'attuale editor di testo di WordPress e utilizzerai l'editor Gutenberg per creare contenuti in futuro ( anche se avrai delle opzioni se vuoi restare fedele all'esperienza attuale, ne parleremo più avanti ).

Quindi cosa rende l'editor Gutenberg una "reimmaginazione completa"?

Innanzitutto, iniziamo con un aggiornamento di ciò che intendo per "editor di WordPress". Se non sei sicuro di cosa sto parlando, ecco come appare l'attuale editor di WordPress TinyMCE :

Se hai utilizzato Wordable per pubblicare post di WordPress direttamente da Google Docs, potresti non passare molto tempo lì! Ma scommetto che ci sono ancora buone probabilità che tu conosca bene il funzionamento dell'editor.

L'editor di Gutenberg introduce qualcosa chiamato "Blocchi"

L'attuale editor di testo di WordPress è come un lungo documento di Microsoft Word. Gutenberg cambia quella dinamica con qualcosa chiamato blocchi .

Piuttosto che un singolo campo di modifica, ogni "cosa" in Gutenberg è il suo "blocco". Se hai mai scritto un post con Medium, è la stessa idea .

Per esempio:

• Ogni paragrafo di testo è il proprio blocco separato.
• Un'immagine è il suo stesso blocco.
• Un video di YouTube è il suo blocco.
• ... hai reso l'idea.

Quindi assembli il tuo contenuto usando una serie di blocchi. Ad esempio, ecco come appare lo stesso contenuto dall'alto in Gutenberg. Ha quattro diversi blocchi:

• Tre blocchi di paragrafo separati
• Un blocco di immagini

L'importanza di questo approccio basato su blocchi è che sblocca funzionalità più avanzate per il contenuto e il layout.

Ad esempio, sarai in grado di introdurre colonne, inserire e stilizzare pulsanti ed eseguire molte altre azioni che non puoi eseguire con l'editor corrente o che richiederebbero HTML/CSS con l'editor corrente.

Più avanti, tratterò i blocchi in modo molto più dettagliato. Ma se vuoi bagnarti i piedi in questo momento, puoi giocare con una demo live dell'editor Gutenberg andando qui : non è necessario installare nulla.

Ecco perché il Core Team di WordPress sta apportando questo cambiamento

Per la maggior parte della sua vita, WordPress ha utilizzato lo stesso editor di base (TinyMCE). Anche se il design potrebbe essere cambiato qua e là, le funzionalità di base non hanno mai vacillato.

Allora perché il cambiamento adesso? Se ha funzionato negli ultimi ~15 anni, perché non può continuare a funzionare per i prossimi 15 anni?

Ci sono alcune ragioni.

Prima di tutto, l'editor attuale è troppo limitante per gli utenti occasionali di questi tempi. Sebbene WordPress renda possibile creare qualsiasi cosa tu possa immaginare, lo fa solo se conosci un po' di HTML/CSS .

Combinalo con la concorrenza di costruttori di siti Web visivi come Squarespace e Wix ( che hanno entrambi ~ raddoppiato il loro utilizzo nell'ultimo anno ) e puoi capire perché il team principale di WordPress ha ritenuto che WordPress avesse bisogno di un'esperienza di modifica più flessibile per mantenere il suo vantaggio.

In secondo luogo, Gutenberg offre la capacità di unificare le numerose interfacce disparate di cui dispongono gli utenti WordPress impegnati. Non voglio diventare troppo tecnico qui. Ma se stai utilizzando plug-in di terze parti, probabilmente hai vari shortcode, meta box e aree delle impostazioni che fanno parte dei tuoi flussi di lavoro di WordPress.

Gutenberg può unificare tutte queste diverse interfacce nel sistema a blocchi.

Terzo, Gutenberg introduce le moderne tecnologie in WordPress. Nello specifico, Reagisci. Questo non solo aiuta l'editor stesso, ma consente anche agli sviluppatori di terze parti di lavorare con quelle tecnologie moderne.

Infine, la modifica dei contenuti è solo l'inizio di questo processo. Mentre in questo momento , Gutenberg cambierà semplicemente il modo in cui crei post e pagine, l'obiettivo finale è far sì che Gutenberg passi alla progettazione visiva completa del sito web.

I pro e i contro del passaggio al nuovo editor Gutenberg

Quindi... Gutenberg sarà una buona cosa per te?

Bene, in realtà è stato un problema piuttosto controverso nella comunità di WordPress, con discussioni appassionate da entrambe le parti.

Da un lato, ci sono persone che pubblicizzano i vantaggi di Gutenberg:

• Più possibilità per i contenuti : Gutenberg aggiunge blocchi predefiniti per pulsanti, pull quotes, ecc. Questo ti dà un maggiore controllo sui tuoi contenuti senza la necessità di CSS personalizzati. Inoltre, i plug-in di terze parti possono aggiungere i propri blocchi di contenuto, il che ti offre ancora più flessibilità.
• Più possibilità per il layout : oltre alle nuove possibilità di contenuto, ottieni anche nuove opzioni di layout, come la possibilità di includere colonne o separatori senza bisogno di codice personalizzato.
• Esperienza unificata : anziché dover utilizzare shortcode per inserire contenuti da plug-in di terze parti, tali plug-in saranno in grado di creare i propri blocchi, il che crea un'esperienza di modifica più semplice e unificata.
• Mobile-friendly : Gutenberg funziona perfettamente sui dispositivi mobili per impostazione predefinita, il che ti consente di creare o modificare contenuti da qualsiasi dispositivo.

Ma dall'altro lato, ci sono persone che sottolineano alcuni grandi problemi con un progetto così ambizioso:

• Compatibilità con le versioni precedenti : circa il 32% dell'intera Internet utilizza l'attuale editor di WordPress, il che rende molto difficile il passaggio a un'esperienza di modifica completamente nuova. Fondamentalmente, ci sono così tanti casi limite con tutti quei vecchi contenuti che è difficile garantire una transizione senza soluzione di continuità.
• Difficile per gli sviluppatori : gli sviluppatori di temi e plug-in dovranno integrare la compatibilità con Gutenberg nei loro plug-in e temi e le estensioni precedenti potrebbero non funzionare sempre perfettamente. Esistono decine di migliaia di plug-in meno recenti che potrebbero riscontrare problemi di compatibilità.
• Educazione degli utenti : mentre i nuovi utenti potrebbero apprezzare Gutenberg, i vecchi utenti dovranno apprendere nuovi flussi di lavoro, il che è particolarmente difficile per gli sviluppatori che hanno creato siti per clienti non tecnici.

Quindi l'editor Gutenberg di WordPress è una cosa buona o cattiva?

Bene, sto intromettendo qualche opinione personale qui , ma penso che Gutenberg sarà un cambiamento positivo a lungo termine . Avrai un maggiore controllo sull'aspetto e sul funzionamento dei tuoi contenuti senza la necessità di soluzioni esterne o soluzioni di codice personalizzato.

Detto questo, c'è sicuramente la possibilità di problemi di crescita a breve termine quando si tratta di compatibilità con i plug-in esistenti che potresti utilizzare. E sarà difficile costringere l'enorme base di utenti di WordPress a imparare una nuova interfaccia.

Quando uscirà l'editor Gutenberg?

La risposta breve è: non conosciamo la data esatta . Gutenberg sarà rilasciato come parte di WordPress 5.0, ma non ci sono ancora notizie ufficiali sulla data esatta di rilascio di WordPress 5.0.

Ora abbiamo un'idea approssimativa, però. Secondo il recente meeting di avvio di WordPress 5.0 , le date previste sono il 19 novembre 2018 o il 22 gennaio 2019 .

Ecco la risposta più lunga:

In questo momento, l' editor Gutenberg esiste come plugin durante il suo stato beta. Se lo volessi, potresti effettivamente installare il plugin e iniziare a usarlo sul tuo sito oggi ( è in beta, però, quindi non lo consiglierei ).

Una volta terminati la beta e il test, il team di WordPress unirà l'editor Gutenberg nel software principale di WordPress in WordPress 5.0 . Quindi, una volta aggiornato il tuo sito WordPress a WordPress 5.0, l'editor Gutenberg sostituirà automaticamente l'attuale editor TinyMCE.

Cosa accadrà ai tuoi contenuti esistenti una volta rilasciato l'editor Gutenberg?

Poiché Gutenberg sta sostituendo l'editor corrente, probabilmente ti starai chiedendo cosa succederà con tutti i tuoi contenuti esistenti.

Non preoccuparti: Gutenberg è costruito per essere retrocompatibile .

Così com'è ora , Gutenberg mette tutti i tuoi vecchi contenuti in un singolo blocco classico . Ad esempio, ecco come appare l'esempio TinyMCE dall'alto quando installo Gutenberg:

Se lo desideri, puoi continuare a lavorare all'interno di quel singolo blocco Classic, anche se l'esperienza è un po' imbarazzante. In alternativa, potrai fare clic sull'icona dei tre puntini per convertire i tuoi vecchi contenuti in blocchi di Gutenberg:

Una volta convertito il tuo vecchio contenuto in blocchi, funzionerà come qualsiasi altro post dell'editor Gutenberg.

Poiché l'editor Gutenberg utilizza questo approccio a blocco classico singolo per i vecchi contenuti, non dovresti riscontrare problemi di transizione. Ma è possibile che si verifichino problemi con plug-in di terze parti, quindi dovresti comunque mantenere la vigilanza e controllare i tuoi vecchi contenuti.

L'editor Gutenberg funzionerà con tutti i temi di WordPress?

Sì! Ancora una volta, poiché Gutenberg sarà l'editor predefinito, deve naturalmente funzionare con qualsiasi tema WordPress.

Detto questo, ci sono alcune cose che gli sviluppatori possono fare per aggiungere funzionalità speciali per Gutenberg, quindi inizierai a vedere "compatibile con Gutenberg" apparire sui materiali di marketing di molti temi molto presto.

Ecco cosa rende un tema compatibile con Gutenberg:

• Stile speciale del blocco : i temi possono aggiungere uno stile speciale per i blocchi principali di Gutenberg. Ciò garantisce che tutti i blocchi di Gutenberg corrispondano perfettamente al design del tuo tema.
• Allineamento a tutta larghezza : Gutenberg ti consente di creare immagini a tutta larghezza che si estendono su tutto lo schermo, ma solo se gli sviluppatori di temi lo abilitano specificamente.
• Stile dell'editor : gli sviluppatori di temi possono anche aggiungere il proprio stile all'interfaccia di modifica di Gutenberg di back-end . Questo crea più di un approccio al design visivo. Puoi vedere un esempio qui .

Devi usare l'editor Gutenberg una volta rilasciato WordPress 5.0?

No! Sebbene Gutenberg sarà l'editor predefinito in WordPress 5.0, in realtà non è necessario utilizzarlo.

Se desideri continuare a utilizzare l'attuale editor di WordPress, c'è un plug-in ufficiale dell'editor classico che nasconde tutte le tracce di Gutenberg e ripristina l'attuale esperienza di modifica.

In alternativa, questo plugin può anche consentire di utilizzare entrambi gli editor e di passare da uno all'altro post per post.

Tutorial di WordPress Gutenberg – Come utilizzerai il nuovo editor

Ok, ora che hai finito il tuo corso accelerato Gutenberg 101, diamo un'occhiata all'editor Gutenberg.

L'obiettivo di questa sezione è farti familiarizzare con l'editor Gutenberg in modo che tu possa iniziare a lavorare subito una volta rilasciato.

Per iniziare, ecco un grafico per aiutarti a comprendere gli elementi principali dell'interfaccia dell'editor Gutenberg:

1. Questo è il corpo dell'editore. È dove lavorerai con i contenuti
2. Questi pulsanti consentono di aggiungere nuovi blocchi . Se vuoi aggiungere un'immagine, un video o qualsiasi altro contenuto di blocco, li utilizzerai.
3. Qui è dove aggiungi il titolo del tuo post.
4. Queste opzioni ti consentono di salvare bozze, visualizzare anteprime ed eventualmente pubblicare il tuo post.
5. Quando non hai selezionato un blocco, questa barra laterale ti consente di gestire le opzioni generali per il tuo post, come le categorie e l'immagine in primo piano. Quando si dispone di un blocco selezionato, ti dà le opzioni per quel blocco specifico.

Quindi, quando andrai ad aggiungere un nuovo blocco, vedrai questa finestra popup con un elenco di tutti i blocchi disponibili. Puoi:

1. Usa le schede a fisarmonica per sfogliare tutti i blocchi disponibili
2. Cerca direttamente il blocco che desideri

Come creare un semplice post sul blog con l'editor Gutenberg

In questa sezione imparerai come eseguire lo stesso tipo di azioni che puoi già eseguire nell'attuale editor di WordPress .

Fondamentalmente, imparerai come adattare il tuo flusso di lavoro esistente all'editor Gutenberg. Quindi, nella prossima sezione, ti mostrerò come sfruttare la nuova funzionalità dell'editor Gutenberg.

Aggiunta o formattazione di contenuti di testo di base

Il contenuto del testo del paragrafo di base è semplice: basta fare clic e digitare. L'unica differenza immediata è che ogni volta che premi Invio per creare una nuova riga, Gutenberg creerà automaticamente un nuovo blocco per il paragrafo successivo:

Quando fai clic su un blocco, vedrai apparire una barra degli strumenti di formattazione in cui puoi:

• Cambia allineamento
• Aggiungi grassetto e corsivo
• Inserisci link
• Eccetera.

Fondamentalmente, questo funziona in modo molto simile alla barra degli strumenti nell'editor corrente:

Più avanti, ti mostrerò un'ottima alternativa a questo approccio predefinito.

Oltre alle opzioni di formattazione nella barra degli strumenti, ottieni anche alcune opzioni nella barra laterale di destra che ti consentono di:

• Controlla la dimensione e il colore del testo
• Aggiungi un capolettera

Abbastanza semplice finora, giusto?

Creazione di un'intestazione (H1, H2, ecc.)

Hai diverse opzioni per creare un'intestazione.

Innanzitutto, puoi utilizzare l'icona + per inserire un nuovo blocco Intestazione :

Una volta inserito il blocco Intestazione , puoi digitare per aggiungere il testo e utilizzare la barra laterale o la barra degli strumenti per controllare quale intestazione utilizzare (ad es. H2 vs H3):

In alternativa puoi anche:

• Trasforma un normale blocco di paragrafo in un blocco di intestazione utilizzando il pulsante Cambia tipo di blocco .
• Usa il markdown per creare la tua intestazione (ad esempio "## Questa è una intestazione 2")

Ecco una GIF per illustrare questi due metodi:

Inserimento di immagini, video o altri contenuti multimediali

Ok, ora puoi creare e formattare sia il testo di base che le intestazioni. Questo ti porterà quasi tutto lì!

Ma per quanto riguarda l'inserimento di contenuti multimediali?

Per inserire qualsiasi contenuto multimediale, puoi utilizzare la stessa icona + per inserire un blocco.

Per inserire contenuti multimediali sotto i tuoi contenuti esistenti, usa l'icona + nell'angolo in alto a sinistra.

In alternativa, puoi anche inserire un nuovo blocco tra i tuoi contenuti esistenti passando con il mouse sul punto in cui desideri inserire i tuoi contenuti. Quindi, utilizzerai il pulsante Aggiungi blocco a sinistra del nuovo blocco:

Una volta aperto il popup Inserisci blocco , puoi scegliere tra:

• Immagine : inserisci un'immagine dalla libreria multimediale di WordPress o un URL esterno.
• Video : incorpora un video dalla libreria multimediale di WordPress o da un URL esterno.
• Incorpora : blocchi separati per aiutarti a incorporare contenuti da YouTube, Vimeo, Spotify, SoundCloud, Instagram e tantissime altre fonti.

Ad esempio, ecco come appare inserire un'immagine dalla libreria multimediale di WordPress:

Ed ecco come puoi incorporare un video di YouTube:

Inserimento di shortcode da altri plugin

Se sei come la maggior parte degli utenti di WordPress, probabilmente hai alcuni plugin che includi nel tuo post o nel contenuto della pagina utilizzando gli shortcode.

Alla fine , l'obiettivo è che quei tipi di plugin creino i propri blocchi Gutenberg che puoi utilizzare direttamente (ne parleremo più avanti ). Ma fino ad allora , puoi comunque includere shortcode nel tuo contenuto Gutenberg usando il blocco Shortcode :

Riorganizzazione del contenuto (hai due opzioni)

Ok, abbastanza facile finora... ma cosa succede se vuoi cambiare l'ordine dei tuoi blocchi?

Per farlo, hai due opzioni.

Innanzitutto, se passi il mouse a sinistra di un blocco*, puoi utilizzare il trascinamento della selezione per spostare i blocchi:

In secondo luogo, puoi anche utilizzare le frecce su o giù per spostare i blocchi in alto o in basso di una posizione:

*Per attivare il trascinamento della selezione, tieni il mouse sui 6 punti tra le frecce su e giù.

Lavorare con le informazioni dietro le quinte (categorie, URL Slug, ecc.)

Ok, quindi quanto sopra dovrebbe riguardare come aggiungere contenuti di base al blog. Ma che dire di tutte le altre parti dietro le quinte della preparazione di un post per la pubblicazione?

Per la maggior parte delle azioni, puoi utilizzare la scheda Documento della barra laterale. Qui è dove:

• Scegli una data di pubblicazione/pianifica i post in anticipo
• Seleziona l'autore
• Aggiungi categorie e tag
• Seleziona la tua immagine in primo piano
• Inserisci il tuo estratto

Inoltre, puoi utilizzare i pulsanti sopra quella barra laterale per:

• Anteprima del tuo post
• Salva bozze ( Gutenberg salva automaticamente la bozza, quindi di solito non è necessario farlo manualmente )
• Pubblica il tuo post

L'unica cosa difficile è impostare lo slug dell'URL del tuo post o della tua pagina. Per modificarlo, fai clic sul titolo. Quindi, sarai in grado di modificare lo slug:

Che dire dei plugin come Yoast SEO? Come funzioneranno?

Ci sono buone probabilità che tu abbia altri plugin di backend che devi configurare per ogni parte di contenuto.

Ci sono due modi in cui interagirai con questi plugin.

Prima di tutto, molti sviluppatori stanno già lavorando sulla compatibilità diretta con Gutenberg. Ad esempio, Yoast SEO supporta già Gutenberg e configurerai le tue impostazioni Yoast SEO direttamente dalla stessa barra laterale del documento :

Per i plug-in legacy che non hanno ancora il supporto per Gutenberg, sarai comunque in grado di utilizzare i meta box come faresti con l'editor TinyMCE:

Sei consigli per lavorare in modo più produttivo con Gutenberg

Quando inizi a lavorare con l'editor Gutenberg, potrebbe sembrare un po' lento. Questi suggerimenti possono aiutare ad accelerare il processo e rendere più facile inserire e personalizzare rapidamente i blocchi di cui hai bisogno.

1. Inserimento rapido di blocchi digitando "/" per risparmiare un sacco di tempo

Il metodo per inserire i blocchi che ti ho mostrato sopra è utile quando hai appena iniziato con Gutenberg perché ti consente di vedere tutti i blocchi disponibili.

Ma una volta acquisita familiarità con i blocchi di cui hai bisogno, puoi inserirli molto più velocemente utilizzando la funzione di inserimento rapido.

Invece di fare clic sull'icona + , basta:

• Premi invio per creare un nuovo blocco
• Digitare un "/"
• Inizia a digitare il nome del blocco

Durante la digitazione, Gutenberg suggerirà automaticamente i blocchi che corrispondono. Quindi, premi Invio per inserire il blocco che desideri.

Eccolo in azione:

È molto più veloce, giusto?

2. Impara le scorciatoie da tastiera per una modifica più rapida

Gutenberg è dotato di scorciatoie da tastiera che possono velocizzare il tuo lavoro.

Puoi visualizzare un elenco completo di queste scorciatoie facendo clic su CTRL + Alt + H (Windows) o CMD + Alt + H (Mac):

Dovresti leggere l'elenco completo, ma ecco alcuni dei più utili:

• Ctrl + S – salva la tua bozza.
• Ctrl + Z – annulla o Ctrl + Y – ripeti.
• Ctrl + Alt + Backspace : elimina il blocco selezionato ( molto utile ).
• Ctrl + Maiusc + D – duplica il blocco selezionato.
• Ctrl + Alt + T – inserisce un nuovo blocco prima del blocco selezionato.
• Ctrl + Alt + Y : inserisce un nuovo blocco dopo il blocco selezionato.

Puoi anche utilizzare la maggior parte delle scorciatoie globali, come Ctrl + B per il grassetto o Ctrl + V per incollare.

3. Trascina le immagini dal tuo desktop nel tuo contenuto Gutenberg

Se hai bisogno di includere molte immagini, questo è un altro bel trucco.

Invece di dover creare manualmente un nuovo blocco immagine per ogni immagine, puoi semplicemente trascinare un'immagine direttamente da una cartella sul desktop nel punto in cui puoi includerla nel tuo post.

WordPress lo caricherà automaticamente nella tua libreria multimediale e lo inserirà proprio lì. C'è solo una cosa a cui prestare attenzione: assicurati di vedere la linea blu quando trascini l'immagine , altrimenti non funzionerà:

4. Aggiungi una barra degli strumenti di modifica fissa

Una cosa che alcune persone trovano difficile con Gutenberg è che la barra degli strumenti di modifica lampeggia costantemente dentro e fuori dall'esistenza mentre fai clic tra i diversi blocchi di paragrafo.

Se non ti piace, puoi attivare l'opzione Barra degli strumenti unificata per ottenere una barra degli strumenti sempre presente nella parte superiore dell'interfaccia di Gutenberg:

5. Usa la sintassi Markdown per intestazioni, elenchi, ecc.

Se ti piace usare il markdown, sarai in grado di incorporare una certa sintassi del markdown in Gutenberg.

Per esempio:

• ## – crea un H2 (l' hai già visto – si trasforma in un blocco di intestazione ).
• * – avvia un elenco non ordinato.
• 1. – avvia un elenco ordinato.
• > – crea un blocco preventivo ( si trasforma in un blocco preventivo ).

Non puoi utilizzare tutta la sintassi markdown. Ma gli esempi sopra sono già abbastanza utili per una formattazione più rapida:

6. Modifica HTML direttamente se necessario

Se si verifica una situazione in cui si desidera modificare direttamente l'HTML, è possibile accedere all'editor di codice facendo clic sui tre punti nell'angolo in alto a destra o utilizzando la scorciatoia Ctrl + Maiusc + Alt + M :

Approfittando della nuova funzionalità di Gutenberg: colonne, pulsanti e altro!

Bene, abbiamo coperto:

• Come usare Gutenberg per creare un post di blog di base.
• Alcuni suggerimenti per velocizzare il tuo lavoro con Gutenberg.

Ora, entriamo in alcune delle nuove cose interessanti che puoi fare con Gutenberg. Queste sono le interessanti funzionalità che dovrebbero aiutare a spiegare perché il team di WordPress ha deciso di andare avanti con Gutenberg.

Pulsanti di inserimento: non è richiesto HTML

Con il vecchio editor, l'unico modo per creare pulsanti era aggiungere manualmente una classe CSS o utilizzare un plug-in di terze parti.

Con Gutenberg, aggiungi semplicemente il blocco Button . Per modificare il testo del pulsante, è sufficiente fare clic e digitare. E per cambiare i colori, puoi usare la barra laterale:

Crea layout a più colonne

Con il vecchio editor, non c'era modo di creare layout a più colonne senza il tuo codice HTML personalizzato o un plug-in di terze parti.

Con Gutenberg, aggiungi semplicemente il blocco Colonne . Quindi, puoi aggiungere altri blocchi all'interno delle diverse colonne:

Crea immagini estese a tutta larghezza

Se il tuo tema lo supporta , otterrai una nuova opzione di allineamento a tutta larghezza che ti consente di allungare le immagini su tutto lo schermo, aprendo alcuni layout di contenuto interessanti:

Crea modelli di blocchi riutilizzabili

Se ti ritrovi a utilizzare regolarmente la stessa combinazione di blocchi, puoi risparmiare tempo creando un gruppo di blocchi riutilizzabile.

Innanzitutto, puoi fare clic e trascinare per selezionare tutti i blocchi che desideri includere. Quindi, puoi utilizzare i tre punti per aggiungere ai blocchi riutilizzabili :

Gli darai un nome. Quindi, sarai in grado di inserire l'intero modello proprio come faresti con qualsiasi altro blocco:

Puoi aggiungere più blocchi e funzionalità con plugin di terze parti

Ecco dove Gutenberg inizia a diventare ancora più cool:

I plugin di terze parti possono aggiungere i propri blocchi che puoi utilizzare nei tuoi progetti Gutenberg.

Ci sono due modi in cui questo può avvantaggiarti:

• I plugin che già utilizzi creeranno i propri blocchi Gutenberg. Ad esempio, se utilizzi un plug-in per il calendario degli eventi, sarai in grado di inserire eventi semplicemente utilizzando il blocco eventi del tuo plug-in.
• Gli sviluppatori stanno realizzando plug-in Gutenberg dedicati che aggiungono tonnellate di nuovi blocchi di contenuto generici che ti danno un maggiore controllo sui tuoi progetti.

Ad esempio, controlla il plug-in Stackable gratuito . Una volta installato e attivato, otterrai un nuovo set di blocchi impilabili in Gutenberg:

E poi puoi usare quei blocchi per fare cose piuttosto interessanti, come inserire una tabella dei prezzi o una testimonianza:

Questo è solo l'inizio per l'editor Gutenberg di WordPress

E questo è tutto! Se sei arrivato fino a questo punto, dovresti essere un guru di Gutenberg pronto a partire subito dopo il rilascio di WordPress 5.0.

Sebbene l'apprendimento di un nuovo flusso di lavoro non sia nell'elenco della maggior parte delle persone di "modi divertenti per trascorrere un fine settimana", padroneggiare i dettagli di Gutenberg sarà essenziale per chiunque utilizzi WordPress.

Non solo Gutenberg influenzerà il modo in cui crei i contenuti in questo momento , ma svolgerà anche un ruolo importante in WordPress in futuro.

Tutto quello che hai visto sopra è solo la prima fase di Gutenberg. Nella fase due, Gutenberg passerà ai modelli di pagina e la fase tre trasformerà Gutenberg in uno strumento per la personalizzazione completa del sito web .

Quindi... diventate buoni amici di Gutenberg, perché ne vedrete molto nei prossimi anni!