Cho đến nay, chúng tôi đã đề cập đến cách làm việc với dữ liệu từ API bên ngoài trong một khối WordPress tùy chỉnh. Chúng tôi đã trải qua quá trình tìm nạp dữ liệu đó để sử dụng trên giao diện người dùng của một trang web WordPress và làm thế nào để hiển thị nó trực tiếp trong Trình chỉnh sửa khối WordPress khi đặt khối trong nội dung. Lần này, chúng ta sẽ kết nối hai bài báo đó bằng cách nối vào bảng điều khiển của trình chỉnh sửa khối để tạo giao diện người dùng cài đặt cho khối mà chúng ta đã tạo.

Bạn biết bảng điều khiển tôi đang đề cập, phải không? Đó là bảng điều khiển ở bên phải chứa cài đặt bài đăng và khối trong trình chỉnh sửa khối.

Xem khu vực được đánh dấu màu đỏ đó? Đó là bảng điều khiển. Một khối Đoạn văn hiện đang được chọn và cài đặt cho nó được hiển thị trong bảng điều khiển. Chúng ta có thể thay đổi phong cách, màu sắc, kiểu chữ… một số thứ!

Chà, đó chính xác là những gì chúng ta đang làm trong khoảng thời gian này. Chúng ta sẽ tạo các điều khiển cho cài đặt của khối Xếp hạng bóng đá mà chúng ta đã thực hiện trong hai bài viết trước. Lần trước, chúng tôi đã tạo một nút trong khối của mình để tìm nạp dữ liệu bên ngoài cho bảng xếp hạng bóng đá. Chúng tôi đã biết URL và điểm cuối mà chúng tôi cần. Nhưng nếu chúng ta muốn lấy xếp hạng cho một quốc gia khác thì sao? Hoặc có thể là một giải đấu khác? Làm thế nào về dữ liệu từ một mùa khác?

Chúng ta cần điều khiển biểu mẫu để làm điều đó. Chúng ta có thể sử dụng các thành phần tương tác của React — như Phản ứng-Chọn — để duyệt qua các tùy chọn API khác nhau có sẵn để phân tích cú pháp dữ liệu đó. Nhưng không cần điều đó vì WordPress cung cấp một loạt các thành phần cốt lõi mà chúng tôi kết nối ngay vào!

Sản phẩm tài liệu hướng dẫn cho các thành phần này - được gọi là InspectorControls - đang trở nên tốt hơn trong Sổ tay biên tập khối WordPress. Điều đó sẽ trở nên tốt hơn theo thời gian, nhưng trong khi đó, chúng tôi cũng có Sách truyện WordPress Gutenberg và Thành phần WordPress Gutenberg các trang web để được trợ giúp thêm.

kiến trúc API

Trước khi bắt tay vào bất cứ điều gì, bạn nên vạch ra những gì chúng ta cần ngay từ đầu. Tôi đã vạch ra cấu trúc của dữ liệu RapidAPI mà chúng tôi đang tìm nạp để chúng tôi biết những gì có sẵn cho chúng tôi:

Các mùa giải và quốc gia là hai điểm cuối cấp cao nhất ánh xạ tới điểm cuối của giải đấu. Từ đó, chúng tôi có phần còn lại của dữ liệu mà chúng tôi đã sử dụng để điền vào bảng xếp hạng. Vì vậy, những gì chúng tôi muốn làm là tạo cài đặt trong Trình chỉnh sửa khối WordPress để lọc dữ liệu theo Mùa, Quốc gia và Giải đấu, sau đó chuyển dữ liệu đã lọc đó vào bảng xếp hạng. Điều đó mang lại cho chúng tôi khả năng bỏ khối trong bất kỳ trang WordPress hoặc bài đăng nào và hiển thị các biến thể của dữ liệu trong khối.

Để có được bảng xếp hạng, trước tiên chúng ta cần có được các giải đấu. Và để có được các giải đấu, trước tiên chúng ta cần có các quốc gia và/hoặc các mùa giải. Bạn có thể xem các điểm cuối khác nhau trong bảng điều khiển RapidAPI.

Có nhiều cách kết hợp dữ liệu khác nhau mà chúng tôi có thể sử dụng để điền vào bảng xếp hạng và bạn có thể có tùy chọn cho dữ liệu nào bạn muốn. Vì lợi ích của bài viết này, chúng tôi sẽ tạo các tùy chọn sau trong bảng cài đặt khối:

• Chọn quốc gia
• Chọn giải đấu
• Chọn mùa

Sau đó, chúng tôi sẽ có một nút để gửi các lựa chọn đó và tìm nạp dữ liệu liên quan và chuyển chúng vào bảng xếp hạng.

Tải và lưu trữ danh sách các quốc gia

Chúng tôi không thể chọn quốc gia mà chúng tôi muốn có dữ liệu nếu chúng tôi không có danh sách các quốc gia để chọn. Vì vậy, nhiệm vụ đầu tiên của chúng tôi là lấy danh sách các quốc gia từ RapidAPI.

Điều lý tưởng là tìm nạp danh sách các quốc gia khi khối thực sự được sử dụng trong trang hoặc nội dung đăng. Không cần tìm nạp bất cứ thứ gì nếu khối không được sử dụng. Cách tiếp cận rất giống với những gì chúng tôi đã làm trong bài báo đầu tiên, điểm khác biệt là chúng tôi đang sử dụng một điểm cuối API khác và các thuộc tính khác để lưu trữ danh sách các quốc gia được trả lại. Có nhiều cách WordPress khác để tìm nạp dữ liệu, như tìm nạp api, nhưng điều đó nằm ngoài phạm vi những gì chúng tôi đang làm ở đây.

Chúng tôi có thể bao gồm danh sách quốc gia theo cách thủ công sau khi sao chép danh sách đó từ dữ liệu API hoặc chúng tôi có thể sử dụng API hoặc thư viện riêng để điền vào các quốc gia. Tuy nhiên, API chúng tôi đang sử dụng đã có danh sách các quốc gia, vì vậy tôi sẽ chỉ sử dụng một trong các điểm cuối của nó. Hãy đảm bảo danh sách quốc gia ban đầu tải khi khối được chèn vào trang hoặc đăng nội dung trong trình chỉnh sửa khối:

// edit.js
const [countriesList, setCountriesList] = useState(null); useEffect(() => { let countryOptions = { method: "GET", headers: { "X-RapidAPI-Key": "Your Rapid API key", "X-RapidAPI-Host": "api-football-v1.p.rapidapi.com", }, }; fetch("https://api-football-v1.p.rapidapi.com/v3/countries", countryOptions) .then( (response) => response.json() ) .then( (response) => { let countriesArray = { ...response }; console.log("Countries list", countriesArray.response); setCountriesList(countriesArray.response); }) .catch((err) => console.error(err));
}, []);

Chúng tôi có một biến trạng thái để lưu trữ danh sách các quốc gia. Tiếp theo, chúng ta sẽ nhập một thành phần từ @wordpress/trình soạn thảo khối gói được gọi là InspectorControls đó là nơi chứa tất cả các thành phần chúng ta cần để tạo các điều khiển cài đặt.

import { InspectorControls } from "@wordpress/block-editor";

Các kiện hàng Repo GitHub làm tốt công việc giải thích InspectorControls. Trong ví dụ của chúng tôi, chúng tôi có thể sử dụng nó để kiểm soát cài đặt dữ liệu API như Quốc gia, Giải đấu và Mùa giải. Đây là bản xem trước để bạn có ý tưởng về giao diện người dùng mà chúng tôi đang tạo:

Và một khi các lựa chọn đó được thực hiện trong cài đặt khối, chúng tôi sẽ sử dụng chúng trong khối Edit chức năng:

<InspectorControls> { countriesList && ( <LeagueSettings props={props} countriesList={ countriesList } setApiData={ setApiData } ></LeagueSettings> )}
</InspectorControls>

Ở đây, tôi đảm bảo rằng chúng ta đang sử dụng kết xuất có điều kiện để hàm chỉ tải thành phần sau khi danh sách các quốc gia được tải. Nếu bạn đang băn khoăn về điều đó LeagueSettings thành phần, nó là một thành phần tùy chỉnh tôi đã tạo trong một phần riêng biệt components thư mục con trong khối để chúng tôi có thể sắp xếp gọn gàng và ngăn nắp hơn Edit chức năng thay vì hàng trăm dòng dữ liệu quốc gia để xử lý trong một tệp.

Chúng ta có thể nhập nó vào edit.js tệp như thế này:

import { LeagueSettings } from "./components/LeagueSettings";

Tiếp theo, chúng tôi sẽ chuyển các đạo cụ cần thiết cho LeagueSettings thành phần từ cha mẹ Edit thành phần để chúng ta có thể truy cập các biến trạng thái và thuộc tính từ LeagueSettings thành phần con. Chúng tôi cũng có thể làm điều đó với các phương pháp khác như API ngữ cảnh để tránh khoan chống đỡ, nhưng những gì chúng tôi có bây giờ hoàn toàn phù hợp với những gì chúng tôi đang làm.

Các phần khác của Edit chức năng cũng có thể được chuyển đổi thành các thành phần. Ví dụ: mã xếp hạng giải đấu có thể được đặt bên trong một thành phần riêng biệt — chẳng hạn như có thể LeagueTable.js - và sau đó được nhập giống như chúng tôi đã nhập LeagueSettings vào Edit chức năng.

Bên trong LeagueSettings.js hồ sơ

LeagueSettings cũng giống như người khác Thành phần phản ứng từ đó chúng ta có thể hủy cấu trúc các props từ component cha. Tôi sẽ sử dụng ba biến trạng thái và một biến bổ sung leagueID vì chúng tôi sẽ trích xuất ID từ league vật:

const [country, setCountry] = useState(null);
const [league, setLeague] = useState(null);
const [season, setSeason] = useState(null);
const [leagueID, setLeagueID] = useState(null);

Điều đầu tiên chúng ta sẽ làm là nhập khẩu PanelBody thành phần từ gói @wordpress/block-editor:

import { PanelBody } from "@wordpress/block-editor";

…và bao gồm nó trong của chúng tôi return chức năng:

<PanelBody title="Data settings" initialOpen={false}></PanelBody>

Có các thẻ và thuộc tính khác của bảng điều khiển - đó chỉ là sở thích cá nhân của tôi để sử dụng những cái này. Không ai trong số những người khác được yêu cầu ... nhưng nhìn vào tất cả các thành phần chúng tôi có sẵn để tạo bảng cài đặt! tôi thích sự đơn giản của PanelBody cho trường hợp sử dụng của chúng tôi. Nó mở rộng và thu gọn để hiển thị cài đặt thả xuống cho khối và thế là xong.

Nói về điều đó, chúng tôi có một lựa chọn để thực hiện cho những lựa chọn đó. Chúng ta có thể sử dụng SelectControl thành phần hoặc một ComboBoxControl, mà tài liệu mô tả là “phiên bản nâng cao của SelectControl, với việc bổ sung khả năng tìm kiếm các tùy chọn bằng cách sử dụng đầu vào tìm kiếm.” Điều đó tốt cho chúng tôi vì danh sách các quốc gia có thể khá dài và người dùng sẽ có thể thực hiện truy vấn tìm kiếm hoặc chọn từ danh sách.

Đây là một ví dụ về cách một ComboboxControl có thể làm việc cho danh sách quốc gia của chúng tôi:

<ComboboxControl label="Choose country" value={country} options={ filteredCountryOptions } onChange={ (value) => handleCountryChange(value) } onInputChange={ (inputValue) => { setFilteredCountryOptions( setupCountrySelect.filter((option) => option.label .toLowerCase() .startsWith(inputValue.toLowerCase()) ) ); }}
/>

Sản phẩm ComboboxControl có thể định cấu hình theo nghĩa là chúng ta có thể áp dụng kích thước khác nhau cho nhãn và giá trị của điều khiển:

{ value: 'small', label: 'Small',
},

Nhưng dữ liệu API của chúng tôi không theo cú pháp này, vì vậy chúng tôi có thể chuyển đổi countriesList mảng xuất phát từ thành phần cha mẹ khi bao gồm khối:

let setupCountrySelect; setupCountrySelect = countriesList.map((country) => { return { label: country.name, value: country.name, };
});

Khi một quốc gia được chọn từ ComboboxControl, giá trị quốc gia thay đổi và chúng tôi lọc dữ liệu tương ứng:

function handleCountryChange(value) { // Set state of the country setCountry(value); // League code from RapidAPI const options = { method: "GET", headers: { "X-RapidAPI-Key": "Your RapidAPI key", "X-RapidAPI-Host": "api-football-v1.p.rapidapi.com", }, }; fetch(`https://api-football-v1.p.rapidapi.com/v3/leagues?country=${value}`, options) .then((response) => response.json()) .then((response) => { return response.response; }) .then((leagueOptions) => { // Set state of the league variable setLeague(leagueOptions); // Convert it as we did for Country options setupLeagueSelect = leagueOptions.map((league) => { return { label: league.league.name, value: league.league.name, }; }); setFilteredLeagueOptions(setupLeagueSelect); }) .catch((err) => console.error(err));
}

Lưu ý rằng tôi đang sử dụng ba biến trạng thái khác để xử lý các thay đổi khi lựa chọn quốc gia thay đổi:

const [filteredCountryOptions, setFilteredCountryOptions] = useState(setupCountrySelect);
const [filteredLeagueOptions, setFilteredLeagueOptions] = useState(null);
const [filteredSeasonOptions, setFilteredSeasonOptions] = useState(null);

Còn các tùy chọn cài đặt khác thì sao?

Tôi sẽ hiển thị mã mà tôi đã sử dụng cho các cài đặt khác nhưng tất cả những gì nó làm là tính đến các trường hợp bình thường trong khi xác định lỗi cho các trường hợp đặc biệt. Ví dụ: sẽ có lỗi ở một số quốc gia và giải đấu vì:

• không có bảng xếp hạng cho một số giải đấu, và
• một số giải đấu có bảng xếp hạng nhưng chúng không nằm trong một bảng duy nhất.

Đây không phải là hướng dẫn về JavaScript hoặc React, vì vậy tôi sẽ cho phép bạn xử lý các trường hợp đặc biệt đối với API mà bạn định sử dụng:

function handleLeagueChange(value) { setLeague(value); if (league) { const selectedLeague = league.filter((el) => { if (el.league.name === value) { return el; } }); if (selectedLeague) { setLeague(selectedLeague[0].league.name); setLeagueID(selectedLeague[0].league.id); setupSeasonSelect = selectedLeague[0].seasons.map((season) => { return { label: season.year, value: season.year, }; }); setFilteredSeasonOptions(setupSeasonSelect); } } else { return; }
} function handleSeasonChange(value) { setSeason(value);
}

Gửi các lựa chọn cài đặt

Trong tạp chí bài viết cuối cùng, chúng tôi đã tạo một nút trong trình chỉnh sửa khối để tìm nạp dữ liệu mới từ API. Bây giờ chúng ta không cần nó nữa khi chúng ta có cài đặt. Chà, chúng tôi cần nó - chỉ là nó không ở vị trí hiện tại. Thay vì đặt nó trực tiếp trong khối được hiển thị trong trình chỉnh sửa khối, chúng tôi sẽ chuyển nó sang PanelBody thành phần để gửi các lựa chọn cài đặt.

Vì vậy, trở lại trong LeagueSettings.js:

// When countriesList is loaded, show the country combo box
{ countriesList && ( <ComboboxControl label="Choose country" value={country} options={filteredCountryOptions} onChange={(value) => handleCountryChange(value)} onInputChange={(inputValue) => { setFilteredCountryOptions( setupCountrySelect.filter((option) => option.label .toLowerCase() .startsWith(inputValue.toLowerCase()) ) ); }} />
)} // When filteredLeagueOptions is set through handleCountryChange, show league combobox
{ filteredLeagueOptions && ( <ComboboxControl label="Choose league" value={league} options={filteredLeagueOptions} onChange={(value) => handleLeagueChange(value)} onInputChange={(inputValue) => { setFilteredLeagueOptions( setupLeagueSelect.filter((option) => option.label .toLowerCase() .startsWith(inputValue.toLowerCase()) ) ); }} />
)} // When filteredSeasonOptions is set through handleLeagueChange, show season combobox
{ filteredSeasonOptions && ( <> <ComboboxControl label="Choose season" value={season} options={filteredSeasonOptions} onChange={(value) => handleSeasonChange(value)} onInputChange={ (inputValue) => { setFilteredSeasonOptions( setupSeasonSelect.filter((option) => option.label .toLowerCase() .startsWith(inputValue.toLowerCase() ) ); } } /> // When season is set through handleSeasonChange, show the "Fetch data" button { season && ( <button className="fetch-data" onClick={() => getData()}>Fetch data</button> ) } </> </>
)}

Đây là kết quả!

Chúng tôi đang ở một nơi rất tốt với khối của chúng tôi. Chúng tôi có thể kết xuất nó trong trình chỉnh sửa khối và giao diện người dùng của trang web. Chúng tôi có thể tìm nạp dữ liệu từ API bên ngoài dựa trên lựa chọn cài đặt mà chúng tôi đã tạo để lọc dữ liệu. Đó là chức năng khá darn!

Nhưng có một điều khác chúng ta phải giải quyết. Ngay bây giờ, khi chúng tôi lưu trang hoặc bài đăng có chứa khối, cài đặt chúng tôi đã chọn để đặt lại khối. Nói cách khác, những lựa chọn đó không được lưu ở bất cứ đâu. Còn một chút công việc nữa để làm cho các lựa chọn đó bền bỉ. Đó là nơi chúng tôi dự định đi đến trong bài viết tiếp theo, vì vậy hãy chú ý theo dõi.

• Coinsmart. Sàn giao dịch Bitcoin và tiền điện tử tốt nhất Châu Âu.Bấm vào đây
• Platoblockchain. Web3 Metaverse Intelligence. Khuếch đại kiến ​​thức. Truy cập Tại đây.
• nguồn: https://css-tricks.com/creating-a-settings-ui-for-a-custom-wordpress-block/