بلاک ایڈیٹر میں کسٹم ورڈپریس بلاک کے لیے سیٹنگز کو محفوظ کرنا

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

ہمارے پاس احاطہ کرنے کے لئے ایک آخری چیز ہے اور وہ ترتیبات کے اختیارات کو بچا رہا ہے۔ اگر ہم پچھلے مضمون سے یاد کرتے ہیں، تو ہم تکنیکی طور پر بلاک سیٹنگز UI میں اپنے انتخاب کو "محفوظ" کرنے کے قابل ہیں، لیکن وہ حقیقت میں کہیں بھی محفوظ نہیں ہیں۔ اگر ہم چند انتخاب کرتے ہیں، انہیں محفوظ کرتے ہیں، پھر پوسٹ پر واپس آتے ہیں، ترتیبات مکمل طور پر دوبارہ ترتیب دی جاتی ہیں.

آئیے لوپ کو بند کریں اور ان ترتیبات کو محفوظ کریں تاکہ اگلی بار جب ہم اپنی مرضی کے مطابق بلاک پر مشتمل کسی پوسٹ میں ترمیم کریں تو وہ برقرار رہیں!

ترتیبات کی خصوصیات کو محفوظ کرنا

ہم ایک API کے ساتھ کام کر رہے ہیں جو ہمیں فراہم کرتا ہے۔ فٹ بال فٹ بال ٹیم کی درجہ بندی اور ہم اسے ملک، لیگ اور سیزن کی بنیاد پر درجہ بندی دکھانے کے لیے حاصل کرنے کے لیے استعمال کر رہے ہیں۔ ہم ان میں سے ہر ایک کے لیے نئی صفات بنا سکتے ہیں:

// 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() جیسا کہ ہم عام طور پر فائنل آبجیکٹ سیٹ کرنے کے لیے کرتے ہیں۔ آپ UI میں انتخاب کو اپ ڈیٹ کر کے اس بات کی تصدیق کر سکتے ہیں کہ آیا مذکورہ بالا صفات تبدیل ہو رہی ہیں۔

تصدیق کرنے کا دوسرا طریقہ یہ ہے کہ اوصاف تلاش کرنے کے لیے DevTools میں console.log() کریں۔

اس اسکرین شاٹ کو قریب سے دیکھیں۔ قدریں محفوظ ہیں۔ attributes.settings. ہم اسے براہ راست ہوتا ہوا دیکھنے کے قابل ہیں کیونکہ جب بھی ہم ترتیبات میں تبدیلی کرتے ہیں تو رد عمل دوبارہ پیش کرتا ہے، شکریہ useState() کانٹا.

بلاکس کی ترتیبات UI میں اقدار کی نمائش

سیٹنگ ویلیوز کو کنٹرول آپشنز میں محفوظ کرنا بہت مفید نہیں ہے کیونکہ ہر ایک دوسرے سیٹنگ ویلیو پر منحصر ہے (مثال کے طور پر لیگ کی رینکنگ اس بات پر منحصر ہے کہ کون سا سیزن منتخب کیا گیا ہے)۔ لیکن یہ ان حالات میں بہت مفید ہے جہاں ترتیبات کی قدریں جامد ہوں اور جہاں ترتیبات ایک دوسرے سے آزاد ہوں۔

موجودہ ترتیبات کو پیچیدہ بنائے بغیر، ہم ترتیبات کے پینل کے اندر ایک اور سیکشن بنا سکتے ہیں جو موجودہ صفات کو ظاہر کرتا ہے۔ آپ ترتیبات کی اقدار کو ظاہر کرنے کے لیے اپنا راستہ منتخب کر سکتے ہیں لیکن میں درآمد کرنے جا رہا ہوں a 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}
        
      
    
  )}

بلاک ایڈیٹر میں کام کرنے کا طریقہ یہاں ہے:

API ڈیٹا زیادہ طاقتور ہوتا ہے جب لائیو ڈیٹا کو دستی طور پر ہر بار اپ ڈیٹ کیے بغیر دکھایا جا سکتا ہے۔ ہم اس سلسلے کی اگلی قسط میں اس کا جائزہ لیں گے۔