이것은 내 마지막 기사의 연속입니다. "프론트 엔드의 WordPress 블록에서 외부 API 데이터 렌더링". 마지막으로 외부 API를 가져와 WordPress 사이트의 프런트 엔드에서 가져온 데이터를 렌더링하는 블록과 통합하는 방법을 배웠습니다.
문제는 WordPress 블록 편집기에서 데이터를 볼 수 없도록 하는 방식으로 이 작업을 수행했다는 것입니다. 즉, 페이지에 블록을 삽입할 수 있지만 미리 볼 수는 없습니다. 블록이 게시될 때만 블록을 볼 수 있습니다.
지난 글에서 만든 예제 블록 플러그인을 다시 살펴보자. 이번에만 WordPress의 JavaScript 및 React 에코시스템을 사용하여 백엔드 블록 편집기에서도 해당 데이터를 가져오고 렌더링합니다.
우리가 그만둔 곳
우리가 이것을 시작하면서, 여기 데모가 있습니다 당신이 참조할 수 있는 마지막 기사에서 우리가 도착한 곳. 내가 사용한 것을 눈치채셨을 수도 있습니다. render_callback PHP 파일의 속성을 사용하고 콘텐츠를 렌더링할 수 있도록 지난 기사에서 메서드를 사용했습니다.
글쎄, 그것은 동적 블록을 생성하기 위해 일부 기본 WordPress 또는 PHP 기능을 사용해야 하는 상황에서 유용할 수 있습니다. 그러나 WordPress의 JavaScript 및 React(특히 JSX) 에코시스템을 사용하여 데이터베이스에 저장된 속성과 함께 정적 HTML을 렌더링하려는 경우에만 집중하면 됩니다. Edit 과 Save 블록 플러그인의 기능
- XNUMXD덴탈의
Edit기능은 블록 편집기에서 보고자 하는 내용을 기반으로 콘텐츠를 렌더링합니다. 여기에서 대화형 React 구성 요소를 가질 수 있습니다. - XNUMXD덴탈의
Save함수는 프런트 엔드에서 보고 싶은 내용을 기반으로 콘텐츠를 렌더링합니다. 여기에는 일반 React 구성 요소나 후크가 있을 수 없습니다. 속성과 함께 데이터베이스에 저장된 정적 HTML을 반환하는 데 사용됩니다.
XNUMXD덴탈의 Save 기능은 오늘 우리가 어울리는 곳입니다. 프론트 엔드에서 대화형 구성 요소를 만들 수 있지만 이를 위해서는 수동으로 이를 외부에 포함하고 액세스해야 합니다. Save 우리가 지난 기사에서 했던 것처럼 파일에서 함수.
그래서 지난 기사에서 했던 것과 같은 내용을 다루겠지만 이번에는 블록 편집기에서 미리보기를 볼 수 있습니다. 전에 프론트 엔드에 게시합니다.
블록 소품
나는 의도적으로 에 대한 설명을 생략했습니다. edit 마지막 기사에서 함수의 props는 렌더링의 요점에서 초점을 벗어났기 때문입니다.
React 배경 지식이 있는 경우 내가 말하는 내용을 이해할 수 있지만 처음 사용하는 경우 다음을 권장합니다. React 문서에서 구성 요소 및 소품 확인.
우리가 기록하면 props 객체를 콘솔에 보내면 블록과 관련된 WordPress 함수 및 변수 목록을 반환합니다.
우리는 단지 필요합니다 attributes 개체와 setAttributes 내가 분해할 함수 props 내 코드의 개체입니다. 지난 기사에서 RapidAPI의 코드를 수정하여 API 데이터를 저장할 수 있도록 했습니다. setAttributes(). Props는 읽기만 가능하므로 직접 수정할 수 없습니다.
블록 소품은 상태 변수와 유사하며 setState React에서 작동하지만 React는 클라이언트 측에서 작동하고 setAttributes() 게시물을 저장한 후 WordPress 데이터베이스에 속성을 영구적으로 저장하는 데 사용됩니다. 그래서 우리가 해야 할 일은 그들을 저장하는 것입니다. attributes.data 그런 다음 그것을 초기 값으로 호출합니다. useState() 변하기 쉬운.
XNUMXD덴탈의 edit 기능
에서 사용한 HTML 코드를 복사하여 붙여넣겠습니다. football-rankings.php 마지막 기사에서 약간 수정하여 JavaScript 배경으로 이동합니다. 프론트 엔드 스타일 및 스크립트에 대한 마지막 기사에서 두 개의 추가 파일을 생성한 방법을 기억하십니까? 오늘날 우리가 접근하는 방식으로는 이러한 파일을 생성할 필요가 없습니다. 대신 모든 것을 다음으로 이동할 수 있습니다. Edit 기능.
전체 코드
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}
);
})}
);
}
)}
)}
);
}React 후크를 포함했습니다. useState() 에 @wordpress/element React 라이브러리에서 사용하는 것보다. 일반적인 방식으로 로드하면 내가 사용하는 모든 블록에 대해 React가 다운로드되기 때문입니다. 하지만 내가 사용하는 경우 @wordpress/element 단일 소스, 즉 React 상단의 WordPress 레이어에서 로드됩니다.
이번에도 내부에 코드를 래핑하지 않았습니다. useEffect() 그러나 버튼을 클릭할 때만 호출되는 함수 내부에서 가져온 데이터를 실시간으로 미리 볼 수 있습니다. 라는 상태 변수를 사용했습니다. apiData 조건부로 리그 테이블을 렌더링합니다. 따라서 버튼을 클릭하고 데이터를 가져오면 설정합니다. apiData 내부의 새로운 데이터에 fetchData() 사용 가능한 축구 순위 테이블의 HTML이 있는 다시 렌더링이 있습니다.
게시물이 저장되고 페이지가 새로 고쳐지면 리그 테이블이 사라집니다. 그것은 우리가 빈 상태(null)에 대한 apiData의 초기 값입니다. 게시물이 저장되면 속성이 attributes.data 객체에 대한 초기 값으로 호출합니다. useState() 다음과 같은 변수:
const [apiData, setApiData] = useState(attributes.data);XNUMXD덴탈의 save 기능
우리는 거의 똑같은 일을 할 것입니다 save 기능을 약간 수정합니다. 예를 들어 프런트 엔드에 "데이터 가져오기" 버튼이 필요하지 않으며 apiData 상태 변수도 이미 확인하고 있기 때문에 필요하지 않습니다. edit 기능. 하지만 우리는 무작위가 필요합니다 apiData 확인하는 변수 attributes.data 조건부로 JSX를 렌더링하지 않으면 정의되지 않은 오류가 발생하고 블록 편집기 UI는 공백이 됩니다.
전체 코드
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}
);
})}
);
})}
)}
);
}수정하는 경우 save 블록이 이미 블록 편집기에 있는 후 함수는 다음과 같은 오류를 표시합니다.
저장된 콘텐츠의 마크업이 새 콘텐츠의 마크업과 다르기 때문입니다. save 기능. 우리는 개발 모드에 있기 때문에 현재 페이지에서 블록을 제거하고 새 블록으로 다시 삽입하는 것이 더 쉽습니다. 그렇게 하면 업데이트된 코드가 대신 사용되며 모든 것이 동기화됩니다.
우리가 사용했다면 제거하고 다시 추가하는 이러한 상황을 피할 수 있습니다. render_callback 출력이 동적이며 저장 기능 대신 PHP에 의해 제어되기 때문에 메서드입니다. 따라서 각 방법에는 고유한 장점과 단점이 있습니다.
Tom Nowell이 하지 말아야 할 일에 대한 철저한 설명을 제공합니다. save ~에 기능하다 이 스택 오버플로 답변.
편집기 및 프런트 엔드에서 블록 스타일 지정
스타일링에 관해서는 지난 기사에서 살펴본 것과 거의 동일하지만 몇 가지 사소한 변경 사항이 있어 댓글에서 설명했습니다. 나는 단지 여기에서 전체 스타일을 제공하는 것입니다. 이것은 복사하여 붙여넣기를 원하는 것이 아니라 개념 증명일 뿐입니다(이와 같은 스타일의 축구 순위를 표시하기 위한 블록이 실제로 필요한 경우가 아닌 한). 그리고 빌드 시 CSS로 컴파일되는 SCSS를 여전히 사용하고 있습니다.
편집기 스타일
/* 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);
}
}
}프런트 엔드 스타일
/* 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;
}
}
}
우리는 이것을 추가합니다 src/style.scss 에디터와 프론트엔드 모두에서 스타일을 관리합니다. 편집자 액세스가 필요하기 때문에 데모 URL을 공유할 수는 없지만 데모를 볼 수 있도록 동영상을 녹화했습니다.
꽤 깔끔하죠? 이제 프론트 엔드에서 렌더링할 뿐만 아니라 API 데이터를 가져와서 블록 편집기에서 바로 렌더링하는 완전히 작동하는 블록이 생겼습니다. 새로 고침 버튼을 사용하여 부팅할 수 있습니다!
그러나 우리가 취하고 싶다면 가득 찬 WordPress 블록 편집기의 장점을 고려하여 블록의 UI 요소 중 일부를 다음으로 매핑하는 것을 고려해야 합니다. 블록 컨트롤 색상, 타이포그래피 및 간격 설정과 같은 작업에 사용됩니다. 블록 개발 학습 여정의 멋진 다음 단계입니다.
