지금까지 사용자 정의 WordPress 블록에서 외부 API의 데이터로 작업하는 방법을 다루었습니다. 우리는 그 과정을 거쳤습니다. 프런트 엔드에서 사용할 데이터 가져오기 WordPress 사이트 및 방법 WordPress 블록 편집기에서 직접 렌더링 콘텐츠에 블록을 배치할 때. 이번에는 우리가 만든 블록에 대한 설정 UI를 만들기 위해 블록 편집기의 제어판에 연결하여 이 두 기사를 연결하려고 합니다.
WordPress 블록에서 외부 API 작업
제가 말하는 제어판을 아시죠? 블록 편집기의 게시물 및 블록 설정이 포함된 오른쪽 패널입니다.
빨간색으로 강조 표시된 부분이 보입니까? 바로 제어판입니다. 현재 단락 블록이 선택되어 있고 이에 대한 설정이 패널에 표시됩니다. 스타일, 색상, 서체 등 여러 가지를 변경할 수 있습니다!
그게 바로 우리가 이번에 할 일입니다. 지난 두 기사에서 작업한 Football Rankings 블록의 설정에 대한 컨트롤을 만들 것입니다. 지난 시간에 우리는 블록에 축구 순위에 대한 외부 데이터를 가져오는 버튼을 만들었습니다. 우리는 이미 필요한 URL과 엔드포인트를 알고 있었습니다. 하지만 다른 국가의 순위를 가져오려면 어떻게 해야 할까요? 아니면 다른 리그? 다른 계절의 데이터는 어떻습니까?
이를 위해서는 양식 컨트롤이 필요합니다. 다음과 같은 대화식 React 구성 요소를 사용할 수 있습니다. 반응 선택 — 해당 데이터를 구문 분석하는 데 사용할 수 있는 다양한 API 옵션을 탐색합니다. 그러나 WordPress에는 바로 연결할 수 있는 많은 핵심 구성 요소가 포함되어 있으므로 그럴 필요가 없습니다!
XNUMXD덴탈의 선적 서류 비치 이러한 구성 요소에 대해 — InspectorControls — 점점 좋아지고 있습니다. WordPress 블록 편집기 핸드북. 시간이 지남에 따라 더 좋아지겠지만 동시에 워드프레스 구텐베르크 스토리북 과 WordPress 구텐베르크 구성 요소 추가 도움이 필요한 사이트.
API 아키텍처
무엇이든 연결하기 전에 먼저 필요한 것이 무엇인지 파악하는 것이 좋습니다. 가져오는 RapidAPI 데이터의 구조를 매핑하여 사용 가능한 항목을 알 수 있습니다.
시즌 및 국가는 리그 엔드포인트에 매핑되는 두 개의 최상위 엔드포인트입니다. 여기에서 순위 테이블을 채우는 데 이미 사용하고 있는 나머지 데이터가 있습니다. 따라서 우리가 원하는 것은 시즌, 국가 및 리그별로 데이터를 필터링하는 WordPress 블록 편집기에서 설정을 만든 다음 필터링된 데이터를 순위 테이블로 전달하는 것입니다. 이를 통해 WordPress 페이지에 블록을 놓거나 블록의 데이터 변형을 게시하고 표시할 수 있습니다.
순위를 얻으려면 먼저 리그를 얻어야 합니다. 그리고 리그를 얻으려면 먼저 국가 및/또는 시즌을 가져와야 합니다. RapidAPI 대시보드에서 다양한 엔드포인트를 볼 수 있습니다.
순위를 채우는 데 사용할 수 있는 다양한 데이터 조합이 있으며 원하는 데이터에 대한 기본 설정이 있을 수 있습니다. 이 기사를 위해 블록 설정 패널에서 다음 옵션을 만들 것입니다.
- 국가를 선택하십시오
- 리그 선택
- 시즌 선택
그런 다음 해당 선택 항목을 제출하고 관련 데이터를 가져와서 순위표로 전달하는 버튼이 있습니다.
국가 목록 로드 및 저장
선택할 국가 목록이 없으면 데이터를 원하는 국가를 선택할 수 없습니다. 따라서 첫 번째 작업은 RapidAPI에서 국가 목록을 가져오는 것입니다.
이상적인 것은 페이지나 게시물 콘텐츠에서 블록이 실제로 사용될 때 국가 목록을 가져오는 것입니다. 블록이 사용 중이 아니면 아무 것도 가져올 필요가 없습니다. 접근 방식은 우리가 수행한 것과 매우 유사합니다. 첫 번째 기사, 차이점은 반환된 국가 목록을 저장하기 위해 다른 API 끝점과 다른 속성을 사용한다는 것입니다. 다음과 같이 데이터를 가져오는 다른 WordPress 방법이 있습니다. API 가져오기, 그러나 그것은 우리가 여기서 하는 일의 범위를 벗어납니다.
API 데이터에서 국가 목록을 복사한 후 수동으로 포함하거나 별도의 API 또는 라이브러리를 사용하여 국가를 채울 수 있습니다. 하지만 우리가 사용하고 있는 API에는 이미 국가 목록이 있으므로 끝점 중 하나만 사용하겠습니다. 블록이 페이지에 삽입되거나 블록 편집기에서 콘텐츠를 게시할 때 초기 국가 목록이 로드되는지 확인합니다.
// 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));
}, []);국가 목록을 저장하는 상태 변수가 있습니다. 다음으로 구성 요소를 가져올 것입니다. @wordpress/블록 편집기 패키지 호출 InspectorControls 설정 컨트롤을 만드는 데 필요한 모든 구성 요소가 있는 곳입니다.
import { InspectorControls } from "@wordpress/block-editor";패키지의 GitHub 레포 설명을 잘한다 InspectorControls. 이 예에서는 이를 사용하여 국가, 리그 및 시즌과 같은 API 데이터 설정을 제어할 수 있습니다. 다음은 우리가 만들고 있는 UI에 대한 아이디어를 얻을 수 있는 미리 보기입니다.
블록 설정에서 이러한 선택이 이루어지면 다음에서 사용합니다. 블록의 Edit 기능:
{ countriesList && (
)}
여기서는 함수가 구성 요소만 로드하도록 조건부 렌더링을 사용하고 있는지 확인합니다. 시간 내에 국가 목록이 로드됩니다. 그게 궁금하시다면 LeagueSettings 별도의 구성 요소로 만든 사용자 정의 구성 요소입니다 components 블록의 하위 폴더를 더 깨끗하고 체계적으로 관리할 수 있습니다. Edit 수백 줄의 국가 데이터 대신 하나의 파일에서 처리할 수 있습니다.
우리는 그것을 가져올 수 있습니다 edit.js 다음과 같은 파일 :
import { LeagueSettings } from "./components/LeagueSettings";다음으로 필요한 소품을 LeagueSettings 부모의 구성 요소 Edit 컴포넌트에서 상태 변수 및 속성에 액세스할 수 있도록 LeagueSettings 자식 구성 요소. 다음과 같은 다른 방법으로도 그렇게 할 수 있습니다. 컨텍스트 API 소품 드릴링을 피하기 위해 지금 우리가 가지고 있는 것은 우리가 하고 있는 일에 완벽하게 적합합니다.
의 다른 부분들 Edit 기능을 구성 요소로 변환할 수도 있습니다. 예를 들어, 리그 순위 코드는 아마도 다음과 같이 별도의 구성 요소 안에 넣을 수 있습니다. LeagueTable.js — 그런 다음 가져온 것처럼 가져옵니다. LeagueSettings 로 Edit 기능.
내부 LeagueSettings.js 파일
LeagueSettings 다른 것과 같습니다 반응 구성 요소 부모 구성 요소에서 소품을 분해할 수 있습니다. 세 가지 상태 변수와 추가 leagueID 상태에서 ID를 추출할 것이기 때문입니다. league 목적:
const [country, setCountry] = useState(null);
const [league, setLeague] = useState(null);
const [season, setSeason] = useState(null);
const [leagueID, setLeagueID] = useState(null);가장 먼저 할 일은 PanelBody @wordpress/block-editor 패키지의 구성요소:
import { PanelBody } from "@wordpress/block-editor";... 그리고 그것을 우리의 return 기능:
다음의 기타 패널 태그 및 속성 - 이것들을 사용하는 것은 개인적인 취향입니다. 다른 것들은 필요하지 않지만… 모든 구성 요소를 살펴보십시오. 설정 패널을 만들 수 있습니다! 나는 그 단순함을 좋아한다. PanelBody 우리의 사용 사례를 위해. 확장 및 축소되어 블록의 드롭다운 설정이 표시됩니다.
말하자면, 우리는 그러한 선택을 할 선택권이 있습니다. 우리는 SelectControl 구성 요소 또는 ComboBoxControl, 문서에서는 "향상된 버전의 SelectControl, 검색 입력을 사용하여 옵션을 검색할 수 있는 기능이 추가되었습니다.” 국가 목록이 꽤 길어질 수 있고 사용자가 검색 쿼리를 수행하거나 목록에서 선택할 수 있기 때문에 이는 우리에게 좋습니다.
다음은 ComboboxControl 우리 나라 목록에서 일할 수 있습니다:
handleCountryChange(value) }
onInputChange={ (inputValue) => {
setFilteredCountryOptions(
setupCountrySelect.filter((option) =>
option.label
.toLowerCase()
.startsWith(inputValue.toLowerCase())
)
);
}}
/>XNUMXD덴탈의 ComboboxControl 컨트롤의 레이블 및 값에 대해 서로 다른 크기를 적용할 수 있다는 점에서 구성 가능합니다.
{
value: 'small',
label: 'Small',
},그러나 API 데이터는 이 구문에 없으므로 다음을 변환할 수 있습니다. countriesList 블록이 포함될 때 부모 구성 요소에서 오는 배열:
let setupCountrySelect;
setupCountrySelect = countriesList.map((country) => {
return {
label: country.name,
value: country.name,
};
});에서 국가를 선택하면 ComboboxControl, 국가 값이 변경되고 이에 따라 데이터를 필터링합니다.
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));
}국가 선택이 변경될 때 변경 사항을 처리하기 위해 다른 세 가지 상태 변수를 사용하고 있습니다.
const [filteredCountryOptions, setFilteredCountryOptions] = useState(setupCountrySelect);
const [filteredLeagueOptions, setFilteredLeagueOptions] = useState(null);
const [filteredSeasonOptions, setFilteredSeasonOptions] = useState(null);다른 설정 옵션은 어떻습니까?
다른 설정에 사용한 코드를 보여드리지만, 특별한 경우에 대한 오류를 정의하는 동안 일반적인 경우를 고려하는 것뿐입니다. 예를 들어 일부 국가 및 리그에서는 다음과 같은 이유로 오류가 발생합니다.
- 일부 리그에는 순위가 없으며,
- 일부 리그에는 순위가 있지만 단일 테이블에 있지 않습니다.
이것은 JavaScript 또는 React 자습서가 아니므로 사용하려는 API의 특수한 경우를 처리하도록 하겠습니다.
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);
}설정 선택 제출
. 마지막 기사, API에서 새로운 데이터를 가져오는 블록 편집기에 버튼을 만들었습니다. 이제 설정이 있으므로 더 이상 필요하지 않습니다. 글쎄요, 우리는 그것을 필요로 합니다. 단지 그것이 현재 어디에 있지 않을 뿐입니다. 블록 편집기에서 렌더링되는 블록에 직접 두는 대신 우리는 그것을 우리의 PanelBody 구성 요소를 사용하여 설정 선택을 제출합니다.
그래서 다시 LeagueSettings.js:
// When countriesList is loaded, show the country combo box
{ countriesList && (
handleCountryChange(value)}
onInputChange={(inputValue) => {
setFilteredCountryOptions(
setupCountrySelect.filter((option) =>
option.label
.toLowerCase()
.startsWith(inputValue.toLowerCase())
)
);
}}
/>
)}
// When filteredLeagueOptions is set through handleCountryChange, show league combobox
{ filteredLeagueOptions && (
handleLeagueChange(value)}
onInputChange={(inputValue) => {
setFilteredLeagueOptions(
setupLeagueSelect.filter((option) =>
option.label
.toLowerCase()
.startsWith(inputValue.toLowerCase())
)
);
}}
/>
)}
// When filteredSeasonOptions is set through handleLeagueChange, show season combobox
{ filteredSeasonOptions && (
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 && (
)
}
)}결과는 다음과 같습니다!
우리는 우리 블록으로 아주 좋은 위치에 있습니다. 블록 편집기와 사이트의 프런트 엔드에서 렌더링할 수 있습니다. 데이터를 필터링하기 위해 만든 설정 선택을 기반으로 외부 API에서 데이터를 가져올 수 있습니다. 그것은 꽤 대담한 기능입니다!
그러나 우리가 해결해야 할 또 다른 일이 있습니다. 바로 지금 차단이 포함된 페이지나 게시물을 저장하면 차단에 대해 선택한 설정이 재설정됩니다. 즉, 해당 선택 항목은 어디에도 저장되지 않습니다. 이러한 선택을 지속적으로 유지하려면 약간의 추가 작업이 필요합니다. 그것이 우리가 다음 기사에서 갈 계획인 곳이므로 계속 지켜봐주십시오.
