اپنی مرضی کے مطابق ورڈپریس بلاک کے لیے سیٹنگز UI بنانا

اب تک، ہم نے احاطہ کیا ہے کہ کسٹم ورڈپریس بلاک میں بیرونی API کے ڈیٹا کے ساتھ کیسے کام کیا جائے۔ ہم کے عمل کے ذریعے چلا گیا سامنے والے سرے پر استعمال کے لیے اس ڈیٹا کو لانا ایک ورڈپریس سائٹ کا، اور کیسے اسے براہ راست ورڈپریس بلاک ایڈیٹر میں پیش کریں۔ بلاک کو مواد میں رکھتے وقت۔ اس بار، ہم ان دو مضامین کو بلاک ایڈیٹر کے کنٹرول پینل میں جوڑ کر اپنے بنائے ہوئے بلاک کے لیے سیٹنگ UI بنانے جا رہے ہیں۔

آپ کو معلوم ہے کہ میں جس کنٹرول پینل کا ذکر کر رہا ہوں، ٹھیک ہے؟ یہ دائیں طرف کا پینل ہے جس میں بلاک ایڈیٹر میں پوسٹ اور بلاک سیٹنگز شامل ہیں۔

وہ سرخ روشنی والا علاقہ دیکھیں؟ یہ کنٹرول پینل ہے۔ ایک پیراگراف بلاک فی الحال منتخب کیا گیا ہے اور اس کے لیے سیٹنگز پینل میں آویزاں ہیں۔ ہم سٹائل، رنگ، نوع ٹائپ… بہت سی چیزیں تبدیل کر سکتے ہیں!

ٹھیک ہے، بالکل وہی ہے جو ہم اس بار کر رہے ہیں۔ ہم فٹ بال رینکنگ بلاک کی سیٹنگز کے لیے کنٹرولز بنانے جا رہے ہیں جس پر ہم نے پچھلے دو مضامین میں کام کیا تھا۔ پچھلی بار، ہم نے اپنے بلاک میں ایک بٹن بنایا تھا جو فٹ بال کی درجہ بندی کے لیے بیرونی ڈیٹا حاصل کرتا ہے۔ ہمیں پہلے سے ہی یو آر ایل اور اینڈ پوائنٹس معلوم تھے جن کی ہمیں ضرورت تھی۔ لیکن اگر ہم کسی دوسرے ملک کی درجہ بندی حاصل کرنا چاہتے ہیں تو کیا ہوگا؟ یا شاید ایک مختلف لیگ؟ مختلف سیزن کے ڈیٹا کے بارے میں کیا خیال ہے؟

ہمیں ایسا کرنے کے لیے فارم کنٹرولز کی ضرورت ہے۔ ہم انٹرایکٹو ری ایکٹ اجزاء کا استعمال کر سکتے ہیں - جیسے رد عمل - منتخب کریں۔ — مختلف API اختیارات کے ذریعے براؤز کرنے کے لیے جو اس ڈیٹا کو پارس کرنے کے لیے دستیاب ہیں۔ لیکن اس کی کوئی ضرورت نہیں ہے کیونکہ ورڈپریس بنیادی اجزاء کے ایک گروپ کے ساتھ بحری جہاز بھیجتا ہے جس میں ہم بالکل جڑ جاتے ہیں!

۔ دستاویزات ان اجزاء کے لئے - کہا جاتا ہے InspectorControls - میں بہتر ہو رہا ہے۔ ورڈپریس بلاک ایڈیٹر ہینڈ بک. یہ وقت کے ساتھ اور بھی بہتر ہوتا جائے گا، لیکن اس دوران، ہمارے پاس بھی ہے۔ ورڈپریس گٹنبرگ اسٹوری بک اور ورڈپریس گٹنبرگ اجزاء اضافی مدد کے لیے سائٹس۔

API فن تعمیر

اس سے پہلے کہ ہم کسی بھی چیز کو جوڑیں، یہ ایک اچھا خیال ہے کہ پہلے اس کی ہمیں کیا ضرورت ہے اس کا نقشہ بنائیں۔ میں نے RapidAPI ڈیٹا کے ڈھانچے کو نقشہ بنا لیا ہے جسے ہم حاصل کر رہے ہیں تاکہ ہم جان سکیں کہ ہمارے لیے کیا دستیاب ہے:

سیزن اور ممالک دو اعلی سطحی اینڈ پوائنٹس ہیں جو لیگ کے اختتامی نقطہ پر نقشہ بناتے ہیں۔ وہاں سے، ہمارے پاس باقی ڈیٹا موجود ہے جسے ہم پہلے ہی درجہ بندی کی میز کو آباد کرنے کے لیے استعمال کر رہے ہیں۔ لہذا، ہم کیا کرنا چاہتے ہیں ورڈپریس بلاک ایڈیٹر میں سیٹنگیں بنائیں جو ڈیٹا کو سیزن، کنٹری، اور لیگ کے لحاظ سے فلٹر کریں، پھر اس فلٹر شدہ ڈیٹا کو رینکنگ ٹیبل میں منتقل کریں۔ یہ ہمیں کسی بھی ورڈپریس صفحہ یا پوسٹ میں بلاک کو ڈراپ کرنے اور بلاک میں ڈیٹا کی مختلف حالتوں کو ظاہر کرنے کی صلاحیت فراہم کرتا ہے۔

سٹینڈنگ حاصل کرنے کے لیے، ہمیں پہلے لیگز حاصل کرنے کی ضرورت ہے۔ اور لیگز حاصل کرنے کے لیے، ہمیں پہلے ممالک اور/یا موسموں کو حاصل کرنے کی ضرورت ہے۔ آپ RapidAPI ڈیش بورڈ میں مختلف اینڈ پوائنٹس دیکھ سکتے ہیں۔

اعداد و شمار کے مختلف مجموعے ہیں جنہیں ہم درجہ بندی کو آباد کرنے کے لیے استعمال کر سکتے ہیں، اور آپ کو ترجیح ہو سکتی ہے کہ آپ کون سا ڈیٹا چاہتے ہیں۔ اس مضمون کی خاطر، ہم بلاک سیٹنگ پینل میں درج ذیل آپشنز بنانے جا رہے ہیں:

• ملک کا انتخاب کریں۔
• لیگ کا انتخاب کریں۔
• سیزن کا انتخاب کریں۔

پھر ہمارے پاس ان انتخابوں کو جمع کرنے اور متعلقہ ڈیٹا حاصل کرنے اور درجہ بندی کے جدول میں منتقل کرنے کے لیے ایک بٹن ہوگا۔

ممالک کی فہرست لوڈ اور اسٹور کریں۔

اگر ہمارے پاس منتخب کرنے کے لیے ممالک کی فہرست نہیں ہے تو ہم یہ منتخب نہیں کر سکتے کہ ہم کس ملک کے لیے ڈیٹا چاہتے ہیں۔ لہذا، ہمارا پہلا کام RapidAPI سے ممالک کی فہرست حاصل کرنا ہے۔

مثالی چیز ان ممالک کی فہرست حاصل کرنا ہے جب بلاک اصل میں صفحہ یا پوسٹ مواد میں استعمال ہوتا ہے۔ اگر بلاک استعمال میں نہیں ہے تو کچھ بھی لانے کی ضرورت نہیں ہے۔ نقطہ نظر اس سے بہت ملتا جلتا ہے جو ہم نے کیا تھا۔ پہلا مضمون، فرق یہ ہے کہ ہم ایک مختلف API اختتامی نقطہ اور مختلف صفات استعمال کر رہے ہیں تاکہ واپس کیے گئے ممالک کی فہرست کو ذخیرہ کیا جا سکے۔ ڈیٹا حاصل کرنے کے دیگر ورڈپریس طریقے ہیں، جیسے api-ftchلیکن یہ اس کے دائرہ کار سے باہر ہے جو ہم یہاں کر رہے ہیں۔

ہم یا تو ملک کی فہرست کو API ڈیٹا سے کاپی کرنے کے بعد دستی طور پر شامل کر سکتے ہیں، یا ہم ممالک کو آباد کرنے کے لیے علیحدہ API یا لائبریری استعمال کر سکتے ہیں۔ لیکن ہم جو API استعمال کر رہے ہیں پہلے سے ہی ممالک کی فہرست موجود ہے، لہذا میں صرف اس کے اختتامی نکات میں سے ایک استعمال کروں گا۔ آئیے اس بات کو یقینی بنائیں کہ جب بلاک کو صفحہ میں داخل کیا جائے یا بلاک ایڈیٹر میں مواد پوسٹ کیا جائے تو ابتدائی ملک کی فہرست لوڈ ہوتی ہے:

// 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));
}, []);

ہمارے پاس ممالک کی فہرست کو ذخیرہ کرنے کے لیے ایک ریاستی متغیر ہے۔ اگلا، ہم سے ایک جزو درآمد کرنے جا رہے ہیں @wordpress/block-editor پیکیج کہا جاتا ہے InspectorControls یہ وہ جگہ ہے جہاں ہمیں اپنے سیٹنگز کنٹرول بنانے کے لیے تمام اجزاء کی ضرورت ہوتی ہے۔

import { InspectorControls } from "@wordpress/block-editor";

پیکج کا GitHub repo وضاحت کرنے میں اچھا کام کرتا ہے۔ InspectorControls. ہماری مثال میں، ہم اسے API ڈیٹا کی ترتیبات جیسے ملک، لیگ اور سیزن کو کنٹرول کرنے کے لیے استعمال کر سکتے ہیں۔ یہاں ایک پیش نظارہ ہے تاکہ آپ کو اس UI کا اندازہ ہو جائے جو ہم بنا رہے ہیں:

اور ایک بار جب وہ انتخاب بلاک سیٹنگز میں ہو جاتے ہیں، تو ہم ان کا استعمال کرتے ہیں۔ بلاک کی Edit تقریب:

  { countriesList && (
    
  )}

یہاں، میں اس بات کو یقینی بنا رہا ہوں کہ ہم مشروط رینڈرنگ استعمال کر رہے ہیں تاکہ فنکشن صرف جز کو لوڈ کرے۔ کے بعد ممالک کی فہرست بھری ہوئی ہے۔ اگر آپ اس کے بارے میں سوچ رہے ہیں۔ LeagueSettings component، یہ ایک اپنی مرضی کا جزو ہے جسے میں نے الگ سے بنایا ہے۔ components بلاک میں ذیلی فولڈر تاکہ ہمارے پاس صاف ستھرا اور زیادہ منظم ہوسکے۔ Edit ایک فائل میں ڈیل کرنے کے لیے ملکی ڈیٹا کی سینکڑوں لائنوں کے بجائے فنکشن۔

ہم اسے میں درآمد کر سکتے ہیں۔ edit.js اس طرح فائل:

import { LeagueSettings } from "./components/LeagueSettings";

اگلا، ہم مطلوبہ پروپس کو پاس کر رہے ہیں۔ LeagueSettings والدین کی طرف سے جزو Edit جزو تاکہ ہم ریاستی متغیرات اور صفات تک رسائی حاصل کر سکیں LeagueSettings بچے کا جزو. ہم اسے دوسرے طریقوں سے بھی کر سکتے ہیں۔ سیاق و سباق API پروپ ڈرلنگ سے بچنے کے لیے، لیکن ہمارے پاس جو کچھ ہے وہ اس کے لیے بالکل موزوں ہے جو ہم کر رہے ہیں۔

کے دوسرے حصے Edit فنکشن کو اجزاء میں بھی تبدیل کیا جا سکتا ہے۔ مثال کے طور پر، لیگ سٹینڈنگ کوڈ کو ایک الگ جزو کے اندر رکھا جا سکتا ہے — جیسے شاید LeagueTable.js - اور پھر اسی طرح درآمد کیا جیسے ہم نے درآمد کیا تھا۔ LeagueSettings میں Edit تقریب.

کے اندر LeagueSettings.js سنچکا

LeagueSettings بالکل دوسرے کی طرح ہے رد عمل کا جزو جس سے ہم بنیادی جزو سے پرپس کو تباہ کر سکتے ہیں۔ میں تین ریاستی متغیرات اور ایک اضافی استعمال کرنے جا رہا ہوں۔ leagueID بیان کریں کیونکہ ہم سے ID نکالنے جا رہے ہیں۔ 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 جزو یا a ComboBoxControl، جسے دستاویزات "a کا ایک بہتر ورژن کے طور پر بیان کرتے ہیں۔ SelectControl، تلاش کے ان پٹ کا استعمال کرتے ہوئے اختیارات تلاش کرنے کے قابل ہونے کے ساتھ۔ یہ ہمارے لیے اچھا ہے کیونکہ ممالک کی فہرست کافی لمبی ہو سکتی ہے اور صارفین یا تو تلاش کا سوال کر سکیں گے یا فہرست میں سے انتخاب کر سکیں گے۔

یہاں ایک مثال ہے کہ کس طرح a ComboboxControl ہمارے ملک کی فہرست کے لئے کام کر سکتے ہیں:

 handleCountryChange(value) }
  onInputChange={ (inputValue) => {
    setFilteredCountryOptions(
      setupCountrySelect.filter((option) =>
        option.label
          .toLowerCase()
          .startsWith(inputValue.toLowerCase())
      )
    );
  }}
/>

۔ ComboboxControl اس لحاظ سے قابل ترتیب ہے کہ ہم کنٹرول کے لیبل اور اقدار کے لیے مختلف سائز کا اطلاق کر سکتے ہیں:

{
  value: 'small',
  label: 'Small',
},

لیکن ہمارا API ڈیٹا اس نحو میں نہیں ہے، لہذا ہم تبدیل کر سکتے ہیں۔ 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);

دیگر ترتیبات کے اختیارات کے بارے میں کیا خیال ہے؟

میں وہ کوڈ دکھاؤں گا جو میں نے دوسری سیٹنگز کے لیے استعمال کیا تھا لیکن یہ صرف عام کیسز کو مدنظر رکھتے ہوئے خاص کیسز کے لیے غلطیوں کی وضاحت کرتا ہے۔ مثال کے طور پر، کچھ ممالک اور لیگز میں غلطیاں ہوں گی کیونکہ:

• کچھ لیگز کے لیے کوئی سٹینڈنگ نہیں ہے، اور
• کچھ لیگ کی سٹینڈنگ ہے لیکن وہ ایک ٹیبل پر نہیں ہیں۔

یہ جاوا اسکرپٹ یا ری ایکٹ ٹیوٹوریل نہیں ہے، اس لیے میں آپ کو API کے لیے خصوصی معاملات کو سنبھالنے دوں گا جسے آپ استعمال کرنے کا ارادہ رکھتے ہیں:

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);
}

ترتیبات کے انتخاب کو جمع کرانا

میں آخری آرٹیکل، ہم نے بلاک ایڈیٹر میں ایک بٹن بنایا ہے جو API سے تازہ ڈیٹا حاصل کرتا ہے۔ اب اس کی مزید ضرورت نہیں ہے کہ ہمارے پاس ترتیبات ہیں۔ ٹھیک ہے، ہمیں اس کی ضرورت ہے - صرف اس جگہ نہیں جہاں یہ فی الحال ہے۔ بلاک ایڈیٹر میں پیش کردہ بلاک میں براہ راست رکھنے کے بجائے، ہم اسے اپنے 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 && (
         getData()}>Fetch data
      )
    }
    
  
)}

یہاں نتیجہ ہے!

ہم اپنے بلاک کے ساتھ بہت اچھی جگہ پر ہیں۔ ہم اسے بلاک ایڈیٹر اور سائٹ کے فرنٹ اینڈ میں رینڈر کر سکتے ہیں۔ ہم ڈیٹا کو فلٹر کرنے والی ترتیبات کے انتخاب کی بنیاد پر ایک بیرونی API سے ڈیٹا حاصل کر سکتے ہیں۔ یہ کافی کامل ہے!

لیکن ایک اور چیز ہے جس سے ہمیں نمٹنا ہے۔ ابھی، جب ہم بلاک پر مشتمل صفحہ یا پوسٹ کو محفوظ کرتے ہیں، تو ہم نے بلاک کے لیے جو سیٹنگیں منتخب کی ہیں وہ دوبارہ ترتیب دیں۔ دوسرے الفاظ میں، وہ انتخاب کہیں بھی محفوظ نہیں ہیں۔ ان انتخابوں کو مستقل بنانے کے لیے تھوڑا اور کام ہے۔ اسی جگہ ہم اگلے مضمون میں جانے کا ارادہ رکھتے ہیں، اس لیے دیکھتے رہیں۔