Đây là phần tiếp theo của bài viết cuối cùng của tôi về “Hiển thị dữ liệu API bên ngoài trong các khối WordPress trên giao diện người dùng”. Trong phần cuối cùng đó, chúng tôi đã học cách lấy một API bên ngoài và tích hợp nó với một khối hiển thị dữ liệu đã tìm nạp trên giao diện người dùng của một trang web WordPress.
Vấn đề là, chúng tôi đã hoàn thành điều này theo cách ngăn chúng tôi nhìn thấy dữ liệu trong Trình chỉnh sửa khối của WordPress. Nói cách khác, chúng ta có thể chèn khối trên một trang nhưng chúng ta không có bản xem trước của nó. Chúng tôi chỉ có thể xem khối khi nó được xuất bản.
Hãy xem lại plugin khối ví dụ mà chúng tôi đã thực hiện trong bài viết trước. Chỉ lần này, chúng tôi sẽ sử dụng hệ sinh thái JavaScript và React của WordPress để tìm nạp và hiển thị dữ liệu đó trong Trình chỉnh sửa khối phía sau.
Nơi chúng tôi rời đi
Khi chúng tôi bắt đầu, đây là một bản demo nơi chúng tôi hạ cánh trong bài viết lần trước mà bạn có thể tham khảo. Bạn có thể nhận thấy rằng tôi đã sử dụng render_callback trong bài viết trước để tôi có thể sử dụng các thuộc tính trong tệp PHP và hiển thị nội dung.
Chà, điều đó có thể hữu ích trong các tình huống mà bạn có thể phải sử dụng một số hàm WordPress hoặc PHP gốc để tạo các khối động. Nhưng nếu bạn chỉ muốn sử dụng hệ sinh thái JavaScript và React (cụ thể là JSX) của WordPress để hiển thị HTML tĩnh cùng với các thuộc tính được lưu trữ trong cơ sở dữ liệu, bạn chỉ cần tập trung vào Edit và Save các chức năng của plugin khối.
- Sản phẩm
Edithàm hiển thị nội dung dựa trên những gì bạn muốn xem trong Trình chỉnh sửa khối. Bạn có thể có các thành phần React tương tác tại đây. - Sản phẩm
Savehàm hiển thị nội dung dựa trên những gì bạn muốn xem trên giao diện người dùng. Bạn không thể có các thành phần React thông thường hoặc các hook ở đây. Nó được sử dụng để trả về HTML tĩnh được lưu vào cơ sở dữ liệu của bạn cùng với các thuộc tính.
Sản phẩm Save chức năng là nơi chúng tôi đi chơi hôm nay. Chúng tôi có thể tạo các thành phần tương tác trên giao diện người dùng, nhưng để làm được điều đó, chúng tôi cần phải bao gồm và truy cập chúng theo cách thủ công bên ngoài Save chức năng trong một tệp như chúng tôi đã làm trong bài viết trước.
Vì vậy, tôi sẽ đề cập đến vấn đề tương tự mà chúng tôi đã làm trong bài viết trước, nhưng lần này bạn có thể xem bản xem trước trong Trình chỉnh sửa khối trước bạn xuất bản nó lên giao diện người dùng.
Các đạo cụ khối
Tôi cố tình bỏ qua bất kỳ giải thích nào về edit đạo cụ của hàm trong bài viết trước bởi vì điều đó sẽ làm mất trọng tâm của điểm chính, kết xuất.
Nếu bạn đến từ nền tảng React, bạn có thể sẽ hiểu những gì tôi đang nói đến, nhưng nếu bạn chưa quen với điều này, tôi khuyên bạn nên kiểm tra các thành phần và đạo cụ trong tài liệu React.
Nếu chúng tôi ghi lại props đối tượng với bảng điều khiển, nó trả về danh sách các hàm và biến WordPress liên quan đến khối của chúng tôi:
Chúng tôi chỉ cần attributes đối tượng và setAttributes chức năng mà tôi sẽ phá hủy từ props đối tượng trong mã của tôi. Trong bài viết trước, tôi đã sửa đổi mã của RapidAPI để tôi có thể lưu trữ dữ liệu API thông qua setAttributes(). Đạo cụ chỉ có thể đọc được, vì vậy chúng tôi không thể sửa đổi chúng trực tiếp.
Các đạo cụ khối tương tự như các biến trạng thái và setState trong React, nhưng React hoạt động ở phía máy khách và setAttributes() được sử dụng để lưu trữ các thuộc tính vĩnh viễn trong cơ sở dữ liệu WordPress sau khi lưu bài đăng. Vì vậy, những gì chúng ta cần làm là lưu chúng vào attributes.data và sau đó gọi đó là giá trị ban đầu cho useState() biến.
Sản phẩm edit chức năng
Tôi sẽ sao chép và dán mã HTML mà chúng tôi đã sử dụng football-rankings.php trong bài viết trước và chỉnh sửa một chút để chuyển sang nền JavaScript. Hãy nhớ cách chúng tôi đã tạo hai tệp bổ sung trong bài viết trước để tạo kiểu giao diện người dùng và tập lệnh? Với cách chúng ta tiếp cận mọi thứ ngày nay, không cần phải tạo những tệp đó. Thay vào đó, chúng tôi có thể di chuyển tất cả đến Edit chức năng.
Mã đầy đủ
import { useState } from "@wordpress/element";
export default function Edit(props) {
const { attributes, setAttributes } = props;
const [apiData, setApiData] = useState(null);
function fetchData() {
const options = {
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/standings?season=2021&league=39",
options
)
.then((response) => response.json())
.then((response) => {
let newData = { ...response }; // Deep clone the response data
setAttributes({ data: newData }); // Store the data in WordPress attributes
setApiData(newData); // Modify the state with the new data
})
.catch((err) => console.error(err));
}
return (
{apiData && (
Rank
Logo
Team name
GP
GW
GD
GL
GF
GA
Pts
Form history
{/* Usage of [0] might be weird but that is how the API structure is. */}
{apiData.response[0].league.standings[0].map((el) => {
{/* Destructure the required data from all */}
const { played, win, draw, lose, goals } = el.all;
return (
{el.rank}
{el.team.name}
{played}
{win}
{draw}
{lose}
{goals.for}
{goals.against}
{el.points}
{el.form.split("").map((result) => {
return (
{result}
);
})}
);
}
)}
)}
);
}Tôi đã bao gồm móc React useState() từ @wordpress/element thay vì sử dụng nó từ thư viện React. Đó là bởi vì nếu tôi tải theo cách thông thường, nó sẽ tải xuống React cho mọi khối mà tôi đang sử dụng. Nhưng nếu tôi đang sử dụng @wordpress/element nó tải từ một nguồn duy nhất, tức là lớp WordPress trên đầu React.
Lần này, tôi cũng chưa bọc mã bên trong useEffect() nhưng bên trong một chức năng chỉ được gọi khi nhấp vào nút để chúng ta có bản xem trước trực tiếp của dữ liệu được tải xuống. Tôi đã sử dụng một biến trạng thái có tên là apiData để hiển thị bảng giải đấu có điều kiện. Vì vậy, khi nút được nhấp và dữ liệu được tìm nạp, tôi đang thiết lập apiData đến dữ liệu mới bên trong fetchData() và có kết xuất bằng HTML của bảng xếp hạng bóng đá có sẵn.
Bạn sẽ nhận thấy rằng sau khi bài viết được lưu và trang được làm mới, bảng giải đấu sẽ biến mất. Đó là bởi vì chúng ta đang sử dụng trạng thái trống (null) Cho apiDatagiá trị ban đầu của. Khi bài đăng được lưu, các thuộc tính được lưu vào attributes.data và chúng tôi gọi nó là giá trị ban đầu cho useState() biến như thế này:
const [apiData, setApiData] = useState(attributes.data);Sản phẩm save chức năng
Chúng tôi sẽ làm gần như cùng một điều chính xác với save nhưng hãy sửa đổi nó một chút. Ví dụ: không cần nút "Tìm nạp dữ liệu" trên giao diện người dùng và apiData biến trạng thái cũng không cần thiết vì chúng tôi đã kiểm tra nó trong edit hàm số. Nhưng chúng tôi cần một sự ngẫu nhiên apiData biến kiểm tra attributes.data để hiển thị JSX có điều kiện, nếu không nó sẽ tạo ra các lỗi không xác định và giao diện người dùng của Block Editor sẽ trống.
Mã đầy đủ
export default function save(props) {
const { attributes, setAttributes } = props;
let apiData = attributes.data;
return (
{/* Only render if apiData is available */}
{apiData && (
Rank
Logo
Team name
GP
GW
GD
GL
GF
GA
Pts
Form history
{/* Usage of [0] might be weird but that is how the API structure is. */}
{apiData.response[0].league.standings[0].map((el) => {
const { played, win, draw, lose, goals } = el.all;
return (
{el.rank}
{el.team.name}
{played}
{win}
{draw}
{lose}
{goals.for}
{goals.against}
{el.points}
{el.form.split("").map((result) => {
return (
{result}
);
})}
);
})}
)}
);
}Nếu bạn đang sửa đổi save sau khi một khối đã có trong Trình chỉnh sửa khối, nó sẽ hiển thị lỗi như sau:
Đó là vì đánh dấu trong nội dung đã lưu khác với đánh dấu trong save hàm số. Vì chúng tôi đang ở chế độ phát triển, nên dễ dàng xóa bock khỏi trang hiện tại và chèn lại nó dưới dạng một khối mới - theo cách đó, mã cập nhật được sử dụng thay thế và mọi thứ được đồng bộ trở lại.
Có thể tránh được tình huống xóa và thêm lại nếu chúng ta đã sử dụng render_callback vì đầu ra là động và được điều khiển bởi PHP thay vì hàm lưu. Vì vậy, mỗi phương pháp có những ưu và nhược điểm riêng.
Tom Nowell cung cấp một lời giải thích cặn kẽ về những việc không nên làm trong save chức năng trong Stack Overflow này trả lời.
Tạo kiểu cho khối trong trình chỉnh sửa và giao diện người dùng
Về kiểu dáng, nó sẽ gần giống như những gì chúng ta đã xem trong bài viết trước, nhưng với một số thay đổi nhỏ mà tôi đã giải thích trong phần bình luận. Tôi chỉ cung cấp đầy đủ các phong cách ở đây vì đây chỉ là bằng chứng về khái niệm chứ không phải là thứ bạn muốn sao chép-dán (trừ khi bạn thực sự cần một khối để hiển thị bảng xếp hạng bóng đá theo kiểu như thế này). Và lưu ý rằng tôi vẫn đang sử dụng SCSS biên dịch sang CSS khi xây dựng.
Các kiểu trình chỉnh sửa
/* Target all the blocks with the data-title="Football Rankings" */
.block-editor-block-list__layout
.block-editor-block-list__block.wp-block[data-title="Football Rankings"] {
/* By default, the blocks are constrained within 650px max-width plus other design specific code */
max-width: unset;
background: linear-gradient(to right, #8f94fb, #4e54c8);
display: grid;
place-items: center;
padding: 60px 0;
/* Button CSS - From: https://getcssscan.com/css-buttons-examples - Some properties really not needed :) */
button.fetch-data {
align-items: center;
background-color: #ffffff;
border: 1px solid rgb(0 0 0 / 0.1);
border-radius: 0.25rem;
box-shadow: rgb(0 0 0 / 0.02) 0 1px 3px 0;
box-sizing: border-box;
color: rgb(0 0 0 / 0.85);
cursor: pointer;
display: inline-flex;
font-family: system-ui, -apple-system, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 600;
justify-content: center;
line-height: 1.25;
margin: 0;
min-height: 3rem;
padding: calc(0.875rem - 1px) calc(1.5rem - 1px);
position: relative;
text-decoration: none;
transition: all 250ms;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: baseline;
width: auto;
&:hover,
&:focus {
border-color: rgb(0, 0, 0, 0.15);
box-shadow: rgb(0 0 0 / 0.1) 0 4px 12px;
color: rgb(0, 0, 0, 0.65);
}
&:hover {
transform: translateY(-1px);
}
&:active {
background-color: #f0f0f1;
border-color: rgb(0 0 0 / 0.15);
box-shadow: rgb(0 0 0 / 0.06) 0 2px 4px;
color: rgb(0 0 0 / 0.65);
transform: translateY(0);
}
}
}Kiểu giao diện người dùng
/* Front-end block styles */
.wp-block-post-content .wp-block-football-rankings-league-table {
background: linear-gradient(to right, #8f94fb, #4e54c8);
max-width: unset;
display: grid;
place-items: center;
}
#league-standings {
width: 900px;
margin: 60px 0;
max-width: unset;
font-size: 16px;
.header {
display: grid;
gap: 1em;
padding: 10px;
grid-template-columns: 1fr 1fr 3fr 4fr 3fr;
align-items: center;
color: white;
font-size: 16px;
font-weight: 600;
background-color: transparent;
background-repeat: no-repeat;
background-size: contain;
background-position: right;
.stats {
display: flex;
gap: 15px;
& > div {
width: 30px;
}
}
}
}
.league-table {
background: white;
box-shadow:
rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
padding: 1em;
.position {
width: 20px;
}
.team {
display: grid;
gap: 1em;
padding: 10px 0;
grid-template-columns: 1fr 1fr 3fr 4fr 3fr;
align-items: center;
}
.team:not(:last-child) {
border-bottom: 1px solid lightgray;
}
.team-logo img {
width: 30px;
top: 3px;
position: relative;
}
.stats {
display: flex;
gap: 15px;
& > div {
width: 30px;
text-align: center;
}
}
.last-5-games {
display: flex;
gap: 5px;
& > div {
width: 25px;
height: 25px;
text-align: center;
border-radius: 3px;
font-size: 15px;
& .result-W {
background: #347d39;
color: white;
}
& .result-D {
background: gray;
color: white;
}
& .result-L {
background: lightcoral;
color: white;
}
}
}
Chúng tôi thêm cái này vào src/style.scss sẽ chăm sóc kiểu dáng trong cả trình chỉnh sửa và giao diện người dùng. Tôi sẽ không thể chia sẻ URL demo vì nó sẽ yêu cầu quyền truy cập của trình chỉnh sửa nhưng tôi có một video được quay để bạn xem demo:
Khá gọn gàng, phải không? Bây giờ chúng ta có một khối hoạt động đầy đủ không chỉ hiển thị trên giao diện người dùng mà còn tìm nạp dữ liệu API và hiển thị ngay tại đó trong Trình chỉnh sửa khối - với một nút làm mới để khởi động!
Nhưng nếu chúng ta muốn lấy Full lợi thế của Trình chỉnh sửa khối WordPress, chúng ta nên xem xét ánh xạ một số phần tử giao diện người dùng của khối để điều khiển khối cho những thứ như thiết lập màu sắc, kiểu chữ và khoảng cách. Đó là một bước tiếp theo tốt đẹp trong hành trình học tập phát triển khối.
