{"id":76658,"date":"2024-10-02T16:27:26","date_gmt":"2024-10-02T14:27:26","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=76658&#038;preview=true&#038;preview_id=76658"},"modified":"2024-10-03T09:49:35","modified_gmt":"2024-10-03T07:49:35","slug":"propiedad-blocks-theme-json","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/propiedad-blocks-theme-json\/","title":{"rendered":"Lo que los desarrolladores de WordPress deben saber sobre la propiedad blocks en theme.json"},"content":{"rendered":"<p>La introducci\u00f3n de la <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-edicion-sitio-completa\/\">edici\u00f3n completa del sitio (FSE)<\/a> en WordPress destaca la creciente importancia del archivo <code>theme.json<\/code>. Ahora hay toda una nueva jerarqu\u00eda y estructura que comprender, adem\u00e1s de las distintas propiedades que te ayudar\u00e1n a crear tus dise\u00f1os. En particular, la propiedad <code>blocks<\/code> de <code>theme.json<\/code> es esencial si quieres crear temas de WordPress modernos y flexibles con Bloques \u00fanicos.<\/p>\n<p>En esta gu\u00eda, exploramos los entresijos de la propiedad <code>blocks<\/code> en <code>theme.json<\/code> para que puedas trabajar con Bloques, dise\u00f1arlos y darles estilo para crear experiencias de WordPress m\u00e1s din\u00e1micas y personalizables.<\/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>Comprender la propiedad blocks en theme.json<\/h2>\n<p>Antes de sumergirnos en los entresijos de la propiedad <code>blocks<\/code>, entendamos primero su papel dentro de <code>theme.json<\/code> y del desarrollo de temas de WordPress.<\/p>\n<figure id=\"attachment_184921\" aria-describedby=\"caption-attachment-184921\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184921 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/theme-json-file.png\" alt=\"Una ventana del editor de c\u00f3digo que muestra una parte del archivo theme.json de un tema de WordPress. La estructura JSON define plantillas personalizadas para las p\u00e1ginas \u00aben blanco\u00bb, \u00abblog-alternativo\u00bb y \u00ab404\u00bb. El editor tiene un tema oscuro con resaltado de sintaxis, y el fondo muestra un paisaje forestal cubierto de niebla.\" width=\"1200\" height=\"970\"><figcaption id=\"caption-attachment-184921\" class=\"wp-caption-text\">Archivo <strong>theme.json<\/strong> de Twenty Twenty-Three.<\/figcaption><\/figure>\n<p>En primer lugar, <code>theme.json<\/code> es el <a href=\"https:\/\/kinsta.com\/es\/blog\/theme-json\/\">archivo de configuraci\u00f3n<\/a> que te permite definir estilos y ajustes globales para tus temas. Este \u00abeje central\u00bb te permite controlar varios aspectos de la apariencia y el comportamiento de tu tema, como la tipograf\u00eda, los colores y las opciones de dise\u00f1o. Sin embargo, puede hacer m\u00e1s que simplemente darte ajustes program\u00e1ticos est\u00e9ticos.<\/p>\n<p>La propiedad <code>blocks<\/code> te permite aplicar un control granular sobre tipos de Bloques individuales en lugar de sobre el sitio en su conjunto. Puedes definir estilos, ajustes y comportamientos predeterminados para Bloques espec\u00edficos, lo que garantiza la coherencia en todo tu tema y la flexibilidad para los propietarios del sitio.<\/p>\n<h3>La relaci\u00f3n entre la propiedad blocks y la edici\u00f3n completa del sitio<\/h3>\n<p>FSE es un enfoque m\u00e1s visual para construir tu sitio con Bloques como n\u00facleo. En el front end, tienes la mayor\u00eda de las opciones de estilo y personalizaci\u00f3n disponibles para todo tu sitio:<\/p>\n<figure id=\"attachment_184916\" aria-describedby=\"caption-attachment-184916\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184916 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/full-site-editor.png\" alt=\"La pantalla principal del Editor de Sitios de WordPress, que muestra una p\u00e1gina de inicio azul con el t\u00edtulo \u00abUn compromiso con la innovaci\u00f3n y la sostenibilidad\u00bb. La p\u00e1gina muestra una imagen arquitect\u00f3nica moderna y opciones de personalizaci\u00f3n en una barra lateral izquierda negra.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-184916\" class=\"wp-caption-text\">La interfaz de edici\u00f3n completa del sitio dentro de WordPress.<\/figcaption><\/figure>\n<p>La propiedad <code>blocks<\/code> es una parte crucial del archivo <code>theme.json<\/code> por varias razones:<\/p>\n<ul>\n<li>Proporciona una forma estandarizada de definir estilos y configuraciones de bloques.<\/li>\n<li>Puedes crear sistemas de dise\u00f1o cohesivos a partir de una base program\u00e1tica.<\/li>\n<li>Puedes ofrecer un mayor control sobre la apariencia de los Bloques sin necesidad de <a href=\"https:\/\/kinsta.com\/es\/blog\/css-wordpress\/\">CSS<\/a> personalizado.<\/li>\n<li>La propiedad te ayuda a crear patrones y plantillas de Bloques.<\/li>\n<\/ul>\n<p>Los desarrolladores pueden utilizar la propiedad <code>blocks<\/code> para crear temas que aprovechen al m\u00e1ximo la edici\u00f3n completa del sitio.<\/p>\n<h2>C\u00f3mo estructurar la propiedad blocks (y su sintaxis)<\/h2>\n<p>La estandarizaci\u00f3n que proporciona la propiedad <code>blocks<\/code> ayuda cuando se trata de la estructura y la sintaxis. Siempre la anidar\u00e1s dentro del objeto <code>settings<\/code>:<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 3,\n  \"settings\": {\n    \"blocks\": {\n      \"core\/paragraph\": {\n        \"typography\": {\n          \"fontSizes\": [\n            {\n              \"name\": \"Small\",\n              \"slug\": \"small\",\n              \"size\": \"13px\"\n            },\n            {\n              \"name\": \"Medium\",\n              \"slug\": \"medium\",\n              \"size\": \"20px\"\n             }\n           ]\n\u2026<\/code><\/pre>\n<p>El ejemplo anterior define tama\u00f1os de fuente personalizados para un Bloque de P\u00e1rrafo. Desglosar los componentes clave es sencillo:<\/p>\n<ul>\n<li>Anidas la propiedad <code>blocks<\/code> bajo el objeto <code>settings<\/code>.<\/li>\n<li>Cada tipo de bloque tiene un espacio de nombres y un nombre (<code>core\/paragraph<\/code> aqu\u00ed).<\/li>\n<li>A continuaci\u00f3n, especificas la configuraci\u00f3n del Bloque dentro del objeto.<\/li>\n<\/ul>\n<p>Los ajustes incluyen la mayor\u00eda de los elementos disponibles para los estilos globales. Por ejemplo, pueden incluir tipograf\u00eda, color, espaciado y muchos otros.<\/p>\n<h3>Configurar los ajustes globales del bloque<\/h3>\n<p>Veamos c\u00f3mo definir los ajustes globales y luego c\u00f3mo afecta esto a la propiedad <code>blocks<\/code>. As\u00ed establecer\u00e1s una base de dise\u00f1o coherente en todo tu tema.<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 3,\n  \"settings\": {\n    \"typography\": {\n      \"fontSizes\": [\n        {\n          \"name\": \"Small\",\n          \"slug\": \"small\",\n          \"size\": \"13px\"\n        },\n        {\n          \"name\": \"Medium\",\n          \"slug\": \"medium\",\n          \"size\": \"20px\"\n        }\n\u2026<\/code><\/pre>\n<p>En este ejemplo, definimos los tama\u00f1os de fuente globales disponibles para todos los bloques. Dentro del Editor de Sitios de WordPress, puedes encontrar estas opciones como parte de la pantalla <strong>Tipograf\u00eda <\/strong>&gt;<strong> Elementos <\/strong>&gt;<strong> Texto<\/strong>:<\/p>\n<figure id=\"attachment_184915\" aria-describedby=\"caption-attachment-184915\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184915 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/elements-text.png\" alt=\"El Editor de Sitios de WordPress muestra las opciones del panel Estilos para el texto. Muestra la selecci\u00f3n de fuentes y las opciones de personalizaci\u00f3n de Fuente, Tama\u00f1o, Aspecto, Altura de l\u00ednea, Espaciado entre letras y May\u00fasculas y min\u00fasculas.\" width=\"1200\" height=\"883\"><figcaption id=\"caption-attachment-184915\" class=\"wp-caption-text\">La mayor\u00eda de los ajustes de tipograf\u00eda de <strong>theme.json<\/strong> tambi\u00e9n son accesibles dentro del Editor de Sitios.<\/figcaption><\/figure>\n<p>Cada tama\u00f1o de fuente que definas en <code>theme.json<\/code> se correlaciona con una de las opciones de tama\u00f1o aqu\u00ed:<\/p>\n<figure id=\"attachment_184922\" aria-describedby=\"caption-attachment-184922\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184922 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/theme-json-font-size.png\" alt=\"Un primer plano de un editor de c\u00f3digo que muestra parte de un archivo theme.json de WordPress. El c\u00f3digo visible define los tama\u00f1os de fuente, incluyendo Peque\u00f1o, Mediano y Grande con sus respectivos tama\u00f1os en unidades rem. El tama\u00f1o Grande incluye un ajuste de tipograf\u00eda fluida. El editor utiliza un tema oscuro con resaltado de sintaxis sobre un fondo de bosque difuminado.\" width=\"1200\" height=\"729\"><figcaption id=\"caption-attachment-184922\" class=\"wp-caption-text\">Estableces los preajustes de tama\u00f1o de fuente dentro del archivo <strong>theme.json<\/strong>.<\/figcaption><\/figure>\n<p>Por supuesto, hay muchas otras formas de personalizar tu tema desde aqu\u00ed. La idea es crear un dise\u00f1o global que funcione en el 80% de los casos de uso.<\/p>\n<p>Utilizando la propiedad <code>blocks<\/code>, puedes anular esos estilos centrales del Bloque para cubrir el 20% final. La pantalla <strong>Estilos<\/strong> del Editor de Sitios tambi\u00e9n te permite personalizar los ajustes de dise\u00f1o de cada Bloque:<\/p>\n<figure id=\"attachment_184908\" aria-describedby=\"caption-attachment-184908\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184908 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/block-styles-editor.png\" alt=\"Un primer plano de la interfaz del Editor de Sitios de WordPress, mostrando las opciones de Bloque de contenido como P\u00e1rrafo, Imagen, Encabezado y Galer\u00eda. El \u00e1rea de contenido principal muestra la p\u00e1gina de inicio del sitio.\" width=\"1200\" height=\"838\"><figcaption id=\"caption-attachment-184908\" class=\"wp-caption-text\">El Editor de Sitios te permite editar la configuraci\u00f3n de todos los Bloques principales de WordPress.<\/figcaption><\/figure>\n<p>Esto es excelente para los usuarios finales, pero tiene menos valor para un desarrollador. Nos centraremos en utilizar <code>theme.json<\/code> para trabajar con la propiedad <code>blocks<\/code>.<\/p>\n<h2>C\u00f3mo personalizar tipos de Bloques individuales<\/h2>\n<p>Aunque la configuraci\u00f3n global es importante para ayudar a mantener la coherencia, el verdadero poder reside en el alcance de la propiedad <code>blocks<\/code> para la personalizaci\u00f3n. Esta configuraci\u00f3n a nivel granular te permite adaptar la apariencia y el comportamiento de bloques espec\u00edficos para que coincidan con el dise\u00f1o de tu tema, al igual que el Editor de Sitios.<\/p>\n<p>Veamos un ejemplo de personalizaci\u00f3n del bloque Encabezado para tu tema:<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 3,\n  \"settings\": {\n    \"blocks\": {\n      \"core\/heading\": {\n        \"typography\": {\n          \"fontSizes\": [\n            {\n              \"name\": \"Small\",\n              \"slug\": \"small\",\n              \"size\": \"20px\"\n            },\n            {\n              \"name\": \"Medium\",\n              \"slug\": \"medium\",\n              \"size\": \"30px\"\n            },\n            {\n              \"name\": \"Large\",\n              \"slug\": \"large\",\n              \"size\": \"40px\"\n            }\n            ],\n            \"fontWeight\": \"bold\"\n            },\n            \"color\": {\n              \"palette\": [\n                {\n                  \"name\": \"Heading Primary\",\n                  \"slug\": \"heading-primary\",\n                  \"color\": \"#333333\"\n                },\n                {\n                  \"name\": \"Heading Secondary\",\n                  \"slug\": \"heading-secondary\",\n                  \"color\": \"#666666\"\n                }\n              ]\n\u2026<\/code><\/pre>\n<p>Puedes ver que los atributos reflejan c\u00f3mo har\u00edas cambios globales. Resumamos lo que estamos haciendo:<\/p>\n<ul>\n<li>Definimos tama\u00f1os de fuente espec\u00edficos para los encabezados y los asignamos a etiquetas de tama\u00f1o.<\/li>\n<li>El peso de la fuente para todos los encabezados ser\u00e1 simplemente negrita.<\/li>\n<li>Esos encabezados tambi\u00e9n tendr\u00e1n una paleta de colores personalizada.<\/li>\n<\/ul>\n<p>Esto garantiza que nuestros encabezados tendr\u00e1n un aspecto coherente en todo el dise\u00f1o. Tambi\u00e9n conseguimos controlar estos elementos cuando no sabemos c\u00f3mo los aplicar\u00e1 el usuario final, lo que beneficia a\u00fan m\u00e1s la coherencia del dise\u00f1o.<\/p>\n<h3>Utilizar la combinaci\u00f3n correcta de espacio de nombres y slug<\/h3>\n<p>Cuando llames a tipos de Bloque, es crucial que utilices la combinaci\u00f3n correcta de espacio de nombres y slug. Sin ella, tus cambios no se aplicar\u00e1n a los Bloques a los que quieras dirigirte.<\/p>\n<p>Cada bloque tiene un espacio de nombres y un slug. Los Bloques del core de WordPress suelen tener el espacio de nombres <code>core<\/code>. El slug ser\u00e1 el nombre del bloque:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"blocks\": {\n  \"core\/image\": {\n\u2026<\/code><\/pre>\n<p>Si necesitas conocer el slug de un Bloque, puedes consultar su archivo espec\u00edfico <code>block.json<\/code>. Puedes encontrarlo en el directorio <code>wp-includes\/blocks<\/code>. Aqu\u00ed tendr\u00e1s varias carpetas, cada una de las cuales contiene un archivo <code>block.json<\/code>. Dentro de cada uno de ellos, el espacio de nombres y el slug del Bloque deben estar cerca de la parte superior del archivo:<\/p>\n<figure id=\"attachment_184910\" aria-describedby=\"caption-attachment-184910\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184910 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/code-directory.png\" alt=\"Parte de una ventana del Finder de macOS que muestra el contenido del directorio de c\u00f3digo. Tambi\u00e9n hay una parte de un editor de c\u00f3digo con un archivo block.json abierto. El c\u00f3digo visible define las propiedades de un bloque de WordPress llamado \u00abcore\/code\u00bb con el t\u00edtulo \u00abCode\u00bb y una descripci\u00f3n sobre la visualizaci\u00f3n de fragmentos de c\u00f3digo.\" width=\"1200\" height=\"518\"><figcaption id=\"caption-attachment-184910\" class=\"wp-caption-text\">El archivo <strong>block.json<\/strong> contendr\u00e1 metadatos clave para cada Bloque individual.<\/figcaption><\/figure>\n<p>Si navegas por estos directorios, te dar\u00e1s cuenta de que el directorio <code>wp-includes<\/code> tiene su propio archivo <code>theme.json<\/code>. Aunque esto pueda parecer confuso, es sencillo de explicar.<\/p>\n<h2>Por qu\u00e9 theme.json incluye por defecto la configuraci\u00f3n personalizada de los Bloques<\/h2>\n<p>El propio archivo <code>theme.json<\/code> de WordPress al principio puede parecer extra\u00f1o, sobre todo porque no es un tema. Sin embargo, esto no es casual. La raz\u00f3n principal es soportar la compatibilidad con versiones anteriores de WordPress.<\/p>\n<p>Por ejemplo, el Bloque Bot\u00f3n establece un radio de borde:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"blocks\": {\n  \"core\/button\": {\n    \"border\": {\n      \"radius\": true\n     }\n  },\n\u2026<\/code><\/pre>\n<p>Otros Bloques tendr\u00e1n ajustes similares para ayudar a la coherencia entre distintas versiones de WordPress. Sin embargo, esto puede causar problemas m\u00e1s adelante si es algo de lo que no eres consciente.<\/p>\n<p>Si intentas definir ajustes globales y te preguntas por qu\u00e9 esos cambios no se aplican a Bloques espec\u00edficos, la compatibilidad con versiones anteriores podr\u00eda ser la respuesta. Por supuesto, puedes anular estos ajustes en tu propio archivo <code>theme.json<\/code> sin ning\u00fan problema.<\/p>\n<h2>Desarrollar Bloques personalizados con theme.json<\/h2>\n<p>El archivo <code>theme.json<\/code> es ideal para personalizar Bloques existentes, pero sus capacidades se extienden tambi\u00e9n al desarrollo de Bloques personalizados. Puedes aprovechar <code>theme.json<\/code> para definir estilos y ajustes predeterminados para cualquiera de tus Bloques personalizados. Esto te ayuda a ofrecer una integraci\u00f3n perfecta con el dise\u00f1o de tu tema.<\/p>\n<p>Sin embargo, primero tienes que <a href=\"https:\/\/kinsta.com\/es\/blog\/bloques-gutenberg\/\">construir el propio Bloque<\/a>. Esto va m\u00e1s all\u00e1 del alcance de este art\u00edculo, pero en resumen, existen unas cuantas fases:<\/p>\n<ul>\n<li><strong>Creaci\u00f3n de la estructura base del Bloque. <\/strong>Esto implica configurar un entorno de desarrollo local y crear la estructura de archivos de todo el Bloque.<\/li>\n<li><strong>Actualizaci\u00f3n del archivo <code>block.json<\/code>.<\/strong> Aqu\u00ed tendr\u00e1s que cambiar la identidad del Bloque y a\u00f1adir <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-supports\/\" target=\"_blank\" rel=\"noopener noreferrer\">supports<\/a>. Estos \u00faltimos son formas de declarar la compatibilidad con funcionalidades espec\u00edficas de WordPress. Por ejemplo, puedes manejar la alineaci\u00f3n, implementar campos de anclaje, trabajar con varios ajustes de tipograf\u00eda y mucho m\u00e1s.<\/li>\n<li><strong>Modifica los archivos JavaScript del Bloque.<\/strong> Tanto <code>index.js<\/code> como <code>edit.js<\/code> necesitan c\u00f3digo para indicar a WordPress c\u00f3mo funciona el Bloque y para que aparezca en el Editor de Sitios.<\/li>\n<\/ul>\n<p>Puede que tambi\u00e9n necesites editar <code>render.php<\/code>, a\u00f1adir renderizado est\u00e1tico y toda una serie de otras tareas. En este punto, puedes aplicar cualquier cambio de estilo a <code>theme.json<\/code> como con cualquier otro Bloque. Por ahora, echemos un vistazo m\u00e1s de cerca a <code>block.json<\/code>.<\/p>\n<h3>El archivo block.json<\/h3>\n<p>Este archivo es lo que el equipo de desarrollo de WordPress denomina la forma \u00abcan\u00f3nica\u00bb de registrar Bloques tanto para el servidor como para el cliente. Los metadatos que incluyes aqu\u00ed le dicen a WordPress todo sobre el tipo de Bloque y sus archivos de soporte:<\/p>\n<pre><code class=\"language-json\">{\n  \"$schema\": \"https:\/\/schemas.wp.org\/trunk\/block.json\",\n  \"apiVersion\": 3,\n  \"name\": \"my-plugin\/notice\",\n  \"title\": \"Notice\",\n  \"category\": \"text\",\n  \"parent\": [ \"core\/group\" ],\n  \"icon\": \"star\",\n  \"description\": \"Shows warning, error or success notices...\",\n  \"keywords\": [ \"alert\", \"message\" ],\n  \"version\": \"1.0.3\",\n  \"textdomain\": \"my-plugin\",\n  \"attributes\": {\n    \"message\": {\n      \"type\": \"string\",\n      \"source\": \"html\",\n      \"selector\": \".message\"\n    }\n  },\n\u2026<\/code><\/pre>\n<p>Es similar a los metadatos que colocar\u00edas al principio de un archivo <a href=\"https:\/\/kinsta.com\/php\/\">PHP<\/a> para temas y plugins. Aunque el archivo utiliza exclusivamente datos JSON, puedes seguir usando c\u00f3digo a trav\u00e9s de PHP, <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> y CSS:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"editorScript\": \"file:.\/index.js\",\n\"script\": \"file:.\/script.js\",\n\"viewScript\": [ \"file:.\/view.js\", \"example-shared-view-script\" ],\n\"editorStyle\": \"file:.\/index.css\",\n\"style\": [ \"file:.\/style.css\", \"example-shared-style\" ],\n\"viewStyle\": [ \"file:.\/view.css\", \"example-view-style\" ],\n\"render\": \"file:.\/render.php\"\n\u2026<\/code><\/pre>\n<p>Volveremos sobre esto m\u00e1s adelante en la secci\u00f3n sobre variaciones. Para terminar esta secci\u00f3n, necesitas saber c\u00f3mo establecer tu Bloque personalizado como predeterminado en WordPress. Hay varias formas de conseguirlo. La forma cl\u00e1sica es <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-tipos-de-postes-personalizados\/\">registrar un tipo de entrada personalizado<\/a> e incluir all\u00ed los Bloques. Sin embargo, existen otro par de m\u00e9todos.<\/p>\n<p>Por ejemplo, puedes actualizar un tipo de entrada existente para <a href=\"https:\/\/kinsta.com\/es\/blog\/plantillas-de-entradas-wordpress\/#how-to-create-a-custom-wordpress-post-template\">a\u00f1adir una plantilla de Bloque<\/a>. Aqu\u00ed tienes un ejemplo sencillo:<\/p>\n<pre><code class=\"language-php\">\u2026\nfunction load_post_type_patterns() {\n    \/\/ Define an initial pattern for the 'HypnoToad' post type\n    $post_type_object = get_post_type_object( 'hypnoToad' );\n    $post_type_object-&gt;template = array(\n    array(\n        'core\/block',\n\u2026<\/code><\/pre>\n<p>Otra forma es llamar al hook <code>default_content<\/code> y definir el Bloque utilizando el marcado:<\/p>\n<pre><code class=\"language-php\">function toad_content( $content, $post ) {\n    if ( $post-&gt;post_type === 'hypnoToad' ) {\n        $content ='\n        &lt;div class=\"wp-block-columns\"&gt;&lt;!-- wp:column \u2192\n        &lt;div class=\"wp-block-column\"&gt;\n        &lt;p&gt;&lt;\/p&gt;\n        &lt;\/div&gt;\n        \n\n\n        &lt;div class=\"wp-block-column\"&gt;\n        &lt;p&gt;&lt;\/p&gt;\n        &lt;\/div&gt;\n        &lt;\/div&gt;\n        <!-- \/wp:columns -->';\n    }\n    return $content;\n}\nadd_filter( 'default_content', 'toad_content', 10, 2 );<\/code><\/pre>\n<p>Por supuesto, no s\u00f3lo utilizar\u00e1s JSON, <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-el-html\/\">HTML<\/a> y PHP. Tambi\u00e9n utilizar\u00e1s otros lenguajes para ayudar con el dise\u00f1o y la interactividad. La buena noticia es que WordPress te ofrece una forma sencilla de hacerlo.<\/p>\n<h2>Usar propiedades CSS personalizadas para tus Bloques<\/h2>\n<p>Puedes conseguir mucho utilizando las propiedades, atributos y objetos existentes de <code>theme.json<\/code>, pero no cubrir\u00e1 todos los casos de uso. El archivo te proporciona la propiedad <code>custom<\/code> que te ayudar\u00e1 a crear propiedades CSS relevantes:<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 3,\n  \"settings\": {\n    \"custom\": {\n      \"toad\": \"hypno\"\n    }\n  }\n}<\/code><\/pre>\n<p>Aqu\u00ed, das un par clave-valor, que se convierte en una variable CSS en el front-end:<\/p>\n<pre><code class=\"language-json\">body {\n    --wp--custom--toad: hypno;\n}<\/code><\/pre>\n<p>Ten en cuenta que la variable utilizar\u00e1 guiones dobles para separar sus elementos. En general, siempre ver\u00e1s <code>--wp--custom--<\/code>, que etiquetar\u00e1 la clave al final. A veces, definir\u00e1s variables y propiedades con may\u00fasculas y min\u00fasculas:<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 3,\n  \"settings\": {\n    \"custom\": {\n      \"hypnoToad\": \"active\"\n    }\n  }\n}<\/code><\/pre>\n<p>En este caso, WordPress utilizar\u00e1 guiones para separar las palabras:<\/p>\n<pre><code class=\"language-json\">body {\n    --wp--custom--hypno-toad: active;\n}<\/code><\/pre>\n<p>Entre la propiedad <code>custom<\/code> y <code>block.json<\/code>, tienes total libertad para construir tus Bloques como mejor te parezca, incluyendo cualquier variaci\u00f3n que quieras incluir.<\/p>\n<h2>Un vistazo r\u00e1pido al Bloque, al estilo y a las variaciones del estilo de Bloque<\/h2>\n<p>Antes de pasar al estilo mediante la propiedad <code>blocks<\/code>, echemos un vistazo a las variaciones. Tienes unos cuantos tipos de variaciones diferentes para tus dise\u00f1os, y las convenciones de nomenclatura podr\u00edan hacer que utilizaras el tipo equivocado para tus necesidades. Aqu\u00ed tienes un desglose de las diferencias:<\/p>\n<ul>\n<li><strong>Variaciones de bloque.<\/strong> Si tu Bloque tiene versiones alternativas (piensa en un Bloque que mostrar\u00e1 muchos enlaces personalizados establecidos por el usuario), se trata de una variaci\u00f3n de Bloque. El Bloque de Redes Sociales es un buen ejemplo de ello.<\/li>\n<li><strong>Variaciones de estilo.<\/strong> Son versiones alternativas de <code>theme.json<\/code> que funcionan en tu sitio global. No lo tratamos aqu\u00ed, pero la mayor\u00eda de los temas de Block las ofrecen para diversas paletas de colores y configuraciones tipogr\u00e1ficas.<\/li>\n<li><strong>Variaciones de estilo en bloque.<\/strong> Esto toma la funcionalidad b\u00e1sica de las variaciones de estilo y te permite crear dise\u00f1os alternativos para un Bloque.<\/li>\n<\/ul>\n<p>Puede que te preguntes si utilizar una variaci\u00f3n de Bloque o una variaci\u00f3n de estilo de Bloque; la respuesta no es complicada. Si los cambios que quieres hacer pueden producirse dentro de <code>theme.json<\/code> o utilizando CSS, crea una variaci\u00f3n de estilo de Bloque. Cualquier otra cosa requiere una variaci\u00f3n de Bloque.<\/p>\n<h3>Variaciones de bloques<\/h3>\n<p>Con las <a href=\"https:\/\/developer.wordpress.org\/themes\/features\/block-variations\/\" target=\"_blank\" rel=\"noopener noreferrer\">variaciones de bloques<\/a>, las registrar\u00e1s utilizando JavaScript. Crear un archivo dentro del directorio de un tema es una buena idea, pero puede ir en cualquier lugar. Basta una l\u00ednea para registrar una variaci\u00f3n dentro de tu archivo JavaScript:<\/p>\n<pre><code class=\"language-js\">const registerBlockVariation = ( blockName, variation )<\/code><\/pre>\n<p>Para el objeto <code>blockName<\/code>, tambi\u00e9n tendr\u00e1s que especificar aqu\u00ed el espacio de nombres, como har\u00edas con la propiedad <code>blocks<\/code>. Dentro del objeto <code>variation<\/code>, a\u00f1adir\u00e1s el nombre, el t\u00edtulo, la descripci\u00f3n, si la variaci\u00f3n est\u00e1 activa por defecto, etc. Para cargar el archivo en el Editor de Sitios, simplemente llama al hook <code>enqueue_block_editor_assets<\/code> y <a href=\"https:\/\/kinsta.com\/es\/blog\/wp-enqueue-scripts\/\">pon en cola tu script<\/a> dentro de \u00e9l.<\/p>\n<h3>Variaciones de estilo de bloque<\/h3>\n<p>Cuando se trata de variaciones de estilo de bloque, tienes <a href=\"https:\/\/developer.wordpress.org\/themes\/features\/block-style-variations\" target=\"_blank\" rel=\"noopener noreferrer\">dos opciones<\/a>:<\/p>\n<ul>\n<li>Utilizar la funci\u00f3n <code>register_block_style()<\/code> con PHP.<\/li>\n<li>Crear un archivo JavaScript <code>block-editor.js<\/code>, utilizar la funci\u00f3n <code>registerBlockStyle()<\/code> de forma similar a las variaciones en bloque y poner en cola el script.<\/li>\n<\/ul>\n<p>Una vez que registres una variaci\u00f3n de estilo de Bloque, puedes dirigirte al Bloque utilizando la propiedad <code>variations<\/code>:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"styles\": {\n  \"blocks\": {\n    \"core\/button\": {\n      \"variations\": {\n        \"outline\": {\n          \"border\": {\n            \"color\": \"var:preset|color|black\",\n            \"radius\": \"0\",\n            \"style\": \"solid\",\n            \"width\": \"3px\"\n          },\n\u2026<\/code><\/pre>\n<p>Esto significa que puede que no necesites ning\u00fan CSS personalizado: casi todos los aspectos del dise\u00f1o de un Bloque son posibles a trav\u00e9s de la propiedad <code>blocks<\/code>.<\/p>\n<h2>Dar estilo a un Bloque predeterminado utilizando la propiedad blocks de principio a fin<\/h2>\n<p>Para demostrar c\u00f3mo funciona la propiedad <code>blocks<\/code>, veamos un ejemplo real. Nuestro sitio utiliza el tema Twenty Twenty-Four, y est\u00e1 usando la variaci\u00f3n de estilo por defecto:<\/p>\n<figure id=\"attachment_184912\" aria-describedby=\"caption-attachment-184912\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184912 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/default-style-variation.png\" alt=\"El Editor de Sitios de WordPress muestra la p\u00e1gina de inicio de tu sitio a la derecha, con el men\u00fa Estilos a la izquierda. Hay varias opciones para elegir un esquema de color alternativo, junto con opciones de personalizaci\u00f3n de la paleta.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-184912\" class=\"wp-caption-text\">Cada tema suele venir con diversas variaciones de estilo que consiguen diferentes aspectos.<\/figcaption><\/figure>\n<p>Por ahora, nos parece ideal \u2014 aunque los t\u00edtulos y el cuerpo del texto parecen tener un color demasiado similar. Queremos cambiar uno o ambos colores para diferenciarlos. Como usuario final o propietario del sitio, podemos arreglar esto dentro de la barra lateral Estilos del Editor de Sitios. Si te diriges a <strong>Bloques &gt; Encabezado<\/strong>, puedes hacer clic en el elemento Texto y cambiar el color a algo m\u00e1s adecuado:<\/p>\n<figure id=\"attachment_184920\" aria-describedby=\"caption-attachment-184920\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184920 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/styles-heading-editor.png\" alt=\"La interfaz del Editor de Sitios de WordPress muestra la p\u00e1gina de inicio de tu sitio web. El \u00e1rea de contenido principal muestra un t\u00edtulo, una breve descripci\u00f3n y un bot\u00f3n \u00abSobre nosotros\u00bb, todo en negro. Debajo hay una imagen arquitect\u00f3nica de un edificio moderno con listones de madera inclinados. La barra lateral derecha muestra las opciones de Estilos, con un panel desplegable para seleccionar un color de texto.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-184920\" class=\"wp-caption-text\">Puedes cambiar la configuraci\u00f3n individual de los Bloques con facilidad desde el Editor de Sitios.<\/figcaption><\/figure>\n<p>Sin embargo, como desarrollador, puedes hacerlo dentro de <code>theme.json<\/code>. <span style=\"margin: 0px;padding: 0px\">Como con cualquier otro tema, lo mejor es <a href=\"https:\/\/kinsta.com\/es\/blog\/temas-child-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">crear un tema hijo<\/a> para<\/span> conservar los cambios que hagas. Una segunda ventaja es que tu archivo <code>theme.json<\/code> tendr\u00e1 un aspecto m\u00e1s limpio.<\/p>\n<p>Crearemos un directorio dentro de <code>wp-content\/themes\/<\/code> y lo llamaremos <code>twentytwentyfour-child<\/code>. Aqu\u00ed, a\u00f1ade un archivo <code>style.css<\/code> v\u00e1lido y un archivo <code>theme.json<\/code> en blanco.<\/p>\n<figure id=\"attachment_184909\" aria-describedby=\"caption-attachment-184909\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184909 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/child-theme-directory.png\" alt=\"Una ventana del explorador de archivos de macOS para el tema hijo de twentytwentyfour que muestra dos archivos: style.css y theme.json, lo que indica una configuraci\u00f3n de tema hijo para el desarrollo de WordPress.\" width=\"1200\" height=\"614\"><figcaption id=\"caption-attachment-184909\" class=\"wp-caption-text\">Cada directorio de tema hijo necesita un archivo <strong>style.css<\/strong> y un archivo <strong>theme.json<\/strong>.<\/figcaption><\/figure>\n<p>Desde aqu\u00ed, puedes abrir el archivo JSON y ponerte a trabajar.<\/p>\n<h3>Crear y rellenar un archivo theme.json para el tema hijo<\/h3>\n<p>La principal diferencia entre crear un tema padre y un tema hijo con respecto a <code>theme.json<\/code> es la estructura del archivo. No tendr\u00e1s que indicar el esquema ni poner necesariamente todo dentro del objeto <code>settings<\/code>. En nuestro caso, tenemos que utilizar la propiedad <code>styles<\/code>:<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 3,\n  \"styles\": {\n    \"blocks\": {}\n  }\n}<\/code><\/pre>\n<p>A continuaci\u00f3n, tenemos que encontrar el espacio de nombres y el slug para el Bloque de Encabezamiento. La <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/core-blocks\/\">Gu\u00eda de Referencia oficial de Core Blocks<\/a> enumera todo esto e incluso nos dir\u00e1 qu\u00e9 atributos y propiedades admite el Bloque. La gu\u00eda nos dice que podemos ajustar los valores <code>background<\/code>, <code>gradient<\/code>, <code>link<\/code>, y <code>text<\/code> para la propiedad <code>color<\/code>.<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n  \"core\/heading\": {\n    \"color\": {}\n  }\n}<\/code><\/pre>\n<p>Con la estructura completa, podemos empezar a averiguar c\u00f3mo cambiar el estilo del texto.<\/p>\n<h3>Encontrar un esquema de color y aplicar los cambios<\/h3>\n<p>Ahora necesitamos un color que se adapte a nuestras necesidades. La variaci\u00f3n por defecto de Twenty Twenty-Four tiene una paleta excelente, y revisarla en un comprobador de contraste espec\u00edfico nos da algunas ideas:<\/p>\n<figure id=\"attachment_184918\" aria-describedby=\"caption-attachment-184918\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184918 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/palette-contrast.png\" alt=\"La herramienta de comprobaci\u00f3n del contraste de la paleta de colores de Coolors muestra varias combinaciones de colores con muestras de texto para evaluar la accesibilidad y legibilidad. Un recuadro resaltado en rojo muestra dos c\u00f3digos hexadecimales de colores contrastados compatibles.\" width=\"1200\" height=\"820\"><figcaption id=\"caption-attachment-184918\" class=\"wp-caption-text\">Comprobar que tus esquemas de color tienen el contraste adecuado y accesible es un paso clave en el dise\u00f1o de un tema.<\/figcaption><\/figure>\n<p>A continuaci\u00f3n, podemos a\u00f1adir la elecci\u00f3n de color para nuestro Bloque a <code>theme.json<\/code>. Como el tema padre Twenty Twenty-Four utiliza propiedades CSS personalizadas para definir los estilos de paleta, tambi\u00e9n podemos llamarlo aqu\u00ed:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"core\/paragraph\": {\n    \"color\": { \"text\": \"var(--wp--preset--color--contrast)\" },\n\u2026<\/code><\/pre>\n<p>Si necesitas saber el nombre de un color de paleta, puedes encontrarlo en el Editor de Sitios desde el selector de colores:<\/p>\n<figure id=\"attachment_184919\" aria-describedby=\"caption-attachment-184919\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184919 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/palette-editor-color.png\" alt=\"Un primer plano de la interfaz del selector de color de Elementos de Texto. Muestra una selecci\u00f3n de muestras de color con c\u00f3digos de color hexadecimales, con el color Contraste establecido como opci\u00f3n principal.\" width=\"1200\" height=\"492\"><figcaption id=\"caption-attachment-184919\" class=\"wp-caption-text\">Puedes encontrar el nombre de un color mir\u00e1ndolo dentro de una paleta de colores del Editor de Sitios.<\/figcaption><\/figure>\n<p>Una vez guardados los cambios, actualiza tu sitio y deber\u00edas ver la nueva paleta de colores en su sitio. Si no es as\u00ed, comprueba que est\u00e1s anidando la propiedad <code>blocks<\/code> dentro del objeto correcto, ya que \u00e9ste es un punto de fricci\u00f3n habitual.<\/p>\n<p>Si observamos el sitio, el texto es menos contrastado y m\u00e1s f\u00e1cil de leer. Sin embargo, a\u00fan queremos ver algo de definici\u00f3n entre el Bloque de P\u00e1rrafos y los encabezados circundantes. La paleta predeterminada del tema tiene otros colores m\u00e1s llamativos. Vamos a probar el color Acento \/ 3 para el Bloque de Encabezamiento:<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n  \"core\/heading\": {\n    \"color\": { \"text\": \"var(--wp--preset--color--accent-3)\" }\n  },\n  \"core\/paragraph\": {\n    \"color\": { \"text\": \"var(--wp--preset--color--contrast)\" }\n  }\n}<\/code><\/pre>\n<p>Despu\u00e9s de guardar los cambios y actualizar el front-end, ver\u00e1s que el Bloque de Encabezamiento tiene m\u00e1s definici\u00f3n:<\/p>\n<figure id=\"attachment_184907\" aria-describedby=\"caption-attachment-184907\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184907 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/accent-color-heading.png\" alt=\"El Editor de Sitios de WordPress muestra la p\u00e1gina de inicio de un sitio que incluye una imagen de cabecera de una estructura arquitect\u00f3nica moderna. El contenido principal muestra el texto \u00abUn compromiso con la innovaci\u00f3n y la sostenibilidad\u00bb en color naranja-rojo.\" width=\"1200\" height=\"677\"><figcaption id=\"caption-attachment-184907\" class=\"wp-caption-text\">El front-end cambia el Bloque Encabezado en funci\u00f3n de la configuraci\u00f3n del <strong>theme.json<\/strong>.<\/figcaption><\/figure>\n<p>Esto no tiene por qu\u00e9 ser el final de la edici\u00f3n. Incluso puedes personalizar las opciones del Editor de Sitios desde <code>theme.json<\/code>.<\/p>\n<h3>A\u00f1adir opciones de atributo a los Bloques<\/h3>\n<p>Los &#8216;supports&#8217; de cada Bloque determinan sus opciones dentro del Editor del Sitio. Por ejemplo, el Bloque de P\u00e1rrafo tiene por defecto deshabilitada la funcionalidad de letra capital.<\/p>\n<figure id=\"attachment_184917\" aria-describedby=\"caption-attachment-184917\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184917 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/no-drop-caps-option.png\" alt=\"El Editor de Sitios de WordPress muestra un primer plano de la barra lateral derecha de opciones. El panel flotante de personalizaci\u00f3n de Tipograf\u00eda muestra opciones para la fuente, el tama\u00f1o, la apariencia, la altura de l\u00ednea, el espaciado entre letras, la decoraci\u00f3n, la orientaci\u00f3n y las may\u00fasculas y min\u00fasculas, pero no la letra capital.\" width=\"1200\" height=\"633\"><figcaption id=\"caption-attachment-184917\" class=\"wp-caption-text\">Por defecto, el Editor de Sitios no te permite elegir la implementaci\u00f3n de la letra capital.<\/figcaption><\/figure>\n<p>Podemos volver a activarlo en el archivo <code>theme.json<\/code> y en la propiedad <code>blocks<\/code>. Si nos fijamos en el material de referencia, podemos aprovechar la propiedad tipograf\u00eda para activar las may\u00fasculas:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"core\/paragraph\": {\n  \"color\": { \"text\": \"var(--wp--preset--color--contrast)\" },\n  \"typography\": { \"dropCap\": true }\n\u2026<\/code><\/pre>\n<p>Una vez que guardemos esos cambios y actualicemos el editor, tendr\u00e1s disponible la opci\u00f3n de activar las may\u00fasculas:<\/p>\n<figure id=\"attachment_184914\" aria-describedby=\"caption-attachment-184914\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184914 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/drop-cap.png\" alt=\"La interfaz del Editor de Bloques de WordPress muestra un p\u00e1rrafo de texto Lorem Ipsum con una gran letra capital. Hay opciones de personalizaci\u00f3n de la tipograf\u00eda visibles en la barra lateral derecha, y el men\u00fa abierto M\u00e1s elementos muestra la opci\u00f3n Drop cap activada.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-184914\" class=\"wp-caption-text\">Habilitar la funcionalidad Drop Cap en el Editor de Sitios de WordPress lleva unos segundos con <strong>theme.json<\/strong>.<\/figcaption><\/figure>\n<p>El archivo <code>theme.json<\/code> no es simplemente un archivo de configuraci\u00f3n para el dise\u00f1o. Tambi\u00e9n puede ayudar a a\u00f1adir y eliminar funciones del Editor de Sitios.<\/p>\n<h2>C\u00f3mo el alojamiento administrado de Kinsta puede ayudarte a desarrollar temas para WordPress<\/h2>\n<p>Las complejidades del desarrollo de temas y <code>theme.json<\/code> dependen de soluciones de calidad en toda la cadena de desarrollo para aprovechar el potencial de mejora del rendimiento.<\/p>\n<p>Un entorno de desarrollo local es crucial, ya que te permite crear, gestionar y retocar sitios de WordPress en tu m\u00e1quina local. <a href=\"https:\/\/kinsta.com\/es\/devkinsta\/\">DevKinsta<\/a> puede ayudarte en este sentido.<\/p>\n<figure id=\"attachment_184913\" aria-describedby=\"caption-attachment-184913\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184913 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/devkinsta-interface.png\" alt=\"El panel de informaci\u00f3n del sitio dentro de DevKinsta. Muestra detalles t\u00e9cnicos como la versi\u00f3n de WordPress, el servidor web y el tipo de base de datos, junto con opciones para gestionar el sitio.\" width=\"1200\" height=\"689\"><figcaption id=\"caption-attachment-184913\" class=\"wp-caption-text\">La interfaz de DevKinsta.<\/figcaption><\/figure>\n<p>DevKinsta ofrece muchas ventajas:<\/p>\n<ul>\n<li>Se ejecuta en contenedores Docker, lo que significa que a\u00edslas tu instalaci\u00f3n del resto de tu m\u00e1quina. Como tal, puedes probar tus configuraciones de <code>theme.json<\/code> y tus Bloques personalizados sin preocupaciones.<\/li>\n<li>Puedes hacer iteraciones r\u00e1pidas en tu archivo <code>theme.json<\/code> y ver los resultados inmediatamente en tu entorno local.<\/li>\n<li>Crear varios sitios locales para probar tu tema en diferentes versiones y configuraciones de WordPress es pan comido.<\/li>\n<\/ul>\n<p>Es m\u00e1s, no utilizar\u00e1s ninguno de los recursos de tu servidor hasta que est\u00e9s satisfecho y preparado. Los <a href=\"https:\/\/kinsta.com\/es\/blog\/entornos-staging-de-kinsta\/\">entornos de staging<\/a> de Kinsta son el siguiente paso ideal. Puedes crear una copia de tu sitio de producci\u00f3n r\u00e1pidamente e incluso bajarla a tu entorno local para seguir trabajando.<\/p>\n<p>Es una forma estupenda de realizar pruebas de rendimiento de tu tema, sobre todo si combinas el staging con la herramienta de <a href=\"https:\/\/kinsta.com\/es\/docs\/alojamiento-wordpress\/monitorizacion-wordpress\/herramienta-apm\/\">Monitorizaci\u00f3n del Rendimiento de las Aplicaciones<\/a> (APM) de Kinsta.<\/p>\n<p>Tambi\u00e9n puedes aprovechar la integraci\u00f3n Git de Kinsta en todos tus entornos. Esto te permite enviar y extraer cambios a los repositorios y desplegarlos tambi\u00e9n desde all\u00ed.<\/p>\n<h2>Resumen<\/h2>\n<p>Comprender la propiedad <code>blocks<\/code> en <code>theme.json<\/code> es un paso necesario para todos los desarrolladores de temas. Esta propiedad puede tomar un dise\u00f1o global y hacerlo m\u00e1s \u00fanico, cohesivo y relevante. Disponer de todas las posibilidades para trabajar con los ajustes individuales del core y de los bloques personalizados ayuda a todos los usuarios a aprovechar las capacidades de la edici\u00f3n completa del sitio. Adem\u00e1s, tener estas opciones disponibles en el Editor de Sitios significa que los usuarios finales pueden hacer sus propios cambios sin c\u00f3digo mientras t\u00fa presentas opciones predeterminadas estelares.<\/p>\n<p>\u00bfTienes alguna pregunta sobre el uso de la propiedad <code>blocks<\/code> con el archivo <code>theme.json<\/code>? Pregunta en la secci\u00f3n de comentarios m\u00e1s abajo<\/p>","protected":false},"excerpt":{"rendered":"<p>La introducci\u00f3n de la edici\u00f3n completa del sitio (FSE) en WordPress destaca la creciente importancia del archivo theme.json. Ahora hay toda una nueva jerarqu\u00eda y estructura &#8230;<\/p>\n","protected":false},"author":199,"featured_media":76659,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1345,1358],"class_list":["post-76658","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-desarrollo-wordpress","topic-diseno-sitios-web-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>Informaci\u00f3n clave sobre la propiedad blocks de theme.json para desarrolladores<\/title>\n<meta name=\"description\" content=\"Aprende a utilizar la propiedad de bloques theme.json para aprovechar un enfoque racionalizado del desarrollo de temas de WordPress.\" \/>\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\/propiedad-blocks-theme-json\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Lo que los desarrolladores de WordPress deben saber sobre la propiedad blocks en theme.json\" \/>\n<meta property=\"og:description\" content=\"Aprende a utilizar la propiedad de bloques theme.json para aprovechar un enfoque racionalizado del desarrollo de temas de WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/propiedad-blocks-theme-json\/\" \/>\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-10-02T14:27:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-03T07:49:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/09\/blocks-property-in-theme-json.png\" \/>\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\/png\" \/>\n<meta name=\"author\" content=\"Jeremy Holcombe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Aprende a utilizar la propiedad de bloques theme.json para aprovechar un enfoque racionalizado del desarrollo de temas de WordPress.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/09\/blocks-property-in-theme-json-1024x512.png\" \/>\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=\"20 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/propiedad-blocks-theme-json\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/propiedad-blocks-theme-json\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"Lo que los desarrolladores de WordPress deben saber sobre la propiedad blocks en theme.json\",\"datePublished\":\"2024-10-02T14:27:26+00:00\",\"dateModified\":\"2024-10-03T07:49:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/propiedad-blocks-theme-json\/\"},\"wordCount\":3529,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/propiedad-blocks-theme-json\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/09\/blocks-property-in-theme-json.png\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/propiedad-blocks-theme-json\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/propiedad-blocks-theme-json\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/propiedad-blocks-theme-json\/\",\"name\":\"Informaci\u00f3n clave sobre la propiedad blocks de theme.json para desarrolladores\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/propiedad-blocks-theme-json\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/propiedad-blocks-theme-json\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/09\/blocks-property-in-theme-json.png\",\"datePublished\":\"2024-10-02T14:27:26+00:00\",\"dateModified\":\"2024-10-03T07:49:35+00:00\",\"description\":\"Aprende a utilizar la propiedad de bloques theme.json para aprovechar un enfoque racionalizado del desarrollo de temas de WordPress.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/propiedad-blocks-theme-json\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/propiedad-blocks-theme-json\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/propiedad-blocks-theme-json\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/09\/blocks-property-in-theme-json.png\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/09\/blocks-property-in-theme-json.png\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/propiedad-blocks-theme-json\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Desarrollo WordPress\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/desarrollo-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Lo que los desarrolladores de WordPress deben saber sobre la propiedad blocks en theme.json\"}]},{\"@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":"Informaci\u00f3n clave sobre la propiedad blocks de theme.json para desarrolladores","description":"Aprende a utilizar la propiedad de bloques theme.json para aprovechar un enfoque racionalizado del desarrollo de temas de WordPress.","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\/propiedad-blocks-theme-json\/","og_locale":"es_ES","og_type":"article","og_title":"Lo que los desarrolladores de WordPress deben saber sobre la propiedad blocks en theme.json","og_description":"Aprende a utilizar la propiedad de bloques theme.json para aprovechar un enfoque racionalizado del desarrollo de temas de WordPress.","og_url":"https:\/\/kinsta.com\/es\/blog\/propiedad-blocks-theme-json\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2024-10-02T14:27:26+00:00","article_modified_time":"2024-10-03T07:49:35+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/09\/blocks-property-in-theme-json.png","type":"image\/png"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Aprende a utilizar la propiedad de bloques theme.json para aprovechar un enfoque racionalizado del desarrollo de temas de WordPress.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/09\/blocks-property-in-theme-json-1024x512.png","twitter_creator":"@Kinsta_ES","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Jeremy Holcombe","Tiempo de lectura":"20 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/propiedad-blocks-theme-json\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/propiedad-blocks-theme-json\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"Lo que los desarrolladores de WordPress deben saber sobre la propiedad blocks en theme.json","datePublished":"2024-10-02T14:27:26+00:00","dateModified":"2024-10-03T07:49:35+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/propiedad-blocks-theme-json\/"},"wordCount":3529,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/propiedad-blocks-theme-json\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/09\/blocks-property-in-theme-json.png","inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/propiedad-blocks-theme-json\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/propiedad-blocks-theme-json\/","url":"https:\/\/kinsta.com\/es\/blog\/propiedad-blocks-theme-json\/","name":"Informaci\u00f3n clave sobre la propiedad blocks de theme.json para desarrolladores","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/propiedad-blocks-theme-json\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/propiedad-blocks-theme-json\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/09\/blocks-property-in-theme-json.png","datePublished":"2024-10-02T14:27:26+00:00","dateModified":"2024-10-03T07:49:35+00:00","description":"Aprende a utilizar la propiedad de bloques theme.json para aprovechar un enfoque racionalizado del desarrollo de temas de WordPress.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/propiedad-blocks-theme-json\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/propiedad-blocks-theme-json\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/propiedad-blocks-theme-json\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/09\/blocks-property-in-theme-json.png","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/09\/blocks-property-in-theme-json.png","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/propiedad-blocks-theme-json\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Desarrollo WordPress","item":"https:\/\/kinsta.com\/es\/secciones\/desarrollo-wordpress\/"},{"@type":"ListItem","position":3,"name":"Lo que los desarrolladores de WordPress deben saber sobre la propiedad blocks en theme.json"}]},{"@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\/76658","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=76658"}],"version-history":[{"count":10,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/76658\/revisions"}],"predecessor-version":[{"id":76695,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/76658\/revisions\/76695"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/76658\/translations\/en"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/76658\/translations\/jp"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/76658\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/76658\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/76658\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/76658\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/76658\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/76658\/translations\/es"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/76658\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/76659"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=76658"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=76658"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=76658"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}