Salvando configurações para um bloco personalizado do WordPress no editor de bloco

Nós realizamos um monte de coisas nesta série! Criamos um bloco personalizado do WordPress que busca dados de uma API externa e os renderiza no front-end. Em seguida, pegamos esse trabalho e o estendemos para que os dados também sejam renderizados diretamente no editor de blocos do WordPress. Depois disso, criamos uma interface do usuário de configurações para o bloco usando componentes do WordPress InspectorControls pacote.

Há uma última parte para cobrirmos e isso é salvar as opções de configuração. Se nos lembrarmos do último artigo, somos tecnicamente capazes de “salvar” nossas seleções na IU de configurações de bloco, mas elas não são realmente armazenadas em nenhum lugar. Se fizermos algumas seleções, salvá-las e retornar à postagem, as configurações serão totalmente redefinidas.

Vamos fechar o ciclo e salvar essas configurações para que elas persistam na próxima vez que editarmos uma postagem que contenha nosso bloco personalizado!

Salvando atributos de configurações

Estamos trabalhando com uma API que nos fornece futebol classificação do time de futebol e estamos usando-a para buscar a exibição de classificações com base no país, liga e temporada. Podemos criar novos atributos para cada um deles assim:

// index.js

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

Em seguida, precisamos definir os atributos de LeagueSettings.js. Sempre que um ComboboxControl é atualizado em nossa interface do usuário de configurações, precisamos definir os atributos usando o setAttributes() método. Isso era mais direto quando estávamos trabalhando apenas com um endpoint de dados. Mas agora que temos várias entradas, é um pouco mais complicado.

É assim que vou organizar. Vou criar um novo objeto em LeagueSettings.js que segue a estrutura dos atributos de configurações e seus valores.

// LeagueSettings.js

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

Eu também vou mudar as variáveis ​​de estado iniciais de null às respectivas variáveis ​​de configuração.

// LeagueSettings.js

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

Em cada um dos handle______Change(), vou criar um setLocalAttributes() que tem um argumento que clona e sobrescreve o anterior localSettings objeto com os novos valores de país, liga e temporada. Isso é feito usando a ajuda do operador spread.

// 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
}

Podemos definir o setLocalAttributes() como isso:

// LeagueSettings.js

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

Então, estamos usando Object.assign() para mesclar os dois objetos. Então podemos clonar o newSettings objeto de volta para localSettings porque também precisamos levar em conta cada atributo de configuração quando uma nova seleção é feita e ocorre uma alteração.

Por fim, podemos usar o setAttributes() como fazemos normalmente para definir o objeto final. Você pode confirmar se os atributos acima estão mudando atualizando as seleções na IU.

Outra forma de confirmar é fazer um console.log() no DevTools para encontrar os atributos.

Olhe mais de perto a captura de tela. Os valores são armazenados em attributes.settings. Podemos ver isso acontecer ao vivo porque o React renderiza novamente toda vez que fazemos uma alteração nas configurações, graças ao useState() gancho.

Exibindo os valores na interface do usuário de configurações de blocos

Não é muito útil armazenar os valores de configuração nas próprias opções de controle, pois cada um depende do outro valor de configuração (por exemplo, a classificação por liga depende da temporada selecionada). Mas é muito útil em situações onde os valores das configurações são estáticos e onde as configurações são independentes umas das outras.

Sem complicar as configurações atuais, podemos criar outra seção dentro do painel de configurações que mostra os atributos atuais. Você pode escolher sua maneira de exibir os valores das configurações, mas vou importar um Tip componente do @wordpress/components pacote:

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

Enquanto estiver aqui, farei uma verificação condicional dos valores antes de exibi-los dentro do Tip componente:

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

        

          Country: {attributes.settings.country}
        
        

          League: {attributes.settings.league}
        
        

          Season: {attributes.settings.season}
        
      
    
  )}

Veja como isso acaba funcionando no editor de blocos:

Os dados da API são mais poderosos quando os dados ao vivo podem ser exibidos sem a necessidade de atualizá-los manualmente todas as vezes. Veremos isso na próxima parte desta série.