{"id":67827,"date":"2024-04-05T04:33:16","date_gmt":"2024-04-05T07:33:16","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=67827&#038;preview=true&#038;preview_id=67827"},"modified":"2024-04-08T04:12:27","modified_gmt":"2024-04-08T07:12:27","slug":"wordpress-headless-gutenberg","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/wordpress-headless-gutenberg\/","title":{"rendered":"Como Analisar o Conte\u00fado do Gutenberg para o WordPress Headless"},"content":{"rendered":"<p>O Gutenberg \u00e9 o editor padr\u00e3o do <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-headless-para-next-js\/\">WordPress<\/a>. O editor permite que voc\u00ea crie e estilize o conte\u00fado usando blocos discretos para texto, imagens, v\u00eddeo e outros elementos do site por meio de uma interface de arrastar e soltar. Essa abordagem aprimora a flexibilidade e os recursos de design do WordPress.<\/p>\n<p>Este guia explica como analisar o conte\u00fado do Gutenberg como <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-html\/\">HTML<\/a> usando a <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-rest-api\/\">API REST do WordPress<\/a> em um site est\u00e1tico <a href=\"https:\/\/kinsta.com\/pt\/blog\/next-js\/\">Next.js<\/a>.<\/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>Pr\u00e9-requisitos<\/h2>\n<p>Para acompanhar, voc\u00ea precisa de:<\/p>\n<ul>\n<li>Node.js e npm (<a href=\"https:\/\/kinsta.com\/pt\/blog\/npm-gerenciador-pacotes-node\/\">Node Package Manager<\/a>) ou yarn instalados em seu computador<\/li>\n<li>Conhecimento b\u00e1sico de <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> e <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-react-js\/\">React<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/pt\/docs\/hospedagem-de-wordpress\/como-comecar-wordpress\/novo-site\/\">Site WordPress<\/a> com alguns artigos publicados<\/li>\n<\/ul>\n<h2>Obter conte\u00fado do Gutenberg usando uma API REST<\/h2>\n<p>Para interagir com seu site WordPress de forma program\u00e1tica e recuperar conte\u00fado estruturado em <a href=\"https:\/\/kinsta.com\/courses\/gutenberg-block-development\/history-of-gutenberg-block-editor\/\">blocos do Gutenberg<\/a>, voc\u00ea pode usar a API REST do WordPress ou o <a href=\"https:\/\/kinsta.com\/pt\/blog\/wpgraphql-e-wp-rest-api\/\">plugin WPGraphQL<\/a>. Essas ferramentas permitem que voc\u00ea busque seu conte\u00fado do WordPress no formato JSON.<\/p>\n<p>Para habilitar o acesso aos dados JSON por meio da API REST, ajuste as configura\u00e7\u00f5es de permalink do seu WordPress para algo diferente de &#8220;Simples&#8221;. Isso permite o acesso \u00e0 API por meio de uma URL estruturada, conforme segue:<\/p>\n<pre><code class=\"language-bash\">https:\/\/yoursite.com\/wp-json\/wp\/v2<\/code><\/pre>\n<p>Ao fazer solicita\u00e7\u00f5es de API para esse URL, voc\u00ea pode recuperar programaticamente v\u00e1rias informa\u00e7\u00f5es e executar opera\u00e7\u00f5es no seu site WordPress. Por exemplo, voc\u00ea pode obter uma lista de artigos enviando uma solicita\u00e7\u00e3o GET para:<\/p>\n<pre><code class=\"language-bash\">https:\/\/yoursite.com\/wp-json\/wp\/v2\/posts<\/code><\/pre>\n<p>Isso retornar\u00e1 um objeto JSON contendo informa\u00e7\u00f5es sobre os artigos em seu site WordPress, incluindo t\u00edtulos, conte\u00fado, detalhes do autor e muito mais.<\/p>\n<h2>Analisar blocos do Gutenberg como HTML<\/h2>\n<p>Ao recuperar artigos de um site WordPress que usa o <a href=\"https:\/\/kinsta.com\/pt\/blog\/editor-gutenberg-wordpress\/\">editor Gutenberg<\/a>, o conte\u00fado armazenado no banco de dados pode apresentar uma combina\u00e7\u00e3o de metadados HTML e JSON para descrever v\u00e1rios tipos de blocos, como cita\u00e7\u00f5es e galerias. Por exemplo:<\/p>\n<pre><code class=\"language-html\">&lt;!-- wp:quote {\"className\":\"inspirational-quote\",\"style\":{\"typography\":{\"fontSize\":\"large\"}}} --&gt;\n&lt;blockquote class=\"wp-block-quote inspirational-quote has-large-font-size\"&gt;&lt;p&gt;\u201cThe journey of a thousand miles begins with one step.\u201d&lt;\/p&gt;&lt;cite&gt;Lao Tzu&lt;\/cite&gt;&lt;\/blockquote&gt;\n&lt;!-- \/wp:quote --&gt;\n\n&lt;!-- wp:gallery {\"ids\":[34,35],\"columns\":2,\"linkTo\":\"none\",\"sizeSlug\":\"medium\",\"className\":\"custom-gallery\"} --&gt;\n&lt;ul class=\"wp-block-gallery columns-2 is-cropped custom-gallery\"&gt;&lt;li class=\"blocks-gallery-item\"&gt;&lt;figure&gt;&lt;img src=\"http:\/\/example.com\/wp-content\/uploads\/2021\/09\/image1-300x200.jpg\" alt=\"A breathtaking view of the mountains\" class=\"wp-image-34\"\/&gt;&lt;\/figure&gt;&lt;\/li&gt;&lt;li class=\"blocks-gallery-item\"&gt;&lt;figure&gt;&lt;img src=\"http:\/\/example.com\/wp-content\/uploads\/2021\/09\/image2-300x200.jpg\" alt=\"Serene lakeside at dawn\" class=\"wp-image-35\"\/&gt;&lt;\/figure&gt;&lt;\/li&gt;&lt;\/ul&gt;\n&lt;!-- \/wp:gallery --&gt;<\/code><\/pre>\n<p>Este snippet ilustra dois blocos do Gutenberg: Uma Cita\u00e7\u00e3o e uma Galeria. Cada um deles \u00e9 aumentado com metadados JSON encapsulados em coment\u00e1rios HTML. Os metadados definem atributos como nomes de classes, estilos e outras configura\u00e7\u00f5es relevantes para a apresenta\u00e7\u00e3o do bloco.<\/p>\n<p>Quando voc\u00ea obt\u00e9m esses blocos por meio da API REST do WordPress ou do WPGraphQL, o WordPress os processa, transformando a combina\u00e7\u00e3o de metadados HTML e JSON em elementos HTML totalmente renderizados que voc\u00ea pode incorporar diretamente nas p\u00e1ginas web. O HTML transformado para os blocos acima apareceria da seguinte forma:<\/p>\n<pre><code class=\"language-html\">&lt;blockquote class=\"wp-block-quote inspirational-quote has-large-font-size\"&gt;&lt;p&gt;\u201cThe journey of a thousand miles begins with one step.\u201d&lt;\/p&gt;&lt;cite&gt;Lao Tzu&lt;\/cite&gt;&lt;\/blockquote&gt;\n\n&lt;ul class=\"wp-block-gallery columns-2 is-cropped custom-gallery\"&gt;\n  &lt;li class=\"blocks-gallery-item\"&gt;&lt;figure&gt;&lt;img loading=\"lazy\" src=\"http:\/\/example.com\/wp-content\/uploads\/2021\/09\/image1-300x200.jpg\" alt=\"A breathtaking view of the mountains\" class=\"wp-image-34\" sizes=\"(max-width: 300px) 100vw, 300px\" \/&gt;&lt;\/figure&gt;&lt;\/li&gt;\n  &lt;li class=\"blocks-gallery-item\"&gt;&lt;figure&gt;&lt;img loading=\"lazy\" src=\"http:\/\/example.com\/wp-content\/uploads\/2021\/09\/image2-300x200.jpg\" alt=\"Serene lakeside at dawn\" class=\"wp-image-35\" sizes=\"(max-width: 300px) 100vw, 300px\" \/&gt;&lt;\/figure&gt;&lt;\/li&gt;\n&lt;\/ul&gt;<\/code><\/pre>\n<p>Para os desenvolvedores que criam aplicativos desacoplados ou headless usando frameworks JavaScript como Next.js, isso apresenta um m\u00e9todo simples de exibir conte\u00fado injetando diretamente o HTML na p\u00e1gina usando a propriedade <code>dangerouslySetInnerHTML<\/code> para renderizar a marca\u00e7\u00e3o.<\/p>\n<pre><code class=\"language-html\">&lt;div dangerouslySetInnerHTML={{ __html: &lt;raw_html_string&gt; }} \/&gt;<\/code><\/pre>\n<p>Al\u00e9m disso, talvez voc\u00ea precise realizar uma formata\u00e7\u00e3o adicional para elementos como links e lidar com o excesso de caracteres de nova linha (<code>\\n<\/code>), o que este guia explica posteriormente.<\/p>\n<h2>Analisar o conte\u00fado dos blocos do Gutenberg no site est\u00e1tico Next.js<\/h2>\n<p>Nesta se\u00e7\u00e3o, vamos buscar o conte\u00fado do WordPress em um projeto Next.js e, em seguida, analisar os blocos do Gutenberg como HTML.<\/p>\n<ol start=\"1\">\n<li>Comece configurando uma fun\u00e7\u00e3o para buscar artigos do seu site WordPress. Abra o arquivo <strong>src\/page.js<\/strong> em seu projeto e substitua seu conte\u00fado pelo seguinte trecho de c\u00f3digo:\n<pre><code class=\"language-jsx\">const getWpPosts = async () =&gt; {\n\tconst res = await fetch('https:\/\/yoursite.com\/wp-json\/wp\/v2\/posts');\n  \tconst posts = await res.json();\n\treturn posts;\n};<\/code><\/pre>\n<p>Essa fun\u00e7\u00e3o ass\u00edncrona executa uma solicita\u00e7\u00e3o de API para a API REST do WordPress. Isso busca todos os artigos dispon\u00edveis em seu site e as retorna como uma array.<\/li>\n<li>Em seguida, vamos utilizar os artigos obtidos em um componente de p\u00e1gina Next.js simples, registrando os artigos no console e renderizando uma sauda\u00e7\u00e3o b\u00e1sica:\n<pre><code class=\"language-jsx\">const page = async () =&gt; {\n  const posts = await getWpPosts();\n  console.log(posts);\n  \n  return (\n    &lt;div&gt;\n      &lt;h1&gt;Hello World&lt;\/h1&gt;\n    &lt;\/div&gt;\n  );\n};\n\nexport default page;<\/code><\/pre>\n<p>Quando voc\u00ea executa o projeto usando <code>npm run dev<\/code>, ele exibe a mensagem &#8220;Hello World&#8221; e registra em registro os artigos obtidos no Terminal.<\/p>\n<pre><code class=\"language-json\">[\n  {\n    \"_links\" : {\n      \"about\" : [...],\n      \"author\" : [...],\n      \"collection\" : [...],\n      \"curies\" : [...],\n      \"predecessor-version\" : [...],\n      \"replies\" : [...],\n      \"self\" : [...],\n      \"version-history\" : [...],\n      \"wp:attachment\" : [...],\n      \"wp:term\" : [...]\n    },\n    \"author\" : 1,\n    \"categories\" : [...],\n    \"comment_status\" : \"open\",\n    \"content\" : {\n      \"protected\" : false,\n      \"rendered\" : \"\\n&lt;p&gt;Fire, a primal force, captivates with its &lt;strong&gt;flickering flames&lt;\/strong&gt;, evoking both awe and caution. Its &lt;quote&gt;dance&lt;\/quote&gt; symbolizes destruction and renewal, consuming the old to make way for the new. While it warms our homes and hearts, fire demands respect for its power to devastate.&lt;\/p&gt;\\n\\n\\n\\n&lt;figure class=\\\"wp-block-image size-full\\\"&gt;&lt;img loading=\\\"lazy\\\" decoding=\\\"async\\\" width=\\\"250\\\" height=\\\"148\\\" src=\\\"https:\/\/img.example.com\/wp-content\/uploads\/2024\/02\/burningbuilding.jpg\\\" alt=\\\"\\\" class=\\\"wp-image-14\\\"\/&gt;&lt;\/figure&gt;\\n\\n\\n\\n&lt;p&gt;In ancient times, fire was a beacon of light and warmth, essential for survival. Today, it remains a symbol of human ingenuity and danger. From the comforting glow of a hearth to the destructive fury of wildfires, fire\u2019s dual nature reminds us of our fragile relationship with the elements.&lt;\/p&gt;\\n\\n\\n\\n&lt;figure class=\\\"wp-block-image size-large\\\"&gt;&lt;img decoding=\\\"async\\\" src=\\\"https:\/\/img.example.com\/premium-photo\/painting-burning-building-illuminated-by-bright-flames-night_168058-249.jpg?w=1380\\\" alt=\\\"\\\"\/&gt;&lt;\/figure&gt;\\n\\n\\n\\n&lt;p&gt;You can check out other articles on our blog:&lt;\/p&gt;\\n\\n\\n\\n&lt;ul&gt;\\n&lt;li&gt;&lt;a href=\\\"https:\/\/yoursite.com\/?p=6\\\"&gt;Lorem Ipsum: Beginnings&lt;\/a&gt;&lt;\/li&gt;\\n\\n\\n\\n&lt;li&gt;&lt;a href=\\\"https:\/\/yoursite.com\/?p=9\\\"&gt;Lorem Ipsum: Act 2&lt;\/a&gt;&lt;\/li&gt;\\n\\n\\n\\n&lt;li&gt;&lt;a href=\\\"https:\/\/yoursite.com\/?p=11\\\"&gt;Lorem Ipsum: Act 3&lt;\/a&gt;&lt;\/li&gt;\\n&lt;\/ul&gt;\\n\"\n    },\n    \"date\" : \"2024-02-27T12:08:30\",\n    \"date_gmt\" : \"2024-02-27T12:08:30\",\n    \"excerpt\" : {\n      \"protected\" : false,\n      \"rendered\" : \"&lt;p&gt;Fire, a primal force, captivates with its flickering flames, evoking both awe and caution. Its dance symbolizes destruction and renewal, consuming the old to make way for the new. While it warms our homes and hearts, fire demands respect for its power to devastate. In ancient times, fire was a beacon of light and warmth, [\u2026]&lt;\/p&gt;\\n\"\n    },\n    \"featured_media\" : 0,\n    \"format\" : \"standard\",\n    \"guid\" : {\n      \"rendered\" : \"https:\/\/yoursite.com\/?p=13\"\n    },\n    \"id\" : 13,\n    \"link\" : \"https:\/\/yoursite.com\/?p=13\",\n    \"meta\" : {\n      \"footnotes\" : \"\"\n    },\n    \"modified\" : \"2024-02-29T16:45:36\",\n    \"modified_gmt\" : \"2024-02-29T16:45:36\",\n    \"ping_status\" : \"open\",\n    \"slug\" : \"fire-fire\",\n    \"status\" : \"publish\",\n    \"sticky\" : false,\n    \"tags\" : [],\n    \"template\" : \"\",\n    \"title\" : {\n      \"rendered\" : \"Fire\"\n    },\n    \"type\" : \"post\"\n   },\n  },\n  ...\n]<\/code><\/pre>\n<p>Os objetos JSON que representam os dados de artigos individuais do Gutenberg incluem v\u00e1rios campos, entre os quais os campos de conte\u00fado e de trecho s\u00e3o retornados como blocos do Gutenberg analisados como strings de caracteres HTML.<\/li>\n<li>Para renderizar esse conte\u00fado HTML corretamente no Next.js, empregamos a propriedade <code>dangerouslySetInnerHTML<\/code>:\n<pre><code class=\"language-jsx\">const page = async () =&gt; {\n  const posts = await getWpPosts();\n\n  return (\n    &lt;&gt;\n      &lt;h1&gt; Headless Blog &lt;\/h1&gt;\n\n      &lt;div&gt;\n        {posts.map((post) =&gt; (\n          &lt;Link href={'\/blog\/' + post.id} key={post.id}&gt;\n            &lt;h2&gt;\n              {post.title.rendered} &lt;span&gt;-&gt;&lt;\/span&gt;\n            &lt;\/h2&gt;\n            &lt;div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} \/&gt;\n          &lt;\/Link&gt;\n        ))}\n      &lt;\/div&gt;\n    &lt;\/&gt;\n  );\n};\n\nexport default page;<\/code><\/pre>\n<p>Nesse componente atualizado, mapeamos a array de artigos obtidos para gerar uma lista de trechos de artigos. Cada trecho \u00e9 agrupado em um componente <code>Link<\/code> para navega\u00e7\u00e3o, exibindo o t\u00edtulo do artigo e um trecho de seu conte\u00fado.<\/p>\n<p>A propriedade <code>dangerouslySetInnerHTML<\/code> \u00e9 usada para analisar e renderizar o conte\u00fado HTML contido no campo <code>excerpt.rendered<\/code>.<\/li>\n<li>Em seguida, crie um arquivo <strong>blog\/[id]\/page.js<\/strong> no <strong>diret\u00f3rio<\/strong> <strong>do aplicativo<\/strong>. Voc\u00ea usa pastas para definir rotas. Portanto, ao criar uma pasta <strong>blog<\/strong>, voc\u00ea define a rota <strong>blog<\/strong>. Voc\u00ea combina isso com o <a href=\"https:\/\/kinsta.com\/pt\/blog\/next-js\/#dynamic-routes\">roteamento din\u00e2mico<\/a> para gerar rotas para cada artigo.<\/li>\n<li>Cada artigo tem um ID. Voc\u00ea usa esse ID para gerar sua rota exclusiva, <code>\/blog\/{post_id}<\/code> em seu aplicativo. Voc\u00ea adiciona o seguinte c\u00f3digo:\n<pre><code class=\"language-jsx\">import Link from 'next\/link';\n\nexport async function generateStaticParams() {\n    const res = await fetch('https:\/\/yoursite.com\/wp-json\/wp\/v2\/posts');\n    const posts = await res.json();\n    return posts.map((post) =&gt; {\n        return {\n            params: {\n                id: post.id.toString(),\n            },\n        };\n    });\n}\n\nexport async function getPost(id) {\n    const response = await fetch('https:\/\/yoursite.com\/wp-json\/wp\/v2\/posts\/' + id);\n    const post = await response.json();\n    return post;\n}<\/code><\/pre>\n<p>A fun\u00e7\u00e3o <code>generateStaticParams()<\/code> gera rotas estaticamente no momento da compila\u00e7\u00e3o com base no ID correspondente retornado em cada artigo. A fun\u00e7\u00e3o <code>getPost()<\/code> obt\u00e9m dados do Gutenberg a partir da API REST para o artigo com um ID passado.<\/p>\n<p>Uma se\u00e7\u00e3o anterior mostrou um exemplo de dados do Gutenberg analisados retornados da API REST para um artigo. Por enquanto, estamos preocupados apenas com o campo <code>content.rendered<\/code>:<\/p>\n<pre><code class=\"language-json\">[\n  {\n    ...\n    \"content\": {\n      \"rendered\" : \"\\n&lt;p&gt;Fire, a primal force, captivates with its &lt;strong&gt;flickering flames&lt;\/strong&gt;, evoking both awe and caution. Its &lt;quote&gt;dance&lt;\/quote&gt; symbolizes destruction and renewal, consuming the old to make way for the new. While it warms our homes and hearts, fire demands respect for its power to devastate.&lt;\/p&gt;\\n\\n\\n\\n&lt;figure&gt; class=\\\"wp-block-image size-full\\\"&gt;&lt;img loading=\\\"lazy\\\" decoding=\\\"async\\\" width=\\\"250\\\" height=\\\"148\\\" src=\\\"https:\/\/img.example.com\/wp-content\/uploads\/2024\/02\/burningbuilding.jpg\\\" alt=\\\"\\\" class=\\\"wp-image-14\\\"\/&gt;&lt;\/figure&gt;\\n\\n\\n\\n&lt;p&gt;In ancient times, fire was a beacon of light and warmth, essential for survival. Today, it remains a symbol of human ingenuity and danger. From the comforting glow of a hearth to the destructive fury of wildfires, fire\u2019s dual nature reminds us of our fragile relationship with the elements.&lt;\/p&gt;\\n\\n\\n\\n&lt;figure&gt; class=\\\"wp-block-image size-large\\\"&gt;&lt;img decoding=\\\"async\\\" src=\\\"https:\/\/img.example.com\/premium-photo\/painting-burning-building-illuminated-by-bright-flames-night_168058-249.jpg?w=1380\\\" alt=\\\"\\\"\/&gt;&lt;\/figure&gt;\\n\\n\\n\\n&lt;p&gt;You can check out other articles on our blog:&lt;\/p&gt;\\n\\n\\n\\n&lt;ul&gt;\\n&lt;li&gt;&lt;a&gt; href=\\\"https:\/\/yoursite.com\/?p=6\\\"&gt;Lorem Ipsum: Beginnings&lt;\/a&gt;&lt;\/li&gt;\\n\\n\\n\\n&lt;li&gt;&lt;a&gt; href=\\\"https:\/\/yoursite.com\/?p=9\\\"&gt;Lorem Ipsum: Act 2&lt;\/a&gt;&lt;\/li&gt;\\n\\n\\n\\n&lt;li&gt;&lt;a&gt; href=\\\"https:\/\/yoursite.com\/?p=11\\\"&gt;Lorem Ipsum: Act 3&lt;\/a&gt;&lt;\/li&gt;\\n&lt;\/ul&gt;\\n\"\n    },\n    ...\n  }\n]<\/code><\/pre>\n<p>Esse campo cont\u00e9m o HTML bruto do artigo. Voc\u00ea pode renderiz\u00e1-lo diretamente usando a propriedade <code>dangerouslySetInnerHTML<\/code> desta forma, <code>&lt;div dangerouslySetInnerHTML={{ __html: &lt;raw_html_string&gt; }} \/&gt;<\/code>.<\/li>\n<li>Em seguida, voc\u00ea pode processar os dados analisando os links internos e redimensionando as imagens. Instale o pacote <code>html-react-parser<\/code> para simplificar o processo de an\u00e1lise de tags:\n<pre><code class=\"language-bash\">npm install html-react-parser --save<\/code><\/pre>\n<\/li>\n<li>Adicione o seguinte c\u00f3digo ao arquivo <strong>blog\/[id]\/page.js<\/strong>:\n<pre><code class=\"language-javascript\">import parse, { domToReact } from \"html-react-parser\";\n\n\/*\n * We use a regular expression (pattern) to match the specific URL you want to replace.\n * The (\\d+) part captures the numeric ID after ?p=.\n * Then, we use the replacement string 'data-internal-link=\"true\" href=\"\/blog\/$1\"',\n * where $1 is a placeholder for the captured ID.\n *\/\nexport function fixInternalLinks(html_string) {\n  const pattern = \/href=\"https:\\\/\\\/yoursite.com\\\/\\?p=(\\d+)\"\/g;\n  const replacement = 'data-internal-link=\"true\" href=\"\/blog\/$1\"';\n\n  return html_string.replace(pattern, replacement);\n}\n\nexport function parseHtml(html) {\n  \/\/ Replace 2+ sequences of '\\n' with a single '&lt;br \/&gt;' tag\n  const _content = html.replace(\/\\n{2,}\/g, '&lt;br \/&gt;');\n  const content = fixInternalLinks(_content);\n\n  const options = {\n    replace: ({ name, attribs, children }) =&gt; {\n      \/\/ Convert internal links to Next.js Link components.\n      const isInternalLink =\n        name === \"a\" && attribs[\"data-internal-link\"] === \"true\";\n\n      if (isInternalLink) {\n        return (\n          &lt;Link href={attribs.href} {...attribs}&gt;\n            {domToReact(children, options)}\n          &lt;\/Link&gt;\n    \t  );\n      } else if (name === \"img\") {\n        attribs[\"width\"] = \"250\";\n        attribs[\"height\"] = \"150\";\n        return (\n          &lt;img {...attribs}\/&gt;\n        );\n      }\n    },\n  };\n\n  return parse(content, options);\n}<\/code><\/pre>\n<p>A fun\u00e7\u00e3o <code>fixInternalLinks()<\/code> usa uma express\u00e3o regular para encontrar links para artigos em seu site WordPress a partir da string de caracteres HTML. No HTML bruto, voc\u00ea pode ver que o artigo cont\u00e9m uma tag <code>List<\/code> com links para outros artigos em seu site, substituindo esses links por links internos para rotas em seu site est\u00e1tico.<\/p>\n<p>A fun\u00e7\u00e3o <code>parseHTML()<\/code> localiza v\u00e1rias sequ\u00eancias de novas linhas em excesso, <code>n<\/code>e as substitui por tags <code>&lt;br \/&gt;<\/code>. Ela tamb\u00e9m localiza links internos e converte as tags de \u00e2ncora em tags de link. Em seguida, essa fun\u00e7\u00e3o redimensiona as imagens usando atributos de tag.<\/li>\n<li>Para gerar a interface do usu\u00e1rio principal para cada rota din\u00e2mica, adicione o seguinte c\u00f3digo:\n<pre><code class=\"language-javascript\">export default async function Post({ params }) {\n  const post = await getPost(params.id);\n\n  const content = parseHtml(post.content.rendered);\n\n  return (\n    &lt;&gt;\n      &lt;h1&gt;\n        {post.title.rendered}\n      &lt;\/h1&gt;\n \t \n      &lt;div&gt;{content}&lt;\/div&gt;\n    &lt;\/&gt;\n  );\n}<\/code><\/pre>\n<p>Depois de analisar o HTML bruto dos dados do Gutenberg, o c\u00f3digo retorna JSX representando a interface do usu\u00e1rio (UI) formatada da p\u00e1gina.<\/li>\n<\/ol>\n<p>Por fim, quando voc\u00ea executar seu projeto, a p\u00e1gina inicial exibir\u00e1 uma lista de artigos no seu WordPress. Al\u00e9m disso, ao clicar em artigos individuais, voc\u00ea ver\u00e1 o conte\u00fado analisado do Gutenberg renderizado corretamente.<\/p>\n<h2>Implante seu site est\u00e1tico Next.js na Kinsta<\/h2>\n<p>Ao combinar o WordPress headless com frameworks de ponta como o Next.js, encontrar uma solu\u00e7\u00e3o de implanta\u00e7\u00e3o econ\u00f4mica se torna essencial, especialmente quando voc\u00ea usa uma <a href=\"https:\/\/kinsta.com\/pt\/hospedagem-wordpress\/\">hospedagem de sites WordPress\u00a0poderosa<\/a> como a da Kinsta para o seu site WordPress. O servi\u00e7o de <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">Hospedagem de Site Est\u00e1tico<\/a> da Kinsta oferece uma maneira simples e econ\u00f4mica de colocar seu site on-line.<\/p>\n<p>A Kinsta permite que voc\u00ea hospede <a href=\"https:\/\/docs.sevalla.com\/static-sites\/overview\">at\u00e9 100 sites est\u00e1ticos<\/a> <strong>gratuitamente<\/strong>. Primeiro, envie seu c\u00f3digo para um provedor Git preferido (<a href=\"https:\/\/docs.sevalla.com\/applications\/git\/bitbucket#grant-access-to-the-kinsta-bitbucket-application\">Bitbucket<\/a>, <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/github#authenticate-and-authorize\">GitHub<\/a> ou <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/gitlab#authorize-the-kinsta-gitlab-application\">GitLab<\/a>). Quando seu reposit\u00f3rio estiver pronto, siga estas etapas para implantar seu site est\u00e1tico na Kinsta:<\/p>\n<ol start=\"1\">\n<li>Fa\u00e7a login ou crie uma conta para visualizar seu painel <a href=\"https:\/\/my.kinsta.com\/?lang=pt\" target=\"_blank\" rel=\"noopener noreferrer\">MyKinsta<\/a>.<\/li>\n<li>Autorize a Kinsta com seu provedor Git.<\/li>\n<li>Clique em <strong>Sites est\u00e1ticos<\/strong> na barra lateral esquerda e, em seguida, clique em <strong>Adicionar site<\/strong>.<\/li>\n<li>Selecione o reposit\u00f3rio e a branch a partir dos quais voc\u00ea deseja implantar.<\/li>\n<li>Atribua um nome exclusivo ao seu site.<\/li>\n<li>Adicione as configura\u00e7\u00f5es de build no seguinte formato:\n<ul>\n<li><b>Comando build<\/b>: <code>npm run build<\/code><\/li>\n<li><strong>Vers\u00e3o do node<\/strong>: <code>18.16.0<\/code><\/li>\n<li><strong>Diret\u00f3rio de publica\u00e7\u00e3o<\/strong>: <code>out<\/code><\/li>\n<\/ul>\n<\/li>\n<li>Por fim, clique em <strong>Criar site<\/strong>.<\/li>\n<\/ol>\n<p>E \u00e9 isso! Agora voc\u00ea tem um site implantado em poucos segundos. Voc\u00ea receber\u00e1 um link para acessar a vers\u00e3o implantada do seu site. Posteriormente, voc\u00ea poder\u00e1 adicionar seu <a href=\"https:\/\/docs.sevalla.com\/applications\/domains\">dom\u00ednio personalizado<\/a> e o <a href=\"https:\/\/docs.sevalla.com\/applications\/domains#install-a-custom-ssl-certificate\">certificado SSL<\/a>, se desejar.<\/p>\n<p>Como alternativa \u00e0 hospedagem de site est\u00e1tico, voc\u00ea pode optar por implantar seu site est\u00e1tico com o servi\u00e7o de <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Hospedagem de Aplicativos<\/a> da Kinsta, que oferece maior flexibilidade de hospedagem, uma gama mais ampla de benef\u00edcios e acesso a recursos mais robustos &#8211; como escalabilidade, implanta\u00e7\u00e3o personalizada usando um Dockerfile e <a href=\"https:\/\/docs.sevalla.com\/applications\/analytics\">an\u00e1lises abrangentes<\/a> que englobam dados hist\u00f3ricos e em tempo real. Voc\u00ea tamb\u00e9m n\u00e3o precisa configurar seu projeto Next.js para renderiza\u00e7\u00e3o est\u00e1tica.<\/p>\n<h2>Resumo<\/h2>\n<p>Este guia explicou como integrar e analisar o conte\u00fado do bloco do Gutenberg de forma eficaz como HTML por meio da API do WordPress. Isso torna poss\u00edvel a renderiza\u00e7\u00e3o de qualquer tipo de conte\u00fado em seu frontend quando voc\u00ea usa o WordPress headless.<\/p>\n<p>Voc\u00ea pode hospedar seu WordPress headless em nosso servi\u00e7o de hospedagem gerenciada de sites WordPress e implantar seu site est\u00e1tico em nosso servi\u00e7o de hospedagem de site est\u00e1tico. Isso significa que tudo sobre seu site est\u00e1 em um \u00fanico painel: MyKinsta.<\/p>\n<p>Ao optar pela Kinsta, voc\u00ea ganha um provedor de hospedagem comprometido com o desempenho e a escalabilidade ideais do seu site, ao mesmo tempo que refor\u00e7a a seguran\u00e7a com medidas avan\u00e7adas. Experimente a Kinsta hoje mesmo! <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">Conhe\u00e7a a Kinsta hoje mesmo<\/a>!<\/p>\n<p><em>O que voc\u00ea acha do WordPress headless e sua renderiza\u00e7\u00e3o? Voc\u00ea tem uma maneira melhor de integrar os blocos do Gutenberg? Compartilhe suas ideias na se\u00e7\u00e3o de coment\u00e1rios!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>O Gutenberg \u00e9 o editor padr\u00e3o do WordPress. O editor permite que voc\u00ea crie e estilize o conte\u00fado usando blocos discretos para texto, imagens, v\u00eddeo e &#8230;<\/p>\n","protected":false},"author":199,"featured_media":67828,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[977,971],"class_list":["post-67827","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-frameworks-javascript","topic-headless-cms"],"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 Analisar o Conte\u00fado do Gutenberg para o WordPress Headless - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Saiba como integrar o conte\u00fado analisado do Gutenberg como HTML em seu site com este guia detalhado. Ele mostra como usar o conte\u00fado em Next.js.\" \/>\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\/wordpress-headless-gutenberg\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Analisar o Conte\u00fado do Gutenberg para o WordPress Headless\" \/>\n<meta property=\"og:description\" content=\"Saiba como integrar o conte\u00fado analisado do Gutenberg como HTML em seu site com este guia detalhado. Ele mostra como usar o conte\u00fado em Next.js.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-headless-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=\"2024-04-05T07:33:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-08T07:12:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg\" \/>\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=\"Jeremy Holcombe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Saiba como integrar o conte\u00fado analisado do Gutenberg como HTML em seu site com este guia detalhado. Ele mostra como usar o conte\u00fado em Next.js.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-headless-gutenberg\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-headless-gutenberg\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"Como Analisar o Conte\u00fado do Gutenberg para o WordPress Headless\",\"datePublished\":\"2024-04-05T07:33:16+00:00\",\"dateModified\":\"2024-04-08T07:12:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-headless-gutenberg\/\"},\"wordCount\":1630,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-headless-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/wordpress-headless-gutenberg\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-headless-gutenberg\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-headless-gutenberg\/\",\"name\":\"Como Analisar o Conte\u00fado do Gutenberg para o WordPress Headless - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-headless-gutenberg\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-headless-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg\",\"datePublished\":\"2024-04-05T07:33:16+00:00\",\"dateModified\":\"2024-04-08T07:12:27+00:00\",\"description\":\"Saiba como integrar o conte\u00fado analisado do Gutenberg como HTML em seu site com este guia detalhado. Ele mostra como usar o conte\u00fado em Next.js.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-headless-gutenberg\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/wordpress-headless-gutenberg\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-headless-gutenberg\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-headless-gutenberg\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Headless CMS\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/headless-cms\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Como Analisar o Conte\u00fado do Gutenberg para o WordPress Headless\"}]},{\"@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\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"caption\":\"Jeremy Holcombe\"},\"description\":\"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/jeremyholcombe\/\"],\"url\":\"https:\/\/kinsta.com\/pt\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Como Analisar o Conte\u00fado do Gutenberg para o WordPress Headless - Kinsta\u00ae","description":"Saiba como integrar o conte\u00fado analisado do Gutenberg como HTML em seu site com este guia detalhado. Ele mostra como usar o conte\u00fado em Next.js.","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\/wordpress-headless-gutenberg\/","og_locale":"pt_PT","og_type":"article","og_title":"Como Analisar o Conte\u00fado do Gutenberg para o WordPress Headless","og_description":"Saiba como integrar o conte\u00fado analisado do Gutenberg como HTML em seu site com este guia detalhado. Ele mostra como usar o conte\u00fado em Next.js.","og_url":"https:\/\/kinsta.com\/pt\/blog\/wordpress-headless-gutenberg\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2024-04-05T07:33:16+00:00","article_modified_time":"2024-04-08T07:12:27+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg","type":"image\/jpeg"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Saiba como integrar o conte\u00fado analisado do Gutenberg como HTML em seu site com este guia detalhado. Ele mostra como usar o conte\u00fado em Next.js.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg","twitter_creator":"@kinsta_pt","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Jeremy Holcombe","Tempo estimado de leitura":"11 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-headless-gutenberg\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-headless-gutenberg\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"Como Analisar o Conte\u00fado do Gutenberg para o WordPress Headless","datePublished":"2024-04-05T07:33:16+00:00","dateModified":"2024-04-08T07:12:27+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-headless-gutenberg\/"},"wordCount":1630,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-headless-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/wordpress-headless-gutenberg\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-headless-gutenberg\/","url":"https:\/\/kinsta.com\/pt\/blog\/wordpress-headless-gutenberg\/","name":"Como Analisar o Conte\u00fado do Gutenberg para o WordPress Headless - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-headless-gutenberg\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-headless-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg","datePublished":"2024-04-05T07:33:16+00:00","dateModified":"2024-04-08T07:12:27+00:00","description":"Saiba como integrar o conte\u00fado analisado do Gutenberg como HTML em seu site com este guia detalhado. Ele mostra como usar o conte\u00fado em Next.js.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-headless-gutenberg\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/wordpress-headless-gutenberg\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-headless-gutenberg\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-headless-gutenberg\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Headless CMS","item":"https:\/\/kinsta.com\/pt\/topicos\/headless-cms\/"},{"@type":"ListItem","position":3,"name":"Como Analisar o Conte\u00fado do Gutenberg para o WordPress Headless"}]},{"@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\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","caption":"Jeremy Holcombe"},"description":"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.","sameAs":["https:\/\/www.linkedin.com\/in\/jeremyholcombe\/"],"url":"https:\/\/kinsta.com\/pt\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/67827","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\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=67827"}],"version-history":[{"count":9,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/67827\/revisions"}],"predecessor-version":[{"id":67888,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/67827\/revisions\/67888"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67827\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67827\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67827\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67827\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67827\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67827\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67827\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67827\/translations\/es"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/67827\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/67828"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=67827"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=67827"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=67827"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}