TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Gutenberg WordPress Editor – La prima recensione

11

WordPress è la piattaforma di blogging e pubblicazione di prim’ordine per molti di noi. Ma il problema più grande è il know-how tecnico necessario per eseguire un sito WordPress. Altrimenti devi spendere molto tempo e denaro per modificare le cose di base. Anche il semplice compito di creare e pubblicare un articolo o una pagina in WordPress non è così facile da avere layout e colonne differenti. Ciò porta alla crescita di centinaia di aziende e siti Web che offrono servizi di creazione di pagine. Buoni esempi includono Visual Composer, SiteOrigin Page Builder, Beaver Page Builder, ecc. Questi page builder sono diventati popolari solo perché WordPress per impostazione predefinita ha un editor goffo.

Editor di articoli WordPress classico

Il classico editor di post di WordPress sembra noioso ed è basato su testo semplice. Puoi modificare cose molto minime come passare alla modalità "Testo" e aggiungere alcuni HTML/CSS in linea. Non è possibile aggiungere layout di colonna o aggiungere blocchi. Ad esempio, se hai una casella di testo come l’offerta di prodotti o il download gratuito di ebook, devi aggiungere manualmente lo stesso contenuto su tutte le pagine. Altrimenti potresti dover modificare i file PHP o scrivere del codice personalizzato, che non sono opzioni per gli utenti di livello principiante.

Gutenberg – La via del futuro

Se hai notato, WordPress mostra una notifica nella versione 4.9.8 per installare e testare l’editor Gutenberg. A questo punto devi installare Gutenberg come plugin per cambiare l’editor. Ma presto dalla versione 5.0, WordPress per impostazione predefinita avrà l’editor Gutenberg. Se hai qualche problema con la compatibilità o ti piace ancora utilizzare il vecchio editor, devi installare il plug-in dell’editor classico per continuare con il vecchio editor.

Poiché il layout dell’editor cambia con Gutenberg, tutti i plugin e i temi che utilizzano i metabox nell’editor di post/pagina dovrebbero essere riprogettati per funzionare con l’editor Gutenberg. Plugin come Yoast SEO offrono già la versione compatibile e crediamo che tutti gli altri sviluppatori dovrebbero seguire l’esempio senza altre opzioni rimaste. Di seguito è riportato il messaggio popup visualizzato da WooCommerce per provare con l’editor Gutenberg.

Gutenberg WordPress Editor – La prima recensione

Widget di WooCommerce Gutenberg

Cos’è Gutenberg?

Se hai mai lavorato sul costruttore di siti Bootstrap o sull’editor Weebly, rimarrai sorpreso. Sì, Gutenberg è un costruttore di siti drag and drop basato sul concetto di blocchi. Puoi semplicemente fare clic sul blocco da aggiungere alla pagina e iniziare a creare i tuoi contenuti. È simile all’editor Bootstrap o Weebly

L’uso di Gutenberg può sembrare un processo lungo per semplici post/pagine di testo. Ma per coloro che desiderano avere layout diversi e blocchi riutilizzabili su più pagine, Gutenberg è la soluzione semplice.

Blocchi di Gutenberg

Puoi aggiungere i seguenti blocchi con l’editor Gutenberg:

Gutenberg WordPress Editor – La prima recensione

Blocchi di Gutenberg

  • Blocchi comuni: paragrafo, immagine, intestazione, galleria, elenco, citazione, audio, immagine di copertina, sottotitolo, video.
  • Blocchi di formattazione: codice, classico, HTML personalizzato, preformattato, pullquote, tabella, versetto.
  • Elementi del layout: pulsante, colonne, altro, interruzione di pagina, separatore, distanziatore.
  • Widget: shortcode, archivi, categorie, ultimi commenti, ultimi post.
  • Incorpora: incorpora da quasi tutti i siti di social network come Twitter, YouTube, Facebook, Instagram, ecc.
  • La sezione Blocchi più utilizzati elencherà i blocchi a cui si accede di frequente per un accesso rapido.
  • Blocchi riutilizzabili: come spiegato sopra, quando si desidera che lo stesso contenuto faccia parte di molte pagine, salvarlo come blocco riutilizzabile.

Comprensione del layout dell’editor Gutenberg

Di seguito è riportato come apparirà l’editor Gutenberg quando crei un post.

Gutenberg WordPress Editor – La prima recensione

Gutenberg Editore

  1. Il primo elemento è sempre un titolo per il tuo post. Non puoi eliminare questo elemento.
  2. Hai l’area del contenuto in cui puoi aggiungere blocchi.
  3. Fai clic sul pulsante + all’interno dell’editor dei post o nell’angolo in alto a sinistra dell’editor per iniziare ad aggiungere blocchi.
  4. Sposta il cursore a sinistra di qualsiasi elemento per vedere le frecce su e giù. Fare clic sulla freccia per spostare l’intero elemento in alto o in basso.
  5. Passa il mouse sul lato destro dell’elemento per vedere il pulsante con tre punti che offre più opzioni. Fare clic su di esso per modificare il blocco come HTML o visualizzarlo di nuovo visivamente. Da qui puoi aggiungere il blocco all’elenco riutilizzabile.
  6. Fare clic sull’elemento del blocco per visualizzare più opzioni in linea come la formattazione e l’allineamento per il contenuto del testo.
  7. La barra in alto contiene opzioni di alto livello come: annulla, ripeti, visualizza in anteprima, pubblica, salva bozza, mostra o nascondi la barra laterale, impostazioni per attivare l’editor visivo e di codice e altre poche opzioni.
  8. La barra laterale ha due sezioni: una è per il livello post come "Documento". Ha opzioni per aggiungere immagini in primo piano, categoria, tag, formato del post, autore, ecc.
  9. La scheda "Blocco" contiene opzioni specifiche per l’elemento del blocco selezionato.

Aggiunta di blocchi nel post

Creiamo un post con alcuni elementi per vedere quanto sia facile o difficile usare l’editor Gutenberg.

  • Aggiungi un titolo nello spazio del titolo predefinito.
  • Fare clic per aggiungere HTML personalizzato e aggiungere del contenuto.
  • Aggiungi un elemento di layout di colonna aggiungi testo e virgolette all’interno di due colonne.

Gutenberg WordPress Editor – La prima recensione

Aggiungere blocchi e controllare le statistiche

Attualmente, se vuoi avere un layout con colonne, hai bisogno di uno shortcode personalizzato dal tema o usa un plug-in separato.

Metabox

Come puoi vedere sul layout, abbiamo molte metabox nell’editor dei post a causa del tema e dei plugin che abbiamo sul sito demo. Ora che ci sono alcuni metabox ancora attaccati alla barra laterale e alcuni vengono spostati sotto il contenuto del post. Quindi assicurati di testare il tuo tema e i tuoi plugin prima di iniziare a utilizzare l’editor Gutenberg. In caso contrario, potrebbe essere necessario installare il plug-in dell’editor di post classico per avere la compatibilità con le versioni precedenti e informare lo sviluppatore di aggiornare il tema/plugin.

Caratteristiche aggiuntive

  • Fai clic sull’icona delle informazioni nella barra in alto per controllare le statistiche del contenuto del post come numero di parole, frasi, titoli, ecc.
  • Puoi ottenere i suggerimenti per familiarizzare con l’editor. Fare clic sul pulsante con tre punti nell’angolo in alto a destra nella barra in alto e selezionare l’opzione "Mostra suggerimenti".
  • Fai clic sull’elemento del blocco e vai alla scheda "Blocca" nella barra laterale destra. Nella sezione "Avanzate", puoi aggiungere classi CSS personalizzate che influenzeranno solo quell’elemento nella casella di testo "Classe CSS aggiuntiva". Devi definire la classe CSS nel tuo foglio di stile principale o nella sezione "Aspetto> Personalizza> CSS aggiuntivo".

Miglioramenti

WordPress ha rilasciato numerosi miglioramenti all’editor Gutenberg iniziale. Ora puoi aggiungere collegamenti al pulsante con nofollow, il blocco tabella è reattivo e mostra la barra orizzontale sui dispositivi mobili, puoi gestire i blocchi riutilizzabili e disabilitare i blocchi inutilizzati e le meta box nell’editor dei post. La versione 5.8 ha anche introdotto la funzionalità di modifica del sito completo che può cambiare il panorama completo della creazione di siti Web con WordPress come sistema di gestione dei contenuti. Con tutte queste cose, è una buona idea provarlo se stai ancora utilizzando l’editor classico.

Indipendentemente dal fatto che l’editor Gutenberg di WordPress migliori o meno la tua produttività, è giunto il momento di sbarazzarsi del vecchio editor noioso. Sebbene ogni azione richieda due clic ora, questa è la strada da percorrere. D’altra parte, questo porrà fine alla mania dei plug-in dedicati alla creazione di pagine e aprirà le opzioni per l’aggiunta di blocchi personalizzati come parte del core di WordPress.

Professionisti

  • Facile aggiungere diversi blocchi. Abbastanza sicuro che molti plugin verranno visualizzati per aggiungere blocchi personalizzati in futuro.
  • Puoi creare qualsiasi tipo di layout e avere layout diversi su pagine diverse del tuo sito.
  • Riorganizzare i blocchi è facile e puoi creare blocchi riutilizzabili.

Contro

  • Sul nome dell’esperienza utente, ora è necessario fare clic due volte che prima si facevano con un solo clic. Ad esempio, con l’editor classico puoi semplicemente fare clic su "Immagine in primo piano" e caricare un’immagine. Ora con Gutenberg, devi prima fare clic sul menu a discesa "Immagine in primo piano" e quindi fare clic sul collegamento per caricare l’immagine.
  • Non siamo riusciti a vedere "Opzioni schermo" per personalizzare l’editor. Sembra che dovresti prendere tutto ciò che viene mostrato.
  • Il nuovo editor renderà tutti i tutorial esistenti non validi e richiederà un enorme sforzo per i documenti di migliaia di editori e sviluppatori.

Fonte di registrazione: www.webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More