Αυτή είναι η συνέχεια του τελευταίου μου άρθρου για "Απόδοση εξωτερικών δεδομένων API σε μπλοκ WordPress στο μπροστινό μέρος". Σε αυτό το τελευταίο, μάθαμε πώς να λαμβάνουμε ένα εξωτερικό API και να το ενσωματώνουμε με ένα μπλοκ που αποδίδει τα δεδομένα που έχουν ληφθεί στο μπροστινό μέρος ενός ιστότοπου WordPress.
Το θέμα είναι ότι το καταφέραμε με τρόπο που δεν μας επιτρέπει να βλέπουμε τα δεδομένα στον επεξεργαστή αποκλεισμού του WordPress. Με άλλα λόγια, μπορούμε να εισάγουμε το μπλοκ σε μια σελίδα, αλλά δεν έχουμε προεπισκόπηση του. Μπορούμε να δούμε το μπλοκ μόνο όταν δημοσιευτεί.
Ας ξαναδούμε το παράδειγμα προσθήκης μπλοκ που φτιάξαμε στο τελευταίο άρθρο. Μόνο αυτή τη φορά, θα χρησιμοποιήσουμε το οικοσύστημα JavaScript και React του WordPress για να ανακτήσουμε και να αποδώσουμε αυτά τα δεδομένα και στο back-end Block Editor.
Εκεί που σταματήσαμε
Καθώς ξεκινάμε αυτό, εδώ είναι ένα demo όπου καταλήξαμε στο τελευταίο άρθρο στο οποίο μπορείτε να αναφερθείτε. Ίσως έχετε παρατηρήσει ότι χρησιμοποίησα α render_callback μέθοδο στο τελευταίο άρθρο, ώστε να μπορώ να χρησιμοποιήσω τα χαρακτηριστικά στο αρχείο PHP και να αποδώσω το περιεχόμενο.
Λοιπόν, αυτό μπορεί να είναι χρήσιμο σε περιπτώσεις όπου μπορεί να χρειαστεί να χρησιμοποιήσετε κάποια εγγενή λειτουργία WordPress ή PHP για να δημιουργήσετε δυναμικά μπλοκ. Αλλά αν θέλετε να χρησιμοποιήσετε μόνο το JavaScript and React (JSX, ειδικά) οικοσυστήματος του WordPress για να αποδώσετε το στατικό HTML μαζί με τα χαρακτηριστικά που είναι αποθηκευμένα στη βάση δεδομένων, χρειάζεται μόνο να εστιάσετε στο Edit και Save λειτουργίες του πρόσθετου μπλοκ.
- Η
EditΗ λειτουργία αποδίδει το περιεχόμενο με βάση αυτό που θέλετε να δείτε στο Block Editor. Μπορείτε να έχετε διαδραστικά στοιχεία React εδώ. - Η
SaveΗ λειτουργία αποδίδει το περιεχόμενο με βάση αυτό που θέλετε να δείτε στη διεπαφή. Δεν μπορείτε να έχετε τα κανονικά στοιχεία React ή τα άγκιστρα εδώ. Χρησιμοποιείται για την επιστροφή του στατικού HTML που είναι αποθηκευμένο στη βάση δεδομένων σας μαζί με τα χαρακτηριστικά.
Η Save η λειτουργία είναι εκεί που κάνουμε παρέα σήμερα. Μπορούμε να δημιουργήσουμε διαδραστικά στοιχεία στο μπροστινό μέρος, αλλά για αυτό πρέπει να τα συμπεριλάβουμε και να τα έχουμε πρόσβαση με μη αυτόματο τρόπο εκτός του Save λειτουργούν σε ένα αρχείο όπως κάναμε στο προηγούμενο άρθρο.
Λοιπόν, θα καλύψω το ίδιο θέμα που κάναμε στο τελευταίο άρθρο, αλλά αυτή τη φορά μπορείτε να δείτε την προεπισκόπηση στο Block Editor πριν το δημοσιεύετε στο μπροστινό μέρος.
Τα στηρίγματα μπλοκ
Άφησα επίτηδες οποιεσδήποτε εξηγήσεις σχετικά με το edit τα στηρίγματα της συνάρτησης στο τελευταίο άρθρο γιατί αυτό θα είχε αποσπάσει την εστίαση από το κύριο σημείο, την απόδοση.
Εάν προέρχεστε από ένα υπόβαθρο του React, πιθανότατα θα καταλάβετε για τι πράγμα μιλάω, αλλά αν είστε νέος σε αυτό, θα το συνιστούσα έλεγχος στοιχείων και υποστηρικτικών στοιχείων στην τεκμηρίωση του React.
Αν καταγράψουμε το props αντικείμενο στην κονσόλα, επιστρέφει μια λίστα με συναρτήσεις και μεταβλητές WordPress που σχετίζονται με το μπλοκ μας:
Χρειαζόμαστε μόνο το attributes αντικείμενο και το setAttributes λειτουργία την οποία πρόκειται να αποδομήσω από το props αντικείμενο στον κώδικά μου. Στο τελευταίο άρθρο, είχα τροποποιήσει τον κώδικα του RapidAPI, ώστε να μπορώ να αποθηκεύσω τα δεδομένα API μέσω setAttributes(). Τα στηρίγματα είναι μόνο αναγνώσιμα, επομένως δεν μπορούμε να τα τροποποιήσουμε απευθείας.
Τα στηρίγματα μπλοκ είναι παρόμοια με τις μεταβλητές κατάστασης και setState στο React, αλλά το React λειτουργεί στην πλευρά του πελάτη και setAttributes() χρησιμοποιείται για την μόνιμη αποθήκευση των χαρακτηριστικών στη βάση δεδομένων του WordPress μετά την αποθήκευση της ανάρτησης. Έτσι, αυτό που πρέπει να κάνουμε είναι να τα σώσουμε attributes.data και μετά καλέστε το ως αρχική τιμή για το useState() μεταβλητός.
Η edit λειτουργία
Θα κάνω copy-paste τον κώδικα HTML που χρησιμοποιήσαμε football-rankings.php στο τελευταίο άρθρο και επεξεργαστείτε το λίγο για να μεταβείτε στο φόντο JavaScript. Θυμάστε πώς δημιουργήσαμε δύο επιπλέον αρχεία στο τελευταίο άρθρο για το στυλ της διεπαφής και τα σενάρια; Με τον τρόπο που προσεγγίζουμε τα πράγματα σήμερα, δεν χρειάζεται να δημιουργήσουμε αυτά τα αρχεία. Αντίθετα, μπορούμε να τα μεταφέρουμε όλα στο Edit λειτουργία.
Πλήρης κωδικός
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}
);
})}
);
}
)}
)}
);
}Έχω συμπεριλάβει το γάντζο React useState() από @wordpress/element αντί να το χρησιμοποιήσετε από τη βιβλιοθήκη του React. Αυτό συμβαίνει γιατί αν φόρτωζα με τον κανονικό τρόπο, θα κατέβαζε το React για κάθε μπλοκ που χρησιμοποιώ. Αν όμως χρησιμοποιώ @wordpress/element Φορτώνει από μία μόνο πηγή, δηλαδή από το επίπεδο WordPress πάνω από το React.
Αυτή τη φορά, επίσης δεν έχω τυλίξει τον κωδικό μέσα useEffect() αλλά μέσα σε μια συνάρτηση που καλείται μόνο όταν κάνουμε κλικ σε ένα κουμπί ώστε να έχουμε μια ζωντανή προεπισκόπηση των δεδομένων που λαμβάνονται. Έχω χρησιμοποιήσει μια μεταβλητή κατάσταση που ονομάζεται apiData για την απόδοση του πίνακα πρωταθλήματος υπό όρους. Έτσι, μόλις γίνει κλικ στο κουμπί και ληφθούν τα δεδομένα, ρυθμίζω apiData στα νέα δεδομένα μέσα στο fetchData() και υπάρχει διαθέσιμη αναπαράσταση με το HTML του πίνακα κατάταξης ποδοσφαίρου.
Θα παρατηρήσετε ότι μόλις αποθηκευτεί η ανάρτηση και ανανεωθεί η σελίδα, ο πίνακας πρωταθλήματος έχει φύγει. Αυτό συμβαίνει επειδή χρησιμοποιούμε μια κενή κατάσταση (null) Για apiDataαρχική τιμή του. Όταν η ανάρτηση αποθηκεύεται, τα χαρακτηριστικά αποθηκεύονται στο attributes.data αντικείμενο και το ονομάζουμε ως αρχική τιμή για το useState() μεταβλητή ως εξής:
const [apiData, setApiData] = useState(attributes.data);Η save λειτουργία
Θα κάνουμε σχεδόν το ίδιο ακριβώς πράγμα με το save λειτουργία, αλλά τροποποιήστε την λίγο. Για παράδειγμα, δεν χρειάζεται το κουμπί "Ανάκτηση δεδομένων" στο μπροστινό μέρος και το apiData Η μεταβλητή κατάσταση είναι επίσης περιττή επειδή την ελέγχουμε ήδη στο edit λειτουργία. Χρειαζόμαστε όμως ένα τυχαίο apiData μεταβλητή που ελέγχει για attributes.data για να αποδώσει υπό όρους το JSX, διαφορετικά θα εμφανίσει απροσδιόριστα σφάλματα και η διεπαφή χρήστη του Block Editor θα γίνει κενό.
Πλήρης κωδικός
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}
);
})}
);
})}
)}
);
}Εάν τροποποιείτε το save λειτουργία αφού υπάρχει ήδη ένα μπλοκ στον Επεξεργαστή μπλοκ, θα εμφανίσει ένα σφάλμα όπως αυτό:
Αυτό συμβαίνει επειδή η σήμανση στο αποθηκευμένο περιεχόμενο είναι διαφορετική από τη σήμανση στο νέο μας save λειτουργία. Δεδομένου ότι βρισκόμαστε σε λειτουργία ανάπτυξης, είναι ευκολότερο να αφαιρέσετε το bock από την τρέχουσα σελίδα και να το εισαγάγετε ξανά ως νέο μπλοκ — με αυτόν τον τρόπο, χρησιμοποιείται αντ' αυτού ο ενημερωμένος κώδικας και τα πράγματα είναι ξανά σε συγχρονισμό.
Αυτή η κατάσταση της αφαίρεσης και της προσθήκης του ξανά μπορεί να αποφευχθεί εάν είχαμε χρησιμοποιήσει το render_callback δεδομένου ότι η έξοδος είναι δυναμική και ελέγχεται από PHP αντί της συνάρτησης αποθήκευσης. Έτσι, κάθε μέθοδος έχει τα δικά της πλεονεκτήματα και μειονεκτήματα.
Ο Tom Nowell παρέχει μια λεπτομερή εξήγηση για το τι δεν πρέπει να κάνετε σε ένα save λειτουργία στο αυτή η υπερχείλιση στοίβας απάντηση.
Στυλ του μπλοκ στο πρόγραμμα επεξεργασίας και στο μπροστινό μέρος
Όσον αφορά το στυλ, θα είναι σχεδόν το ίδιο που εξετάσαμε στο τελευταίο άρθρο, αλλά με κάποιες μικρές αλλαγές που έχω εξηγήσει στα σχόλια. Παρέχω απλώς τα πλήρη στυλ εδώ, καθώς αυτό είναι απλώς μια απόδειξη της ιδέας και όχι κάτι που θέλετε να κάνετε αντιγραφή-επικόλληση (εκτός εάν χρειάζεστε πραγματικά ένα μπλοκ για την εμφάνιση της κατάταξης ποδοσφαίρου με το ίδιο στυλ). Και σημειώστε ότι εξακολουθώ να χρησιμοποιώ SCSS που μεταγλωττίζεται σε CSS κατά την κατασκευή.
Στυλ συντάκτη
/* 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);
}
}
}Μπροστινά στυλ
/* 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;
}
}
}
Το προσθέτουμε σε αυτό src/style.scss που φροντίζει για το styling τόσο στο editor όσο και στο frontend. Δεν θα μπορώ να κοινοποιήσω τη διεύθυνση URL επίδειξης, καθώς θα απαιτούσε πρόσβαση στο πρόγραμμα επεξεργασίας, αλλά έχω εγγράψει ένα βίντεο για να δείτε την επίδειξη:
Αρκετά τακτοποιημένο, σωστά; Τώρα έχουμε ένα πλήρως λειτουργικό μπλοκ που όχι μόνο αποδίδει στο μπροστινό μέρος, αλλά ανακτά και δεδομένα API και αποδίδει ακριβώς εκεί στο Block Editor — με ένα κουμπί ανανέωσης για εκκίνηση!
Αλλά αν θέλουμε να πάρουμε πλήρη πλεονέκτημα του WordPress Block Editor, θα πρέπει να εξετάσουμε το ενδεχόμενο να αντιστοιχίσουμε ορισμένα από τα στοιχεία διεπαφής χρήστη του μπλοκ μπλοκ ελέγχου για πράγματα όπως η ρύθμιση χρώματος, τυπογραφίας και απόστασης. Αυτό είναι ένα ωραίο επόμενο βήμα στο μαθησιακό ταξίδι ανάπτυξης μπλοκ.
