Come preparare i plugin per WordPress Gutenberg

Gutenberg è un'interfaccia di modifica completamente nuova che cambierà il modo in cui le persone usano WordPress. Sei pronto per questo cambiamento? Se sei uno sviluppatore di plugin, devi preparare i tuoi plugin per Gutenberg. 

Nel caso in cui non hai ancora sentito parlare di Gutenberg, è un nuovo editor di WordPress che cambierà il modo in cui scrivi contenuti. Sotto Gutenberg, impostato per diventare parte del core di WordPress nella versione 5, ogni elemento del tuo contenuto sarà un blocco (di tipo paragrafo, immagine, blockquote, intestazione e così via).

Anche i metabox non saranno uguali. 

I metabox semplici dovrebbero funzionare con Gutenberg out of the box, anche se verranno visualizzati in modo diverso. Tuttavia, se hai metabox complessi come quello nel plugin SEO Yoast, dovrai testarlo contro Gutenberg e magari crearne uno nuovo solo per Gutenberg.

Quindi quali plugin devono essere aggiornati per Gutenberg? Plugin con:

• tipi di messaggi personalizzati
• Metabox complessi
• shortcodes
• o caratteristiche editoriali

Ci sono due approcci che possiamo prendere come sviluppatori di plugin: supporto Gutenberg o disattivare Gutenberg. Sostenere Gutenberg significherebbe che faremo uno sforzo ulteriore per rifattorizzare il nostro codice (magari anche duplicandone alcuni) in modo che i nostri utenti di plugin non abbiano alcuna difficoltà ad usarlo.

Come disabilitare Gutenberg

Se decidiamo di non supportare Gutenberg, allora dobbiamo disabilitare Gutenberg. Possiamo disabilitare Gutenberg completamente o solo dove viene utilizzato il nostro plugin. In questa sezione, prenderò il mio plugin "Simple Giveaways" che ha un tipo di post personalizzato e anche i metabox.

Disabilitare completamente Gutenberg

Questo è qualcosa che non raccomanderei di fare dal tuo plugin. Invece, potresti voler informare gli utenti del tuo plug-in con un avviso dell'amministratore che il tuo plug-in non funziona con Gutenberg in modo che possano tornare all'Editor classico.

Il ripristino può essere effettuato installando il plug-in Editor classico. Oppure puoi creare una nuova impostazione per il tuo plugin e farlo per disabilitarlo:

Questo filtro può essere trovato nella funzione gutenberg_can_edit_post_type che viene usato per verificare se Gutenberg può essere caricato su quel particolare tipo di messaggio. Se torniamo sempre falso, quindi significa che non appoggeremo affatto Gutenberg.
Disattivazione di Gutenberg per tipo di post
Se il tuo plugin ha un tipo di post personalizzato, puoi disabilitare Gutenberg per quel particolare tipo di post. Per disabilitare Gutenberg per il tuo tipo di post personalizzato, puoi semplicemente modificare la configurazione del tuo post.
Supporto per l'editor
Gutenberg non si caricherà se il tuo tipo di post non supporta l'editor. Questo è appropriato se il tuo tipo di post personalizzato non ha bisogno dell'editor.
 __ ('Simple Giveaways', 'giveasap'), 'labels' => $ labels, 'supports' => array ('title', // 'editor', Disabilitazione di Gutenberg 'thumbnail',), 'hierarchical' => falso, // ...); register_post_type ('giveasap', $ args);
Supporto dell'API REST
Forse hai bisogno dell'editor ma non ne hai bisogno nell'API REST? Gutenberg non si caricherà se non si supporta l'API REST. Analogamente all'esempio sopra, lo faremo nella configurazione del tipo di post.
 __ ('Simple Giveaways', 'giveasap'), // ... 'show_in_rest' => false, // Disabilita Gutenberg // ...); register_post_type ('giveasap', $ args);
Impostando il parametro show_in_rest a falso, disabiliteremo Gutenberg per quel tipo di messaggio.
Post Type Support
Possiamo usare il filtro precedentemente menzionato per disabilitare Gutenberg solo per il nostro tipo di post personalizzato.
Con questo codice, stiamo verificando se siamo sul nostro tipo di post personalizzato. Se lo siamo, quindi restituire semplicemente false. Questo non influenzerà nessun altro tipo di messaggio.
Disabilitare Gutenberg con i Metabox
Se hai metabox complessi, forse ci vorrebbe troppo tempo per creare una versione del tuo plugin che supporti Gutenberg. In questo caso, puoi disabilitare Gutenberg finché non hai qualcosa che funzioni con Gutenberg.
Per disabilitare Gutenberg con i tuoi metabox, devi definirli come non compatibile.
 falso,));
Se vuoi imparare come supportare Gutenberg con metabox complessi, devi imparare come convertirli in un blocco e anche come salvarli. Assicurati di controllare il manuale di WordPress Gutenberg per quello.
Come sostenere Gutenberg
Un'opzione migliore di disabilitare Gutenberg è supportarla!
Dal momento che i metabox funzioneranno probabilmente fuori dagli schemi, non avrai molto da fare qui (a meno che non siano avanzati, come abbiamo appreso prima). Quando supporti Gutenberg, lavorerai principalmente per creare nuovi blocchi per i tuoi codici brevi e anche per i widget.
Gli shortcode funzioneranno anche fuori dalla scatola. Ma per fornire un'esperienza utente migliore, probabilmente dovresti creare dei blocchi per loro.
È possibile creare blocchi statici e dinamici. I blocchi statici saranno completamente scritti in JavaScript e l'HTML emesso verrà salvato nel contenuto. 
I blocchi dinamici sono un po 'diversi. Dovrai anche creare la parte JavaScript in modo che funzioni con l'editor Gutenberg. Ma definirai anche una funzione PHP che verrà chiamata per renderla quando visualizzi quel contenuto nella parte anteriore del tuo sito.
Per comprendere blocchi statici e dinamici, esaminiamo un semplice esempio, un semplice blocco di avvisi, e implementalo in entrambi i modi. 
Registrazione di un blocco
Per registrare un blocco, prima dobbiamo definirlo in PHP e poi in JavaScript.
 'guten-tuts',)); // Il nostro blocco dinamico. register_block_type ('guten-tuts / alertdynamic', array ('render_callback' => 'guten_tuts_dynamic_alert'));  add_action ('init', 'guten_tuts_block');
Quando si registra uno script, è necessario definire le dipendenze qui. Il wp-block e wp-elemento le dipendenze sono quelle di cui abbiamo bisogno durante la creazione di blocchi.
Non entrerò in una panoramica dettagliata dei blocchi o dell'API nel suo complesso. Per capirlo di più, dovresti leggere il Manuale di Gutenberg.
JavaScript Block File
L'inizio del nostro file JavaScript block.js avrà questo:
var el = wp.element.createElement, __ = wp.i18n .__, registerBlockType = wp.blocks.registerBlockType, RichText = wp.blocks.RichText, blockStyle = backgroundColor: '# 900', color: '#fff', padding: '20px'; 
Blocco statico
Ora definiamo il nostro blocco statico. Dal momento che il nostro avviso sarà solo testo, abbiamo bisogno di un attributo: testo. Nel nostro modificare funzione (utilizzata nell'editor), avremo a RichText bloccare. Questo blocco ci consente di inserire il testo, aggiungere stili e così via.
La definizione del nostro attributo testo dirà al Gutenberg di spogliare il testo all'interno del div. Stiamo anche dicendo a Gutenberg che questo sarà un array di tutti gli elementi figlio. Solo per esempio, questo 
em text altro testo testo grassetto
 converrebbe in una matrice di tre elementi: "em text", "other text" e "testo in grassetto" insieme alla loro struttura come em e grassetto.
La conversione di questi attributi avviene nell'output di salvare metodo.
registerBlockType ('guten-tuts / alert', title: __ ('Guten Tuts - Alert'), icona: 'megafono', categoria: 'layout', attributi: text: type: 'array', source: ' child ', selector:' div ',, edit: function (props) var content = props.attributes.text; function onChangeText (newText) props.setAttributes (text: newText); return el (RichText , tagName: 'div', className: props.className, onChange: onChangeText, valore: content, isSelected: props.isSelected, style: blockStyle);, save: function (props) var text = props.attributes. text; return el ('div', style: blockStyle, className: props.className, text);,);
Blocco dinamico
Il blocco dinamico avrà il modificare metodo, ma il salvare il metodo tornerà nullo. Non abbiamo bisogno del salvare metodo qui perché definiremo una funzione di callback PHP per rendere il blocco dinamico sul fronte.
Abbiamo registrato un callback guten_tuts_dynamic_alert prima:
 'guten_tuts_dynamic_alert')); // ... 
Questo callback riceverà anche un parametro $ attributi. Questo sarà un array di tutti gli attributi registrati. Il comportamento è molto simile alla registrazione di uno shortcode.
La funzione guten_tuts_dynamic_alert sarà simile a questo:
 
 
L'output è solo un div elemento con un po 'di testo.
Per quanto posso dire, non possiamo usare il RichText per i blocchi dinamici perché gli attributi non si aggiornano. Se ho torto, fammi sapere nei commenti!
Useremo un regolare ingresso per inserire il testo dell'avviso. Dal momento che non abbiamo un salvare metodo qui, ho definito l'attributo testo come una semplice stringa.
registerBlockType ('guten-tuts / alertdynamic', title: __ ('Guten Tuts - Dynamic Alert'), icona: 'megafono', categoria: 'layout', attributi: testo: tipo: 'stringa', selettore: 'div',,, edit: function (props) var content = props.attributes.text; blockStyle ['width'] = '100%'; function onChangeText (e) var newText = e.target.value ; props.setAttributes (text: newText); return el ('input', className: props.className + 'widefat', onChange: onChangeText, valore: content, isSelected: props.isSelected, style: blockStyle) ;, save: function (props) return null;,);
Vedrai un regolare ingresso che ha un colore di sfondo e uno stile diverso rispetto al RichText bloccare. Certo, puoi cambiarlo e imitare gli stessi stili.
Poiché il nostro avviso di reso PHP ha un colore di sfondo diverso da quello definito all'interno del nostro codice JavaScript, possiamo anche vedere la differenza sul lato anteriore.
Conclusione
Preparare il tuo plugin per Gutenberg può essere molto impegnativo. Ma poiché Gutenberg è tanto estensibile quanto il resto di WordPress, hai un sacco di flessibilità per supportare le funzionalità del tuo plugin in Gutenberg.
Inizia oggi installando Gutenberg e testandolo con il tuo plug-in. 



		
			
	   
	




Codice