백엔드의 WordPress 블록에서 외부 API 데이터 렌더링

이 기사는 "WordPress 블록의 앞쪽 끝에 외부 API 데이터 렌더링"에 대한 이전 기사를 따릅니다. 이전 게시물에서는 외부 API를 얻는 방법을 배웠고 WordPress 웹 사이트의 프론트 엔드에서 검색된 데이터를 렌더링하는 블록과 통합합니다.

문제는 우리가 구현하는 방식으로 인해 WordPress 블록 편집기에서 데이터를 볼 수 없다는 것입니다. 다시 말해, 우리는 페이지에 블록을 삽입 할 수 있지만 미리보기를 볼 수는 없습니다. 블록은 출시 후에 만 ​​볼 수 있습니다.

이전 게시물에서 만든 샘플 블록 플러그인을 검토하겠습니다. 이번에는 WordPress의 JavaScript를 사용하고 생태계를 반응하여 백엔드 블록 편집기에서 데이터를 얻고 렌더링합니다.

WordPress 블록에서 외부 API를 사용하는

프론트 엔드 렌더링 데이터 ​​백엔드 렌더링 데이터 (현재 위치)

사용자 정의 설정을 만듭니다 사용자 지정 블록 설정 저장 실시간 API 데이터 사용 (곧 출시)

이전 기사의 결과 시작하기 전에 이전 게시물에서 완료 한 데모가 있습니다. 참조 할 수 있습니다. 이전 게시물에서
• 메소드를 사용하여 PHP 파일에서 속성을 사용하고 컨텐츠를 렌더링 할 수 있음을 알 수 있습니다.
이것은 동적 블록을 만들기 위해 기본 워드 프레스 또는 PHP 함수를 사용해야하는 상황에 유용합니다. 그러나 WordPress의 JavaScript 및 React (특히 JSX) 생태계를 사용하여 정적 HTML과 데이터베이스에 저장된 속성을 렌더링하려면 블록 플러그인의 및
• 기능에만 집중하면됩니다.
편집 함수는 블록 편집기에서보고 싶은 내용을 기반으로 컨텐츠를 렌더링합니다. 여기에서 대화식 반응 구성 요소를 사용할 수 있습니다.
저장
• 함수는 프론트 엔드에서보고 싶은 내용을 기반으로 컨텐츠를 렌더링합니다. 여기서는 정기적 인 반응 구성 요소 나 후크를 사용할 수 없습니다. 데이터베이스 및 속성에 저장된 정적 HTML을 반환하는 데 사용됩니다.
• 기능은 오늘날 우리의 토론의 초점입니다. 프론트 엔드에서 대화식 구성 요소를 만들 수 있지만이를 위해서는 이전 게시물에서와 같이 파일에 수동으로 포함하고 액세스해야합니다. 그래서 우리가 이전 게시물에서 한 것과 동일한 작업을 다룰 것입니다. 그러나 이번에는 프론트 엔드 에 게시하기 전에 블록 편집기에서 미리보기를 볼 수 있습니다.
블록 속성 나는 기본 내용 (렌더링)을 산만하게하기 때문에 이전 게시물에서

함수 속성에 대한 설명을 의도적으로 생략했습니다.

반응 배경이 있으면 내가 말한 것을 이해할 수 있지만, 당신이 처음이라면, 반응 문서의 구성 요소와 속성을 확인하는 것이 좋습니다.

우리는 단지 함수가 필요하며, 코드의 attributes 객체에서 해체하겠습니다. 이전 게시물에서 API 데이터를 를 통해 저장할 수 있도록 RapidApi 코드를 수정했습니다. 는 읽기 전용이므로 직접 수정할 수 없습니다. setAttributes 블록 속성은 상태 변수와 비슷하고 React에서는 props가 유사하지만 React는 클라이언트에서 실행되는 반면 setAttributes()는 게시물을 저장 한 후 WordPress 데이터베이스에 속성을 영구적으로 저장하는 데 사용됩니다. 따라서 우리가해야 할 일은 Props로 저장 한 다음 변수의 초기 값이라고 부릅니다.

편집 함수 이전 게시물에서 사용한 HTML 코드를 복사하여 붙여 넣고 편집하여 JavaScript 배경으로 전환합니다. 이전 게시물에서 프론트 엔드 스타일과 스크립트를위한 두 개의 추가 파일을 만들었습니다. 오늘 우리의 접근 방식을 따르십시오. 이러한 파일을 만들 필요가 없습니다. 대신, 우리는 모든 것을

함수로 옮길 수 있습니다. setState setAttributes() 전체 코드 attributes.data````javaScript "@WordPress/Element"에서 {usestate} 가져 오기; 내보내기 기본 기능 편집 (소품) { const {속성, setattributes} = props; const [apidata, setapidata] = usestate (attributes.data); function fetchData () { const 옵션 = { 방법 : "get", 헤더 : { "Xapidapi-Key": "빠른 API 키", "Xapidapi-Host": "API-Football-v1.p.rapidapi.com", }, }; 술책( " https://www.php.cn/link/a2a750ff64f34c66249d0f7d3dd42004 ", ",", 옵션 )) .Then ((응답) = & gt; response.json ()) . ((응답) = & gt; { NewData = {... 응답}; setattributes ({data : newData}); setapidata (newData); // 상태를 수정하기 위해 새 데이터를 사용합니다 }) .catch ((err) = & gt; console.error (err)); } <.> useState() 반환 (

페치 데이터 {/ 버튼 데이터 수집을 유발합니다

/} {apidata && ( {/football-rankings.php 스타일 선택기에 대한 ID 추가 /} {/Edit ClassName 사용 /}

순위

로고

팀 이름

gp

{/

... 기타 통계 ... /}

형태의 역사

{apidata.response [0] .League.standings [0] .map ((el) = & gt; { // ... 테이블 데이터 렌더링 ... })}

)} ); } ``@WordPress/element 我已经从 usestate () 中包含了React钩子 이번에는 코드를 로 감싸는 대신 버튼을 클릭 할 때만 호출되는 함수로 코드를 랩핑하여 검색된 데이터를 실시간으로 미리 볼 수 있습니다. 리그 테이블을 조건부로 렌더링하기 위해 ，而不是从React库中使用它。这是因为如果我以常规方式加载，它会为我使用的每个区块下载React。但是，如果我使用라는 상태 변수를 사용했습니다. 따라서 버튼을 클릭하고 데이터가 가져 오면 의 를 로 설정하고 사용 가능한 축구 순위 테이블 html로 다시 렌더링됩니다. 일단 게시물이 저장되고 페이지가 새로 고침되면 리그 테이블이 사라질 것입니다. 이것은 우리가 null 상태 (null)를

의 초기 값으로 사용하기 때문입니다. 게시물이 저장되면 속성은 useEffect() 객체에 저장되며, 이는 아래와 같이 apiData 변수의 초기 값이라고합니다. apiData fetchData() 저장 함수 우리는

함수로 거의 동일한 일을하지만 약간의 수정으로 수행 할 것입니다. 예를 들어, 프론트 엔드에는 "데이터 get"버튼이 필요하지 않으며 함수에서 확인했기 때문에 상태 변수도 필요하지 않습니다. 그러나 >를 확인하려면 랜덤 변수가 필요합니다. 그렇지 않으면 정의되지 않은 오류가 발생하고 블록 편집기 UI가 비워집니다.

apiData 전체 코드 attributes.data````javaScript 내보내기 기본 기능 저장 (소품) { const {attributes} = props; const apidata = attributes.data; useState() 반환 ( apidata && (// apidata를 사용할 수있는 경우에만 렌더링

{/

const [apiData, setApiData] = useState(attributes.data);

... 렌더링 테이블 데이터는 기본적으로 편집 함수의 코드와 동일합니다 ... /}

)) ); } `` save '함수는 다음 오류가 표시됩니다 이것은 저장된 내용의 태그가 새로운 함수의 태그와 다르기 때문입니다. 개발 모드에 있으므로 현재 페이지에서 블록을 삭제하고 새 블록으로 재 인입 할 수 있습니다.이 방법으로 업데이트 된 코드가 사용되며 모든 것이 동기화되도록 복원됩니다. 如果您在区块已存在于区块编辑器中后修改 방법을 사용하면 출력이 동적이며 함수가 아닌 PHP에 의해 제어되기 때문에 피할 수 있습니다. 따라서 각 방법에는 고유 한 장점과 단점이 있습니다.

Tom Nowell 은이 스택 오버 플로우 답변에서 save 함수에서 수행하지 않아야 할 작업에 대한 자세한 설명을 제공합니다.

편집기에서 블록 스타일을 설정하고 프론트 엔드

스타일과 관련하여 이전 게시물에서 본 것과 거의 동일하지만 의견에서 설명한 약간의 변경 사항이 있습니다. 나는 단지 여기에 풀 스타일을 제공하고 있습니다. 그것은 단지 당신이 복사하고 붙여 넣기를 원하는 것이 아니라 개념의 증거 일 뿐이기 때문입니다 (이와 같은 스타일의 축구 순위를 보여주는 블록이 필요하지 않는 한). 빌드 타임에 CSS에 컴파일하는 SCSS를 여전히 사용하고 있습니다. render_callback save 편집기 스타일

save 프론트 엔드 스타일

```CSS / 프론트 엔드 블록 스타일

/ .WP- 블록 포스트-폰텐트 .WP- 블록-푸트 볼 레인지 리그-테이블 { / ... 스타일 ...

/ } <.> 리그-스탠딩 { /

사용 ID 선택기 사용 감 } `` <p> 우리는 이것을 편집기와 프론트 엔드의 스타일을 담당하는 </p> src/style.scss`에 추가합니다. 편집기 액세스가 필요한 데모 URL을 공유 할 수는 없지만 데모를 볼 수있는 비디오를 녹화했습니다. 데모보기는 매우 깔끔합니다. 이제 우리는 프론트 엔드에서 렌더링 할뿐만 아니라 블록 편집기에서 API 데이터와 렌더링을 가져 오는 완전히 기능적인 블록을 가지고 있습니다. 새로 고침 버튼이 있습니다!

그러나 WordPress 블록 편집기를 최대한 활용하려면 색상 설정, 타이포그래피 및 간격과 같은 블록 컨트롤을 블록 UI 요소를 매핑하는 것을 고려해야합니다. 이것은 블록 개발 학습 여정의 다음 단계입니다.

위 내용은 백엔드의 WordPress 블록에서 외부 API 데이터 렌더링의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!