Este artigo apresenta a API de Vincula\u00e7\u00e3o de Blocos, demonstrando seu funcionamento por meio de um exemplo pr\u00e1tico e analisa as perspectivas de sua evolu\u00e7\u00e3o no futuro.<\/p>\n
Por que a API de Vincula\u00e7\u00e3o de Blocos \u00e9 uma ferramenta revolucion\u00e1ria<\/h2>\n
Os campos personalizados<\/a> fazem parte do n\u00facleo do WordPress h\u00e1 anos. Eles permitem a introdu\u00e7\u00e3o de dados din\u00e2micos em artigos est\u00e1ticos e oferecem mais op\u00e7\u00f5es de personaliza\u00e7\u00e3o para desenvolvedores. No entanto, seu uso sempre foi trabalhoso.<\/p>\n Voc\u00ea precisa usar a fun\u00e7\u00e3o Todos os dados de campos personalizados de um artigo s\u00e3o salvos como meta dados<\/a> (post meta). Contudo, n\u00e3o havia uma maneira direta de exibir esses resultados. Para isso, era necess\u00e1rio um plugin e\/ou adicionar c\u00f3digo<\/a> ao tema, o que n\u00e3o apenas tornava o processo mais complexo para os desenvolvedores, mas tamb\u00e9m gerava mais “d\u00edvida t\u00e9cnica” a ser gerenciada.<\/p>\n A introdu\u00e7\u00e3o do Editor de Blocos e dos temas de blocos<\/a> n\u00e3o ajudou em nada. Os dados de campos personalizados n\u00e3o podiam ser exibidos em nenhum dos blocos principais inclu\u00eddos no WordPress, e as mesmas limita\u00e7\u00f5es se aplicavam aos temas de blocos. Esse pode ser um dos principais motivos pelos quais alguns desenvolvedores continuaram a usar o Editor Cl\u00e1ssico e\/ou os temas cl\u00e1ssicos<\/a>.<\/p>\n A API de Vincula\u00e7\u00e3o de Blocos trouxe essa funcionalidade ao WordPress. Agora, voc\u00ea n\u00e3o precisa mais de plugins para exibir dados. Ela vincula uma fonte de dados a blocos espec\u00edficos, Bot\u00e3o<\/a>, T\u00edtulo<\/a>, Imagem<\/a> e Par\u00e1grafo<\/a>, abrindo um novo mundo de op\u00e7\u00f5es de personaliza\u00e7\u00e3o para temas de blocos e para o Editor de Blocos.<\/p>\n Embora n\u00e3o substitua completamente a capacidade de escrever PHP ou usar um plugin de campos personalizados, \u00e9 um grande avan\u00e7o. Em alguns cen\u00e1rios, pode ser exatamente o que voc\u00ea precisa.<\/p>\n Como a API de Vincula\u00e7\u00e3o de Blocos funciona na pr\u00e1tica? Vamos mostrar um exemplo simples de como ela pode ser \u00fatil.<\/p>\n Nosso projeto em resumo:<\/p>\n Agora que j\u00e1 temos nosso plano, vamos colocar a API de vincula\u00e7\u00e3o de blocos do WordPress em a\u00e7\u00e3o.<\/p>\n O WordPress oculta os campos personalizados por padr\u00e3o, portanto, a primeira etapa \u00e9 habilit\u00e1-los no Editor de Blocos.<\/p>\n Para habilitar os campos personalizados, abra o menu Options<\/strong> (\u00edcone \u22ee) no Editor de Blocos. Em seguida, clique em Preferences<\/strong>.<\/p>\n Em seguida, clique no bot\u00e3o de altern\u00e2ncia Custom fields <\/strong>para exibi-los no editor. Clique no bot\u00e3o Show & Reload Page<\/strong>\u00a0para salvar suas altera\u00e7\u00f5es.<\/p>\n Para registrar nossos campos personalizados, abra o arquivo Observe a slug de cada campo, pois precisaremos delas na pr\u00f3xima etapa:<\/p>\n Voc\u00ea pode personalizar ainda mais esses campos seguindo a documenta\u00e7\u00e3o<\/a> do WordPress Tamb\u00e9m devemos observar que voc\u00ea pode registrar esses campos por meio de um plugin personalizado<\/a>. A vantagem \u00e9 que os campos continuar\u00e3o funcionando, mesmo que voc\u00ea altere o tema.<\/p>\n Em seguida, adicione valores de campos personalizados a uma p\u00e1gina seguindo estas etapas:<\/p>\n Agora podemos salvar a p\u00e1gina e repetir este processo para outras p\u00e1ginas do site.<\/p>\n Como queremos exibir nossos dados nas p\u00e1ginas, precisamos editar o template de p\u00e1gina do nosso tema no Editor de Sites<\/a>. Para isso:<\/p>\n Navegue at\u00e9 Appearance > Editor<\/strong> e clique no link Templates <\/strong>na coluna da esquerda. Encontre o template Pages<\/strong> e clique para abri-lo no editor.<\/p>\n Primeiro, precisamos escolher um local para exibir os dados do nosso campo personalizado. Vamos adicionar uma \u00e1rea na parte inferior de cada p\u00e1gina.<\/p>\n Adicionaremos um bloco Group<\/strong> e, dentro dele, um bloco Columns<\/strong>. A coluna da esquerda cont\u00e9m um bloco Image<\/strong> (para exibir nossa foto), enquanto a coluna da direita ter\u00e1 um bloco Paragraph<\/strong> para exibir a cita\u00e7\u00e3o.<\/p>\n Renomeamos<\/a> nosso bloco de Grupo para Custom Field Data<\/strong>\u00a0para refer\u00eancia futura. Isso facilita encontr\u00e1-lo caso desejemos edit\u00e1-lo novamente mais tarde.<\/p>\n A API de Vincula\u00e7\u00e3o de Blocos ainda n\u00e3o tem uma interface visual para exibir valores (mais sobre isso abaixo). Portanto, precisamos editar o c\u00f3digo de nossos blocos Image e Paragraph. Isso nos permite associar dados personalizados a eles.<\/p>\n Clique no menu Options<\/strong> (\u00edcone \u22ee) no canto superior direito do Editor de Sites. Selecione o link Code Editor<\/strong>. Isso abrir\u00e1 o editor de c\u00f3digo.<\/p>\n Procure o bloco Group<\/strong> que acabamos de adicionar. O c\u00f3digo come\u00e7a com:<\/p>\n Tamb\u00e9m destacamos o c\u00f3digo apropriado na imagem abaixo:<\/p>\n Em seguida, localize os blocos Image e Paragraph dentro desse grupo. O c\u00f3digo padr\u00e3o desses blocos \u00e9 o seguinte:<\/p>\n Image:<\/strong><\/p>\n Paragraph:<\/strong><\/p>\n Podemos editar esses blocos para vincul\u00e1-los aos nossos campos personalizados:<\/p>\n Image:<\/strong><\/p>\n Observe que o valor Paragraph:<\/strong><\/p>\n Nesse caso, o valor Salve as altera\u00e7\u00f5es e saia do Editor de c\u00f3digo.<\/strong><\/p>\n Clique nos blocos Image e Paragraph. O WordPress destacar\u00e1 cada bloco com um contorno roxo, indicando que est\u00e1 vinculado a uma fonte de dados. Al\u00e9m disso, o painel \u00e0 direita exibir\u00e1 uma \u00e1rea Attributes com mais detalhes.<\/p>\n Nota<\/strong>: Esses blocos n\u00e3o aparecer\u00e3o durante a edi\u00e7\u00e3o de p\u00e1ginas no painel, mas ser\u00e3o exibidos no frontend do seu site.<\/p>\n O passo final \u00e9 visitar o frontend do site. Devemos ver nossa imagem e cita\u00e7\u00e3o em qualquer p\u00e1gina que contenha valores para os campos personalizados.<\/p>\n Criamos um exemplo b\u00e1sico de vincula\u00e7\u00e3o de blocos a uma fonte de dados. Entretanto, h\u00e1 outras maneiras de aprimorar nosso projeto, incluindo:<\/p>\n A ideia \u00e9 pensar em como voc\u00ea deseja incluir dados personalizados em seu site. A partir da\u00ed, voc\u00ea cria um plano para implement\u00e1-los de uma forma que seja f\u00e1cil de manter. A API de Vincula\u00e7\u00e3o de Blocos oferece muitas op\u00e7\u00f5es para voc\u00ea fazer isso.<\/p>\n A API de Vincula\u00e7\u00e3o de Blocos n\u00e3o \u00e9 um produto finalizado. Ela continua evoluindo a cada nova vers\u00e3o do WordPress.<\/p>\n Por exemplo, diversas melhorias<\/a> est\u00e3o programadas para inclus\u00e3o na vers\u00e3o 6.7 do WordPress:<\/p>\n Fique atento a novos recursos que tornar\u00e3o a API mais f\u00e1cil de usar e ainda mais avan\u00e7ada.<\/p>\n Voc\u00ea tamb\u00e9m pode instalar o plugin Gutenberg<\/a> para ter acesso antecipado a novos recursos antes que sejam integrados ao n\u00facleo do WordPress. Recomendamos us\u00e1-lo em um ambiente de teste ou local.<\/p>\n Todos os clientes da Kinsta t\u00eam acesso a um ambiente de teste<\/a> e tamb\u00e9m podem adicionar recursos premium<\/a>.<\/p>\n Qualquer pessoa pode usar o DevKinsta<\/a>, nosso conjunto gratuito de ferramentas para desenvolvimento local em WordPress. Com ele, voc\u00ea pode criar novos sites com um clique e desenvolv\u00ea-los diretamente do seu computador local.<\/p>\n A API de Vincula\u00e7\u00e3o de Blocos representa uma mudan\u00e7a 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.<\/p>\n Ao adicion\u00e1-la ao seu fluxo de trabalho, voc\u00ea pode reduzir o tempo de desenvolvimento. Como um recurso nativo, ele tamb\u00e9m pode melhorar o desempenho em compara\u00e7\u00e3o com a depend\u00eancia de plugins.<\/p>\n Esses s\u00e3o alguns grandes motivos para voc\u00ea come\u00e7ar a us\u00e1-lo hoje mesmo. E o futuro parece ainda mais brilhante!<\/p>\n Exploramos apenas o come\u00e7o das possibilidades abordadas neste artigo. Aprofunde-se na API de vincula\u00e7\u00e3o de blocos explorando mais sobre como conectar campos personalizados<\/a>, trabalhar com fontes de vincula\u00e7\u00e3o personalizadas<\/a> e aprender a obter e definir valores de vincula\u00e7\u00e3o de blocos no editor<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" Exibir dados personalizados no Editor de Blocos do WordPress nem sempre foi um processo simples. Isso exigia a cria\u00e7\u00e3o de um bloco personalizado para buscar dados …<\/p>\n","protected":false},"author":51,"featured_media":70705,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1026],"class_list":["post-70704","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-desenvolvimento-wordpress"],"yoast_head":"\nregister_meta()<\/a><\/code> ou instalar um plugin para registrar e configurar novos campos. Essa \u00e9 apenas a primeira etapa. Exibir esses dados no seu site \u00e9 outro desafio.<\/p>\nUm caso de uso simples para a API de Vincula\u00e7\u00e3o de Blocos<\/h2>\n
\n
\n
Habilitando campos personalizados no Editor de Blocos<\/h3>\n
![\"Habilitando](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-editor-preferences.png\" "\\"The")
Registre os campos personalizados<\/h3>\n
functions.php<\/code> do tema. Em seguida, adicione o seguinte c\u00f3digo:<\/p>\n\/\/ Register custom fields for pages in WordPress using register_meta()\nfunction kinsta_register_custom_meta_fields_for_pages() {\n \/\/ Register the text field \"kinsta_famous_quote\" for pages\n register_meta('post', 'kinsta_famous_quote', array(\n 'type' => 'string', \/\/ Text field\n 'single' => true, \/\/ Single value for the field\n 'sanitize_callback' => 'wp_strip_all_tags', \/\/ Sanitize the input\n 'show_in_rest' => true, \/\/ Expose this field in the REST API for Gutenberg\n )); \n\n\/\/ Register the image field \"kinsta_photo\" for pages\n register_meta('post', 'kinsta_photo', array(\n 'type' => 'string', \/\/ Can store the URL or attachment ID as a string\n 'single' => true, \/\/ Single value for the field\n 'sanitize_callback' => 'esc_url_raw', \/\/ Sanitize the input as a URL\n 'show_in_rest' => true, \/\/ Expose this field in the REST API for Gutenberg\n ));\n}\nadd_action('init', 'kinsta_register_custom_meta_fields_for_pages');<\/code><\/pre>\n\n
kinsta_famous_quote<\/code><\/li>\nkinsta_photo<\/code><\/li>\n<\/ul>\nregister_meta()<\/code>.<\/p>\nAdicione valores de campo personalizado a uma p\u00e1gina<\/h3>\n
\n
kinsta_famous_quote<\/code> na coluna da esquerda. Em seguida, adicione o conte\u00fado de nossa cita\u00e7\u00e3o \u00e0 direita: O futuro pertence \u00e0queles que acreditam na beleza de seus sonhos. – Eleanor Roosevelt<\/li>\nkinsta_photo<\/code>. Adicione a URL da imagem que voc\u00ea deseja usar \u00e0 direita.<\/li>\n<\/ol>\n![\"Valores](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-editor-custom-field-config.png\" "\\"WordPress")
Vincule os dados do campo personalizado aos blocos<\/h3>\n
![\"Templates](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-site-editor-templates.png\" "\\"The")
![\"Editando](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-site-editor-page-template.png\" "\\"The")
<!-- wp:group {\"metadata\":{\"name\":\"Custom Field Data\"},\"layout\":{\"type\":\"constrained\"}} --><\/code><\/pre>\n![\"Visualizando](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-site-editor-block-code.png\" "\\"WordPress")
<!-- wp:image -->\n<figure class=\"wp-block-image\"><img alt=\"\"\/><\/figure>\n<!-- \/wp:image --><\/code><\/pre>\n<!-- wp:paragraph -->\n<p><\/p>\n<!-- \/wp:paragraph --><\/code><\/pre>\n<!-- wp:image {\"metadata\":{\"bindings\":{\"url\":{\"source\":\"core\/post-meta\",\"args\":{\"key\":\"kinsta_photo\"}}}}} -->\n<figure class=\"wp-block-image\"><img src=\"\" alt=\"\"\/><\/figure>\n<!-- \/wp:image --><\/code><\/pre>\nkey<\/code> est\u00e1 definido para o nosso campo personalizado kinsta_photo<\/code>.<\/p>\n<!-- wp:paragraph {\"metadata\":{\"bindings\":{\"content\":{\"source\":\"core\/post-meta\",\"args\":{\"key\":\"kinsta_famous_quote\"}}}}} -->\n<p><\/p>\n<!-- \/wp:paragraph --><\/code><\/pre>\nkey<\/code> \u00e9 definido para o nosso campo personalizado kinsta_famous_quote<\/code>.<\/p>\n![\"O](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-site-editor-image-block-bound.png\" "\\"Image")
![\"O](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-site-editor-paragraph-block-bound.png\" "\\"Paragraph")
![\"Dados](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/block-bindings-api-result.jpg\" "\\"WordPress")
Outras possibilidades para vincular blocos<\/h3>\n
\n
kinsta_photo_alt<\/code>, ao atributo alt<\/code> da seguinte forma:\n<!-- wp:image {\"metadata\":{\"bindings\":{\"url\":{\"source\":\"namespace\/slug\",\"args\":{\"key\":\"kinsta_photo\"}},\"alt\":{\"source\":\"namespace\/slug\",\"args\":{\"key\":\"kinsta_photo_alt\"}}}}} -->\n<figure class=\"wp-block-image\"><img src=\"\" alt=\"\"\/><\/figure>\n<!-- \/wp:image --><\/code><\/pre>\n<\/li>\nExplorando mais a API de Vincula\u00e7\u00e3o de Blocos<\/h2>\n
\n
Resumo<\/h2>\n