See on minu viimase artikli jätk selle kohta "Väliste API andmete renderdamine esiotsa WordPressi plokkides". Viimases õppisime, kuidas võtta välist API-d ja integreerida see plokiga, mis renderdab toodud andmed WordPressi saidi esiosas.
Asi on selles, et me saavutasime selle viisil, mis takistab meil WordPressi plokiredaktoris olevate andmete nägemist. Teisisõnu saame ploki lehele sisestada, kuid me ei näe selle eelvaadet. Näeme plokki alles siis, kui see on avaldatud.
Vaatame uuesti eelmises artiklis loodud plokkide näite pluginat. Ainult seekord kasutame WordPressi JavaScripti ja Reacti ökosüsteemi, et tuua ja renderdada need andmed ka plokiredaktoris.
Kus me pooleli jäime
Kui me seda alustame, siin on demo kuhu jõudsime viimases artiklis, millele saate viidata. Võib-olla olete märganud, et kasutasin a render_callback meetodit viimases artiklis, et saaksin kasutada PHP-faili atribuute ja renderdada sisu.
Noh, see võib olla kasulik olukordades, kus peate dünaamiliste plokkide loomiseks kasutama mõnda WordPressi või PHP funktsiooni. Kuid kui soovite staatilise HTML-i koos andmebaasi salvestatud atribuutidega renderdamiseks kasutada ainult WordPressi JavaScripti ja Reacti (eriti JSX) ökosüsteemi, peate keskenduma ainult Edit ja Save plokkplugina funktsioonid.
- .
Editfunktsioon renderdab sisu selle põhjal, mida soovite plokiredaktoris näha. Siin saate kasutada interaktiivseid Reacti komponente. - .
Savefunktsioon renderdab sisu selle põhjal, mida soovite esiotsas näha. Siin ei saa olla tavalisi Reacti komponente ega konkse. Seda kasutatakse teie andmebaasi salvestatud staatilise HTML-i tagastamiseks koos atribuutidega.
. Save funktsioon on koht, kus me täna aega veedame. Saame luua interaktiivseid komponente esiotsas, kuid selleks peame need käsitsi kaasama ja neile juurde pääsema väljaspool Save funktsiooni failis, nagu tegime eelmises artiklis.
Niisiis, ma käsitlen sama teemat, mida tegime eelmises artiklis, kuid seekord näete eelvaadet plokkide redaktoris enne avaldate selle esiotsa.
Ploki rekvisiidid
Ma jätsin meelega igasugused selgitused selle kohta edit funktsiooni rekvisiidid viimases artiklis, sest see oleks viinud fookuse põhipunktilt, renderdamiselt, kõrvale.
Kui olete pärit Reacti taustast, saate tõenäoliselt aru, millest ma räägin, kuid kui olete selles valdkonnas uus, soovitan komponentide ja rekvisiitide kontrollimine Reacti dokumentatsioonis.
Kui me logime sisse props objekti konsooli, tagastab see meie plokiga seotud WordPressi funktsioonide ja muutujate loendi:
Meil on vaja ainult attributes objekt ja setAttributes funktsioon, mille ma hävitan props objekt minu koodis. Viimases artiklis muutsin RapidAPI koodi nii, et saaksin API andmeid selle kaudu salvestada setAttributes(). Rekvisiidid on ainult loetavad, seega ei saa me neid otse muuta.
Ploki rekvisiidid on sarnased olekumuutujatele ja setState Reactis, kuid React töötab kliendi poolel ja setAttributes() kasutatakse atribuutide püsivaks salvestamiseks WordPressi andmebaasi pärast postituse salvestamist. Niisiis, mida me peame tegema, on need päästa attributes.data ja nimetage see algväärtuseks useState() muutuja.
. edit funktsioon
Kopeerin ja kleebin HTML-koodi, mida kasutasime football-rankings.php viimases artiklis ja muutke seda veidi, et minna JavaScripti taustale. Kas mäletate, kuidas lõime eelmises artiklis kaks lisafaili esiotsa stiili ja skriptide jaoks? Tänapäeva asjadele lähenedes ei ole vaja neid faile luua. Selle asemel saame selle kõik teisaldada Edit funktsiooni.
Täielik kood
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}
);
})}
);
}
)}
)}
);
}Lisasin Reacti konksu useState() Alates @wordpress/element selle asemel, et kasutada seda Reacti teegist. Selle põhjuseks on asjaolu, et kui ma laadiksin tavalisel viisil, laadiks see alla Reacti iga kasutatava ploki jaoks. Aga kui ma kasutan @wordpress/element see laaditakse ühest allikast, st Reacti peal olevast WordPressi kihist.
Seekord ei ole ma ka koodi sisse mässinud useEffect() kuid funktsiooni sees, mida kutsutakse välja ainult nupul klõpsamisel, nii et meil on toodud andmete reaalajas eelvaade. Olen kasutanud olekumuutujat nimega apiData liigatabeli tinglikuks muutmiseks. Nii et kui nupule klõpsatakse ja andmed on toodud, seadistan apiData uutele andmetele sees fetchData() ja saadaval on jalgpalli edetabeli tabeli HTML-i uuesti renderdus.
Märkad, et kui postitus on salvestatud ja leht värskendatud, on liigatabel kadunud. Seda seetõttu, et me kasutame tühja olekut (null) Jaoks apiDataalgväärtus. Kui postitus salvestatakse, salvestatakse atribuudid kausta attributes.data objekti ja nimetame seda algväärtuseks useState() muutuja nagu see:
const [apiData, setApiData] = useState(attributes.data);. save funktsioon
Me teeme peaaegu sama asja rakendusega save funktsiooni, kuid muutke seda veidi. Näiteks ei ole vaja nuppu „Too andmed” esiküljel ja apiData olekumuutuja pole samuti vajalik, kuna kontrollime seda juba failis edit funktsiooni. Kuid me vajame juhuslikku apiData muutuja, mis kontrollib attributes.data JSX-i tingimuslikuks renderdamiseks, vastasel juhul tekitab see määratlemata vigu ja plokiredaktori kasutajaliides läheb tühjaks.
Täielik kood
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}
);
})}
);
})}
)}
);
}Kui muudate save funktsioon pärast seda, kui plokk on plokiredaktoris juba olemas, kuvatakse selline tõrge:
Selle põhjuseks on asjaolu, et salvestatud sisu märgistus erineb meie uue sisu märgistusest save funktsiooni. Kuna oleme arendusrežiimis, on bocki praeguselt lehelt lihtsam eemaldada ja uue plokina uuesti sisestada – nii kasutatakse hoopis uuendatud koodi ja asjad on tagasi sünkroonis.
Seda eemaldamise ja uuesti lisamise olukorda saab vältida, kui oleksime kasutanud render_callback meetod, kuna väljund on dünaamiline ja seda kontrollib salvestusfunktsiooni asemel PHP. Seega on igal meetodil oma eelised ja puudused.
Tom Nowell annab põhjaliku selgituse selle kohta, mida mitte teha a save funktsiooni sisse see Stack Overflow vastus.
Ploki kujundamine redaktoris ja esiosas
Mis puudutab stiili, siis see on peaaegu sama, mida vaatasime eelmises artiklis, kuid mõningate väikeste muudatustega, mida olen kommentaarides selgitanud. Esitan siin ainult täielikud stiilid, kuna see on pigem kontseptsiooni tõend, mitte midagi, mida soovite kopeerida ja kleepida (välja arvatud juhul, kui teil on tõesti vaja plokki sellise stiiliga jalgpalli edetabeli kuvamiseks). Ja pange tähele, et ma kasutan endiselt SCSS-i, mis kompileerub CSS-i ehitamisel.
Redigeerija stiilid
/* 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);
}
}
}Esiotsa stiilid
/* 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;
}
}
}
Lisame selle src/style.scss mis hoolitseb stiili eest nii redaktoris kui ka esiservas. Ma ei saa demo URL-i jagada, kuna see nõuab juurdepääsu redigeerijale, kuid mul on demo vaatamiseks salvestatud video:
Päris korralik, eks? Nüüd on meil täielikult toimiv plokk, mis mitte ainult ei renderda esiotsas, vaid toob ka API-andmed ja renderdab sealsamas plokiredaktoris – käivitamiseks värskendamise nupuga!
Aga kui me tahame võtta täis WordPressi plokiredaktori eeliseks peaksime kaaluma mõne ploki kasutajaliidese elemendi vastendamist plokkide juhtnupud näiteks värvide, tüpograafia ja vahede määramiseks. See on kena järgmine samm ploki arendamise õppeteekonnal.
