사용자 정의 WordPress 블록에 대한 설정 UI 작성

이 기사에서는 외부 API와 상호 작용하는 사용자 정의 WordPress 블록에 대한 설정 UI 설정을 보여줍니다. 블록은 축구 순위를 표시하고 설정을 통해 사용자는 국가, 리그 및 시즌별로 데이터를 필터링 할 수 있습니다.

이전 기사는 블록 편집기 및 프론트 엔드에서 API 데이터를 가져 오기 및 렌더링했습니다. 이 기사는 WordPress 블록 편집기 제어판 (오른쪽 사이드 바) 내에 설정 패널을 통합하는 데 중점을 둡니다. 이 패널은 사용자가 블록에 표시된 데이터를 사용자 정의 할 수 있습니다.

프로세스에는 사용자 친화적 인 인터페이스를 구축하기 위해 WordPress의 및 핵심 구성 요소를 활용하는 것이 포함됩니다. API 아키텍처는 국가, 리그, 계절 및 순위 데이터 간의 관계를 강조하여 설명되어 있습니다. 주요 단계는 다음과 같습니다

국가 데이터 가져 오기 : 이 기사는 및

를 사용하여 RapidApi에서 국가 목록을 가져 오는 방법을 보여줍니다.

InspectorControls 구현 PanelBody : ComboboxControl>

구성 요소가 가져 와서 사용자 정의 설정 UI를 수용하는 데 사용됩니다.

사용자 정의 구성 요소 만들기 () : 별도의 구성 요소는 설정을 관리하여 코드 구성을 향상시킵니다. 이 구성 요소는 를 그룹 설정에 사용하고 컨트리, 리그 및 시즌 선택의 경우
1. 입니다.

   는 옵션 내에서 검색 할 수 있습니다 데이터 처리 : , 및 useEffect와 같은 기능은 사용자 선택에 따라 구성 요소의 상태를 업데이트하고 API 데이터를 동적으로 필터링합니다. fetch

제출에서 데이터 가져 오기 : "페치 데이터"버튼 버튼이 선택된 설정을 사용하여 API 호출을 트리거하고 표시된 순위를 업데이트합니다.

2. 이 기사는 API 데이터를 에 적합한 형식으로 변환하는 것을 포함하여 이러한 단계를 설명하는 코드 스 니펫을 제공합니다. 또한 API에서 데이터가 누락 될 수있는 경우에 대한 잠재적 오류 처리를 다룹니다. 현재 구현은 동적 데이터 가져 오기를 허용하지만 설정은 아직 지속되지 않습니다. 다음 기사는 사용자 선택을 영구적으로 만들기 위해 이러한 설정 저장을 다룰 것입니다.

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