Özel WordPress Bloğu için Ayarlar Kullanıcı Arayüzü Oluşturma

Şu ana kadar özel bir WordPress bloğunda harici bir API'den gelen verilerle nasıl çalışılacağını ele aldık. Süreç boyunca yürüdük bu verileri ön uçta kullanmak üzere getirmek Bir WordPress sitesinin kurulumu ve nasıl yapılacağı doğrudan WordPress Blok Düzenleyicide oluşturun bloğu içeriğe yerleştirirken. Bu sefer, yaptığımız blok için bir ayarlar kullanıcı arayüzü oluşturmak üzere blok düzenleyicinin kontrol paneline bağlanarak bu iki makale arasında köprü kuracağız.

Bahsettiğim kontrol panelini biliyorsunuz, değil mi? Blok düzenleyicideki gönderi ve blok ayarlarını içeren sağdaki paneldir.

Kırmızıyla vurgulanan alanı görüyor musun? Bu kontrol paneli. Şu anda bir Paragraf bloğu seçilidir ve bunun ayarları panelde görüntülenir. Stilleri, rengi, tipografiyi… birçok şeyi değiştirebiliriz!

Bu sefer tam olarak bunu yapıyoruz. Son iki yazımızda üzerinde çalıştığımız Futbol Sıralaması bloğunun ayarlarına ilişkin kontrolleri oluşturacağız. Geçen sefer bloğumuza futbol sıralamaları için harici verileri getiren bir buton yaptık. İhtiyacımız olan URL'yi ve uç noktaları zaten biliyorduk. Peki ya farklı bir ülkenin sıralamasını getirmek istersek? Ya da belki farklı bir lig? Farklı bir sezonun verilerine ne dersiniz?

Bunu yapmak için form kontrollerine ihtiyacımız var. Etkileşimli React bileşenlerinden yararlanabiliriz; React-Select — söz konusu verileri ayrıştırmak için kullanılabilen çeşitli API seçeneklerine göz atmak için. Ancak buna gerek yok çünkü WordPress doğrudan bağladığımız bir dizi temel bileşenle birlikte geliyor!

The belgeleme bu bileşenler için - adı verilen InspectorControls - giderek iyileşiyor WordPress Blok Düzenleyici El Kitabı. Bu zamanla daha da iyi olacak, ama bu arada, biz de WordPress Gutenberg Hikaye Kitabı ve WordPress Gutenberg Bileşenleri Ek yardım için siteler.

API mimarisi

Herhangi bir şeye bağlanmadan önce neye ihtiyacımız olduğunu belirlemek iyi bir fikirdir. Aldığımız RapidAPI verilerinin yapısının haritasını çıkardım, böylece nelerin mevcut olduğunu biliyoruz:

Sezonlar ve ülkeler, bir ligin uç noktasıyla eşlenen iki üst düzey uç noktadır. Buradan, sıralama tablosunu doldurmak için halihazırda kullandığımız verilerin geri kalanına sahibiz. Yani yapmak istediğimiz şey, WordPress Blok Düzenleyicisinde verileri Sezon, Ülke ve Lige göre filtreleyen ayarlar oluşturmak ve ardından filtrelenen verileri sıralama tablosuna aktarmaktır. Bu bize bloğu herhangi bir WordPress sayfasına bırakma veya bloktaki verilerin varyasyonlarını yayınlama ve görüntüleme olanağı sağlar.

Sıralamada yer alabilmemiz için önce liglere çıkmamız gerekiyor. Ligleri alabilmek için öncelikle ülkeleri ve/veya sezonları almamız gerekiyor. RapidAPI kontrol panelinde çeşitli uç noktaları görüntüleyebilirsiniz.

Sıralamaları doldurmak için kullanabileceğimiz farklı veri kombinasyonları vardır ve hangi verileri istediğinizi tercih edebilirsiniz. Bu makalenin amacına uygun olarak blok ayarları panelinde aşağıdaki seçenekleri oluşturacağız:

• Ülke seç
• Lig Seç
• Sezonu Seçin

Daha sonra bu seçimleri göndermek, ilgili verileri almak ve bunları sıralama tablosuna aktarmak için bir düğmemiz olacak.

Ülke listesini yükleyin ve saklayın

Aralarından seçim yapabileceğimiz bir ülke listemiz yoksa, hangi ülkeye ait verileri istediğimizi seçemeyiz. Bu yüzden ilk görevimiz RapidAPI'den ülkelerin bir listesini almak.

İdeal olan, blok sayfada veya gönderi içeriğinde gerçekten kullanıldığında ülkelerin listesini getirmektir. Blok kullanımda değilse hiçbir şey getirmenize gerek yoktur. Yaklaşım bizim yaptığımıza çok benziyor. ilk makalearadaki fark, döndürülen ülkelerin listesini depolamak için farklı bir API uç noktası ve farklı özellikler kullanıyor olmamızdır. Veri almanın başka WordPress yolları da var, örneğin API-getirme, ancak bu, burada yaptığımız işin kapsamı dışındadır.

Ülke listesini API verilerinden kopyaladıktan sonra manuel olarak ekleyebiliriz veya ülkeleri doldurmak için ayrı bir API veya kütüphane kullanabiliriz. Ancak kullandığımız API'nin zaten bir ülke listesi var, bu yüzden uç noktalarından yalnızca birini kullanırdım. Blok sayfaya eklendiğinde veya blok düzenleyicide içerik yayınlandığında ilk ülke listesinin yüklendiğinden emin olalım:

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

Ülke listesini saklamak için bir durum değişkenimiz var. Daha sonra, bir bileşeni içe aktaracağız. @wordpress/block-editor paket aradı InspectorControls ayar kontrollerimizi oluşturmak için ihtiyaç duyduğumuz tüm bileşenlerin bulunduğu yerdir.

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

Paketin GitHub repo açıklamakta iyi iş çıkarıyor InspectorControls. Örneğimizde Ülke, Lig ve Sezon gibi API veri ayarlarını kontrol etmek için kullanabiliriz. Yaptığımız kullanıcı arayüzü hakkında fikir sahibi olmanız için işte bir önizleme:

Blok ayarlarında bu seçimler yapıldıktan sonra bunları kullanırız. bloğun Edit işlev:

  { countriesList && (
    
  )}

Burada, işlevin yalnızca bileşeni yüklemesi için koşullu oluşturmayı kullandığımızdan emin oluyorum. sonra ülkelerin listesi yüklendi. Eğer bunu merak ediyorsan LeagueSettings bileşen, ayrı bir dosyada oluşturduğum özel bir bileşendir components daha temiz ve daha organize olabilmemiz için bloktaki alt klasörü Edit Yüzlerce satırlık ülke verilerinin tek bir dosyada işlenmesi yerine işlev görür.

Bunu içe aktarabiliriz edit.js bunun gibi dosya:

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

Daha sonra gerekli malzemeleri sunucuya iletiyoruz. LeagueSettings ebeveynden gelen bileşen Edit bileşenden durum değişkenlerine ve niteliklerine erişebilmemiz için LeagueSettings çocuk bileşeni. Bunu diğer yöntemlerle de yapabiliriz. Bağlam API'sı pervane delmesini önlemek için, ancak şu anda sahip olduğumuz şey yaptığımız işe tamamen uygun.

diğer bölümleri Edit fonksiyon aynı zamanda bileşenlere de dönüştürülebilir. Örneğin, lig sıralaması kodu ayrı bir bileşenin içine yerleştirilebilir - mesela belki LeagueTable.js - ve sonra tıpkı içe aktardığımız gibi içe aktardık LeagueSettings içine Edit fonksiyonu.

İç LeagueSettings.js dosya

LeagueSettings tıpkı bir başkası gibi Tepki bileşeni buradan sahne donanımlarını ana bileşenden yok edebiliriz. Üç durum değişkeni ve ek olarak kullanacağım leagueID durumu çünkü kimliği buradan çıkaracağız league nesne:

const [country, setCountry] = useState(null);
const [league, setLeague] = useState(null);
const [season, setSeason] = useState(null);
const [leagueID, setLeagueID] = useState(null);

Yapacağımız ilk şey ithalat yapmak olacak. PanelBody @wordpress/block-editor paketindeki bileşen:

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

…ve bunu listemize dahil edin return işlevi:

Var diğer panel etiketleri ve nitelikleri — bunları kullanmak sadece benim kişisel tercihim. Diğerlerinin hiçbirine gerek yok… ama tüm bileşenlere bakın Bir ayarlar paneli oluşturmaya hazırız! Sadeliği seviyorum PanelBody kullanım durumumuz için. Bloğun açılır ayarlarını ortaya çıkarmak için genişler ve daraltılır, hepsi bu.

Bahsi geçmişken, bu seçimler için yapmamız gereken bir seçim var. şunu kullanabiliriz: SelectControl bileşen veya bir ComboBoxControldokümanların "gelişmiş bir versiyonu" olarak tanımladığı SelectControlbir arama girişi kullanarak seçenekleri arayabilmenin yanı sıra." Bu bizim için güzel çünkü ülke listesi oldukça uzun olabilir ve kullanıcılar bir arama sorgusu yapabilir veya listeden seçim yapabilir.

İşte nasıl bir örnek ComboboxControl ülke listemiz için işe yarayabilir:

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

The ComboboxControl kontrolün etiketi ve değerleri için farklı boyutlandırma uygulayabileceğimiz şekilde yapılandırılabilir:

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

Ancak API verilerimiz bu sözdiziminde değil, dolayısıyla dönüştürebiliriz countriesList blok dahil edildiğinde ana bileşenden gelen dizi:

let setupCountrySelect;

setupCountrySelect = countriesList.map((country) => {
  return {
    label: country.name,
    value: country.name,
  };
});

Bir ülke seçildiğinde ComboboxControl, ülke değeri değişir ve verileri buna göre filtreleriz:

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

Ülke seçimi değiştiğinde değişiklikleri işlemek için üç durum değişkeni daha kullandığımı unutmayın:

const [filteredCountryOptions, setFilteredCountryOptions] = useState(setupCountrySelect);
const [filteredLeagueOptions, setFilteredLeagueOptions] = useState(null);
const [filteredSeasonOptions, setFilteredSeasonOptions] = useState(null);

Peki ya diğer ayar seçenekleri?

Diğer ayarlar için kullandığım kodu göstereceğim ama yaptığı tek şey, özel durumlar için hataları tanımlarken normal durumları hesaba katmak. Örneğin bazı ülkelerde ve liglerde hatalar olacaktır çünkü:

• Bazı liglerde sıralama yok ve
• Bazı liglerin sıralamaları var ama tek bir tabloda değiller.

Bu bir JavaScript veya React eğitimi değil, dolayısıyla kullanmayı planladığınız API'ye ilişkin özel durumları halletmenize izin vereceğim:

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

Ayar seçimlerini gönderme

içinde son makale, blok düzenleyicide API'den yeni veriler getiren bir düğme yaptık. Artık ayarlarımız olduğuna göre buna gerek yok. Evet, buna ihtiyacımız var; ancak şu anda olduğu yerde değil. Bunu doğrudan blok düzenleyicide oluşturulan bloğun içinde bulundurmak yerine, onu kendi klasörümüze taşıyacağız. PanelBody Ayarlar seçimlerini göndermek için bileşen.

Yani, geri dön 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
      )
    }
    
  
)}

İşte sonuç!

Bloğumuzla çok iyi bir yerdeyiz. Bunu blok düzenleyicide ve sitenin ön ucunda oluşturabiliriz. Verileri filtreleyen oluşturduğumuz ayar seçimine dayalı olarak harici bir API'den veri getirebiliriz. Oldukça işlevsel!

Ama halletmemiz gereken başka bir konu var. Şu anda bloğun bulunduğu sayfayı veya gönderiyi kaydettiğimizde blok için seçtiğimiz ayarlar sıfırlanıyor. Yani bu seçimler hiçbir yere kaydedilmiyor. Bu seçimleri kalıcı kılmak için biraz daha çalışmamız gerekiyor. Bir sonraki makalede buna değinmeyi planlıyoruz, bu yüzden bizi izlemeye devam edin.