यह मेरे पिछले लेख के बारे में एक निरंतरता है "फ्रंट एंड पर वर्डप्रेस ब्लॉक में बाहरी एपीआई डेटा प्रस्तुत करना". उस आखिरी में, हमने सीखा कि कैसे एक बाहरी एपीआई लेना है और इसे एक ब्लॉक के साथ एकीकृत करना है जो एक वर्डप्रेस साइट के सामने के छोर पर प्राप्त डेटा को प्रस्तुत करता है।
बात यह है, हमने इसे इस तरह से पूरा किया है जो हमें वर्डप्रेस ब्लॉक एडिटर में डेटा देखने से रोकता है। दूसरे शब्दों में, हम किसी पृष्ठ पर ब्लॉक सम्मिलित कर सकते हैं लेकिन हमें इसका कोई पूर्वावलोकन नहीं मिलता है। ब्लॉक प्रकाशित होने पर ही हमें देखने को मिलता है।
आइए पिछले लेख में हमारे द्वारा बनाए गए उदाहरण ब्लॉक प्लगइन पर फिर से विचार करें। केवल इस बार, हम उस डेटा को बैक-एंड ब्लॉक एडिटर में भी लाने और प्रस्तुत करने के लिए वर्डप्रेस के जावास्क्रिप्ट और रिएक्ट इकोसिस्टम का उपयोग करने जा रहे हैं।
हमने कहाँ छोड़ा था
जैसे ही हम इसे शुरू करते हैं, यहाँ एक डेमो है जहां हम पिछले लेख में आए थे जिसका आप उल्लेख कर सकते हैं। आपने देखा होगा कि मैंने a . का उपयोग किया है render_callback
पिछले लेख में विधि ताकि मैं PHP फ़ाइल में विशेषताओं का उपयोग कर सकूं और सामग्री प्रस्तुत कर सकूं।
खैर, यह उन स्थितियों में उपयोगी हो सकता है जहां आपको डायनामिक ब्लॉक बनाने के लिए कुछ देशी वर्डप्रेस या PHP फ़ंक्शन का उपयोग करना पड़ सकता है। लेकिन अगर आप डेटाबेस में संग्रहीत विशेषताओं के साथ स्थिर HTML को प्रस्तुत करने के लिए वर्डप्रेस के सिर्फ जावास्क्रिप्ट और रिएक्ट (जेएसएक्स, विशेष रूप से) पारिस्थितिकी तंत्र का उपयोग करना चाहते हैं, तो आपको केवल पर ध्यान केंद्रित करने की आवश्यकता है Edit
और Save
ब्लॉक प्लगइन के कार्य।
- RSI
Edit
फ़ंक्शन उस सामग्री के आधार पर प्रस्तुत करता है जिसे आप ब्लॉक संपादक में देखना चाहते हैं। आपके यहां इंटरैक्टिव रिएक्ट घटक हो सकते हैं। - RSI
Save
फ़ंक्शन सामग्री को उस आधार पर प्रस्तुत करता है जिसे आप सामने के छोर पर देखना चाहते हैं। आपके यहां नियमित रिएक्ट घटक या हुक नहीं हो सकते। इसका उपयोग स्थिर HTML को वापस करने के लिए किया जाता है जो आपके डेटाबेस में विशेषताओं के साथ सहेजा जाता है।
RSI Save
समारोह वह जगह है जहां हम आज बाहर घूम रहे हैं। हम फ्रंट-एंड पर इंटरेक्टिव कंपोनेंट्स बना सकते हैं, लेकिन इसके लिए हमें मैन्युअल रूप से उन्हें शामिल करने और एक्सेस करने की आवश्यकता है Save
एक फ़ाइल में कार्य करें जैसा हमने पिछले लेख में किया था।
इसलिए, मैं उसी आधार को कवर करने जा रहा हूं जो हमने पिछले लेख में किया था, लेकिन इस बार आप ब्लॉक संपादक में पूर्वावलोकन देख सकते हैं से पहले आप इसे सामने के छोर पर प्रकाशित करें।
ब्लॉक प्रॉप्स
मैंने जानबूझकर इसके बारे में कोई स्पष्टीकरण छोड़ दिया है edit
पिछले लेख में फंक्शन के प्रॉप्स क्योंकि इससे मुख्य बिंदु, रेंडरिंग से ध्यान हट जाता था।
यदि आप एक प्रतिक्रिया पृष्ठभूमि से आ रहे हैं, तो आप समझ सकते हैं कि मैं किस बारे में बात कर रहा हूं, लेकिन यदि आप इसके लिए नए हैं, तो मैं अनुशंसा करता हूं रिएक्ट डॉक्यूमेंटेशन में कंपोनेंट्स और प्रॉप्स की जाँच करना.
अगर हम लॉग करते हैं props
कंसोल पर आपत्ति जताते हुए, यह हमारे ब्लॉक से संबंधित वर्डप्रेस फ़ंक्शंस और वेरिएबल्स की एक सूची देता है:
हमें केवल की आवश्यकता है attributes
वस्तु और setAttributes
समारोह जिसे मैं नष्ट करने जा रहा हूँ props
मेरे कोड में ऑब्जेक्ट। पिछले लेख में, मैंने रैपिडएपीआई के कोड को संशोधित किया था ताकि मैं एपीआई डेटा को स्टोर कर सकूं setAttributes()
. प्रॉप्स केवल पठनीय हैं, इसलिए हम उन्हें सीधे संशोधित करने में असमर्थ हैं।
ब्लॉक प्रॉप्स राज्य चर के समान हैं और setState
रिएक्ट में, लेकिन रिएक्ट क्लाइंट साइड पर काम करता है और setAttributes()
पोस्ट को सेव करने के बाद वर्डप्रेस डेटाबेस में एट्रीब्यूट्स को स्थायी रूप से स्टोर करने के लिए उपयोग किया जाता है। तो, हमें उन्हें बचाने की क्या ज़रूरत है attributes.data
और उसके बाद इसे के प्रारंभिक मान के रूप में कॉल करें useState()
चर।
edit
समारोह
RSI मैं उस HTML कोड को कॉपी-पेस्ट करने जा रहा हूं जिसका हमने उपयोग किया था football-rankings.php
पिछले लेख में और इसे जावास्क्रिप्ट पृष्ठभूमि में स्थानांतरित करने के लिए थोड़ा संपादित करें। याद रखें कि हमने पिछले लेख में फ्रंट एंड स्टाइलिंग और स्क्रिप्ट के लिए दो अतिरिक्त फाइलें कैसे बनाईं? आज जिस तरह से हम चीजों के करीब पहुंच रहे हैं, उन फाइलों को बनाने की कोई जरूरत नहीं है। इसके बजाय, हम इसे सभी में स्थानांतरित कर सकते हैं 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}
);
})}
);
}
)}
)}
);
}
मैंने रिएक्ट हुक शामिल किया है useState()
से @wordpress/element
रिएक्ट लाइब्रेरी से इसका उपयोग करने के बजाय। ऐसा इसलिए है क्योंकि अगर मैं नियमित तरीके से लोड करता, तो यह मेरे द्वारा उपयोग किए जा रहे प्रत्येक ब्लॉक के लिए रिएक्ट डाउनलोड करता। लेकिन अगर मैं उपयोग कर रहा हूँ @wordpress/element
यह एक ही स्रोत से लोड होता है, यानी रिएक्ट के ऊपर वर्डप्रेस लेयर।
इस बार, मैंने कोड को भी अंदर नहीं लपेटा है useEffect()
लेकिन एक फ़ंक्शन के अंदर जिसे केवल एक बटन पर क्लिक करने पर कॉल किया जाता है ताकि हमारे पास प्राप्त डेटा का लाइव पूर्वावलोकन हो। मैंने एक राज्य चर का उपयोग किया है जिसे कहा जाता है apiData
लीग तालिका को सशर्त रूप से प्रस्तुत करने के लिए। इसलिए, एक बार बटन क्लिक करने और डेटा प्राप्त करने के बाद, मैं सेटिंग कर रहा हूं apiData
के अंदर नए डेटा के लिए fetchData()
और फ़ुटबॉल रैंकिंग तालिका के HTML के साथ एक रीरेंडर उपलब्ध है।
आप देखेंगे कि एक बार पोस्ट सेव हो जाने और पेज रीफ्रेश होने के बाद, लीग टेबल खत्म हो जाती है। ऐसा इसलिए है क्योंकि हम एक खाली अवस्था का उपयोग कर रहे हैं (null
) के लिए apiData
का प्रारंभिक मूल्य। जब पोस्ट सहेजा जाता है, तो विशेषताएँ इसमें सहेजी जाती हैं attributes.data
वस्तु और हम इसे के लिए प्रारंभिक मूल्य के रूप में कहते हैं useState()
इस तरह चर:
const [apiData, setApiData] = useState(attributes.data);
save
समारोह
RSI हम इसके साथ लगभग वही सटीक काम करने जा रहे हैं save
फ़ंक्शन, लेकिन इसे थोड़ा संशोधित करें। उदाहरण के लिए, सामने के छोर पर "डेटा प्राप्त करें" बटन की कोई आवश्यकता नहीं है, और apiData
राज्य चर भी अनावश्यक है क्योंकि हम पहले से ही इसकी जाँच कर रहे हैं edit
समारोह। लेकिन हमें एक यादृच्छिक की जरूरत है apiData
चर जो जांचता है attributes.data
JSX को सशर्त रूप से प्रस्तुत करने के लिए अन्यथा यह अपरिभाषित त्रुटियों को फेंक देगा और ब्लॉक संपादक UI खाली हो जाएगा।
पूरा कोड
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
समारोह। चूंकि हम विकास मोड में हैं, इसलिए वर्तमान पृष्ठ से बॉक को हटाना और इसे एक नए ब्लॉक के रूप में फिर से सम्मिलित करना आसान है - इस तरह, इसके बजाय अपडेट किए गए कोड का उपयोग किया जाता है और चीजें सिंक में वापस आ जाती हैं।
अगर हमने इसका इस्तेमाल किया होता तो इसे हटाने और फिर से जोड़ने की इस स्थिति से बचा जा सकता है render_callback
विधि चूंकि आउटपुट गतिशील है और सेव फ़ंक्शन के बजाय PHP द्वारा नियंत्रित है। तो प्रत्येक विधि के अपने फायदे और नुकसान हैं।
टॉम नोवेल a . में क्या नहीं करना है, इस बारे में पूरी तरह से स्पष्टीकरण प्रदान करता है save
समारोह में यह ढेर अतिप्रवाह जवाब.
संपादक और सामने के छोर में ब्लॉक को स्टाइल करना
स्टाइल के बारे में, यह लगभग वही होगा जो हमने पिछले लेख में देखा था, लेकिन कुछ मामूली बदलावों के साथ जो मैंने टिप्पणियों में समझाया है। मैं यहां केवल पूर्ण शैलियों को प्रदान कर रहा हूं क्योंकि यह केवल अवधारणा का प्रमाण है, न कि कुछ ऐसा जिसे आप कॉपी-पेस्ट करना चाहते हैं (जब तक कि आपको वास्तव में इस तरह की शैली वाली फुटबॉल रैंकिंग दिखाने के लिए ब्लॉक की आवश्यकता न हो)। और ध्यान दें कि मैं अभी भी एससीएसएस का उपयोग कर रहा हूं जो निर्माण पर सीएसएस को संकलित करता है।
संपादक शैलियाँ
/* 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
जो एडिटर और फ्रंटएंड दोनों में स्टाइलिंग का ख्याल रखता है। मैं डेमो URL साझा नहीं कर पाऊंगा क्योंकि इसके लिए संपादक पहुंच की आवश्यकता होगी लेकिन मेरे पास डेमो देखने के लिए आपके लिए एक वीडियो रिकॉर्ड किया गया है:
बहुत साफ सुथरा, है ना? अब हमारे पास पूरी तरह से काम करने वाला ब्लॉक है जो न केवल फ्रंट एंड पर रेंडर करता है, बल्कि एपीआई डेटा भी प्राप्त करता है और ब्लॉक एडिटर में वहीं रेंडर करता है - बूट करने के लिए रिफ्रेश बटन के साथ!
लेकिन अगर हम लेना चाहते हैं पूर्ण वर्डप्रेस ब्लॉक एडिटर का लाभ, हमें ब्लॉक के कुछ यूआई तत्वों को मैप करने पर विचार करना चाहिए ब्लॉक नियंत्रण रंग, टाइपोग्राफी, और रिक्ति सेट करने जैसी चीज़ों के लिए। यह ब्लॉक विकास सीखने की यात्रा में एक अच्छा अगला कदम है।