إنشاء واجهة مستخدم الإعدادات لقالب WordPress المخصص

حتى الآن ، قمنا بتغطية كيفية العمل مع البيانات من واجهة برمجة تطبيقات خارجية في قالب WordPress مخصص. مشينا من خلال عملية جلب تلك البيانات لاستخدامها في الواجهة الأمامية في موقع WordPress وكيفية ذلك قم بعرضه مباشرة في محرر قوالب WordPress عند وضع الكتلة في المحتوى. هذه المرة ، سنقوم بربط هاتين المقالتين عن طريق الربط بلوحة تحكم محرر الكتلة لإنشاء واجهة مستخدم إعدادات للكتلة التي أنشأناها.

أنت تعرف لوحة التحكم التي أشير إليها ، أليس كذلك؟ إنها تلك اللوحة الموجودة على اليمين التي تحتوي على إعدادات النشر والحظر في محرر الكتلة.

ترى تلك المنطقة المظللة باللون الأحمر؟ هذه لوحة التحكم. تم تحديد مجموعة فقرة حاليًا ويتم عرض الإعدادات الخاصة بها في اللوحة. يمكننا تغيير الأنماط واللون والطباعة ... عدد من الأشياء!

حسنًا ، هذا بالضبط ما نفعله هذه المرة. سنقوم بإنشاء عناصر التحكم لإعدادات مجموعة تصنيفات كرة القدم التي عملنا عليها في آخر مقالتين. في المرة الأخيرة ، أنشأنا زرًا في مجموعتنا يجلب البيانات الخارجية لتصنيفات كرة القدم. لقد عرفنا بالفعل عنوان URL ونقاط النهاية التي نحتاجها. ولكن ماذا لو أردنا جلب الترتيب لدولة مختلفة؟ أو ربما دوري مختلف؟ ماذا عن البيانات من موسم مختلف؟

نحن بحاجة إلى شكل ضوابط للقيام بذلك. يمكننا الاستفادة من مكونات React التفاعلية - مثل رد فعل التحديد - لتصفح خيارات API المختلفة المتاحة لتحليل تلك البيانات. ولكن ليست هناك حاجة لذلك نظرًا لأن WordPress يأتي بمجموعة من المكونات الأساسية التي نربطها مباشرة!

• توثيق لهذه المكونات - يسمى InspectorControls - يتحسن في دليل محرر قوالب ووردبريس. سيتحسن ذلك بمرور الوقت ، لكن في الوقت نفسه ، لدينا أيضًا وورد جوتنبرج Storybook و مكونات ووردبريس جوتنبرج مواقع للحصول على مساعدة إضافية.

هندسة API

قبل ربط أي شيء ، من الجيد تحديد ما نحتاجه في المقام الأول. لقد حددت بنية بيانات RapidAPI التي نحضرها حتى نعرف ما هو متاح لنا:

الفصول والبلدان هما نقطتا نهاية المستوى الأعلى ترسمان نقطة نهاية البطولات. من هناك ، لدينا بقية البيانات التي نستخدمها بالفعل لملء جدول الترتيب. لذا ، ما نريد القيام به هو إنشاء إعدادات في محرر قوالب WordPress الذي يقوم بتصفية البيانات حسب الموسم والبلد والدوري ، ثم تمرير تلك البيانات التي تمت تصفيتها إلى جدول التصنيف. يمنحنا ذلك القدرة على إسقاط الحظر في أي صفحة WordPress أو نشر وعرض أشكال مختلفة من البيانات في الكتلة.

من أجل الحصول على الترتيب ، نحتاج أولاً إلى الحصول على الدوريات. ومن أجل الحصول على الدوريات ، نحتاج أولاً إلى تحديد البلدان و / أو المواسم. يمكنك عرض نقاط النهاية المختلفة في لوحة معلومات RapidAPI.

هناك مجموعات مختلفة من البيانات التي يمكننا استخدامها لملء التصنيفات ، وقد يكون لديك تفضيل للبيانات التي تريدها. من أجل هذه المقالة ، سننشئ الخيارات التالية في لوحة إعدادات الحظر:

• اختر البلد
• اختر الدوري
• اختر الموسم

ثم سيكون لدينا زر لإرسال هذه التحديدات وجلب البيانات ذات الصلة وتمريرها إلى جدول التصنيف.

قم بتحميل وتخزين قائمة البلدان

لا يمكننا تحديد البلد الذي نريد بيانات عنه إذا لم يكن لدينا قائمة بالبلدان للاختيار من بينها. لذا ، فإن مهمتنا الأولى هي الحصول على قائمة البلدان من RapidAPI.

الشيء المثالي هو جلب قائمة البلدان عندما يتم استخدام الحظر فعليًا في الصفحة أو محتوى المنشور. ليست هناك حاجة لجلب أي شيء إذا لم تكن الكتلة قيد الاستخدام. النهج مشابه جدًا لما فعلناه المقال الأول، الاختلاف هو أننا نستخدم نقطة نهاية مختلفة لواجهة برمجة التطبيقات وسمات مختلفة لتخزين قائمة البلدان المرتجعة. هناك طرق WordPress أخرى لجلب البيانات ، مثل جلب واجهة برمجة التطبيقات، لكن هذا خارج نطاق ما نفعله هنا.

يمكننا إما تضمين قائمة البلدان يدويًا بعد نسخها من بيانات واجهة برمجة التطبيقات ، أو يمكننا استخدام واجهة برمجة تطبيقات أو مكتبة منفصلة لملء البلدان. لكن واجهة برمجة التطبيقات التي نستخدمها تحتوي بالفعل على قائمة بالدول ، لذا سأستخدم إحدى نقاط النهاية الخاصة بها. دعنا نتأكد من تحميل قائمة البلدان الأولية عند إدراج الحظر في الصفحة أو نشر محتوى في محرر الكتلة:

// 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";

الحزمة جيثب ريبو يقوم بعمل جيد في التوضيح InspectorControls. في مثالنا ، يمكننا استخدامه للتحكم في إعدادات بيانات واجهة برمجة التطبيقات مثل الدولة والدوري والموسم. إليك معاينة حتى تحصل على فكرة عن واجهة المستخدم التي نصنعها:

وبمجرد إجراء هذه التحديدات في إعدادات الحظر ، فإننا نستخدمها في الكتلة Edit وظيفة:

  { countriesList && (
    
  )}

هنا ، أتأكد من أننا نستخدم العرض الشرطي بحيث تقوم الوظيفة بتحميل المكون فقط بعد يتم تحميل قائمة البلدان. إذا كنت تتساءل عن ذلك LeagueSettings المكون ، هو مكون مخصص قمت بإنشائه في ملف components مجلد فرعي في الكتلة حتى نتمكن من الحصول على أكثر نظافة وتنظيمًا Edit تعمل بدلاً من مئات الأسطر من بيانات الدولة للتعامل معها في ملف واحد.

يمكننا استيراده إلى ملف edit.js ملف مثل هذا:

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

بعد ذلك ، نقوم بتمرير الدعائم المطلوبة إلى ملف LeagueSettings مكون من الوالد Edit المكون حتى نتمكن من الوصول إلى متغيرات الحالة والسمات من LeagueSettings مكون تابع. يمكننا أيضًا القيام بذلك باستخدام طرق أخرى مثل API السياق لتجنب الحفر بالدعامة ، ولكن ما لدينا الآن مناسب تمامًا لما نقوم به.

الأجزاء الأخرى من 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())
      )
    );
  }}
/>

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

ماذا عن خيارات الإعدادات الأخرى؟

سأعرض الكود الذي استخدمته للإعدادات الأخرى ولكن كل ما يفعله هو مراعاة الحالات العادية أثناء تحديد الأخطاء للحالات الخاصة. على سبيل المثال ، ستكون هناك أخطاء في بعض البلدان والاتحادات للأسباب التالية:

• لا توجد ترتيب لبعض الدوريات ، و
• بعض الدوريات لها ترتيب لكنها ليست في جدول واحد.

هذا ليس برنامج تعليمي JavaScript أو React ، لذا سأسمح لك بالتعامل مع الحالات الخاصة لواجهة برمجة التطبيقات التي تخطط لاستخدامها:

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 && (
         getData()}>Fetch data
      )
    }
    
  
)}

ها هي النتيجة!

نحن في مكان جيد للغاية مع مجموعتنا. يمكننا عرضها في محرر الكتلة والواجهة الأمامية للموقع. يمكننا جلب البيانات من واجهة برمجة تطبيقات خارجية بناءً على مجموعة مختارة من الإعدادات التي أنشأناها لتصفية البيانات. انها جميلة الرتق وظيفية!

لكن هناك شيء آخر علينا معالجته. في الوقت الحالي ، عندما نحفظ الصفحة أو المنشور الذي يحتوي على الكتلة ، فإن الإعدادات التي حددناها لإعادة تعيين الكتلة. بمعنى آخر ، لا يتم حفظ هذه التحديدات في أي مكان. هناك المزيد من العمل لجعل هذه التحديدات مستمرة. هذا هو المكان الذي نخطط للذهاب إليه في المقالة التالية ، لذا ترقبوا.