블록 편집기의 사용자 정의 WordPress 블록에 대한 설정 저장

이 일련의 튜토리얼에서 많은 작업이 수행되었습니다! 우리는 외부 API에서 데이터를 가져오고 프론트 엔드에서 데이터를 가져 오는 사용자 정의 WordPress 블록을 만들었습니다. 그런 다음 워드 프레스 블록 편집기에서 데이터를 직접 렌더링 할 수 있도록 작업을 확장했습니다. 그런 다음 WordPress InspectorControls 패키지의 구성 요소를 사용하여 해당 블록의 설정 UI 설정을 만들었습니다.

마지막 단계는 설정 옵션을 저장하는 것입니다. 이전 게시물의 내용을 기억한다면 실제로 블록 설정 UI에서 우리의 선택을 "저장"할 수 있었지만 그 선택은 실제로 어디에서나 저장되지 않았습니다. 일부 선택을하면 저장 한 다음 게시물로 돌아 가면 설정이 완전히 재설정됩니다.

루프를 닫고이 설정을 저장하여 다음에 사용자 정의 블록이 포함 된 게시물을 편집 할 때 지속될 수 있습니다!

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

프론트 엔드 렌더링 데이터 백엔드 렌더링 데이터

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

설정 속성을 저장 우리는 축구 팀 순위를 제공하는 API를 사용하고 있으며, 이는 국가, 리그 및 시즌을 기준으로 순위를 올리기 위해 사용합니다. 다음과 같이 각 속성에 대한 새 속성을 만들 수 있습니다.
• 다음으로, 우리는 Leaguesettings.js에서 속성을 설정해야합니다. 설정에서 ComboBoxControl이 업데이트 될 때마다 메소드를 사용하여 속성을 설정해야합니다. 하나의 데이터 엔드 포인트 만 사용할 때 더 간단합니다. 그러나 이제 우리는 여러 개의 입력을 가지고 있으며 조금 더 복잡합니다.
이것은 내가 그것을 조직하는 방법입니다. LeagueSettings.js에서 설정 속성과 그 값의 구조를 따르는 새로운 객체를 만들 것입니다.
나는 또한 초기 상태 변수를 null에서 해당 설정 변수로 변경했습니다.
• 각 에서 확장 연산자를 사용하여 클로닝 한 매개 변수로 를 생성하고 새로운 국가, 리그 및 시즌 값으로 이전 객체를 덮어 씁니다.
• 우리는 이것을 다음과 같이 정의 할 수 있습니다 : 따라서, 우리는 를 사용하여 두 객체를 병합합니다. 그런 다음 새로운 선택이 이루어지고 변경 될 때마다 각 설정 속성을 고려해야하기 때문에
객체를 다시

로 복제 할 수 있습니다.

마지막으로, 우리는 평소와 같이 최종 객체를 설정할 수 있습니다. UI의 선택을 업데이트하여 위의 속성이 변경되는지 여부를 확인할 수 있습니다.

를 확인하는 또 다른 방법은 DevTools에서

를 실행하여 속성을 찾는 것입니다.

해당 스크린 샷을주의 깊게 살펴보십시오. 이 값은

에 저장됩니다. attributes.settings 후크 덕분에 설정을 변경할 때마다 재 렌즈를 반응하여 실시간으로 발생하는 것을 볼 수 있습니다. useState() 블록 설정에서 값을 표시합니다 컨트롤 옵션에 설정 값을 저장하는 것은 각 컨트롤이 다른 설정 값에 의존하기 때문에 그다지 유용하지 않습니다 (예 : 리그 별 순위는 선택한 시즌에 따라 다름). 그러나 설정 값이 정적이고 서로 독립적 일 때 매우 유용합니다.

현재 설정을 복잡하게하지 않으면 설정 패널에 다른 섹션을 만들어 현재 속성을 표시 할 수 있습니다. 설정 값을 표시하는 자신의 방법을 선택할 수 있지만

패키지에서 팁 구성 요소를 가져옵니다.

여기서 팁 구성 요소에 표시하기 전에 값을 조건부로 확인하겠습니다.

이것은 블록 편집기에서 작동하는 방식입니다 :

API 데이터는 매번 수동으로 업데이트하지 않고 실시간 데이터를 표시 할 수있는 경우 더 강력합니다. 우리는이 시리즈의 다음 부분에서 이것을 탐구 할 것입니다.

위 내용은 블록 편집기의 사용자 정의 WordPress 블록에 대한 설정 저장의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!