Come adattare il plug-in per Gutenberg: parte 1 (Block API)

Come adattare il plug-in per Gutenberg: parte 1 (Block API)

Come adattare il plug-in per Gutenberg: parte 1 (Block API)
СОДЕРЖАНИЕ
02 июня 2020

"Ho un plugin," ti dice, "come posso renderlo pronto per Gutenberg?"


La storia è semplice; Gutenberg è la nuova esperienza di redattore in WordPress, che verrà unita al core nella prossima versione principale. Molti plugin che non tengono il passo con questo diventerà obsoleto. Ciò rende essenziale adattare il plug-in per Gutenberg prima che sia troppo tardi.

Chi è interessato?

Quasi tutti i plugin che hanno a che fare con l’editore dei post sarà influenzato da Gutenberg. Ad esempio, se il tuo plugin aggiunge un pulsante in TinyMCE per inserire un shortcode nell’editor, cattive notizie; sarà la fine.
Adatta il tuo plug-in per Gutenberg: parte 1 (Block API)

"Devo adattare i miei plugin per Gutenberg?"

Quindi quali plugin devono essere aggiornati per Gutenberg? Eventuali plugin che funzionano con:

  • Metabox personalizzati
  • Shortcodes
  • Pulsanti TinyMCE
  • o qualsiasi altra funzione dell’editor

Mentre alcuni plugin funzioneranno ancora con Gutenberg, come un plugin che aggiunge un semplice metabox, ad esempio, non sarà un’esperienza così fluida per i tuoi utenti.

Persino gli shortcode continueranno a funzionare come prima, ma saranno solo nodi di testo nell’editor, mentre tutti i plugin shortcode per Gutenberg seguiranno la sua UI di blocco e saranno più facili da usare per gli utenti.

Quindi sì, gli utenti preferiranno i plug-in creati per l’esperienza di Gutenberg. E quelli per rimanere indietro saranno sostituiti da un plugin della concorrenza.

Solo per darti un’idea, ecco un esempio di come si presenta l’esperienza di vecchio editor standard dell’utente con un nostro plug-in (un), e poi come appare a Gutenberg (B) – con il plugin ottimizzato per questo.

(B)Feed RSS Feedzy: un plugin pronto per Gutenberg

Non aver paura! Siamo qui per aiutarti a preparare i tuoi plug-in per Gutenberg. Esistono molti modi per integrare il tuo plugin con Gutenberg, a seconda di come funziona il tuo plugin, di cui discuteremo in questo articolo.

Cose che vale la pena sapere in anticipoGutenberg è scritto su React. E i plugin di Gutenberg sono codificati in JavaScript, che può anche essere una transizione approssimativa per gli sviluppatori che programmano solo in PHP. Sebbene non sia necessario conoscere React per creare plug-in per Gutenberg, avrai bisogno di una conoscenza di base di JavaScript. Se hai già lavorato su React e JSX, saranno motivi simili per te.

Mentre non c’è abbastanza documentazione ufficiale per Gutenberg, il suo repository Github ha molte informazioni preziose per gli sviluppatori. Se vuoi imparare a fondo lo sviluppo di Gutenberg, devi tenere gli occhi aperti su tutto ciò che sta accadendo nel repository Gitenberg di Gutenberg perché il progetto si sta muovendo molto velocemente e le cose cambiano ogni giorno.

Come adattare il tuo plugin per Gutenberg

L’API di Gutenberg ci offre molti modi per estendere l’editor, come Block API, Shortcode API e altro. L’API da utilizzare dipende dal tipo di plug-in che stiamo creando.

Se il tuo plugin è un semplice plugin shortcode, allora Block API può essere usato per creare un bellissimo blocco per l’editor. Ma se il tuo plug-in utilizza metabox complessi in cui un blocco non è sufficiente, possiamo utilizzare l’API Sidebar.

Inoltre, utilizzeremo un moderno stack di strumenti di sviluppo JavaScript, come NodeJS, NPM, webpack ed ESNext. Ti forniremo file di esempio, quindi non devi preoccuparti di impostare il tuo ambiente di sviluppo.

In questo post, vedremo come rendere compatibile il tuo plugin Gutenberg usando l’API Block. Entreremo negli altri metodi (API della barra laterale, Pannello di pubblicazione, Barra di stato & API simili) nella seconda parte, se necessario.

Puoi trovare tutti gli esempi citati in questo repository GitHub.

Ambiente di sviluppo Gutenberg

Lo sviluppo per Gutenberg richiede l’installazione di numerosi strumenti, come NPM, webpack, Babel e JSX. Ci vuole molto tempo e fatica, quindi abbiamo preparato l’ambiente per te.

Gutenberg Boilerplate è un plug-in con esempi ed impostazioni di sviluppo Gutenberg minimi. Contiene un esempio di blocco e barra laterale. Puoi usarlo per estenderlo nel tuo blocco personalizzato.

Gutenberg Boilerplate

Puoi eseguire il fork o il clone Gutenberg Repository della caldaia alla tua / Wp-content / plugins / e utilizzarlo come ambiente di sviluppo.

Successivamente, è necessario installare NodeJS sul computer per iniziare. Passare alla cartella Gutenberg Boilerplate ed eseguire npm install

Da questo punto in poi, è necessario conoscere tre comandi che verranno utilizzati durante il processo di sviluppo:

  • npm install – Installa le dipendenze del progetto quando clonate il progetto.
  • npm run dev – Compila il codice durante il processo di sviluppo. È necessario eseguirlo una volta e continuerà a controllare i cambiamenti.
  • npm run build – Compila il codice per una build ottimizzata al termine del processo di sviluppo.

API di blocco

I blocchi sono l’elemento fondamentale di Gutenberg, essendo un editor basato su blocchi. Block API ti consente di creare blocchi per Gutenberg. Puoi creare blocchi in grado di eseguire il rendering di HTML di base, codici brevi o persino creare blocchi dinamici per visualizzare, ad esempio, i tuoi ultimi post.

Il processo basato su un plug-in esistente

Nel nostro esempio, adotteremo un shortcode Click to Tweet per un blocco Gutenberg. Questo shortcode Click to Tweet visualizza una casella Tweet con il tuo testo e un pulsante per twittare quel testo. Come questo:

Fai clic su Tweet Layout

Il nostro shortcode è simile al seguente:

[clicktotweet tweet ="Testo da visualizzare" tweetsent ="Testo da twittare" button ="Tweet" tema ="click-to-Tweet"]

Il nostro shortcode ha quattro parametri:

  • tweet: testo che appare sul tuo sito.
  • tweetsent: testo che va su Twitter.
  • pulsante: testo del pulsante Tweet.
  • tema: fai clic sul tweet o fai clic sul tweet-alt come tema della casella.

Adattamento dei plugin per Gutenberg con Block API

Esistono due modi per farlo con Gutenberg, o possiamo rendere l’HTML al front-end, oppure possiamo usare il nostro blocco Gutenberg per rendere il shortcode al front-end. Per questo articolo, faremo quest’ultimo.

Tutto il codice è disponibile in Ciao repository di plugin Gutenberg su GitHub. Puoi clonare il repository per vedere il plugin in azione o per modificare il codice.

Accoda script / stili per Gutenberg

Innanzitutto, dobbiamo accodare i nostri script e stili all’editor di Gutenberg usando enqueue_block_assets:

/ **
* Accoda front-end ed editor JavaScript e CSS
* /
funzione hello_gutenberg_scripts () {
$ blockPath = ‘/dist/block.js’;
$ stylePath = ‘/dist/block.css’;

// Accoda il file JS a blocchi in bundle
wp_enqueue_script (
‘hello-Gutenberg-block-js’,
plugins_url ($ blockPath, __FILE__),
[‘wp-i18n’, ‘wp-blocks’, ‘wp-editor’, ‘wp-components’],
filemtime (plugin_dir_path (__ FILE__). $ blockPath)
);

// Accoda stili frontend ed editor block
wp_enqueue_style (
‘Ciao-Gutenberg-block-css’,
plugins_url ($ stylePath, __FILE__),
”,
filemtime (plugin_dir_path (__ FILE__). $ stylePath)
);

}

// Gli hook hook funzionano nel hook dell’editor dei blocchi
add_action (‘enqueue_block_assets’, ‘hello_gutenberg_scripts’);

Abbiamo aggiunto quattro dipendenze al nostro script che useremo nel nostro blocco. Impariamo prima queste dipendenze:

wp-i18n è la versione di Gutenberg delle funzioni di internazionalizzazione, come ad esempio __ (). wp-blocks viene utilizzato per la funzione registerBlockType che registra il blocco. Utilizziamo gli script wp-editor e wp-components per vari componenti nel nostro blocco.

Ora che abbiamo accodato i tuoi beni, possiamo iniziare a scrivere il nostro blocco /src/block.js file.

Importare dipendenze

Se stai usando la piastra di cottura Gutenberg, allora il tuo block.js il file dovrebbe avere una struttura a blocchi di base che è possibile utilizzare per compilare plugin per Gutenberg:

/ **
* Librerie di blocchi interne
* /
const {__} = wp.i18n;

const {registerBlockType} = wp.blocks;

/ **
* Blocco registro
* /
export default registerBlockType (‘gutenberg-boilerplate / block’, {
// Titolo del blocco
titolo: __ (‘Gutenberg Boilerplate’),
// Descrizione del blocco
descrizione: __ (‘Un esempio di blocco.’),
// Categoria di blocco
categoria: ‘comune’,
// Icona a blocchi
icona: ‘admin-site’,
// Blocca parole chiave
parole chiave: [
__ (‘Boilerplate’),
__( ‘Ciao mondo’ ),
__( ‘Esempio’ ),
],
attributi: {
},
// Definizione dell’interfaccia di modifica
edit: props => {
ritorno (

{__ (‘Hello Backend’)}

);
},
// Definizione dell’interfaccia front-end
save: props => {
ritorno (

{__ (‘Hello Frontend’)}

);
},
});

Puoi avviare npm run dev per iniziare a compilare il nostro codice in tempo reale.

Innanzitutto, importeremo tutti i componenti e le librerie di cui abbiamo bisogno per il blocco in alto:

/ **
* Blocco delle dipendenze
* /

importa i nomi di classe da ‘classnames’;

/ **
* Librerie di blocchi interne
* /
const {__} = wp.i18n;

const {registerBlockType} = wp.blocks;

const {
RichText,
InspectorControls,
BlockControls,
} = wp.editor;

const {
PanelBody,
TextareaControl,
textcontrol,
Dashicon,
Toolbar,
Pulsante,
tooltip,
} = wp.components;

Le prime importazioni classnames che abbiamo installato utilizzando npm per utilizzare più classi nel nostro codice, poiché JSX non consente più classi negli elementi.

Impareremo su altri componenti che abbiamo importato mentre li usiamo.

Definire gli attributi

Ora definiremo quattro attributi per il nostro blocco Gutenberg, lo stesso del nostro shortcode:

attributi: {
tweet: {
tipo: ‘stringa’,
},
tweetsent: {
tipo: ‘stringa’,
},
pulsante: {
tipo: ‘stringa’,
impostazione predefinita: __ (‘Tweet’),
},
tema: {
tipo: “booleano”,
impostazione predefinita: falso,
},
},

Come puoi vedere, tutti gli attributi sono gli stessi del nostro shortcode. Tutti gli attributi hanno una chiave di tipo che indica a Gutenberg il suo tipo di dati. Puoi usare string, number, boolean & oggetto come tipi accettati.

Alcuni degli attributi contengono anche un valore predefinito. Gli attributi possono anche avere altre proprietà, come sorgente e selettori, che non useremo nel nostro esempio, ma puoi saperne di più su di loro qui.

Modifica interfaccia

Ora costruiremo l’interfaccia di modifica del nostro blocco, che sarà il display: gli utenti lo vedranno durante la modifica del blocco in Gutenberg.

Per avere un’idea di base, possiamo prima programmare il nostro blocco e costruirci sopra sostituendo la seguente area nel nostro codice:

// Definizione dell’interfaccia di modifica
edit: props => {
ritorno (

{__ (‘Hello Backend’)}

);
},

Con il seguente codice:

// Definizione dell’interfaccia di modifica
edit: props => {
ritorno [

Zucche e pinguini

Tweet

];
},

Questo dovrebbe darti un’idea del nostro risultato finale. Sarà simile a questo:

Plugin per Gutenberg

Il primo elemento del blocco è l’area di testo del tweet. Lo sostituiremo con un campo di testo modificabile, simile al blocco di intestazione di Gutenberg.

Noi useremo RichText componente che abbiamo precedentemente importato per sostituire il nostro testo codificato.

Il nostro componente RichText ha cinque argomenti. Il formato è una stringa, poiché utilizzeremo il nostro shortcode per visualizzare gli elementi nel front-end. Se avessimo voluto utilizzare un selettore nel nostro attributo, il formato sarebbe stato un array.

RichText ha alcune opzioni di formattazione per impostazione predefinita, come grassetto e corsivo, che abbiamo disabilitato passando un array vuoto nell’argomento formattingControls.

segnaposto è il testo segnaposto quando non c’è testo nel campo e onChange attiverà la funzione onChangeTweet quando si verifica un evento di modifica.

Infine, valore sarà il valore del nostro campo, che sarà preso dall’attributo tweet che abbiamo definito in precedenza.

Una volta che abbiamo definito la nostra area RichText, dobbiamo costruire la funzione onChangeTweet che si attiverà quando il valore cambia nel nostro campo di testo.

// Definizione dell’interfaccia di modifica
edit: props => {
const onChangeTweet = value => {
props.setAttributes ({tweet: value});
};
ritorno [
…resto del codice

Passiamo il valore del campo RichText alla funzione onChangeTweet, che utilizza props.setAttributes funzione per aggiornare il valore dell’attributo tweet.

Vedrai il potere di Gutenberg ora quando usi il tuo blocco.

RichField a Gutenberg

Non è fantastico?

Block Inspector

Quando si creano plug-in per Gutenberg, non è necessario reinventare la ruota ogni volta per creare pannelli opzionali per i plug-in. Gutenberg ci offre un modo semplificato per consentire la personalizzazione dei blocchi e garantisce che ogni utente abbia un’esperienza coerente con i modelli di interfaccia utente integrati.

Analogamente al componente RichText, il componente InspectorControls aggiunge una barra laterale quando viene selezionato il blocco. Qualcosa come questo:

Controlli dell'ispettore Gutenberg

Utilizzeremo anche TextareaControl e TextControl per aggiungere un campo di input di testo e textarea alla nostra area Inspector.

Aggiungeremo il seguente codice alla tua dichiarazione di reso:

!! props.isSelected && (

),

props.isSelezioni selezionate per assicurarsi che Inspector appaia solo quando viene selezionato il blocco.

I componenti TextareaControl e TextControl, analogamente a RichText, hanno un metodo value e onChange.

Dobbiamo anche modificare il codice della visualizzazione del blocco per adattarsi alle nuove modifiche. Nel nostro caso, dobbiamo solo aggiungere il testo del pulsante al nostro blocco poiché il testo del Tweet verrà aggiunto al collegamento, quindi non è necessario mostrarlo nel nostro back-end.

È possibile sostituire il collegamento ipertestuale nel nostro codice iniziale con il seguente:


{props.attributes.button}

Come accennato in precedenza, stiamo rimuovendo il collegamento ipertestuale dal nostro codice perché non è necessario mostrarlo nel back-end. Questo farà apparire il nostro blocco così:

Gutenberg Fai clic per Tweet Controlli ispettore

Block Inspector può essere uno strumento potente per il tuo blocco. Se il tuo plug-in ha opzioni avanzate che sono troppo complicate per l’area dell’editor, puoi inserirle nell’area Inspector.

Aggiungeremo un’ultima opzione al nostro blocco per completare la parte JavaScript nella sezione successiva.

Block Toolbar

Block Toolbar è un altro componente dell’interfaccia utente pre-costruito che possiamo usare per aggiungere più opzioni al nostro blocco. Apparirà sopra il tuo blocco quando lo selezioni. Esempio:

Gutenberg Block Toolbar

Idealmente, Block Toolbar dovrebbe contenere i controlli primari del blocco, con Inspector che ospita i controlli secondari. Tuttavia, questo è discutibile e dipende dal tuo blocco.

Utilizzeremo l’area Block Toolbar per ospitare il nostro controllo di stile alternativo.

Simile a Block Inspector, dobbiamo aggiungere il seguente codice alla nostra dichiarazione di ritorno per aggiungere Block Toolbar al nostro blocco:

!! props.isSelected && (

),

Utilizziamo i componenti BlockControls e Toolbar per aggiungere una barra degli strumenti al nostro blocco. Simile a Block Inspector, props.isSelected assicura che la nostra barra degli strumenti appaia solo quando ci concentriamo sul blocco.

Usiamo anche componenti Tooltip e Button per il nostro controllo. Il componente Tooltip è avvolto attorno al componente Button per assicurarsi che ci sia una descrizione comandi quando si passa il mouse sopra il controllo per darti più contesto.

Il componente Button utilizza il modulo classnames che abbiamo importato in precedenza nell’articolo. Abbiamo usato la funzione classnames per dare tre classi al nostro controllo. La terza classe, è attiva, appare solo quando il valore del nostro attributo tema è vero.

La sua funzione onChange imposta l’attributo tema su true / false. Alla fine, i componenti Dashicon vengono utilizzati per visualizzare un’icona per il nostro controllo.

Dovremo anche cambiare il nostro codice di blocco affinché funzioni con le modifiche. Dobbiamo sostituire la seguente riga:

Con:

Stiamo verificando se l’attributo del tema è vero o falso e assegniamo una classe al nostro blocco di conseguenza.

Ora il tuo blocco dovrebbe assomigliare a questo:

Fai clic su Tweet Toolbar

Abbiamo terminato la parte JavaScript del nostro blocco Gutenberg. Puoi trovare l’intero codice sorgente del file Qui.

Ora finiremo il nostro blocco gestendo l’output sul lato server.

Rendering lato server

Gutenberg ti consente di utilizzare il rendering lato server per mostrare i tuoi blocchi sul front-end. Il rendering sul lato server ci consente di creare blocchi per codici brevi.

Innanzitutto, renderemo il nostro metodo di salvataggio per restituire null sostituendolo con il seguente codice:

// Definizione dell’interfaccia front-end
Salva() {
// Rendering in PHP
restituisce null;
},

Useremo register_block_type PHP per registrare il nostro tipo di blocco in PHP:

if (function_exists (‘register_block_type’)) {
// Aggancia il rendering lato server nel rendering callback
register_block_type (
“hello-gutenberg / click-to-tweet”, [
‘render_callback’ => ‘Hello_gutenberg_block_callback’,
‘attributi’ => Vettore(
‘tweet’ => Vettore(
‘tipo’ => ‘corda’,
),
‘tweetsent’ => Vettore(
‘tipo’ => ‘corda’,
),
= ‘Pulsante’> Vettore(
= ‘Type’> ‘corda’,
‘default’ => ‘Tweet’,
),
‘tema’ => Vettore(
= ‘Type’> ‘Booleana’,
‘default’ => falso,
),
),
]
);
}

La nostra funzione register_block_type. Innanzitutto passiamo il nostro nome di blocco, insieme a una serie di argomenti.

Il primo argomento è la funzione render_callback, che chiama la nostra funzione hello_gutenberg_block_callback per il rendering sul lato server.

Dopo il callback del rendering, passiamo gli attributi come un array, simile al file block.js, che utilizziamo nella nostra funzione di callback del rendering.

La nostra funzione di richiamata di rendering è simile alla seguente:

funzione hello_gutenberg_block_callback ($ attr) {
estratto ($ attr);
if (isset ($ tweet)) {
$ tema = ($ tema === vero? ‘click-to-tweet-alt’: ‘click-to-tweet’);
$ shortcode_string = ‘[clicktotweet tweet ="%S" tweetsent ="%S" button ="%S" tema ="%S"] ‘;
return sprintf ($ shortcode_string, $ tweet, $ tweetsent, $ button, $ tema);
}
}

Estraggiamo tutti gli attributi e poi li restituiamo nel nostro shortcode. Questo è tutto ciò che serve per adattare i tuoi plugin shortcode per Gutenberg.

Puoi trovare tutto il codice usato in questo articolo in questo ciao-Gutenberg deposito.

Nella parte successiva daremo uno sguardo ad altri modi per adattare i plugin esistenti per Gutenberg, inclusa l’API Sidebar.

Se hai domande su come adattare il tuo plugin per Gutenberg, chiedi loro 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
    Это интересно
    Adblock
    detector