{"id":79799,"date":"2025-08-07T09:56:26","date_gmt":"2025-08-07T07:56:26","guid":{"rendered":"https:\/\/kinqsta.com\/es\/?p=79799&#038;preview=true&#038;preview_id=79799"},"modified":"2025-08-11T08:22:40","modified_gmt":"2025-08-11T06:22:40","slug":"variaciones-de-bloque-con-estilos-gutenberg","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/es\/blog\/variaciones-de-bloque-con-estilos-gutenberg\/","title":{"rendered":"C\u00f3mo personalizar bloques de Gutenberg con variaciones de Estilo y variaciones de Bloque"},"content":{"rendered":"<p>Gutenberg se ha convertido en un editor potente y altamente personalizable. M\u00e1s all\u00e1 de sus s\u00f3lidas <a href=\"https:\/\/kinqsta.com\/es\/blog\/gutenberg-wordpress-editor\/\">funcionalidades listas para usar<\/a>, los desarrolladores de WordPress ahora pueden aprovechar un amplio conjunto de APIs para integrar f\u00e1cilmente funcionales personalizadas en sus sitios web. Esta extensibilidad permite un notable grado de desarrollo a medida, lo que permite a los desarrolladores crear experiencias online altamente personalizadas y ricas en funcionalidades.<\/p>\n<p>Este art\u00edculo explora dos funcionalidades menos conocidas pero muy potentes del desarrollo de WordPress: <b>Variaciones de Estilo<\/b> (tambi\u00e9n conocidas como estilos de bloque) y <b>Variaciones de Bloque<\/b>.<\/p>\n<p>Aunque su utilidad pueda parecer poco clara al principio, te sorprender\u00e1 lo \u00fatiles que son y c\u00f3mo una peque\u00f1a inversi\u00f3n de tiempo te permitir\u00e1 integrarlos perfectamente en tu flujo de trabajo.<\/p>\n<p>Obtendr\u00e1s una comprensi\u00f3n pr\u00e1ctica de lo que son y c\u00f3mo utilizarlos a trav\u00e9s de un proyecto real. Puedes implementar este proyecto en tu sitio de WordPress simplemente copiando y pegando el c\u00f3digo de este tutorial y, finalmente, a\u00f1adiendo personalizaciones.<\/p>\n<p>Antes de sumergirnos en el proyecto, revisemos r\u00e1pidamente los requisitos previos:<\/p>\n<ul>\n<li><strong>Entorno local de desarrollo de WordPress:<\/strong> Aunque cualquiera es v\u00e1lido, recomendamos encarecidamente <a href=\"https:\/\/kinqsta.com\/es\/devkinsta\/\">DevKinsta<\/a>, la suite de desarrollo local de Kinsta. Es f\u00e1cil de usar y ofrece muchos ajustes y <a href=\"https:\/\/kinqsta.com\/es\/blog\/adminer\/\">herramientas<\/a> para lanzar y gestionar r\u00e1pidamente un sitio local de WordPress.<\/li>\n<li><strong>Node.js y npm:<\/strong> Son esenciales, ya que el editor de bloques est\u00e1 basado en React y requiere un proceso de<\/li>\n<li>construcci\u00f3n<\/li>\n<li><strong>Conocimientos b\u00e1sicos de desarrollo frontend:<\/strong> Ser\u00e1 beneficioso tener conocimientos b\u00e1sicos de Node.js, JavaScript (con React), PHP y CSS.<\/li>\n<\/ul>\n<p>Aunque este proyecto no es demasiado complejo, prep\u00e1rate para escribir algo de c\u00f3digo. El <a href=\"https:\/\/github.com\/carlodaniele\/image-hacker\" target=\"_blank\" rel=\"noopener noreferrer\">c\u00f3digo completo<\/a> tambi\u00e9n est\u00e1 disponible en GitHub.<\/p>\n<p>\u00a1Empecemos!<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Estilos de bloque Vs. Variaciones de bloque<\/h2>\n<p>Los <strong>Estilos de bloque<\/strong> y las <strong>Variaciones de bloque<\/strong> son dos potentes funcionalidades de WordPress para desarrolladores. Aunque sus nombres suenan bastante parecidos, difieren en su finalidad y uso.<\/p>\n<p>Los <strong>Estilos de bloque<\/strong>, tambi\u00e9n conocidos como variaciones de estilo, son conjuntos preconfigurados de estilos CSS que te permiten cambiar el aspecto de un bloque con un solo clic. Tras registrar un estilo de bloque, aparece un bot\u00f3n en la barra lateral del bloque para asignar un conjunto de estilos preconstruidos al bloque. Puedes activar y desactivar los estilos y previsualizar el bloque en el editor en tiempo real.<\/p>\n<figure id=\"attachment_196255\" aria-describedby=\"caption-attachment-196255\" style=\"width: 1698px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196255 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/06\/image-block-default-style-variations.jpg\" alt=\"Una captura de pantalla del editor de entradas de WordPress que muestra una imagen y la barra lateral de bloques.\" width=\"1698\" height=\"1092\"><figcaption id=\"caption-attachment-196255\" class=\"wp-caption-text\">El bloque principal Imagen tiene dos variaciones de estilo predeterminadas.<\/figcaption><\/figure>\n<p><strong>Las variaciones de estilo no alteran los atributos del bloque. S\u00f3lo modifican la apariencia de un bloque asignando una clase CSS al elemento envolvente del bloque.<\/strong><\/p>\n<p>Las variaciones de bloque son una herramienta m\u00e1s potente porque te permiten crear una versi\u00f3n preconfigurada de un bloque con atributos y bloques interiores. Tambi\u00e9n aparecen en el insertador de bloques del editor. Esencialmente, una variaci\u00f3n de bloque aparece ante el usuario como si fuera un bloque independiente, completamente independiente del bloque sobre el que se construye.<\/p>\n<p><strong>Las variaciones de bloque permiten personalizar el aspecto, la configuraci\u00f3n inicial y la estructura de un bloque.<\/strong><\/p>\n<p>Con todo esto en mente, \u00a1utilicemos estas herramientas para llevar los bloques Gutenberg al siguiente nivel!<\/p>\n<h2>Un efecto Polaroid animado en un bloque principal de Imagen<\/h2>\n<p>Ahora, \u00a1vamos a sumergirnos en nuestro proyecto! Vamos a ampliar el bloque principal Imagen con un plugin de Gutenberg para:<\/p>\n<ul>\n<li><strong>Implementar una Variaci\u00f3n del Estilo Polaroid:<\/strong> Los usuarios pueden aplicar un bonito efecto Polaroid a sus im\u00e1genes con un solo clic desde la barra lateral de configuraci\u00f3n del bloque.<\/li>\n<li><strong>A\u00f1adir una Animaci\u00f3n Hover:<\/strong> Mejoraremos las im\u00e1genes de estilo Polaroid con una sutil animaci\u00f3n hover.<\/li>\n<li><strong>Crea una Variaci\u00f3n del Bloque \u00abPolaroid Animada\u00bb:<\/strong> Esto permitir\u00e1 a los usuarios insertar r\u00e1pidamente im\u00e1genes Polaroid preconfiguradas con un efecto hover directamente desde el insertador de bloques.<\/li>\n<\/ul>\n<p>\u00bfEst\u00e1s preparado? \u00a1Vamos a configurar nuestro plugin!<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"-1\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<figure id=\"attachment_196838\" aria-describedby=\"caption-attachment-196838\" style=\"width: 1953px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196838 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/07\/front-end-animation.jpg\" alt=\"Un efecto de animaci\u00f3n en un bloque de Imagen\" width=\"1953\" height=\"1248\"><figcaption id=\"caption-attachment-196838\" class=\"wp-caption-text\">Un efecto de animaci\u00f3n en un bloque de Imagen<\/figcaption><\/figure>\n<h3>Configuraci\u00f3n del entorno<\/h3>\n<p>Antes de empezar, necesitamos configurar un entorno de desarrollo de WordPress con Node.js. Suponemos que ya has instalado tu entorno de desarrollo local de WordPress y las \u00faltimas versiones de <a href=\"https:\/\/kinqsta.com\/es\/blog\/como-instalar-node-js\/\">Node.js<\/a> y <a href=\"https:\/\/kinqsta.com\/es\/blog\/que-es-npm\/\">npm<\/a>. Si necesitas ayuda, consulta nuestro tutorial sobre <a href=\"https:\/\/kinqsta.com\/es\/blog\/plugin-gutenberg\/#how-to-create-a-block-editor-plugin-without-creating-a-custom-block\">c\u00f3mo crear un plugin Gutenberg para a\u00f1adir funcionalidad al editor de bloques<\/a>.<\/p>\n<h4>Paso 1 \u2013 Crear la estructura b\u00e1sica del plugin<\/h4>\n<p>Para este tutorial, llamaremos a nuestro plugin <strong>Image Hacker<\/strong>.<\/p>\n<p>Navega a tu directorio <code>plugins<\/code> y crea una nueva carpeta <code>image-hacker<\/code>. Dentro de esta carpeta, crea un nuevo archivo <code>image-hacker.php<\/code> (el archivo principal de tu plugin) y una subcarpeta <code>src<\/code>, donde crear\u00e1s las funcionalidades del plugin.<\/p>\n<p>Esta es la estructura b\u00e1sica de tu plugin:<\/p>\n<pre><code>\/wp-content\/plugins\/\n\u2514\u2500\u2500 \/image-hacker\/\n\t\u251c\u2500\u2500 image-hacker.php\n\t\u2514\u2500\u2500 \/src\/<\/code><\/pre>\n<h4>Paso 2 \u2013 Crear el c\u00f3digo PHP<\/h4>\n<p>A continuaci\u00f3n, debes asegurarte de que WordPress reconoce tu plugin. Para ello, a\u00f1ade el siguiente c\u00f3digo a <code>image-hacker.php<\/code>:<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/**\n * Plugin Name: Image Hacker\n * Description: Adds new features to the core Image block\n * Version:     1.0.0\n * Author:      Your Name\n * License:     GPL-2.0-or-later\n * License URI: https:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n * Text Domain: image-hacker\n *\/\n\nif ( ! defined( 'ABSPATH' ) ) {\n\texit; \/\/ Exit if accessed directly.\n}<\/code><\/pre>\n<h4>Paso 3 \u2013 Inicializar npm e instalar dependencias<\/h4>\n<p>Abre tu herramienta de l\u00ednea de comandos favorita y navega hasta el directorio de tu plugin. Una vez all\u00ed, ejecuta el siguiente comando:<\/p>\n<pre><code class=\"language-bash\">npm init -y<\/code><\/pre>\n<p>Este comando inicializa un nuevo archivo <code>package.json<\/code>, que incluye las dependencias y scripts de tu proyecto.<\/p>\n<p>A continuaci\u00f3n, tienes que instalar los scripts de WordPress y herramientas de construcci\u00f3n como webpack y Babel:<\/p>\n<pre><code class=\"language-bash\">npm install @wordpress\/plugins @wordpress\/scripts --save-dev<\/code><\/pre>\n<p>Este comando a\u00f1ade una carpeta <code>node_modules<\/code> con dependencias de nodos y un archivo <code>package-lock.json<\/code>. La siguiente imagen muestra la estructura actual de tu proyecto en <a href=\"https:\/\/kinqsta.com\/es\/blog\/extensiones-vscode\/\">Visual Studio Code<\/a>:<\/p>\n<figure id=\"attachment_196256\" aria-describedby=\"caption-attachment-196256\" style=\"width: 1880px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196256 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/06\/gutenberg-plugin-basic-structure.jpg\" alt=\"Captura de pantalla de un plugin de Gutenberg en Visual Studio Code\" width=\"1880\" height=\"759\"><figcaption id=\"caption-attachment-196256\" class=\"wp-caption-text\">Un plugin de Gutenberg en Visual Studio Code<\/figcaption><\/figure>\n<p>A continuaci\u00f3n, abre tu <code>package.json<\/code> y actualiza la propiedad <code>scripts<\/code> como se indica a continuaci\u00f3n:<\/p>\n<pre><code class=\"language-json\">{\n\t\"name\": \"image-hacker\",\n\t\"version\": \"1.0.0\",\n\t\"main\": \"index.js\",\n\t\"scripts\": {\n\t\t\"build\": \"wp-scripts build\",\n\t\t\"start\": \"wp-scripts start\"\n\t},\n\t\"keywords\": [],\n\t\"author\": \"\",\n\t\"license\": \"ISC\",\n\t\"description\": \"\",\n\t\"devDependencies\": {\n\t\t\"@wordpress\/plugins\": \"^7.25.0\",\n\t\t\"@wordpress\/scripts\": \"^30.18.0\"\n\t}\n}<\/code><\/pre>\n<p>Ten en cuenta que las versiones de <code>devDependencies<\/code> pueden diferir de las anteriores y dependen de las versiones reales instaladas en tu entorno.<\/p>\n<h4>Paso 4 \u2013 Crea los archivos fuente de tu plugin<\/h4>\n<p>El siguiente paso es crear los archivos fuente del plugin. Navega hasta la carpeta <code>src<\/code> y a\u00f1ade los siguientes archivos:<\/p>\n<ul>\n<li><code>index.js<\/code><\/li>\n<li><code>style.scss<\/code><\/li>\n<li><code>editor.scss<\/code><\/li>\n<\/ul>\n<p>La estructura del plugin deber\u00eda tener ahora este aspecto:<\/p>\n<pre><code>\/wp-content\/plugins\/\n\u2514\u2500\u2500 \/image-hacker\/\n\t\u251c\u2500\u2500 \/node-modules\/\n\t\u251c\u2500\u2500 image-hacker.php\n\t\u251c\u2500\u2500 package.json\n\t\u251c\u2500\u2500 package-lock.json\n\t\u2514\u2500\u2500 \/src\/\n\t\t\u251c\u2500\u2500 index.js\n\t\t\u251c\u2500\u2500 style.scss\n\t\t\u2514\u2500\u2500 editor.scss<\/code><\/pre>\n<p>Ahora abre tu panel de administraci\u00f3n de WordPress y navega hasta la pantalla de <strong>Plugins<\/strong>. Busca el plugin <strong>Image Hacker<\/strong> y act\u00edvalo.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>El <code>editor.scss<\/code> es el archivo donde declarar\u00e1s los estilos de bloque s\u00f3lo para el editor, mientras que el <code>style.scss<\/code> contiene los estilos de bloque tanto para el editor como para el frontend. No utilizaremos el archivo <code>editor.scss<\/code> en este proyecto.<\/p>\n<\/aside>\n\n<h4>Paso 5 \u2013 Incluir activos en el archivo de tu plugin<\/h4>\n<p>A continuaci\u00f3n, tienes que incluir los activos del plugin en el archivo principal del plugin. A\u00f1ade lo siguiente a <code>image-hacker.php<\/code>:<\/p>\n<pre><code class=\"language-php\">\/**\n * Enqueue block editor assets.\n *\/\nfunction image_hacker_enqueue_editor_assets() {\n\t$asset_file = include( plugin_dir_path( __FILE__ ) . 'build\/index.asset.php');\n\n\t\/\/ Enqueue the script with our modifications\n\twp_enqueue_script(\n\t\t'image-hacker-script',\n\t\tplugins_url( 'build\/index.js', __FILE__ ),\n\t\tarray( 'wp-plugins', 'wp-edit-post' ),\n\t\tfilemtime( plugin_dir_path( __FILE__ ) . 'build\/index.js' )\n\t);\n\n\t\/\/ Enqueue the editor-only styles\n\twp_enqueue_style(\n\t\t'image-hacker-editor-style',\n\t\tplugins_url( 'build\/editor.css', __FILE__ ),\n\t\t[],\n\t\tfilemtime( plugin_dir_path( __FILE__ ) . 'build\/editor.css' )\n\t);\n}\nadd_action( 'enqueue_block_editor_assets', 'image_hacker_enqueue_editor_assets' );\n\n\/**\n * Enqueue frontend and editor assets.\n *\/\nfunction image_hacker_enqueue_assets() {\n\t$asset_file = include( plugin_dir_path( __FILE__ ) . 'build\/index.asset.php');\n\n\t\/\/ Enqueue styles for both frontend and editor\n\twp_enqueue_style(\n\t\t'image-hacker-style',\n\t\tplugins_url( 'build\/style-index.css', __FILE__ ),\n\t\t[],\n\t\tfilemtime( plugin_dir_path( __FILE__ ) . 'build\/style-index.css' )\n\t);\n}\nadd_action( 'enqueue_block_assets', 'image_hacker_enqueue_assets' );<\/code><\/pre>\n<p>Esto es lo que hace este c\u00f3digo<\/p>\n<ul>\n<li>El hook de acci\u00f3n <code>enqueue_block_editor_assets<\/code> solicita el script <code>index.js<\/code> y el archivo <code>editor.css<\/code>.<\/li>\n<li>El hook de acci\u00f3n <code>enqueue_block_assets<\/code> solicita el archivo <code>style.css<\/code>.<\/li>\n<\/ul>\n<p>Ten en cuenta que este c\u00f3digo incluye los activos <code>.js<\/code> y <code>.css<\/code> ubicados en la carpeta <code>\/build\/<\/code> de tu plugin. Esto significa que, para que funcione, necesitas ejecutar el comando build en tu herramienta de l\u00ednea de comandos:<\/p>\n<pre><code class=\"language-bash\">npm run build<\/code><\/pre>\n<p>Ten en cuenta tambi\u00e9n que cuando importes un archivo llamado <code>style.scss<\/code> en <code>index.js<\/code>, el archivo CSS compilado no se llamar\u00e1 <code>style.css<\/code> sino <code>style-index.css<\/code>.<\/p>\n<h3>Registrar el estilo de bloque<\/h3>\n<p>Has completado la configuraci\u00f3n de tu entorno de desarrollo. Ahora, puedes pasar a la parte emocionante del proyecto y registrar tu variaci\u00f3n de estilo de bloque.<\/p>\n<p>Hay <a href=\"https:\/\/developer.wordpress.org\/themes\/features\/block-style-variations\/\" target=\"_blank\" rel=\"noopener noreferrer\">varias formas de registrar estilos de bloque<\/a>, y la que elijas depender\u00e1 de tus objetivos y preferencias personales. Nosotros seguiremos el enfoque JS para construir un plugin de Gutenberg. Abre tu archivo <code>\/src\/index.js<\/code> y pega el siguiente c\u00f3digo:<\/p>\n<pre><code class=\"language-javascript\">\/\/ Import the function to register block styles.\nimport { registerBlockStyle } from '@wordpress\/blocks';\n\n\/\/ Import the function to run code only when the DOM is ready.\nimport domReady from '@wordpress\/dom-ready';\n\n\/\/ This line tells the build process to include and compile our SCSS file.\nimport '.\/style.scss';\n\n\/**\n * Use domReady to run code only when the DOM is ready.\n *\/\ndomReady(() =&gt; {\n\t\/\/ Register our new style variation for the core image block.\n\tregisterBlockStyle('core\/image', {\n\t\tname: 'polaroid',\n\t\tlabel: 'Polaroid',\n\t});\n});<\/code><\/pre>\n<p><code>registerBlockStyle<\/code> con <code>domReady<\/code> garantiza que la variaci\u00f3n de estilo s\u00f3lo se registre cuando el DOM est\u00e9 completamente cargado. Consulta tambi\u00e9n la <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-styles\/\" target=\"_blank\" rel=\"noopener noreferrer\">documentaci\u00f3n oficial<\/a>.<\/p>\n<p>Cuando se selecciona el estilo <code>Polaroid<\/code>, WordPress a\u00f1ade autom\u00e1ticamente la clase <code>.is-style-polaroid<\/code> a la envoltura del bloque.<\/p>\n<p>El siguiente paso es proporcionar el CSS para tu variaci\u00f3n de estilo. Abre tu <code>\/src\/style.scss<\/code> y a\u00f1ade el siguiente c\u00f3digo:<\/p>\n<pre><code class=\"language-css\">.wp-block-image.is-style-polaroid {\n\tpadding: 15px 15px 70px 15px;\n\tbackground-color: white;\n\tbox-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\n\tmax-width: 360px;\n\ttransform: rotate(-3deg);\n\ttransition: transform 0.3s ease-in-out;\n\n\tfigure { \n\t\tmargin: 0 !important; \n\t}\n\t\n\timg { \n\t\tdisplay: block; \n\t\twidth: 100%; \n\t\theight: auto; \n\t}\n\t\n\tfigcaption {\n    \tposition: absolute; \n    \tbottom: 15px; \n    \tleft: 0; \n    \tright: 0;\n    \ttext-align: center; \n    \tfont-family: 'Permanent Marker', cursive;\n    \tcolor: #333; \n    \tfont-size: 18px;\n\t}\n}<\/code><\/pre>\n<p>Guarda tu c\u00f3digo, ejecuta <code>npm run build<\/code>, y salta a tu panel de control de WordPress. Crea una nueva entrada o p\u00e1gina y a\u00f1ade una imagen. Con la imagen seleccionada, haz clic en la etiqueta <strong>Estilos <\/strong>de la barra lateral del bloque y selecciona <strong>Polaroid<\/strong>.<\/p>\n<figure id=\"attachment_196692\" aria-describedby=\"caption-attachment-196692\" style=\"width: 1988px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196692 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/06\/style-variation.jpg\" alt=\"Una nueva variaci\u00f3n de estilo para el bloque Imagen\" width=\"1988\" height=\"1186\"><figcaption id=\"caption-attachment-196692\" class=\"wp-caption-text\">Una nueva variaci\u00f3n de estilo para el bloque Imagen<\/figcaption><\/figure>\n<p>A\u00f1ade un pie de foto, guarda la entrada y comprueba el resultado en el frontend. Deber\u00edas ver una imagen estilo Polaroid con un bonito pie de foto en cursiva.<\/p>\n<figure id=\"attachment_196903\" aria-describedby=\"caption-attachment-196903\" style=\"width: 1952px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196903 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/07\/is-style-polaroid.jpg\" alt=\"El elemento figura con la clase is_style_polaroid\" width=\"1952\" height=\"1296\"><figcaption id=\"caption-attachment-196903\" class=\"wp-caption-text\">El elemento figura con la clase is_style_polaroid<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Debido a la gran especificidad de los selectores, es posible que algunas propiedades (por ejemplo, <code>max-width<\/code>) no se apliquen en el editor. Si necesitas que se apliquen en el editor, puedes a\u00f1adir los estilos adecuados al archivo <code>editor.scss<\/code>.<\/p>\n<\/aside>\n\n<h3>Construye la l\u00f3gica<\/h3>\n<p>El siguiente paso es construir la l\u00f3gica para animar la imagen. Crearemos una animaci\u00f3n sencilla utilizando la propiedad CSS <code>transform<\/code>. Para empezar, a\u00f1ade el siguiente bloque a tu archivo <code>src\/style.scss<\/code>:<\/p>\n<pre><code class=\"language-css\">.wp-block-image.is-style-polaroid.has-image-animation:hover {\n\ttransform: rotate(0deg) scale(1.05);\n}<\/code><\/pre>\n<p>Este c\u00f3digo garantiza que el efecto hover s\u00f3lo se aplique si el bloque es una imagen Polaroid y tiene una clase <code>has-image-animation<\/code> aplicada desde el conmutador de la barra de herramientas.<\/p>\n<p>Ahora, necesitas la l\u00f3gica para a\u00f1adir la clase CSS al contenedor de la imagen, que es un elemento <code>figure<\/code>. Para ello, necesitas algunos filtros y funciones callback.<\/p>\n<p>En primer lugar, a\u00f1ade la siguiente l\u00ednea a tu archivo <code>src\/index.js<\/code>:<\/p>\n<pre><code class=\"language-javascript\">import { addFilter } from '@wordpress\/hooks';<\/code><\/pre>\n<h4>Paso 1. A\u00f1ade un nuevo atributo al bloque Imagen<\/h4>\n<p>Utilizar\u00e1s <code>addFilter<\/code> para manipular el bloque principal Imagen. Primero, a\u00f1ade un nuevo atributo <code>imageAnimation<\/code> al bloque Imagen:<\/p>\n<pre><code class=\"language-javascript\">function addImageAnimationAttribute( settings, name ) {\n\tif ( name !== 'core\/image' ) {\n\t\treturn settings;\n\t}\n\tsettings.attributes = {\n\t\t...settings.attributes,\n\t\timageAnimation: {\n\t\t\ttype: 'boolean',\n\t\t\tdefault: false,\n\t\t},\n\t};\n\treturn settings;\n}\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'image-hacker\/add-image-animation-attribute',\n\taddImageAnimationAttribute\n);<\/code><\/pre>\n<p>La funci\u00f3n callback <code>addImageAnimationAttribute<\/code> recibe dos argumentos:<\/p>\n<ul>\n<li><code>settings<\/code> \u2013 Un array de atributos del bloque actual<\/li>\n<li><code>name<\/code> \u2013 Especifica el nombre del bloque cuyos atributos quieres modificar.<\/li>\n<\/ul>\n<p>La funci\u00f3n devuelve el array de atributos actualizado.<\/p>\n<h4>Paso 2. A\u00f1adir un control de conmutador al bloque Imagen<\/h4>\n<p>A continuaci\u00f3n, tendr\u00e1s que a\u00f1adir un control a la barra de herramientas del bloque Imagen para activar la animaci\u00f3n.<\/p>\n<p>En primer lugar, a\u00f1ade los siguientes <code>import<\/code>s al archivo <code>index.js<\/code>:<\/p>\n<pre><code class=\"language-javascript\">import { createHigherOrderComponent } from '@wordpress\/compose';\nimport { Fragment } from '@wordpress\/element';\nimport { BlockControls } from '@wordpress\/block-editor';\nimport { ToolbarGroup, ToolbarButton } from '@wordpress\/components';\nimport { __ } from '@wordpress\/i18n';<\/code><\/pre>\n<p>A continuaci\u00f3n, a\u00f1ade el siguiente c\u00f3digo al final del archivo:<\/p>\n<pre><code class=\"language-javascript\">const withPolaroidControls = createHigherOrderComponent((BlockEdit) =&gt; {\n\treturn (props) =&gt; {\n\t\tif (props.name !== 'core\/image') {\n\t\t\treturn &lt;BlockEdit {...props} \/&gt;;\n\t\t}\n\n\t\tconst { attributes, setAttributes, isSelected } = props;\n\t\tconst { imageAnimation, className, lightbox } = attributes;\n\n\t\treturn (\n\t\t\t&lt;Fragment&gt;\n\t\t\t\t&lt;BlockEdit {...props} \/&gt;\n\n\t\t\t\t&lt;BlockControls&gt;\n\t\t\t\t\t&lt;ToolbarGroup&gt;\n\t\t\t\t\t\t&lt;ToolbarButton\n\t\t\t\t\t\t\ticon=\"format-image\"\n\t\t\t\t\t\t\tlabel={__('Toggle Animation', 'image-hacker')}\n\t\t\t\t\t\t\tisActive={imageAnimation}\n\t\t\t\t\t\t\tonClick={() =&gt;\n\t\t\t\t\t\t\t\tsetAttributes({ imageAnimation: !imageAnimation })\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t&lt;\/ToolbarGroup&gt;\n\t\t\t\t&lt;\/BlockControls&gt;\n\t\t\t&lt;\/Fragment&gt;\n\t\t);\n\t};\n}, 'withPolaroidControls');\n\naddFilter(\n\t'editor.BlockEdit',\n\t'image-hacker\/with-polaroid-controls',\n\twithPolaroidControls\n);<\/code><\/pre>\n<p>Esto es lo que hace este c\u00f3digo<\/p>\n<ul>\n<li>La funci\u00f3n <code>createHigherOrderComponent<\/code> <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-compose\/#createhigherordercomponent\" target=\"_blank\" rel=\"noopener noreferrer\">crea un componente de orden superior<\/a> (HOC) que envuelve a <code>BlockEdit<\/code>, que es el componente principal responsable de mostrar los bloques en el editor.<\/li>\n<li>El HOC intercepta el componente y comprueba si se trata de un bloque Imagen. Esto garantiza que todas tus ediciones s\u00f3lo se apliquen al bloque Imagen.<\/li>\n<li>Utilizamos la asignaci\u00f3n de desestructuraci\u00f3n para extraer las propiedades y atributos necesarios de los objetos <code>props<\/code> y <code>attributes<\/code>.<\/li>\n<li>Utilizamos <a href=\"https:\/\/developer.wordpress.org\/block-editor\/getting-started\/fundamentals\/block-in-the-editor\/\" target=\"_blank\" rel=\"noopener noreferrer\"><code>BlockControls<\/code><\/a>, <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/toolbar-group\/\" target=\"_blank\" rel=\"noopener noreferrer\"><code>ToolbarGroup<\/code><\/a>y <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/toolbar-button\/\" target=\"_blank\" rel=\"noopener noreferrer\"><code>ToolbarButton<\/code><\/a> para a\u00f1adir un bot\u00f3n <strong>Activar Animaci\u00f3n<\/strong> a la barra de herramientas del bloque.<\/li>\n<li><code>isActive<\/code> establece el estado por defecto de <code>imageAnimation<\/code><\/li>\n<li><code>onClick<\/code> alterna el valor de <code>imageAnimation<\/code>.<\/li>\n<\/ul>\n<figure id=\"attachment_196750\" aria-describedby=\"caption-attachment-196750\" style=\"width: 1668px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196750 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/07\/custom-block-toolbar-button.jpg\" alt=\"Se ha a\u00f1adido un bot\u00f3n personalizado a la barra de herramientas del bloque.\" width=\"1668\" height=\"588\"><figcaption id=\"caption-attachment-196750\" class=\"wp-caption-text\">Se ha a\u00f1adido un bot\u00f3n personalizado a la barra de herramientas del bloque.<\/figcaption><\/figure>\n<p>Ahora tienes un atributo y un bot\u00f3n. Sin embargo, si haces clic en el bot\u00f3n, no ocurre nada.<\/p>\n<h4>Paso 3. A\u00f1ade la clase CSS al elemento envoltorio<\/h4>\n<p>El siguiente paso es aplicar la clase <code>has-image-animation<\/code> al elemento <code>figure<\/code> que envuelve la imagen. Para ello, necesitas un filtro que te permita asignar la clase CSS a la imagen en el frontend.<\/p>\n<p>A\u00f1ade el siguiente c\u00f3digo al archivo <code>index.js<\/code>:<\/p>\n<pre><code class=\"language-javascript\">function addAnimationFrontendClass(extraProps, blockType, attributes) {\n\tif (blockType.name === 'core\/image' && attributes.imageAnimation) {\n\t\textraProps.className = `${extraProps.className || ''} has-image-animation`;\n\t}\n\treturn extraProps;\n}\n\naddFilter(\n\t'blocks.getSaveContent.extraProps',\n\t'image-hacker\/add-animation-frontend-class',\n\taddAnimationFrontendClass\n);<\/code><\/pre>\n<p>Este c\u00f3digo a\u00f1ade din\u00e1micamente la clase CSS <code>has-image-animation<\/code> al elemento <code>figure<\/code> cuando el atributo <code>imageAnimation<\/code> se establece en <code>true<\/code>.<\/p>\n<p>Intentemos comprender lo que ocurre en detalle.<\/p>\n<ul>\n<li><code>addFilter<\/code> hace hook en los procesos del editor para modificar datos o comportamientos.<\/li>\n<li><code>blocks.getSaveContent.extraProps<\/code> es el hook espec\u00edfico al que nos dirigimos. <code>extraProps<\/code> es un hook especial que te permite a\u00f1adir atributos HTML adicionales al elemento envoltorio.<\/li>\n<li><code>image-hacker\/add-animation-class<\/code> es el nombre \u00fanico de tu filtro.<\/li>\n<li><code>addAnimationFrontendClass<\/code> es el nombre de la funci\u00f3n de devoluci\u00f3n de llamada que se ejecuta cada vez que se ejecuta el hook <code>blocks.getSaveContent.extraProps<\/code>. Esta funci\u00f3n toma 3 argumentos:\n<ul>\n<li><code>extraProps<\/code>: Un objeto que contiene las propiedades del elemento envoltorio del bloque, como <code>className<\/code>.<\/li>\n<li><code>blockType<\/code>: Un objeto con detalles del bloque, como su <code>name<\/code> (<code>core\/image<\/code>).<\/li>\n<li><code>attributes<\/code>: Un objeto de atributos del bloque<\/li>\n<\/ul>\n<\/li>\n<li>La l\u00f3gica de la funci\u00f3n garantiza que el c\u00f3digo s\u00f3lo se ejecuta cuando <code>blockType.name === 'core\/image'<\/code> y <code>attributes.imageAnimation<\/code> son <code>true<\/code>.<\/li>\n<li>Si ambas condiciones son verdaderas, la funci\u00f3n devuelve un nuevo objeto <code>props<\/code> con <code>has-image-animation<\/code> a\u00f1adido al objeto de clase existente.<\/li>\n<\/ul>\n<p>Ahora, puedes probarlo t\u00fa mismo. A\u00f1ade una imagen a tu contenido, selecciona el estilo Polaroid en la barra lateral del bloque y haz clic en el bot\u00f3n <strong>Activar Animaci\u00f3n<\/strong> de la barra de herramientas del bloque. Guarda tu entrada y comprueba el resultado en el frontend. Tu imagen deber\u00eda girar cuando pases el rat\u00f3n sobre ella.<\/p>\n<figure id=\"attachment_196905\" aria-describedby=\"caption-attachment-196905\" style=\"width: 1954px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196905 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/07\/is-style-polaroid-has-image-animation.jpg\" alt=\"clases CSS is_style_polaroid y has_image_animation a\u00f1adidas al bloque Imagen\" width=\"1954\" height=\"1184\"><figcaption id=\"caption-attachment-196905\" class=\"wp-caption-text\">clases CSS is_style_polaroid y has_image_animation a\u00f1adidas al bloque Imagen<\/figcaption><\/figure>\n<h3>Registrar variaci\u00f3n de bloque<\/h3>\n<p>Las variaciones de bloque son versiones preconfiguradas de un bloque, con un conjunto de atributos y bloques anidados. WordPress trata las variaciones de bloque como bloques independientes, haci\u00e9ndolas disponibles en el insertador de bloques y marc\u00e1ndolas con un icono personalizado.<\/p>\n<p>Puedes utilizar una variaci\u00f3n de bloque para crear una nueva versi\u00f3n del bloque Imagen con el estilo Polaroid aplicado por defecto.<\/p>\n<p>El primer paso es importar la funci\u00f3n <code>registerBlockVariation<\/code> a tu archivo <code>\/src\/index.js<\/code>:<\/p>\n<pre><code class=\"language-javascript\">import { registerBlockStyle, registerBlockVariation } from '@wordpress\/blocks';<\/code><\/pre>\n<p>Luego a\u00f1ades una llamada a la funci\u00f3n <code>registerBlockVariation<\/code> dentro de <code>domReady()<\/code>, justo debajo de <code>registerBlockStyle<\/code>:<\/p>\n<pre><code class=\"language-javascript\">domReady(() =&gt; {\n\t\/\/ Register a style variation for the image block.\n\tregisterBlockStyle('core\/image', {\n\t\tname: 'polaroid',\n\t\tlabel: 'Polaroid',\n\t});\n\n\t\/\/ Register a block variation of the image block\n\tregisterBlockVariation('core\/image', {\n\t\tname: 'animated-polaroid',\n\t\ttitle: 'Animated Polaroid',\n\t\ticon: 'image-filter',\n\t\tattributes: {\n\t\t\tclassName: 'is-style-polaroid',\n\t\t\timageAnimation: true,\n\t\t},\n\t\tscope: ['inserter'],\n\t});\n});<\/code><\/pre>\n<p>La funci\u00f3n <code>registerBlockVariation<\/code> crea una variaci\u00f3n para un bloque existente. Acepta dos argumentos: el nombre del bloque y un objeto que define la variaci\u00f3n. (Consulta tambi\u00e9n la <a href=\"https:\/\/developer.wordpress.org\/news\/2023\/08\/an-introduction-to-block-variations\/\" target=\"_blank\" rel=\"noopener noreferrer\">introducci\u00f3n a las variaciones de bloque<\/a> y la <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-variations\/\" target=\"_blank\" rel=\"noopener noreferrer\">documentaci\u00f3n de la API Variaciones de bloque<\/a>).<\/p>\n<p>Guarda tu archivo, ejecuta la construcci\u00f3n para aplicar los cambios y, a continuaci\u00f3n, vuelve al administrador de WordPress. Crea una nueva entrada y busca el bloque <b>Polaroid Animada<\/b> en el insertador de bloques.<\/p>\n<figure id=\"attachment_196842\" aria-describedby=\"caption-attachment-196842\" style=\"width: 1362px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196842 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/07\/block-inserter.jpg\" alt=\"Una variaci\u00f3n de bloque en el insertador de bloques\" width=\"1362\" height=\"876\"><figcaption id=\"caption-attachment-196842\" class=\"wp-caption-text\">Una variaci\u00f3n de bloque en el insertador de bloques<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Debido a la complejidad del entorno y a la especificidad de los selectores, no a\u00f1adiremos el c\u00f3digo que genera la animaci\u00f3n en el editor de bloques. Por este motivo, la animaci\u00f3n no funcionar\u00e1 en el editor.<\/p>\n<\/aside>\n\n<h3>Pruebas y depuraci\u00f3n<\/h3>\n<p>Hagamos algunas pruebas. A\u00f1ade una o varias im\u00e1genes a una nueva entrada. Selecciona el estilo Polaroid para cada imagen, activa la animaci\u00f3n y a\u00f1ade enlaces. Adem\u00e1s, haz pruebas con el bloque Galer\u00eda.<\/p>\n<p>Todo parece funcionar como se espera. Sin embargo, a\u00f1adir un enlace con efecto lightbox a una imagen con el estilo Polaroid no produce un resultado agradable.<\/p>\n<p>Este extra\u00f1o comportamiento parece deberse a un problema de compatibilidad entre la caja de luz de WordPress y las transiciones CSS.<\/p>\n<p>Para evitar un proceso de depuraci\u00f3n largo y complejo, puedes desactivar la opci\u00f3n <strong>Ampliar al hacer clic<\/strong> y a\u00f1adir una advertencia para notificar a los usuarios que la caja de luz est\u00e1 desactivada.<\/p>\n<p>Primero necesitas importar algunos recursos adicionales. A continuaci\u00f3n encontrar\u00e1s la lista completa de recursos importados desde el archivo <code>\/src\/index.js<\/code>:<\/p>\n<pre><code class=\"language-javascript\">import { registerBlockStyle, registerBlockVariation } from '@wordpress\/blocks';\nimport domReady from '@wordpress\/dom-ready';\nimport { addFilter } from '@wordpress\/hooks';\nimport { createHigherOrderComponent } from '@wordpress\/compose';\nimport { Fragment, useEffect } from '@wordpress\/element';\nimport { InspectorControls, BlockControls } from '@wordpress\/block-editor';\nimport { PanelBody, Notice, ToolbarGroup, ToolbarButton } from '@wordpress\/components';\nimport { __ } from '@wordpress\/i18n';\nimport { useDispatch } from '@wordpress\/data';\nimport '.\/style.scss';<\/code><\/pre>\n<p>Hemos a\u00f1adido las siguientes importaciones:<\/p>\n<ul>\n<li><code>useEffect<\/code> de <code>@wordpress\/element<\/code>. (Ver <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-element\/#useeffect\" target=\"_blank\" rel=\"noopener noreferrer\">documentaci\u00f3n<\/a>)<\/li>\n<li><code>InspectorControls<\/code> de <code>@wordpress\/block-editor<\/code> (Ver <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/HEAD\/packages\/block-editor\/src\/components\/inspector-controls\/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">documentaci\u00f3n<\/a>).<\/li>\n<li><code>PanelBody<\/code> y <code>Notice<\/code> de <code>@wordpress\/components<\/code> (Ver <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/components\/panel\/\" target=\"_blank\" rel=\"noopener noreferrer\">documentaci\u00f3n<\/a>).<\/li>\n<li><code>useDispatch<\/code> desde <code>@wordpress\/data<\/code>. (Ver <a href=\"https:\/\/developer.wordpress.org\/news\/2022\/12\/application-state-managed-withdispatch-withselect-and-compose-101\/\" target=\"_blank\" rel=\"noopener noreferrer\">blog del desarrollador de WordPress<\/a>)<\/li>\n<\/ul>\n<p>Ahora cambia la funci\u00f3n <code>withPolaroidControls<\/code> de la siguiente manera:<\/p>\n<pre><code class=\"language-javascript\">const withPolaroidControls = createHigherOrderComponent((BlockEdit) =&gt; {\n\treturn (props) =&gt; {\n\t\tif (props.name !== 'core\/image') {\n\t\t\treturn &lt;BlockEdit {...props} \/&gt;;\n\t\t}\n\n\t\tconst { attributes, setAttributes, isSelected } = props;\n\t\tconst { imageAnimation, className, lightbox } = attributes;\n\n\t\tconst isPolaroid = className?.includes('is-style-polaroid');\n\n\t\tconst { createNotice } = useDispatch('core\/notices');\n\n\t\tuseEffect(() =&gt; {\n\t\t\tif (isPolaroid && lightbox?.enabled) {\n\t\t\t\t\/\/ Disable the lightbox to prevent the conflict.\n\t\t\t\tsetAttributes({ lightbox: { ...lightbox, enabled: false } });\n\n\t\t\t\t\/\/ Show the user a temporary 'snackbar' notice.\n\t\t\t\tcreateNotice(\n\t\t\t\t\t'warning', \/\/ The type of notice (info, success, warning, error)\n\t\t\t\t\t__('Lightbox disabled for Polaroid style.', 'image-hacker'),\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: 'snackbar',\n\t\t\t\t\t\tisDismissible: true,\n\t\t\t\t\t}\n\t\t\t\t);\n\t\t\t}\n\t\t}, [isPolaroid, lightbox]);\n\n\t\treturn (\n\t\t\t&lt;Fragment&gt;\n\t\t\t\t&lt;BlockEdit {...props} \/&gt;\n\n\t\t\t\t&lt;BlockControls&gt;\n\t\t\t\t\t&lt;ToolbarGroup&gt;\n\t\t\t\t\t\t&lt;ToolbarButton\n\t\t\t\t\t\t\ticon=\"format-image\"\n\t\t\t\t\t\t\tlabel={__('Toggle Animation', 'image-hacker')}\n\t\t\t\t\t\t\tisActive={imageAnimation}\n\t\t\t\t\t\t\tonClick={() =&gt;\n\t\t\t\t\t\t\t\tsetAttributes({ imageAnimation: !imageAnimation })\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\/&gt;\n\t\t\t\t\t&lt;\/ToolbarGroup&gt;\n\t\t\t\t&lt;\/BlockControls&gt;\n\n\t\t\t\t{isSelected && isPolaroid && (\n\t\t\t\t\t&lt;InspectorControls&gt;\n\t\t\t\t\t\t&lt;PanelBody title={__('Polaroid Style', 'image-hacker')}&gt;\n\t\t\t\t\t\t\t&lt;Notice status=\"info\" isDismissible={false}&gt;\n\t\t\t\t\t\t\t\t{__(\n\t\t\t\t\t\t\t\t\t'The \"Expand on click\" (lightbox) feature is disabled for this style to prevent visual conflicts.',\n\t\t\t\t\t\t\t\t\t'image-hacker'\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t&lt;\/Notice&gt;\n\t\t\t\t\t\t&lt;\/PanelBody&gt;\n\t\t\t\t\t&lt;\/InspectorControls&gt;\n\t\t\t\t)}\n\t\t\t&lt;\/Fragment&gt;\n\t\t);\n\t};\n}, 'withPolaroidControls');<\/code><\/pre>\n<ul>\n<li><code>useEffect<\/code> es un Hook React que \u00abte permite sincronizar un componente con un sistema externo\u00bb. El c\u00f3digo se ejecuta despu\u00e9s de que el componente se haya renderizado y cada vez que cambie un valor del array de dependencias <code>[isPolaroid, lightbox]<\/code>. La comprobaci\u00f3n s\u00f3lo se ejecuta cuando el usuario aplica o elimina el estilo Polaroid o activa o desactiva la caja de luz (consulta la <a href=\"https:\/\/react.dev\/reference\/react\/useEffect\" target=\"_blank\" rel=\"noopener noreferrer\">documentaci\u00f3n de React<\/a>).<\/li>\n<li>La condici\u00f3n <code>if (isPolaroid() && lightbox.enabled)<\/code> garantiza que el c\u00f3digo s\u00f3lo se ejecute si la imagen tiene el estilo Polaroid y la opci\u00f3n lightbox est\u00e1 activada.<\/li>\n<li>Si la condici\u00f3n es <code>true<\/code>, la caja de luz se desactiva y aparece un aviso temporal. (Ver tambi\u00e9n la referencia de <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/data\/data-core-notices\/\" target=\"_blank\" rel=\"noopener noreferrer\">datos Avisos<\/a>).<\/li>\n<li>La condici\u00f3n <code>isSelected && isPolaroid<\/code> genera un nuevo panel en la barra de herramientas del bloque de imagen para notificar a los usuarios que la caja de luz est\u00e1 desactivada. A diferencia de la barra de herramientas, este panel muestra un aviso permanente.<\/li>\n<\/ul>\n<figure id=\"attachment_196858\" aria-describedby=\"caption-attachment-196858\" style=\"width: 2184px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-196858 size-full\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2025\/07\/enlarge-on-click-disabled.jpg\" alt=\"La opci\u00f3n Ampliar al hacer clic est\u00e1 desactivada.\" width=\"2184\" height=\"1406\"><figcaption id=\"caption-attachment-196858\" class=\"wp-caption-text\">La opci\u00f3n Ampliar al hacer clic est\u00e1 desactivada.<\/figcaption><\/figure>\n<h2>Resumen<\/h2>\n<p>En este tutorial, hemos profundizado en algunas de las funcionalidades m\u00e1s interesantes y potentes para desarrolladores del editor de bloques de WordPress a trav\u00e9s de un proyecto real: hemos ampliado el bloque Imagen b\u00e1sico con funcionalidades que no est\u00e1n disponibles de serie, con estilos personalizados y efectos de animaci\u00f3n.<\/p>\n<p>Hemos seguido un enfoque de mejora progresiva, creando una variaci\u00f3n de estilo de bloque para el bloque Imagen. Esto permite a los usuarios dar f\u00e1cilmente a sus im\u00e1genes un aspecto cl\u00e1sico de Polaroid.<\/p>\n<p>A continuaci\u00f3n, hemos a\u00f1adido un bot\u00f3n espec\u00edfico a la barra de herramientas del bloque Imagen, que permite a los usuarios crear un atractivo efecto de animaci\u00f3n al pasar el cursor por encima.<\/p>\n<p>Por \u00faltimo, lo hemos completado creando una variaci\u00f3n del bloque preconfigurada con el estilo Polaroid y los ajustes de animaci\u00f3n aplicados por defecto.<\/p>\n<p>Esperamos que las ideas y t\u00e9cnicas que has adquirido en este tutorial te permitan crear algunas personalizaciones realmente sorprendentes para los bloques principales de Gutenberg.<\/p>\n<p>\u00a1Feliz programaci\u00f3n!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Gutenberg se ha convertido en un editor potente y altamente personalizable. M\u00e1s all\u00e1 de sus s\u00f3lidas funcionalidades listas para usar, los desarrolladores de WordPress ahora pueden &#8230;<\/p>\n","protected":false},"author":36,"featured_media":79800,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1345],"class_list":["post-79799","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-desarrollo-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>Dominar Estilos y Variaciones de bloques en Gutenberg<\/title>\n<meta name=\"description\" content=\"\u00bfQuieres aprender a hackear Gutenberg y a\u00f1adir funcionalidades avanzadas a tus bloques con estilo y variaciones de bloques? \u00a1No te pierdas este tutorial!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/es\/blog\/variaciones-de-bloque-con-estilos-gutenberg\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo personalizar bloques de Gutenberg con variaciones de Estilo y variaciones de Bloque\" \/>\n<meta property=\"og:description\" content=\"\u00bfQuieres aprender a hackear Gutenberg y a\u00f1adir funcionalidades avanzadas a tus bloques con estilo y variaciones de bloques? \u00a1No te pierdas este tutorial!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/es\/blog\/variaciones-de-bloque-con-estilos-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=\"2025-08-07T07:56:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-11T06:22:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/08\/gutenberg-style-variations-and-block-variations.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1470\" \/>\n\t<meta property=\"og:image:height\" content=\"735\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"\u00bfQuieres aprender a hackear Gutenberg y a\u00f1adir funcionalidades avanzadas a tus bloques con estilo y variaciones de bloques? \u00a1No te pierdas este tutorial!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/08\/gutenberg-style-variations-and-block-variations.png\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\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:\/\/kinqsta.com\/es\/blog\/variaciones-de-bloque-con-estilos-gutenberg\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/variaciones-de-bloque-con-estilos-gutenberg\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"C\u00f3mo personalizar bloques de Gutenberg con variaciones de Estilo y variaciones de Bloque\",\"datePublished\":\"2025-08-07T07:56:26+00:00\",\"dateModified\":\"2025-08-11T06:22:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/variaciones-de-bloque-con-estilos-gutenberg\/\"},\"wordCount\":2935,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/variaciones-de-bloque-con-estilos-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/08\/gutenberg-style-variations-and-block-variations.png\",\"inLanguage\":\"es\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/variaciones-de-bloque-con-estilos-gutenberg\/\",\"url\":\"https:\/\/kinqsta.com\/es\/blog\/variaciones-de-bloque-con-estilos-gutenberg\/\",\"name\":\"Dominar Estilos y Variaciones de bloques en Gutenberg\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/variaciones-de-bloque-con-estilos-gutenberg\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/variaciones-de-bloque-con-estilos-gutenberg\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/08\/gutenberg-style-variations-and-block-variations.png\",\"datePublished\":\"2025-08-07T07:56:26+00:00\",\"dateModified\":\"2025-08-11T06:22:40+00:00\",\"description\":\"\u00bfQuieres aprender a hackear Gutenberg y a\u00f1adir funcionalidades avanzadas a tus bloques con estilo y variaciones de bloques? \u00a1No te pierdas este tutorial!\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/variaciones-de-bloque-con-estilos-gutenberg\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/es\/blog\/variaciones-de-bloque-con-estilos-gutenberg\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/variaciones-de-bloque-con-estilos-gutenberg\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/08\/gutenberg-style-variations-and-block-variations.png\",\"contentUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/08\/gutenberg-style-variations-and-block-variations.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/es\/blog\/variaciones-de-bloque-con-estilos-gutenberg\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Desarrollo WordPress\",\"item\":\"https:\/\/kinqsta.com\/es\/secciones\/desarrollo-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"C\u00f3mo personalizar bloques de Gutenberg con variaciones de Estilo y variaciones de Bloque\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/es\/#website\",\"url\":\"https:\/\/kinqsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.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:\/\/kinqsta.com\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinqsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinqsta.com\/es\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Dominar Estilos y Variaciones de bloques en Gutenberg","description":"\u00bfQuieres aprender a hackear Gutenberg y a\u00f1adir funcionalidades avanzadas a tus bloques con estilo y variaciones de bloques? \u00a1No te pierdas este tutorial!","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:\/\/kinqsta.com\/es\/blog\/variaciones-de-bloque-con-estilos-gutenberg\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo personalizar bloques de Gutenberg con variaciones de Estilo y variaciones de Bloque","og_description":"\u00bfQuieres aprender a hackear Gutenberg y a\u00f1adir funcionalidades avanzadas a tus bloques con estilo y variaciones de bloques? \u00a1No te pierdas este tutorial!","og_url":"https:\/\/kinqsta.com\/es\/blog\/variaciones-de-bloque-con-estilos-gutenberg\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2025-08-07T07:56:26+00:00","article_modified_time":"2025-08-11T06:22:40+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/08\/gutenberg-style-variations-and-block-variations.png","type":"image\/png"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"\u00bfQuieres aprender a hackear Gutenberg y a\u00f1adir funcionalidades avanzadas a tus bloques con estilo y variaciones de bloques? \u00a1No te pierdas este tutorial!","twitter_image":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/08\/gutenberg-style-variations-and-block-variations.png","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Carlo Daniele","Tiempo de lectura":"20 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/es\/blog\/variaciones-de-bloque-con-estilos-gutenberg\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/es\/blog\/variaciones-de-bloque-con-estilos-gutenberg\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinqsta.com\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"C\u00f3mo personalizar bloques de Gutenberg con variaciones de Estilo y variaciones de Bloque","datePublished":"2025-08-07T07:56:26+00:00","dateModified":"2025-08-11T06:22:40+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/es\/blog\/variaciones-de-bloque-con-estilos-gutenberg\/"},"wordCount":2935,"publisher":{"@id":"https:\/\/kinqsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/es\/blog\/variaciones-de-bloque-con-estilos-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/08\/gutenberg-style-variations-and-block-variations.png","inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/es\/blog\/variaciones-de-bloque-con-estilos-gutenberg\/","url":"https:\/\/kinqsta.com\/es\/blog\/variaciones-de-bloque-con-estilos-gutenberg\/","name":"Dominar Estilos y Variaciones de bloques en Gutenberg","isPartOf":{"@id":"https:\/\/kinqsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/es\/blog\/variaciones-de-bloque-con-estilos-gutenberg\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/es\/blog\/variaciones-de-bloque-con-estilos-gutenberg\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/08\/gutenberg-style-variations-and-block-variations.png","datePublished":"2025-08-07T07:56:26+00:00","dateModified":"2025-08-11T06:22:40+00:00","description":"\u00bfQuieres aprender a hackear Gutenberg y a\u00f1adir funcionalidades avanzadas a tus bloques con estilo y variaciones de bloques? \u00a1No te pierdas este tutorial!","breadcrumb":{"@id":"https:\/\/kinqsta.com\/es\/blog\/variaciones-de-bloque-con-estilos-gutenberg\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/es\/blog\/variaciones-de-bloque-con-estilos-gutenberg\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinqsta.com\/es\/blog\/variaciones-de-bloque-con-estilos-gutenberg\/#primaryimage","url":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/08\/gutenberg-style-variations-and-block-variations.png","contentUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/08\/gutenberg-style-variations-and-block-variations.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/es\/blog\/variaciones-de-bloque-con-estilos-gutenberg\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Desarrollo WordPress","item":"https:\/\/kinqsta.com\/es\/secciones\/desarrollo-wordpress\/"},{"@type":"ListItem","position":3,"name":"C\u00f3mo personalizar bloques de Gutenberg con variaciones de Estilo y variaciones de Bloque"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/es\/#website","url":"https:\/\/kinqsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinqsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinqsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.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:\/\/kinqsta.com\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinqsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinqsta.com\/es\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts\/79799","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/comments?post=79799"}],"version-history":[{"count":8,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts\/79799\/revisions"}],"predecessor-version":[{"id":79822,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/posts\/79799\/revisions\/79822"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/79799\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/79799\/translations\/it"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/79799\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/79799\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/79799\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/79799\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/79799\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/79799\/translations\/pt"},{"href":"https:\/\/kinqsta.com\/es\/wp-json\/kinsta\/v1\/posts\/79799\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/media\/79800"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/media?parent=79799"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/tags?post=79799"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/es\/wp-json\/wp\/v2\/topic?post=79799"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}