Lưu Cài đặt cho Khối WordPress tùy chỉnh trong Trình chỉnh sửa khối

Chúng tôi đã hoàn thành rất nhiều thứ trong loạt bài này! Chúng tôi đã tạo một khối WordPress tùy chỉnh để tìm nạp dữ liệu từ API bên ngoài và hiển thị nó ở giao diện người dùng. Sau đó, chúng tôi thực hiện công việc đó và mở rộng nó để dữ liệu cũng hiển thị trực tiếp trong trình chỉnh sửa khối WordPress. Sau đó, chúng tôi đã tạo giao diện người dùng cài đặt cho khối bằng cách sử dụng các thành phần từ WordPress InspectorControls gói.

Còn một phần cuối cùng mà chúng ta cần đề cập đến đó là lưu các tùy chọn cài đặt. Nếu chúng tôi nhớ lại bài viết trước, về mặt kỹ thuật, chúng tôi có thể “lưu” các lựa chọn của mình trong giao diện người dùng cài đặt khối, nhưng những lựa chọn đó thực sự không được lưu trữ ở bất kỳ đâu. Nếu chúng ta thực hiện một vài lựa chọn, lưu lại rồi quay lại bài đăng, cài đặt sẽ được đặt lại hoàn toàn.

Hãy đóng vòng lặp và lưu các cài đặt đó để chúng tiếp tục tồn tại vào lần tiếp theo khi chúng ta chỉnh sửa bài đăng có chứa khối tùy chỉnh của mình!

Lưu thuộc tính cài đặt

Chúng tôi đang làm việc với một API cung cấp cho chúng tôi bóng đá xếp hạng đội bóng đá và chúng tôi đang sử dụng nó để tìm nạp hiển thị thứ hạng dựa trên quốc gia, giải đấu và mùa giải. Chúng ta có thể tạo các thuộc tính mới cho từng thuộc tính như thế này:

// index.js

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

Tiếp theo, chúng ta cần thiết lập các thuộc tính từ LeagueSettings.js. Bất cứ khi nào ComboboxControl được cập nhật trong giao diện người dùng cài đặt của chúng tôi, chúng tôi cần đặt các thuộc tính bằng cách sử dụng setAttributes() phương pháp. Điều này đơn giản hơn khi chúng tôi chỉ làm việc với một điểm cuối dữ liệu. Nhưng bây giờ chúng ta có nhiều đầu vào nên việc này phức tạp hơn một chút.

Đây là cách tôi sẽ tổ chức nó. Tôi sẽ tạo một đối tượng mới trong LeagueSettings.js tuân theo cấu trúc của các thuộc tính cài đặt và giá trị của chúng.

// LeagueSettings.js

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

Tôi cũng sẽ thay đổi các biến trạng thái ban đầu từ null vào các biến cài đặt tương ứng.

// LeagueSettings.js

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

Trong mỗi handle______Change(), Tôi sẽ tạo một setLocalAttributes() có một đối số sao chép và ghi đè lên đối số trước đó localSettings đối tượng với các giá trị quốc gia, giải đấu và mùa giải mới. Điều này được thực hiện bằng cách sử dụng sự trợ giúp của toán tử trải rộng.

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

Chúng ta có thể định nghĩa các setLocalAttributes() như thế này:

// LeagueSettings.js

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

Vì vậy, chúng tôi đang sử dụng Object.assign() để hợp nhất hai đối tượng. Sau đó chúng ta có thể nhân bản newSettings phản đối trở lại localSettings bởi vì chúng tôi cũng cần tính đến từng thuộc tính cài đặt khi có lựa chọn mới được thực hiện và thay đổi xảy ra.

Cuối cùng, chúng ta có thể sử dụng setAttributes() như chúng ta thường làm để thiết lập đối tượng cuối cùng. Bạn có thể xác nhận xem các thuộc tính trên có thay đổi hay không bằng cách cập nhật các lựa chọn trong giao diện người dùng.

Một cách khác để xác nhận là thực hiện console.log() trong DevTools để tìm các thuộc tính.

Nhìn kỹ hơn vào ảnh chụp màn hình đó. Các giá trị được lưu trữ trong attributes.settings. Chúng tôi có thể thấy điều đó diễn ra trực tiếp vì React hiển thị lại mỗi khi chúng tôi thực hiện thay đổi trong cài đặt, nhờ vào useState() móc.

Hiển thị các giá trị trong giao diện người dùng cài đặt khối

Sẽ không hữu ích lắm nếu lưu trữ các giá trị cài đặt trong các tùy chọn điều khiển vì mỗi giá trị đều phụ thuộc vào giá trị cài đặt khác (ví dụ: thứ hạng theo giải đấu phụ thuộc vào mùa giải nào được chọn). Nhưng nó rất hữu ích trong trường hợp các giá trị cài đặt là tĩnh và khi các cài đặt độc lập với nhau.

Không làm cho cài đặt hiện tại trở nên phức tạp, chúng ta có thể tạo một phần khác bên trong bảng cài đặt hiển thị các thuộc tính hiện tại. Bạn có thể chọn cách hiển thị các giá trị cài đặt nhưng tôi sẽ nhập một Tip thành phần từ @wordpress/components gói:

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

Trong khi ở đây, tôi sẽ thực hiện kiểm tra có điều kiện các giá trị trước khi hiển thị chúng bên trong Tip thành phần:

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

        

          Country: {attributes.settings.country}
        
        

          League: {attributes.settings.league}
        
        

          Season: {attributes.settings.season}
        
      
    
  )}

Đây là cách nó hoạt động trong trình chỉnh sửa khối:

Dữ liệu API mạnh mẽ hơn khi dữ liệu trực tiếp có thể được hiển thị mà không cần phải cập nhật chúng theo cách thủ công mỗi lần. Chúng ta sẽ xem xét điều đó trong phần tiếp theo của loạt bài này.