{"id":56606,"date":"2023-01-25T08:12:27","date_gmt":"2023-01-25T11:12:27","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=56606&#038;preview=true&#038;preview_id=56606"},"modified":"2025-01-17T10:27:57","modified_gmt":"2025-01-17T13:27:57","slug":"como-adicionar-meta-boxes-e-meta-fields","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/como-adicionar-meta-boxes-e-meta-fields\/","title":{"rendered":"Como Adicionar Meta Boxes e Meta Fields Personalizados aos Artigos no Gutenberg"},"content":{"rendered":"<p>Os <a href=\"https:\/\/kinsta.com\/pt\/blog\/advanced-custom-fields\/#what\">campos personalizados<\/a> permitem que informa\u00e7\u00f5es adicionais sejam atribu\u00eddas ao conte\u00fado do site. Esta informa\u00e7\u00e3o \u00e9 normalmente conhecida como <a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/\">metadados<\/a>.<\/p>\n<blockquote><p>Metadados s\u00e3o informa\u00e7\u00f5es sobre informa\u00e7\u00e3o. No caso do WordPress, s\u00e3o informa\u00e7\u00f5es associadas a artigos, usu\u00e1rios, coment\u00e1rios e termos.<\/p>\n<p>Dada a rela\u00e7\u00e3o de muitos metadados no WordPress, as op\u00e7\u00f5es s\u00e3o virtualmente ilimitadas. Voc\u00ea pode ter quantas op\u00e7\u00f5es de metadados voc\u00ea quiser e pode armazenar qualquer coisa nele.<\/p>\n<p><em>\u2014<a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/\">Plugin Handbook<\/a><\/em><\/p><\/blockquote>\n<p>Aqui est\u00e3o alguns exemplos de metadados que podem ser anexados a um artigo usando campos personalizados:<\/p>\n<ul>\n<li>As coordenadas geogr\u00e1ficas de um lugar ou de um im\u00f3vel<\/li>\n<li>A data de um evento<\/li>\n<li>O ISBN ou autor de um livro<\/li>\n<li>O estado de esp\u00edrito do dia do autor do artigo<\/li>\n<\/ul>\n<p>E h\u00e1 muito mais.<\/p>\n<p>No WordPress, n\u00e3o h\u00e1 uma maneira f\u00e1cil de adicionar e gerenciar campos personalizados. No editor cl\u00e1ssico, os campos personalizados s\u00e3o exibidos em uma caixa na parte inferior da p\u00e1gina, abaixo do editor do artigo.<\/p>\n<figure id=\"attachment_142717\" aria-describedby=\"caption-attachment-142717\" style=\"width: 2555px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142717 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/custom-fields-classic-editor.jpg\" alt=\"Campos personalizados no Editor Cl\u00e1ssico.\" width=\"2555\" height=\"1832\"><figcaption id=\"caption-attachment-142717\" class=\"wp-caption-text\">Campos personalizados no Editor Cl\u00e1ssico.<\/figcaption><\/figure>\n<p>No Gutenberg, os campos personalizados s\u00e3o desabilitados por padr\u00e3o, mas voc\u00ea pode exibi-los selecionando o item correspondente nas configura\u00e7\u00f5es do artigo.<\/p>\n<figure id=\"attachment_142718\" aria-describedby=\"caption-attachment-142718\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142718 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/adding-custom-fields-to-the-block-editor.jpg\" alt=\"Adicionando o painel de campos personalizados ao editor de blocos.\" width=\"1500\" height=\"964\"><figcaption id=\"caption-attachment-142718\" class=\"wp-caption-text\">Adicionando o painel de campos personalizados ao editor de blocos.<\/figcaption><\/figure>\n<p>Infelizmente, n\u00e3o h\u00e1 como exibir metadados no frontend sem usar um plugin ou sujar suas m\u00e3os com c\u00f3digo.<\/p>\n<p>Se voc\u00ea \u00e9 um usu\u00e1rio, voc\u00ea encontrar\u00e1 v\u00e1rios <a href=\"https:\/\/wordpress.org\/plugins\/search\/custom+fields\/\">plugins excelentes<\/a> que fazem este trabalho para voc\u00ea. Mas se voc\u00ea trabalha como desenvolvedor e quer obter mais dos campos personalizados do WordPress, basta integr\u00e1-los perfeitamente ao editor de blocos e exibi-los no frontend do seu site WordPress atrav\u00e9s de um bloco personalizado do Gutenberg, ent\u00e3o voc\u00ea est\u00e1 no lugar certo.<\/p>\n<p>Ent\u00e3o, se voc\u00ea est\u00e1 se perguntando qual \u00e9 a melhor maneira de usar os campos personalizados do WordPress tanto no <a href=\"https:\/\/kinsta.com\/pt\/blog\/editor-gutenberg-wordpress\/\">Gutenberg<\/a> quanto no <a href=\"https:\/\/kinsta.com\/blog\/wordpress-tinymce-editor\/\">Editor Cl\u00e1ssico<\/a> para desenvolvedores de WordPress, a resposta r\u00e1pida \u00e9 &#8220;criando um plugin que funcione tanto para o Editor Cl\u00e1ssico quanto para o Gutenberg&#8221;.<\/p>\n<p>Mas n\u00e3o se preocupe. Enquanto criar um plugin para gerenciar campos personalizados em ambos os editores podem parecer um pouco complicado, vamos tentar tornar o processo o mais simples poss\u00edvel. Assim que voc\u00ea entender os conceitos que discutiremos neste artigo, voc\u00ea adquirir\u00e1 as habilidades necess\u00e1rias para gerenciar &#8216;meta field&#8217; personalizados em Gutenberg e criar sites de todos os tipos.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Este artigo assume que voc\u00ea est\u00e1 familiarizado com tecnologias como <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-node-js\/\">Node.js<\/a> &#038; <a href=\"https:\/\/kinsta.com\/pt\/blog\/npm-gerenciador-pacotes-node\/\">npm<\/a>, <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-react-js\/\">React<\/a>, e <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-javascript\/\">JavaScript<\/a>. O conhecimento b\u00e1sico do desenvolvimento do WordPress tamb\u00e9m \u00e9 necess\u00e1rio.<\/p>\n<p>Se voc\u00ea \u00e9 novo no desenvolvimento de blocos do Gutenberg, n\u00e3o deixe de conferir nossos guias anteriores antes de come\u00e7ar a ler este artigo:<\/p>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-personalizados-gutenberg\/\">Construindo Blocos Personalizados do Gutenberg<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/\">Como Criar Blocos Din\u00e2micos para Gutenberg<\/a><\/li>\n<\/ul>\n<p>Se voc\u00ea prefere conte\u00fado em v\u00eddeo, confira nosso curso gratuito de <a href=\"https:\/\/kinsta.com\/courses\/course\/gutenberg-block-development\/\">desenvolvimento de blocos personalizados Gutenberg<\/a> em v\u00eddeo.<\/p>\n<\/aside>\n\n<p><strong>Nota: Antes de fazer qualquer coisa, certifique-se de ter uma <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-instalar-o-node-js\/\">vers\u00e3o atualizada do Node.js<\/a> em seu computador<\/strong><\/p>\n<p>Dito isso, aqui est\u00e1 o nosso resumo:<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Crie um plugin de bloco com a ferramenta oficial de cria\u00e7\u00e3o de blocos (create-block)<\/h2>\n<p>O primeiro passo \u00e9 criar um novo plugin com todos os arquivos e depend\u00eancias necess\u00e1rias para registrar um novo tipo de bloco. O plugin de bloco permitir\u00e1 que voc\u00ea crie facilmente um tipo de bloco personalizado para gerenciar e exibir metadados personalizados.<\/p>\n<p>Para criar um novo tipo de bloco, usaremos a ferramenta oficial de <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-create-block\/\">cria\u00e7\u00e3o de blocos<\/a>. Para uma vis\u00e3o detalhada de como usar a ferramenta create-block, veja nosso <a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-personalizados-gutenberg\/#create-block\">artigo anterior<\/a> sobre o desenvolvimento de blocos do Gutenberg.<\/p>\n<p>Abra sua ferramenta de linha de comando, navegue at\u00e9 o diret\u00f3rio de <strong>plugins<\/strong> do seu <a href=\"https:\/\/kinsta.com\/pt\/hospedagem-wordpress\/ambientes-de-teste\/\">site de desenvolvimento WordPress<\/a> e execute o seguinte comando:<\/p>\n<pre><code class=\"language-bash\">npx @wordpress\/create-block<\/code><\/pre>\n<p>Quando solicitado, adicione os seguintes detalhes:<\/p>\n<ul>\n<li><strong>A variante de modelo a ser usada para este bloco:<\/strong> dynamic<\/li>\n<li><strong>A slug de bloco utilizada para identifica\u00e7\u00e3o (tamb\u00e9m o nome da pasta de sa\u00edda):<\/strong> metadata-block<\/li>\n<li><strong>O espa\u00e7o interno para o nome do bloco (algo \u00fanico para seus produtos):<\/strong> meta-fields<\/li>\n<li><strong>O t\u00edtulo de exibi\u00e7\u00e3o para o seu bloco:<\/strong> Meta Fields<\/li>\n<li><strong>A breve descri\u00e7\u00e3o para o seu bloco (opcional):<\/strong> Descri\u00e7\u00e3o do bloco<\/li>\n<li><strong>O dashicon para facilitar a identifica\u00e7\u00e3o do seu bloco (opcional):<\/strong> book<\/li>\n<li><strong>O nome da categoria para ajudar os usu\u00e1rios a navegar e descobrir seu bloco:<\/strong> widgets<\/li>\n<li><strong>Voc\u00ea quer personalizar o plugin do WordPress?<\/strong> Sim\/N\u00e3o<\/li>\n<\/ul>\n<p>Vamos examinar esses detalhes por um momento e tentar entender onde eles s\u00e3o usados.<\/p>\n<ul>\n<li><strong>A slug de bloco utilizada para identifica\u00e7\u00e3o<\/strong> define o <strong>nome da pasta<\/strong> do plugin e o <strong>dom\u00ednio de texto<\/strong><\/li>\n<li><strong>O namespace interno para o nome do bloco<\/strong> define o <strong>namespace interno <\/strong>do bloco e o <strong>prefixo de fun\u00e7\u00e3o<\/strong> usado em todo o c\u00f3digo do plugin.<\/li>\n<li><strong>O t\u00edtulo de exibi\u00e7\u00e3o do seu bloco<\/strong> define o <strong>nome do plugin<\/strong> e o <strong>nome do bloco<\/strong> usado na interface do editor.<\/li>\n<\/ul>\n<p>A configura\u00e7\u00e3o pode demorar alguns minutos. Quando o processo for conclu\u00eddo, voc\u00ea receber\u00e1 uma lista dos comandos dispon\u00edveis.<\/p>\n<figure id=\"attachment_142731\" aria-describedby=\"caption-attachment-142731\" style=\"width: 1136px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142731 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/plugin-bootstrapped.jpg\" alt=\"Plugin de bloco instalado com sucesso.\" width=\"1136\" height=\"991\"><figcaption id=\"caption-attachment-142731\" class=\"wp-caption-text\">Plugin de bloco instalado com sucesso.<\/figcaption><\/figure>\n<p>Antes de passar para a pr\u00f3xima se\u00e7\u00e3o, em sua <a href=\"https:\/\/kinsta.com\/pt\/blog\/comandos-linux\/\">ferramenta de linha de comando<\/a>, navegue at\u00e9 a pasta do seu plugin e execute os seguintes comandos:<\/p>\n<pre><code class=\"language-bash\">cd metadata-block\nnpm start<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Certifique-se de executar o comando <code>npm start<\/code> toda vez que voc\u00ea iniciar seu ambiente de desenvolvimento do Gutenberg.<\/p>\n<p>Quando voc\u00ea executar <code>npm start<\/code>, quando voc\u00ea executar npm start, um observador executar\u00e1 no terminal e reconstruir\u00e1 os arquivos JS e CSS ap\u00f3s cada mudan\u00e7a (<a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/javascript\/js-build-setup\/#development-mode\">leia mais<\/a>).<\/p>\n<\/aside>\n\n<p>Voc\u00ea est\u00e1 pronto para construir seu c\u00f3digo. O pr\u00f3ximo passo \u00e9 editar o arquivo PHP principal do plugin para construir uma meta box para o Editor Cl\u00e1ssico.<\/p>\n<p>Ent\u00e3o, antes de passar para a pr\u00f3xima se\u00e7\u00e3o, <strong>instale e ative o plugin<\/strong> <strong>do<\/strong> <strong> <a href=\"https:\/\/wordpress.org\/plugins\/classic-editor\/\">Editor Cl\u00e1ssico<\/a><\/strong>.<\/p>\n<p>Em seguida, abra a tela Plugins e ative o novo plugin <strong>Meta Fields<\/strong>.<\/p>\n<figure id=\"attachment_143199\" aria-describedby=\"caption-attachment-143199\" style=\"width: 1726px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-143199 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/activate-plugins.jpg\" alt=\"Ativar plugins.\" width=\"1726\" height=\"878\"><figcaption id=\"caption-attachment-143199\" class=\"wp-caption-text\">Ativar plugins.<\/figcaption><\/figure>\n<h2>Adicione uma Meta Box ao Editor Cl\u00e1ssico<\/h2>\n<p>No contexto do <a href=\"https:\/\/kinsta.com\/pt\/blog\/desabilitar-o-editor-wordpress-gutenberg\/\">Editor Cl\u00e1ssico<\/a>, uma meta box \u00e9 um cont\u00eainer contendo elementos de formul\u00e1rio para digitar informa\u00e7\u00f5es espec\u00edficas, como o autor do artigo, tags, categorias, etc.<\/p>\n<p>Al\u00e9m das meta box integradas, os desenvolvedores de plugins podem adicionar qualquer n\u00famero de <a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/custom-meta-boxes\/\">meta box personalizadas<\/a> para incluir elementos de formul\u00e1rio HTML (ou qualquer <a href=\"https:\/\/kinsta.com\/pt\/blog\/aprender-html\/\">conte\u00fado HTML<\/a>) onde os usu\u00e1rios de plugins podem inserir dados espec\u00edficos do plugin.<\/p>\n<p>A API do WordPress fornece fun\u00e7\u00f5es \u00fateis para registrar facilmente meta box personalizadas para incluir todos os elementos HTML que seu plugin precisa para funcionar.<\/p>\n<p>Para come\u00e7ar, anexe o seguinte c\u00f3digo ao arquivo PHP do plugin que voc\u00ea acabou de criar:<\/p>\n<pre><code class=\"language-php\">\/\/ register meta box\nfunction meta_fields_add_meta_box(){\n\tadd_meta_box(\n\t\t'meta_fields_meta_box', \n\t\t__( 'Book details' ), \n\t\t'meta_fields_build_meta_box_callback', \n\t\t'post',\n\t\t'side',\n\t\t'default'\n\t );\n}\n\n\/\/ build meta box\nfunction meta_fields_build_meta_box_callback( $post ){\n\t  wp_nonce_field( 'meta_fields_save_meta_box_data', 'meta_fields_meta_box_nonce' );\n\t  $title = get_post_meta( $post-&gt;ID, '_meta_fields_book_title', true );\n\t  $author = get_post_meta( $post-&gt;ID, '_meta_fields_book_author', true );\n\t  ?&gt;\n\t  &lt;div class=\"inside\"&gt;\n\t  \t  &lt;p&gt;&lt;strong&gt;Title&lt;\/strong&gt;&lt;\/p&gt;\n\t\t  &lt;p&gt;&lt;input type=\"text\" id=\"meta_fields_book_title\" name=\"meta_fields_book_title\" value=\"&lt;?php echo esc_attr( $title ); ?&gt;\" \/&gt;&lt;\/p&gt;\t\n\t\t  &lt;p&gt;&lt;strong&gt;Author&lt;\/strong&gt;&lt;\/p&gt;\n\t\t  &lt;p&gt;&lt;input type=\"text\" id=\"meta_fields_book_author\" name=\"meta_fields_book_author\" value=\"&lt;?php echo esc_attr( $author ); ?&gt;\" \/&gt;&lt;\/p&gt;\n\t  &lt;\/div&gt;\n\t  &lt;?php\n}\nadd_action( 'add_meta_boxes', 'meta_fields_add_meta_box' );<\/code><\/pre>\n<p>A fun\u00e7\u00e3o <code>add_meta_box<\/code> registra uma nova meta-box, enquanto a fun\u00e7\u00e3o callback cria o HTML a ser injetado na meta-box. N\u00e3o iremos desenvolver este t\u00f3pico, pois ele est\u00e1 al\u00e9m do escopo do nosso artigo, mas voc\u00ea encontrar\u00e1 todos os detalhes necess\u00e1rios na documenta\u00e7\u00e3o obre a fun\u00e7\u00e3o add_meta_boxes hook, na documenta\u00e7\u00e3o\u00a0precisa <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/add_meta_boxes\/\">aqui<\/a>, <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_meta_box\/\">aqui<\/a> e <a href=\"https:\/\/www.smashingmagazine.com\/2011\/10\/create-custom-post-meta-boxes-wordpress\/\">aqui<\/a>.<\/p>\n<p>O pr\u00f3ximo passo \u00e9 criar uma fun\u00e7\u00e3o que salve os dados de entrada da pessoa que escreveu o artigo cada vez que o <a style=\"font-size: 1rem\" href=\"https:\/\/kinsta.com\/pt\/blog\/hooks-wordpress\/\">hook<\/a> <code>save_post<\/code> \u00e9 ativado (veja <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/save_post\/\">Recursos do Desenvolvedor<\/a>):<\/p>\n<pre><code class=\"language-php\">\/\/ save metadata\nfunction meta_fields_save_meta_box_data( $post_id ) {\n\tif ( ! isset( $_POST['meta_fields_meta_box_nonce'] ) )\n\t\treturn;\n\tif ( ! wp_verify_nonce( $_POST['meta_fields_meta_box_nonce'], 'meta_fields_save_meta_box_data' ) )\n\t\treturn;\n\tif ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )\n\t\treturn;\n\tif ( ! current_user_can( 'edit_post', $post_id ) )\n\t\treturn;\n\n\tif ( ! isset( $_POST['meta_fields_book_title'] ) )\n\t\treturn;\n\tif ( ! isset( $_POST['meta_fields_book_author'] ) )\n\t\treturn;\n\n\t$title = sanitize_text_field( $_POST['meta_fields_book_title'] );\n\t$author = sanitize_text_field( $_POST['meta_fields_book_author'] );\n\n\tupdate_post_meta( $post_id, '_meta_fields_book_title', $title );\n\tupdate_post_meta( $post_id, '_meta_fields_book_author', $author );\n}\nadd_action( 'save_post', 'meta_fields_save_meta_box_data' );<\/code><\/pre>\n<p>Mais uma vez, por favor, consulte a documenta\u00e7\u00e3o on-line para mais detalhes. Apenas destacaremos aqui o caractere de sublinhado (<code>_<\/code>) que precede a meta key. Isso diz ao WordPress para esconder as chaves destes campos personalizados da lista de campos personalizados dispon\u00edveis por padr\u00e3o e torna seus campos personalizados vis\u00edveis apenas na sua meta box personalizada.<\/p>\n<p>A imagem abaixo mostra como \u00e9 a meta box personalizada no Editor Cl\u00e1ssico:<\/p>\n<figure id=\"attachment_142726\" aria-describedby=\"caption-attachment-142726\" style=\"width: 2154px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-142726\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/custom-meta-box.jpg\" alt=\"A custom Meta Box in the Classic Editor\" width=\"2154\" height=\"1040\"><figcaption id=\"caption-attachment-142726\" class=\"wp-caption-text\">Uma Meta Box personalizada no Editor Cl\u00e1ssico.<\/figcaption><\/figure>\n<p>Agora, se voc\u00ea desativar o plugin Classic Editor e verificar o que acontece no <a href=\"https:\/\/kinsta.com\/pt\/blog\/editor-gutenberg-wordpress\/\">Editor de Blocos<\/a>, voc\u00ea ver\u00e1 que a meta box ainda aparece e funciona, mas n\u00e3o exatamente da maneira que voc\u00ea poderia esperar.<\/p>\n<p>Nosso objetivo \u00e9 criar um sistema de gerenciamento de metadados anexados aos blogs ou <a href=\"https:\/\/kinsta.com\/pt\/blog\/tipos-publicacoes-personalizadas-wordpress\/\">tipos de artigos personalizados<\/a> que se integrem perfeitamente no editor de blocos. Por esta raz\u00e3o, o c\u00f3digo mostrado at\u00e9 agora s\u00f3 ser\u00e1 necess\u00e1rio para garantir a compatibilidade retroativa com o Editor Cl\u00e1ssico.<\/p>\n<p>Ent\u00e3o, antes de continuar, vamos dizer ao WordPress para remover a meta box personalizada do editor de blocos, adicionando a flag <code>__back_compat_meta_box<\/code> \u00e0 fun\u00e7\u00e3o <code>add_meta_box<\/code> (veja tamb\u00e9m <a href=\"https:\/\/make.wordpress.org\/core\/2018\/11\/07\/meta-box-compatibility-flags\/\">Flags de Compatibilidade da Meta Box<\/a> e <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/metabox\/#backward-compatibility\">Compatibilidade com Retrocesso<\/a>).<\/p>\n<p>Vamos voltar \u00e0 fun\u00e7\u00e3o de callback que registra a meta box e mud\u00e1-la da seguinte forma:<\/p>\n<pre><code class=\"language-php\">\/\/ register meta box\nfunction meta_fields_add_meta_box(){\n\tadd_meta_box(\n\t\t'meta_fields_meta_box', \n\t\t__( 'Book details' ), \n\t\t'meta_fields_build_meta_box_callback', \n\t\t'post', \n\t\t'side',\n\t\t'default',\n\t\t\/\/ hide the meta box in Gutenberg\n\t\tarray('__back_compat_meta_box' =&gt; true)\n\t );\n}<\/code><\/pre>\n<p>Salve o arquivo do plugin e volte para o seu administrador WordPress. Agora, voc\u00ea n\u00e3o deve mais ver a meta box personalizada no editor de blocos. Se voc\u00ea reativar o Editor Cl\u00e1ssico ao inv\u00e9s disso, sua meta box personalizada aparecer\u00e1 novamente.<\/p>\n<h2>Adicione meta fields personalizados ao editor de blocos do Gutenberg (3 op\u00e7\u00f5es)<\/h2>\n<p>Em nossos artigos anteriores sobre o desenvolvimento de blocos Gutenberg, fornecemos uma vis\u00e3o geral detalhada do editor, suas partes e como desenvolver <a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-personalizados-gutenberg\/\">blocos est\u00e1ticos<\/a> e <a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/\">blocos din\u00e2micos<\/a>.<\/p>\n<p>Como mencionamos, neste artigo daremos um passo adiante e discutir como adicionar meta fields personalizados aos artigos do blog.<\/p>\n<p>H\u00e1 v\u00e1rias maneiras de armazenar e usar metadados postados no Gutenberg. Aqui vamos cobrir o seguinte:<div><\/div><kinsta-auto-toc list-style=\"disc\" selector=\"h3\" count-number=\"3\" sub-toc=\"true\"><\/kinsta-auto-toc><\/p>\n<h3>Criando um bloco personalizado para armazenar e exibir meta fields personalizados<\/h3>\n<p>Nesta se\u00e7\u00e3o, lhe mostraremos como criar e gerenciar meta fields personalizados a partir de um <strong>bloco din\u00e2mico<\/strong>. Conforme o Manual do Editor de Bloco, um <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/metabox\/#step-1-register-meta-field\">meta field do artigo<\/a> &#8220;\u00e9 um objeto WordPress usado para armazenar dados extras sobre um artigo&#8221; e precisamos primeiro registrar um novo meta field antes de podermos us\u00e1-lo.<\/p>\n<h4>Registre meta fields personalizados<\/h4>\n<p>Antes de registrar um meta field personalizado, voc\u00ea precisa ter certeza de que o <a href=\"https:\/\/kinsta.com\/pt\/blog\/tipos-publicacoes-personalizadas-wordpress\/\">tipo do artigo<\/a> que ir\u00e1 us\u00e1-lo suporta campos personalizados. Al\u00e9m disso, quando voc\u00ea registra um meta field personalizado, voc\u00ea deve definir o par\u00e2metro <code>show_in_rest<\/code> para <code>true<\/code>.<\/p>\n<p>Agora, de volta ao arquivo de plugin. Adicione o seguinte c\u00f3digo:<\/p>\n<pre><code class=\"language-php\">\/**\n * Register the custom meta fields\n *\/\nfunction meta_fields_register_meta() {\n\n    $metafields = [ '_meta_fields_book_title', '_meta_fields_book_author' ];\n\n    foreach( $metafields as $metafield ){\n        \/\/ Pass an empty string to register the meta key across all existing post types.\n        register_post_meta( '', $metafield, array(\n            'show_in_rest' =&gt; true,\n            'type' =&gt; 'string',\n            'single' =&gt; true,\n            'sanitize_callback' =&gt; 'sanitize_text_field',\n            'auth_callback' =&gt; function() { \n                return current_user_can( 'edit_posts' );\n            }\n        ));\n    }  \n}\nadd_action( 'init', 'meta_fields_register_meta' );<\/code><\/pre>\n<p><code>register_post_meta<\/code> registra uma meta key para os tipos de artigos especificados. No c\u00f3digo acima, registramos dois meta fields personalizados para todos os tipos de artigos registrados em seu site que suportam campos personalizados. Para mais informa\u00e7\u00f5es, veja a <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_post_meta\/\">refer\u00eancia da fun\u00e7\u00e3o<\/a>.<\/p>\n<p>Uma vez feito, abra o arquivo <strong>src\/index.js<\/strong> do seu plugin de bloco.<\/p>\n<h4>Registre o tipo de bloco no Cliente<\/h4>\n<p>Agora navegue para a pasta <strong>wp-content\/plugins\/metadata-block\/src<\/strong> e abra o arquivo <strong>index.js:<\/strong><\/p>\n<pre><code class=\"language-js\">import { registerBlockType } from '@wordpress\/blocks';\nimport '.\/style.scss';\nimport Edit from '.\/edit';\nimport metadata from '.\/block.json';\n\nregisterBlockType( metadata.name, {\n\tedit: Edit,\n} );<\/code><\/pre>\n<p>Com blocos est\u00e1ticos, tamb\u00e9m ter\u00edamos visto uma <a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-personalizados-gutenberg\/#indexjs\">fun\u00e7\u00e3o <code>save<\/code><\/a> . Neste caso, a fun\u00e7\u00e3o <code>save<\/code> est\u00e1 faltando porque instalamos um bloco din\u00e2mico. O conte\u00fado mostrado no frontend ser\u00e1 gerado dinamicamente via PHP.<\/p>\n<h4>Construa o tipo de bloco<\/h4>\n<p>Navegue at\u00e9 a pasta <strong>wp-content\/plugins\/metadata-block\/src<\/strong> e abra o arquivo <strong>edit.js<\/strong>. Voc\u00ea deve ver o seguinte c\u00f3digo (coment\u00e1rios removidos):<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\nimport { useBlockProps } from '@wordpress\/block-editor';\nimport '.\/editor.scss';\n\nexport default function Edit() {\n\treturn (\n\t\t&lt;p { ...useBlockProps() }&gt;\n\t\t\t{ __( 'Meta Fields \u2013 hello from the editor!', 'metadata-block' ) }\n\t\t&lt;\/p&gt;\n\t);\n}<\/code><\/pre>\n<p>Aqui voc\u00ea adicionar\u00e1 o c\u00f3digo para gerar o bloco a ser renderizado no editor.<\/p>\n<p>O primeiro passo \u00e9 importar os componentes e fun\u00e7\u00f5es necess\u00e1rias para construir o bloco. Aqui est\u00e1 a lista completa de depend\u00eancias:<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\nimport { useBlockProps, InspectorControls, RichText } from '@wordpress\/block-editor';\nimport { useSelect } from '@wordpress\/data';\nimport { useEntityProp } from '@wordpress\/core-data';\nimport { TextControl, PanelBody, PanelRow } from '@wordpress\/components';\nimport '.\/editor.scss';<\/code><\/pre>\n<p>Se voc\u00ea j\u00e1 leu nossos artigos anteriores, voc\u00ea deve estar familiarizado com muitas dessas <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/import\">declara\u00e7\u00f5es <code>import<\/code><\/a>. Aqui n\u00f3s vamos apontar apenas alguns deles:<\/p>\n<pre><code class=\"language-js\">import { useSelect } from '@wordpress\/data';\nimport { useEntityProp } from '@wordpress\/core-data';<\/code><\/pre>\n<p>Uma vez que estas depend\u00eancias foram importadas, \u00e9 assim que o <code>useSelect<\/code> e <code>useEntityProp<\/code> s\u00e3o inseridos na fun\u00e7\u00e3o <code>Edit()<\/code>:<\/p>\n<pre><code class=\"language-js\">const postType = useSelect(\n\t\t( select ) =&gt; select( 'core\/editor' ).getCurrentPostType(),\n\t\t[]\n\t);\nconst [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );<\/code><\/pre>\n<ul>\n<li><code>useSelect<\/code> \u00e9 um hook personalizado para a <a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/#build-the-block-to-be-rendered-in-the-editor\">recupera\u00e7\u00e3o de adere\u00e7os de seletores registrados<\/a>. N\u00f3s iremos us\u00e1-lo para recuperar o tipo de artigo atual (veja tamb\u00e9m <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#useselect\">@wordpress\/data reference<\/a> e <a href=\"https:\/\/make.wordpress.org\/core\/2019\/06\/10\/introducing-usedispatch-and-useselect\/\">Introducing useDispatch e useSelect<\/a>)<\/li>\n<li><code>useEntityProp<\/code> \u00e9 um hook personalizado que permite recuperar e alterar os meta fields dos blocos. <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/33d84b036592a5bf31af05b7710f3b2b14163dc4\/packages\/core-data\/src\/entity-provider.js#L85\">\u00c9 definido<\/a> como um &#8220;hook que retorna o valor e um setter para a propriedade especificada da entidade fornecida mais pr\u00f3xima do tipo especificado&#8221;. Ele retorna &#8220;um array onde o primeiro item \u00e9 o valor da propriedade, o segundo \u00e9 o setter e o terceiro \u00e9 o objeto de valor completo da API REST contendo mais informa\u00e7\u00f5es como <code>raw<\/code>, <code>rendered<\/code> e <code>protected<\/code> props&#8221;. (Veja tamb\u00e9m <a href=\"https:\/\/make.wordpress.org\/core\/2020\/03\/02\/general-block-editor-api-updates\/\">General Block Editor API Updates<\/a>)<\/li>\n<\/ul>\n<p>Este c\u00f3digo fornece o atual <code>postType<\/code>, um objeto de meta fields (<code>meta<\/code>), e uma fun\u00e7\u00e3o de setter para atualiz\u00e1-los (<code>setMeta<\/code>).<\/p>\n<p>Agora substitua o c\u00f3digo atual para a fun\u00e7\u00e3o <code>Edit()<\/code> com o seguinte:<\/p>\n<pre><code class=\"language-js\">export default function Edit() {\n\tconst blockProps = useBlockProps();\n\tconst postType = useSelect(\n\t\t( select ) =&gt; select( 'core\/editor' ).getCurrentPostType(),\n\t\t[]\n\t);\n\tconst [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );\n\tconst bookTitle = meta[ '_meta_fields_book_title' ];\n\tconst bookAuthor = meta[ '_meta_fields_book_author' ];\n\tconst updateBookTitleMetaValue = ( newValue ) =&gt; {\n\t\tsetMeta( { ...meta, _meta_fields_book_title: newValue } );\n    };\n\tconst updateBookAuthorMetaValue = ( newValue ) =&gt; {\n\t\tsetMeta( { ...meta, _meta_fields_book_author: newValue } );\n\t};\nreturn ( ... );\n}<\/code><\/pre>\n<p>Novamente:<\/p>\n<ul>\n<li>N\u00f3s usamos <code>useSelect<\/code> para obter o tipo do artigo atual.<\/li>\n<li><code>useEntityProp<\/code> retorna um conjunto de meta fields e uma fun\u00e7\u00e3o setter para definir novos valores de meta.<\/li>\n<li><code>updateBookTitleMetaValue<\/code> e <code>updateBookAuthorMetaValue<\/code> s\u00e3o dois manipuladores de eventos para salvar os valores dos meta fields.<\/li>\n<\/ul>\n<p>O pr\u00f3ximo passo \u00e9 construir o c\u00f3digo JSX (JavaScript XML) retornado pela fun\u00e7\u00e3o <code>Edit()<\/code>:<\/p>\n<pre><code class=\"language-jsx\">export default function Edit() {\n\t...\n\treturn (\n\t\t&lt;&gt;\n\t\t\t&lt;InspectorControls&gt;\n\t\t\t\t&lt;PanelBody \n\t\t\t\t\ttitle={ __( 'Book Details' )}\n\t\t\t\t\tinitialOpen={true}\n\t\t\t\t&gt;\n\t\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t\t&lt;fieldset&gt;\n\t\t\t\t\t\t\t&lt;TextControl\n\t\t\t\t\t\t\t\tlabel={__( 'Book title' )}\n\t\t\t\t\t\t\t\tvalue={ bookTitle }\n\t\t\t\t\t\t\t\tonChange={ updateBookTitleMetaValue }\n\t\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t\t&lt;\/fieldset&gt;\n\t\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t\t&lt;fieldset&gt;\n\t\t\t\t\t\t\t&lt;TextControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Book author' ) }\n\t\t\t\t\t\t\t\tvalue={ bookAuthor }\n\t\t\t\t\t\t\t\tonChange={ updateBookAuthorMetaValue }\n\t\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t\t&lt;\/fieldset&gt;\n\t\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t&lt;\/PanelBody&gt;\n\t\t\t&lt;\/InspectorControls&gt;\n\t\t\t&lt;div { ...blockProps }&gt;\n\t\t\t\t&lt;RichText \n\t\t\t\t\ttagName=\"h3\"\n\t\t\t\t\tonChange={ updateBookTitleMetaValue }\n\t\t\t\t\tallowedFormats={ [ 'core\/bold', 'core\/italic' ] }\n\t\t\t\t\tvalue={ bookTitle }\n\t\t\t\t\tplaceholder={ __( 'Write your text...' ) }\n\t\t\t\t\/&gt;\n\t\t\t\t&lt;TextControl\n\t\t\t\t\tlabel=\"Book Author\"\n\t\t\t\t\tvalue={ bookAuthor }\n\t\t\t\t\tonChange={ updateBookAuthorMetaValue }\n\t\t\t\t\/&gt;\n\t\t\t&lt;\/div&gt;\n\t\t&lt;\/&gt;\n\t);\n}<\/code><\/pre>\n<p>O componente <code>RichText<\/code> fornece uma entrada de <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Global_attributes\/contenteditable\">conte\u00fado<\/a>, enquanto <code>TextControl<\/code> fornece campos de texto simples.<\/p>\n<p>Tamb\u00e9m criamos um painel lateral contendo dois campos de entrada para usar ao inv\u00e9s dos dois controles de formul\u00e1rio inclu\u00eddos no bloco.<\/p>\n<p>Salve o arquivo e volte para o editor. Adicione o bloco <b>Meta Fields<\/b>\u00a0do inseridor do bloco e preencha o t\u00edtulo do livro e o autor.<\/p>\n<figure id=\"attachment_142769\" aria-describedby=\"caption-attachment-142769\" style=\"width: 1796px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142769 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/custom-block-with-2-meta-fields.jpg\" alt=\"Um bloco personalizado incluindo dois Meta Fields personalizados.\" width=\"1796\" height=\"880\"><figcaption id=\"caption-attachment-142769\" class=\"wp-caption-text\">Um bloco personalizado incluindo dois Meta Fields personalizados.<\/figcaption><\/figure>\n<p>Voc\u00ea notar\u00e1 que sempre que voc\u00ea alterar o valor do campo no bloco, o valor no campo de texto correspondente na barra lateral tamb\u00e9m mudar\u00e1.<\/p>\n<p>Em seguida, temos que criar o c\u00f3digo PHP que gera o HTML a ser renderizado no frontend.<\/p>\n<h4>Exibindo o bloco no frontend<\/h4>\n<p>Abra o arquivo PHP principal novamente em seu editor de c\u00f3digo e reescreva a fun\u00e7\u00e3o de retorno de chamada que gera a sa\u00edda do bloco como a seguir:<\/p>\n<pre><code class=\"language-php\">function meta_fields_metadata_block_block_init() {\n\tregister_block_type(\n\t\t__DIR__ . '\/build',\n\t\tarray(\n\t\t\t'render_callback' =&gt; 'meta_fields_metadata_block_render_callback',\n\t\t)\n\t);\n}\nadd_action( 'init', 'meta_fields_metadata_block_block_init' );\n\nfunction meta_fields_metadata_block_render_callback( $attributes, $content, $block ) {\n\t\n\t$book_title = get_post_meta( get_the_ID(), '_meta_fields_book_title', true );\n\t$book_author = get_post_meta( get_the_ID(), '_meta_fields_book_author', true );\n    \n\t$output = \"\";\n\n\tif( ! empty( $book_title ) ){\n\t\t$output .= '&lt;h3&gt;' . esc_html( $book_title ) . '&lt;\/h3&gt;';\n\t}\n\tif( ! empty( $book_author ) ){\n\t\t$output .= '&lt;p&gt;' . __( 'Book author: ' ) . esc_html( $book_author ) . '&lt;\/p&gt;';\n\t}\n\tif( strlen( $output ) &gt; 0 ){\n\t\treturn '&lt;div ' . get_block_wrapper_attributes() . '&gt;' . $output . '&lt;\/div&gt;';\n\t} else {\n\t\treturn '&lt;div ' . get_block_wrapper_attributes() . '&gt;' . '&lt;strong&gt;' . __( 'Sorry. No fields available here!' ) . '&lt;\/strong&gt;' . '&lt;\/div&gt;';\n\t}\n}<\/code><\/pre>\n<p>Este c\u00f3digo \u00e9 bastante autoexplicativo. Primeiro, usamos <code>get_post_meta<\/code> para recuperar os valores dos meta fields personalizados. Depois, usamos esses valores para construir o conte\u00fado do bloco. Finalmente, a fun\u00e7\u00e3o callback retorna o HTML do bloco.<\/p>\n<p>Os blocos est\u00e3o prontos para uso. Este exemplo intencionalmente mant\u00e9m o c\u00f3digo o mais simples poss\u00edvel, mas voc\u00ea pode usar os componentes nativos do Gutenberg para criar blocos mais avan\u00e7ados e aproveitar ao m\u00e1ximo os meta fields personalizados do WordPress.<\/p>\n<figure id=\"attachment_142768\" aria-describedby=\"caption-attachment-142768\" style=\"width: 1796px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142768 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/custom-block-with-custom-meta-fields.jpg\" alt=\"Um bloco personalizado incluindo v\u00e1rios meta fields.\" width=\"1796\" height=\"1260\"><figcaption id=\"caption-attachment-142768\" class=\"wp-caption-text\">Um bloco personalizado incluindo v\u00e1rios meta fields.<\/figcaption><\/figure>\n<p>Em nosso exemplo, usamos <code>h3<\/code> e <code>p<\/code> elementos para construir o bloco para o frontend.<\/p>\n<p>Mas voc\u00ea pode exibir os dados de v\u00e1rias maneiras. A imagem seguinte mostra uma simples lista n\u00e3o ordenada de meta fields.<\/p>\n<figure id=\"attachment_142770\" aria-describedby=\"caption-attachment-142770\" style=\"width: 1794px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142770 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/custom-block-on-the-front-end.jpg\" alt=\"Um bloco de exemplo no frontend.\" width=\"1794\" height=\"1132\"><figcaption id=\"caption-attachment-142770\" class=\"wp-caption-text\">Um bloco de exemplo no frontend.<\/figcaption><\/figure>\n<p>Voc\u00ea encontrar\u00e1 o c\u00f3digo completo deste exemplo <a href=\"https:\/\/gist.github.com\/carlodaniele\/d44ca1d76457fa6553f44ed863ecdbcd\">neste resumo p\u00fablico<\/a>.<\/p>\n<h3>Adicionando uma meta box personalizada \u00e0 barra lateral do documento<\/h3>\n<p>A segunda op\u00e7\u00e3o \u00e9 anexar meta fields personalizados aos artigos usando um plugin que gera um painel de configura\u00e7\u00f5es na barra lateral do documento.<\/p>\n<p>O processo \u00e9 bastante similar ao exemplo anterior, exceto que, neste caso, n\u00e3o precisaremos de um bloco para gerenciar metadados. Criaremos um componente para gerar um painel incluindo um conjunto de controles na barra lateral do documento seguindo estes passos:<\/p>\n<ol>\n<li><a href=\"#option-2-create-new-block\">Crie um novo plugin de bloco com create-block<\/a><\/li>\n<li><a href=\"#option-2-register-custom-meta-box\">Registre uma meta box personalizada para o Editor Cl\u00e1ssico<\/a><\/li>\n<li><a href=\"#option-2-register-custom-fields\">Registre os meta fields personalizados no arquivo principal do plugin atrav\u00e9s da fun\u00e7\u00e3o register_post_meta()<\/a><\/li>\n<li><a href=\"#option-2-register-plugin\">Registre um plugin no arquivo index.js<\/a><\/li>\n<li><a href=\"#option-2-build-component\">Construa o componente usando componentes incorporados do Gutenberg<\/a><\/li>\n<\/ol>\n<h4 id=\"option-2-create-new-block\">Crie um novo plugin de bloco com a ferramenta create-block<\/h4>\n<p>Para criar um novo plugin de bloco, siga os passos da <a href=\"#create-a-custom-block-to-store-and-display-custom-meta-fields\">se\u00e7\u00e3o anterior<\/a>. Voc\u00ea pode criar um novo plugin ou editar os scripts que constru\u00edmos no exemplo anterior.<\/p>\n<h4 id=\"option-2-register-custom-meta-box\">Registre uma Meta Box personalizada para o Editor Cl\u00e1ssico<\/h4>\n<p>Em seguida, voc\u00ea precisa registrar uma meta box personalizada para garantir a compatibilidade retroativa para sites WordPress que ainda usam o Editor Cl\u00e1ssico. O processo \u00e9 o mesmo descrito na <a href=\"#add-a-meta-box-to-the-classic-editor\">se\u00e7\u00e3o anterior<\/a>.<\/p>\n<h4 id=\"option-2-register-custom-fields\">Registre os Meta Fields Personalizados no arquivo principal do plugin<\/h4>\n<p>O pr\u00f3ximo passo \u00e9 registrar os meta fields personalizados no arquivo principal do plugin atrav\u00e9s da fun\u00e7\u00e3o <code>register_post_meta()<\/code>. Novamente, voc\u00ea pode seguir o <a href=\"#register-custom-meta-fields\">exemplo anterior<\/a>.<\/p>\n<h4 id=\"option-2-register-plugin\">Registre um Plugin no arquivo index.js<\/h4>\n<p>Uma vez que voc\u00ea tenha completado os passos anteriores, \u00e9 hora de registrar um plugin no arquivo <strong>index.js<\/strong> para renderizar um componente personalizado.<\/p>\n<p>Antes de registrar o plugin, crie uma pasta de <strong>componentes<\/strong> na pasta <strong>src<\/strong> do plugin. Dentro da pasta de <strong>componentes<\/strong>, crie um novo arquivo <strong>MetaBox.js<\/strong>. Voc\u00ea pode escolher o nome que voc\u00ea acha mais adequado para o seu componente, seguindo as <a href=\"https:\/\/github.com\/airbnb\/javascript\/tree\/master\/react#naming\">melhores pr\u00e1ticas\u00a0para nomear<\/a> no React.<\/p>\n<p>Antes de continuar, instale o <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-plugins\/\">m\u00f3dulo<code>@wordpress\/plugins<\/code><\/a> a partir da sua ferramenta de linha de comando.<\/p>\n<p>Pare o processo (mac), instale o m\u00f3dulo e inicie o processo novamente:<\/p>\n<pre><code class=\"language-bash\">^C\nnpm install @wordpress\/plugins --save\nnpm start<\/code><\/pre>\n<p>Uma vez feito, abra o arquivo <strong>index.js<\/strong> do seu plugin e adicione o seguinte c\u00f3digo.<\/p>\n<pre><code class=\"language-js\">\/**\n * Registers a plugin for adding items to the Gutenberg Toolbar\n *\n * @see https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar\/\n *\/\nimport { registerPlugin } from '@wordpress\/plugins';\n\nimport MetaBox from '.\/components\/MetaBox';<\/code><\/pre>\n<p>O c\u00f3digo \u00e9 bastante explicativo. Entretanto, gostar\u00edamos de nos deter por um momento nas duas declara\u00e7\u00f5es <code>import<\/code> para aqueles que n\u00e3o t\u00eam conhecimentos avan\u00e7ados do React.<\/p>\n<p>Com a primeira declara\u00e7\u00e3o <code>import<\/code>, n\u00f3s inclu\u00edmos o nome da fun\u00e7\u00e3o entre par\u00eanteses curvos. Com a segunda declara\u00e7\u00e3o <code>import<\/code>, o nome do componente n\u00e3o est\u00e1 inclu\u00eddo\u00a0 entre par\u00eanteses encaracolados.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Uma declara\u00e7\u00e3o <code>import<\/code> sem par\u00eanteses curvos \u00e9 usada para <strong>importar a exporta\u00e7\u00e3o padr\u00e3o<\/strong>. Uma declara\u00e7\u00e3o <code>import<\/code> com par\u00eanteses curvos \u00e9 usada para <strong>importar uma exporta\u00e7\u00e3o nomeada<\/strong>. Para mais detalhes, veja os seguintes recursos:<\/p>\n<ul>\n<li><a href=\"https:\/\/beta.reactjs.org\/learn\/importing-and-exporting-components\">Importa\u00e7\u00e3o e exporta\u00e7\u00e3o de componentes<\/a><\/li>\n<li><a href=\"https:\/\/create-react-app.dev\/docs\/importing-a-component\/\">Importa\u00e7\u00e3o de um componente<\/a><\/li>\n<li><a href=\"https:\/\/stackoverflow.com\/questions\/36795819\/when-should-i-use-curly-braces-for-es6-import\/36796281#36796281\">Quando devo usar par\u00eanteses curvos para a importa\u00e7\u00e3o do ES6?<\/a><\/li>\n<\/ul>\n<p><\/p>\n<\/aside>\n\n<p>A seguir, registre seu plugin:<\/p>\n<pre><code class=\"language-js\">registerPlugin( 'metadata-plugin', {\n\trender: MetaBox\n} );<\/code><\/pre>\n<p><code>registerPlugin<\/code> simplesmente registra um plugin. A fun\u00e7\u00e3o aceita dois par\u00e2metros:<\/p>\n<ul>\n<li>Uma string \u00fanica que identifica o plugin<\/li>\n<li>Um objeto de configura\u00e7\u00f5es do plugin. Note que a propriedade <code>render<\/code> <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/0b37b3bc71e2c6f200781a53e11fddec4bc0b935\/packages\/plugins\/src\/api\/index.js#L138\">deve ser especificada<\/a> e deve ser uma fun\u00e7\u00e3o v\u00e1lida.<\/li>\n<\/ul>\n<h4 id=\"option-2-build-component\">Construa o componente usando componentes incorporados do Gutenberg<\/h4>\n<p>\u00c9 hora de construir nosso componente React. Abra o arquivo <strong>MetaBox.js<\/strong> (ou como voc\u00ea o chamou) e adicione as seguintes declara\u00e7\u00f5es de importa\u00e7\u00e3o:<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\nimport { compose } from '@wordpress\/compose';\nimport { withSelect, withDispatch } from '@wordpress\/data';\nimport { PluginDocumentSettingPanel } from '@wordpress\/edit-post';\nimport { PanelRow, TextControl, DateTimePicker } from '@wordpress\/components';<\/code><\/pre>\n<ul>\n<li>A fun\u00e7\u00e3o <code>compose<\/code> executa a <strong>composi\u00e7\u00e3o da fun\u00e7\u00e3o<\/strong>, o que significa que o resultado de uma fun\u00e7\u00e3o \u00e9 passado para outra fun\u00e7\u00e3o. Antes de voc\u00ea poder usar <code>compose<\/code>, voc\u00ea pode precisar instalar o m\u00f3dulo correspondente:\n<pre><code class=\"language-bash\">npm install @wordpress\/compose --save<\/code><\/pre>\n<p>Observaremos a fun\u00e7\u00e3o <code>compose<\/code> em a\u00e7\u00e3o em um momento.<\/li>\n<li><code>withSelect<\/code> e <code>withDispatch<\/code> s\u00e3o dois <strong>componentes superiores<\/strong> que permitem a voc\u00ea buscar ou enviar dados para ou de uma loja WordPress. <code>withSelect<\/code> \u00e9 usado para injetar adere\u00e7os derivados do estado usando <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#selectors\">seletores<\/a> registrados, enquanto, <code>withDispatch<\/code> \u00e9 usado para enviar adere\u00e7os usando <a style=\"font-size: 1rem\" href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#actions\">criadores de a\u00e7\u00f5es<\/a> registrados.<\/li>\n<li><code>PluginDocumentSettingPanel<\/code> renderiza itens na barra lateral do documento (veja o c\u00f3digo-fonte <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/edit-post\/src\/components\/sidebar\/plugin-document-setting-panel\/index.js#L55\">no Github<\/a>).<\/li>\n<\/ul>\n<p>Em seguida, voc\u00ea criar\u00e1 o componente para exibir o painel da meta box na barra lateral do documento. Em seu arquivo <strong>MetaBox.js<\/strong>, adicione o seguinte c\u00f3digo:<\/p>\n<pre><code class=\"language-jsx\">const MetaBox = ( { postType, metaFields, setMetaFields } ) =&gt; {\n\n\tif ( 'post' !== postType ) return null;\n\n\treturn(\n\t\t&lt;PluginDocumentSettingPanel \n\t\t\ttitle={ __( 'Book details' ) } \n\t\t\ticon=\"book\"\n\t\t\tinitialOpen={ false }\n\t\t&gt;\n\t\t\t&lt;PanelRow&gt;\n\t\t\t\t&lt;TextControl \n\t\t\t\t\tvalue={ metaFields._meta_fields_book_title }\n\t\t\t\t\tlabel={ __( \"Title\" ) }\n\t\t\t\t\tonChange={ (value) =&gt; setMetaFields( { _meta_fields_book_title: value } ) }\n\t\t\t\t\/&gt;\n\t\t\t&lt;\/PanelRow&gt;\n\t\t\t&lt;PanelRow&gt;\n\t\t\t\t&lt;TextControl \n\t\t\t\t\tvalue={ metaFields._meta_fields_book_author }\n\t\t\t\t\tlabel={ __( \"Author\" ) }\n\t\t\t\t\tonChange={ (value) =&gt; setMetaFields( { _meta_fields_book_author: value } ) }\n\t\t\t\t\/&gt;\n\t\t\t&lt;\/PanelRow&gt;\n\t\t\t&lt;PanelRow&gt;\n\t\t\t\t&lt;TextControl \n\t\t\t\t\tvalue={ metaFields._meta_fields_book_publisher }\n\t\t\t\t\tlabel={ __( \"Publisher\" ) }\n\t\t\t\t\tonChange={ (value) =&gt; setMetaFields( { _meta_fields_book_publisher: value } ) }\n\t\t\t\t\/&gt;\n\t\t\t&lt;\/PanelRow&gt;\n\t\t\t&lt;PanelRow&gt;\n\t\t\t\t&lt;DateTimePicker\n\t\t\t\t\tcurrentDate={ metaFields._meta_fields_book_date }\n\t\t\t\t\tonChange={ ( newDate ) =&gt; setMetaFields( { _meta_fields_book_date: newDate } ) }\n\t\t\t\t\t__nextRemoveHelpButton\n\t\t\t\t\t__nextRemoveResetButton\n\t\t\t\t\/&gt;\n\t\t\t&lt;\/PanelRow&gt;\n\t\t&lt;\/PluginDocumentSettingPanel&gt;\n\t);\n}\n\nconst applyWithSelect = withSelect( ( select ) =&gt; {\n\treturn {\n\t\tmetaFields: select( 'core\/editor' ).getEditedPostAttribute( 'meta' ),\n\t\tpostType: select( 'core\/editor' ).getCurrentPostType()\n\t};\n} );\n\nconst applyWithDispatch = withDispatch( ( dispatch ) =&gt; {\n\treturn {\n\t\tsetMetaFields ( newValue ) {\n\t\t\tdispatch('core\/editor').editPost( { meta: newValue } )\n\t\t}\n\t}\n} );\n\nexport default compose([\n\tapplyWithSelect,\n\tapplyWithDispatch\n])(MetaBox);<\/code><\/pre>\n<p>Vamos analisar este c\u00f3digo.<\/p>\n<ul>\n<li>O <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-document-setting-panel\/\">elemento <code>PluginDocumentSettingPanel<\/code><\/a> <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/edit-post\/src\/components\/sidebar\/plugin-document-setting-panel\/index.js#L55\">faz um novo painel<\/a> na barra lateral do documento. N\u00f3s definimos o t\u00edtulo (&#8220;Detalhes do livro&#8221;) e o \u00edcone, e definimos <code>initialOpen<\/code> para <code>false<\/code>, o que significa que inicialmente o painel \u00e9 fechado.<\/li>\n<li>Dentro do <code>PluginDocumentSettingPanel<\/code> temos tr\u00eas campos de texto e um elemento <code>DateTimePicker<\/code> que permite que o usu\u00e1rio defina a data de publica\u00e7\u00e3o.<\/li>\n<li><code>withSelect<\/code> fornece acesso \u00e0 fun\u00e7\u00e3o <code>select<\/code> que estamos usando para recuperar <code>metaFields<\/code> e <code>postType<\/code>. <code>withDispatch<\/code> fornece acesso \u00e0 fun\u00e7\u00e3o <code>dispatch<\/code>, que permite a atualiza\u00e7\u00e3o dos valores dos metadados.<\/li>\n<li>Finalmente, a fun\u00e7\u00e3o <code>compose<\/code> nos permite compor nosso componente com <code>withSelect<\/code> e <code>withDispatch<\/code> componentes de ordem superior. Isso d\u00e1 ao componente acesso \u00e0s propriedades <code>metaFields<\/code> e <code>postType<\/code> e \u00e0 fun\u00e7\u00e3o <code>setMetaFields<\/code>.<\/li>\n<\/ul>\n<p>Salve seu arquivo <strong>MetaBox.js<\/strong> e crie um novo artigo em seu site de desenvolvimento WordPress e d\u00ea uma olhada na barra lateral do documento. Voc\u00ea deve ver o novo painel de <strong>detalhes do Livro<\/strong>.<\/p>\n<figure id=\"attachment_142918\" aria-describedby=\"caption-attachment-142918\" style=\"width: 1851px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-142918 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/book-details-panel.jpg\" alt=\"Um painel de meta box personalizado no Gutenberg.\" width=\"1851\" height=\"1617\"><figcaption id=\"caption-attachment-142918\" class=\"wp-caption-text\">Um painel de meta box personalizado no Gutenberg.<\/figcaption><\/figure>\n<p>Agora fa\u00e7a seus testes. Defina os valores dos seus meta fields personalizados e salve o artigo. Depois, recarregue a p\u00e1gina e verifique se os valores que voc\u00ea inseriu est\u00e3o no lugar.<\/p>\n<p>Adicione o bloco que constru\u00edmos na se\u00e7\u00e3o anterior e verifique se tudo est\u00e1 funcionando corretamente.<\/p>\n<h3>Adicionando uma barra lateral personalizada para gerenciar metadados de artigos<\/h3>\n<p>Se voc\u00ea tiver in\u00fameros meta fields personalizados para adicionar aos seus artigos ou tipos de artigos personalizados, voc\u00ea tamb\u00e9m pode criar uma barra lateral de configura\u00e7\u00f5es personalizadas especificamente para o seu plugin.<\/p>\n<p>O processo \u00e9 muito similar ao exemplo anterior, ent\u00e3o se voc\u00ea entendeu os passos discutidos na se\u00e7\u00e3o anterior, voc\u00ea n\u00e3o ter\u00e1 nenhuma dificuldade em construir uma barra lateral personalizada para Gutenberg.<\/p>\n<p>Novamente:<\/p>\n<ol>\n<li><a href=\"#option-3-create-new-block\">Crie um novo plugin de bloco com create-block<\/a><\/li>\n<li><a href=\"#option-3-register-custom-meta-box\">Registre uma meta box personalizada para o Editor Cl\u00e1ssico<\/a><\/li>\n<li><a href=\"#option-3-register-custom-fields\">Registre os meta fields personalizados no arquivo principal do plugin atrav\u00e9s da fun\u00e7\u00e3o register_post_meta()<\/a><\/li>\n<li><a href=\"#option-3-register-plugin\">Registre um plugin no arquivo index.js<\/a><\/li>\n<li><a href=\"#option-3-build-component\">Construir o componente usando componentes incorporados do Gutenberg<\/a><\/li>\n<\/ol>\n<h4 id=\"#option-3-create-new-block\">Crie um novo plugin de bloco com a ferramenta create-block<\/h4>\n<p>Novamente, para criar um novo plugin de bloco, siga os passos discutidos acima. Voc\u00ea pode criar um novo plugin ou editar os scripts constru\u00eddos nos exemplos anteriores.<\/p>\n<h4 id=\"#option-3-register-custom-meta-box\">Registre uma Meta Box personalizada para o Editor Cl\u00e1ssico<\/h4>\n<p>Agora registre uma meta box personalizada para garantir a compatibilidade retroativa para sites WordPress que ainda usam o Editor Cl\u00e1ssico. O processo \u00e9 o mesmo descrito na se\u00e7\u00e3o anterior.<\/p>\n<h4 id=\"#option-3-register-custom-fields\">Registre os Meta Fields personalizados no arquivo principal do plugin<\/h4>\n<p>Registre os meta fields personalizados no arquivo principal do plugin atrav\u00e9s da fun\u00e7\u00e3o <code>register_post_meta()<\/code>.<\/p>\n<h4 id=\"#option-3-register-plugin\">Registre um plugin no arquivo index.js<\/h4>\n<p>Agora crie um arquivo <strong>CustomSidebar.js<\/strong> vazio em sua pasta de <strong>componentes<\/strong>.<\/p>\n<p>Uma vez feito, mude seu arquivo <strong>index.js<\/strong> como segue:<\/p>\n<pre><code class=\"language-js\">\/**\n * Registers a plugin for adding items to the Gutenberg Toolbar\n *\n * @see https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar\/\n *\/\nimport { registerPlugin } from '@wordpress\/plugins';\n\nimport CustomSidebar from '.\/components\/CustomSidebar';\n\/\/ import MetaBox from '.\/components\/MetaBox';\n\nregisterPlugin( 'metadata-block', {\n    render: CustomSidebar\n} );<\/code><\/pre>\n<p>Com o c\u00f3digo acima, primeiramente importamos o componente <code>CustomSidebar<\/code>\u00a0e depois dizemos \u00e0 fun\u00e7\u00e3o <code>registerPlugin<\/code> para renderizar o novo componente.<\/p>\n<h4 id=\"#option-3-build-component\">Construa o componente usando componentes incorporados do Gutenberg<\/h4>\n<p>Em seguida, abra o arquivo <strong>CustomSidebar.js<\/strong> e adicione as seguintes depend\u00eancias:<\/p>\n<pre><code class=\"language-php\">import { __ } from '@wordpress\/i18n';\nimport { compose } from '@wordpress\/compose';\nimport { withSelect, withDispatch } from '@wordpress\/data';\nimport { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress\/edit-post';\nimport { PanelBody, PanelRow, TextControl, DateTimePicker } from '@wordpress\/components';<\/code><\/pre>\n<p>Voc\u00ea deve notar que estamos importando dois novos componentes:<\/p>\n<ul>\n<li><code>PluginSidebar<\/code> adiciona um \u00edcone na barra de ferramentas do Gutenberg que, quando clicado, exibe uma barra lateral incluindo o conte\u00fado envolvido no <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar\/\">elemento <code>&lt;PluginSidebar \/&gt;<\/code><\/a> (O componente tamb\u00e9m est\u00e1 documentado <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/569241a3e1b7d0cc0567fccb92b1b57eb1b5b9c5\/packages\/edit-site\/src\/components\/sidebar-edit-mode\/plugin-sidebar\/index.js\">no GitHub<\/a>).<\/li>\n<li><code>PluginSidebarMoreMenuItem<\/code> <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar-more-menu-item\/\">torna um item de menu<\/a> em Plugins in <strong>More Menu<\/strong> dropdown e pode ser usado para ativar o componente <code>PluginSidebar<\/code> correspondente (veja tamb\u00e9m <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a7e2895829c16ecd77a5ba22d84f1dee1cfb0977\/packages\/edit-post\/src\/components\/header\/plugin-sidebar-more-menu-item\/index.js\">no GitHub<\/a>).<\/li>\n<\/ul>\n<p>Agora voc\u00ea pode construir seu componente personalizado:<\/p>\n<pre><code class=\"language-jsx\">const CustomSidebar = ( { postType, metaFields, setMetaFields } ) =&gt; {\n        \n    if ( 'post' !== postType ) return null;\n\n    return (\n        &lt;&gt;\n            &lt;PluginSidebarMoreMenuItem \n                target=\"metadata-sidebar\" \n                icon=\"book\"\n            &gt;\n                Metadata Sidebar\n            &lt;\/PluginSidebarMoreMenuItem&gt;\n            &lt;PluginSidebar \n                name=\"metadata-sidebar\" \n                icon=\"book\" \n                title=\"My Sidebar\"\n            &gt;\n                &lt;PanelBody title=\"Book details\" initialOpen={ true }&gt;\n                    &lt;PanelRow&gt;\n                        &lt;TextControl \n                            value={ metaFields._meta_fields_book_title }\n                            label={ __( \"Title\" ) }\n                            onChange={ (value) =&gt; setMetaFields( { _meta_fields_book_title: value } ) }\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                    &lt;PanelRow&gt;\n                        &lt;TextControl \n                            value={ metaFields._meta_fields_book_author }\n                            label={ __(\"Author\", \"textdomain\") }\n                            onChange={ (value) =&gt; setMetaFields( { _meta_fields_book_author: value } ) }\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                    &lt;PanelRow&gt;\n                        &lt;TextControl \n                            value={ metaFields._meta_fields_book_publisher }\n                            label={ __(\"Publisher\", \"textdomain\") }\n                            onChange={ (value) =&gt; setMetaFields( { _meta_fields_book_publisher: value } ) }\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                    &lt;PanelRow&gt;\n                        &lt;DateTimePicker\n                            currentDate={ metaFields._meta_fields_book_date }\n                            onChange={ ( newDate ) =&gt; setMetaFields( { _meta_fields_book_date: newDate } ) }\n                            __nextRemoveHelpButton\n                            __nextRemoveResetButton\n                        \/&gt;\n                    &lt;\/PanelRow&gt;\n                &lt;\/PanelBody&gt;\n            &lt;\/PluginSidebar&gt;\n        &lt;\/&gt;\n    )\n}<\/code><\/pre>\n<p>O passo final \u00e9 a composi\u00e7\u00e3o dos componentes com <code>withSelect<\/code> e <code>withDispatch<\/code> componentes de ordem superior:<\/p>\n<pre><code class=\"language-js\">const applyWithSelect = withSelect( ( select ) =&gt; {\n    return {\n        metaFields: select( 'core\/editor' ).getEditedPostAttribute( 'meta' ),\n        postType: select( 'core\/editor' ).getCurrentPostType()\n    };\n} );\n\nconst applyWithDispatch = withDispatch( ( dispatch ) =&gt; {\n    return {\n        setMetaFields ( newValue ) {\n            dispatch('core\/editor').editPost( { meta: newValue } )\n        }\n    }\n} );\n\nexport default compose([\n    applyWithSelect,\n    applyWithDispatch\n])(CustomSidebar);<\/code><\/pre>\n<p>Salve suas altera\u00e7\u00f5es, ent\u00e3o verifique a interface do editor. Se voc\u00ea abrir o menu suspenso <strong>Options<\/strong>, voc\u00ea ver\u00e1 um novo item <strong>Metadata Sidebar<\/strong>\u00a0sob a se\u00e7\u00e3o <strong>Plugins<\/strong>. Clicando no novo item, voc\u00ea ativar\u00e1 sua nova barra lateral personalizada.<\/p>\n<figure id=\"attachment_143176\" aria-describedby=\"caption-attachment-143176\" style=\"width: 1858px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-143176 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/plugin-sidebar-more-menu-item.jpg\" alt=\"O componente PluginSidebarMoreMenuItem adiciona um item de menu em Op\u00e7\u00f5es - Plugins.\" width=\"1858\" height=\"1096\"><figcaption id=\"caption-attachment-143176\" class=\"wp-caption-text\">O componente PluginSidebarMoreMenuItem adiciona um item de menu em Op\u00e7\u00f5es &#8211; Plugins.<\/figcaption><\/figure>\n<p>O mesmo acontece quando voc\u00ea clica no \u00edcone do livro no canto superior direito.<\/p>\n<figure id=\"attachment_143175\" aria-describedby=\"caption-attachment-143175\" style=\"width: 1860px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-143175 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/12\/custom-sidebar-open.jpg\" alt=\"A barra lateral de configura\u00e7\u00f5es do Plugin.\" width=\"1860\" height=\"1198\"><figcaption id=\"caption-attachment-143175\" class=\"wp-caption-text\">A barra lateral de configura\u00e7\u00f5es do Plugin.<\/figcaption><\/figure>\n<p>Agora volte ao seu site de desenvolvimento e crie um novo artigo no blog. Preencha as meta fields, depois adicione o bloco \u00e0 tela do editor. Ele deve incluir os mesmos valores meta que voc\u00ea digitou na sua barra lateral personalizada.<\/p>\n<p>Salve o artigo e visualize a p\u00e1gina no frontend. Voc\u00ea deve ver seu cart\u00e3o incluindo o t\u00edtulo do livro, autor, editora e data de publica\u00e7\u00e3o.<\/p>\n<p>Voc\u00ea encontrar\u00e1 o c\u00f3digo completo deste artigo neste <a href=\"https:\/\/gist.github.com\/carlodaniele\/05d4e8b6d982a4ef30840015fbdfb35f\">resumo p\u00fablico<\/a>.<\/p>\n<h2>Outras leituras<\/h2>\n<p>Neste artigo, cobrimos v\u00e1rios t\u00f3picos, de seletores a componentes de ordem superior e muito mais. N\u00f3s tamb\u00e9m ligamos os principais recursos que usamos como refer\u00eancia ao longo do artigo.<\/p>\n<p>No entanto, se voc\u00ea quiser se aprofundar nesses t\u00f3picos, verifique tamb\u00e9m estes recursos adicionais:<\/p>\n<h3>Documenta\u00e7\u00e3o do Gutenberg e recursos oficiais do WordPress<\/h3>\n<ul>\n<li>Manual do Plugin \/ <a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/custom-meta-boxes\/\">Meta Box\u00a0Personalizadas<\/a><\/li>\n<li>Manual do Plugin \/ <a href=\"https:\/\/developer.wordpress.org\/plugins\/metadata\/managing-post-metadata\/\">Gerenciando Metadados do Posto<\/a><\/li>\n<li>Guias \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/metabox\/\">Meta Box<\/a><\/li>\n<li>Guias de Como Fazer \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/plugin-sidebar-0\/\">Plugin Sidebar<\/a><\/li>\n<li>Manual do Editor de Blocos \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/slotfills\/plugin-sidebar\/\">PluginSidebar<\/a><\/li>\n<li>Refer\u00eancia do pacote \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-compose\/\">@wordpress\/compose<\/a><\/li>\n<li>Pacotes \/ dados \/ <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#comparison-with-redux\">Compara\u00e7\u00e3o com Redux<\/a><\/li>\n<li>Pacotes \/ dados \/ <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md#withdispatch\" target=\"_blank\" rel=\"noopener noreferrer\">withDispatch<\/a><\/li>\n<li>Pacotes \/ dados \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#dispatch\" target=\"_blank\" rel=\"noopener noreferrer\">dispatch<\/a><\/li>\n<li>Pacotes \/ dados \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#dispatch\" target=\"_blank\" rel=\"noopener noreferrer\">withSelect<\/a><\/li>\n<li>Pacotes \/ dados \/ <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#select\">selecionar<\/a><\/li>\n<\/ul>\n<h3>Mais recursos oficiais<\/h3>\n<ul>\n<li><a href=\"https:\/\/reactjs.org\/docs\/higher-order-components.html\">Componentes de Ordem Superior<\/a> no React<\/li>\n<li><a href=\"https:\/\/redux.js.org\/tutorials\/fundamentals\/part-7-standard-patterns#action-creators\">Criadores de a\u00e7\u00e3o<\/a> no Redux<\/li>\n<li><a href=\"https:\/\/redux.js.org\/usage\/deriving-data-selectors\">Derivando Dados com Seletores<\/a> no Redux<\/li>\n<\/ul>\n<h3>Recursos adicionais da comunidade<\/h3>\n<ul>\n<li><a href=\"https:\/\/unfoldingneurons.com\/2019\/fantastic-hooks-and-where-to-use-them\">Fant\u00e1sticos hooks e onde us\u00e1-los<\/a> (por Darren Ethier)<\/li>\n<li><a href=\"https:\/\/unfoldingneurons.com\/2020\/wordpress-data-series-overview-and-introduction\">Vis\u00e3o Geral e Introdu\u00e7\u00e3o da S\u00e9rie de Dados WordPress<\/a> (por Darren Ethier)<\/li>\n<li><a href=\"https:\/\/github.com\/airbnb\/javascript\/tree\/master\/react\">Guia de estilo Airbnb React\/JSX<\/a><\/li>\n<li><a href=\"https:\/\/www.robinwieruch.de\/react-higher-order-components\/\">React Componentes de Ordem Superior (HOCs)<\/a> (por Robin Wieruch)<\/li>\n<li><a href=\"https:\/\/www.educative.io\/answers\/function-composition-in-javascript\">Composi\u00e7\u00e3o de fun\u00e7\u00f5es em JavaScript<\/a><\/li>\n<li><a href=\"https:\/\/ryanwelcher.com\/2021\/08\/requesting-data-in-gutenberg-with-getentityrecords\/\">Solicitando dados no Gutenberg com getEntityRecords<\/a> (por Ryan Welcher)<\/li>\n<\/ul>\n<h3>Leituras \u00fateis do site Kinsta<\/h3>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-react-js\/\">O que \u00e9 React.js? Uma Vis\u00e3o Geral das Populares Bibliotecas JavaScript<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-react\/\">As Melhores Pr\u00e1ticas do React em 2026<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/bibliotecas-de-componentes-react\/\">Bibliotecas de Componentes React UI<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/fluxo-de-trabalho-wordpress\/\">Como Criar um Fluxo de Trabalho WordPress Eficaz para Desenvolvedores<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/salario-de-um-desenvolvedor-wordpress\/\">O Sal\u00e1rio M\u00e9dio de um Desenvolvedor WordPress<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-javascript\/\">O Que \u00e9 JavaScript? Uma Vis\u00e3o Geral da Linguagem de Script Mais Popular da Web<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/erros-no-javascript\/\">Um Guia Detalhado para o Gerenciamento de Erros no JavaScript<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/bibliotecas-javascript\/\">As 40 Melhores Bibliotecas e Frameworks JavaScript em 2026<\/a><\/li>\n<\/ul>\n<h2>Resumo<\/h2>\n<p>Neste terceiro artigo de nossa s\u00e9rie sobre o desenvolvimento de blocos Gutenberg, cobrimos novos t\u00f3picos avan\u00e7ados que devem tornar o quadro delineado nos artigos anteriores sobre o <a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/\">desenvolvimento de blocos din\u00e2micos<\/a> e <a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-personalizados-gutenberg\/\">est\u00e1ticos<\/a> \u00a0mais completo.<\/p>\n<p>Agora voc\u00ea deve conseguir aproveitar o potencial dos campos personalizados no Gutenberg e criar sites WordPress mais avan\u00e7ados e funcionais.<\/p>\n<p>Com as habilidades que voc\u00ea adquiriu com nossos artigos sobre desenvolvimento de blocos, voc\u00ea tamb\u00e9m deve ter uma boa ideia de como desenvolver componentes React fora do WordPress. Afinal de contas, Gutenberg \u00e9 um SPA baseado em React.<\/p>\n<p>Agora \u00e9 com voc\u00ea! Voc\u00ea j\u00e1 criou blocos Gutenberg que usam meta fields personalizados? Compartilhe suas cria\u00e7\u00f5es conosco nos coment\u00e1rios abaixo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Os campos personalizados permitem que informa\u00e7\u00f5es adicionais sejam atribu\u00eddas ao conte\u00fado do site. Esta informa\u00e7\u00e3o \u00e9 normalmente conhecida como metadados. Metadados s\u00e3o informa\u00e7\u00f5es sobre informa\u00e7\u00e3o. No &#8230;<\/p>\n","protected":false},"author":36,"featured_media":56607,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1026,1037],"class_list":["post-56606","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-desenvolvimento-wordpress","topic-dicas-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Como Adicionar Meta Boxes e Meta Fields Personalizados aos Artigos no Gutenberg<\/title>\n<meta name=\"description\" content=\"Gutenberg muda a maneira como usamos meta boxes e campos personalizados no WordPress. Neste artigo, voc\u00ea aprender\u00e1 a gerenciar metadados no editor de blocos como um profissional.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/pt\/blog\/como-adicionar-meta-boxes-e-meta-fields\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Adicionar Meta Boxes e Meta Fields Personalizados aos Artigos no Gutenberg\" \/>\n<meta property=\"og:description\" content=\"Gutenberg muda a maneira como usamos meta boxes e campos personalizados no WordPress. Neste artigo, voc\u00ea aprender\u00e1 a gerenciar metadados no editor de blocos como um profissional.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/como-adicionar-meta-boxes-e-meta-fields\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-25T11:12:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-17T13:27:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Gutenberg muda a maneira como usamos meta boxes e campos personalizados no WordPress. Neste artigo, voc\u00ea aprender\u00e1 a gerenciar metadados no editor de blocos como um profissional.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"25 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/como-adicionar-meta-boxes-e-meta-fields\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/como-adicionar-meta-boxes-e-meta-fields\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Como Adicionar Meta Boxes e Meta Fields Personalizados aos Artigos no Gutenberg\",\"datePublished\":\"2023-01-25T11:12:27+00:00\",\"dateModified\":\"2025-01-17T13:27:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/como-adicionar-meta-boxes-e-meta-fields\/\"},\"wordCount\":4466,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/como-adicionar-meta-boxes-e-meta-fields\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/como-adicionar-meta-boxes-e-meta-fields\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/como-adicionar-meta-boxes-e-meta-fields\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/como-adicionar-meta-boxes-e-meta-fields\/\",\"name\":\"Como Adicionar Meta Boxes e Meta Fields Personalizados aos Artigos no Gutenberg\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/como-adicionar-meta-boxes-e-meta-fields\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/como-adicionar-meta-boxes-e-meta-fields\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg\",\"datePublished\":\"2023-01-25T11:12:27+00:00\",\"dateModified\":\"2025-01-17T13:27:57+00:00\",\"description\":\"Gutenberg muda a maneira como usamos meta boxes e campos personalizados no WordPress. Neste artigo, voc\u00ea aprender\u00e1 a gerenciar metadados no editor de blocos como um profissional.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/como-adicionar-meta-boxes-e-meta-fields\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/como-adicionar-meta-boxes-e-meta-fields\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/como-adicionar-meta-boxes-e-meta-fields\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/como-adicionar-meta-boxes-e-meta-fields\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Desenvolvimento WordPress\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/desenvolvimento-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Como Adicionar Meta Boxes e Meta Fields Personalizados aos Artigos no Gutenberg\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinsta.com\/pt\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Como Adicionar Meta Boxes e Meta Fields Personalizados aos Artigos no Gutenberg","description":"Gutenberg muda a maneira como usamos meta boxes e campos personalizados no WordPress. Neste artigo, voc\u00ea aprender\u00e1 a gerenciar metadados no editor de blocos como um profissional.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/pt\/blog\/como-adicionar-meta-boxes-e-meta-fields\/","og_locale":"pt_PT","og_type":"article","og_title":"Como Adicionar Meta Boxes e Meta Fields Personalizados aos Artigos no Gutenberg","og_description":"Gutenberg muda a maneira como usamos meta boxes e campos personalizados no WordPress. Neste artigo, voc\u00ea aprender\u00e1 a gerenciar metadados no editor de blocos como um profissional.","og_url":"https:\/\/kinsta.com\/pt\/blog\/como-adicionar-meta-boxes-e-meta-fields\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2023-01-25T11:12:27+00:00","article_modified_time":"2025-01-17T13:27:57+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg","type":"image\/jpeg"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Gutenberg muda a maneira como usamos meta boxes e campos personalizados no WordPress. Neste artigo, voc\u00ea aprender\u00e1 a gerenciar metadados no editor de blocos como um profissional.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg","twitter_creator":"@carlodaniele","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Carlo Daniele","Tempo estimado de leitura":"25 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/como-adicionar-meta-boxes-e-meta-fields\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/como-adicionar-meta-boxes-e-meta-fields\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Como Adicionar Meta Boxes e Meta Fields Personalizados aos Artigos no Gutenberg","datePublished":"2023-01-25T11:12:27+00:00","dateModified":"2025-01-17T13:27:57+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/como-adicionar-meta-boxes-e-meta-fields\/"},"wordCount":4466,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/como-adicionar-meta-boxes-e-meta-fields\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/como-adicionar-meta-boxes-e-meta-fields\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/como-adicionar-meta-boxes-e-meta-fields\/","url":"https:\/\/kinsta.com\/pt\/blog\/como-adicionar-meta-boxes-e-meta-fields\/","name":"Como Adicionar Meta Boxes e Meta Fields Personalizados aos Artigos no Gutenberg","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/como-adicionar-meta-boxes-e-meta-fields\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/como-adicionar-meta-boxes-e-meta-fields\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg","datePublished":"2023-01-25T11:12:27+00:00","dateModified":"2025-01-17T13:27:57+00:00","description":"Gutenberg muda a maneira como usamos meta boxes e campos personalizados no WordPress. Neste artigo, voc\u00ea aprender\u00e1 a gerenciar metadados no editor de blocos como um profissional.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/como-adicionar-meta-boxes-e-meta-fields\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/como-adicionar-meta-boxes-e-meta-fields\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/como-adicionar-meta-boxes-e-meta-fields\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/01\/how-to-add-custom-fields-and-meta-boxes-to-posts-in-gutenberg-01.jpeg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/como-adicionar-meta-boxes-e-meta-fields\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Desenvolvimento WordPress","item":"https:\/\/kinsta.com\/pt\/topicos\/desenvolvimento-wordpress\/"},{"@type":"ListItem","position":3,"name":"Como Adicionar Meta Boxes e Meta Fields Personalizados aos Artigos no Gutenberg"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinsta.com\/pt\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/56606","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=56606"}],"version-history":[{"count":10,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/56606\/revisions"}],"predecessor-version":[{"id":57731,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/56606\/revisions\/57731"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/56606\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/56606\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/56606\/translations\/pt"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/56606\/translations\/jp"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/56606\/translations\/de"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/56606\/translations\/dk"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/56606\/translations\/nl"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/56606\/translations\/se"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/56606\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/56606\/translations\/fr"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/56606\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/56607"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=56606"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=56606"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=56606"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}