Utilizzo di PHP per eseguire il rendering di un blocco nell’editor di WordPress (Gutenberg)

Quando crei un blocco nell’editor blocchi di WordPress (Gutenberg) probabilmente hai utilizzato JavaScript per rendere il blocco nel contenuto del tuo post. In questa guida esamineremo l’utilizzo di PHP per eseguire il rendering del blocco, creando ciò che è noto come ‘Blocco dinamico’.

Lo terremo semplice in questa guida ed espanderemo ciò che abbiamo già creato nella nostra guida ai plugin di WordPress Gutenberg. Tuttavia, i blocchi dinamici sono super utili per presentare informazioni più complesse in un blocco, come un post loop.

Prerequisiti

• Familiarizzare con la creazione di plugin per WordPress Gutenberg

Crea PHP per il blocco dinamico

Se non l’hai già fatto, completa i passaggi nella guida al plugin Gutenberg di WordPress, in modo da avere un’area RichText modificabile.

Aggiungi il seguente PHP nel tuo plugin (in questo esempio wholesome-plugin.php), sostituendo il blocco di codice che inizia con register_block_type:

register_block_type(
  'wholesomecode/wholesome-plugin',
  [
    'attributes'      => [
      'blockText' => [
        'default' => 'Wholesome Plugin – hello from the editor!',
        'type'    => 'string',
      ],
    ],
    'editor_script'   => 'wholesomecode-wholesome-plugin-block-editor',
    'editor_style'    => 'wholesomecode-wholesome-plugin-block-editor',
    'render_callback' => function( $attributes, $content) {
      $block_text = esc_html( $attributes['blockText'] );
      return "<p class='wp-block-wholesomecode-wholesome-plugin'>$block_text</p>";
    },
    'style'           => 'wholesomecode-wholesome-plugin-block',
  ]
);

Attributi

La prima cosa che noterai è che abbiamo ridefinito gli attributi in questo file e sono gli stessi che abbiamo definito nel /src/index.jsfile nella nostra guida precedente.

Il motivo per cui dobbiamo farlo è che il nostro output possa accedere ai tipi di attributi e al loro contenuto predefinito.

Rendering di richiamata

Nel codice sopra abbiamo anche aggiunto l’argomento render_callbackalla register_block_typefunzione. Questo gestisce l’output del blocco, sostituendo la savefunzione nel /src/index.jsfile.

La render_callbackfunzione accetta due parametri. Questi sono:

• $attributes— questo riceve gli attributi che abbiamo definito sia attributesnell’argomento di questa funzione che in quelli nel /src/index.jsfile
• $content— questo riceve tutto ciò che è stato salvato tramite il savemetodo nel /src/save.jsfile. Questo è utile se stiamo rendendo InnerBlocks, che altrimenti non verrebbe passato al metodo di rendering PHP.

In questo esempio abbiamo usato una funzione anonima per render_callback, ma avremmo potuto semplicemente passare piuttosto facilmente un riferimento a una funzione qui e definirlo altrove.

Nota che non abbiamo la possibilità di accedere ai props nel render_callback di PHP, quindi abbiamo dovuto aggiungere manualmente la classe HTML al <p>tag in modo che i nostri stili funzionino ancora (in teoria potremmo sfruttare il $contentparametro e fare un po’ di trovare e sostituire l’inganno se li volessimo, ma questo è qualcosa per un’altra guida).

Rimuovere il metodo di salvataggio JavaScript

Come accennato in precedenza, il $contentparametro della render_callbackfunzione memorizza l’output del savemetodo JavaScript, ma si noti che non lo stiamo usando nel nostro codice.

Nel file /src/index.jssostituire il savemetodo con il seguente:

Questo dice al metodo di salvataggio di non restituire nulla.

Rimuovere l’ saveimportazione

Già che ci siamo, rimuovi anche la seguente riga da /src/index.js:

import save from './save';

Ora puoi /src/save.jsanche eliminare il file.

Compilazione del plugin

Apri il terminale, assicurati di essere nella directory principale del tuo plugin ed esegui il seguente comando:

Lo script verrà compilato. In caso di errori, il terminale dovrebbe informarti di cosa sono.

Usa il blocco dinamico

Ora dovresti essere in grado di inserire il blocco in una pagina, modificarne il contenuto e visualizzarlo sul front-end.

Il blocco dinamico in azione

In questo esempio di base il blocco apparirà e si comporterà come se avessi usato un metodo di rendering JavaScript.

• Dai un’occhiata alla creazione di blocchi figlio nidificati con il InnerBlockscomponente
• Esplora la memorizzazione degli attributi Gutenberg come post meta-campi