Blok Düzenleyicide Özel WordPress Bloğu İçin Ayarları Kaydetme

Bu seride pek çok şey başardık! Harici bir API'den veri alan ve bunu ön uçta işleyen özel bir WordPress bloğu oluşturduk. Daha sonra bu çalışmayı aldık ve verileri doğrudan WordPress blok düzenleyicisinde işlenecek şekilde genişlettik. Bundan sonra, WordPress'teki bileşenleri kullanarak blok için bir ayarlar kullanıcı arayüzü oluşturduk. InspectorControls paket.

Ele almamız gereken son bir nokta var, o da ayar seçeneklerini kaydetmek. Geçen makaleden hatırlarsak, teknik olarak seçimlerimizi blok ayarları arayüzünde "kaydedebiliyoruz", ancak bunlar aslında hiçbir yerde saklanmıyor. Birkaç seçim yapıp bunları kaydedip ardından gönderiye dönersek ayarlar tamamen sıfırlanır.

Döngüyü kapatalım ve bu ayarları kaydedelim, böylece özel bloğumuzu içeren bir gönderiyi bir daha düzenlediğimizde bu ayarlar devam etsin!

Ayarlar nitelikleri kaydediliyor

Bize şunları sağlayan bir API ile çalışıyoruz: Futbol futbol takımı sıralaması ve bunu ülkeye, lige ve sezona göre sıralamaları görüntülemek için kullanıyoruz. Bunların her biri için aşağıdaki gibi yeni özellikler oluşturabiliriz:

// index.js

attributes: {
  data: {
    type: "object",
  },
  settings: {
    type: "object",
    default: {
      country: {
        type: "string",
      },
      league: {
        type: "string",
      },
      season: {
        type: "string",
      },
    },
  },
},

Daha sonra nitelikleri ayarlamamız gerekiyor. LeagueSettings.js. ne zaman bir ComboboxControl ayarlar kullanıcı arayüzümüzde güncellendiğinde, özellikleri kullanarak ayarlamamız gerekir. setAttributes() yöntem. Yalnızca tek bir veri uç noktasıyla çalışırken bu daha kolaydı. Ancak artık birden fazla girdimiz olduğundan, bu biraz daha karmaşık.

Bu şekilde organize edeceğim. İçinde yeni bir nesne yaratacağım LeagueSettings.js Bu, ayar özniteliklerinin ve değerlerinin yapısını takip eder.

// LeagueSettings.js

let localSettings = {
  country: attributes.settings.country,
  league: attributes.settings.league,
  season: attributes.settings.season,
};

Ayrıca başlangıç ​​durumu değişkenlerini de değiştireceğim. null ilgili ayar değişkenlerine.

// LeagueSettings.js

const [country, setCountry] = useState(attributes.settings.country);
const [league, setLeague] = useState(attributes.settings.league);
const [season, setSeason] = useState(attributes.settings.season);

Her birinde handle______Change(), bir oluşturacağım setLocalAttributes() öncekini kopyalayan ve üzerine yazan bir argümanı olan localSettings yeni ülke, lig ve sezon değerleriyle itiraz edin. Bu, yayılma operatörünün yardımıyla yapılır.

// LeagueSettings.js

function handleCountryChange(value) {
  // Initial code
  setLocalAttributes({ ...localSettings, country: value });
  // Rest of the code
}

function handleLeagueChange(value) {
  // Initial code
  setLocalAttributes({ ...localSettings, league: value });
  // Rest of the code
}

function handleSeasonChange(value) {
  // Initial code
  setLocalAttributes({ ...localSettings, season: value });
  // Rest of the code
}

tanımlayabiliriz setLocalAttributes() bunun gibi:

// LeagueSettings.js

function setLocalAttributes(value) {
  let newSettings = Object.assign(localSettings, value);
  localSettings = { ...newSettings };
  setAttributes({ settings: localSettings });
}

Yani, kullanıyoruz Object.assign() iki nesneyi birleştirmek için. Daha sonra klonlayabiliriz newSettings geri itiraz localSettings çünkü yeni bir seçim yapıldığında ve bir değişiklik meydana geldiğinde her ayar özelliğini de hesaba katmamız gerekir.

Son olarak, kullanabiliriz setAttributes() normalde son nesneyi ayarlamak için yaptığımız gibi. Kullanıcı arayüzündeki seçimleri güncelleyerek yukarıdaki özelliklerin değişip değişmediğini doğrulayabilirsiniz.

Onaylamanın başka bir yolu da nitelikleri bulmak için DevTools'ta console.log() işlemi yapmaktır.

Şu ekran görüntüsüne daha yakından bakın. Değerler şurada saklanır attributes.settings. Bunun gerçekleştiğini canlı olarak görebiliyoruz çünkü React, ayarlarda her değişiklik yaptığımızda yeniden görüntüleniyor. useState() kancası.

Blok ayarları kullanıcı arayüzündeki değerlerin görüntülenmesi

Her biri diğer ayar değerine bağlı olduğundan (örn. lige göre sıralama hangi sezonun seçildiğine bağlıdır), ayar değerlerini kontrol seçeneklerinde saklamak pek kullanışlı değildir. Ancak ayar değerlerinin statik olduğu ve ayarların birbirinden bağımsız olduğu durumlarda oldukça kullanışlıdır.

Mevcut ayarları karmaşık hale getirmeden, ayarlar panelinin içinde mevcut özellikleri gösteren başka bir bölüm oluşturabiliriz. Ayar değerlerini görüntüleme yönteminizi seçebilirsiniz ancak ben bir Tip bileşen itibaren @wordpress/components paketi:

// LeagueSettings.js
import { Tip } from "@wordpress/components";

Buradayken değerleri ekranda göstermeden önce koşullu bir kontrol yapacağım. Tip bileşen:

  {country && league && season && (
    
      
Current Settings: 
      

        

          Country: {attributes.settings.country}
        
        

          League: {attributes.settings.league}
        
        

          Season: {attributes.settings.season}
        
      
    
  )}

Blok düzenleyicide bunun nasıl çalıştığı aşağıda açıklanmıştır:

API verileri, her seferinde manuel olarak güncellemeye gerek kalmadan canlı veriler gösterilebildiğinde daha güçlü olur. Bu serinin bir sonraki bölümünde buna bakacağız.