Exibir dados personalizados no Editor de Blocos do WordPress nem sempre foi um processo simples. Isso exigia a criação de um bloco personalizado para buscar dados de campos personalizados ou outras fontes.
Isso dá muito trabalho e, muitas vezes, está fora do alcance de alguns desenvolvedores. Em alguns casos, isso também leva à criação de funcionalidades duplicadas. Por exemplo, imagine exibir dados de campos personalizados em um título de texto. Não deveria ser possível fazer isso sem precisar criar um bloco totalmente novo?
Finalmente, isso agora é possível. A chegada da API de Vinculação de Blocos na versão 6.5 do WordPress oferece uma solução nativa. Essa API permite vincular uma fonte de dados a uma seleção de blocos nativos do WordPress, possibilitando a criação de sites dinâmicos em menos tempo. Além disso, traz um novo nível de funcionalidade para temas baseados em blocos.
Este artigo apresenta a API de Vinculação de Blocos, demonstrando seu funcionamento por meio de um exemplo prático e analisa as perspectivas de sua evolução no futuro.
Por que a API de Vinculação de Blocos é uma ferramenta revolucionária
Os campos personalizados fazem parte do núcleo do WordPress há anos. Eles permitem a introdução de dados dinâmicos em artigos estáticos e oferecem mais opções de personalização para desenvolvedores. No entanto, seu uso sempre foi trabalhoso.
Você precisa usar a função register_meta() ou instalar um plugin para registrar e configurar novos campos. Essa é apenas a primeira etapa. Exibir esses dados no seu site é outro desafio.
Todos os dados de campos personalizados de um artigo são salvos como meta dados (post meta). Contudo, não havia uma maneira direta de exibir esses resultados. Para isso, era necessário um plugin e/ou adicionar código ao tema, o que não apenas tornava o processo mais complexo para os desenvolvedores, mas também gerava mais “dívida técnica” a ser gerenciada.
A introdução do Editor de Blocos e dos temas de blocos não ajudou em nada. Os dados de campos personalizados não podiam ser exibidos em nenhum dos blocos principais incluídos no WordPress, e as mesmas limitações se aplicavam aos temas de blocos. Esse pode ser um dos principais motivos pelos quais alguns desenvolvedores continuaram a usar o Editor Clássico e/ou os temas clássicos.
A API de Vinculação de Blocos trouxe essa funcionalidade ao WordPress. Agora, você não precisa mais de plugins para exibir dados. Ela vincula uma fonte de dados a blocos específicos, Botão, Título, Imagem e Parágrafo, abrindo um novo mundo de opções de personalização para temas de blocos e para o Editor de Blocos.
Embora não substitua completamente a capacidade de escrever PHP ou usar um plugin de campos personalizados, é um grande avanço. Em alguns cenários, pode ser exatamente o que você precisa.
Um caso de uso simples para a API de Vinculação de Blocos
Como a API de Vinculação de Blocos funciona na prática? Vamos mostrar um exemplo simples de como ela pode ser útil.
Nosso projeto em resumo:
- Instale a versão mais recente do WordPress e use o tema padrão Twenty Twenty-Four.
- Registre alguns campos personalizados:
- Citação: Uma citação famosa que você deseja destacar em cada página, vinculada a um bloco de parágrafo.
- Foto: A URL de uma foto diferente para cada página, vinculada a um bloco de Imagem.
- Por fim, edite o template de página do tema e adicione blocos que busquem esses valores de campo personalizado.
Agora que já temos nosso plano, vamos colocar a API de vinculação de blocos do WordPress em ação.
Habilitando campos personalizados no Editor de Blocos
O WordPress oculta os campos personalizados por padrão, portanto, a primeira etapa é habilitá-los no Editor de Blocos.
Para habilitar os campos personalizados, abra o menu Options (ícone ⋮) no Editor de Blocos. Em seguida, clique em Preferences.
Em seguida, clique no botão de alternância Custom fields para exibi-los no editor. Clique no botão Show & Reload Page para salvar suas alterações.
Registre os campos personalizados
Para registrar nossos campos personalizados, abra o arquivo functions.php do tema. Em seguida, adicione o seguinte código:
// Register custom fields for pages in WordPress using register_meta()
function kinsta_register_custom_meta_fields_for_pages() {
// Register the text field "kinsta_famous_quote" for pages
register_meta('post', 'kinsta_famous_quote', array(
'type' => 'string', // Text field
'single' => true, // Single value for the field
'sanitize_callback' => 'wp_strip_all_tags', // Sanitize the input
'show_in_rest' => true, // Expose this field in the REST API for Gutenberg
));
// Register the image field "kinsta_photo" for pages
register_meta('post', 'kinsta_photo', array(
'type' => 'string', // Can store the URL or attachment ID as a string
'single' => true, // Single value for the field
'sanitize_callback' => 'esc_url_raw', // Sanitize the input as a URL
'show_in_rest' => true, // Expose this field in the REST API for Gutenberg
));
}
add_action('init', 'kinsta_register_custom_meta_fields_for_pages');Observe a slug de cada campo, pois precisaremos delas na próxima etapa:
kinsta_famous_quotekinsta_photo
Você pode personalizar ainda mais esses campos seguindo a documentação do WordPress register_meta().
Também devemos observar que você pode registrar esses campos por meio de um plugin personalizado. A vantagem é que os campos continuarão funcionando, mesmo que você altere o tema.
Adicione valores de campo personalizado a uma página
Em seguida, adicione valores de campos personalizados a uma página seguindo estas etapas:
- Navegue até Pages > All Pages e selecione a página que você escolher.
- Role até a parte inferior da página e encontre o painel Custom Fields. Clique no botão Enter new localizado abaixo do primeiro campo. Adicione
kinsta_famous_quotena coluna da esquerda. Em seguida, adicione o conteúdo de nossa citação à direita: O futuro pertence àqueles que acreditam na beleza de seus sonhos. – Eleanor Roosevelt - Em seguida, clique no botão Add Custom Field para adicionar o campo
kinsta_photo. Adicione a URL da imagem que você deseja usar à direita.
Agora podemos salvar a página e repetir este processo para outras páginas do site.
Vincule os dados do campo personalizado aos blocos
Como queremos exibir nossos dados nas páginas, precisamos editar o template de página do nosso tema no Editor de Sites. Para isso:
Navegue até Appearance > Editor e clique no link Templates na coluna da esquerda. Encontre o template Pages e clique para abri-lo no editor.
Primeiro, precisamos escolher um local para exibir os dados do nosso campo personalizado. Vamos adicionar uma área na parte inferior de cada página.
Adicionaremos um bloco Group e, dentro dele, um bloco Columns. A coluna da esquerda contém um bloco Image (para exibir nossa foto), enquanto a coluna da direita terá um bloco Paragraph para exibir a citação.
Renomeamos nosso bloco de Grupo para Custom Field Data para referência futura. Isso facilita encontrá-lo caso desejemos editá-lo novamente mais tarde.
A API de Vinculação de Blocos ainda não tem uma interface visual para exibir valores (mais sobre isso abaixo). Portanto, precisamos editar o código de nossos blocos Image e Paragraph. Isso nos permite associar dados personalizados a eles.
Clique no menu Options (ícone ⋮) no canto superior direito do Editor de Sites. Selecione o link Code Editor. Isso abrirá o editor de código.
Procure o bloco Group que acabamos de adicionar. O código começa com:
<!-- wp:group {"metadata":{"name":"Custom Field Data"},"layout":{"type":"constrained"}} -->Também destacamos o código apropriado na imagem abaixo:
Em seguida, localize os blocos Image e Paragraph dentro desse grupo. O código padrão desses blocos é o seguinte:
Image:
<!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image -->Paragraph:
<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->Podemos editar esses blocos para vinculá-los aos nossos campos personalizados:
Image:
<!-- wp:image {"metadata":{"bindings":{"url":{"source":"core/post-meta","args":{"key":"kinsta_photo"}}}}} -->
<figure class="wp-block-image"><img src="" alt=""/></figure>
<!-- /wp:image -->Observe que o valor key está definido para o nosso campo personalizado kinsta_photo.
Paragraph:
<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"core/post-meta","args":{"key":"kinsta_famous_quote"}}}}} -->
<p></p>
<!-- /wp:paragraph -->Nesse caso, o valor key é definido para o nosso campo personalizado kinsta_famous_quote.
Salve as alterações e saia do Editor de código.
Clique nos blocos Image e Paragraph. O WordPress destacará cada bloco com um contorno roxo, indicando que está vinculado a uma fonte de dados. Além disso, o painel à direita exibirá uma área Attributes com mais detalhes.
Nota: Esses blocos não aparecerão durante a edição de páginas no painel, mas serão exibidos no frontend do seu site.
O passo final é visitar o frontend do site. Devemos ver nossa imagem e citação em qualquer página que contenha valores para os campos personalizados.
Outras possibilidades para vincular blocos
Criamos um exemplo básico de vinculação de blocos a uma fonte de dados. Entretanto, há outras maneiras de aprimorar nosso projeto, incluindo:
- Adicionar atributos ALT: Poderíamos registrar outro campo personalizado que define os atributos ALT em nossas fotos. Isso tornaria o recurso mais acessível. Como exemplo, poderíamos vincular um novo campo,
kinsta_photo_alt, ao atributoaltda seguinte forma:<!-- wp:image {"metadata":{"bindings":{"url":{"source":"namespace/slug","args":{"key":"kinsta_photo"}},"alt":{"source":"namespace/slug","args":{"key":"kinsta_photo_alt"}}}}} --> <figure class="wp-block-image"><img src="" alt=""/></figure> <!-- /wp:image --> - Use uma fonte de dados personalizada: Os campos personalizados atendem bem aos nossos objetivos. No entanto, poderíamos ter optado por buscar dados de uma fonte personalizada. As possibilidades incluem APIs, tabelas do banco de dados personalizadas, opções de plugin/tema, dados do site e taxonomias.
A ideia é pensar em como você deseja incluir dados personalizados em seu site. A partir daí, você cria um plano para implementá-los de uma forma que seja fácil de manter. A API de Vinculação de Blocos oferece muitas opções para você fazer isso.
Explorando mais a API de Vinculação de Blocos
A API de Vinculação de Blocos não é um produto finalizado. Ela continua evoluindo a cada nova versão do WordPress.
Por exemplo, diversas melhorias estão programadas para inclusão na versão 6.7 do WordPress:
- Uma interface de usuário padrão para vincular blocos a fontes de dados disponíveis.
- Etiquetas de metadados para facilitar a identificação.
- Compatibilidade com templates de tema de tipo de artigos personalizados.
- Permissões padrão para determinar quem pode editar as vinculações de blocos.
- Várias melhorias técnicas nos bastidores.
Fique atento a novos recursos que tornarão a API mais fácil de usar e ainda mais avançada.
Você também pode instalar o plugin Gutenberg para ter acesso antecipado a novos recursos antes que sejam integrados ao núcleo do WordPress. Recomendamos usá-lo em um ambiente de teste ou local.
Todos os clientes da Kinsta têm acesso a um ambiente de teste e também podem adicionar recursos premium.
Qualquer pessoa pode usar o DevKinsta, nosso conjunto gratuito de ferramentas para desenvolvimento local em WordPress. Com ele, você pode criar novos sites com um clique e desenvolvê-los diretamente do seu computador local.
Resumo
A API de Vinculação de Blocos representa uma mudança na forma como trabalhamos com dados personalizados no WordPress. Ela substitui a necessidade de plugins ou blocos personalizados em muitos casos. E traz mais flexibilidade aos blocos e temas de blocos do WordPress.
Ao adicioná-la ao seu fluxo de trabalho, você pode reduzir o tempo de desenvolvimento. Como um recurso nativo, ele também pode melhorar o desempenho em comparação com a dependência de plugins.
Esses são alguns grandes motivos para você começar a usá-lo hoje mesmo. E o futuro parece ainda mais brilhante!
Exploramos apenas o começo das possibilidades abordadas neste artigo. Aprofunde-se na API de vinculação de blocos explorando mais sobre como conectar campos personalizados, trabalhar com fontes de vinculação personalizadas e aprender a obter e definir valores de vinculação de blocos no editor.
Eric Karkovack is a freelance web developer and writer with over 25 years of experience. He loves helping others learn about WordPress, freelancing, and technology.
Deixe um comentário