{"id":74425,"date":"2024-04-02T11:33:20","date_gmt":"2024-04-02T09:33:20","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=74425&#038;preview=true&#038;preview_id=74425"},"modified":"2024-04-05T13:27:15","modified_gmt":"2024-04-05T11:27:15","slug":"wordpress-headless-gutenberg","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/wordpress-headless-gutenberg\/","title":{"rendered":"C\u00f3mo procesar el contenido de Gutenberg para WordPress headless"},"content":{"rendered":"<p>Gutenberg es el editor predeterminado de <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-headless-next-js\/\">WordPress<\/a>. El editor te permite crear y dar estilo al contenido utilizando bloques distintos para texto, im\u00e1genes, v\u00eddeo y otros elementos del sitio a trav\u00e9s de una interfaz de arrastrar y soltar. Este enfoque mejora la flexibilidad y las capacidades de dise\u00f1o de WordPress.<\/p>\n<p>Esta gu\u00eda explica c\u00f3mo procesar el contenido de Gutenberg como <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-el-html\/\">HTML<\/a> utilizando la <a href=\"https:\/\/kinsta.com\/es\/blog\/rest-api-de-wordpress\/\">API REST de WordPress<\/a> en un sitio est\u00e1tico <a href=\"https:\/\/kinsta.com\/es\/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>Requisitos previos<\/h2>\n<p>Para seguir adelante, necesitas<\/p>\n<ul>\n<li>Node.js y npm <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-npm\/\">(Node Package Manager<\/a>) o yarn instalados en tu ordenador<\/li>\n<li>Conocimientos b\u00e1sicos de <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> y <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-react-js\/\">React<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/es\/docs\/alojamiento-wordpress\/como-empezar-con-wordpress\/sitio-nuevo\/\">Sitio de WordPress<\/a> con algunas entradas publicadas<\/li>\n<\/ul>\n<h2>Recuperar contenido de Gutenberg mediante una API REST<\/h2>\n<p>Para interactuar con tu sitio de WordPress mediante programaci\u00f3n y recuperar contenido estructurado en <a href=\"https:\/\/kinsta.com\/courses\/gutenberg-block-development\/history-of-gutenberg-block-editor\/\">bloques de Gutenberg<\/a>, utiliza la API REST de WordPress o el <a href=\"https:\/\/kinsta.com\/es\/blog\/wpgraphql-y-wp-rest-api\/\">plugin WPGraphQL<\/a>. Estas herramientas te permiten recuperar el contenido de WordPress en formato JSON.<\/p>\n<p>Para habilitar el acceso a datos JSON a trav\u00e9s de la API REST, ajusta la configuraci\u00f3n de los enlaces permanentes de WordPress para que no sea \u00abSimple\u00bb. Esto permite el acceso a la API a trav\u00e9s de una URL estructurada, como se indica a continuaci\u00f3n:<\/p>\n<pre><code class=\"language-bash\">https:\/\/yoursite.com\/wp-json\/wp\/v2<\/code><\/pre>\n<p>Realizando peticiones API a esta URL, puedes recuperar mediante programaci\u00f3n diversa informaci\u00f3n y realizar operaciones en tu sitio de WordPress. Por ejemplo, puedes obtener una lista de entradas enviando una solicitud GET a:<\/p>\n<pre><code class=\"language-bash\">https:\/\/yoursite.com\/wp-json\/wp\/v2\/posts<\/code><\/pre>\n<p>Esto devolver\u00e1 un objeto JSON que contiene informaci\u00f3n sobre las entradas de tu sitio de WordPress, incluyendo t\u00edtulos, contenido, detalles del autor, etc.<\/p>\n<h2>Procesar bloques Gutenberg como HTML<\/h2>\n<p>Al recuperar entradas de un sitio de WordPress que utiliza el <a href=\"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/\">editor de Gutenberg<\/a>, el contenido almacenado en la base de datos puede contener una mezcla de metadatos HTML y JSON para describir varios tipos de bloques, como citas y galer\u00edas. Por ejemplo:<\/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;\n<!-- \/wp:gallery --><\/code><\/pre>\n<p>Este fragmento ilustra dos bloques Gutenberg: una Cita y una Galer\u00eda. Cada uno est\u00e1 enriquecido con metadatos JSON encapsulados dentro de comentarios HTML. Los metadatos definen atributos como nombres de clases, estilos y otras configuraciones relevantes para la presentaci\u00f3n del bloque.<\/p>\n<p>Cuando obtienes estos bloques a trav\u00e9s de la API REST de WordPress o WPGraphQL, WordPress los procesa, transformando la combinaci\u00f3n de metadatos HTML y JSON en elementos HTML completamente renderizados que puedes incorporar directamente a las p\u00e1ginas web. El HTML transformado para los bloques anteriores tendr\u00eda el siguiente aspecto:<\/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 los desarrolladores que construyen aplicaciones desacopladas o headless utilizando frameworks JavaScript como Next.js, esto presenta un m\u00e9todo directo para mostrar contenido inyectando directamente el HTML en la p\u00e1gina utilizando la propiedad <code>dangerouslySetInnerHTML<\/code> para renderizar el marcado.<\/p>\n<pre><code class=\"language-html\">&lt;div dangerouslySetInnerHTML={{ __html: &lt;raw_html_string&gt; }} \/&gt;<\/code><\/pre>\n<p>Adem\u00e1s, puede que necesites realizar un formateo adicional para elementos como enlaces y manejar el exceso de caracteres de nueva l\u00ednea (<code> \\n <\/code>), que esta gu\u00eda explica m\u00e1s adelante.<\/p>\n<h2>Procesar el contenido de los bloques de Gutenberg en el sitio est\u00e1tico Next.js<\/h2>\n<p>En esta secci\u00f3n, vamos a recuperar el contenido de WordPress en un proyecto Next.js y, a continuaci\u00f3n, procesaremos los bloques Gutenberg como HTML.<\/p>\n<ol start=\"1\">\n<li>Empieza configurando una funci\u00f3n para obtener entradas de tu sitio de WordPress. Abre el archivo <strong>src\/page.js<\/strong> de tu proyecto y sustituye su contenido por el siguiente fragmento 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>Esta funci\u00f3n as\u00edncrona realiza una solicitud a la API REST de WordPress. Obtiene todas las entradas disponibles en tu sitio y las devuelve como un array.<\/li>\n<li>A continuaci\u00f3n, vamos a utilizar las entradas obtenidas dentro de un simple componente de p\u00e1gina Next.js registrando las entradas en la consola y mostrando un saludo b\u00e1sico:\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>Cuando ejecutas tu proyecto utilizando <code>npm run dev<\/code>, muestra el mensaje \u00abHello World\u00bb y registra las entradas obtenidas en el 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>Los objetos JSON que representan los datos individuales de las entradas de Gutenberg incluyen varios campos, entre los cuales los campos de contenido y extracto se devuelven como bloques de Gutenberg procesados como cadenas HTML.<\/li>\n<li>Para representar correctamente este contenido HTML en Next.js, empleamos la propiedad <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>En este componente actualizado, iteramos sobre el array de entradas obtenidas para generar una lista de extractos de entradas. Cada extracto se envuelve en un componente <code>Link<\/code> para la navegaci\u00f3n, mostrando el t\u00edtulo de la entrada y un fragmento de su contenido.<\/p>\n<p>La propiedad <code>dangerouslySetInnerHTML<\/code> se utiliza para analizar y mostrar el contenido HTML del campo <code>excerpt.rendered<\/code>.<\/p>\n<\/li>\n<li>A continuaci\u00f3n, crea un archivo <strong>blog\/[id]\/page.js<\/strong> dentro del directorio de la<strong> aplicaci\u00f3n<\/strong>. Las carpetas se utilizan para definir rutas. As\u00ed, al crear una carpeta <strong>blog<\/strong>, defines la ruta <strong>blog<\/strong>. Combina esto con el <a href=\"https:\/\/kinsta.com\/es\/blog\/next-js\/#dynamic-routes\">enrutamiento din\u00e1mico<\/a> para generar rutas para cada entrada.<\/li>\n<li>Cada entrada tiene un ID. Utiliza este ID para generar su ruta \u00fanica, <code>\/blog\/{post_id}<\/code>en tu aplicaci\u00f3n. A\u00f1ade el siguiente 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>La funci\u00f3n <code>generateStaticParams()<\/code> genera est\u00e1ticamente rutas en tiempo de compilaci\u00f3n bas\u00e1ndose en el ID correspondiente devuelto en cada entrada. La funci\u00f3n <code>getPost()<\/code> obtiene los datos de Gutenberg de la API REST para la entrada con el ID introducido.<\/p>\n<p>En una secci\u00f3n anterior se ha mostrado un ejemplo de datos de Gutenberg analizados y devueltos por la API REST para una entrada. Por ahora, s\u00f3lo nos interesa el 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>Este campo contiene el HTML sin procesar de la entrada. Puede renderizarse directamente utilizando la propiedad <code>dangerouslySetInnerHTML<\/code> de esta forma, <code>&lt;div dangerouslySetInnerHTML={{ __html: &lt;raw_html_string&gt; }} \/&gt;<\/code>.<\/li>\n<li>A continuaci\u00f3n, puedes procesar los datos analizando los enlaces internos y redimensionando las im\u00e1genes. Instala el paquete <code>html-react-parser<\/code> para simplificar el proceso de procesamiento de etiquetas:\n<pre><code class=\"language-bash\">npm install html-react-parser --save<\/code><\/pre>\n<\/li>\n<li>A\u00f1ade el siguiente c\u00f3digo al archivo <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>La funci\u00f3n <code>fixInternalLinks()<\/code> utiliza una expresi\u00f3n regular para encontrar enlaces a entradas de tu sitio de WordPress a partir de la cadena HTML. En el HTML sin procesar, puedes ver que la entrada contiene una etiqueta <code>List<\/code> con enlaces a otras entradas de tu sitio, sustituyendo esos enlaces por enlaces internos a rutas de tu sitio est\u00e1tico.<\/p>\n<p>La funci\u00f3n <code>parseHTML()<\/code> encuentra m\u00faltiples secuencias de exceso de nuevas l\u00edneas, <code>n<\/code> y las sustituye por etiquetas <code>&lt;br \/&gt;<\/code>. Tambi\u00e9n encuentra enlaces internos y convierte las etiquetas de anclaje en etiquetas de enlace. A continuaci\u00f3n, esta funci\u00f3n redimensiona las im\u00e1genes utilizando los atributos de las etiquetas.<\/p>\n<\/li>\n<li>Para generar la interfaz de usuario principal de cada ruta din\u00e1mica, a\u00f1ade el siguiente 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>Tras procesar el HTML sin procesar de los datos de Gutenberg, el c\u00f3digo devuelve JSX que representa la interfaz de usuario formateada de la p\u00e1gina.<\/li>\n<\/ol>\n<p>Finalmente, cuando ejecutes tu proyecto, la p\u00e1gina de inicio mostrar\u00e1 una lista de entradas de tu WordPress. Adem\u00e1s, cuando hagas clic en entradas individuales, ver\u00e1s los contenidos de Gutenberg analizados correctamente.<\/p>\n<h2>Despliega tu sitio est\u00e1tico Next.js en Kinsta<\/h2>\n<p>Cuando se combina WordPress headless con frameworks de \u00faltima generaci\u00f3n como Next.js, resulta esencial encontrar una soluci\u00f3n de despliegue rentable, especialmente si utilizas un <a href=\"https:\/\/kinsta.com\/es\/wordpress-hosting\/\">potente Alojamiento de WordPress<\/a> como el de Kinsta para tu sitio de WordPress. El servicio de <a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">Alojamiento de Sitios Est\u00e1ticos<\/a> de Kinsta ofrece una forma sencilla y asequible de publicar tu sitio online.<\/p>\n<p>Kinsta te permite <a href=\"https:\/\/docs.sevalla.com\/static-sites\/overview\">alojar hasta 100 sitios web est\u00e1ticos<\/a> de forma<strong> gratuita<\/strong>. En primer lugar, env\u00eda tu c\u00f3digo a tu proveedor 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> o <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/gitlab#authorize-the-kinsta-gitlab-application\">GitLab<\/a>). Una vez que tu repositorio est\u00e9 listo, sigue estos pasos para desplegar tu sitio est\u00e1tico en Kinsta:<\/p>\n<ol start=\"1\">\n<li>Inicia sesi\u00f3n o crea una cuenta para ver tu panel <a href=\"https:\/\/my.kinsta.com\/?lang=es\" target=\"_blank\" rel=\"noopener noreferrer\">MyKinsta<\/a>.<\/li>\n<li>Autoriza a Kinsta con tu proveedor de Git.<\/li>\n<li>Haz clic en <strong>Sitios Est\u00e1ticos<\/strong> en la barra lateral izquierda, y luego en <strong>A\u00f1adir sitio<\/strong>.<\/li>\n<li>Selecciona el repositorio y la rama desde la que deseas desplegar.<\/li>\n<li>Asigna un nombre \u00fanico a tu sitio.<\/li>\n<li>A\u00f1ade la configuraci\u00f3n de construcci\u00f3n en el siguiente formato:\n<ul>\n<li><strong>Comando de construcci\u00f3n<\/strong>: <code>npm run build<\/code><\/li>\n<li><strong>Versi\u00f3n de Node<\/strong>: <code>18.16.0<\/code><\/li>\n<li><strong>Directorio de publicaci\u00f3n<\/strong>: <code>out<\/code><\/li>\n<\/ul>\n<\/li>\n<li>Por \u00faltimo, haz clic en <strong>Crear sitio<\/strong>.<\/li>\n<\/ol>\n<p>\u00a1Y ya est\u00e1! En pocos segundos tendr\u00e1s un sitio desplegado. Se proporciona un enlace para acceder a la versi\u00f3n desplegada de tu sitio. Si lo deseas, puedes a\u00f1adir m\u00e1s adelante tu <a href=\"https:\/\/docs.sevalla.com\/applications\/domains\">dominio personalizado<\/a> y tu <a href=\"https:\/\/docs.sevalla.com\/applications\/domains#install-a-custom-ssl-certificate\">certificado SSL<\/a>.<\/p>\n<p>Como alternativa al alojamiento de sitios est\u00e1ticos, puedes optar por desplegar tu sitio est\u00e1tico con el servicio de <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Alojamiento de Aplicaciones<\/a> de Kinsta, que proporciona una mayor flexibilidad de alojamiento, una gama m\u00e1s amplia de ventajas y acceso a funciones m\u00e1s robustas, como escalabilidad, despliegue personalizado mediante un Dockerfile y <a href=\"https:\/\/docs.sevalla.com\/applications\/analytics\">anal\u00edticas exhaustivas<\/a> que abarcan datos hist\u00f3ricos y en tiempo real. Tampoco necesitas configurar tu proyecto Next.js para la renderizaci\u00f3n est\u00e1tica.<\/p>\n<h2>Resumen<\/h2>\n<p>Esta gu\u00eda ha explicado c\u00f3mo integrar y procesar el contenido de los bloques de Gutenberg eficazmente como HTML a trav\u00e9s de la API de WordPress. Esto hace posible renderizar cualquier tipo de contenido en tu front-end cuando utilizas WordPress headless.<\/p>\n<p>Puedes alojar tu WordPress headless en nuestro servicio de Alojamiento Administrado de WordPress y desplegar tu sitio est\u00e1tico en nuestro servicio de Alojamiento de Sitios Est\u00e1ticos. Esto significa que todo lo relacionado con tu sitio est\u00e1 en un \u00fanico panel de control: MyKinsta.<\/p>\n<p>Al elegir Kinsta, te beneficias de un proveedor de alojamiento que prioriza el rendimiento y la escalabilidad \u00f3ptimos del sitio, a la vez que fortalece firmemente los sitios web con medidas de seguridad avanzadas. \u00a1<a href=\"https:\/\/sevalla.com\/static-site-hosting\/\">Prueba Kinsta hoy mismo<\/a>!<\/p>\n<p><em>\u00bfQu\u00e9 opinas sobre WordPress headless y su renderizaci\u00f3n? \u00bfTienes una forma mejor de integrar los bloques Gutenberg? \u00a1Comparte tus ideas en la secci\u00f3n de comentarios!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Gutenberg es el editor predeterminado de WordPress. El editor te permite crear y dar estilo al contenido utilizando bloques distintos para texto, im\u00e1genes, v\u00eddeo y otros &#8230;<\/p>\n","protected":false},"author":199,"featured_media":74426,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1296,1290],"class_list":["post-74425","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>C\u00f3mo procesar el contenido de Gutenberg para WordPress headless - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Aprende a integrar el contenido procesado por Gutenberg como HTML en tu sitio con esta gu\u00eda detallada. Muestra c\u00f3mo utilizar el contenido en 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\/es\/blog\/wordpress-headless-gutenberg\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo procesar el contenido de Gutenberg para WordPress headless\" \/>\n<meta property=\"og:description\" content=\"Aprende a integrar el contenido procesado por Gutenberg como HTML en tu sitio con esta gu\u00eda detallada. Muestra c\u00f3mo utilizar el contenido en Next.js.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/wordpress-headless-gutenberg\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-02T09:33:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-05T11:27:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/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=\"Aprende a integrar el contenido procesado por Gutenberg como HTML en tu sitio con esta gu\u00eda detallada. Muestra c\u00f3mo utilizar el contenido en Next.js.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\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\/es\/blog\/wordpress-headless-gutenberg\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/wordpress-headless-gutenberg\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"C\u00f3mo procesar el contenido de Gutenberg para WordPress headless\",\"datePublished\":\"2024-04-02T09:33:20+00:00\",\"dateModified\":\"2024-04-05T11:27:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/wordpress-headless-gutenberg\/\"},\"wordCount\":1616,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/wordpress-headless-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/wordpress-headless-gutenberg\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/wordpress-headless-gutenberg\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/wordpress-headless-gutenberg\/\",\"name\":\"C\u00f3mo procesar el contenido de Gutenberg para WordPress headless - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/wordpress-headless-gutenberg\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/wordpress-headless-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg\",\"datePublished\":\"2024-04-02T09:33:20+00:00\",\"dateModified\":\"2024-04-05T11:27:15+00:00\",\"description\":\"Aprende a integrar el contenido procesado por Gutenberg como HTML en tu sitio con esta gu\u00eda detallada. Muestra c\u00f3mo utilizar el contenido en Next.js.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/wordpress-headless-gutenberg\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/wordpress-headless-gutenberg\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/wordpress-headless-gutenberg\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/wordpress-headless-gutenberg\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Headless CMS\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/headless-cms\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"C\u00f3mo procesar el contenido de Gutenberg para WordPress headless\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"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\/es\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/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\/es\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo procesar el contenido de Gutenberg para WordPress headless - Kinsta\u00ae","description":"Aprende a integrar el contenido procesado por Gutenberg como HTML en tu sitio con esta gu\u00eda detallada. Muestra c\u00f3mo utilizar el contenido en 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\/es\/blog\/wordpress-headless-gutenberg\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo procesar el contenido de Gutenberg para WordPress headless","og_description":"Aprende a integrar el contenido procesado por Gutenberg como HTML en tu sitio con esta gu\u00eda detallada. Muestra c\u00f3mo utilizar el contenido en Next.js.","og_url":"https:\/\/kinsta.com\/es\/blog\/wordpress-headless-gutenberg\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2024-04-02T09:33:20+00:00","article_modified_time":"2024-04-05T11:27:15+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg","type":"image\/jpeg"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Aprende a integrar el contenido procesado por Gutenberg como HTML en tu sitio con esta gu\u00eda detallada. Muestra c\u00f3mo utilizar el contenido en Next.js.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg","twitter_creator":"@Kinsta_ES","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Jeremy Holcombe","Tiempo de lectura":"11 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/wordpress-headless-gutenberg\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/wordpress-headless-gutenberg\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"C\u00f3mo procesar el contenido de Gutenberg para WordPress headless","datePublished":"2024-04-02T09:33:20+00:00","dateModified":"2024-04-05T11:27:15+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/wordpress-headless-gutenberg\/"},"wordCount":1616,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/wordpress-headless-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg","inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/wordpress-headless-gutenberg\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/wordpress-headless-gutenberg\/","url":"https:\/\/kinsta.com\/es\/blog\/wordpress-headless-gutenberg\/","name":"C\u00f3mo procesar el contenido de Gutenberg para WordPress headless - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/wordpress-headless-gutenberg\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/wordpress-headless-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg","datePublished":"2024-04-02T09:33:20+00:00","dateModified":"2024-04-05T11:27:15+00:00","description":"Aprende a integrar el contenido procesado por Gutenberg como HTML en tu sitio con esta gu\u00eda detallada. Muestra c\u00f3mo utilizar el contenido en Next.js.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/wordpress-headless-gutenberg\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/wordpress-headless-gutenberg\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/wordpress-headless-gutenberg\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/04\/wp-parsing-gutenberg-content-for-headless-wordpress.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/wordpress-headless-gutenberg\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Headless CMS","item":"https:\/\/kinsta.com\/es\/secciones\/headless-cms\/"},{"@type":"ListItem","position":3,"name":"C\u00f3mo procesar el contenido de Gutenberg para WordPress headless"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","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\/es\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/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\/es\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/74425","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=74425"}],"version-history":[{"count":9,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/74425\/revisions"}],"predecessor-version":[{"id":74481,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/74425\/revisions\/74481"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74425\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74425\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74425\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74425\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74425\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74425\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74425\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74425\/translations\/es"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/74425\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/74426"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=74425"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=74425"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=74425"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}