Crea un blocco Gutenberg personalizzato – Parte 10: Recupero di post e componenti di ordine superiore

In questa parte finale della serie di tutorial sui blocchi personalizzati Gutenberg impareremo come utilizzare componenti di ordine superiore per utilizzare i componenti di WordPress per eseguire query per post e altre informazioni di base di WordPress.

Nella parte precedente abbiamo appreso dei blocchi dinamici e abbiamo finito per implementare funzionalità per digitare un ID post e utilizzare PHP per recuperare dinamicamente il post e renderizzarlo in modalità frontend e anteprima. Digitare manualmente un ID post non è intuitivo o facile da usare. È molto meglio fornire all’utente un modo per selezionare o cercare post in base al titolo del post e facendo clic su qualcosa per sceglierne uno.

Una parte della risoluzione di questo è abbastanza facile; come interrogare i post dalla editfunzione del tuo blocco. Abbiamo alcune opzioni per questo e l’opzione migliore è utilizzare alcuni dei cosiddetti componenti di ordine superiore di WordPress. Puoi anche utilizzare i metodi del browser Javascript per eseguire una chiamata AJAX verso l’API REST di WordPress usando ad esempio [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)o axios. WordPress in realtà fornisce la propria versione di fetch: apiFetch().

L’altra parte della risoluzione del problema dipende un po’ da te; ecco come presentare l’elenco o la scelta nel nostro blocco. Come presenterai l’elenco dei post tra cui scegliere? In un elenco selezionato di caselle di controllo o pulsanti di opzione? Oppure vuoi offrire la possibilità di cercare e quindi implementare una soluzione di completamento automatico o una soluzione di filtro? Dovresti consentire la selezione di più post o solo di uno? Di solito puoi risolverlo utilizzando diversi componenti di WordPress, ma devi decidere quale soluzione vuoi implementare.

Per prima cosa impariamo qualcosa sui componenti di ordine superiore e sul modulo dati di WordPress, prima di esaminare come possiamo eseguire query di post nel nostro blocco.

Modulo WordPress Core Data e componenti di ordine superiore

Quando si lavora con React, è spesso necessario passare lo stato ai componenti figlio o in alto a un componente genitore comune in modo che tutti gli altri componenti figlio abbiano accesso ad essi. Una soluzione per risolvere il problema della centralizzazione dello stato di un’applicazione è l’utilizzo di Redux. Con Redux puoi creare negozi, che sono oggetti che contengono lo stato e le informazioni di un’applicazione.

Il modulo WordPress Data è un hub di diversi negozi e fornisce funzioni per la gestione dei dati tra diversi moduli. È basato su Redux, ma non confonderlo come Redux per WordPress, poiché ci sono alcune differenze. Puoi registrare i tuoi negozi all’interno di WordPress o, forse ancora più importante, accedere ai negozi registrati di WordPress.

Ecco una panoramica degli store disponibili nel modulo dati di WordPress (probabilmente cambierà nel tempo). Tutti gli store di WordPress sono contenuti nel modulo Core Data. Ad esempio ci sono negozi che contengono i dati dell’editor (core/editor), avvisi (core/notices), dati di blocco (core/blocks), informazioni sulla finestra (core/viewport) e, ultimo ma non meno importante, il negozio principale stesso – core.

Per accedere ai dati dai negozi dovrai utilizzare i selettori. WordPress ha un selettore all’interno del wp.datapacchetto; [select](https://developer.wordpress.org/block-editor/packages/packages-data/#select)(). Puoi anche manipolare i negozi con dispatch, ma questo non è coperto da questa serie di tutorial. Puoi effettivamente provare facilmente il selettore per vedere cosa è disponibile nei negozi di WordPress.

Provare il selettore

Apri l’editor Gutenberg in Chrome e apri lo strumento debugger della console. Digitare:

wp.data.select('core')

E premi Invio. Dovresti ottenere un oggetto come risposta con tutti i selettori (funzioni) che puoi utilizzare. Come esempi troverai funzioni come getMedia, getTaxonomy, getAuthorse così via. C’è anche quello che useremo per interrogare i post, ma non ha un nome intuitivo; si chiama getEntityRecords. Al momento alcune di queste funzioni sono documentate, ma la maggior parte non lo sono, purtroppo.

Prova anche altri negozi diversi da core, ad esempio:

wp.data.select('core/editor').getBlocks()

Questo restituisce tutte le informazioni su tutti i blocchi attualmente nel tuo post. Puoi giocare con questo nel debugger della console di Chrome e provare a chiamare alcune funzioni per vedere cosa ottieni in risposta. Alcuni richiedono parametri e altri no.

Per utilizzare i selettori e accedere ai negozi, è necessario utilizzarli all’interno di componenti di ordine superiore. I componenti di ordine superiore sono semplicemente uno schema per fare qualcosa in React. Passiamo un componente a una funzione (o componente) che potrebbe aggiungere alcuni oggetti di scena, e quindi restituire un nuovo componente.

All’interno del modulo Dati di WordPress troviamo [withSelect](https://developer.wordpress.org/block-editor/packages/packages-data/#withSelect); un componente di ordine superiore che può essere utilizzato per iniettare oggetti di scena utilizzando selettori registrati. In altre parole; all’interno withSelectabbiamo accesso al selettore select()e possiamo usarlo per eseguire chiamate. I risultati del selettore saranno props al componente a cui passiamo withSelect. Se è necessario combinare più componenti di ordine superiore, il modulo Dati di WordPress offre la composefunzione, ma questo esula dallo scopo di questo tutorial. Utilizzeremo solo un componente di ordine superiore; withSelect.

Questa è stata un sacco di teoria, quindi iniziamo a guardare alcuni codici ed esempi pratici.

Recupero dei post utilizzando withSelect, select e getEntityRecords

Per riassumere quanto sopra, dobbiamo impostare il componente di ordine superiore withSelectper il nostro blocco. All’interno di questo possiamo utilizzare i selettori per accedere ai negozi di WordPress, che saranno oggetti di scena per il componente a cui passiamo withSelect. Useremo il corenegozio e il selettore getEntityRecordsper interrogare i post.

La funzione getEntityRecordspurtroppo non è molto documentata al momento. Ma ho imparato che possiamo passare postTypecome primo parametro (tipo di entità) e quindi il tipo di post come secondo parametro (ad esempio ‘ post‘ o ‘ page‘). Il terzo parametro è facoltativo e può essere un oggetto con argomenti di query. Vedremo il terzo parametro più avanti.

Se hai seguito questa serie di tutorial dalla parte precedente, avresti un blocco personalizzato che accetta un ID post digitato manualmente in un input di testo. Il blocco utilizza PHP per eseguire il rendering dinamico del post nel frontend (e in modalità anteprima). Rimuoviamo il requisito della digitazione manuale dell’ID post e sostituiamolo con qualcosa di più intuitivo. Come accennato in precedenza, devi decidere tu stesso come presentare l’elenco dei post e il modo migliore per consentire all’utente di scegliere un post. Per semplificare, aggiungeremo una selezione di tutti i titoli dei post tra cui scegliere.

Codificare ilwithSelect

Iniziamo a codificarlo. Per prima cosa dobbiamo destrutturare ciò di cui abbiamo bisogno dal pacchetto di dati;

const { withSelect, select } = wp.data;

Quindi utilizziamo withSelectnella funzione del nostro blocco edite passiamo il nostro componente di modifica; FirstBlockEdit. All’interno withSelectdestrutturiamo selectcome parametro e utilizziamo il selettore select()per interrogare i post con getEntityRecords. Restituiamo un oggetto con una proprietà che chiamiamo postsche contiene il risultato della select()chiamata.

Con il codice sopra il nostro componente, FirstBlockEdit, avrà ora un nuovo prop; posts. Qualunque cosa restituiamo all’interno del withSelectcomponente di ordine superiore sarà accessibile come supporto al componente che passiamo (tra parentesi alla fine).

Gestione dei post dal selettore

Ora possiamo entrare nel nostro componente FirstBlockEdite dare un’occhiata al nuovo props.posts. Poiché il nostro componente è un componente basato sulla classe, dobbiamo fare riferimento agli oggetti di scena con this. Facciamo il logout della console all’interno della render()funzione in FirstBlockEdit:

render() {
    const { attributes, setAttributes } = this.props;
    console.log(this.props.posts);
    ...
}

Tieni d’occhio il debugger della tua console. Potresti notare che questo si registrerà due volte; prima null, e poi qualche tempo dopo registra una serie di post. Questo perché la query sui post viene eseguita in modo asincrono. Il nostro componente viene prima renderizzato prima della risposta, momento in cui props.postsè null. Una volta ricevuta una risposta, il nostro componente viene nuovamente visualizzato con la prop popolata. Dovresti sempre ricordarti di alloggiare per questo breve periodo di tempo senza dati nel tuo codice.

Aggiunta di una selezione per visualizzare i post

Prepariamoci a popolare una selezione con i post restituiti e per questo utilizzeremo il componente WordPress SelectControl. Il componente SelectControlaccetta una matrice di scelte in cui ogni scelta è un oggetto con le proprietà valuee label.

Se dai un’occhiata alla (seconda) risposta registrata dalla console, puoi vedere che otteniamo un array di oggetti post. Ogni post contiene la maggior parte delle informazioni del post, ma per le scelte in una selezione siamo interessati solo all’ID del post come valore e al titolo del post come etichetta. Quindi eseguiremo il ciclo del postsprop e popoleremo una variabile di matrice che passeremo a SelectControl. Non dimenticare di gestire il breve lasso di tempo in cui si trova l’ postsoggetto di scena null. In tal caso popoleremo l’array di scelta con un’opzione che ha l’etichetta "Caricamento in corso…".

Nota che dobbiamo fare riferimento al titolo del post come post.title.rendered. Puoi cercare te stesso nella console loggata postse vedere come sono strutturate le informazioni per ogni post.

Dopo questo dobbiamo semplicemente aggiungere un SelectControldove lo vogliamo. Può essere all’interno del blocco stesso (preferibilmente all’interno del codice per la modalità di modifica) o all’interno di Inspector.

Impostiamo il SelectControlper fare riferimento all’attributo selectedPostIdche abbiamo definito nel passaggio precedente. Impostiamo il valore salvato nell’elica valuee gestiamo l’aggiornamento onChangenell’elica, proprio come abbiamo fatto diverse volte prima. Ci assicuriamo che un numero venga memorizzato utilizzando parseInt()perché selectedPostIdha il tipo number. E passiamo la matrice generata di scelte nel prop options.

Questo è davvero tutto! Se hai seguito il codice del passaggio precedente dovresti già avere il codice che legge l’ID del post salvato e lo visualizza!

Ovviamente ti consiglio di implementare l’elenco e la scelta dei post in modo diverso rispetto a una semplice selezione. Questa non è una soluzione carina o facile da usare, specialmente per i siti con molti post. Parlando del numero di post, hai notato che il selettore getEntityRecords restituisce solo un massimo degli ultimi 10 post? Questo è il comportamento predefinito di getEntityRecords, ma possiamo modificare la post query passando un terzo parametro.

Modifica la query per getEntityRecords

Passando un oggetto come terzo parametro a getEntityRecords possiamo modificare la post query. Come accennato prima purtroppo la documentazione per getEntityRecordsè carente. Ma leggendo in tutto il web ho raccolto un elenco di possibili argomenti di query;

• per_page: imposta un numero per limitare il numero di post. Impostare su -1per recuperare il massimo di 100. Predefinito 10.
• exclude: Escludi alcuni post dalla query. Impostare su un ID post o su una matrice di numeri per più ID post.
• parent_exclude: Escludi alcuni post principali. Impostare su un ID post o su una matrice di più ID post.
• orderby: Decidi l’ordine dei post. Molto probabilmente puoi usare gli stessi parametri di orderby WP_Query. Può essere ad es. ‘ menu_order‘.
• order: O 'asc'o ‘ desc'per l’ordine crescente o decrescente.
• status: Filtra per stato del post. Può essere una stringa, una stringa con più stati separati da virgole o una matrice di stringhe di stato. Ad esempio ['publish', 'draft']per interrogare sia i post pubblicati che quelli redatti.
• categories: Filtra i post in base a determinate categorie. Fornire un ID categoria o una matrice di ID categoria. Credo che questo funzioni solo per le categorie di post e non per altre tassonomie personalizzate.
• tags: Filtra i post in base a determinati tag. Fornisci un ID tag o un array di ID tag. Funziona solo per tag post e non altre tassonomie personalizzate.
• search: Aggiungi una query di ricerca (stringa).

Nota: questo non è un elenco esaustivo ed è anche soggetto a modifiche!

Modifichiamo la nostra query. Vogliamo fare due cose; per prima cosa vogliamo recuperare tutti i post e non solo gli ultimi 10. Per fare questo provvediamo -1a per_page. In secondo luogo, vogliamo escludere il post corrente dall’elenco dei post fornendo l’ID del post corrente a exclude. Spesso non ha senso mostrare un collegamento al post o un’anteprima del post corrente stesso.

Potresti pensare; aspetta, come otteniamo l’ID del post corrente? Non dimenticare che all’interno del componente di ordine superiore withSelecte con il selectselettore possiamo accedere a tutti i core data store di WordPress. L’ID del post corrente è una cosa naturale da archiviare in uno dei negozi principali di WordPress. All’interno core/editortroviamo la funzione getCurrentPostId().

Modifichiamo il withSelectritorno in qualcosa del genere:

Il cambiamento di cui sopra è abbastanza autoesplicativo. Generiamo un oggetto query con le proprietà per_pagee lo excludepassiamo come terzo parametro a getEntityRecords(). Ora il nostro props.postsall’interno del FirstBlockEditcomponente dovrebbe elencare tutti i post ma escludere il post corrente.

Conclusione

Questo post conclude la serie di tutorial Come creare blocchi Gutenberg personalizzati. La serie aveva lo scopo di esaminare le basi dello sviluppo di blocchi personalizzati, fornendo un punto di partenza per sviluppare blocchi propri e più complessi. Sicuramente tieni d’occhio altri tutorial relativi a Gutenberg qui. Forse troverai un tutorial che spiega in modo più specifico qualcosa che volevi fare da solo!