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

우리는 이 시리즈에서 많은 것을 달성했습니다! 우리는 외부 API에서 데이터를 가져와 프런트 엔드에서 렌더링하는 사용자 지정 WordPress 블록을 만들었습니다. 그런 다음 데이터가 WordPress 블록 편집기에서 직접 렌더링되도록 해당 작업을 수행하고 확장했습니다. 그런 다음 WordPress의 구성 요소를 사용하여 블록에 대한 설정 UI를 만들었습니다. InspectorControls 꾸러미.

우리가 다룰 마지막 비트가 하나 있는데 그것은 설정 옵션을 저장하는 것입니다. 이전 기사에서 기억해 보면 블록 설정 UI에서 선택 항목을 기술적으로 "저장"할 수 있지만 실제로는 어디에도 저장되지 않습니다. 몇 가지를 선택하고 저장한 다음 게시물로 돌아가면 설정이 완전히 재설정됩니다.

루프를 닫고 해당 설정을 저장하여 다음에 사용자 지정 블록이 포함된 게시물을 편집할 때 유지되도록 합시다!

설정 속성 저장

우리는 다음을 제공하는 API로 작업하고 있습니다. 축구 축구 팀 순위를 가져오고 국가, 리그 및 시즌을 기준으로 순위를 표시하기 위해 가져오는 데 사용하고 있습니다. 다음과 같이 각각에 대해 새 속성을 만들 수 있습니다.

// index.js

attributes: {
  data: {
    type: "object",
  },
  settings: {
    type: "object",
    default: {
      country: {
        type: "string",
      },
      league: {
        type: "string",
      },
      season: {
        type: "string",
      },
    },
  },
},

다음으로 속성을 설정해야 합니다. LeagueSettings.js. 때마다 ComboboxControl 설정 UI에서 업데이트되면 다음을 사용하여 속성을 설정해야 합니다. setAttributes() 방법. 이것은 하나의 데이터 끝점으로만 작업할 때 더 간단했습니다. 하지만 이제 입력이 여러 개이므로 조금 더 복잡해졌습니다.

이렇게 정리할 예정입니다. 나는 새로운 개체를 만들 것입니다 LeagueSettings.js 설정 속성 및 해당 값의 구조를 따릅니다.

// LeagueSettings.js

let localSettings = {
  country: attributes.settings.country,
  league: attributes.settings.league,
  season: attributes.settings.season,
};

또한 초기 상태 변수를 null 각각의 설정 변수에.

// LeagueSettings.js

const [country, setCountry] = useState(attributes.settings.country);
const [league, setLeague] = useState(attributes.settings.league);
const [season, setSeason] = useState(attributes.settings.season);

각각의 handle______Change(), 나는 setLocalAttributes() 이전 항목을 복제하고 덮어쓰는 인수가 있습니다. localSettings 새 국가, 리그 및 시즌 값을 가진 개체입니다. 이것은 스프레드 연산자의 도움을 받아 수행됩니다.

// LeagueSettings.js

function handleCountryChange(value) {
  // Initial code
  setLocalAttributes({ ...localSettings, country: value });
  // Rest of the code
}

function handleLeagueChange(value) {
  // Initial code
  setLocalAttributes({ ...localSettings, league: value });
  // Rest of the code
}

function handleSeasonChange(value) {
  // Initial code
  setLocalAttributes({ ...localSettings, season: value });
  // Rest of the code
}

우리는 정의할 수 있습니다 setLocalAttributes() 이렇게 :

// LeagueSettings.js

function setLocalAttributes(value) {
  let newSettings = Object.assign(localSettings, value);
  localSettings = { ...newSettings };
  setAttributes({ settings: localSettings });
}

그래서, 우리는 사용하고 있습니다 Object.assign() 두 개체를 병합합니다. 그런 다음 복제할 수 있습니다. newSettings 이의를 제기하다 localSettings 새로운 선택이 이루어지고 변경이 발생할 때 각 설정 속성을 고려해야 하기 때문입니다.

마지막으로 setAttributes() 최종 객체를 설정하기 위해 일반적으로 수행하는 것처럼. UI에서 선택 항목을 업데이트하여 위 속성이 변경되는지 확인할 수 있습니다.

확인하는 또 다른 방법은 속성을 찾기 위해 DevTools에서 console.log()를 수행하는 것입니다.

해당 스크린샷을 자세히 살펴보십시오. 값은 다음에 저장됩니다. attributes.settings. 설정을 변경할 때마다 React가 다시 렌더링하기 때문에 실시간으로 볼 수 있습니다. useState() 훅.

블록 설정 UI에 값 표시

제어 옵션 자체에 설정 값을 저장하는 것은 각각 다른 설정 값에 따라 달라지기 때문에(예: 리그별 순위는 선택한 시즌에 따라 다름) 매우 유용하지 않습니다. 그러나 설정 값이 정적이고 설정이 서로 독립적인 상황에서 매우 유용합니다.

현재 설정을 복잡하게 만들지 않고 설정 패널 내에 현재 속성을 표시하는 다른 섹션을 만들 수 있습니다. 설정 값을 표시하는 방법을 선택할 수 있지만 여기서는 Tip 구성 요소 인사말 @wordpress/components 패키지 :

// LeagueSettings.js
import { Tip } from "@wordpress/components";

여기 있는 동안 값을 표시하기 전에 조건부 검사를 수행하겠습니다. Tip 구성 요소:

  {country && league && season && (
    
      
Current Settings: 
      

        

          Country: {attributes.settings.country}
        
        

          League: {attributes.settings.league}
        
        

          Season: {attributes.settings.season}
        
      
    
  )}

블록 편집기에서 작동하는 방법은 다음과 같습니다.

API 데이터는 매번 수동으로 업데이트하지 않고도 라이브 데이터를 표시할 수 있을 때 더욱 강력해집니다. 이 시리즈의 다음 기사에서 이에 대해 살펴보겠습니다.