L'anatomia completa dell'editor WordPress di Gutenberg

Sembra che Gutenberg sia stato un termine di controversia nel mondo di WordPress ultimamente. Acclamato come il cambiamento più significativo a WordPress 5.0 quest'anno, l'editor di Gutenberg ha ricevuto una risposta mista da sviluppatori web e gente normale allo stesso modo. Tutto questo caos sta rendendo difficile vedere Gutenberg per quello che è veramente. Quindi, cercherò di mettere a tacere un po' di confusione una volta per tutte.

In questo articolo tratterò quanto segue:

1. Cos'è Gutenberg?
2. Più di un semplice editore
3. Cosa cambia Gutenberg in WordPress?
4. Installazione di Gutenberg
5. Esplorare a lungo Gutenberg
6. Pro e contro
7. Comprensione dei problemi di compatibilità
8. Gutenberg è il futuro
9. Ultime notizie e ulteriori risorse

1. Cos'è Gutenberg?

Prende il nome da Johannes Gutenberg, che ha inventato la macchina da stampa meccanica, Gutenberg è stato presentato al mondo da Matt Mullenweg al WordCamp Europe nel 2017. In sostanza, Gutenberg è un nuovo editor di WordPress, con dozzine di funzionalità all'avanguardia. Semplifica la creazione e la modifica di siti Web per l'utente medio non tecnico.

Ha ottenuto diversi riconoscimenti, da “La nuova esperienza editoriale di WordPress” a “Il futuro della creazione di siti web”. Alcuni scettici pensano che sia il chiodo nella bara per WordPress. A parte tutte queste chiacchiere, Gutenberg sarà molto più di un semplice editor per WordPress (di cui parlerò in seguito).

Consente ai creatori di siti Web di creare un sito Web utilizzando i blocchi, che sono piccole unità di trascinamento della selezione. Pertanto, sostituisce l'attuale processo di personalizzazione incoerente e distraente. Abilita anche i tag HTML come section e figure , generando un solido HTML. Al momento in cui scrivo, Gutenberg è ancora un plugin. Tuttavia, la community sta pianificando di fonderlo con WordPress 5.0 quest'anno.

2. Più di un semplice editore

Gutenberg è più di un semplice editor perché ti consente di gestire il contenuto del sito Web in blocchi o blocchi personalizzabili. Non è necessario essere fluenti in HTML o scrivere shortcode. Puoi controllare l'intero layout di un sito Web (sia back-end che front-end) da un'unica console.

Questo nuovo editor tenta di combinare le migliori funzionalità di entrambi i plug-in per la creazione di pagine come Divi e Visual Composer, nonché di piattaforme fai-da-te come Medium, Wix e Squarespace. Quindi, proprio come quei plug-in per la creazione di pagine, puoi gestire layout a più colonne tramite un'unica interfaccia.

Questo significa la fine di plugin come Divi e Beaver Builder? Questo è un argomento per un altro post, ma la risposta breve è no. È improbabile che Gutenberg sostituisca completamente quei plugin. Puoi continuare a usarli anche quando Gutenberg diventa l'editor predefinito.

3. Cosa cambia Gutenberg in WordPress?

L'unico scopo dell'editor Gutenberg è quello di fornire un'alternativa all'attuale editor di testo aperto, per non parlare degli shortcode difficili da ricordare, con un'interfaccia utente (UI) agile e visiva. Quindi, a differenza dell'attuale editor di WordPress, non devi:

• importare immagini, file multimediali e approvati dalla libreria multimediale o aggiungere shortcode HTML;
• copia e incolla i collegamenti per gli incorporamenti;
• scrivere codici brevi per risorse specializzate di diversi plugin;
• creare immagini in evidenza da aggiungere nella parte superiore di un post o di una pagina;
• aggiungere estratti per i sottotitoli;
• aggiungi widget per il contenuto sul lato di una pagina.

In breve, Gutenberg non cambia il funzionamento di WordPress. Tuttavia, cambia il modo in cui i proprietari (o i creatori) del sito web interagiscono con esso. Invece di un sacco di codici brevi e meta box, utilizzerai semplici blocchi.

Cosa sono i blocchi?

Considera un blocco come l'unità più elementare (quindi, la più piccola) del nuovo editor. Saranno gli elementi costitutivi di WordPress 5.0. In altre parole, tutto, inclusi contenuto, immagini, citazioni, gallerie, immagini di copertina, audio, video, intestazioni, incorporamenti, codici personalizzati, paragrafi, separatori e pulsanti, si trasformerà in blocchi distinti. Poiché puoi trascinare e rilasciare ogni blocco, identificare questi elementi e posizionarli sulla pagina diventa molto più semplice.

4. Installazione di Gutenberg

Puoi scaricare l'ultima versione di Gutenberg direttamente dal repository di WordPress. Puoi anche cercarlo sotto i plug-in "Aggiungi nuovo" nella dashboard di WordPress. Consiglierei di installarlo nel tuo ambiente di staging. Tuttavia, avrai bisogno dell'ultima versione di WordPress (versione 4.8 o successiva) per installare l'editor Gutenberg.

1. Accedi alla dashboard dell'amministratore di WordPress.
2. Vai al menu Plugin sul lato sinistro della dashboard.
3. Fai clic su "Plugin" per aprire il menu "Aggiungi nuovo".
4. Digita "Gutenberg" nella casella di ricerca, situata nell'angolo in alto a sinistra.
5. Vedrai il plugin Gutenberg nei risultati.
6. Fare clic sul pulsante "Installa ora".
7. Fare clic sul pulsante "Attiva" per avviare il plug-in.

5. Esplorare a lungo Gutenberg

Una volta installato e attivato, Gutenberg mostrerà un'icona nella barra dei menu a sinistra. Quando lo avvii per la prima volta, vedrai un nuovo post di esempio, intitolato "Demo Gutenberg". Puoi esercitarti sul post demo prima di crearne uno tuo.

A. Aggiungi nuovo

Vai su "Post" nella barra dei menu a sinistra della dashboard di WordPress. Il nuovo post verrà lanciato prima a Gutenberg. Successivamente puoi modificarlo sia nell'editor classico che in Gutenberg.

B. Modifica

Vai al menu "Post" e passa il mouse su un post salvato per vedere l'opzione per scegliere tra i due editor. Sebbene l'opzione editor classica sia disponibile per il momento, molto probabilmente verrà rimossa con il lancio di WordPress 5.0.

C. Passa da un editore all'altro

Puoi anche passare da un editor all'altro durante la modifica di un post. Fare clic sul menu a discesa nell'angolo in alto a destra per alternare tra la modalità editor visivo e l'editor di testo (es. codice). In alternativa, puoi anche usare la scorciatoia Ctrl + Maiusc + Alt + M per passare da un editore all'altro.

Editor di testo:

Editor visivo:

D. Copia tutto il contenuto

Questa funzione ti consente di copiare tutti i contenuti nella versione HTML con un solo clic. Puoi aprire questa funzione in entrambi gli editor facendo clic sul menu a discesa nell'angolo in alto a destra della dashboard.

E. Strutture di contenuto

Questa funzione ti consente di contare il numero di parole in un intero post. Puoi anche vedere il numero di intestazioni, paragrafi e blocchi con un semplice clic. Fare clic sull'icona delle informazioni (i) nell'area in alto a sinistra.

F. Ripeti e Annulla

Puoi trovare queste opzioni accanto all'icona delle informazioni (i). Ti permettono di annullare o ripetere l'ultimo comando.

G. Impostazioni pagina e documento

Ciò consente di modificare varie impostazioni di pagina e documento. Puoi trovarlo nella barra dei menu di destra. È possibile effettuare le seguenti regolazioni:

• Rendi un post pubblico o privato.
• Modifica la data di pubblicazione.
• Seleziona il formato di un post.
• Aggiungi o modifica categorie e tag.
• Carica le immagini in primo piano.
• Scrivi un estratto.
• Abilita e disabilita commenti, pingback e trackback.

H. Attenersi alla prima pagina

Questa funzione sarà utile se gestisci un blog. Quando lo attivi nelle impostazioni del documento, quel particolare post apparirà sempre sulla prima pagina del tuo blog. E basta spegnerlo per rimuoverlo dalla prima pagina.

I. Utilizzo dei blocchi

Come accennato, i blocchi sono l'unità fondamentale del nuovo editor Gutenberg. Per utilizzare Gutenberg in modo efficiente, è necessario comprendere come utilizzare questi blocchi. Coprirò i blocchi principali uno per uno. Fare clic sul pulsante più (+) accanto all'opzione ripeti/annulla per aprire il menu dei blocchi.

Blocchi comuni

I blocchi comuni ti consentono di aggiungere gli elementi necessari per creare una ricca interfaccia utente.

• Paragrafo
  Il blocco di paragrafi include alcune caratteristiche eccellenti, come dimensioni dei caratteri personalizzate, capolettera, colori di sfondo e colori del testo, tra gli altri. Puoi anche aggiungere più classi CSS qui.

• Immagine
  Questo elemento viene fornito con una nuova funzionalità che ti consente di alternare tra la galleria e il layout delle immagini. Hai anche un maggiore controllo sulle immagini perché puoi impostare dimensioni di dimensioni particolari, rapporti di dimensioni percentuali e una descrizione di testo alternativa per ciascuna immagine.

• Altri elementi includono :
  • citazioni,
  • gallerie,
  • immagini di copertina,
  • titoli,
  • liste,
  • Audio,
  • File,
  • sottotitoli,
  • video.

Formattazione

Come suggerisce il nome, questi blocchi comprendono tutti gli strumenti di formattazione.

• Tavolo
  L'aggiunta di una tabella utilizzando il codice HTML personalizzato era un lavoro noioso. Con il blocco tabella, tuttavia, il compito è molto più semplice. Puoi aggiungere e rimuovere righe e colonne di una tabella senza codifica.

• HTML personalizzato
  Puoi usare un codice HTML personalizzato in Gutenberg. E la parte bella è che puoi inserire il tuo codice e vedere un'anteprima nel blocco stesso.

• Altri elementi includono :
  
  • codice,
  • classico,
  • preformattato,
  • tirare la citazione,
  • versetto.

Disposizione

Usa la tua immaginazione per creare un layout straordinario usando questo blocco. Ogni elemento in questo blocco ha caratteristiche eccellenti.

• Pulsante
  Puoi aggiungere pulsanti come "Abbonati ora" e "Acquista ora" utilizzando questo blocco. Ha diverse opzioni, incluso l'allineamento e gli stili dei caratteri. Puoi anche impostare il colore di sfondo e la forma del pulsante.

• Colonne (beta)
  La creazione di colonne nell'editor basato sul codice è dispendiosa in termini di tempo e laboriosa. Questo blocco consente di aggiungere colonne di testo. Puoi aggiungere da una a sei colonne in una singola riga.

• Altri elementi includono :
  
  • Per saperne di più,
  • interruzione di pagina,
  • separatore,
  • distanziatore.

Widget

Questi blocchi ti consentono di aggiungere un archivio, categorie, gli ultimi post e gli ultimi commenti con un semplice clic in qualsiasi punto della pagina. Puoi anche regolare questi elementi senza alcuna codifica.

• L'ultimo post
  Con questo elemento di blocco, puoi mostrare i post in una visualizzazione a griglia o in una visualizzazione elenco, organizzarli in categorie e ordinarli in ordine alfabetico o in base alla data di pubblicazione. Puoi anche scegliere di visualizzare la data di pubblicazione.

Incorpora

Puoi accedere facilmente a qualsiasi incorporamento utilizzando questi blocchi. Sia che tu voglia aggiungere un collegamento YouTube o Twitter, è semplicissimo e veloce. Tutto quello che devi fare è incollare l'URL nello spazio vuoto indicato e Gutenberg incorporerà il codice per te. Ecco un esempio di inserimento di un collegamento YouTube:

Blocchi riutilizzabili

I blocchi riutilizzabili offrono agli sviluppatori una migliore usabilità. Puoi convertire qualsiasi blocco in un blocco riutilizzabile in modo da poterlo utilizzare in una posizione diversa. Puoi modificare lo stesso e salvarlo di nuovo come un nuovo blocco riutilizzabile.

Puoi anche vedere un'anteprima di un blocco riutilizzabile. Tutti i blocchi riutilizzabili sono disponibili nelle opzioni "Blocco condiviso". Ancora più importante, puoi trasformarne uno in un blocco normale in qualsiasi momento.

Più usato

Sotto questa opzione, vedrai i blocchi più utilizzati, per un rapido accesso. In alternativa, puoi utilizzare la casella di ricerca per trovare un blocco per nome.

J. Modifica blocco

Per modificare qualsiasi blocco, apri il menu a discesa facendo clic nell'angolo in alto a destra del blocco. Vedrai diverse opzioni, tra cui modificare come HTML, duplicare e aggiungere ai blocchi riutilizzabili.

K. Inserisci blocchi

Usando questa funzione, puoi inserire un nuovo blocco in qualsiasi momento. Quando porti il ​​mouse su un blocco, vedrai un'icona più (+). Fare clic per inserire un nuovo blocco.

L. Completamento automatico barra

La funzione di completamento automatico Slash è disponibile in Gutenberg 1.1.0 e versioni successive. È probabile che tu abbia già familiarità con la funzionalità simile in Slack. È stato aggiunto per ridurre la quantità di puntamento e clic necessari per creare nuovi blocchi.

Quando apri un nuovo blocco, premi / (tasto barra) sulla tastiera per selezionare una delle opzioni di completamento automatico. Funziona solo nel blocco di paragrafo predefinito, ma in futuro potrebbe diventare parte di altri tipi di blocchi.

M. Sposta blocchi

Gutenberg ti consente di spostare ogni blocco su e giù. Puoi usare le frecce (sul lato sinistro di ogni blocco) per spostarli verticalmente.

6. Pro e contro di Gutenberg

Professionisti

• Non è richiesta alcuna competenza tecnica per creare un layout personalizzato per un post di blog o un sito Web. Funziona come Medium, quindi le persone che cercano quel tipo di stile e un'esperienza di editing user-friendly lo adoreranno.
• Ti consente di creare un design coerente e avanzato senza fare molto affidamento su TinyMCE.
• Inoltre, i blocchi sono un concetto eccellente. Consentono ai non sviluppatori di creare in modo intuitivo layout complessi. Se non conosci WordPress o non ne hai alcuna conoscenza, lo adorerai comunque.
• L'editor Gutenberg stesso funziona bene sui dispositivi mobili (è reattivo). A differenza del suo predecessore, ti consente di apportare modifiche rapide in movimento. In effetti, gli sviluppatori esperti di dispositivi mobili possono riuscire a fare più di poche modifiche rapide.
• L'aumento dello spazio sullo schermo si sta rivelando un'esperienza utente meno distraente per molti sviluppatori.
• Gli sviluppatori hardcore possono comunque creare blocchi riutilizzabili personalizzati utilizzando HTML5. Quindi, sembra una vittoria per tutti sia per i fanatici che per gli utenti non tecnici.

contro

• Per il momento, non c'è il supporto Markdown nella versione beta dell'editor di WordPress.
• Non supporta ancora le colonne reattive. Dovrai eseguire una codifica personalizzata per rendere questa funzione reattiva. Quindi, l'utilizzo di questa funzione sui dispositivi mobili non è un'opzione in questo momento.
• Le opzioni di layout del design sono inadeguate al momento.
• I problemi di compatibilità potrebbero essere una preoccupazione significativa per alcuni utenti di WordPress.
• Ottieni solo un supporto parziale per i meta box, tuttavia, gli sviluppatori stanno lavorando duramente per estendere il supporto per i meta box.
• La compatibilità con le versioni precedenti sarà una preoccupazione primaria per la maggior parte degli sviluppatori. Distruggerà i plugin e i temi attuali, in particolare quelli che richiedono l'integrazione con TinyMCE.

7. Comprensione dei problemi di compatibilità

Nonostante la sua semplicità e agilità, Gutenberg potrebbe non essere la tazza di tè di tutti. La maggior parte degli sviluppatori di WordPress potrebbe avere difficoltà a lavorare, soprattutto all'inizio. Dovranno riqualificare i loro riflessi per abituarsi alla nuova UX.

• A causa del problema di compatibilità con le versioni precedenti, dovrai aggiornare molti plugin e temi per assicurarti che siano completamente compatibili con il nuovo editor.
• Per il momento, i blocchi sono più focalizzati sul contenuto. Di conseguenza, Gutenberg non ha precisione e controllo sul layout dei siti Web personalizzati.
• Gli shortcode vengono sostituiti da blocchi shortcode. Tuttavia, sarai comunque in grado di aggiungere codici brevi dal blocco widget.
• I meta box saranno disponibili con un nuovo nome e una nuova interfaccia utente. È probabile che meta box in conflitto portino al classico editor, invece di Gutenberg, con un avviso. Anche se questo sistema potrebbe rivelarsi utile, alcune meta box non saranno supportate in Gutenberg.
• I tipi di post personalizzati sono supportati e rimangono compatibili con le versioni precedenti in Gutenberg.
• Non sarai in grado di disattivare Gutenberg una volta integrato nel core di WordPress. Tuttavia, puoi disabilitarlo utilizzando il plug-in ufficiale in qualsiasi momento.

8. Gutenberg è il futuro

Contrariamente all'opinione popolare, Gutenberg non sostituisce l'attuale editor di testo. È un nuovo modo di creare siti web. Mi piace pensarlo come Facebook per WordPress.

Non devi essere un fanatico del computer per pubblicare cose su Facebook o su qualsiasi altra piattaforma di social media. Gutenberg è solo un modo per portare questa semplicità e flessibilità in WordPress, in modo che le persone non abbiano bisogno di programmare per creare e pubblicare siti web. Ecco perché penso che sarà il futuro, non solo per WordPress, ma per il web in generale.

Certo, Gutenberg ha molta strada da fare. Le persone (me compreso) hanno avuto problemi con la sua implementazione, ma presto avremo temi, plug-in e strumenti pronti per Gutenberg che emergono ovunque. Tuttavia, devi iniziare da qualche parte. Quindi, potresti anche essere parte di questo cambiamento dall'inizio.

9. Ultime notizie e ulteriori risorse

Se sei interessato a guidare il treno Gutenberg fin dall'inizio, ecco alcuni link per trovare le ultime novità. Tieni presente che nessuno di questi siti Web è ufficialmente approvato da WordPress.

• Notizie Gutenberg
• Hub Gutenberg
• Tempi di Gutenberg

Per aggiornamenti e notizie ufficiali, puoi provare quanto segue:

• "Gutenberg, o la nave di Thesus", Matias Ventura Bausero
• "Panoramica tecnica dell'editor", Matias Ventura Bausero, WordPress.org
• "Principi di progettazione", WordPress.org
• "wp-post-grammatica", Dennis Snell
• "#gutenberg (Riepilogo chat sviluppatori: 27 giugno)" Jeffrey Paul
• "Introduzione a Gutenberg", WordPress.org

Avvolgendo

Che ti piaccia o no, Gutenberg sta arrivando su WordPress 5.0. Cerca di far parte della discussione in corso a riguardo sul web. Sicuramente aiuterà. In effetti, già che ci sei, prova ad accelerare il processo di sviluppo con le tue abilità. Intanto fatemi sapere se questo post ha fatto luce sull'argomento. Rilascia le tue domande e suggerimenti nella sezione commenti. Mi piacerebbe continuare la conversazione.