Crea un blocco Gutenberg personalizzato – Parte 9: Blocchi dinamici e rendering PHP

Finora abbiamo reso l’output del blocco in Javascript. Tuttavia, con contenuti dinamici come post recenti o visualizzazione di un post, è necessario eseguire il rendering dell’output del blocco in PHP. In questo post impareremo come e perché.

Perché dobbiamo gestire i blocchi dinamici in modo diverso?

Alcuni esempi sono ovvi; un blocco che mostra gli ultimi post in una categoria è dinamico perché i post cambieranno nel tempo. Non scegli i post nel blocco; invece probabilmente avrai le impostazioni per scegliere la categoria, quali informazioni mostrare per ogni post, il numero di post, il numero di colonne e così via. Ogni volta che WordPress carica un post con questo blocco, è necessario interrogare WordPress in quel momento per i post più recenti. La visualizzazione dello stesso post il mese successivo potrebbe produrre risultati diversi anche se il post con il blocco stesso non è stato aggiornato.

Ma la necessità di blocchi dinamici a volte non è così ovvia. Potresti immaginare un blocco di post in primo piano in cui scegli un post specifico per visualizzarlo, non è necessariamente dinamico. Ma potrebbe essere – e dovrebbe essere. Ricorda che il post selezionato può aggiornare il titolo, l’estratto o l’immagine in primo piano in qualsiasi momento e ciò dovrebbe riflettersi nei blocchi che presentano questo post.

Per creare un blocco non dinamico per mostrare un singolo post, dovrai salvare l’ID del post, il suo URL, l’URL dell’immagine in primo piano, la stringa dell’estratto o qualsiasi cosa ti serva per visualizzare l’anteprima del post, negli attributi del blocco. E qui sta il problema. Se aggiorni l’immagine in primo piano del post selezionato, il post con il blocco del post in evidenza non aggiornerà automaticamente i suoi attributi. Rimarrà salvato con l’URL della vecchia immagine in primo piano. Solo quando modifichi il post con il blocco e ti assicuri che salvi nuovamente gli attributi con le informazioni aggiornate, il blocco mostrerà le informazioni aggiornate corrette.

Quindi, ogni volta che trattiamo contenuti dinamici – post, categorie o qualsiasi cosa che potrebbe cambiare nel tempo – abbiamo a che fare con blocchi dinamici. E per i blocchi dinamici dobbiamo usare PHP, codice lato server, per eseguire il rendering del nostro blocco per garantire che recuperi informazioni aggiornate ogni volta che esegue il rendering.

La natura modificata dei blocchi dinamici nell’editor

Quando inizi a sviluppare blocchi dinamici, la natura del tuo blocco all’interno dell’editor cambierà. Anche la funzione del tuo blocco editdeve spesso essere dinamica. Ad esempio, per un blocco di post in primo piano dovrai recuperare i post tra cui scegliere, o per un blocco di notizie più recenti dovrai recuperare un elenco di categorie tra cui l’utente può scegliere.

È completamente possibile richiedere informazioni da WordPress dall’interno dell’editor eseguendo richieste AJAX, utilizzando pacchetti e componenti o eseguendole manualmente con l’ API REST di WordPress. Indipendentemente dal metodo utilizzato per il blocco, è necessario gestire il flusso di input asincrono: il lasso di tempo in attesa di una risposta.

Esistono più metodi e modelli per creare un blocco dinamico per Gutenberg. Più comunemente utilizzerai un modello React chiamato componenti di ordine superiore in cui WordPress fornisce molte funzioni e componenti per.

Vedremo come recuperare i post e come recuperare le categorie nel nostro blocco nella prossima parte del tutorial. Per ora dobbiamo imparare come rendere PHP il nostro blocco.

Preparare il nostro blocco per il rendering PHP

La parte principale che dobbiamo fare in Javascript è rendere la savefunzione del blocco return null. Potresti mantenere l’output originale, ma una volta detto a WordPress di utilizzare PHP per il rendering del blocco, questo verrà ignorato. Per chiarire a noi stessi e agli altri che l’output del blocco non è gestito in Javascript, cambieremo la savefunzione.

Non dimenticare che la modifica della funzione di salvataggio comporterà la rottura di tutti i blocchi esistenti. Aggiungi nuovamente il blocco. Il blocco dovrebbe funzionare come prima; con le impostazioni e aggiornando gli attributi. Ora semplicemente non produrrà nulla nel frontend. Il blocco dei commenti sarà lì, memorizzando tutti gli attributi in JSON, ma non verrà visualizzato alcun HTML visibile.

Tuttavia; se qualcuno dei tuoi attributi sta usando la sourceproprietà, devi cambiarlo. Questo non è supportato con i blocchi renderizzati con PHP perché vengono analizzati direttamente dall’output del salvataggio, su cui ora torniamo null. Usiamo source sul secondo RichTextnel nostro blocco – per il paragrafo. A questo punto l’editor non salverà affatto ciò che hai inserito RichText.

Quindi, se stai ancora utilizzando sourcel’ myRichTextattributo, è necessario rimuovere le proprietà sourcee selectorper garantire che gli attributi vengano archiviati e non analizzati dalla savefunzione:

attributes: {
    ...
    myRichText: {
        type: 'string',
    },
    ...

Dopo questo il nostro blocco è pronto per il rendering in PHP. Possiamo lasciare i file Javascript (non dimenticare di compilarlo) e il resto è fatto in PHP.

Rendering di blocchi in PHP

Per dire a WordPress di eseguire il rendering dell’output del blocco in PHP, aggiungiamo un nuovo argomento alla funzione register_block_type(). Dobbiamo aggiungere la chiave render_callbackall’array con un valore della funzione che dovrebbe eseguire.

La funzione di rendering PHP

Definiamo la funzione awp_myfirstblock_renderpiù in basso functions.php(o ovunque tu abbia inserito il tuo codice PHP). La nostra funzione otterrà due parametri; li chiameremo $attre $content.

function awp_myfirstblock_render($attr, $content) {
    // return the block's output here
}

Il parametro $attrsarà un array associativo con tutti gli attributi salvati. Il secondo parametro, $content, è per i blocchi all’interno del nostro blocco. Questo è rilevante solo per i blocchi che supportano blocchi nidificati, ad esempio Columns o Cover.

La funzione non dovrebbe mai echouscire. Tutto l’output deve essere restituito, quindi è necessario creare una stringa e restituirla alla fine.

Qualcosa di importante da ricordare sugli attributi è che solo gli attributi salvati appariranno nel primo parametro della funzione. Se un attributo non è mai stato effettivamente modificato e salvato, ad esempio basandosi solo sul suo default, l’attributo non sarà affatto incluso per la nostra funzione PHP.

Devi gestire questo problema controllando sempre if (isset($attr['...']))o nel modo migliore: definendo gli attributi nella nostra register_block_type()chiamata. Possiamo fornire un’altra chiave, attributese impostarne il valore su un array con tutti gli attributi che desideriamo estrarre dal nostro blocco. La struttura dovrebbe essere identica a quella che hai definito in Javascript, ma invece di un oggetto Javascript ne hai bisogno in un array PHP. Può essere un po’ complicato ridefinire gli stessi attributi, ma con un editor di codice intelligente dovrebbe essere abbastanza veloce copiarlo, incollarlo e modificarlo su più righe in PHP.

Aggiunta degli attributi per la nostra funzione di rendering

Aggiungiamo il nuovo attributeselemento register_block_type()e incolliamo esattamente gli stessi attributi che abbiamo definito nel nostro file Javascript:

Tieni presente che se definisci un defaultper tutti gli attributi, il $attrparametro della tua funzione dovrebbe sempre contenere tutti gli attributi. Ad esempio, l’attributo textAlignmentsopra esisterà solo $attrse è stato modificato e dovrai controllare isset($attr['textAlignment']).

Sfortunatamente, al momento, ci sono due cose di cui non ti occuperai con PHP block render. Uno è l’ classNameoggetto di scena, quindi devi creare tu stesso la classe di confezionamento (se lo desideri). L’altro è la supportproprietà per l’allineamento dei blocchi. Al momento WordPress non supporta questa proprietà nei blocchi dinamici. Non otterremo il valore dell’allineamento del blocco scelto a meno che non lo cambiamo in un attributo e lo gestiamo manualmente in Javascript.

Per quanto riguarda l’output HTML della funzione, dipende completamente da te!

Richiesta di rendering PHP dall’interno dell’editor

E’ possibile richiedere il rendering PHP del nostro blocco all’interno dell’editor. Questo è utile se vuoi essere in grado di visualizzare in anteprima l’output del blocco nell’editor. Possiamo farlo con un componente chiamato ServerSideRenderdal wp.editorpacchetto.

Come supporto ServerSideRender, devi definire tutti gli attributi che desideri trasmettere. Come minimo devi fornire il nome del blocco al prop block, in modo che WordPress sappia quale metodo di rendering cercare. Questo è disponibile per te nella props.namefunzione edit. Devi anche fornire tutti gli attributi di cui hai bisogno nel prop attributes. Se lo desideri, puoi anche aggiungere variabili personalizzate al di fuori degli attributi qui. Tieni presente che funzionerà solo per l’editor interno e non per il frontend.

Non è possibile utilizzare ServerSideRendernella funzione del blocco save. La tua savefunzione deve comunque tornare null.

Implementiamolo ServerSideRendernel nostro blocco per vederlo nella pratica.

Utilizzo di ServerSideRender per la modalità di anteprima/modifica del blocco

Se hai seguito il passaggio precedente in cui abbiamo creato un interruttore della modalità di anteprima/modifica per il nostro blocco, ora possiamo utilizzare ServerSideRenderper eseguire il rendering dell’anteprima del blocco da PHP quando passiamo alla modalità di anteprima.

Per prima cosa dobbiamo ricordarci di destrutturare ServerSideRenderin alto:

const { ServerSideRender } = wp.editor;

Se ricordi dal passaggio precedente abbiamo utilizzato i componenti Disablede/o Placeholderper mantenere l’anteprima. Il problema con l’utilizzo Placeholderè che otteniamo uno stile indesiderato applicato al nostro output. Sostituiamo Placeholdercon ServerSideRender. Puoi scegliere di mantenere il Disabledcomponente, per assicurarti che nessuno dei suoi contenuti sia cliccabile o trascinabile.

Al codice per il rendering del blocco quando l’attributo editModeè false, facciamo:

Ora il nostro pulsante personalizzato nella barra degli strumenti renderà l’output da PHP quando passiamo alla modalità di anteprima. L’output dovrebbe essere identico quando si visualizza il post nel frontend. Questa è una buona abitudine per garantire che l’output sia identico sia nell’editor che nel frontend.

Esempio: blocco dinamico che mostra un post selezionato

L’output nella tua funzione di rendering PHP può essere qualsiasi cosa e hai pieno accesso a tutte le funzioni di WordPress. Si supponga un blocco in cui un ID post verrà salvato in un attributo. Nella render_callbackfunzione PHP puoi interrogare il post dall’ID e produrre le sue informazioni. Dovrebbe essere abbastanza autoesplicativo come farlo, ma ecco un rapido esempio.

NB: In questo esempio aggiungeremo semplicemente un input di testo all’editor per inserire manualmente un ID post. Questa non è una soluzione molto intuitiva e facile da usare per selezionare un post, ma questo è ciò che impareremo nel passaggio successivo. Il focus qui è sulla parte PHP del rendering del post selezionato.

Aggiungiamo un attributo selectedPostIddi tipo numero:

attributes: {
    selectedPostId: {
        type: 'number'
    }
}

E da qualche parte all’interno della funzione del nostro blocco editaggiungiamo un TextControlcomponente. Può essere dove vuoi: all’interno del blocco o nell’Inspector.

Nota che sto prestando particolare attenzione per assicurarmi che l’input salvi correttamente l’attributo come numero convertendolo in intero con parseInt(). Anche se impostiamo il tipo prop typesu numberper eseguire il rendering di un input numerico, il valore modificato viene comunque interpretato come una stringa. WordPress non salverà il tuo attributo se è nel formato sbagliato.

Non dimenticare di aggiungere il nuovo attributo al tuo ServerSideRendercomponente se ne hai uno:

La parte PHP

Questo avrebbe dovuto occuparsi della parte Javascript. Passiamo a PHP. Per prima cosa dobbiamo aggiungere il nuovo attributo selectedPostIdall’array attributesin register_block_type():

Nella render_callbackfunzione ora possiamo accedere all’ID del post con $attr['selectedPostId']. Possiamo con ciò eseguire un semplice get_post()e generare i dati del post; il suo link e titolo:

Questo è un esempio molto semplice inteso come trampolino di lancio per scrivere codice più avanzato e personalizzato.

Ora che sappiamo come gestire il rendering dei blocchi dinamici, il passo successivo è imparare a rendere più intuitiva anche la parte dell’editor. Nel passaggio successivo ci concentreremo su come interrogare i post dall’editor dei blocchi e fornire all’utente un modo migliore per selezionare un post.