ذخیره تنظیمات برای یک بلوک سفارشی وردپرس در ویرایشگر بلاک

ما یک سری چیزها را در این مجموعه انجام داده ایم! ما یک بلوک وردپرس سفارشی ایجاد کردیم که داده ها را از یک API خارجی واکشی می کند و آن را در قسمت جلویی نمایش می دهد. سپس آن کار را برداشتیم و آن را گسترش دادیم تا داده‌ها نیز مستقیماً در ویرایشگر بلوک وردپرس ارائه شوند. پس از آن، با استفاده از اجزای وردپرس، یک UI تنظیمات برای بلوک ایجاد کردیم InspectorControls بسته.

آخرین نکته برای پوشش دادن وجود دارد و آن ذخیره گزینه های تنظیمات است. اگر از مقاله گذشته به خاطر بیاوریم، از نظر فنی می‌توانیم انتخاب‌های خود را در رابط کاربری تنظیمات بلوک «ذخیره» کنیم، اما این موارد در واقع در هیچ کجا ذخیره نمی‌شوند. اگر چند انتخاب انجام دهیم، آنها را ذخیره کنیم، سپس به پست برگردیم، تنظیمات به طور کامل بازنشانی می شود.

بیایید حلقه را ببندیم و آن تنظیمات را ذخیره کنیم تا دفعه بعد که پستی را که حاوی بلوک سفارشی ما است ویرایش کنیم، باقی بمانند!

ذخیره ویژگی های تنظیمات

ما با یک API کار می کنیم که در اختیار ما قرار می دهد فوتبال رتبه بندی تیم های فوتبال و ما از آن برای واکشی برای نمایش رتبه بندی بر اساس کشور، لیگ و فصل استفاده می کنیم. ما می توانیم برای هر یک از این ویژگی های جدید ایجاد کنیم:

// index.js

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

در مرحله بعد، باید صفات را از آن تنظیم کنیم LeagueSettings.js. هر وقت الف ComboboxControl در رابط کاربری تنظیمات ما به روز می شود، باید ویژگی ها را با استفاده از آن تنظیم کنیم 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 با ارزش‌های کشور، لیگ و فصل جدید مخالفت کنید. این کار با کمک عملگر spread انجام می شود.

// 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() همانطور که به طور معمول برای تنظیم شی نهایی انجام می دهیم. با به‌روزرسانی انتخاب‌ها در رابط کاربری، می‌توانید تأیید کنید که آیا ویژگی‌های بالا تغییر می‌کنند.

راه دیگر برای تایید این است که یک console.log() در DevTools برای یافتن ویژگی ها انجام دهید.

به آن اسکرین شات دقیق تر نگاه کنید. مقادیر در آن ذخیره می شوند attributes.settings. ما می‌توانیم آن را به‌طور زنده ببینیم، زیرا React هر بار که تغییری در تنظیمات ایجاد می‌کنیم، به لطف useState() قلاب.

نمایش مقادیر در رابط کاربری تنظیمات بلوک ها

ذخیره کردن مقادیر تنظیمات در خود گزینه‌های کنترل چندان مفید نیست، زیرا هر کدام به مقدار تنظیم دیگر وابسته است (مثلاً رتبه‌بندی بر اساس لیگ بستگی به فصل انتخابی دارد). اما در شرایطی که مقادیر تنظیمات ثابت هستند و تنظیمات مستقل از یکدیگر هستند بسیار مفید است.

بدون پیچیده کردن تنظیمات فعلی، می‌توانیم بخش دیگری را در پانل تنظیمات ایجاد کنیم که ویژگی‌های فعلی را نشان می‌دهد. شما می توانید راه خود را برای نمایش مقادیر تنظیمات انتخاب کنید اما من قصد دارم 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 زمانی قدرتمندتر می‌شوند که بتوان داده‌های زنده را بدون نیاز به به‌روزرسانی دستی هر بار نشان داد. در قسمت بعدی این مجموعه به بررسی آن خواهیم پرداخت.