ब्लॉक एडिटर में कस्टम वर्डप्रेस ब्लॉक के लिए सेटिंग्स सेव करना

हमने इस श्रृंखला में बहुत कुछ हासिल किया है! हमने एक कस्टम वर्डप्रेस ब्लॉक बनाया है जो बाहरी एपीआई से डेटा प्राप्त करता है और इसे फ्रंट एंड पर रेंडर करता है। फिर हमने उस काम को लिया और उसे बढ़ाया ताकि डेटा भी सीधे वर्डप्रेस ब्लॉक एडिटर में रेंडर हो सके। उसके बाद, हमने वर्डप्रेस के घटकों का उपयोग करके ब्लॉक के लिए एक सेटिंग यूआई बनाया InspectorControls पैकेज.

हमारे लिए कवर करने के लिए एक आखिरी बिट है और वह सेटिंग विकल्पों को सहेज रहा है। यदि हम पिछले लेख से याद करते हैं, तो हम तकनीकी रूप से ब्लॉक सेटिंग्स UI में हमारे चयन को "सहेजने" में सक्षम हैं, लेकिन वे वास्तव में कहीं भी संग्रहीत नहीं होते हैं। यदि हम कुछ चयन करते हैं, तो उन्हें सहेजें, फिर पोस्ट पर वापस लौटें, सेटिंग्स पूरी तरह से रीसेट हो गई हैं।

आइए लूप को बंद करें और उन सेटिंग्स को सहेजें ताकि अगली बार जब हम अपने कस्टम ब्लॉक वाले पोस्ट को संपादित करें तो वे बने रहें!

सेटिंग विशेषताओं को सहेजना

हम एक एपीआई के साथ काम कर रहे हैं जो हमें प्रदान करता है फुटबॉल फुटबॉल टीम रैंकिंग और हम इसका उपयोग देश, लीग और सीज़न के आधार पर रैंकिंग प्रदर्शित करने के लिए कर रहे हैं। हम उनमें से प्रत्येक के लिए इस तरह की नई विशेषताएँ बना सकते हैं:

// index.js

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

इसके बाद, हमें विशेषताओं को सेट करने की आवश्यकता है LeagueSettings.js. जब भी ComboboxControl हमारी सेटिंग्स UI में अपडेट किया गया है, हमें इसका उपयोग करके विशेषताओं को सेट करने की आवश्यकता है setAttributes() तरीका। जब हम केवल एक डेटा समापन बिंदु के साथ काम कर रहे थे तो यह अधिक सीधा था। लेकिन अब हमारे पास कई इनपुट हैं, यह थोड़ा और शामिल है।

मैं इसे इस तरह आयोजित करने जा रहा हूं। मैं एक नई वस्तु बनाने जा रहा हूं LeagueSettings.js जो सेटिंग्स विशेषताओं और उनके मूल्यों की संरचना का अनुसरण करता है।

// LeagueSettings.js

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

मैं प्रारंभिक अवस्था चर को भी बदलने जा रहा हूँ null संबंधित सेटिंग्स चर के लिए।

// LeagueSettings.js

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

प्रत्येक में handle______Change(), मैं एक बनाने जा रहा हूँ setLocalAttributes() इसमें एक तर्क है जो पिछले को क्लोन और ओवरराइट करता है localSettings नए देश, लीग और सीज़न मूल्यों के साथ वस्तु। यह स्प्रेड ऑपरेटर की मदद से किया जाता है।

// 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
}

हम परिभाषित कर सकते हैं setLocalAttributes() इस तरह:

// LeagueSettings.js

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

तो, हम प्रयोग कर रहे हैं Object.assign() दो वस्तुओं को मिलाने के लिए। तब हम क्लोन कर सकते हैं newSettings वापस करने के लिए आपत्ति localSettings क्योंकि जब कोई नया चयन किया जाता है और कोई परिवर्तन होता है तो हमें प्रत्येक सेटिंग विशेषता के लिए भी खाते की आवश्यकता होती है।

अंत में, हम उपयोग कर सकते हैं setAttributes() जैसा कि हम आम तौर पर अंतिम वस्तु को सेट करने के लिए करते हैं। आप यूआई में चयनों को अपडेट करके पुष्टि कर सकते हैं कि उपरोक्त विशेषताएँ बदल रही हैं या नहीं।

पुष्टि करने का दूसरा तरीका यह है कि विशेषताओं को खोजने के लिए DevTools में एक कंसोल.लॉग () करें।

उस स्क्रीनशॉट को करीब से देखें। में मान रखे जाते हैं attributes.settings. हम इसे लाइव होते हुए देख सकते हैं क्योंकि जब भी हम सेटिंग्स में बदलाव करते हैं तो रिएक्ट फिर से प्रस्तुत करता है, इसके लिए धन्यवाद useState() हुक।

ब्लॉक सेटिंग UI में मान प्रदर्शित करना

नियंत्रण विकल्पों में स्वयं सेटिंग मूल्यों को संग्रहीत करना बहुत उपयोगी नहीं है क्योंकि प्रत्येक दूसरे सेटिंग मूल्य पर निर्भर है (उदाहरण के लिए लीग द्वारा रैंकिंग इस बात पर निर्भर करती है कि किस मौसम का चयन किया गया है)। लेकिन यह उन स्थितियों में बहुत उपयोगी है जहां सेटिंग्स मान स्थिर हैं और जहां सेटिंग्स एक दूसरे से स्वतंत्र हैं।

वर्तमान सेटिंग्स को जटिल बनाए बिना, हम सेटिंग पैनल के अंदर एक और सेक्शन बना सकते हैं जो वर्तमान विशेषताओं को दिखाता है। आप सेटिंग मान प्रदर्शित करने के लिए अपना तरीका चुन सकते हैं लेकिन मैं आयात करने जा रहा हूं Tip अंग से @wordpress/components पैकेज:

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

जब मैं यहां हूं, मैं उन्हें अंदर प्रदर्शित करने से पहले मूल्यों के लिए एक सशर्त जांच करने जा रहा हूं Tip घटक:

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

        

          Country: {attributes.settings.country}
        
        

          League: {attributes.settings.league}
        
        

          Season: {attributes.settings.season}
        
      
    
  )}

यहां बताया गया है कि यह ब्लॉक एडिटर में कैसे काम करता है:

एपीआई डेटा तब अधिक शक्तिशाली होता है जब लाइव डेटा को हर बार मैन्युअल रूप से अपडेट किए बिना दिखाया जा सकता है। हम इस श्रृंखला की अगली किस्त में देखेंगे।