Bloques Gutenberg, patrones y full site editing: la guía completa de WordPress (2026)

#Por que los bloques cambiaron todo en WordPress

WordPress sirvio a la web a través de una única caja de texto enriquecido durante más de quince años. Eso cambio en diciembre de 2018 cuando la versión 5.0 se lanzo con el editor de bloques Gutenberg. En lugar de pegar HTML crudo o luchar con shortcodes, cada elemento de contenido se convirtio en un bloque independiente: un parrafo, una imagen, una galeria, un boton, una tabla. Los bloques pueden moverse, duplicarse, agruparse y estilizarse de forma independiente.

En 2026, el editor de bloques ya no es opcional. Controla la edicion de entradas, la construccion de páginas y, con el full site editing, toda la capa del tema. Ya seas propietario de un sitio que pública artículos o un desarrollador que entrega proyectos a clientes, comprender los bloques, los patrones y el Site Editor es una competencia esencial.

Esta guía recorre cada capa del ecosistema de bloques, desde el panel de insercion hasta la construccion de un tema de bloques personalizado desde cero.

#Comprender el panel de insercion de bloques

El panel de insercion de bloques es la puerta de entrada a cada elemento que puedes colocar en una página. Abrelo haciendo clic en el boton azul + en la barra de herramientas superior izquierda o escribiendo / en un parrafo vacio.

El panel de insercion agrupa bloques en categorías:

• Texto - parrafo, encabezado, lista, cita, código, preformateado, pullquote, verso
• Medios - imagen, galeria, audio, video, cover, archivo
• Diseño - botones, columnas, grupo, fila, pila, separador, espaciador
• Widgets - shortcode, archivos, categorías, entradas recientes, búsqueda, iconos sociales
• Tema - navegación, logotipo del sitio, título del sitio, query loop, parte de plantilla, título de entrada, contenido de entrada
• Incrustaciones - YouTube, Twitter, Spotify, Vimeo y docenas más via oEmbed

Cada bloque ofrece su propia barra de herramientas (formato en linea, alineacion, enlace) y un panel lateral con ajustes avanzados (ancla HTML, clases CSS adicionales, color, tipografia). Dominar el panel de insercion significa que rara vez necesitas un plugin de page builder para diseños estándar.

#Atajos de teclado que ahorran tiempo

La edicion productiva de bloques depende de atajos:

• / seguido del nombre de un bloque lo inserta al instante
• Ctrl+Shift+D (Cmd en macOS) duplica el bloque seleccionado
• Ctrl+Alt+T inserta un bloque antes del actual
• Ctrl+Alt+Y inserta un bloque despues del actual
• Shift+Alt+Z elimina el bloque seleccionado
• Ctrl+Shift+K elimina un enlace del texto seleccionado

Combina estos con el tirador de arrastre en cada bloque, y podras reorganizar diseños complejos sin tocar el raton.

#Crear y gestionar patrones sincronizados (bloques reutilizables)

WordPress 6.3 renombro los “bloques reutilizables” como “patrones sincronizados”, pero el concepto sigue siendo el mismo: guarda un bloque o grupo de bloques una vez e insertalo en cualquier lugar de tu sitio. Cuando editas una instancia, todas las ubicaciones se actualizan.

#Como crear un patron sincronizado

1. Selecciona uno o más bloques en el editor.
2. Abre la barra de herramientas del bloque y haz clic en el menú de tres puntos.
3. Elige Crear patron.
4. Dale al patron un nombre y una categoría.
5. Activa Sincronizado. (Dejarlo desactivado crea un patron estándar, no sincronizado.)
6. Haz clic en Crear.

El patron ahora aparece en el panel de insercion bajo la pestana Patrones y dentro de la categoría Sincronizado.

#Casos de uso practicos

• Banners de llamada a la accion - un único grupo de bloques CTA usado en cada página de destino, actualizado una vez cuando cambia la campana.
• Secciones de testimonios - un bloque de columnas con citas de clientes que se mantiene consistente en las páginas de servicios.
• Avisos legales - texto juridico que debe permanecer identico en todo el sitio.
• Formularios de suscripcion al boletin - un bloque de formulario sincronizado entre la barra lateral del blog y el pie de página.

#Gestionar patrones desde la administración

Navega a Apariencia > Editor > Patrones (o la pantalla independiente de Patrones en /wp-admin/edit.php?post_type=wp_block) para ver, editar, duplicar, exportar o eliminar tus patrones. También puedes convertir un patron sincronizado en un patron regular (no sincronizado) abriendolo y desactivando el estado de sincronizacion.

#Patrones de bloques y el directorio de patrones

Mientras que los patrones sincronizados son tus propios componentes reutilizables, los patrones de bloques son diseños predefinidos que insertas y personalizas libremente. WordPress incluye patrones integrados (secciones hero, cuadriculas de testimonios, tablas de precios, listas de características), y miles mas estan disponibles en el directorio oficial de patrones en wordpress.org/patterns.

#Usar patrones del directorio

1. Abre el panel de insercion y haz clic en la pestana Patrones.
2. Navega por categorías o busca por palabra clave.
3. Haz clic en un patron para insertarlo en el editor.
4. Modifica texto, imágenes, colores y espaciado para que coincida con tu marca.

Como los patrones se convierten en copias independientes tras la insercion, puedes cambiar cada detalle sin afectar al original.

#Registrar un patron de bloque personalizado en PHP

Los temas y plugins pueden registrar patrones programaticamente. Aqui hay un ejemplo minimo en functions.php:

<?php
declare(strict_types=1);

add_action('init', function (): void {
    register_block_pattern(
        'wppoland/hero-with-cta',
        [
            'title'       => __('Hero con CTA', 'wppoland'),
            'description' => __('Una seccion hero de ancho completo con encabezado, parrafo y boton.', 'wppoland'),
            'categories'  => ['featured', 'banner'],
            'keywords'    => ['hero', 'cta', 'banner'],
            'content'     => '
                <!-- wp:cover {"overlayColor":"contrast","isUserOverlayColor":true,"minHeight":500,"align":"full"} -->
                <div class="wp-block-cover alignfull" style="min-height:500px">
                    <span class="wp-block-cover__background has-contrast-background-color"></span>
                    <div class="wp-block-cover__inner-container">
                        <!-- wp:heading {"textAlign":"center","level":1} -->
                        <h1 class="wp-block-heading has-text-align-center">Tu encabezado aqui</h1>
                        <!-- /wp:heading -->
                        <!-- wp:paragraph {"align":"center"} -->
                        <p class="has-text-align-center">Texto de apoyo que explica la propuesta de valor.</p>
                        <!-- /wp:paragraph -->
                        <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
                        <div class="wp-block-buttons">
                            <!-- wp:button -->
                            <div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Comenzar</a></div>
                            <!-- /wp:button -->
                        </div>
                        <!-- /wp:buttons -->
                    </div>
                </div>
                <!-- /wp:cover -->
            ',
        ]
    );
});

Desde WordPress 6.0 también puedes colocar archivos de patrones en un directorio patterns/ en la raiz del tema. Cada archivo usa un comentario de cabecera para metadatos y devuelve marcado de bloques, permitiendo el registro automático sin register_block_pattern().

#Full site editing: como el Site Editor reemplaza al Customizer

Full site editing (FSE) es el termino general para usar bloques para controlar cada parte de tu sitio, no solo el contenido de las entradas, sino también cabeceras, pies de página, barras laterales, diseños de archivo y páginas 404. Se implemento incrementalmente desde WordPress 5.9 hasta 6.5 y ahora es el enfoque estándar para temas de bloques.

#Que reemplaza el full site editing

#Acceder al Site Editor

Con un tema de bloques activo, ve a Apariencia > Editor. La interfaz se abre en una vista previa visual. Desde la barra lateral izquierda puedes navegar a:

• Plantillas - index, single, página, archivo, 404, búsqueda, inicio y cualquier plantilla personalizada
• Partes de plantilla - cabecera, pie de página, barra lateral y partes personalizadas
• Patrones - todos los patrones registrados y creados por el usuario
• Estilos - tipografia global, colores, espaciado y anulaciones de estilo por bloque
• Navegación - gestión de menús basada en el bloque de navegación

Cada cambio se previsualiza en tiempo real y se guarda en la base de datos. Para desarrolladores de temas, los cambios pueden exportarse como archivos de tema para control de versiones.

#Crear plantillas y partes de plantilla personalizadas

Las plantillas definen la estructura de un tipo de página. Las partes de plantilla son fragmentos reutilizables (cabecera, pie de página) compartidos entre plantillas.

#Crear una plantilla en el Site Editor

1. Abre Apariencia > Editor > Plantillas.
2. Haz clic en Anadir nueva plantilla.
3. Selecciona un tipo de plantilla (página, entrada individual, categoría, autor, personalizada).
4. Construye el diseño usando bloques: agrega una parte de plantilla de cabecera arriba, un query loop para entradas, una parte de plantilla de pie de página abajo.
5. Guarda.

#Formato de marcado de plantillas

Bajo el capo, cada plantilla es un archivo HTML de marcado de bloques. Aqui hay un templates/single.html simplificado:

<!-- wp:template-part {"slug":"header","area":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:post-title {"level":1} /-->
    <!-- wp:post-featured-image /-->
    <!-- wp:post-content /-->
    <!-- wp:post-terms {"term":"category"} /-->
    <!-- wp:post-terms {"term":"post_tag"} /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","area":"footer"} /-->

Las partes de plantilla se encuentran en el directorio parts/. Un parts/header.html podria verse asi:

<!-- wp:group {"tagName":"header","layout":{"type":"flex","justifyContent":"space-between"}} -->
<header class="wp-block-group">
    <!-- wp:site-title /-->
    <!-- wp:navigation /-->
</header>
<!-- /wp:group -->

Esta estructura elimina las etiquetas de plantilla PHP (get_header(), the_title(), the_content()) en favor de marcado de bloques declarativo. El resultado es un tema que disenadores y editores de contenido pueden modificar directamente en el Site Editor.

#Fundamentos de la configuración theme.json

theme.json es el único archivo de configuración que controla lo que el editor muestra y como se ve el front-end. Se ubica en la raiz de tu tema de bloques.

#Ejemplo minimo de theme.json

{
  "$schema": "https://schemas.wp.org/wp/6.7/theme.json",
  "versión": 3,
  "settings": {
    "color": {
      "palette": [
        { "slug": "primary", "color": "#1e40af", "name": "Primary" },
        { "slug": "secondary", "color": "#9333ea", "name": "Secondary" },
        { "slug": "base", "color": "#ffffff", "name": "Base" },
        { "slug": "contrast", "color": "#1a1a1a", "name": "Contrast" }
      ],
      "gradients": [],
      "defaultPalette": false,
      "defaultGradients": false
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "Inter, sans-serif",
          "slug": "body",
          "name": "Body"
        },
        {
          "fontFamily": "'Space Grotesk', sans-serif",
          "slug": "heading",
          "name": "Heading"
        }
      ],
      "fontSizes": [
        { "slug": "small", "size": "0.875rem", "name": "Small" },
        { "slug": "medium", "size": "1rem", "name": "Medium" },
        { "slug": "large", "size": "1.5rem", "name": "Large" },
        { "slug": "x-large", "size": "2.25rem", "name": "Extra Large" }
      ]
    },
    "spacing": {
      "units": ["rem", "vh", "vw", "%"],
      "spacingSizes": [
        { "slug": "10", "size": "0.5rem", "name": "Tiny" },
        { "slug": "20", "size": "1rem", "name": "Small" },
        { "slug": "30", "size": "1.5rem", "name": "Medium" },
        { "slug": "40", "size": "2.5rem", "name": "Large" },
        { "slug": "50", "size": "4rem", "name": "Extra Large" }
      ]
    },
    "layout": {
      "contentSize": "720px",
      "wideSize": "1200px"
    },
    "appearanceTools": true
  },
  "styles": {
    "color": {
      "background": "var(--wp--preset--color--base)",
      "text": "var(--wp--preset--color--contrast)"
    },
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--body)",
      "fontSize": "var(--wp--preset--font-size--medium)",
      "lineHeight": "1.6"
    },
    "elements": {
      "heading": {
        "typography": {
          "fontFamily": "var(--wp--preset--font-family--heading)",
          "fontWeight": "700"
        }
      },
      "link": {
        "color": {
          "text": "var(--wp--preset--color--primary)"
        }
      }
    },
    "blocks": {
      "core/button": {
        "color": {
          "background": "var(--wp--preset--color--primary)",
          "text": "var(--wp--preset--color--base)"
        },
        "border": {
          "radius": "4px"
        }
      }
    }
  }
}

#Explicacion de las secciones principales

• versión - usa siempre 3 para WordPress 6.6 y posterior.
• settings - define que controles aparecen en el editor: paletas de colores, familias de fuentes, tamaños de fuente, preajustes de espaciado, anchos de diseño e interruptores de funciones.
• styles - aplica valores CSS predeterminados a la raiz, elementos (encabezados, enlaces, botones, pies de foto) y bloques individuales.
• appearanceTools - un atajo que habilita controles de borde, espaciado, tipografia y dimensiones en la barra lateral.

El motor convierte theme.json en propiedades CSS personalizadas (como --wp--preset--color--primary) que se propagan en cascada por todo el sitio. Esto significa que un archivo gobierna los tokens de diseño tanto para el editor como para el front-end.

#Los mejores plugins de bloques para WordPress en 2026

El editor base cubre la mayoria de las necesidades, pero los plugins de bloques de terceros llenan los vacios con diseños avanzados, controles de diseño y bloques especializados.

#Spectra (anteriormente Ultimate Addons for Gutenberg)

Desarrollado por Brainstorm Force (el equipo detras del plugin Starter Templates), Spectra agrega más de 30 bloques: temporizadores de cuenta regresiva, calificaciones con estrellas, listas de iconos, listas de precios, modales, pestanas y un bloque de formularios completo. Incluye un bloque contenedor con modos de diseño flex y grid, lo que lo hace adecuado para diseños de página complejos sin un page builder tradicional. Los precios se establecen individualmente según el nivel de funciones.

#GenerateBlocks

Construido por el equipo de GeneratePress, GenerateBlocks adopta un enfoque minimo: cuatro bloques principales (contenedor, encabezado, botones, imagen) que dependen de ajustes flexibles en lugar de docenas de bloques de propósito único. El resultado es una salida ligera con CSS minimo. Los usuarios avanzados aprecian la integración con query loop y el sistema de datos dinámicos que extrae meta de entradas, campos personalizados y datos de taxonomía en diseños de bloques.

#Stackable

Stackable ofrece más de 40 bloques con una biblioteca de diseño visual de más de 200 diseños preconstruidos. Su caracteristica destacada es un sistema de diseño unificado donde la tipografia global, las paletas de colores y las escalas de espaciado se propagan automáticamente a cada bloque Stackable. La versión gratuita cubre la mayoria de los casos de uso, mientras que el nivel premium agrega contenido dinámico, visualización condicional y efectos de movimiento.

#Kadence Blocks

Kadence Blocks proporciona un sistema de diseño de filas/columnas, bloque de encabezado avanzado, cajas de información, listas de iconos, tabla de contenidos y un bloque de formulario. La biblioteca de diseño incluye patrones de página completa y de sección. Kadence se combina especialmente bien con el tema Kadence, compartiendo un sistema de tokens de diseño. Los precios del nivel pro se establecen individualmente y varian según el número de sitios.

#Elegir el plugin adecuado

Elige GenerateBlocks para proyectos críticos en rendimiento, Spectra o Stackable para páginas con diseño exigente, y Kadence Blocks cuando necesites un constructor de formularios robusto junto con herramientas de diseño.

#Construir un tema de bloques sencillo desde cero

Combinando todo lo anterior, aquí hay un recorrido paso a paso para crear un tema de bloques minimo.

#Paso 1: estructura de carpetas

my-block-theme/
  style.css
  theme.json
  functions.php
  templates/
    index.html
    single.html
    page.html
    404.html
  parts/
    header.html
    footer.html
  patterns/
    hero-banner.php

#Paso 2: cabecera style.css

/*
Theme Name: My Block Theme
Theme URI: https://wppoland.com
Author: wppoland.com
Author URI: https://wppoland.com
Description: Un tema de bloques minimo para aprender full site editing.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-block-theme
*/

No se necesita CSS adicional aqui. Todo el estilo fluye a través de theme.json y el sistema de estilos globales.

#Paso 3: theme.json

Usa el ejemplo de la sección anterior. Ajusta la paleta de colores y la tipografia para que coincida con tu marca.

#Paso 4: plantillas

templates/index.html (la plantilla de respaldo):

<!-- wp:template-part {"slug":"header","area":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:query {"queryId":1,"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","inherit":true}} -->
    <div class="wp-block-query">
        <!-- wp:post-template -->
            <!-- wp:post-title {"isLink":true} /-->
            <!-- wp:post-excerpt /-->
            <!-- wp:post-date /-->
        <!-- /wp:post-template -->
        <!-- wp:query-págination -->
            <!-- wp:query-págination-previous /-->
            <!-- wp:query-págination-numbers /-->
            <!-- wp:query-págination-next /-->
        <!-- /wp:query-págination -->
    </div>
    <!-- /wp:query -->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","area":"footer"} /-->

templates/404.html:

<!-- wp:template-part {"slug":"header","area":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:heading {"level":1} -->
    <h1 class="wp-block-heading">Página no encontrada</h1>
    <!-- /wp:heading -->
    <!-- wp:paragraph -->
    <p>La página que buscas no existe. Intenta buscar o regresa a la página de inicio.</p>
    <!-- /wp:paragraph -->
    <!-- wp:search {"label":"Buscar","buttonText":"Buscar"} /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","area":"footer"} /-->

#Paso 5: partes de plantilla

parts/header.html:

<!-- wp:group {"tagName":"header","style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"}}},"layout":{"type":"constrained"}} -->
<header class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20)">
    <!-- wp:group {"layout":{"type":"flex","justifyContent":"space-between"}} -->
    <div class="wp-block-group">
        <!-- wp:site-title /-->
        <!-- wp:navigation {"layout":{"type":"flex"}} /-->
    </div>
    <!-- /wp:group -->
</header>
<!-- /wp:group -->

parts/footer.html:

<!-- wp:group {"tagName":"footer","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}},"backgroundColor":"contrast","textColor":"base","layout":{"type":"constrained"}} -->
<footer class="wp-block-group has-base-color has-contrast-background-color has-text-color has-background" style="padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)">
    <!-- wp:paragraph {"align":"center","fontSize":"small"} -->
    <p class="has-text-align-center has-small-font-size">Construido con WordPress y bloques.</p>
    <!-- /wp:paragraph -->
</footer>
<!-- /wp:group -->

#Paso 6: patron registrado automáticamente

patterns/hero-banner.php:

<?php
/**
 * Title: Banner hero
 * Slug: my-block-theme/hero-banner
 * Categories: featured, banner
 * Keywords: hero, cta, landing
 */
?>

<!-- wp:cover {"overlayColor":"primary","isUserOverlayColor":true,"minHeight":480,"align":"full"} -->
<div class="wp-block-cover alignfull" style="min-height:480px">
    <span class="wp-block-cover__background has-primary-background-color"></span>
    <div class="wp-block-cover__inner-container">
        <!-- wp:heading {"textAlign":"center","level":1,"textColor":"base"} -->
        <h1 class="wp-block-heading has-text-align-center has-base-color has-text-color">Bienvenido a My Block Theme</h1>
        <!-- /wp:heading -->
        <!-- wp:paragraph {"align":"center","textColor":"base"} -->
        <p class="has-text-align-center has-base-color has-text-color">Un tema WordPress ligero, centrado en bloques.</p>
        <!-- /wp:paragraph -->
        <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
        <div class="wp-block-buttons">
            <!-- wp:button {"backgroundColor":"base","textColor":"primary"} -->
            <div class="wp-block-button"><a class="wp-block-button__link has-primary-color has-base-background-color has-text-color has-background wp-element-button">Saber mas</a></div>
            <!-- /wp:button -->
        </div>
        <!-- /wp:buttons -->
    </div>
</div>
<!-- /wp:cover -->

#Paso 7: functions.php (mejoras opcionales)

<?php
declare(strict_types=1);

add_action('after_setup_theme', function (): void {
    add_theme_support('wp-block-styles');
    add_theme_support('editor-styles');
    add_editor_style('style.css');
});

add_action('wp_enqueue_scripts', function (): void {
    wp_enqueue_style(
        'my-block-theme-style',
        get_stylesheet_uri(),
        [],
        wp_get_theme()->get('Version')
    );
});

Sube la carpeta a wp-content/themes/, activalo y abre Apariencia > Editor. Ahora tienes un tema de bloques totalmente funcional donde cada plantilla, patron y estilo es editable desde el navegador.

#Consejos avanzados para el desarrollo centrado en bloques

#Bloquear bloques para evitar ediciones accidentales

Al construir plantillas para clientes, bloquea bloques para restringir su movimiento y eliminación:

<!-- wp:group {"lock":{"move":true,"remove":true}} -->
<div class="wp-block-group">
    <!-- wp:paragraph -->
    <p>Este bloque no puede ser movido ni eliminado por los editores.</p>
    <!-- /wp:paragraph -->
</div>
<!-- /wp:group -->

El contenido dentro de bloques bloqueados sigue siendo editable, pero la integridad estructural se mantiene intacta.

#Usar variaciones de bloques para consistencia

Registra variaciones de bloques para proporcionar instancias preconfiguradas de bloques base. Por ejemplo, una variacion “miembro del equipo” del bloque media-and-text:

<?php
add_action('enqueue_block_editor_assets', function (): void {
    wp_add_inline_script(
        'wp-blocks',
        "wp.blocks.registerBlockVariation('core/media-text', {
            name: 'team-member',
            title: 'Team Member',
            attributes: {
                mediaPosition: 'left',
                verticalAlignment: 'center',
            },
            scope: ['inserter'],
        });"
    );
});

Las variaciones aparecen como bloques distintos en el panel de insercion mientras comparten el código del bloque padre.

#Aprovechar el paquete create-block

Para bloques personalizados más alla de lo que cubren los patrones y variaciones, usa la herramienta oficial de scaffolding @wordpress/create-block:

npx @wordpress/create-block my-custom-block --variant dynamic

Esto genera un plugin con herramientas de compilacion (webpack, Babel, ESLint), una función edit basada en React y un render_callback PHP para renderizado dinámico del lado del servidor. Es el camino recomendado para cualquier bloque que necesite obtener datos, ejecutar consultas o mostrar contenido dinámico.

#Errores comunes y como evitarlos

Mezclar plantillas clasicas y de bloques. Un tema es o un tema de bloques o un tema clásico. Colocar index.php junto a templates/index.html crea un comportamiento de respaldo impredecible. Comprometete con un enfoque por tema.

Sobrescribir theme.json con CSS inline. Los estilos inline evitan la cascada de estilos globales y rompen los controles de estilo del Site Editor. Usa siempre preajustes de theme.json y propiedades CSS personalizadas.

Ignorar el directorio patterns. Muchos desarrolladores aun registran patrones exclusivamente a través de PHP. El directorio patterns/ con cabeceras de archivo es más simple, no requiere registro de hooks y mantiene el marcado de patrones separado de la lógica.

Olvidar probar con diferentes roles de usuario. Los editores y autores ven una versión filtrada del editor de bloques. La edicion de plantillas, los estilos globales y ciertos bloques pueden estar ocultos según los permisos. Siempre verifica la experiencia de edicion para cada rol que la usara.

No exportar los cambios del Site Editor. Las modificaciones hechas en el navegador se almacenan en la base de datos. Si redistribuyes el tema sin exportar esos cambios a archivos, desaparecen. Usa la función de exportacion del Site Editor o el comando WP-CLI wp theme export para sincronizar los cambios de vuelta al control de versiones.

#El futuro de los bloques en WordPress

El proyecto Gutenberg esta organizado en cuatro fases: edicion más fácil (lanzada), personalización (actual, FSE), colaboración (en progreso) y multilingue (planificada). La Fase 3, colaboración en tiempo real, traera edicion simultanea al estilo de Google Docs al editor de bloques. La Fase 4 busca hacer WordPress nativamente multilingue sin plugins.

Los temas de bloques ya son el estándar para nuevas instalaciones de WordPress. Los temas clásicos siguen siendo compatibles, pero el desarrollo de nuevas APIs y herramientas de diseño se centra en el paradigma de bloques. Invertir en habilidades centradas en bloques ahora posiciona a tu equipo para cada lanzamiento importante de WordPress hasta 2028 y más alla.

#Como wppoland.com aborda el desarrollo de bloques

En wppoland.com, construimos cada proyecto de clientes sobre arquitectura centrada en bloques. Nuestro flujo de trabajo comienza con tokens de diseño en theme.json, avanza hacia patrones de bloques personalizados para secciones repetitivas y finaliza con plantillas bloqueadas que dan libertad a los editores de contenido sin riesgo estructural.

Para proyectos que necesitan bloques más alla de lo que ofrecen el core y los plugins existentes, desarrollamos bloques personalizados usando el conjunto de herramientas @wordpress/create-block, con renderizado del lado del servidor para contenido dinámico e integración completa con los estilos globales del Site Editor.

Si necesitas un tema de bloques personalizado, una migración de un tema clásico a full site editing o desarrollo de bloques a medida para tu flujo de trabajo de contenido, contacta al equipo de wppoland.com. Entregamos soluciones de bloques adaptadas a tus requisitos editoriales y empresariales, con precios establecidos individualmente según el alcance del proyecto.