{"id":51875,"date":"2022-08-08T04:00:05","date_gmt":"2022-08-08T07:00:05","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=51875&#038;preview=true&#038;preview_id=51875"},"modified":"2025-01-20T07:03:11","modified_gmt":"2025-01-20T10:03:11","slug":"blocos-dinamicos-gutenberg","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/","title":{"rendered":"Como Criar Blocos Din\u00e2micos para Gutenberg"},"content":{"rendered":"<p>Voc\u00ea ainda est\u00e1 perplexo com o <a href=\"https:\/\/kinsta.com\/pt\/blog\/editor-gutenberg-wordpress\/\">Gutenberg<\/a>? Ou voc\u00ea est\u00e1 entre aqueles que acreditam firmemente no potencial do editor de blocos e querem descobrir at\u00e9 onde podem levar a criatividade deles usando o editor de blocos?<\/p>\n<p>Qualquer que seja a categoria de usu\u00e1rios em que voc\u00ea se encaixe, o Gutenberg est\u00e1 aqui para ficar e este artigo lhe dar\u00e1 uma vis\u00e3o aprofundada do que acontece nos bastidores do editor de blocos do WordPress. Mas isso n\u00e3o \u00e9 tudo!<\/p>\n<p>Seguindo <a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-personalizados-gutenberg\/\">nosso tutorial anterior<\/a> onde fornecemos uma introdu\u00e7\u00e3o geral ao desenvolvimento de blocos do Gutenberg, este artigo vai al\u00e9m do b\u00e1sico, introduzindo tipos de blocos mais avan\u00e7ados. Estes blocos s\u00e3o chamados de blocos din\u00e2micos.<\/p>\n<p>Hoje voc\u00ea vai aprender o que s\u00e3o blocos din\u00e2micos, como eles funcionam e tudo o que voc\u00ea precisa saber para criar blocos din\u00e2micos do zero.<\/p>\n<p>Ent\u00e3o, quais s\u00e3o os blocos din\u00e2micos de Gutenberg, e quais s\u00e3o as principais diferen\u00e7as entre os blocos <a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-personalizados-gutenberg\/\">est\u00e1ticos<\/a> e din\u00e2micos?<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>O que s\u00e3o blocos din\u00e2micos? Um exemplo<\/h2>\n<p>Enquanto com blocos est\u00e1ticos o conte\u00fado \u00e9 adicionado manualmente pelo usu\u00e1rio durante a edi\u00e7\u00e3o de um artigo ou p\u00e1gina, com blocos din\u00e2micos o conte\u00fado \u00e9 carregado e processado na hora de carregar a p\u00e1gina. Com blocos din\u00e2micos, o conte\u00fado do bloco \u00e9 retirado do banco de dados e exibido como \u00e9 ou resultante de qualquer tipo de manipula\u00e7\u00e3o de dados.<\/p>\n<p>Vamos explicar isso com um exemplo. Digamos que voc\u00ea queira criar um grupo de blocos agrupados mostrando detalhes do autor do artigo com uma sele\u00e7\u00e3o dos \u00faltimos artigos do mesmo autor.<\/p>\n<figure id=\"attachment_119966\" aria-describedby=\"caption-attachment-119966\" style=\"width: 1470px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119966 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/from-the-author.jpg\" alt=\"Um bloco de grupo incluindo Autor do Artigo e \u00daltimos Artigos\" width=\"1470\" height=\"1064\"><figcaption id=\"caption-attachment-119966\" class=\"wp-caption-text\">Um bloco de grupo incluindo Autor do Artigo e \u00daltimos Artigos<\/figcaption><\/figure>\n<p>Como usu\u00e1rios do Gutenberg, voc\u00ea poderia usar os seguintes blocos:<\/p>\n<ul>\n<li>O bloco central do <strong>Heading<\/strong><\/li>\n<li>O bloco central <strong>Autor do artigo<\/strong><\/li>\n<li>O bloco central de <strong>Artigos mais recentes<\/strong><\/li>\n<\/ul>\n<p>Voc\u00ea tamb\u00e9m poderia criar um grupo incluindo esses blocos e adicionar o grupo a blocos reutiliz\u00e1veis para uso futuro.<\/p>\n<figure id=\"attachment_119967\" aria-describedby=\"caption-attachment-119967\" style=\"width: 1470px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-119967\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/add-to-reusable-blocks.jpg\" alt=\"Adicionando um bloco de grupo a blocos reutiliz\u00e1veis\" width=\"1470\" height=\"1064\"><figcaption id=\"caption-attachment-119967\" class=\"wp-caption-text\">Adicionando um bloco de grupo a blocos reutiliz\u00e1veis<\/figcaption><\/figure>\n<p>\u00c9 bastante simples, n\u00e3o \u00e9? Voc\u00ea pode criar um bloco din\u00e2mico e adicion\u00e1-lo aos seus artigos e p\u00e1ginas em um piscar de olhos.<\/p>\n<p>A partir do <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-5-9\/\">WordPress 5.9<\/a>, o <a href=\"https:\/\/kinsta.com\/pt\/blog\/editor-gutenberg-wordpress\/\">editor de blocos<\/a> fornece mais de 90 blocos diferentes, e as chances s\u00e3o de que voc\u00ea encontre o bloco certo para voc\u00ea, logo de cara. E, se voc\u00ea precisar de mais, fa\u00e7a uma busca r\u00e1pida no diret\u00f3rio de plugins do WordPress e voc\u00ea encontrar\u00e1 um monte de plugins gratuitos fornecendo <a href=\"https:\/\/wordpress.org\/plugins\/search\/gutenberg\/\">blocos adicionais<\/a>.<\/p>\n<p>Mas e se voc\u00ea \u00e9 um desenvolvedor WordPress &#8211; ou est\u00e1 planejando uma carreira como um <a href=\"https:\/\/kinsta.com\/pt\/blog\/salario-de-um-desenvolvedor-wordpress\/\">desenvolvedor WordPress<\/a>? Talvez voc\u00ea tenha necessidades muito espec\u00edficas e n\u00e3o consiga encontrar o bloco que voc\u00ea est\u00e1 procurando, ou simplesmente queira adquirir novas habilidades profissionais. Em tais situa\u00e7\u00f5es, voc\u00ea pode querer aprender como criar seus blocos din\u00e2micos.<\/p>\n\n<h2>Blocos din\u00e2micos de Gutenberg do ponto de vista do desenvolvedor<\/h2>\n<p>Os <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/block-tutorial\/creating-dynamic-blocks\/\">blocos din\u00e2micos<\/a> t\u00eam dois casos de uso principal.<\/p>\n<p>O primeiro caso de uso \u00e9 quando voc\u00ea precisa atualizar o conte\u00fado de um bloco quando a p\u00e1gina que cont\u00e9m o bloco n\u00e3o foi atualizada. Por exemplo, isto acontece quando o bloco inclui uma lista dos \u00faltimos artigos ou coment\u00e1rios, e em geral sempre que o conte\u00fado do bloco \u00e9 gerado dinamicamente usando dados recuperados do banco de dados.<\/p>\n<figure id=\"attachment_119976\" aria-describedby=\"caption-attachment-119976\" style=\"width: 1996px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-119976\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/query-loop-block.jpg\" alt=\"Adicionando um bloco de consulta em loop\" width=\"1996\" height=\"1176\"><figcaption id=\"caption-attachment-119976\" class=\"wp-caption-text\">Adicionando um bloco de consulta em loop<\/figcaption><\/figure>\n<p>O segundo caso de uso \u00e9 quando uma atualiza\u00e7\u00e3o do c\u00f3digo do bloco precisa ser mostrada imediatamente no frontend. Usar um bloco din\u00e2mico ao inv\u00e9s de um bloco est\u00e1tico faz com que as mudan\u00e7as sejam imediatamente aplicadas a todas as ocorr\u00eancias do bloco.<\/p>\n<p>Por outro lado, se voc\u00ea mudar o HTML produzido por um bloco est\u00e1tico, o usu\u00e1rio ver\u00e1 um <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-edit-save\/#validation\">di\u00e1logo de invalida\u00e7\u00e3o<\/a> at\u00e9 que cada inst\u00e2ncia da vers\u00e3o anterior do bloco seja removida e substitu\u00edda pela nova vers\u00e3o, ou voc\u00ea marca a vers\u00e3o antiga como depreciada (veja tamb\u00e9m <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-deprecation\/\">Deprecation<\/a> and <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/7604\">Block Validation, Deprecation and Migration Experience<\/a>).<\/p>\n<figure id=\"attachment_120364\" aria-describedby=\"caption-attachment-120364\" style=\"width: 1350px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120364\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/this-block-contains-unexpected-or-invalid-content.jpg\" alt=\"Conte\u00fado inesperado ou inv\u00e1lido.\" width=\"1350\" height=\"378\"><figcaption id=\"caption-attachment-120364\" class=\"wp-caption-text\">Conte\u00fado inesperado ou inv\u00e1lido<\/figcaption><\/figure>\n<p>Dito isto, h\u00e1 alguns conceitos que voc\u00ea precisa entender antes de come\u00e7ar a construir blocos din\u00e2micos.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"3\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>Status do aplicativo e armazenamento de dados<\/h3>\n<p><a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-personalizados-gutenberg\/#what-is-a-gutenberg-block\">Gutenberg \u00e9 um aplicativo React SPA<\/a>, e tudo em Gutenberg \u00e9 um componente React. T\u00edtulo do artigo, cabe\u00e7alhos, par\u00e1grafos, imagens e qualquer bloco de conte\u00fado HTML no editor \u00e9 um componente React, assim como controles da barra lateral e da barra de ferramentas do bloco.<\/p>\n<p>Em nosso artigo anterior, s\u00f3 us\u00e1vamos propriedades para armazenar dados. Neste artigo, vamos dar um passo adiante, introduzindo o conceito de <strong>estado<\/strong>.<\/p>\n<p>Para simplificar, o objeto <code>state<\/code> \u00e9 <a href=\"https:\/\/www.w3schools.com\/react\/react_state.asp\">um objeto JavaScript simples<\/a>, usado para conter informa\u00e7\u00f5es sobre um componente. O <code>state<\/code> do componente pode mudar ao longo do tempo, e a qualquer momento que ele mudar, o componente se renderiza novamente.<\/p>\n<p>Assim como o objeto <code>state<\/code>, as propriedades s\u00e3o objetos JavaScript simples usados para guardar informa\u00e7\u00f5es sobre o componente. Mas h\u00e1 <a href=\"https:\/\/reactjs.org\/docs\/faq-state.html#what-is-the-difference-between-state-and-props\">uma diferen\u00e7a chave<\/a> entre os adere\u00e7os e <code>state<\/code>:<\/p>\n<blockquote><p><code>props<\/code> s\u00e3o passados para o componente (similar aos par\u00e2metros da fun\u00e7\u00e3o) enquanto que <code>state<\/code> \u00e9 gerenciado dentro do componente (similar \u00e0s vari\u00e1veis declaradas dentro de uma fun\u00e7\u00e3o)<\/p><\/blockquote>\n<p>.<br \/>\nVoc\u00ea pode pensar no estado como um instant\u00e2neo dos dados obtidos em um dado momento que um aplicativo armazena para controlar o comportamento de um componente. Por exemplo, se a barra lateral de configura\u00e7\u00f5es do editor de blocos estiver aberta, uma informa\u00e7\u00e3o ser\u00e1 armazenada em algum lugar no objeto <code>state<\/code>.<\/p>\n<p>Quando a informa\u00e7\u00e3o \u00e9 compartilhada dentro de um \u00fanico componente, n\u00f3s a chamamos de <strong>local state<\/strong>. Quando a informa\u00e7\u00e3o \u00e9 compartilhada entre componentes dentro de um aplicativo, n\u00f3s a chamamos de <strong>Application State<\/strong>.<\/p>\n<p>O estado do aplicativo est\u00e1 intimamente relacionado com o conceito de loja. De acordo com os <a href=\"https:\/\/redux.js.org\/api\/store\">documentos do Redux<\/a>:<\/p>\n<blockquote><p>Uma loja cont\u00e9m toda a <a href=\"https:\/\/redux.js.org\/understanding\/thinking-in-redux\/glossary#state\">\u00e1rvore de estado<\/a> do seu aplicativo. A \u00fanica maneira de mudar o estado dentro dela \u00e9 enviar uma <a href=\"https:\/\/redux.js.org\/understanding\/thinking-in-redux\/glossary#action\">a\u00e7\u00e3o<\/a> sobre ela.<\/p><\/blockquote>\n<p>Assim, Redux armazena um estado do aplicativo em uma \u00fanica \u00e1rvore de objetos imut\u00e1vel (ou seja, uma loja). A \u00e1rvore de objetos s\u00f3 pode ser mudada criando um novo objeto usando <a href=\"https:\/\/redux.js.org\/tutorials\/fundamentals\/part-3-state-actions-reducers#designing-actions\">a\u00e7\u00f5es<\/a> e <a href=\"https:\/\/redux.js.org\/tutorials\/fundamentals\/part-3-state-actions-reducers#writing-reducers\">redutores<\/a>.<\/p>\n<p>No WordPress, as lojas s\u00e3o gerenciadas pelo <strong>m\u00f3dulo de dados do WordPress<\/strong>.<\/p>\n<h3>Modularidade, Pacotes e Lojas de Dados no Gutenberg<\/h3>\n<p>O reposit\u00f3rio Gutenberg \u00e9 constru\u00eddo do zero em v\u00e1rios <strong>m\u00f3dulos reutiliz\u00e1veis e independentes<\/strong> que, combinados entre si, constroem a interface de edi\u00e7\u00e3o. Estes m\u00f3dulos tamb\u00e9m s\u00e3o chamados de <strong>pacotes<\/strong>.<\/p>\n<p>A documenta\u00e7\u00e3o oficial lista dois <a href=\"https:\/\/developer.wordpress.org\/block-editor\/explanations\/architecture\/modularity\/#types-of-packages\">tipos diferentes de pacotes<\/a>:<\/p>\n<ul>\n<li><strong>Os pacotes de produ\u00e7\u00e3o<\/strong> comp\u00f5em o c\u00f3digo de produ\u00e7\u00e3o que roda no navegador. Existem dois tipos de pacotes de produ\u00e7\u00e3o no WordPress:\n<ul>\n<li><strong>Pacotes com folhas de estilo<\/strong> fornecem folhas de estilo para funcionar corretamente.<\/li>\n<li><strong>Pacotes com armazenamento de dados<\/strong> definem o armazenamento de dados para lidar com seu estado. <a href=\"https:\/\/developer.wordpress.org\/block-editor\/explanations\/architecture\/modularity\/#packages-with-data-stores\">Pacotes com armazenamento de dados<\/a> podem ser usados por plugins e temas de terceiros para recuperar e manipular dados.<\/li>\n<\/ul>\n<\/li>\n<li>Os <strong>pacotes de desenvolvimento<\/strong> s\u00e3o usados no modo de desenvolvimento. Esses pacotes incluem ferramentas parainting, testes, constru\u00e7\u00e3o, etc.<\/li>\n<\/ul>\n<p>Aqui estamos principalmente interessados em <a href=\"https:\/\/developer.wordpress.org\/block-editor\/explanations\/architecture\/modularity\/#packages-with-data-stores\">pacotes com armazenamento de dados<\/a>, usados para recuperar e manipular dados.<\/p>\n<h3>A loja de dados do WordPress<\/h3>\n<p>O m\u00f3dulo de dados do WordPress \u00e9 constru\u00eddo sobre o <a href=\"https:\/\/redux.js.org\/\">Redux<\/a> e compartilha os <a href=\"https:\/\/redux.js.org\/understanding\/thinking-in-redux\/three-principles\">tr\u00eas princ\u00edpios b\u00e1sicos do Redux<\/a>, embora com <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/e9994b49786570391b5690b85bd1f1fd78de845e\/packages\/data\/README.md#comparison-with-redux\">algumas diferen\u00e7as chave<\/a>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p><a href=\"https:\/\/redux.js.org\/introduction\/getting-started\">Redux<\/a> \u00e9 um gestor estadual para aplicativos JavaScript. A maneira como Redux trabalha \u00e9 resumida em <a href=\"https:\/\/redux.js.org\/understanding\/thinking-in-redux\/three-principles\">tr\u00eas princ\u00edpios b\u00e1sicos<\/a>:<\/p>\n<ul>\n<li><strong>Fonte \u00fanica de verdade<\/strong>: O <a href=\"https:\/\/redux.js.org\/understanding\/thinking-in-redux\/glossary#state\">estado global<\/a> do seu aplicativo \u00e9 armazenado em uma \u00e1rvore de objetos dentro de uma \u00fanica loja.<\/li>\n<li><strong>O estado \u00e9 somente leitura<\/strong>: A \u00fanica maneira de mudar o estado \u00e9 emitir uma a\u00e7\u00e3o, um objeto descrevendo o que aconteceu.<\/li>\n<li><strong>As mudan\u00e7as s\u00e3o feitas com fun\u00e7\u00f5es puras<\/strong>: Para especificar como a \u00e1rvore de estados \u00e9 transformada por a\u00e7\u00f5es, voc\u00ea escreve redutores puros.<\/li>\n<\/ul>\n<p><\/p>\n<\/aside>\n\n<p>A documenta\u00e7\u00e3o oficial fornece a <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/e9994b49786570391b5690b85bd1f1fd78de845e\/packages\/data\/README.md\">seguinte defini\u00e7\u00e3o<\/a>:<\/p>\n<blockquote><p>O m\u00f3dulo de dados do WordPress serve como um hub para gerenciar o estado do aplicativo tanto para plugins quanto para o pr\u00f3prio WordPress, fornecendo ferramentas para gerenciar dados dentro e entre m\u00f3dulos distintos. Ele \u00e9 projetado como um padr\u00e3o modular para organizar e compartilhar dados: simples o suficiente para satisfazer as necessidades de um pequeno plugin, enquanto escal\u00e1vel para atender \u00e0s exig\u00eancias de um aplicativo complexa de uma \u00fanica p\u00e1gina.<\/p><\/blockquote>\n<p>Por padr\u00e3o, o Gutenberg registra <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/data\/\">v\u00e1rios dep\u00f3sitos de dados<\/a> dentro do estado de aplicativo. Cada uma dessas lojas tem nome e prop\u00f3sito espec\u00edficos:<\/p>\n<ul>\n<li><code>core<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/core-data\">Dados principais do WordPress<\/a><\/li>\n<li><code>core\/annotations<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/annotations\">Anota\u00e7\u00f5es<\/a><\/li>\n<li><code>core\/blocks<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/blocks\">Dados dos Tipos de Bloco<\/a><\/li>\n<li><code>core\/block-editor<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/block-editor\">Os Dados do Editor de Blocos<\/a><\/li>\n<li><code>core\/editor<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/editor\">Os dados do Editor do Artigo<\/a><\/li>\n<li><code>core\/edit-post<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/edit-post\">Os dados da UI do Editor<\/a><\/li>\n<li><code>core\/notices<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/notices\">Dados de Avisos<\/a><\/li>\n<li><code>core\/nux<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/nux\">Os dados NUX (New User Experience)<\/a><\/li>\n<li><code>core\/viewport<\/code>: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/viewport\">Os Dados do Viewport<\/a><\/li>\n<\/ul>\n<p>Atrav\u00e9s destas lojas, voc\u00ea poder\u00e1 acessar um monte inteiro de dados:<\/p>\n<ol>\n<li><strong>Dados relacionados ao artigo atual<\/strong>, tais como t\u00edtulo do artigo, trecho, categorias e tags, blocos, etc.<\/li>\n<li><strong>Dados relacionados \u00e0 interface do usu\u00e1rio<\/strong>, ou seja, se uma altern\u00e2ncia estiver ativada ou desativada.<\/li>\n<li><strong>Dados relacionados a toda a instala\u00e7\u00e3o do WordPress<\/strong>, tais como taxonomias registradas, tipos de artigos, t\u00edtulo do blog, autores, etc.<\/li>\n<\/ol>\n<p>Estas lojas vivem no objeto global <code>wp<\/code>. Para acessar o estado de uma loja, voc\u00ea vai usar a fun\u00e7\u00e3o <code>select<\/code>.<\/p>\n<p>Para ver como funciona, crie um novo artigo ou p\u00e1gina e abra o <a href=\"https:\/\/kinsta.com\/pt\/blog\/ferramenta-inspecionar\/\">inspetor do seu navegador<\/a>. Encontre o console e digite a seguinte linha de c\u00f3digo:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\")<\/code><\/pre>\n<p>O resultado ser\u00e1 um objeto incluindo uma lista de fun\u00e7\u00f5es que voc\u00ea pode usar para obter dados do armazenamento de dados <code>core<\/code>. Estas fun\u00e7\u00f5es s\u00e3o chamadas de <strong>selectors<\/strong> e funcionam como interfaces para acessar valores de estado.<\/p>\n<figure id=\"attachment_120245\" aria-describedby=\"caption-attachment-120245\" style=\"width: 1306px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120245 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/wp-data-select-core.jpg\" alt=\"O objeto central de armazenamento de dados WordPress\" width=\"1306\" height=\"1332\"><figcaption id=\"caption-attachment-120245\" class=\"wp-caption-text\">O objeto central de armazenamento de dados WordPress<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>O objeto <code>selectors<\/code> inclui um conjunto de fun\u00e7\u00f5es para acessar e derivar valores de estado. Um seletor \u00e9 uma fun\u00e7\u00e3o que aceita argumentos de estado e opcionais e retorna algum valor do estado. <em>Chamar seletores \u00e9 o mecanismo prim\u00e1rio para recuperar dados do seu estado<\/em>, e serve como uma abstra\u00e7\u00e3o \u00fatil sobre os dados brutos que s\u00e3o tipicamente mais suscet\u00edveis a mudan\u00e7as e menos facilmente utiliz\u00e1veis como um <a href=\"https:\/\/redux.js.org\/usage\/structuring-reducers\/normalizing-state-shape#designing-a-normalized-state\">objeto normalizado<\/a>. (Fonte: <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/9d4b83cbbafcd6c6cbd20c86b572f458fc65ff16\/packages\/data\/README.md#selectors\">Github<\/a>)<\/p>\n<\/aside>\n\n<p>O armazenamento de dados do WordPress inclui informa\u00e7\u00f5es sobre o WordPress em geral e os seletores s\u00e3o a maneira de voc\u00ea obter essas informa\u00e7\u00f5es. Por exemplo, <code>getCurrentUser()<\/code> retorna detalhes para o usu\u00e1rio atual:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getCurrentUser()<\/code><\/pre>\n<figure id=\"attachment_120246\" aria-describedby=\"caption-attachment-120246\" style=\"width: 1306px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120246 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/wp-data-select-core-getcurrentuser.jpg\" alt=\"Inspecionando a resposta getCurrentUser\" width=\"1306\" height=\"1058\"><figcaption id=\"caption-attachment-120246\" class=\"wp-caption-text\">Inspecionando a resposta getCurrentUser<\/figcaption><\/figure>\n<p>Outro seletor que voc\u00ea pode usar para recuperar os detalhes do usu\u00e1rio no data store \u00e9 <code>getUsers()<\/code><a id=\"getusers\"><\/a> :<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getUsers()<\/code><\/pre>\n<p>A imagem a seguir mostra o objeto de resposta:<\/p>\n<figure id=\"attachment_120247\" aria-describedby=\"caption-attachment-120247\" style=\"width: 1306px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120247 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/wp-data-select-core-getusers.jpg\" alt=\"Inspecionando a resposta getUsers\" width=\"1306\" height=\"990\"><figcaption id=\"caption-attachment-120247\" class=\"wp-caption-text\">Inspecting getUsers response<\/figcaption><\/figure>\n<p>Para obter detalhes para um \u00fanico usu\u00e1rio, voc\u00ea pode apenas digitar a seguinte linha:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getUsers()[0]<\/code><\/pre>\n<p>Usando o mesmo seletor, voc\u00ea tamb\u00e9m pode recuperar usu\u00e1rios do site com a fun\u00e7\u00e3o <code>author<\/code> atribu\u00edda:<\/p>\n<pre><code class=\"language-js\">wp.data.select( 'core' ).getUsers({ who: 'authors' })<\/code><\/pre>\n<p>Voc\u00ea tamb\u00e9m pode recuperar as taxonomias registradas:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getTaxonomies()<\/code><\/pre>\n<figure id=\"attachment_120248\" aria-describedby=\"caption-attachment-120248\" style=\"width: 1306px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120248 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/wp-data-select-core-gettaxonomies.jpg\" alt=\"Inspecionando a resposta getTaxonomies.\" width=\"1306\" height=\"790\"><figcaption id=\"caption-attachment-120248\" class=\"wp-caption-text\">Inspecionando a resposta getTaxonomies.<\/figcaption><\/figure>\n<p>Uma lista dos tipos de correio registrado:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getPostTypes()<\/code><\/pre>\n<p>Ou uma lista de plugins:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getPlugins()<\/code><\/pre>\n<p>Agora vamos tentar acessar um armazenamento de dados diferente. Para fazer isso, voc\u00ea ainda vai usar a fun\u00e7\u00e3o <code>select<\/code>, mas fornecendo um espa\u00e7o de nomes diferente. Vamos tentar o seguinte:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\/edit-post\")<\/code><\/pre>\n<p>Agora voc\u00ea ter\u00e1 o seguinte objeto de resposta.<\/p>\n<figure id=\"attachment_120249\" aria-describedby=\"caption-attachment-120249\" style=\"width: 1306px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120249\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/wp-data-select-core-edit-post.jpg\" alt=\"Acesso aos dados da IU do Editor\" width=\"1306\" height=\"1310\"><figcaption id=\"caption-attachment-120249\" class=\"wp-caption-text\">Acesso aos dados da IU do Editor<\/figcaption><\/figure>\n<p>Se voc\u00ea quiser saber se as configura\u00e7\u00f5es da barra lateral est\u00e3o abertas ou n\u00e3o, voc\u00ea usaria o seletor <code>isEditorSidebarOpened<\/code>:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\/edit-post\").isEditorSidebarOpened()<\/code><\/pre>\n<p>Esta fun\u00e7\u00e3o retorna <code>true<\/code> se a barra lateral estiver aberta:<\/p>\n<figure id=\"attachment_120957\" aria-describedby=\"caption-attachment-120957\" style=\"width: 1718px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120957\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/wp-data-select-core-edit-post-iseditorsidebaropened-2.jpg\" alt=\"A barra lateral est\u00e1 aberta.\" width=\"1718\" height=\"1052\"><figcaption id=\"caption-attachment-120957\" class=\"wp-caption-text\">A barra lateral est\u00e1 aberta.<\/figcaption><\/figure>\n<h2>Como acessar os dados dos artigos<\/h2>\n<p>Agora voc\u00ea deve ter um entendimento b\u00e1sico de como acessar os dados. Agora vamos dar uma olhada mais de perto em um seletor espec\u00edfico, a <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/data\/data-core\/#getentityrecords\">fun\u00e7\u00e3o <code>getEntityRecords<\/code><\/a> , que \u00e9 o seletor que d\u00e1 acesso aos dados do artigo.<\/p>\n<p>No editor de blocos, clique com o bot\u00e3o direito do mouse e selecione <strong>Inspect<\/strong>. Na aba Console, copie e cole a seguinte linha:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getEntityRecords('postType', 'post')<\/code><\/pre>\n<p>Isto envia uma solicita\u00e7\u00e3o para a API Restante e retorna um array de registros correspondentes aos \u00faltimos artigos publicados no blog.<\/p>\n<figure id=\"attachment_120303\" aria-describedby=\"caption-attachment-120303\" style=\"width: 1698px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120303\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/wp-data-select-core-getentityrecords.jpg\" alt=\"getEntityRecords retorna uma lista de postagens.\" width=\"1698\" height=\"330\"><figcaption id=\"caption-attachment-120303\" class=\"wp-caption-text\">getEntityRecords retorna uma lista de postagens<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Note que a primeira vez que voc\u00ea enviar a solicita\u00e7\u00e3o para o Rest API, a resposta ser\u00e1 <code>null<\/code> at\u00e9 que a solicita\u00e7\u00e3o tenha sido completada. Ent\u00e3o, se voc\u00ea receber <code>null<\/code>, n\u00e3o se preocupe, e tente novamente.<\/p>\n<\/aside>\n\n<p><code>getEntityRecords<\/code> aceita <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/data\/data-core\/#getentityrecords\">tr\u00eas par\u00e2metros<\/a>:<\/p>\n<ul>\n<li><code>kind<\/code> <em>string<\/em>: Tipo de entidade (i.e. <code>postType<\/code>).<\/li>\n<li><code>name<\/code> <em>string<\/em>: Nome da entidade (i.e. <code>post<\/code>).<\/li>\n<li><code>query<\/code> <em>?Object<\/em>: Termos opcionais consulta (i.e. <code>{author: 0}<\/code>).<\/li>\n<\/ul>\n<p>Voc\u00ea pode construir pedidos mais espec\u00edficos usando um <a href=\"https:\/\/developer.wordpress.org\/rest-api\/reference\/posts\/#arguments\">objeto de argumentos<\/a>.<\/p>\n<p>Por exemplo, voc\u00ea pode decidir que a resposta deve conter apenas mensagens em uma categoria espec\u00edfica:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getEntityRecords('postType', 'post', {categories: 3})<\/code><\/pre>\n<p>Voc\u00ea tamb\u00e9m pode solicitar apenas artigos de um determinado autor:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getEntityRecords('postType', 'post', {author: 2})<\/code><\/pre>\n<p>Se voc\u00ea clicar em qualquer um dos registros devolvidos por <code>getEntityRecords<\/code>, voc\u00ea receber\u00e1 uma lista de propriedades para o registro selecionado:<\/p>\n<figure id=\"attachment_120305\" aria-describedby=\"caption-attachment-120305\" style=\"width: 1846px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120305\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/getentityrecords.jpg\" alt=\"Um exemplo de solicita\u00e7\u00e3o de API com getEntityRecords.\" width=\"1846\" height=\"746\"><figcaption id=\"caption-attachment-120305\" class=\"wp-caption-text\">Um exemplo de solicita\u00e7\u00e3o de API com getEntityRecords<\/figcaption><\/figure>\n<p>Se voc\u00ea quiser que a resposta inclua a imagem em destaque, voc\u00ea precisar\u00e1 adicionar um argumento adicional ao seu pedido anterior:<\/p>\n<pre><code class=\"language-js\">wp.data.select(\"core\").getEntityRecords('postType', 'post', {author: 2, _embed: true})<\/code><\/pre>\n<figure id=\"attachment_120307\" aria-describedby=\"caption-attachment-120307\" style=\"width: 1684px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120307\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/getentityrecords-wp-featuredmedia.jpg\" alt=\"Detalhes da imagem em destaque na resposta do getEntityRecords.\" width=\"1684\" height=\"1152\"><figcaption id=\"caption-attachment-120307\" class=\"wp-caption-text\">Detalhes da imagem em destaque na resposta do getEntityRecords<\/figcaption><\/figure>\n<p>Agora voc\u00ea deve ter um melhor entendimento de como acessar o datastore do WordPress e recuperar os detalhes do post. Para uma vis\u00e3o mais pr\u00f3xima no seletor <code>getEntityRecords<\/code>, veja tamb\u00e9m <a href=\"https:\/\/ryanwelcher.com\/2021\/08\/requesting-data-in-gutenberg-with-getentityrecords\/\">Solicita\u00e7\u00e3o de dados no Gutenberg com getEntityRecords<\/a>.<\/p>\n<h2>Como criar um bloco din\u00e2mico: Um exemplo de projeto<\/h2>\n<p>Ap\u00f3s nossa longa premissa te\u00f3rica, podemos passar \u00e0 pr\u00e1tica e criar um bloco din\u00e2mico usando as ferramentas que introduzimos em nosso tutorial anterior de desenvolvimento de blocos.<\/p>\n<p>Nesse artigo, n\u00f3s discutimos:<\/p>\n<ol>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-personalizados-gutenberg\/#setting-up-your-wordpress-development-environment\">Como Configurar um Ambiente de Desenvolvimento WordPress<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-personalizados-gutenberg\/#a-walkthrough-of-the-starter-block-scaffolding\">O que \u00e9 um Block Scaffolding<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-personalizados-gutenberg\/#the-project-building-your-first-gutenberg-block\">Como construir um bloco est\u00e1tico no Gutenberg<\/a><\/li>\n<\/ol>\n<p>\u00c9 por isso que n\u00e3o vamos cobrir esses t\u00f3picos em profundidade no presente artigo, mas sinta-se \u00e0 vontade para consultar nosso guia anterior para qualquer informa\u00e7\u00e3o adicional, ou apenas para um refrescamento.<\/p>\n<h3>Configure um ambiente de desenvolvimento JavaScript<\/h3>\n<p>Vamos come\u00e7ar por criar um ambiente de desenvolvimento JavaScript.<\/p>\n<h4>Instale ou atualize o Node.js<\/h4>\n<p>Primeiro, <a href=\"https:\/\/nodejs.org\/en\/download\/\">instale ou atualize<\/a> o Node.js. Uma vez terminado, inicie sua ferramenta de linha de comando e execute o seguinte comando:<\/p>\n<pre><code class=\"language-bash\">node -v<\/code><\/pre>\n<p>Voc\u00ea deve ver a vers\u00e3o do seu Node.<\/p>\n<h4>Configure o seu ambiente de desenvolvimento<\/h4>\n<p>A seguir, voc\u00ea vai precisar de um ambiente de desenvolvimento para WordPress. Para nossos exemplos, usamos <a href=\"https:\/\/kinsta.com\/pt\/devkinsta\/\">DevKinsta<\/a>, nossa ferramenta de desenvolvimento WordPress gratuita que permite a voc\u00ea lan\u00e7ar um site WordPress local em pouco tempo.<\/p>\n<figure id=\"attachment_120268\" aria-describedby=\"caption-attachment-120268\" style=\"width: 2050px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120268\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/devkinsta-create-custom-site.jpg\" alt=\"Criando um site personalizado no DevKinsta\" width=\"2050\" height=\"1258\"><figcaption id=\"caption-attachment-120268\" class=\"wp-caption-text\">Criando um site personalizado no DevKinsta<\/figcaption><\/figure>\n<p>Mas voc\u00ea ainda est\u00e1 livre para escolher qualquer <a href=\"https:\/\/kinsta.com\/pt\/ebooks\/wordpress\/wordpress-desenvolvimento-local\/\">ambiente de desenvolvimento local WordPress<\/a> que voc\u00ea goste, como MAMP ou XAMPP, ou mesmo a <a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/env\">solu\u00e7\u00e3o oficial wp-env<\/a>.<\/p>\n<p>Se voc\u00ea estiver usando DevKinsta, clique em <strong>New WordPress Site<\/strong> ou em <strong>Custom Site<\/strong>, preencha os campos do formul\u00e1rio e clique em <strong>Create site<\/strong>.<\/p>\n<p>O processo de instala\u00e7\u00e3o leva um ou dois minutos. Quando estiver completo, lance seu site local de desenvolvimento WordPress.<\/p>\n<figure id=\"attachment_120269\" aria-describedby=\"caption-attachment-120269\" style=\"width: 2050px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120269\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/devkinsta.jpg\" alt=\"Tela de informa\u00e7\u00e3o do site no DevKinsta.\" width=\"2050\" height=\"1258\"><figcaption id=\"caption-attachment-120269\" class=\"wp-caption-text\">Tela de informa\u00e7\u00e3o do site no DevKinsta.<\/figcaption><\/figure>\n<h4>Configure o seu plugin de bloco<\/h4>\n<p>O que voc\u00ea precisa agora \u00e9 de um plugin de bloco de partida. Para evitar todo o inc\u00f4modo de uma configura\u00e7\u00e3o manual, a <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-create-block\/\">equipe central de desenvolvedores do<\/a> WordPress lan\u00e7ou a <a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/create-block\"> ferramenta @wordpress\/create-block<\/a>, que \u00e9 <em>a ferramenta oficial de configura\u00e7\u00e3o zero para a cria\u00e7\u00e3o de blocos Gutenberg<\/em>.<\/p>\n<p>Abordamos <code>@wordpress\/create-block<\/code> em profundidade em nosso <a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-personalizados-gutenberg\/#dev-environment\">artigo anterior<\/a>, ent\u00e3o aqui podemos come\u00e7ar o set-up imediatamente.<\/p>\n<p>Em sua ferramenta de linha de comando, navegue para a pasta <strong>\/wp-content\/plugins<\/strong>:<\/p>\n<figure id=\"attachment_105130\" aria-describedby=\"caption-attachment-105130\" style=\"width: 1224px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-105130\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/new-terminal-at-folder.jpg\" alt=\"Novo terminal na pasta do Mac OS.\" width=\"1224\" height=\"958\"><figcaption id=\"caption-attachment-105130\" class=\"wp-caption-text\">Novo terminal na pasta do Mac OS.<\/figcaption><\/figure>\n<p>Uma vez l\u00e1, execute o seguinte comando:<\/p>\n<pre><code class=\"language-bash\">npx @wordpress\/create-block<\/code><\/pre>\n<p>Agora voc\u00ea est\u00e1 pronto para instalar o pacote <code>@wordpress\/create-block<\/code>:<\/p>\n<figure id=\"attachment_120270\" aria-describedby=\"caption-attachment-120270\" style=\"width: 1432px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120270\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/installing-wordpress-create-block.jpg\" alt=\"Instalando o pacote @wordpress\/create-block.\" width=\"1432\" height=\"296\"><figcaption id=\"caption-attachment-120270\" class=\"wp-caption-text\">Instalando o pacote @wordpress\/create-block<\/figcaption><\/figure>\n<p>Para confirmar, digite <code>y<\/code> e pressione Enter.<\/p>\n<p>Isto gera os arquivos PHP, SCSS e JS do plugin em <a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-personalizados-gutenberg\/#set-up-the-plugin\">modo interativo<\/a>.<\/p>\n<p>Abaixo est\u00e3o os detalhes que estaremos usando em nosso exemplo. Sinta-se \u00e0 vontade para mudar esses detalhes de acordo com suas prefer\u00eancias:<br \/>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><\/p>\n<ul>\n<li>Block slugin usado para identifica\u00e7\u00e3o (tamb\u00e9m o plugin e o nome da pasta de sa\u00edda): <strong>autor-plugin<\/strong><\/li>\n<li>O espa\u00e7o interno para o nome do bloco (algo \u00fanico para seus produtos): <strong>author-box<\/strong><\/li>\n<li>O t\u00edtulo de exibi\u00e7\u00e3o para o seu bloco: <strong>Author box<\/strong><\/li>\n<li>A breve descri\u00e7\u00e3o para o seu bloco (opcional): <strong>An example block for Kinsta readers<\/strong><\/li>\n<li>O dashicon para facilitar a identifica\u00e7\u00e3o do seu bloco (opcional): <strong>businessperson<\/strong><\/li>\n<li>O nome da categoria para ajudar os usu\u00e1rios a navegar e descobrir seu bloco: <strong>widgets<\/strong><\/li>\n<li>O nome do autor do plugin (opcional). M\u00faltiplos autores podem ser listados usando v\u00edrgulas: <strong>your name<\/strong><\/li>\n<li>O nome curto da licen\u00e7a do plugin (opcional): <strong>\u2013<\/strong><\/li>\n<li>Um link para o texto completo da licen\u00e7a (opcional): <strong>\u2013<\/strong><\/li>\n<li>O n\u00famero da vers\u00e3o atual do plugin: <strong>0.1.0<\/strong><\/li>\n<\/ul>\n<p><\/p>\n<\/aside>\n<br \/>\nUma vez que voc\u00ea apertar o enter, ele ir\u00e1 fazer o download e configurar o plugin.<\/p>\n<figure id=\"attachment_120271\" aria-describedby=\"caption-attachment-120271\" style=\"width: 1424px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120271\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/installing-the-block-plugin.jpg\" alt=\"Instalando o plugin do bloco.\" width=\"1424\" height=\"878\"><figcaption id=\"caption-attachment-120271\" class=\"wp-caption-text\">Instalando o plugin do bloco<\/figcaption><\/figure>\n<p>O processo pode demorar alguns minutos. Quando estiver completo, voc\u00ea deve ver a seguinte tela:<\/p>\n<figure id=\"attachment_120272\" aria-describedby=\"caption-attachment-120272\" style=\"width: 1428px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120272 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/block-bootstrapped.jpg\" alt=\"Bloqueio bootstrapped na pasta do plugin.\" width=\"1428\" height=\"1026\"><figcaption id=\"caption-attachment-120272\" class=\"wp-caption-text\">Bloqueio bootstrapped na pasta do plugin<\/figcaption><\/figure>\n<p>Voc\u00ea ver\u00e1 uma lista dos comandos que voc\u00ea pode executar de dentro do diret\u00f3rio de plugins:<\/p>\n<ul>\n<li><code>$ npm start<\/code> &#8211; Comece a constru\u00e7\u00e3o para desenvolvimento.<\/li>\n<li><code>$ npm run build<\/code> &#8211; Construa o c\u00f3digo para a produ\u00e7\u00e3o.<\/li>\n<li><code>$ npm run format<\/code> &#8211; Formatar os arquivos.<\/li>\n<li><code>$ npm run lint:css<\/code> &#8211; Arquivos Lint CSS.<\/li>\n<li><code>$ npm run lint:js<\/code> &#8211; Arquivos JavaScript do Lint.<\/li>\n<li><code>$ npm run packages-update<\/code> &#8211; Atualize os pacotes do WordPress para a vers\u00e3o mais recente.<\/li>\n<\/ul>\n<p>Ok, agora v\u00e1 para o diret\u00f3rio de plugins com o seguinte comando:<\/p>\n<pre><code class=\"language-bash\">cd author-plugin<\/code><\/pre>\n<p>E comece a construir seu desenvolvimento:<\/p>\n<pre><code class=\"language-bash\">npm start<\/code><\/pre>\n<p>Em seguida, navegue para a tela Plugins no seu painel do WordPress e ative o plugin <strong>Author box<\/strong>:<\/p>\n<figure id=\"attachment_120273\" aria-describedby=\"caption-attachment-120273\" style=\"width: 2104px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120273 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/plugins-screen.jpg\" alt=\"O plugin Author box est\u00e1 listado na tela Plugins.\" width=\"2104\" height=\"1268\"><figcaption id=\"caption-attachment-120273\" class=\"wp-caption-text\">O plugin Author box est\u00e1 listado na tela Plugins<\/figcaption><\/figure>\n<p>Agora voc\u00ea pode verificar se o plugin est\u00e1 funcionando corretamente. Crie um novo artigo e comece a digitar <code>\/<\/code> para lan\u00e7ar o inseridor r\u00e1pido:<\/p>\n<figure id=\"attachment_120958\" aria-describedby=\"caption-attachment-120958\" style=\"width: 1402px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120958\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/quick-inserter-2.jpg\" alt=\"O item de bloco no inseridor r\u00e1pido.\" width=\"1402\" height=\"804\"><figcaption id=\"caption-attachment-120958\" class=\"wp-caption-text\">O item de bloco no inseridor r\u00e1pido<\/figcaption><\/figure>\n<p>Voc\u00ea tamb\u00e9m encontrar\u00e1 o bloco <strong>Author box<\/strong>\u00a0na categoria <strong>Widgets<\/strong> na caixa de inser\u00e7\u00e3o de blocos. Selecione o bloco para adicion\u00e1-lo \u00e0 tela do editor:<\/p>\n<figure id=\"attachment_120275\" aria-describedby=\"caption-attachment-120275\" style=\"width: 1434px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120275\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/block-inserter.jpg\" alt=\"O Inseridor de Blocos do WordPress.\" width=\"1434\" height=\"860\"><figcaption id=\"caption-attachment-120275\" class=\"wp-caption-text\">O Inseridor de Blocos do WordPress<\/figcaption><\/figure>\n<p>Voc\u00ea est\u00e1 acabado. Agora salve o artigo e visualize a p\u00e1gina para verificar se o bloco \u00e9 exibido corretamente.<\/p>\n<h4>O Andaime de Bloco<\/h4>\n<p>N\u00f3s <a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-personalizados-gutenberg\/#a-walkthrough-of-the-starter-block-scaffolding\">cobrimos o andaime de bloco<\/a> em nosso posto anterior. Ent\u00e3o, aqui n\u00f3s s\u00f3 vamos fornecer uma r\u00e1pida vis\u00e3o geral dos arquivos que vamos modificar para nossos exemplos.<\/p>\n<p><strong>A Pasta de Raiz<\/strong><br \/>\nA pasta raiz \u00e9 onde voc\u00ea encontrar\u00e1 o arquivo PHP principal e v\u00e1rias subpastas.<\/p>\n<p><strong>author-plugin.php<\/strong><br \/>\nPor padr\u00e3o, o pacote <code>@wordpress\/create-block<\/code> fornece o seguinte <a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-personalizados-gutenberg\/#plugin-file\">arquivo PHP<\/a>:<\/p>\n<pre><code class=\"language-php\">\/**\n * Plugin Name:       Author box\n * Description:       An example block for Kinsta readers\n * Requires at least: 5.8\n * Requires PHP:      7.0\n * Version:           0.1.0\n * Author:            Carlo\n * License:           GPL-2.0-or-later\n * License URI:       https:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n * Text Domain:       author-plugin\n *\n * @package           author-box\n *\/\n\n\/**\n * Registers the block using the metadata loaded from the `block.json` file.\n * Behind the scenes, it registers also all assets so they can be enqueued\n * through the block editor in the corresponding context.\n *\n * @see https:\/\/developer.wordpress.org\/reference\/functions\/register_block_type\/\n *\/\nfunction author_box_author_plugin_block_init() {\n\tregister_block_type( __DIR__ . '\/build' );\n}\nadd_action( 'init', 'author_box_author_plugin_block_init' );<\/code><\/pre>\n<p>No cabe\u00e7alho, voc\u00ea vai notar os detalhes que inserimos na configura\u00e7\u00e3o.<\/p>\n<p>Com blocos est\u00e1ticos, a maior parte do tempo voc\u00ea estar\u00e1 trabalhando nos arquivos JavaScript localizados na pasta <em>src<\/em>. Com blocos din\u00e2micos, voc\u00ea escrever\u00e1 o c\u00f3digo PHP para exibir o conte\u00fado do bloco no front end.<\/p>\n<p><strong>A Pasta <em>src<\/em><\/strong><br \/>\nA pasta <em>src<\/em> \u00e9 a sua pasta de desenvolvimento. Aqui voc\u00ea encontrar\u00e1 os seguintes arquivos:<\/p>\n<ul>\n<li><em>block.json<\/em><\/li>\n<li><em>index.js<\/em><\/li>\n<li><em>edit.js<\/em><\/li>\n<li><em>save.js<\/em><\/li>\n<li><em>editor.scss<\/em><\/li>\n<li><em>style.scss<\/em><\/li>\n<\/ul>\n<p><strong>block.json<\/strong><br \/>\nO <em>block.json<\/em> \u00e9 o seu arquivo de metadados. <code>@wordpress\/create-block<\/code> gera o seguinte arquivo <strong>block.json:<\/strong><\/p>\n<pre><code class=\"language-json\">{\n\t\"$schema\": \"https:\/\/schemas.wp.org\/trunk\/block.json\",\n\t\"apiVersion\": 2,\n\t\"name\": \"author-box\/author-plugin\",\n\t\"version\": \"0.1.0\",\n\t\"title\": \"Author box\",\n\t\"category\": \"widgets\",\n\t\"icon\": \"businessperson\",\n\t\"description\": \"An example block for Kinsta readers\",\n\t\"supports\": {\n\t\t\"html\": false\n\t},\n\t\"textdomain\": \"author-plugin\",\n\t\"editorScript\": \"file:.\/index.js\",\n\t\"editorStyle\": \"file:.\/index.css\",\n\t\"style\": \"file:.\/style-index.css\"\n}<\/code><\/pre>\n<p>Para uma vis\u00e3o mais pr\u00f3xima no arquivo <em>block.json<\/em> em geral, por favor consulte o <a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-personalizados-gutenberg\/#block-json\">nosso artigo anterior no blog<\/a>.<\/p>\n<p><strong>index.js<\/strong><br \/>\nO arquivo <em>index.js<\/em> \u00e9 onde voc\u00ea registra o tipo de bloco no cliente:<\/p>\n<pre><code class=\"language-js\">import { registerBlockType } from '@wordpress\/blocks';\n\nimport '.\/style.scss';\n\nimport Edit from '.\/edit';\nimport save from '.\/save';\n\nregisterBlockType('author-box\/author-plugin', {\n\tedit: Edit,\n\tsave,\n});<\/code><\/pre>\n<p><strong>edit.js<\/strong><br \/>\nO arquivo <em>edit.js<\/em> \u00e9 onde voc\u00ea ir\u00e1 construir a interface do bloco renderizado no editor:<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\n\nimport { useBlockProps } from '@wordpress\/block-editor';\n\nimport '.\/editor.scss';\n\nexport default function Edit() {\n\treturn (\n\t\t&lt;p {...useBlockProps()}&gt;\n\t\t\t{__('Author box \u2013 hello from the editor!', 'author-plugin')}\n\t\t&lt;\/p&gt;\n\t);\n}<\/code><\/pre>\n<p><strong>save.js<\/strong><br \/>\nO arquivo <em>save.js<\/em> cont\u00e9m o script que constr\u00f3i o conte\u00fado do bloco a ser salvo no banco de dados. N\u00e3o vamos usar este arquivo neste tutorial:<\/p>\n<pre><code class=\"language-js\">import { __ } from '@wordpress\/i18n';\n\nimport { useBlockProps } from '@wordpress\/block-editor';\n\nexport default function save() {\n\treturn (\n\t\t&lt;p {...useBlockProps.save()}&gt;\n\t\t\t{__('Author box \u2013 hello from the saved content!', 'author-plugin')}\n\t\t&lt;\/p&gt;\n\t);\n}<\/code><\/pre>\n<h2>Construindo o bloco para render no editor<\/h2>\n<p>Abra seu projeto no <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-editores-texto\/#visual-studio-code\">Visual Studio Code<\/a> ou em qualquer <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-editores-texto\/\">editor de c\u00f3digo<\/a> que voc\u00ea goste.<\/p>\n<p>Se voc\u00ea estiver usando Visual Studio Code, v\u00e1 para <strong>Terminal -&gt; New Terminal<\/strong>. Isto ir\u00e1 lan\u00e7ar uma janela de terminal na pasta raiz do seu projeto.<\/p>\n<p>No terminal (ou em sua ferramenta de linha de comando favorita), digite o seguinte comando:<\/p>\n<pre><code class=\"language-bash\">npm start<\/code><\/pre>\n<p>Agora voc\u00ea est\u00e1 rodando o ambiente do n\u00f3 no modo de desenvolvimento.<\/p>\n<figure id=\"attachment_120337\" aria-describedby=\"caption-attachment-120337\" style=\"width: 2378px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120337\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/the-project-in-visual-studio-code.jpg\" alt=\"O projeto de plugin de bloco no Visual Studio Code.\" width=\"2378\" height=\"1628\"><figcaption id=\"caption-attachment-120337\" class=\"wp-caption-text\">O projeto de plugin de bloco no Visual Studio Code.<\/figcaption><\/figure>\n<p>A partir daqui voc\u00ea estar\u00e1 seguindo dois caminhos diferentes. Para renderizar o bloco no editor, voc\u00ea vai trabalhar no arquivo <em>edit.js.<\/em> Para renderizar o bloco no front-end, voc\u00ea precisar\u00e1 escrever o c\u00f3digo PHP no arquivo principal do plugin.<\/p>\n<p>Agora arrega\u00e7a suas mangas porque a codifica\u00e7\u00e3o come\u00e7a:<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"10\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<p>[note type=&#8221;info&#8221;]Neste artigo, n\u00f3s fornecemos apenas trechos de c\u00f3digo. O c\u00f3digo completo est\u00e1 <a href=\"https:\/\/gist.github.com\/carlodaniele\/27e292fbbe4b897ca3bda4539dfd74df\">dispon\u00edvel em Gist<\/a>[\/notice]<\/p>\n<h3>Registrando o bloco no servidor<\/h3>\n<p>Primeiro, voc\u00ea tem que registrar o bloco no servidor e escrever o c\u00f3digo PHP para recuperar os dados do banco de dados.<\/p>\n<p>No arquivo <em>author-plugin.php<\/em>, voc\u00ea precisar\u00e1 passar um segundo argumento para a <a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-personalizados-gutenberg\/#plugin-file\">fun\u00e7\u00e3o <code>register_block_type<\/code><\/a>:<\/p>\n<pre><code class=\"language-php\">function author_box_author_plugin_block_init() {\n\tregister_block_type( __DIR__ . '\/build', array(\n\t\t'render_callback' =&gt; 'author_box_author_plugin_render_author_content'\n\t) );\n}\nadd_action( 'init', 'author_box_author_plugin_block_init' );<\/code><\/pre>\n<p>O segundo argumento \u00e9 uma s\u00e9rie de argumentos para registrar um tipo de bloco (veja a <a href=\"https:\/\/developer.wordpress.org\/reference\/classes\/wp_block_type\/__construct\/\">lista completa de argumentos dispon\u00edveis aqui<\/a>). No c\u00f3digo acima, fornecemos apenas <code>render_callback<\/code>, que determina a fun\u00e7\u00e3o de retorno de chamada que torna o bloco na tela.<\/p>\n<p>A seguir, voc\u00ea ir\u00e1 declarar a fun\u00e7\u00e3o:<\/p>\n<pre><code class=\"language-php\">function author_box_author_plugin_render_author_content() {\n\treturn 'Hello World!';\n}<\/code><\/pre>\n<p>Salve o arquivo, crie um novo artigo ou p\u00e1gina e adicione o bloco <strong>Author Box<\/strong> \u00e0 tela do editor.<\/p>\n<figure id=\"attachment_120275\" aria-describedby=\"caption-attachment-120275\" style=\"width: 1434px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120275 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/block-inserter.jpg\" alt=\"O inseridor de blocos WordPress.\" width=\"1434\" height=\"860\"><figcaption id=\"caption-attachment-120275\" class=\"wp-caption-text\">O inseridor de blocos WordPress.<\/figcaption><\/figure>\n<p>O editor de blocos ainda est\u00e1 mostrando o bloco inicial, pois n\u00f3s ainda n\u00e3o mudamos o arquivo <em>edit.js.<\/em><\/p>\n<p>Mas se voc\u00ea visualizar o artigo no frontend, voc\u00ea ver\u00e1 que o conte\u00fado original do bloco foi agora substitu\u00eddo pela string &#8220;Hello World&#8221;.<\/p>\n<p>Agora, como o HTML renderizado no frontend \u00e9 gerado pelo arquivo PHP, n\u00e3o haver\u00e1 necessidade da fun\u00e7\u00e3o <code>save<\/code> para retornar nada. Ent\u00e3o vamos direto para o arquivo <em>save.js<\/em> e mudar o c\u00f3digo como mostrado abaixo:<\/p>\n<pre><code class=\"language-js\">export default function save() {\n\treturn null;\n}<\/code><\/pre>\n<h3>Definindo atributos de bloco<\/h3>\n<p>Agora voc\u00ea precisa de um lugar para armazenar as configura\u00e7\u00f5es do usu\u00e1rio. Por exemplo, o n\u00famero de itens de artigos a serem recuperados do banco de dados, se voc\u00ea deve exibir ou n\u00e3o um campo especificado, etc. Para fazer isso, voc\u00ea vai definir um n\u00famero de <code>attributes<\/code> no arquivo <em>block.json<\/em>.<\/p>\n<p>Por exemplo, voc\u00ea poderia dar ao usu\u00e1rio a capacidade de determinar o n\u00famero de postagens a serem inclu\u00eddas no bloco, a op\u00e7\u00e3o de exibir imagem em destaque, data, trecho, e\/ou esconder\/mostrar a foto do perfil do autor.<\/p>\n<p>Aqui est\u00e1 a lista completa de atributos que vamos usar para construir nosso bloco de exemplo:<\/p>\n<pre><code class=\"language-json\">{\n\t...\n\t\"attributes\": {\n\t\t\"numberOfItems\": {\n\t\t\t\"type\": \"number\",\n\t\t\t\"default\": 3\n\t\t},\n\t\t\"columns\": {\n\t\t\t\"type\": \"number\",\n\t\t\t\"default\": 1\n\t\t},\n\t\t\"displayDate\": {\n\t\t\t\"type\": \"boolean\",\n\t\t\t\"default\": true\n\t\t},\n\t\t\"displayExcerpt\": {\n\t\t\t\"type\": \"boolean\",\n\t\t\t\"default\": true\n\t\t},\n\t\t\"displayThumbnail\": {\n\t\t\t\"type\": \"boolean\",\n\t\t\t\"default\": true\n\t\t},\n\t\t\"displayAuthorInfo\": {\n\t\t\t\"type\": \"boolean\",\n\t\t\t\"default\": true\n\t\t},\n\t\t\"showAvatar\": {\n\t\t\t\"type\": \"boolean\",\n\t\t\t\"default\": true\n\t\t}, \n\t\t\"avatarSize\": {\n\t\t\t\"type\": \"number\",\n\t\t\t\"default\": 48\n\t\t},\n\t\t\"showBio\": {\n\t\t\t\"type\": \"boolean\",\n\t\t\t\"default\": true\n\t\t}\n\t}\n}<\/code><\/pre>\n<h3>Construindo o bloco para ser renderizado no editor<\/h3>\n<p>O seletor <code>getEntityRecords<\/code> est\u00e1 inclu\u00eddo no pacote <code>@wordpress\/data<\/code>. Para us\u00e1-lo, voc\u00ea precisar\u00e1 importar a hook <code>useSelect<\/code> desse pacote em seu arquivo <code>edit.js<\/code>:<\/p>\n<pre><code class=\"language-js\">import { useSelect } from '@wordpress\/data';<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p><code>useSelect<\/code> \u00e9 um hook de rea\u00e7\u00e3o personalizado para a recupera\u00e7\u00e3o de valores de seletores registrados baseado no <a href=\"https:\/\/reactjs.org\/docs\/hooks-reference.html#usecallback\"><code>useCallback<\/code><\/a> React hook.<\/p>\n<\/aside>\n\n<p>A seguir, adicione o seguinte c\u00f3digo \u00e0 fun\u00e7\u00e3o <code>Edit()<\/code>:<\/p>\n<pre><code class=\"language-js\">const posts = useSelect( ( select ) =&gt; {\n\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t'per_page': 3\n\t});\n});<\/code><\/pre>\n<p>No c\u00f3digo acima, codificamos o n\u00famero de artigos de forma r\u00edgida. Mas voc\u00ea pode querer dar aos usu\u00e1rios a capacidade de definir um n\u00famero diferente de mensagens. Voc\u00ea pode usar um atributo para isso.<\/p>\n<p>Em seu <em>block.json<\/em> voc\u00ea deve ter definido um atributo <code>numberOfItems<\/code>. Voc\u00ea pode us\u00e1-lo em sua fun\u00e7\u00e3o <code>Edit<\/code>, como mostrado abaixo:<\/p>\n<pre><code class=\"language-js\">export default function Edit( { attributes } ) {\n\n\tconst { numberOfItems } = attributes;\n\n\tconst posts = useSelect( ( select ) =&gt; {\n\t\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t'per_page': numberOfItems\n\t\t});\n\t});\n\n\tconsole.log( posts );\n\n\treturn (\n\t\t...\n\t);\n}<\/code><\/pre>\n<p>Voc\u00ea ainda n\u00e3o ver\u00e1 os artigos na tela, mas execute um <code>console.log<\/code> e veja o que acontece no console do inspetor do seu navegador:<\/p>\n<figure id=\"attachment_120340\" aria-describedby=\"caption-attachment-120340\" style=\"width: 1714px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120340\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/console-log.jpg\" alt=\"O resultado no console do navegador.\" width=\"1714\" height=\"906\"><figcaption id=\"caption-attachment-120340\" class=\"wp-caption-text\">O resultado no console do navegador.<\/figcaption><\/figure>\n<p><a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/#useselect\"><code>useSelect<\/code><\/a> pode levar dois argumentos: uma liga\u00e7\u00e3o de retorno em linha e uma s\u00e9rie de depend\u00eancias. Ambos retornam uma vers\u00e3o <a href=\"https:\/\/en.wikipedia.org\/wiki\/Memoization\">memorizada<\/a> da callback que s\u00f3 muda quando uma das depend\u00eancias muda.<\/p>\n<p>Ent\u00e3o, a fim de recuperar artigos em cada mudan\u00e7a de atributo <code>numberOfItems<\/code>, voc\u00ea tem que mudar a fun\u00e7\u00e3o <code>Edit<\/code> como mostrado abaixo:<\/p>\n<pre><code class=\"language-js\">export default function Edit( { attributes } ) {\n\n\tconst { numberOfItems } = attributes;\n\n\tconst posts = useSelect(\n\t\t( select ) =&gt; {\n\t\t\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t\t'per_page': numberOfItems\n\t\t\t});\n\t\t}, \n\t\t[ numberOfItems ]\n\t);\n\n\tconsole.log(posts);\n\n\treturn (\n\t\t...\n\t);\n}<\/code><\/pre>\n<p>A seguir voc\u00ea tem que <a href=\"https:\/\/reactjs.org\/docs\/lists-and-keys.html\">renderizar sua lista de artigos<\/a>. Para fazer isso, voc\u00ea pode usar o <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/map\">m\u00e9todo<\/a> embutido do <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/map\">JavaScript <code>map<\/code><\/a>:<\/p>\n<pre><code class=\"language-jsx\">export default function Edit( { attributes } ) {\n\n\tconst { numberOfItems } = attributes;\n\n\tconst posts = useSelect(\n\t\t( select ) =&gt; {\n\t\t\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t\t'per_page': numberOfItems\n\t\t\t});\n\t\t},\n\t\t[ numberOfItems ]\n\t);\n\n\tconsole.log(posts);\n\t\n\treturn (\n\t\t&lt;div { ...useBlockProps() }&gt;\n\t\t\t&lt;ul&gt;\n\t\t\t\t{ posts && posts.map( ( post ) =&gt; {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t&lt;li key={ post.id }&gt;\n\t\t\t\t\t\t\t&lt;h5&gt;\n\t\t\t\t\t\t\t\t&lt;a href={ post.link }&gt;\n\t\t\t\t\t\t\t\t\t{ \n\t\t\t\t\t\t\t\t\t\tpost.title.rendered ? \n\t\t\t\t\t\t\t\t\t\tpost.title.rendered :\n\t\t\t\t\t\t\t\t\t\t__( 'Default title', 'author-plugin' )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t&lt;\/a&gt;\n\t\t\t\t\t\t\t&lt;\/h5&gt;\n\t\t\t\t\t\t&lt;\/li&gt;\n\t\t\t\t\t)\n\t\t\t\t})}\n\t\t\t&lt;\/ul&gt;\n\t\t&lt;\/div&gt;\n\t);\n}<\/code><\/pre>\n<p>Primeiro, ele verifica se voc\u00ea tem pelo menos um artigo na matriz, depois executa o loop.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>O m\u00e9todo <code>map()<\/code> cria uma nova matriz preenchida com os resultados da chamada de uma fun\u00e7\u00e3o fornecida em cada elemento da matriz de chamada &#8211; Fonte: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/map\">MDN web docs<\/a>.<\/p>\n<\/aside>\n\n<p>Note que, como estamos usando o m\u00e9todo <code>map<\/code> com um componente React, tamb\u00e9m estamos usando um atributo <code>key<\/code> para atribuir o ID do artigo ao item da lista atual.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Uma &#8220;chave&#8221; \u00e9 um atributo de string especial que voc\u00ea precisa incluir ao criar listas de elementos &#8211; Fonte: <a href=\"https:\/\/reactjs.org\/docs\/lists-and-keys.html\">Listas e Chaves<\/a> em React Docs<\/p>\n<\/aside>\n\n<p><code>post.link<\/code> e <code>post.title.rendered<\/code> tornam a URL e o t\u00edtulo do artigo respectivamente.<\/p>\n<p>A imagem abaixo mostra a lista completa das propriedades do objeto <code>post<\/code>.<\/p>\n<figure id=\"attachment_120341\" aria-describedby=\"caption-attachment-120341\" style=\"width: 2290px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120341\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/js-loop-1.jpg\" alt=\"O objeto Post.\" width=\"2290\" height=\"1270\"><figcaption id=\"caption-attachment-120341\" class=\"wp-caption-text\">O objeto Post.<\/figcaption><\/figure>\n<p>O c\u00f3digo acima \u00e9 apenas um exemplo b\u00e1sico de uso do <code>getEntityRecords<\/code>. Agora \u00e9 hora de colocar nosso conhecimento em pr\u00e1tica.<\/p>\n<p>Digamos que voc\u00ea queira impedir que seu bloco renderize tags HTML que o usu\u00e1rio possa ter adicionado ao t\u00edtulo do post. O WordPress fornece um <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-element\/#rawhtml\">componente <code>RawHTML<\/code><\/a> para isso.<\/p>\n<p>Primeiro, voc\u00ea vai importar o componente do <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-element\/\"> pacote @wordpress\/elemento<\/a>:<\/p>\n<pre><code class=\"language-js\">import { RawHTML } from '@wordpress\/element';<\/code><\/pre>\n<p>Em seguida, voc\u00ea inclui\u00a0 o t\u00edtulo do artigo dentro do elemento <code>RawHTML<\/code>:<\/p>\n<pre><code class=\"language-jsx\">&lt;div { ...useBlockProps() }&gt;\n\t&lt;ul&gt;\n\t\t{ posts && posts.map((post) =&gt; {\n\t\t\treturn (\n\t\t\t\t&lt;li key={ post.id }&gt;\n\t\t\t\t\t&lt;h5&gt;\n\t\t\t\t\t\t&lt;a href={ post.link }&gt;\n\t\t\t\t\t\t\t{ post.title.rendered ? (\n\t\t\t\t\t\t\t\t&lt;RawHTML&gt;\n\t\t\t\t\t\t\t\t\t{ post.title.rendered }\n\t\t\t\t\t\t\t\t&lt;\/RawHTML&gt;\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t__( 'Default title', 'author-plugin' )\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t&lt;\/a&gt;\n\t\t\t\t\t&lt;\/h5&gt;\n\t\t\t\t&lt;\/li&gt;\n\t\t\t)\n\t\t})}\n\t&lt;\/ul&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>E \u00e9 isso a\u00ed. Agora adicione uma tag HTML ao t\u00edtulo do seu artigo e salve o post. Depois teste seu c\u00f3digo com e sem <code>RawHTML<\/code> e veja como o conte\u00fado do seu bloco muda na tela.<\/p>\n<h3>Adicionando data<\/h3>\n<p>O WordPress fornece uma s\u00e9rie de fun\u00e7\u00f5es JavaScript para gerenciar e formatar datas. Para usar essas fun\u00e7\u00f5es voc\u00ea precisa primeiro import\u00e1-las do <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-date\/\">pacote <code>@wordpress\/date<\/code><\/a> em seu arquivo <em>edit.js<\/em>:<\/p>\n<pre><code class=\"language-js\">import { dateI18n, format, __experimentalGetSettings } from '@wordpress\/date';<\/code><\/pre>\n<ul>\n<li><code>dateI18n<\/code>: Formatar uma data, traduzindo-a para o locale do site.<\/li>\n<li><code>format<\/code>: Formatar uma data.<\/li>\n<li><code>__experimentalGetSettings<\/code>: Exibir a data no formato definido nas configura\u00e7\u00f5es gerais do WordPress.<\/li>\n<\/ul>\n<p>Essas fun\u00e7\u00f5es n\u00e3o est\u00e3o documentadas, mas voc\u00ea encontrar\u00e1 exemplos \u00fateis no c\u00f3digo fonte de v\u00e1rios blocos. Veja, por exemplo, os <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/block-library\/src\/latest-posts\/edit.js\">\u00faltimos artigos<\/a> e arquivos <em>edit.js<\/em> <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/block-library\/src\/post-date\/edit.js\">p\u00f3s-data<\/a>.<\/p>\n<p>Agora adicione o atributo <code>displayDate<\/code>:<\/p>\n<pre><code class=\"language-js\">const { numberOfItems, displayDate } = attributes;<\/code><\/pre>\n<p>Ent\u00e3o adicione o seguinte c\u00f3digo dentro do elemento <code>&lt;li&gt;<\/code>:<\/p>\n<pre><code class=\"language-jsx\">{ \n\tdisplayDate && (\n\t\t&lt;time\n\t\t\tclassName='wp-block-author-box-author-plugin__post-date'\n\t\t\tdateTime={ format( 'c', post.date_gmt ) }\n\t\t&gt;\n\t\t\t{ dateI18n(\n\t\t\t\t__experimentalGetSettings().formats.date, \n\t\t\t\tpost.date_gmt\n\t\t\t)}\n\t\t&lt;\/time&gt;\n\t) \n}<\/code><\/pre>\n<p>O que acontece aqui?<\/p>\n<ul>\n<li>Se <code>displayDate<\/code> \u00e9 <code>true<\/code>, ent\u00e3o exiba a data usando um <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/time\">elemento <code>time<\/code><\/a> .<\/li>\n<li>O atributo <code>dateTime<\/code> fornece a hora e\/ou data do elemento em um dos <a href=\"https:\/\/wordpress.org\/support\/article\/formatting-date-and-time\/\">formatos permitidos<\/a>.<\/li>\n<li><code>dateI18n<\/code> recupera a data no formato localizado. Esta fun\u00e7\u00e3o funciona de forma similar \u00e0\u00a0<a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/date_i18n\/\">fun\u00e7\u00e3o do PHP <code>date_i18n<\/code> WordPress<\/a>.<\/li>\n<\/ul>\n<h3>Adicionando trecho<\/h3>\n<p>Agora deve ser f\u00e1cil adicionar o trecho do post. Primeiro, d\u00ea uma olhada na propriedade <code>excerpt<\/code> no inspetor do navegador. Voc\u00ea ver\u00e1 que o conte\u00fado real \u00e9 armazenado em <code>excerpt.rendered<\/code>.<\/p>\n<figure id=\"attachment_120343\" aria-describedby=\"caption-attachment-120343\" style=\"width: 1640px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120343\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/inspecting-post-excerpt.jpg\" alt=\"Inspecionando o trecho do artigo no Chrome DevTools.\" width=\"1640\" height=\"868\"><figcaption id=\"caption-attachment-120343\" class=\"wp-caption-text\">Inspecionando o trecho do artigo no Chrome DevTools<\/figcaption><\/figure>\n<p>A seguir, adicione o atributo <code>displayExcerpt<\/code> ao objeto <code>attributes<\/code>:<\/p>\n<pre><code class=\"language-js\">const { numberOfItems, displayDate, displayExcerpt } = attributes;<\/code><\/pre>\n<p>Ent\u00e3o adicione o seguinte c\u00f3digo antes da tag de fechamento <code>&lt;\/li&gt;<\/code> na fun\u00e7\u00e3o <code>Edit<\/code>:<\/p>\n<pre><code class=\"language-jsx\">{\n\tdisplayExcerpt &&\n\tpost.excerpt.rendered && (\n\t\t&lt;p&gt;\n\t\t\t&lt;RawHTML&gt;\n\t\t\t\t{ post.excerpt.rendered }\n\t\t\t&lt;\/RawHTML&gt;\n\t\t&lt;\/p&gt;\n\t)\n}<\/code><\/pre>\n<p>Se voc\u00ea n\u00e3o est\u00e1 familiarizado com JavaScript, aqui e acima usamos a <strong>Short Circuit Evaluation<\/strong>, onde, se todas as condi\u00e7\u00f5es forem verdadeiras, ent\u00e3o o valor do \u00faltimo operando \u00e9 retornado (leia mais em <a href=\"https:\/\/reactjs.org\/docs\/conditional-rendering.html#inline-if-with-logical--operator\">Inline If with Logical &#038;&#038; Operator<\/a> e <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Logical_AND\">Logical AND (&#038;&#038;)<\/a>).<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>No JavaScript, <code>true &amp;&amp; expression<\/code> sempre avalia para <code>expression<\/code>, e <code>false &amp;&amp; expression<\/code> sempre avalia para <code>false<\/code>.<\/p>\n<p>Portanto, se a condi\u00e7\u00e3o for <code>true<\/code>, o elemento logo ap\u00f3s <code>&amp;&amp;<\/code> aparecer\u00e1 na sa\u00edda. Se for <code>false<\/code>, o Reage ir\u00e1 ignorar e pular\u00e1. Fonte: <a href=\"https:\/\/reactjs.org\/docs\/conditional-rendering.html#inline-if-with-logical--operator\">Renderiza\u00e7\u00e3o Condicional<\/a> em React Docs<\/p>\n<\/aside>\n\n<p>Finalmente, voc\u00ea pode testar seu c\u00f3digo novamente. Mude o valor do atributo no arquivo <em>block.json<\/em> e veja o que acontece no editor.<\/p>\n<h3>Adicionando imagem em destaque<\/h3>\n<p>Agora voc\u00ea precisa adicionar o c\u00f3digo que renderiza as imagens em destaque. Comece a adicionar o atributo <code>displayThumbnail<\/code> em <code>attributes<\/code>:<\/p>\n<pre><code class=\"language-js\">const { \n\tnumberOfItems, \n\tdisplayDate, \n\tdisplayExcerpt, \n\tdisplayThumbnail \n} = attributes;<\/code><\/pre>\n<p>Agora voc\u00ea precisa descobrir onde a imagem em destaque \u00e9 armazenada. Como mencionamos acima, para obter a imagem em destaque, voc\u00ea precisa adicionar um novo argumento <code>_embed<\/code> \u00e0 sua consulta. De volta ao seu c\u00f3digo, altere os argumentos da consulta da seguinte forma:<\/p>\n<pre><code class=\"language-js\">const posts = useSelect(\n\t( select ) =&gt; {\n\t\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t'per_page': numberOfItems,\n\t\t\t'_embed': true\n\t\t});\n\t},\n\t[ numberOfItems ]\n);<\/code><\/pre>\n<p>Aqui n\u00f3s simplesmente adicionamos <code>'_embed': true<\/code> ao conjunto de argumentos. Isto fornece um objeto <code>post<\/code> contendo a propriedade <code>_embedded<\/code>, que fornece os detalhes da imagem que voc\u00ea precisa para despachar as imagens em destaque.<\/p>\n<p>Agora voc\u00ea deve saber onde <a href=\"#accessing-post-data-using-the-wordpress-rest-api\">encontrar os detalhes da imagem<\/a>.<\/p>\n<figure id=\"attachment_120307\" aria-describedby=\"caption-attachment-120307\" style=\"width: 1684px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120307\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/getentityrecords-wp-featuredmedia.jpg\" alt=\"Detalhes da imagem em destaque na resposta do getEntityRecords.\" width=\"1684\" height=\"1152\"><figcaption id=\"caption-attachment-120307\" class=\"wp-caption-text\">Detalhes da imagem em destaque na resposta do getEntityRecords<\/figcaption><\/figure>\n<p>Voc\u00ea s\u00f3 precisa adicionar o c\u00f3digo que renderiza a imagem na tela:<\/p>\n<pre><code class=\"language-jsx\">{\n\tdisplayThumbnail && \n\tpost._embedded && \n\tpost._embedded['wp:featuredmedia'] &&\n\tpost._embedded['wp:featuredmedia'][0] &&\n\t&lt;img \n\tclassName='wp-block-author-box-author-plugin__post-thumbnail'\n\t\tsrc={ post._embedded['wp:featuredmedia'][0].media_details.sizes.medium.source_url }\n\t\talt={ post._embedded['wp:featuredmedia'][0].alt_text }\n\t\/&gt;\n}<\/code><\/pre>\n<p>Salve o arquivo, mude para o editor de blocos e verifique se a imagem \u00e9 exibida corretamente quando o atributo <code>displayThumbnail<\/code> estiver configurado para <code>true<\/code>.<\/p>\n<figure id=\"attachment_120354\" aria-describedby=\"caption-attachment-120354\" style=\"width: 2192px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120354\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/list-of-posts-with-featured-images-date-excerpt.jpg\" alt=\"Uma lista de artigos com imagem, data e trecho em destaque.\" width=\"2192\" height=\"1220\"><figcaption id=\"caption-attachment-120354\" class=\"wp-caption-text\">Uma lista de artigos com imagem, data e trecho em destaque<\/figcaption><\/figure>\n<h3>Adicionando controles na barra lateral<\/h3>\n<p>At\u00e9 agora n\u00f3s temos usado os valores padr\u00e3o de atributos definidos no <em>block.json.<\/em> Mas pelo <a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-personalizados-gutenberg\/#define-attributes\">nosso artigo anterior<\/a> sabemos que podemos definir manipuladores de eventos para dar aos usu\u00e1rios a habilidade de atribuir valores personalizados a cada atributo.<\/p>\n<p>Para fazer isso, voc\u00ea adicionar\u00e1 um conjunto de controles \u00e0 <a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-personalizados-gutenberg\/#settings-sidebar\">barra lateral de configura\u00e7\u00f5es do bloco<\/a>. Em <em>edit.js<\/em>, importe os seguintes componentes dos pacotes correspondentes:<\/p>\n<pre><code class=\"language-js\">import { \n\tuseBlockProps,\n\tInspectorControls\n} from '@wordpress\/block-editor';\n\nimport {\n\tPanelBody,\n\tPanelRow,\n\tQueryControls,\n\tToggleControl,\n\tRangeControl\n} from '@wordpress\/components';<\/code><\/pre>\n<ul>\n<li><code>InspectorControls<\/code>: Cont\u00e9m configura\u00e7\u00f5es da barra lateral que afetam o bloco inteiro (veja <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/block-editor\/src\/components\/inspector-controls\/README.md\">no GitHub<\/a>)<\/li>\n<li><code>PanelBody<\/code>: Adiciona um recipiente dobr\u00e1vel \u00e0 barra lateral de configura\u00e7\u00f5es (ver <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/components\/src\/panel\/README.md#panelbody\">em GitHub<\/a>)<\/li>\n<li><code>PanelRow<\/code>: Produz um recipiente gen\u00e9rico para controles da barra lateral (veja <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/components\/src\/panel\/README.md#panelrow\">em GitHub<\/a>)<\/li>\n<li><code>QueryControls<\/code>: Fornece controles de configura\u00e7\u00e3o para construir uma consulta (veja <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/components\/src\/query-controls\">no GitHub<\/a>)<\/li>\n<li><code>ToggleControl<\/code>: Fornece um bot\u00e3o de altern\u00e2ncia para que os usu\u00e1rios habilitem\/desabilitem uma op\u00e7\u00e3o espec\u00edfica (veja <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/components\/src\/toggle-control\/README.md\">no GitHub<\/a>)<\/li>\n<li><code>RangeControl<\/code>: \u00c9 usado para fazer sele\u00e7\u00f5es a partir de uma gama de valores incrementais (ver <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/a84c037a0e62a344005054102544c34d7b970a6b\/packages\/components\/src\/range-control\">no GitHub<\/a>)<\/li>\n<\/ul>\n<p>A seguir, voc\u00ea precisa atualizar a fun\u00e7\u00e3o <code>Edit<\/code> para usar os controles agora dispon\u00edveis. Primeiro, modifique a fun\u00e7\u00e3o <code>Edit<\/code> como se segue:<\/p>\n<pre><code class=\"language-jsx\">export default function Edit( { attributes, setAttributes } ) {\n\n\tconst { \n\t\tnumberOfItems, \n\t\tcolumns, \n\t\tdisplayExcerpt, \n\t\tdisplayDate, \n\t\tdisplayThumbnail\n\t} = attributes;\n\n\tconst posts = useSelect(\n\t\t( select ) =&gt; {\n\t\t\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t\t'per_page': numberOfItems,\n\t\t\t\t'_embed': true\n\t\t\t});\n\t\t},\n\t\t[ numberOfItems ]\n\t);\n\t...\n}<\/code><\/pre>\n<p>Note que a propriedade <code>setAttributes<\/code> passou para a fun\u00e7\u00e3o <code>Edit<\/code>.<\/p>\n<p>Agora voc\u00ea pode adicionar os elementos correspondentes ao seu c\u00f3digo JSX:<\/p>\n<pre><code class=\"language-jsx\">return (\n\t&lt;&gt;\n\t\t&lt;InspectorControls&gt;\n\t\t\t&lt;PanelBody title={ __( 'Content Settings', 'author-plugin' ) }&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;QueryControls \n\t\t\t\t\t\tnumberOfItems={ numberOfItems }\n\t\t\t\t\t\tonNumberOfItemsChange={ ( value ) =&gt;\n\t\t\t\t\t\t\tsetAttributes( { numberOfItems: value } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tminItems={ 1 }\n\t\t\t\t\t\tmaxItems={ 10 }\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;RangeControl\n\t\t\t\t\t\tlabel={ __( 'Number of Columns', 'author-plugin' ) }\n\t\t\t\t\t\tvalue={ columns }\n\t\t\t\t\t\tonChange={ ( value ) =&gt;\n\t\t\t\t\t\t\tsetAttributes( { columns: value } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\tmax={ 4 }\n\t\t\t\t\t\trequired\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;ToggleControl\n\t\t\t\t\t\tlabel={ __( 'Show Featured Image', 'author-plugin' ) }\n\t\t\t\t\t\tchecked={ displayThumbnail }\n\t\t\t\t\t\tonChange={ () =&gt;\n\t\t\t\t\t\t\tsetAttributes( { displayThumbnail: ! displayThumbnail } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;ToggleControl\n\t\t\t\t\t\tlabel={ __( 'Show Date', 'author-plugin' ) }\n\t\t\t\t\t\tchecked={ displayDate }\n\t\t\t\t\t\tonChange={ () =&gt;\n\t\t\t\t\t\t\tsetAttributes( { displayDate: ! displayDate } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;ToggleControl\n\t\t\t\t\t\tlabel={ __( 'Display Excerpt', 'author-plugin' ) }\n\t\t\t\t\t\tchecked={ displayExcerpt }\n\t\t\t\t\t\tonChange={ () =&gt;\n\t\t\t\t\t\t\tsetAttributes( { displayExcerpt: ! displayExcerpt } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t&lt;\/PanelBody&gt;\n\t\t&lt;\/InspectorControls&gt;\n\t\t&lt;div { ...useBlockProps() }&gt;\n\t\t\t...\n\t\t&lt;\/div&gt;\n\t&lt;\/&gt;\n);<\/code><\/pre>\n<p>Uau, isso \u00e9 muito c\u00f3digo, n\u00e3o \u00e9? Mas \u00e9 muito f\u00e1cil de entender.<\/p>\n<p>Os atributos dos elementos que mais merecem sua aten\u00e7\u00e3o aqui s\u00e3o <code>onNumberOfItemsChange<\/code> em <code>QueryControls<\/code> e <code>onChange<\/code> em <code>RangeControl<\/code> e <code>ToggleControl<\/code>. Esses atributos definem os <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Events\/Event_handlers\">manipuladores de eventos<\/a> necess\u00e1rios para que o usu\u00e1rio possa personalizar a apar\u00eancia e\/ou comportamento de um bloco.<\/p>\n<p>Voc\u00ea tamb\u00e9m notar\u00e1 que usamos as tags <code>&lt;&gt;<\/code> e <code>&lt;\/&gt;<\/code>, que s\u00e3o a breve sintaxe para declarar <a href=\"https:\/\/reactjs.org\/docs\/fragments.html#short-syntax\">fragmentos de React<\/a>.<\/p>\n<p>Agora, salve seu arquivo, salte para o editor e atualize a p\u00e1gina:<\/p>\n<figure id=\"attachment_120367\" aria-describedby=\"caption-attachment-120367\" style=\"width: 1862px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120367 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/author-box-content-settings.jpg\" alt=\"Configura\u00e7\u00f5es de blocos.\" width=\"1862\" height=\"1022\"><figcaption id=\"caption-attachment-120367\" class=\"wp-caption-text\">Configura\u00e7\u00f5es de blocos.<\/figcaption><\/figure>\n<p>Est\u00e1 tudo a\u00ed dentro? Ent\u00e3o vamos seguir em frente e adicionar os detalhes do autor do artigo.<\/p>\n<h3>Encontrando o autor do artigo<\/h3>\n<p>Como mencionamos acima, nosso bloco mostrar\u00e1 uma lista de artigos escritos pelo mesmo autor que o artigo atual.<\/p>\n<p>Para obter o ID do autor do artigo, voc\u00ea importar\u00e1 o <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/data\/data-core-editor\/#getcurrentpostattribute\">seletor <code>getCurrentPostAttribute<\/code><\/a> do datastore <code>core\/editor<\/code>:<\/p>\n<pre><code class=\"language-js\">wp.data.select( 'core\/editor' ).getCurrentPostAttribute( 'author' )<\/code><\/pre>\n<p><code>getCurrentPostAttribute<\/code> retorna um valor de atributo para o artigo salvo.<\/p>\n<p>Uma vez obtido o ID do autor, voc\u00ea pode alterar a consulta como mostrado abaixo:<\/p>\n<pre><code class=\"language-js\">const posts = useSelect(\n\t( select ) =&gt; {\n\n\t\tconst _authorId = select( 'core\/editor' ).getCurrentPostAttribute( 'author' );\n\t\n\t\treturn select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t'author': _authorId,\n\t\t\t'per_page': numberOfItems,\n\t\t\t'_embed': true\n\t\t});\n\t},\n\t[ numberOfItems ]\n);<\/code><\/pre>\n<p>Com este c\u00f3digo, voc\u00ea receber\u00e1 uma lista <code>n<\/code> de artigos do mesmo autor que o artigo atual.<\/p>\n<p>Agora que voc\u00ea tem a identifica\u00e7\u00e3o do autor, voc\u00ea tamb\u00e9m pode us\u00e1-la para buscar dados adicionais no banco de dados.<\/p>\n<h3>Exibindo detalhes do autor<\/h3>\n<p>Como n\u00f3s n\u00e3o temos nenhuma documenta\u00e7\u00e3o dispon\u00edvel, n\u00f3s usamos o c\u00f3digo do <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/block-library\/src\/post-author\/edit.js\">bloco central Post Author<\/a> como refer\u00eancia.<\/p>\n<p>Para exibir os detalhes do autor, voc\u00ea primeiro precisa importar uma nova depend\u00eancia:<\/p>\n<pre><code class=\"language-js\">import { forEach } from 'lodash';<\/code><\/pre>\n<p>Ent\u00e3o, na fun\u00e7\u00e3o <code>Edit<\/code>, atualize o objeto <code>attributes<\/code> da seguinte forma:<\/p>\n<pre><code class=\"language-js\">const { \n\tnumberOfItems, \n\tcolumns, \n\tdisplayExcerpt, \n\tdisplayDate, \n\tdisplayThumbnail, \n\tdisplayAuthorInfo, \n\tshowAvatar, \n\tavatarSize, \n\tshowBio \n} = attributes;<\/code><\/pre>\n<p>Uma vez feito, voc\u00ea ir\u00e1 editar o c\u00f3digo visto na se\u00e7\u00e3o anterior para recuperar os detalhes do autor:<\/p>\n<pre><code class=\"language-js\">const { authorDetails, posts } = useSelect(\n\t( select ) =&gt; {\n\n\t\tconst _authorId = select( 'core\/editor' ).getCurrentPostAttribute( 'author' );\n\n\t\tconst authorDetails = _authorId ? select( 'core' ).getUser( _authorId ) : null;\n\t\n\t\tconst posts = select( 'core' ).getEntityRecords( 'postType', 'post', {\n\t\t\t'author': _authorId,\n\t\t\t'per_page': numberOfItems,\n\t\t\t'_embed': true\n\t\t});\n\n\t\treturn { \n\t\t\tauthorDetails: authorDetails,\n\t\t\tposts: posts\n\t\t};\n\t},\n\t[ numberOfItems ]\n);<\/code><\/pre>\n<p>Note que n\u00f3s usamos o <a href=\"#getusers\">seletor<code>getUser<\/code><\/a> para obter os detalhes do autor.<\/p>\n<p>A seguir, voc\u00ea pode querer obter o avatar do autor. O c\u00f3digo abaixo constr\u00f3i um conjunto de itens que armazenam URLs e tamanhos de avatares:<\/p>\n<pre><code class=\"language-js\">const avatarSizes = [];\nif ( authorDetails ) {\n\tforEach( authorDetails.avatar_urls, ( url, size ) =&gt; {\n\t\tavatarSizes.push( {\n\t\t\tvalue: size,\n\t\t\tlabel: `${ size } x ${ size }`,\n\t\t} );\n\t} );\n}<\/code><\/pre>\n<p>Ent\u00e3o voc\u00ea adicionar\u00e1 os pain\u00e9is e controles da barra lateral para permitir que os usu\u00e1rios personalizem a \u00e1rea do autor no bloco:<\/p>\n<pre><code class=\"language-jsx\">return (\n\t&lt;&gt;\n\t\t&lt;InspectorControls&gt;\n\t\t\t&lt;PanelBody title={ __( 'Author Info', 'author-plugin' ) }&gt;\n\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t&lt;ToggleControl\n\t\t\t\t\t\tlabel={ __( 'Display Author Info', 'author-plugin' ) }\n\t\t\t\t\t\tchecked={ displayAuthorInfo }\n\t\t\t\t\t\tonChange={ () =&gt;\n\t\t\t\t\t\t\tsetAttributes( { displayAuthorInfo: ! displayAuthorInfo } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\/&gt;\n\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t{ displayAuthorInfo && (\n\t\t\t\t\t&lt;&gt;\n\t\t\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t\t\t&lt;ToggleControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Show avatar' ) }\n\t\t\t\t\t\t\t\tchecked={ showAvatar }\n\t\t\t\t\t\t\t\tonChange={ () =&gt;\n\t\t\t\t\t\t\t\t\tsetAttributes( { showAvatar: ! showAvatar } )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t\t\t{ showAvatar && (\n\t\t\t\t\t\t\t\t&lt;SelectControl\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Avatar size' ) }\n\t\t\t\t\t\t\t\t\tvalue={ avatarSize }\n\t\t\t\t\t\t\t\t\toptions={ avatarSizes }\n\t\t\t\t\t\t\t\t\tonChange={ ( size ) =&gt; {\n\t\t\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\t\t\tavatarSize: Number( size ),\n\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t\t\t&lt;PanelRow&gt;\n\t\t\t\t\t\t\t&lt;ToggleControl\n\t\t\t\t\t\t\t\tlabel={ __( 'Show Bio', 'author-plugin' ) }\n\t\t\t\t\t\t\t\tchecked={ showBio }\n\t\t\t\t\t\t\t\tonChange={ () =&gt;\n\t\t\t\t\t\t\t\t\tsetAttributes( { showBio: ! showBio } )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t\t&lt;\/PanelRow&gt;\n\t\t\t\t\t&lt;\/&gt;\n\t\t\t\t) }\n\t\t\t&lt;\/PanelBody&gt;\n\t\t\t...\n\t\t&lt;\/InspectorControls&gt;\n\t\t...\n\t&lt;\/&gt;\n);<\/code><\/pre>\n<p>A imagem abaixo mostra as configura\u00e7\u00f5es atualizadas da barra lateral:<\/p>\n<figure id=\"attachment_120379\" aria-describedby=\"caption-attachment-120379\" style=\"width: 1908px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120379\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/author-info-settings-panel.jpg\" alt=\"O painel de configura\u00e7\u00f5es de Informa\u00e7\u00f5es do Autor.\" width=\"1908\" height=\"960\"><figcaption id=\"caption-attachment-120379\" class=\"wp-caption-text\">O painel de configura\u00e7\u00f5es de Informa\u00e7\u00f5es do Autor<\/figcaption><\/figure>\n<p>Finalmente, voc\u00ea pode adicionar a se\u00e7\u00e3o do autor ao seu bloco:<\/p>\n<pre><code class=\"language-jsx\">return (\n\t&lt;&gt;\n\t\t&lt;InspectorControls&gt;\n\t\t...\n\t\t&lt;\/InspectorControls&gt;\n\n\t\t&lt;div { ...useBlockProps() }&gt;\n\t\t\t{ displayAuthorInfo  && authorDetails && (\n\t\t\t\t&lt;div className=\"wp-block-author-box-author-plugin__author\"&gt;\n\t\t\t\t\t{ showAvatar && (\n\t\t\t\t\t\t&lt;div className=\"wp-block-author-box-author-plugin__avatar\"&gt;\n\t\t\t\t\t\t\t&lt;img\n\t\t\t\t\t\t\t\twidth={ avatarSize }\n\t\t\t\t\t\t\t\tsrc={\n\t\t\t\t\t\t\t\t\tauthorDetails.avatar_urls[\n\t\t\t\t\t\t\t\t\t\tavatarSize\n\t\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\talt={ authorDetails.name }\n\t\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t\t&lt;\/div&gt;\n\t\t\t\t\t) }\n\t\t\t\t\t&lt;div className='wp-block-author-box-author-plugin__author-content'&gt;\n\t\t\t\t\t\t&lt;p className='wp-block-author-box-author-plugin__name'&gt;\n\t\t\t\t\t\t\t{ authorDetails.name }\n\t\t\t\t\t\t&lt;\/p&gt;\n\t\t\t\t\t\t{ showBio &&\n\t\t\t\t\t\t\t\/\/ https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Optional_chaining\n\t\t\t\t\t\t\tauthorDetails?.description &&\n\t\t\t\t\t\t\tauthorDetails.description.length &gt; 0 && (\n\t\t\t\t\t\t\t&lt;p className='wp-block-author-box-author-plugin__description'&gt;{ authorDetails.description }&lt;\/p&gt;\n\t\t\t\t\t\t) }\n\t\t\t\t\t&lt;\/div&gt;\n\t\t\t\t&lt;\/div&gt;\n\t\t\t)}\n\t\t\t&lt;ul&gt;\n\t\t\t...\n\t\t\t&lt;\/ul&gt;\n\t\t&lt;\/div&gt;\n\t&lt;\/&gt;\n);<\/code><\/pre>\n<p>A imagem a seguir mostra como ela se torna na tela.<\/p>\n<figure id=\"attachment_120380\" aria-describedby=\"caption-attachment-120380\" style=\"width: 1912px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120380\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/author-info-with-settings.jpg\" alt=\"Se\u00e7\u00e3o de detalhes do autor e configura\u00e7\u00f5es de informa\u00e7\u00f5es.\" width=\"1912\" height=\"844\"><figcaption id=\"caption-attachment-120380\" class=\"wp-caption-text\">Se\u00e7\u00e3o de detalhes do autor e configura\u00e7\u00f5es de informa\u00e7\u00f5es<\/figcaption><\/figure>\n<p>Agora salve seu arquivo <em>edit.js<\/em> e execute seus testes. Seu bloco deve incluir diferentes elementos, dependendo das configura\u00e7\u00f5es do bloco.<\/p>\n<figure id=\"attachment_120384\" aria-describedby=\"caption-attachment-120384\" style=\"width: 1912px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120384\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/author-info-with-settings-no-bio-2.jpg\" alt=\"Detalhes do autor n\u00e3o mostrando a biografia do autor.\" width=\"1912\" height=\"484\"><figcaption id=\"caption-attachment-120384\" class=\"wp-caption-text\">Detalhes do autor n\u00e3o mostrando a biografia do autor.<\/figcaption><\/figure>\n<p>Uma \u00faltima coisa ainda est\u00e1 faltando: o n\u00famero de colunas para exibir artigos.<\/p>\n<h3>Alterando o n\u00famero de colunas<\/h3>\n<p>Para dar ao usu\u00e1rio a habilidade de mostrar pr\u00e9vias de artigos em colunas, n\u00f3s definimos o atributo <code>columns<\/code> no arquivo <em>block.json.<\/em> N\u00f3s tamb\u00e9m inclu\u00edmos um atributo <code>columns<\/code> no script e criamos um controle de configura\u00e7\u00f5es para permitir que os usu\u00e1rios mudem o n\u00famero de colunas, embora esta mudan\u00e7a n\u00e3o tenha efeito no momento.<\/p>\n<p>No c\u00f3digo JSX acima voc\u00ea deve ter notado que n\u00f3s adicionamos classes CSS a v\u00e1rios elementos:<\/p>\n<p>Classes atribu\u00eddas aos elementos na se\u00e7\u00e3o Autor:<\/p>\n<ul>\n<li><code>wp-block-author-box-author-plugin__author<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__avatar<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__author-content<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__name<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__description<\/code><\/li>\n<\/ul>\n<p>Classes atribu\u00eddas aos elementos na se\u00e7\u00e3o de conte\u00fado:<\/p>\n<ul>\n<li><code>wp-block-author-box-author-plugin__post-items<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__post-thumbnail<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__post-title<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__post-date<\/code><\/li>\n<li><code>wp-block-author-box-author-plugin__post-excerpt<\/code><\/li>\n<\/ul>\n<p>Uma classe ainda est\u00e1 faltando. O nome desta classe ser\u00e1 gerado dinamicamente para refletir o n\u00famero de colunas definidas pelo usu\u00e1rio.<\/p>\n<p>Volte para o arquivo <code>Edit.js<\/code> e modifique o elemento <code>ul<\/code> da seguinte forma:<\/p>\n<pre><code class=\"language-jsx\">&lt;ul className={ `wp-block-author-box-author-plugin__post-items columns-${ columns }` }&gt;\n\t...\n&lt;\/ul&gt;<\/code><\/pre>\n<p>N\u00f3s adicionamos uma nova classe <code>columns-${ columns }<\/code> de acordo com a sintaxe <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals\">literal do Template<\/a> para inserir uma express\u00e3o dentro de uma string. Desta forma, o atributo anexado ao elemento <code>ul<\/code> depender\u00e1 das configura\u00e7\u00f5es do usu\u00e1rio (por exemplo <code>columns-1<\/code>, <code>columns-2<\/code>, etc.).<\/p>\n<p>Agora abra o arquivo <code>style.scss<\/code> e substitua o c\u00f3digo existente com o seguinte:<\/p>\n<pre><code class=\"language-css\">.wp-block-author-box-author-plugin {\n\tbackground-color: #21759b;\n\tcolor: #fff;\n\tpadding: .6em;\n\tul.wp-block-author-box-author-plugin__post-items {\n\t\tpadding: 0;\n\t\tlist-style-type: none;\n\t\tdisplay: grid;\n\t\tgap: .5em;\n\t\t@for $i from 2 through 4 {\n\t\t\t&.columns-#{ $i } {\n\t\t\t\tgrid-template-columns: repeat(#{ $i }, 1fr);\n\t\t\t}\n\t\t}\n\t\tli {\n\t\t\tlist-style: none;\n\t\t\timg.wp-block-author-box-author-plugin__post-thumbnail {\n\t\t\t\theight: auto;\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t\t\n\t}\n}\n.wp-block-author-box-author-plugin__author {\n\tdisplay: flex;\n    flex-wrap: wrap;\n}\n\n.wp-block-author-box-author-plugin__avatar {\n\tmargin-right: 1em;\n}\n\n.wp-block-author-box-author-plugin__author-content {\n\tflex-basis: 0;\n    flex-grow: 1;\n}<\/code><\/pre>\n<p>N\u00e3o iremos a fundo nesse c\u00f3digo, estando al\u00e9m do escopo deste artigo. Mas se voc\u00ea quiser mergulhar mais fundo, voc\u00ea pode consultar os seguintes recursos:<\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Grid_Layout\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Grid Layout<\/a><\/li>\n<li><a href=\"https:\/\/learncssgrid.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Learn CSS Grid<\/a><\/li>\n<li><a href=\"https:\/\/sass-lang.com\/documentation\/at-rules\/control\/for\" target=\"_blank\" rel=\"noopener noreferrer\">The @for rule in Sass<\/a><\/li>\n<li><a href=\"https:\/\/sass-lang.com\/documentation\/style-rules#nesting\" target=\"_blank\" rel=\"noopener noreferrer\">Nesting in Sass<\/a><\/li>\n<\/ul>\n<figure id=\"attachment_120388\" aria-describedby=\"caption-attachment-120388\" style=\"width: 2880px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-120388 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/author-block-editor-view.jpg\" alt=\"O bloco do Autor no editor.\" width=\"2880\" height=\"1800\"><figcaption id=\"caption-attachment-120388\" class=\"wp-caption-text\">O bloco do Autor no editor.<\/figcaption><\/figure>\n<p>E isso \u00e9 tudo para a renderiza\u00e7\u00e3o do bloco no editor.<\/p>\n<h2>Construindo o bloco para renderizar na p\u00e1gina<\/h2>\n<p>Agora que o c\u00f3digo que renderiza o bloco no editor est\u00e1 completo, podemos avan\u00e7ar e construir o bloco para renderiza\u00e7\u00e3o no frontend.<\/p>\n<p>Como mencionamos anteriormente, quando se trata de blocos din\u00e2micos, o arquivo de plugin \u00e9 respons\u00e1vel por gerar o HTML a ser renderizado no front end.<\/p>\n<p>Ent\u00e3o, abra o arquivo principal do seu plugin <em>(author-plugin.php<\/em> em nosso exemplo).<\/p>\n<p>A primeira coisa a fazer \u00e9 tornar os atributos do bloco dispon\u00edveis para a fun\u00e7\u00e3o PHP do WordPress. Em seu arquivo PHP, altere a defini\u00e7\u00e3o da fun\u00e7\u00e3o da seguinte forma:<\/p>\n<pre><code class=\"language-php\">function author_box_author_plugin_render_author_content( $attr ) {\n\t...\n}<\/code><\/pre>\n<p>Agora voc\u00ea pode usar as fun\u00e7\u00f5es do WordPress para recuperar e manipular dados. Por exemplo, voc\u00ea pode usar <code>get_posts<\/code> para recuperar os \u00faltimos artigos do blog (leia mais em nosso artigo detallhado sobre a <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-get_posts\/\">fun\u00e7\u00e3o<code>get_posts<\/code><\/a> ):<\/p>\n<pre><code class=\"language-php\">function author_box_author_plugin_render_author_content( $attr ) {\n\t$args = array(\n\t\t'numberposts'\t=&gt; $attr['numberOfItems'],\n\t);\n\t$my_posts = get_posts( $args );\n\t\n\tif( ! empty( $my_posts ) ){\n\t\t$output = '&lt;ul&gt;';\n\t\tforeach ( $my_posts as $p ){\n\t\t\t$output .= '&lt;li&gt;&lt;a href=\"' . esc_url( get_permalink( $p-&gt;ID ) ) . '\"&gt;' \n\t\t\t. $p-&gt;post_title . '&lt;\/a&gt;&lt;\/li&gt;';\n\t\t}\n\t\t$output .= '&lt;\/ul&gt;';\n\t}\n\treturn $output ?? '&lt;strong&gt;Sorry. No posts matching your criteria!&lt;\/strong&gt;';\n}<\/code><\/pre>\n<p>A fun\u00e7\u00e3o acima recupera os \u00faltimos artigos do blog <code>numberOfItems<\/code> do seu banco de dados WordPress (por padr\u00e3o <code>post_type<\/code> est\u00e1 configurado para <code>post<\/code>) e retorna um conjunto de objetos <code>$post<\/code>. Do que itera por cima do array para construir os itens da lista.<\/p>\n<p>Se voc\u00ea inspecionar a sa\u00edda HTML, voc\u00ea notar\u00e1 que \u00e9 uma lista simples de postagens, como a mostrada na imagem a seguir:<\/p>\n<figure id=\"attachment_120521\" aria-describedby=\"caption-attachment-120521\" style=\"width: 1866px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120521\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/list-of-posts.jpg\" alt=\"Uma lista simples de postagens.\" width=\"1866\" height=\"732\"><figcaption id=\"caption-attachment-120521\" class=\"wp-caption-text\">Uma lista simples de postagens<\/figcaption><\/figure>\n<p>Em nosso artigo anterior n\u00f3s mencionamos que voc\u00ea usar\u00e1 o hook de rea\u00e7\u00e3o <code>useBlockProps<\/code> para marcar o <a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-personalizados-gutenberg\/#import-components\">elemento de wrapper<\/a>\u00a0do bloco em seu c\u00f3digo JSX. Voc\u00ea precisar\u00e1 fazer o mesmo em sua fun\u00e7\u00e3o PHP.<\/p>\n<p>O WordPress fornece a <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_block_wrapper_attributes\/\">fun\u00e7\u00e3o<code>get_block_wrapper_attributes<\/code><\/a> para isso.<\/p>\n<p>Ent\u00e3o, mude seu c\u00f3digo PHP da seguinte forma:<\/p>\n<pre><code class=\"language-php\">function author_box_author_plugin_render_author_content( $attr ) {\n\t$args = array(\n\t\t'numberposts'\t=&gt; $attr['numberOfItems']\n\t);\n\t$my_posts = get_posts( $args );\n\t\n\tif( ! empty( $my_posts ) ){\n\t\t$output = '&lt;div ' . get_block_wrapper_attributes() . '&gt;';\n\t\t$output .= '&lt;ul&gt;';\n\t\tforeach ( $my_posts as $p ){\n\t\t\t\n\t\t\t$title = $p-&gt;post_title ? $p-&gt;post_title : 'Default title';\n\t\t\t$url = esc_url( get_permalink( $p-&gt;ID ) );\n\n\t\t\t$output .= '&lt;li&gt;';\n\t\t\t$output .= '&lt;a href=\"' . $url . '\"&gt;' . $title . '&lt;\/a&gt;';\n\t\t\t$output .= '&lt;\/li&gt;';\n\t\t}\n\t\t$output .= '&lt;\/ul&gt;';\n\t\t$output .= '&lt;\/div&gt;';\n\t}\n\treturn $output ?? '&lt;strong&gt;Sorry. No posts matching your criteria!&lt;\/strong&gt;';\n}<\/code><\/pre>\n<p>Agora uma <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_block_wrapper_attributes\/\">classe <code>wp-block-author-box-author-plugin<\/code><\/a> foi designada para o elemento recipiente e o bloco tem uma cor de fundo diferente.<\/p>\n<p>Ent\u00e3o a fun\u00e7\u00e3o <code>get_posts<\/code> obt\u00e9m dados <code>WP_Posts<\/code> e o ciclo <code>foreach<\/code> constr\u00f3i os itens da lista (veja tamb\u00e9m <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-get_posts\/#display\">Como exibir dados restitu\u00eddo do get_posts<\/a>).<\/p>\n<figure id=\"attachment_120520\" aria-describedby=\"caption-attachment-120520\" style=\"width: 1866px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120520\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/list-of-posts-2.jpg\" alt=\"Uma lista de artigos com uma classe CSS atribu\u00edda.\" width=\"1866\" height=\"650\"><figcaption id=\"caption-attachment-120520\" class=\"wp-caption-text\">Uma lista de artigos com uma classe CSS atribu\u00edda.<\/figcaption><\/figure>\n<h3>Adicionando imagem em destaque, data e extrato<\/h3>\n<p>Em seguida, voc\u00ea precisar\u00e1 adicionar thumbnails, datas e extratos do artigo. No mesmo arquivo, altere seu c\u00f3digo PHP como a seguir:<\/p>\n<pre><code class=\"language-php\">function author_box_author_plugin_render_author_content( $attr ) {\n\t$args = array(\n\t\t'numberposts'\t=&gt; $attr['numberOfItems']\n\t);\n\t$my_posts = get_posts( $args );\n\t\n\tif( ! empty( $my_posts ) ){\n\t\t$output = '&lt;div ' . get_block_wrapper_attributes() . '&gt;';\n\t\t$output .= '&lt;ul class=\"wp-block-author-box-author-plugin__post-items columns-\"&gt;';\n\n\t\tforeach ( $my_posts as $p ){\n\t\t\t\n\t\t\t$title = $p-&gt;post_title ? $p-&gt;post_title : 'Default title';\n\t\t\t$url = esc_url( get_permalink( $p-&gt;ID ) );\n\t\t\t$thumbnail = has_post_thumbnail( $p-&gt;ID ) ? get_the_post_thumbnail( $p-&gt;ID, 'medium' ) : '';\n\n\t\t\t$output .= '&lt;li&gt;';\n\t\t\tif( ! empty( $thumbnail ) && $attr['displayThumbnail'] ){\n\t\t\t\t$output .= $thumbnail;\n\t\t\t}\n\t\t\t$output .= '&lt;h5&gt;&lt;a href=\"' . $url . '\"&gt;' . $title . '&lt;\/a&gt;&lt;\/h5&gt;';\n\t\t\tif( $attr['displayDate'] ){\n\t\t\t\t$output .= '&lt;time datetime=\"' . esc_attr( get_the_date( 'c', $p ) ) . '\"&gt;' . esc_html( get_the_date( '', $p ) ) . '&lt;\/time&gt;';\n\t\t\t}\n\t\t\tif( get_the_excerpt( $p ) && $attr['displayExcerpt'] ){\n\t\t\t\t$output .= '&lt;p&gt;' . get_the_excerpt( $p ) . '&lt;\/p&gt;';\n\t\t\t}\n\t\t\t$output .= '&lt;\/li&gt;';\n\t\t}\n\t\t$output .= '&lt;\/ul&gt;';\n\t\t$output .= '&lt;\/div&gt;';\n\t}\n\treturn $output ?? '&lt;strong&gt;Sorry. No posts matching your criteria!&lt;\/strong&gt;';\n}<\/code><\/pre>\n<p>O <code>foreach<\/code> literatiza o loop sobre a matriz <code>$my_posts<\/code>. A cada itera\u00e7\u00e3o, v\u00e1rias condi\u00e7\u00f5es verificam os valores dos atributos e constroem a sa\u00edda de acordo.<\/p>\n<p>Agora d\u00ea uma olhada na sa\u00edda na tela:<\/p>\n<figure id=\"attachment_120649\" aria-describedby=\"caption-attachment-120649\" style=\"width: 2192px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120649\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/list-of-posts-with-featured-images-date-excerpt-1.jpg\" alt=\"Uma lista de postagens com imagens em destaque, datas e extratos.\" width=\"2192\" height=\"1220\"><figcaption id=\"caption-attachment-120649\" class=\"wp-caption-text\">Uma lista de postagens com imagens em destaque, datas e extratos<\/figcaption><\/figure>\n<p>Agora voc\u00ea pode fazer seus testes. Mude a data, trecho e configura\u00e7\u00f5es de miniaturas e verifique como o conte\u00fado do bloco muda no front-end.<\/p>\n<h3>Exibindo artigos nas colunas<\/h3>\n<p>Em nosso c\u00f3digo JavaScript, n\u00f3s usamos uma classe <code>columns-${ columns }<\/code> para exibir pr\u00e9vias de artigos em colunas. Agora n\u00f3s precisamos fazer o mesmo no PHP.<\/p>\n<p>Para fazer isso, voc\u00ea simplesmente tem que adicionar estas duas linhas de c\u00f3digo:<\/p>\n<pre><code class=\"language-php\">$num_cols = $attr['columns'] &gt; 1 ? strval( $attr['columns'] ) : '1';\n\n$output .= '&lt;ul class=\"wp-block-author-box-author-plugin__post-items columns-' . $num_cols . '\"&gt;';<\/code><\/pre>\n<p>Isto ir\u00e1 anexar uma classe <code>columns-n<\/code> ao elemento <code>ul<\/code> contendo as pr\u00e9vias do artigo. Agora o n\u00famero de colunas exibidas na p\u00e1gina deve corresponder ao n\u00famero de colunas definidas nas configura\u00e7\u00f5es do bloco.<\/p>\n<h3>Construindo o caixa do autor<\/h3>\n<p>Por \u00faltimo, voc\u00ea precisa construir a caixa contendo os detalhes do autor, incluindo avatar, nome e descri\u00e7\u00e3o.<\/p>\n<p>Dentro da fun\u00e7\u00e3o chamada de retorno, voc\u00ea precisar\u00e1 adicionar um conjunto de condi\u00e7\u00f5es para verificar o valor atual de cada atributo:<\/p>\n<pre><code class=\"language-php\">if( $attr['displayAuthorInfo'] ){\n\t$output .= '&lt;div class=\"wp-block-author-box-author-plugin__author\"&gt;';\n\t\n\tif( $attr['showAvatar'] ){\n\t\t$output .= '&lt;div class=\"wp-block-author-box-author-plugin__avatar\"&gt;' \n\t\t\t. get_avatar( get_the_author_meta( 'ID' ), $attr['avatarSize'] ) \n\t\t\t. '&lt;\/div&gt;';\n\t}\n\n\t$output .= '&lt;div class=\"wp-block-author-box-author-plugin__author-content\"&gt;';\n\t\n\t$output .= '&lt;div class=\"wp-block-author-box-author-plugin__name\"&gt;' \n\t\t. get_the_author_meta( 'display_name' ) \n\t\t. '&lt;\/div&gt;';\n\n\tif( $attr['showBio'] ){\n\t\t$output .= '&lt;div class=\"wp-block-author-box-author-plugin__description\"&gt;' \n\t\t\t. get_the_author_meta( 'description' ) \n\t\t\t. '&lt;\/div&gt;';\n\t}\n\n\t$output .= '&lt;\/div&gt;';\n\t$output .= '&lt;\/div&gt;';\n}<\/code><\/pre>\n<p>O c\u00f3digo \u00e9 bastante simples. Ele verifica o valor atual de cada atributo, e se ele for <code>true<\/code>, ent\u00e3o ele ir\u00e1 gerar o HTML necess\u00e1rio.<\/p>\n<p>Agora salve seu arquivo PHP e compare o bloco no editor vs. o mesmo bloco no frontend.<\/p>\n<figure id=\"attachment_120952\" aria-describedby=\"caption-attachment-120952\" style=\"width: 2880px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-120952\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/04\/full-block.jpg\" alt=\"Nosso bloco personalizado no editor de blocos.\" width=\"2880\" height=\"1800\"><figcaption id=\"caption-attachment-120952\" class=\"wp-caption-text\">Nosso bloco personalizado no editor de blocos.<\/figcaption><\/figure>\n<p>Voc\u00ea encontrar\u00e1 o c\u00f3digo completo do bloco de exemplo <a href=\"https:\/\/gist.github.com\/carlodaniele\/27e292fbbe4b897ca3bda4539dfd74df\">neste Gist p\u00fablico<\/a>.<\/p>\n\n<h2>Funcionalidades recomendadas para o desenvolvimento de blocos din\u00e2micos<\/h2>\n<p>Se a leitura deste artigo despertou seus sentimentos e voc\u00ea come\u00e7ou a reconhecer as oportunidades de desenvolvimento profissional que podem surgir da aprendizagem para criar blocos Gutenberg, nosso conselho \u00e9 continuar explorando e adquirindo novas habilidades nas tecnologias por tr\u00e1s do desenvolvimento de blocos.<\/p>\n<p>Embora ainda falte documenta\u00e7\u00e3o oficial confi\u00e1vel, apesar de haver excelentes recursos por a\u00ed, tanto gratuitos como pagos, n\u00f3s consultamos enquanto escrev\u00edamos este artigo. Entre os muitos recursos dispon\u00edveis, n\u00f3s recomendamos o seguinte:<\/p>\n<p><strong>Recursos oficiais<br \/>\n<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/data\/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">Data<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/core-data\/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">Cora Data<\/a><\/li>\n<li><a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/block-tutorial\/creating-dynamic-blocks\/\" target=\"_blank\" rel=\"noopener noreferrer\">Creating dynamic blocks<\/a><\/li>\n<li><a href=\"https:\/\/learn.wordpress.org\/workshop\/intro-to-gutenberg-block-development\/\" target=\"_blank\" rel=\"noopener noreferrer\">Intro to Gutenberg Block Development<\/a><\/li>\n<li><a href=\"https:\/\/www.meetup.com\/en-US\/wordpress-social-learning\/\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress Social Learning<\/a> no MeetUp<\/li>\n<\/ul>\n<p><strong>Tutoriais recomendados por colaboradores do WordPress Core<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/ryanwelcher.com\/2021\/08\/requesting-data-in-gutenberg-with-getentityrecords\/\" target=\"_blank\" rel=\"noopener noreferrer\">Requesting data in Gutenberg with getEntityRecords<\/a>\u00a0por Ryan Welcher (@ryanwelcher)<\/li>\n<li><a href=\"https:\/\/unfoldingneurons.com\/2020\/wordpress-data-series-overview-and-introduction\" target=\"_blank\" rel=\"noopener noreferrer\">A Practical Overview of the @wordpress\/data API<\/a> de Darren Ethier (@nerrad)<\/li>\n<\/ul>\n<p><strong>Recursos JavaScript, Reage, e Redux<br \/>\n<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Tutorials#javascript_tutorials\" target=\"_blank\" rel=\"noopener noreferrer\">JavaScript Tutorials<\/a> da MDN<\/li>\n<li><a href=\"https:\/\/reactjs.org\/docs\/getting-started.html\" target=\"_blank\" rel=\"noopener noreferrer\">Getting Started with React<\/a> (oficial)<\/li>\n<li><a href=\"https:\/\/redux.js.org\/tutorials\/essentials\/part-1-overview-concepts\" target=\"_blank\" rel=\"noopener noreferrer\">Redux Tutorial<\/a> (oficial)<\/li>\n<\/ul>\n<p><strong>Recursos relacionados da Kinsta<\/strong><\/p>\n<ul>\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 Definitivo para o Gerenciamento de Erros no JavaScript<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-node-js\/\">O Que \u00e9 Node.js e Por Que Us\u00e1-lo?<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/como-instalar-o-node-js\/\">Como instalar o Node.js e npm no Windows, macOS e Linux<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/como-depurar-codigo-no-node-js\/\">Como Depurar o C\u00f3digo no Node.js Usando M\u00faltiplas Ferramentas<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/node-js-vs-php\/\">Node.js vs PHP: Uma Compara\u00e7\u00e3o Detalhada<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/aplicativos-node-js\/\">Os 10 Tipos mais Populares de Aplicativos Node.js em 2022<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/angular-vs-react\/\">Angular vs React: Uma Compara\u00e7\u00e3o Detalhada<\/a><\/li>\n<\/ul>\n<h2>Resumo<\/h2>\n<p>Chegamos ao fim desta (segunda) longa jornada atrav\u00e9s do desenvolvimento do bloco Gutenberg.<\/p>\n<p>Neste artigo, cobrimos alguns t\u00f3picos avan\u00e7ados, tais como Estado do aplicativo e Store Redux. Mas esperamos que voc\u00ea tenha agora uma melhor compreens\u00e3o do desenvolvimento de blocos em geral.<\/p>\n<p>Sim, Node.js, Webpack, <a href=\"https:\/\/kinsta.com\/pt\/blog\/transpilacao-php\/#what-is-transpiling\">Babel<\/a>, React e Redux s\u00e3o essenciais quando se trata de construir blocos Gutenberg avan\u00e7ados, mas voc\u00ea n\u00e3o precisa ser um ninja React para come\u00e7ar. Aprender como desenvolver blocos de Gutenberg n\u00e3o precisa necessariamente ser complicado. Apenas fa\u00e7a-o com a motiva\u00e7\u00e3o certa e seguindo o caminho de aprendizado apropriado.<\/p>\n<p>E esperamos que este artigo &#8211; e <a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-personalizados-gutenberg\/\">o anterior<\/a> &#8211; forne\u00e7a a voc\u00ea o mapa certo para encontrar seu caminho e come\u00e7ar a desenvolver o Gutenberg imediatamente.<\/p>\n<p><em>At\u00e9 voc\u00ea agora! Voc\u00ea j\u00e1 criou blocos din\u00e2micos? Voc\u00ea tem algum exemplo para compartilhar conosco? E quais foram os maiores obst\u00e1culos em sua experi\u00eancia? Sinta-se \u00e0 vontade para deixar um coment\u00e1rio abaixo.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Voc\u00ea ainda est\u00e1 perplexo com o Gutenberg? Ou voc\u00ea est\u00e1 entre aqueles que acreditam firmemente no potencial do editor de blocos e querem descobrir at\u00e9 onde &#8230;<\/p>\n","protected":false},"author":36,"featured_media":51876,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[518,439,65],"topic":[1026],"class_list":["post-51875","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-block-editor","tag-development","tag-gutenberg","topic-desenvolvimento-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 Criar Blocos Din\u00e2micos para Gutenberg - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"N\u00e3o espere mais para se tornar um desenvolvedor de blocos. Neste guia, voc\u00ea aprender\u00e1 tudo o que precisa saber para criar blocos din\u00e2micos a partir do zero.\" \/>\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\/blocos-dinamicos-gutenberg\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Criar Blocos Din\u00e2micos para Gutenberg\" \/>\n<meta property=\"og:description\" content=\"N\u00e3o espere mais para se tornar um desenvolvedor de blocos. Neste guia, voc\u00ea aprender\u00e1 tudo o que precisa saber para criar blocos din\u00e2micos a partir do zero.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/\" \/>\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=\"2022-08-08T07:00:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-20T10:03:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.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=\"N\u00e3o espere mais para se tornar um desenvolvedor de blocos. Neste guia, voc\u00ea aprender\u00e1 tudo o que precisa saber para criar blocos din\u00e2micos a partir do zero.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.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=\"43 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Como Criar Blocos Din\u00e2micos para Gutenberg\",\"datePublished\":\"2022-08-08T07:00:05+00:00\",\"dateModified\":\"2025-01-20T10:03:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/\"},\"wordCount\":7063,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg\",\"keywords\":[\"Block Editor\",\"development\",\"Gutenberg\"],\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/\",\"name\":\"Como Criar Blocos Din\u00e2micos para Gutenberg - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg\",\"datePublished\":\"2022-08-08T07:00:05+00:00\",\"dateModified\":\"2025-01-20T10:03:11+00:00\",\"description\":\"N\u00e3o espere mais para se tornar um desenvolvedor de blocos. Neste guia, voc\u00ea aprender\u00e1 tudo o que precisa saber para criar blocos din\u00e2micos a partir do zero.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"Como Criar Blocos Din\u00e2micos para Gutenberg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/#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 Criar Blocos Din\u00e2micos para 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 Criar Blocos Din\u00e2micos para Gutenberg - Kinsta\u00ae","description":"N\u00e3o espere mais para se tornar um desenvolvedor de blocos. Neste guia, voc\u00ea aprender\u00e1 tudo o que precisa saber para criar blocos din\u00e2micos a partir do zero.","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\/blocos-dinamicos-gutenberg\/","og_locale":"pt_PT","og_type":"article","og_title":"Como Criar Blocos Din\u00e2micos para Gutenberg","og_description":"N\u00e3o espere mais para se tornar um desenvolvedor de blocos. Neste guia, voc\u00ea aprender\u00e1 tudo o que precisa saber para criar blocos din\u00e2micos a partir do zero.","og_url":"https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2022-08-08T07:00:05+00:00","article_modified_time":"2025-01-20T10:03:11+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg","type":"image\/jpeg"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"N\u00e3o espere mais para se tornar um desenvolvedor de blocos. Neste guia, voc\u00ea aprender\u00e1 tudo o que precisa saber para criar blocos din\u00e2micos a partir do zero.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg","twitter_creator":"@carlodaniele","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Carlo Daniele","Tempo estimado de leitura":"43 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Como Criar Blocos Din\u00e2micos para Gutenberg","datePublished":"2022-08-08T07:00:05+00:00","dateModified":"2025-01-20T10:03:11+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/"},"wordCount":7063,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg","keywords":["Block Editor","development","Gutenberg"],"inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/","url":"https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/","name":"Como Criar Blocos Din\u00e2micos para Gutenberg - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg","datePublished":"2022-08-08T07:00:05+00:00","dateModified":"2025-01-20T10:03:11+00:00","description":"N\u00e3o espere mais para se tornar um desenvolvedor de blocos. Neste guia, voc\u00ea aprender\u00e1 tudo o que precisa saber para criar blocos din\u00e2micos a partir do zero.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2022\/08\/how-to-create-dynamic-blocks-for-gutenberg.jpeg","width":1460,"height":730,"caption":"Como Criar Blocos Din\u00e2micos para Gutenberg"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/#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 Criar Blocos Din\u00e2micos para 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\/51875","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=51875"}],"version-history":[{"count":10,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/51875\/revisions"}],"predecessor-version":[{"id":70854,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/51875\/revisions\/70854"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/51875\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/51875\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/51875\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/51875\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/51875\/translations\/de"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/51875\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/51875\/translations\/nl"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/51875\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/51876"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=51875"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=51875"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=51875"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}