Crea per Gutenberg: in che modo gli autori di plug-in e temi stanno affrontando la transizione a Gutenberg

Crea per Gutenberg: in che modo gli autori di plugin e temi stanno affrontando la transizione


Al WordCamp Europe 2018, Matt Mullenweg ha elaborato una ruvida tabella di marcia per Gutenberg nei prossimi mesi. A luglio, ci sarà una grande spinta per aumentare l’adozione di Gutenberg, con una beta 5.0 in gioco per agosto (o oltre; in realtà, probabilmente oltre). L’imminente integrazione potrebbe farti domandare come gli sviluppatori di WordPress stanno progettando di costruire per Gutenberg.

Cioè, quali sono i vari modi in cui gli sviluppatori stanno preparando le loro offerte per Gutenberg? E le persone stanno facendo qualcosa di nuovo e interessante per Gutenberg?

In questo post, ti forniremo alcuni esempi concreti e concreti di come gli sviluppatori di plugin e temi possono creare per Gutenberg mostrandoti ciò che è già disponibile.

Guardando alcuni esempi reali di come gli sviluppatori utilizzano blocchi e stili per creare un’esperienza di modifica più integrata, speriamo che:

  • Scopri in che modo Gutenberg può trarre vantaggio da un utente finale.
  • Ottieni alcune idee da sviluppare per Gutenberg per i tuoi progetti WordPress.

Se non sei ancora sicuro di cosa sia l’editor Gutenberg, ti consigliamo di dare un’occhiata al nostro tutorial completo sull’editor Gutenberg.

Sei esempi di come i plugin esistenti stanno indirizzando lo switch a Gutenberg

Il modo in cui gli autori dei plugin creano per Gutenberg dipende principalmente dalla funzione del plugin.

Da un lato, hai plugin che si concentrano sull’aggiunta di contenuti front-end. Questo è principalmente ciò che in precedenza sarebbe stato fatto aggiungendo uno shortcode.

Un buon esempio è un plug-in per moduli. Praticamente ogni plug-in per moduli offre un’interfaccia separata per creare i moduli e quindi uno shortcode per incorporare effettivamente tali moduli nel front-end.

Questi tipi di plugin in genere si rivolgono a Gutenberg con a blocco personalizzato per facilitare l’inserimento di contenuti. Vedrai diversi esempi in questa sezione da:

  • Ninja Forms
  • Dare
  • WooCommerce

Quindi, hai altri plugin che ti aiutano a controllare i dettagli dietro le quinte. In genere, questi plugin utilizzano meta box.

L’esempio più noto sarebbe qualcosa come Yoast SEO. Non stai aggiungendo contenuti, ma tutte quelle informazioni relative a meta-box sono essenziali.

Le meta box ora funzionano con Gutenberg, ma c’è ancora una possibilità per quei plugin di cambiare la loro funzionalità per trarre vantaggio da Gutenberg. Ti mostrerò alcuni modi in cui Yoast SEO potrebbe affrontare il problema, oltre a come abbiamo scelto di fare le cose con alcuni dei nostri plugin.

1. Ninja Forms aggiunge un nuovo blocco Gutenberg

Ninja Forms è uno dei plugin di moduli più popolari nel repository WordPress.org. Finora, si sta rivolgendo a Gutenberg aggiungendo un semplice Ninja Forms bloccare.

Inserisci il blocco come qualsiasi altro blocco di Gutenberg:

come i ninja formano gli sviluppatori che costruiscono per Gutenberg

Quindi, puoi selezionare il modulo dal menu a discesa:

blocco di forme ninja

E una volta selezionato un modulo, vedrai un’anteprima dal vivo direttamente nell’editor:

anteprima dal vivo del modulo

In questo momento, è tutto qui. Ma questo è un solido approccio di base perché:

  • Elimina la necessità di lavorare direttamente con i codici brevi
  • Puoi vedere un’anteprima dal vivo del tuo design mentre stai ancora modificando la tua pagina

I prossimi due plugin si baseranno su questo con alcune opzioni di controllo / styling più profonde.

2. Give aggiunge due blocchi Gutenberg con opzioni di layout

Dare è un popolare plugin per le donazioni con un team di sviluppo che è stato molto proattivo sull’integrazione di Give con l’editor Gutenberg (se ti piace l’argomento di questo post, ti godrai la serie #PlayingWithBlocks alla Dare blog, dove il team Give fornisce i dettagli dei loro piani per costruire per Gutenberg).

Give ha una delle esperienze più snelle di Gutenberg che ho provato. Non solo puoi presentare i moduli di donazione tramite i due blocchi di Give, ma puoi anche modellarli utilizzando l’interfaccia di Gutenberg.

Dai due blocchi che ti consentono di incorporare:

  • Un unico modulo di donazione
  • Una griglia di moduli di donazione

dare blocchi di gutenberg

Come Ninja Forms, ottieni un’anteprima dal vivo del tuo modulo. Ma hai anche Bloccare opzioni di modifica che ti consentono di:

  • Scegli il formato
  • Abilita / disabilita l’obiettivo della donazione
  • Scegli dove posizionare i contenuti

opzioni di layout a blocchi

Se passi con il mouse sul modulo, otterrai un link diretto per modificarlo:

modifica a blocchi

Quindi c’è uno sguardo a come i blocchi possono andare un po ‘più in profondità dell’attuale implementazione di Ninja Forms. Ma WooCommerce fa un passo avanti …

3. WooCommerce aggiunge un blocco di prodotti con controllo colonna

Mentre WooCommerce probabilmente aggiungerà più integrazioni di Gutenberg man mano che WordPress 5.0 si avvicina (alcuni idee su come aggiungere prodotti qui), la squadra ha già immerso le dita dei piedi in Gutenberg con il funzionario Plugin WooCommerce Gutenberg Products Block.

Sì, in questo momento si tratta di un plug-in separato. Ma una volta installato, puoi inserire i prodotti WooCommerce esistenti come blocco nel contenuto di Gutenberg.

Quando aggiungi il Prodotti blocca, puoi scegliere quali prodotti visualizzare:

gutenberg woocommerce block

Quindi, è possibile utilizzare le opzioni di modifica dei blocchi per modificare il layout:

modifica del layout del woocommerce in gutenberg

Questo mi entusiasma molto perché è un ottimo esempio di come Gutenberg lo rende più accessibile per lo stile / configurazione di contenuti non standard.

4. Beaver Builder aggiunge a "Converti in Beaver Builder" opzione

Si è parlato molto di come i costruttori di pagine affronteranno Gutenberg. Non è ancora molto concreto, ma Beaver Builder ha aggiunto una funzione in Beaver Builder 2.1 che ti consente di convertire un layout Gutenberg in Beaver Builder:

castoro costruttore gutenberg

Al momento, il processo di conversione non è perfetto. Ma l’idea di essere in grado di spostarsi tra Gutenberg e un generatore di pagine è intrigante se la conversione fosse perfetta.

5. I meta box dovrebbero comunque funzionare – Yoast SEO è un buon esempio

Non credo che Yoast SEO abbia ancora apportato modifiche per rivolgersi a Gutenberg, quindi in questo momento questo è più un esempio di come funzionano i meta box esistenti con Gutenberg (se non hai seguito da vicino Gutenberg – ora ha il supporto dei meta box, anche se lo è più per la compatibilità con le versioni precedenti rispetto a una soluzione a lungo termine).

Come puoi vedere, la principale meta box Yoast SEO arriva incolume con Gutenberg:

gutenberg si trova seo meta box

Ma ti mancano i punteggi SEO e di analisi del contenuto che andavano nella barra laterale.

Quindi, come potrebbe Yoast costruire per Gutenberg per affrontarlo? Ecco alcuni mockup per possibili modi in cui Yoast può integrare la sua analisi nell’interfaccia di Gutenberg attuale:

Mockup Bhai avvertito seo
Mockup Csei in grado di analizzare i contenuti

6. Come stiamo affrontando le meta box nella WP Product Review

Nostro Plug-in WP Product Review è uno di quei plug-in che utilizza una meta-box per controllare l’output sul front-end (una casella di revisione in questo caso).

Ecco come stiamo lavorando per integrare WP Product Review nell’editor Gutenberg:

recensione prodotto wp gutenberg

Quando gli utenti indicano che il post è una recensione con un interruttore della barra laterale, saranno in grado di configurare tutto ciò che riguarda la loro casella di revisione dalle opzioni sopra:

recensione wp pro gutenberg toggle

Sviluppatori: ecco un’ottima risorsa per preparare il plug-in per Gutenberg

Se sei un vero sviluppatore di plug-in, potresti chiederti come dovresti creare per Gutenberg per il tuo plug-in specifico. Beh … non posso dirtelo. Ma posso indicarti questo fantastico post del nostro Hardeep Asrani. Hardeep fornisce alcuni suggerimenti utili per preparare il tuo plugin per Gutenberg.

Gli sviluppatori possono costruire per Gutenberg anche con nuovi plugin

Gli sviluppatori non si concentrano solo sulla compatibilità dei plug-in esistenti con Gutenberg, ma stanno anche pianificando di costruire per Gutenberg con nuovi plug-in.

Nuovi blocchi di Gutenberg a bizzeffe

Da un lato, hai una miriade di plugin generali che aggiungono solo nuovi tipi di blocchi di contenuti. Questi danno a Gutenberg una sensazione di builder di pagine. Puoi trovare blocchi per:

  • Tabelle dei prezzi
  • Testimonianze
  • Membri del team
  • Eccetera.

Ad esempio, ecco un blocco della tabella dei prezzi dal Impilabile: plugin Ultimate Gutenberg Blocks. Guarda quanto sono dettagliate le opzioni di modifica dei blocchi:

nuovi blocchi di gutenberg

Ci sono già un sacco di questi plugin su WordPress.org. Ma oltre al summenzionato plug-in Stackable, altre offerte popolari sembrano essere:

C’è anche un’offerta chiamata CoBlocks che si commercializza come "Blocchi Gutenberg per Content Marketing".

Penso che questo approccio di nicchia sia particolarmente interessante. Forse in futuro vedremo speciali set di blocchi Gutenberg per:

Il Blocco di recensione del libro plugin è un altro mini esempio di come i blocchi di nicchia Gutenberg potrebbero diventare una cosa.

Un esempio di come i campi personalizzati possono funzionare con Gutenberg

Campi personalizzati Gutenberg è un altro plug-in interessante che sembra avere una certa trazione.

Semplifica l’impostazione di campi personalizzati o gruppi di campi associati a un particolare tipo di post personalizzato:

campi personalizzati dell'editor gutenberg

Quindi, quando vai all’editor di Gutenberg, quei campi personalizzati vengono precompilati come blocchi:

esempio di campo personalizzato gutenberg

Molte persone si sono chieste come funzioneranno i campi personalizzati con Gutenberg – questo è un esempio promettente che è già in circolazione. Puoi saperne di più qui.

Tre esempi di come gli sviluppatori di temi stanno affrontando la transizione a Gutenberg

Hai appena visto alcuni esempi di come gli sviluppatori di plugin possono creare per Gutenberg, ma i temi?

Gli sviluppatori di temi sembrano seguire due strade principali per affrontare la transizione:

  • Preparare temi Gutenberg aggiungendo lo stile per i blocchi e supportando le opzioni di layout di Gutenberg
  • Utilizzo dei blocchi Gutenberg per creare contenuti tematici

Ecco alcuni esempi per dipingere l’immagine …

1. Aggiunta di stili personalizzati all’editor Gutenberg

Una cosa davvero interessante che stiamo vedendo fare dagli sviluppatori è l’aggiunta di stili di temi all’attuale interfaccia Gutenberg back-end. Questo apre le porte per creare un’esperienza davvero WYSIWYG, anche se Spencer di BigBox WooCommerce descrive alcuni problemi relativi allo stile dei blocchi di terze parti.

Ad esempio, guarda come il tema Ohana di ThemeShaper ridisegna completamente tutto il contenuto di Gutenberg, incluso il titolo del post:

stili del cruscotto di Gutenberg

Se vuoi vederlo in azione, scarica il tema Ohana da GitHub. E ThemeShaper spiega anche come hanno ottenuto questo effetto in questo post del blog.

2. Aggiunta di nuove opzioni di allineamento a tutta larghezza

Un altro accorgimento di compatibilità del tema che vedrai è l’aggiunta di Allineamento ampio supporto. In sostanza, questo ti consente di creare determinati blocchi a larghezza intera. L’esempio più comune sarebbe l’inserimento di un’immagine a larghezza intera.

Ancora una volta, puoi vederlo in effetti con il tema Ohana:

layout ampio gutenberg

Affinché questo allineamento funzioni, gli autori dei temi devono dichiarare esplicitamente il supporto.

3. Creazione di contenuti dimostrativi a tema con blocchi – ad es. Il tema del blocco

Infine, questo approccio di Organic Themes è piuttosto interessante:

Il tema del blocco il contenuto demo è interamente costruito con blocchi Gutenberg.

Questo è qualcosa che senza dubbio continueremo a vedere crescere, come ha detto esplicitamente Matt nella tabella di marcia di Gutenberg che luglio includerebbe l’esplorazione "espandere Gutenberg oltre la posta nella personalizzazione del sito."

Oltre al tema Block, Array Themes ha anche un Tema di blocchi atomici che è specificamente progettato per integrarsi con il plug-in Atomic Blocks sopra menzionato.

Sviluppatori: ecco come preparare il tema per Gutenberg

Se sei uno sviluppatore di temi che si chiede come rendere il tema esistente compatibile con Gutenberg, Bill Erickson ha un’ottima guida ai punti più alti. E il Supporto per temi sezione del manuale di Gutenberg è un’altra buona risorsa.

Ci saranno sicuramente altre cose interessanti a venire

Dal campionamento sopra, spero che tu abbia una migliore comprensione di come gli sviluppatori di plugin e temi stanno pianificando di costruire per Gutenberg.

Da un punto di vista personale, so che scrivere questo post mi ha reso particolarmente entusiasta delle possibilità con Gutenberg.

Sul fronte dei plug-in, l’utilizzo dei blocchi per sostituire tutte le cose che sarebbero state fatte in precedenza con gli shortcode è un grande miglioramento per l’usabilità, specialmente per gli utenti occasionali.

E anche il modo in cui gli sviluppatori di temi possono introdurre i propri stili e incorporare i blocchi è eccitante, specialmente quando Gutenberg si espande maggiormente nella personalizzazione del sito.

Ora oltre a te – ti sei imbattuto in qualche grande esempio di plugin o autori di temi che hanno trovato modi interessanti per costruire per Gutenberg? Fateci sapere nei commenti!

Non dimenticare di partecipare al nostro corso intensivo per accelerare il tuo sito WordPress. Con alcune semplici correzioni, puoi ridurre i tempi di caricamento anche del 50-80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map