Questa è una continuazione del mio ultimo articolo su "Rendering di dati API esterni in blocchi di WordPress sul front-end". In quest'ultimo, abbiamo imparato come prendere un'API esterna e integrarla con un blocco che esegue il rendering dei dati recuperati sul front-end di un sito WordPress.
Il fatto è che l'abbiamo realizzato in un modo che ci impedisce di vedere i dati nell'editor blocchi di WordPress. In altre parole, possiamo inserire il blocco in una pagina ma non ne riceviamo alcuna anteprima. Possiamo vedere il blocco solo quando viene pubblicato.
Rivisitiamo il plug-in di blocco di esempio che abbiamo creato nell'ultimo articolo. Solo che questa volta utilizzeremo l'ecosistema JavaScript e React di WordPress per recuperare e renderizzare quei dati anche nell'editor blocchi back-end.
Da dove ci siamo lasciati
Mentre diamo il via a questo, ecco una demo dove siamo arrivati nell'ultimo articolo a cui puoi fare riferimento. Potresti aver notato che ho usato a render_callback metodo nell'ultimo articolo in modo da poter utilizzare gli attributi nel file PHP e renderizzare il contenuto.
Bene, potrebbe essere utile in situazioni in cui potresti dover utilizzare alcune funzioni native di WordPress o PHP per creare blocchi dinamici. Ma se vuoi utilizzare solo l'ecosistema JavaScript e React (JSX, in particolare) di WordPress per rendere l'HTML statico insieme agli attributi memorizzati nel database, devi solo concentrarti sul Edit ed Save funzioni del plug-in di blocco.
- I
EditLa funzione esegue il rendering del contenuto in base a ciò che si desidera vedere nell'Editor blocchi. Puoi avere componenti React interattivi qui. - I
Savela funzione rende il contenuto in base a ciò che vuoi vedere sul front-end. Non puoi avere i normali componenti React o gli hook qui. Viene utilizzato per restituire l'HTML statico salvato nel database insieme agli attributi.
I Save la funzione è dove siamo in giro oggi. Possiamo creare componenti interattivi sul front-end, ma per questo dobbiamo includerli manualmente e accedervi al di fuori del Save funzione in un file come abbiamo fatto nell'ultimo articolo.
Quindi, tratterò lo stesso argomento che abbiamo fatto nell'ultimo articolo, ma questa volta puoi vedere l'anteprima nell'Editor blocchi prima lo pubblichi sul front-end.
Gli oggetti di scena del blocco
Ho omesso intenzionalmente qualsiasi spiegazione sul edit puntelli della funzione nell'ultimo articolo perché ciò avrebbe distolto l'attenzione dal punto principale, il rendering.
Se provieni da un background React, probabilmente capirai di cosa sto parlando, ma se sei nuovo in questo, lo consiglierei controllando componenti e oggetti di scena nella documentazione di React.
Se registriamo il props oggetto alla console, restituisce un elenco di funzioni e variabili di WordPress relative al nostro blocco:
Abbiamo solo bisogno del attributes oggetto e il setAttributes funzione che ho intenzione di destrutturare dalla props oggetto nel mio codice. Nell'ultimo articolo, avevo modificato il codice di RapidAPI in modo da poter memorizzare i dati API tramite setAttributes(). Gli oggetti di scena sono solo leggibili, quindi non siamo in grado di modificarli direttamente.
Gli oggetti di scena a blocchi sono simili alle variabili di stato e setState in React, ma React funziona sul lato client e setAttributes() viene utilizzato per memorizzare gli attributi in modo permanente nel database di WordPress dopo aver salvato il post. Quindi, quello che dobbiamo fare è salvarli attributes.data e quindi chiamalo come valore iniziale per useState() variabile.
I edit function
Ho intenzione di copiare e incollare il codice HTML che abbiamo utilizzato football-rankings.php nell'ultimo articolo e modificalo leggermente per passare allo sfondo JavaScript. Ricordi come abbiamo creato due file aggiuntivi nell'ultimo articolo per lo stile e gli script del front-end? Con il modo in cui ci avviciniamo alle cose oggi, non è necessario creare quei file. Invece, possiamo spostare tutto su Edit funzione.
Codice completo
import { useState } from "@wordpress/element";
export default function Edit(props) {
const { attributes, setAttributes } = props;
const [apiData, setApiData] = useState(null);
function fetchData() {
const options = {
method: "GET",
headers: {
"X-RapidAPI-Key": "Your Rapid API key",
"X-RapidAPI-Host": "api-football-v1.p.rapidapi.com",
},
};
fetch(
"https://api-football-v1.p.rapidapi.com/v3/standings?season=2021&league=39",
options
)
.then((response) => response.json())
.then((response) => {
let newData = { ...response }; // Deep clone the response data
setAttributes({ data: newData }); // Store the data in WordPress attributes
setApiData(newData); // Modify the state with the new data
})
.catch((err) => console.error(err));
}
return (
{apiData && (
Rank
Logo
Team name
GP
GW
GD
GL
GF
GA
Pts
Form history
{/* Usage of [0] might be weird but that is how the API structure is. */}
{apiData.response[0].league.standings[0].map((el) => {
{/* Destructure the required data from all */}
const { played, win, draw, lose, goals } = el.all;
return (
{el.rank}
{el.team.name}
{played}
{win}
{draw}
{lose}
{goals.for}
{goals.against}
{el.points}
{el.form.split("").map((result) => {
return (
{result}
);
})}
);
}
)}
)}
);
}Ho incluso il gancio React useState() da @wordpress/element piuttosto che usarlo dalla libreria React. Questo perché se dovessi caricare in modo normale, scaricherebbe React per ogni blocco che sto usando. Ma se sto usando @wordpress/element viene caricato da un'unica fonte, ovvero il livello di WordPress sopra React.
Questa volta, inoltre, non ho inserito il codice all'interno useEffect() ma all'interno di una funzione che viene chiamata solo quando si fa clic su un pulsante in modo da avere un'anteprima live dei dati recuperati. Ho usato una variabile di stato chiamata apiData rendere condizionatamente la classifica. Quindi, una volta cliccato il pulsante e recuperati i dati, sto impostando apiData ai nuovi dati all'interno del fetchData() ed è disponibile un rendering con l'HTML della tabella delle classifiche di calcio.
Noterai che una volta salvato il post e aggiornata la pagina, la classifica è scomparsa. Questo perché stiamo usando uno stato vuoto (null) per apiDatail valore iniziale di Quando il post viene salvato, gli attributi vengono salvati in attributes.data oggetto e lo chiamiamo come valore iniziale per il useState() variabile come questa:
const [apiData, setApiData] = useState(attributes.data);I save function
Faremo quasi la stessa identica cosa con il save funzione, ma modificarlo un po'. Ad esempio, non è necessario il pulsante "Recupera dati" sul front-end e il pulsante apiData anche la variabile di stato non è necessaria perché la stiamo già verificando in edit funzione. Ma abbiamo bisogno di un casuale apiData variabile che verifica attributes.data per eseguire il rendering condizionale di JSX, altrimenti genererà errori non definiti e l'interfaccia utente dell'editor blocchi diventerà vuota.
Codice completo
export default function save(props) {
const { attributes, setAttributes } = props;
let apiData = attributes.data;
return (
{/* Only render if apiData is available */}
{apiData && (
Rank
Logo
Team name
GP
GW
GD
GL
GF
GA
Pts
Form history
{/* Usage of [0] might be weird but that is how the API structure is. */}
{apiData.response[0].league.standings[0].map((el) => {
const { played, win, draw, lose, goals } = el.all;
return (
{el.rank}
{el.team.name}
{played}
{win}
{draw}
{lose}
{goals.for}
{goals.against}
{el.points}
{el.form.split("").map((result) => {
return (
{result}
);
})}
);
})}
)}
);
}Se stai modificando il save funzione dopo che un blocco è già presente nell'Editor blocchi, mostrerebbe un errore come questo:
Questo perché il markup nel contenuto salvato è diverso dal markup nel nostro nuovo save funzione. Dato che siamo in modalità sviluppo, è più facile rimuovere il bock dalla pagina corrente e reinserirlo come nuovo blocco: in questo modo viene utilizzato il codice aggiornato e le cose tornano sincronizzate.
Questa situazione di rimuoverlo e aggiungerlo di nuovo può essere evitato se avessimo utilizzato il render_callback metodo poiché l'output è dinamico e controllato da PHP invece della funzione di salvataggio. Quindi ogni metodo ha i suoi vantaggi e svantaggi.
Tom Nowell fornisce una spiegazione approfondita su cosa non fare in a save funzione in questo Stack Overflow rispondere.
Styling del blocco nell'editor e nel front-end
Per quanto riguarda lo stile, sarà quasi la stessa cosa che abbiamo visto nell'ultimo articolo, ma con alcune piccole modifiche che ho spiegato nei commenti. Sto semplicemente fornendo gli stili completi qui poiché questa è solo una prova di concetto piuttosto che qualcosa che vuoi copiare e incollare (a meno che tu non abbia davvero bisogno di un blocco per mostrare le classifiche di calcio con uno stile proprio come questo). E nota che sto ancora usando SCSS che si compila in CSS durante la compilazione.
Stili dell'editor
/* Target all the blocks with the data-title="Football Rankings" */
.block-editor-block-list__layout
.block-editor-block-list__block.wp-block[data-title="Football Rankings"] {
/* By default, the blocks are constrained within 650px max-width plus other design specific code */
max-width: unset;
background: linear-gradient(to right, #8f94fb, #4e54c8);
display: grid;
place-items: center;
padding: 60px 0;
/* Button CSS - From: https://getcssscan.com/css-buttons-examples - Some properties really not needed :) */
button.fetch-data {
align-items: center;
background-color: #ffffff;
border: 1px solid rgb(0 0 0 / 0.1);
border-radius: 0.25rem;
box-shadow: rgb(0 0 0 / 0.02) 0 1px 3px 0;
box-sizing: border-box;
color: rgb(0 0 0 / 0.85);
cursor: pointer;
display: inline-flex;
font-family: system-ui, -apple-system, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 600;
justify-content: center;
line-height: 1.25;
margin: 0;
min-height: 3rem;
padding: calc(0.875rem - 1px) calc(1.5rem - 1px);
position: relative;
text-decoration: none;
transition: all 250ms;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: baseline;
width: auto;
&:hover,
&:focus {
border-color: rgb(0, 0, 0, 0.15);
box-shadow: rgb(0 0 0 / 0.1) 0 4px 12px;
color: rgb(0, 0, 0, 0.65);
}
&:hover {
transform: translateY(-1px);
}
&:active {
background-color: #f0f0f1;
border-color: rgb(0 0 0 / 0.15);
box-shadow: rgb(0 0 0 / 0.06) 0 2px 4px;
color: rgb(0 0 0 / 0.65);
transform: translateY(0);
}
}
}Stili di front-end
/* Front-end block styles */
.wp-block-post-content .wp-block-football-rankings-league-table {
background: linear-gradient(to right, #8f94fb, #4e54c8);
max-width: unset;
display: grid;
place-items: center;
}
#league-standings {
width: 900px;
margin: 60px 0;
max-width: unset;
font-size: 16px;
.header {
display: grid;
gap: 1em;
padding: 10px;
grid-template-columns: 1fr 1fr 3fr 4fr 3fr;
align-items: center;
color: white;
font-size: 16px;
font-weight: 600;
background-color: transparent;
background-repeat: no-repeat;
background-size: contain;
background-position: right;
.stats {
display: flex;
gap: 15px;
& > div {
width: 30px;
}
}
}
}
.league-table {
background: white;
box-shadow:
rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
padding: 1em;
.position {
width: 20px;
}
.team {
display: grid;
gap: 1em;
padding: 10px 0;
grid-template-columns: 1fr 1fr 3fr 4fr 3fr;
align-items: center;
}
.team:not(:last-child) {
border-bottom: 1px solid lightgray;
}
.team-logo img {
width: 30px;
top: 3px;
position: relative;
}
.stats {
display: flex;
gap: 15px;
& > div {
width: 30px;
text-align: center;
}
}
.last-5-games {
display: flex;
gap: 5px;
& > div {
width: 25px;
height: 25px;
text-align: center;
border-radius: 3px;
font-size: 15px;
& .result-W {
background: #347d39;
color: white;
}
& .result-D {
background: gray;
color: white;
}
& .result-L {
background: lightcoral;
color: white;
}
}
}
Aggiungiamo questo a src/style.scss che si occupa dello styling sia nell'editor che nel frontend. Non sarò in grado di condividere l'URL della demo poiché richiederebbe l'accesso all'editor, ma ho un video registrato per farti vedere la demo:
Abbastanza pulito, vero? Ora abbiamo un blocco completamente funzionante che non solo esegue il rendering sul front-end, ma recupera anche i dati API e li esegue direttamente nell'Editor blocchi, con un pulsante di aggiornamento per l'avvio!
Ma se vogliamo prendere pieno vantaggio dell'editor blocchi di WordPress, dovremmo considerare di mappare alcuni degli elementi dell'interfaccia utente del blocco su controlli di blocco per cose come l'impostazione del colore, della tipografia e della spaziatura. Questo è un bel passo successivo nel percorso di apprendimento dello sviluppo a blocchi.
