การบันทึกการตั้งค่าสำหรับบล็อก WordPress แบบกำหนดเองในตัวแก้ไขบล็อก

เราได้ทำสิ่งต่างๆ มากมายในซีรีส์นี้สำเร็จแล้ว! เราสร้างบล็อก WordPress แบบกำหนดเองที่ดึงข้อมูลจาก API ภายนอกและแสดงผลที่ส่วนหน้า จากนั้นเราก็เอางานนั้นมาขยายเพื่อให้ข้อมูลแสดงผลโดยตรงในตัวแก้ไขบล็อค WordPress หลังจากนั้น เราสร้าง UI การตั้งค่าสำหรับบล็อกโดยใช้ส่วนประกอบจาก WordPress 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

อีกวิธีในการยืนยันคือทำ console.log() ใน DevTools เพื่อค้นหาแอตทริบิวต์

ดูภาพหน้าจอนั้นให้ละเอียดยิ่งขึ้น ค่าจะถูกเก็บไว้ใน attributes.settings. เราสามารถเห็นมันเกิดขึ้นจริงได้เพราะ React จะเรนเดอร์ซ้ำทุกครั้งที่เราทำการเปลี่ยนแปลงในการตั้งค่า ต้องขอบคุณ 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}
        
      
    
  )}

นี่คือวิธีการทำงานในเครื่องมือแก้ไขบล็อก:

ข้อมูล API มีประสิทธิภาพมากขึ้นเมื่อสามารถแสดงข้อมูลสดได้โดยไม่ต้องอัปเดตด้วยตนเองทุกครั้ง เราจะพิจารณาในตอนต่อไปของซีรีส์นี้