अब तक, हमने कस्टम वर्डप्रेस ब्लॉक में बाहरी एपीआई से डेटा के साथ काम करने का तरीका बताया है। हम की प्रक्रिया से गुजरे उस डेटा को फ्रंट एंड पर उपयोग के लिए लाना एक वर्डप्रेस साइट की, और कैसे करें इसे सीधे वर्डप्रेस ब्लॉक एडिटर में रेंडर करें ब्लॉक को सामग्री में रखते समय। इस बार, हम अपने द्वारा बनाए गए ब्लॉक के लिए सेटिंग्स UI बनाने के लिए ब्लॉक एडिटर के कंट्रोल पैनल में हुक करके उन दो लेखों को पाटने जा रहे हैं।
वर्डप्रेस ब्लॉक में बाहरी एपीआई के साथ कार्य करना
आप उस नियंत्रण कक्ष को जानते हैं जिसकी मैं बात कर रहा हूँ, है ना? यह दाईं ओर का वह पैनल है जिसमें ब्लॉक एडिटर में पोस्ट और ब्लॉक सेटिंग्स होती हैं।
वह लाल हाइलाइट किया हुआ क्षेत्र देखें? वह कंट्रोल पैनल है। एक पैराग्राफ ब्लॉक वर्तमान में चुना गया है और इसके लिए सेटिंग्स पैनल में प्रदर्शित की गई हैं। हम शैली, रंग, टाइपोग्राफी... बहुत सी चीज़ें बदल सकते हैं!
ठीक यही हम इस बार कर रहे हैं। हम फुटबॉल रैंकिंग ब्लॉक की सेटिंग के लिए नियंत्रण बनाने जा रहे हैं, जिस पर हमने पिछले दो लेखों में काम किया था। पिछली बार, हमने अपने ब्लॉक में एक बटन बनाया था जो फुटबॉल रैंकिंग के लिए बाहरी डेटा प्राप्त करता है। हमें पहले से ही वह URL और समापन बिंदु पता था जिसकी हमें आवश्यकता थी। लेकिन क्या होगा अगर हम किसी दूसरे देश के लिए रैंकिंग लाना चाहते हैं? या शायद एक अलग लीग? कैसे एक अलग मौसम से डेटा के बारे में?
ऐसा करने के लिए हमें प्रपत्र नियंत्रणों की आवश्यकता है। हम इंटरैक्टिव रिएक्ट घटकों का उपयोग कर सकते हैं - जैसे प्रतिक्रिया-चयन करें - उस डेटा को पार्स करने के लिए उपलब्ध विभिन्न एपीआई विकल्पों के माध्यम से ब्राउज़ करने के लिए। लेकिन इसकी कोई आवश्यकता नहीं है क्योंकि वर्डप्रेस मुख्य घटकों के एक समूह के साथ आता है जिसे हम ठीक से जोड़ते हैं!
RSI दस्तावेज़ीकरण इन घटकों के लिए - कहा जाता है InspectorControls - में बेहतर हो रहा है वर्डप्रेस ब्लॉक एडिटर हैंडबुक. समय के साथ यह और भी बेहतर होता जाएगा, लेकिन इस बीच, हमारे पास भी है वर्डप्रेस गुटेनबर्ग स्टोरीबुक और वर्डप्रेस गुटेनबर्ग अवयव अतिरिक्त सहायता के लिए साइटें।
एपीआई आर्किटेक्चर
इससे पहले कि हम किसी भी चीज़ पर हुक लगाएँ, यह एक अच्छा विचार है कि हमें सबसे पहले यह पता लगाना चाहिए कि हमें क्या चाहिए। मैंने रैपिडएपीआई डेटा की संरचना की मैपिंग की है जिसे हम प्राप्त कर रहे हैं ताकि हम जान सकें कि हमारे लिए क्या उपलब्ध है:
सीजन और देश दो शीर्ष-स्तरीय एंडपॉइंट हैं जो लीग एंडपॉइंट के लिए मैप करते हैं। वहां से, हमारे पास शेष डेटा है जिसका उपयोग हम पहले से ही रैंकिंग तालिका को पॉप्युलेट करने के लिए कर रहे हैं। इसलिए, हम जो करना चाहते हैं वह वर्डप्रेस ब्लॉक एडिटर में सेटिंग्स बनाना है जो डेटा को सीज़न, कंट्री और लीग द्वारा फ़िल्टर करता है, फिर उस फ़िल्टर किए गए डेटा को रैंकिंग टेबल में पास करता है। यह हमें किसी भी वर्डप्रेस पेज या पोस्ट में ब्लॉक को छोड़ने और ब्लॉक में डेटा की विविधता प्रदर्शित करने की क्षमता देता है।
स्टैंडिंग प्राप्त करने के लिए, हमें पहले लीग प्राप्त करने की आवश्यकता है। और लीग प्राप्त करने के लिए, हमें सबसे पहले देशों और/या मौसमों को प्राप्त करने की आवश्यकता है। आप रैपिडएपीआई डैशबोर्ड में विभिन्न समापन बिंदुओं को देख सकते हैं।
डेटा के विभिन्न संयोजन हैं जिनका उपयोग हम रैंकिंग को भरने के लिए कर सकते हैं, और आपके पास वरीयता हो सकती है कि आप कौन सा डेटा चाहते हैं। इस लेख के लिए, हम ब्लॉक सेटिंग पैनल में निम्नलिखित विकल्प बनाने जा रहे हैं:
- देश चुनें
- लीग चुनें
- सीज़न चुनें
फिर हमारे पास उन चयनों को सबमिट करने और प्रासंगिक डेटा प्राप्त करने और उन्हें रैंकिंग तालिका में पास करने के लिए एक बटन होगा।
देशों की सूची को लोड और स्टोर करें
यदि हमारे पास चुनने के लिए देशों की सूची नहीं है, तो हम यह नहीं चुन सकते कि हमें किस देश का डेटा चाहिए। इसलिए, हमारा पहला काम रैपिडएपीआई से देशों की सूची हासिल करना है।
आदर्श बात यह है कि जब पेज या पोस्ट सामग्री में ब्लॉक का वास्तव में उपयोग किया जाता है तो देशों की सूची प्राप्त करें। अगर ब्लॉक उपयोग में नहीं है तो कुछ भी लाने की जरूरत नहीं है। दृष्टिकोण बहुत कुछ वैसा ही है जैसा हमने किया था पहला लेख, अंतर यह है कि हम लौटे देशों की सूची को संग्रहीत करने के लिए एक अलग एपीआई समापन बिंदु और विभिन्न विशेषताओं का उपयोग कर रहे हैं। डेटा लाने के अन्य वर्डप्रेस तरीके हैं, जैसे एपीआई-फ़ेच, लेकिन यह उस दायरे से बाहर है जो हम यहां कर रहे हैं।
हम या तो देश की सूची को एपीआई डेटा से कॉपी करने के बाद मैन्युअल रूप से शामिल कर सकते हैं, या हम देशों को पॉप्युलेट करने के लिए एक अलग एपीआई या लाइब्रेरी का उपयोग कर सकते हैं। लेकिन जिस एपीआई का हम उपयोग कर रहे हैं उसमें पहले से ही देशों की एक सूची है, इसलिए मैं इसके समापन बिंदुओं में से एक का उपयोग करूंगा। चलिए सुनिश्चित करते हैं कि प्रारंभिक देश सूची तब लोड होती है जब ब्लॉक को पृष्ठ में डाला जाता है या ब्लॉक संपादक में सामग्री पोस्ट की जाती है:
// edit.js
const [countriesList, setCountriesList] = useState(null);
useEffect(() => {
let countryOptions = {
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/countries", countryOptions)
.then( (response) => response.json() )
.then( (response) => {
let countriesArray = { ...response };
console.log("Countries list", countriesArray.response);
setCountriesList(countriesArray.response);
})
.catch((err) => console.error(err));
}, []);देशों की सूची को स्टोर करने के लिए हमारे पास एक स्टेट वेरिएबल है। अगला, हम से एक घटक आयात करने जा रहे हैं @ वर्डप्रेस/ब्लॉक-एडिटर पैकेज कहा जाता है InspectorControls यह वह जगह है जहां हमारे सेटिंग्स नियंत्रण बनाने के लिए आवश्यक सभी घटक स्थित हैं।
import { InspectorControls } from "@wordpress/block-editor";पैकेज का गीथहब रेपो समझाने का अच्छा काम करता है InspectorControls. हमारे उदाहरण में, हम इसका उपयोग एपीआई डेटा सेटिंग्स जैसे देश, लीग और सीज़न को नियंत्रित करने के लिए कर सकते हैं। यहां एक पूर्वावलोकन दिया गया है ताकि आपको हमारे द्वारा बनाए जा रहे UI का अंदाज़ा हो सके:
और एक बार उन चयनों को ब्लॉक सेटिंग्स में किए जाने के बाद, हम उनका उपयोग करते हैं ब्लॉक का Edit समारोह:
{ countriesList && (
)}
यहां, मैं यह सुनिश्चित कर रहा हूं कि हम कंडीशनल रेंडरिंग का उपयोग कर रहे हैं ताकि फ़ंक्शन केवल घटक को लोड करे बाद देशों की सूची भरी हुई है। अगर आप इसके बारे में सोच रहे हैं LeagueSettings घटक, यह एक कस्टम घटक है जिसे मैंने एक अलग components ब्लॉक में सबफ़ोल्डर ताकि हम एक क्लीनर और अधिक संगठित हो सकें Edit एक फ़ाइल में निपटने के लिए देश के डेटा की सैकड़ों पंक्तियों के बजाय कार्य करें।
हम इसे में आयात कर सकते हैं edit.js इस तरह से फाइल करें:
import { LeagueSettings } from "./components/LeagueSettings";अगला, हम आवश्यक प्रॉप को पास कर रहे हैं LeagueSettings माता-पिता से घटक Edit घटक ताकि हम राज्य चर और विशेषताओं तक पहुँच सकें LeagueSettings बाल घटक। हम इसे अन्य तरीकों से भी कर सकते हैं जैसे कि संदर्भ एपीआई प्रोप ड्रिलिंग से बचने के लिए, लेकिन अभी जो हमारे पास है वह हम जो कर रहे हैं उसके लिए पूरी तरह से उपयुक्त है।
के अन्य भाग Edit फ़ंक्शन को घटकों में भी परिवर्तित किया जा सकता है। उदाहरण के लिए, लीग स्टैंडिंग कोड को एक अलग घटक के अंदर रखा जा सकता है - जैसे हो सकता है LeagueTable.js - और फिर आयात किया जैसे हमने आयात किया LeagueSettings में Edit समारोह.
अंदर LeagueSettings.js पट्टिका
LeagueSettings दूसरे जैसा ही है प्रतिक्रिया घटक जिससे हम मूल घटक से प्रॉप्स को नष्ट कर सकते हैं। मैं तीन राज्य चर और एक अतिरिक्त का उपयोग करने जा रहा हूं leagueID राज्य क्योंकि हम से आईडी निकालने जा रहे हैं league वस्तु:
const [country, setCountry] = useState(null);
const [league, setLeague] = useState(null);
const [season, setSeason] = useState(null);
const [leagueID, setLeagueID] = useState(null);पहली चीज जो हम करने जा रहे हैं वह आयात है PanelBody @wordpress/block-editor पैकेज से घटक:
import { PanelBody } from "@wordpress/block-editor";... और इसे हमारे में शामिल करें return समारोह:
वहां अन्य पैनल टैग और विशेषताएँ - इनका उपयोग करना मेरी निजी प्राथमिकता है। अन्य में से किसी की आवश्यकता नहीं है ... लेकिन सभी घटकों को देखें हमारे पास एक सेटिंग पैनल बनाने के लिए उपलब्ध है! मुझे इसकी सादगी पसंद है PanelBody हमारे उपयोग के मामले के लिए। यह ब्लॉक के लिए ड्रॉपडाउन सेटिंग प्रकट करने के लिए फैलता और संक्षिप्त होता है और बस इतना ही।
जिसके बारे में बोलते हुए, हमारे पास उन चयनों के लिए एक विकल्प है। हम इस्तेमाल कर सकते हैं SelectControl घटक या ए ComboBoxControl, जिसे डॉक्स "ए का एक उन्नत संस्करण" के रूप में वर्णित करता है SelectControl, खोज इनपुट का उपयोग करके विकल्पों की खोज करने में सक्षम होने के अतिरिक्त।” यह हमारे लिए अच्छा है क्योंकि देशों की सूची काफी लंबी हो सकती है और उपयोगकर्ता या तो खोज क्वेरी कर सकेंगे या सूची से चयन कर सकेंगे।
यहां एक उदाहरण दिया गया है कि कैसे ए ComboboxControl हमारे देश की सूची के लिए काम कर सकता है:
handleCountryChange(value) }
onInputChange={ (inputValue) => {
setFilteredCountryOptions(
setupCountrySelect.filter((option) =>
option.label
.toLowerCase()
.startsWith(inputValue.toLowerCase())
)
);
}}
/>RSI ComboboxControl इस अर्थ में विन्यास योग्य है कि हम नियंत्रण के लेबल और मूल्यों के लिए अलग-अलग आकार लागू कर सकते हैं:
{
value: 'small',
label: 'Small',
},लेकिन हमारा एपीआई डेटा इस सिंटैक्स में नहीं है, इसलिए हम इसे बदल सकते हैं countriesList सरणी जो ब्लॉक शामिल होने पर मूल घटक से आती है:
let setupCountrySelect;
setupCountrySelect = countriesList.map((country) => {
return {
label: country.name,
value: country.name,
};
});जब किसी देश का चयन किया जाता है ComboboxControl, देश का मान बदल जाता है और हम तदनुसार डेटा फ़िल्टर करते हैं:
function handleCountryChange(value) {
// Set state of the country
setCountry(value);
// League code from RapidAPI
const options = {
method: "GET",
headers: {
"X-RapidAPI-Key": "Your RapidAPI key",
"X-RapidAPI-Host": "api-football-v1.p.rapidapi.com",
},
};
fetch(`https://api-football-v1.p.rapidapi.com/v3/leagues?country=${value}`, options)
.then((response) => response.json())
.then((response) => {
return response.response;
})
.then((leagueOptions) => {
// Set state of the league variable
setLeague(leagueOptions);
// Convert it as we did for Country options
setupLeagueSelect = leagueOptions.map((league) => {
return {
label: league.league.name,
value: league.league.name,
};
});
setFilteredLeagueOptions(setupLeagueSelect);
})
.catch((err) => console.error(err));
}ध्यान दें कि जब देश का चयन बदलता है तो परिवर्तनों को संभालने के लिए मैं अन्य तीन राज्य चर का उपयोग कर रहा हूं:
const [filteredCountryOptions, setFilteredCountryOptions] = useState(setupCountrySelect);
const [filteredLeagueOptions, setFilteredLeagueOptions] = useState(null);
const [filteredSeasonOptions, setFilteredSeasonOptions] = useState(null);अन्य सेटिंग विकल्पों के बारे में क्या?
मैं वह कोड दिखाऊंगा जो मैंने अन्य सेटिंग्स के लिए उपयोग किया था लेकिन विशेष मामलों के लिए त्रुटियों को परिभाषित करते समय सामान्य मामलों को ध्यान में रखा जाता है। उदाहरण के लिए, कुछ देशों और लीगों में त्रुटियाँ होंगी क्योंकि:
- कुछ लीगों के लिए कोई स्टैंडिंग नहीं है, और
- कुछ लीगों में स्टैंडिंग होती है लेकिन वे एक टेबल में नहीं होती हैं।
यह जावास्क्रिप्ट या रिएक्ट ट्यूटोरियल नहीं है, इसलिए मैं आपको एपीआई के लिए विशेष मामलों को संभालने दूँगा जिसका आप उपयोग करने की योजना बना रहे हैं:
function handleLeagueChange(value) {
setLeague(value);
if (league) {
const selectedLeague = league.filter((el) => {
if (el.league.name === value) {
return el;
}
});
if (selectedLeague) {
setLeague(selectedLeague[0].league.name);
setLeagueID(selectedLeague[0].league.id);
setupSeasonSelect = selectedLeague[0].seasons.map((season) => {
return {
label: season.year,
value: season.year,
};
});
setFilteredSeasonOptions(setupSeasonSelect);
}
} else {
return;
}
}
function handleSeasonChange(value) {
setSeason(value);
}सेटिंग्स चयन सबमिट करना
में अंतिम लेख, हमने ब्लॉक एडिटर में एक बटन बनाया है जो एपीआई से ताज़ा डेटा प्राप्त करता है। अब इसकी कोई आवश्यकता नहीं है क्योंकि हमारे पास सेटिंग्स हैं। ठीक है, हमें इसकी आवश्यकता है - अभी वह नहीं है जहाँ यह वर्तमान में है। इसे सीधे ब्लॉक एडिटर में रेंडर किए गए ब्लॉक में रखने के बजाय, हम इसे अपने PanelBody सेटिंग्स चयन सबमिट करने के लिए घटक।
तो, वापस अंदर LeagueSettings.js:
// When countriesList is loaded, show the country combo box
{ countriesList && (
handleCountryChange(value)}
onInputChange={(inputValue) => {
setFilteredCountryOptions(
setupCountrySelect.filter((option) =>
option.label
.toLowerCase()
.startsWith(inputValue.toLowerCase())
)
);
}}
/>
)}
// When filteredLeagueOptions is set through handleCountryChange, show league combobox
{ filteredLeagueOptions && (
handleLeagueChange(value)}
onInputChange={(inputValue) => {
setFilteredLeagueOptions(
setupLeagueSelect.filter((option) =>
option.label
.toLowerCase()
.startsWith(inputValue.toLowerCase())
)
);
}}
/>
)}
// When filteredSeasonOptions is set through handleLeagueChange, show season combobox
{ filteredSeasonOptions && (
handleSeasonChange(value)}
onInputChange={
(inputValue) => {
setFilteredSeasonOptions(
setupSeasonSelect.filter((option) =>
option.label
.toLowerCase()
.startsWith(inputValue.toLowerCase()
)
);
}
}
/>
// When season is set through handleSeasonChange, show the "Fetch data" button
{
season && (
)
}
)}यहाँ परिणाम है!
हम अपने ब्लॉक के साथ बहुत अच्छी जगह पर हैं। हम इसे ब्लॉक एडिटर और साइट के फ्रंट एंड में रेंडर कर सकते हैं। हम अपने द्वारा बनाई गई सेटिंग्स के चयन के आधार पर बाहरी एपीआई से डेटा प्राप्त कर सकते हैं जो डेटा को फ़िल्टर करता है। यह बहुत कार्यात्मक है!
लेकिन एक और चीज़ है जिससे हमें निपटना है। अभी, जब हम उस पृष्ठ या पोस्ट को सहेजते हैं जिसमें ब्लॉक होता है, तो हमने ब्लॉक रीसेट के लिए जो सेटिंग्स चुनी हैं। दूसरे शब्दों में, वे चयन कहीं भी सहेजे नहीं जाते हैं। उन चयनों को स्थायी बनाने के लिए थोड़ा और काम है। यही वह जगह है जहां हम अगले लेख में जाने की योजना बना रहे हैं, इसलिए बने रहें।
