To je nadaljevanje mojega prejšnjega članka o »Upodobitev zunanjih podatkov API-ja v blokih WordPress na sprednji strani«. V tem zadnjem smo se naučili, kako vzeti zunanji API in ga integrirati z blokom, ki upodablja pridobljene podatke na sprednji strani spletnega mesta WordPress.
Stvar je v tem, da smo to dosegli na način, ki nam preprečuje, da bi videli podatke v urejevalniku blokov WordPress. Z drugimi besedami, blok lahko vstavimo na stran, vendar ne dobimo predogleda. Blok vidimo šele, ko je objavljen.
Ponovno si oglejmo primer vtičnika blokov, ki smo ga naredili v prejšnjem članku. Samo tokrat bomo uporabili ekosistema JavaScript in React WordPressa za pridobivanje in upodabljanje teh podatkov tudi v zalednem urejevalniku blokov.
Kjer smo končali
Ko to začnemo, tukaj je demo kjer smo pristali v zadnjem članku, na katerega se lahko sklicujete. Morda ste opazili, da sem uporabil a render_callback metodo v zadnjem članku, tako da lahko uporabim atribute v datoteki PHP in upodobi vsebino.
No, to je lahko uporabno v primerih, ko boste morda morali uporabiti izvorno funkcijo WordPress ali PHP za ustvarjanje dinamičnih blokov. Če pa želite za upodabljanje statičnega HTML-ja skupaj z atributi, shranjenimi v zbirki podatkov, uporabiti samo ekosistem JavaScript in React (posebej JSX) WordPress-a, se morate osredotočiti le na Edit in Save funkcije vtičnika bloka.
- O
Editfunkcija upodablja vsebino na podlagi tega, kar želite videti v urejevalniku blokov. Tu lahko imate interaktivne komponente React. - O
Savefunkcija upodablja vsebino na podlagi tega, kar želite videti na sprednji strani. Tu ne morete imeti običajnih komponent React ali kavljev. Uporablja se za vrnitev statičnega HTML-ja, ki je shranjen v vaši bazi podatkov skupaj z atributi.
O Save funkcija je kraj, kjer se danes družimo. Na sprednjem delu lahko ustvarimo interaktivne komponente, vendar jih moramo za to ročno vključiti in dostopati do njih zunaj Save funkcijo v datoteki, kot smo storili v prejšnjem članku.
Torej, obravnaval bom isto področje kot v prejšnjem članku, toda tokrat si lahko predogled ogledate v urejevalniku blokov pred objavite na sprednji strani.
Rekviziti za bloke
Namenoma sem izpustil pojasnila o edit rekvizitov funkcije v zadnjem članku, ker bi to preusmerilo pozornost z glavne točke, upodabljanja.
Če prihajate iz ozadja React, boste verjetno razumeli, o čem govorim, če pa ste novi v tem, vam priporočam preverjanje komponent in rekvizitov v dokumentaciji React.
Če prijavimo props objekt v konzolo, vrne seznam funkcij WordPress in spremenljivk, povezanih z našim blokom:
Potrebujemo samo attributes predmet in setAttributes funkcijo, ki jo bom uničil iz props predmet v moji kodi. V zadnjem članku sem spremenil kodo RapidAPI, tako da lahko shranjujem podatke API setAttributes(). Rekviziti so samo berljivi, zato jih ne moremo neposredno spreminjati.
Rekviziti blokov so podobni spremenljivkam stanja in setState v Reactu, vendar React deluje na strani odjemalca in setAttributes() se uporablja za trajno shranjevanje atributov v zbirko podatkov WordPress po shranjevanju objave. Torej, kar moramo storiti, je, da jih rešimo attributes.data in nato to pokličite kot začetno vrednost za useState() spremenljivka.
O edit funkcija
Kopiral/prilepil bom kodo HTML, ki smo jo uporabili football-rankings.php v zadnjem članku in ga nekoliko uredite, da se premaknete na ozadje JavaScript. Se spomnite, kako smo v zadnjem članku ustvarili dve dodatni datoteki za slog in skripte sprednjega dela? Glede na to, kako se danes lotevamo stvari, teh datotek ni treba ustvarjati. Namesto tega lahko vse premaknemo v Edit Funkcija.
Polna koda
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}
);
})}
);
}
)}
)}
);
}Vključil sem kljuko React useState() iz @wordpress/element namesto da bi ga uporabili iz knjižnice React. To je zato, ker če bi nalagal na običajen način, bi prenesel React za vsak blok, ki ga uporabljam. Če pa uporabljam @wordpress/element naloži se iz enega samega vira, tj. sloja WordPress na vrhu Reacta.
Tokrat tudi nisem zavil kode notri useEffect() ampak znotraj funkcije, ki se kliče samo ob kliku na gumb, tako da imamo predogled pridobljenih podatkov v živo. Uporabil sem spremenljivko stanja, imenovano apiData ligaško lestvico pogojno predstavimo. Torej, ko je gumb kliknjen in so podatki pridobljeni, nastavljam apiData do novih podatkov znotraj fetchData() in na voljo je ponovni upodobitev s HTML tabele nogometnih lestvic.
Opazili boste, da ko je objava shranjena in stran osvežena, ligaške razpredelnice ni več. To je zato, ker uporabljamo prazno stanje (null) za apiDatazačetna vrednost. Ko se objava shrani, se atributi shranijo v attributes.data in ga imenujemo kot začetno vrednost za useState() spremenljivka, kot je ta:
const [apiData, setApiData] = useState(attributes.data);O save funkcija
Naredili bomo skoraj isto stvar z save funkcijo, vendar jo nekoliko spremenite. Na primer, ni potrebe po gumbu »Pridobi podatke« na sprednji strani in apiData spremenljivka stanja je tudi nepotrebna, ker jo že preverjamo v edit funkcijo. Vendar potrebujemo naključno apiData spremenljivka, ki preverja attributes.data za pogojno upodobitev JSX, sicer bo vrgel nedefinirane napake in uporabniški vmesnik urejevalnika blokov bo ostal prazen.
Polna koda
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}
);
})}
);
})}
)}
);
}Če spreminjate save po tem, ko je blok že prisoten v urejevalniku blokov, bi prikazal takšno napako:
To je zato, ker se oznaka v shranjeni vsebini razlikuje od oznake v naši novi save funkcijo. Ker smo v razvojnem načinu, je lažje odstraniti bock s trenutne strani in ga znova vstaviti kot nov blok — tako se namesto tega uporabi posodobljena koda in stvari so spet sinhronizirane.
Temu položaju, ko ga odstranimo in znova dodamo, se lahko izognemo, če uporabimo render_callback ker je izhod dinamičen in ga nadzoruje PHP namesto funkcije shranjevanja. Vsaka metoda ima torej svoje prednosti in slabosti.
Tom Nowell nudi temeljito razlago, česa ne smete početi v a save deluje v ta Stack Overflow odgovor.
Oblikovanje bloka v urejevalniku in sprednji strani
Kar zadeva stajling, bo skoraj enak, kot smo si ga ogledali v prejšnjem članku, vendar z nekaj manjšimi spremembami, ki sem jih razložil v komentarjih. Tukaj samo zagotavljam celotne sloge, saj je to samo dokaz koncepta in ne nekaj, kar želite kopirati in prilepiti (razen če res potrebujete blok za prikazovanje nogometnih lestvic, oblikovanih prav tako). In upoštevajte, da še vedno uporabljam SCSS, ki se ob gradnji prevede v CSS.
Uredniški slogi
/* 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);
}
}
}Slogi sprednjega dela
/* 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;
}
}
}
To dodamo k src/style.scss ki skrbi za stil tako v urejevalniku kot v sprednjem delu. Predstavitvenega URL-ja ne bom mogel dati v skupno rabo, ker bi zahteval dostop urejevalnika, vendar imam posnet video, da si lahko ogledate predstavitev:
Precej lepo, kajne? Zdaj imamo popolnoma delujoč blok, ki ne le upodablja na sprednji strani, ampak tudi pridobiva podatke API in jih upodablja kar tam v urejevalniku blokov — z gumbom za osvežitev ob zagonu!
Če pa želimo vzeti polno prednosti urejevalnika blokov WordPress, bi morali razmisliti o preslikavi nekaterih elementov uporabniškega vmesnika bloka v blokovne kontrole za stvari, kot so nastavitev barve, tipografije in razmika. To je lep naslednji korak na učni poti razvoja blokov.
