ব্লক এডিটরে একটি কাস্টম ওয়ার্ডপ্রেস ব্লকের জন্য সেটিংস সংরক্ষণ করা

আমরা এই সিরিজে অনেক কিছু সম্পন্ন করেছি! আমরা একটি কাস্টম ওয়ার্ডপ্রেস ব্লক তৈরি করেছি যা একটি বাহ্যিক 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-তে মানগুলি প্রদর্শন করা হচ্ছে

নিয়ন্ত্রণ বিকল্পগুলিতে সেটিং মানগুলি সংরক্ষণ করা খুব দরকারী নয় কারণ প্রতিটি একটি অন্য সেটিং মানের উপর নির্ভরশীল (যেমন লিগের র‌্যাঙ্কিং কোন সিজন নির্বাচন করা হয়েছে তার উপর নির্ভর করে)। কিন্তু এটি এমন পরিস্থিতিতে খুবই উপযোগী যেখানে সেটিংসের মানগুলি স্থির থাকে এবং যেখানে সেটিংস একে অপরের থেকে স্বাধীন।

বর্তমান সেটিংস জটিল না করে, আমরা সেটিংস প্যানেলের ভিতরে আরেকটি বিভাগ তৈরি করতে পারি যা বর্তমান বৈশিষ্ট্যগুলি দেখায়। আপনি সেটিংস মান প্রদর্শন করার জন্য আপনার উপায় চয়ন করতে পারেন কিন্তু আমি একটি আমদানি করতে যাচ্ছি 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}
        
      
    
  )}

ব্লক সম্পাদকে এটি কীভাবে কাজ করে তা এখানে রয়েছে:

এপিআই ডেটা আরও শক্তিশালী হয় যখন লাইভ ডেটা প্রতিবার ম্যানুয়ালি আপডেট না করে দেখানো যায়। আমরা এই সিরিজের পরবর্তী কিস্তিতে তা দেখব।