Full Site Editing al Máximo Nivel: Cómo Usar Bloques Avanzados para Crear Sitios Premium

 Full Site Editing al Máximo Nivel: Cómo Usar Bloques Avanzados para Crear Sitios Premium

El Full Site Editing (FSE) de WordPress ha evolucionado de una característica experimental a convertirse en el estándar profesional para crear sitios web de alta calidad. Dominar los bloques avanzados y las técnicas de FSE te permite construir experiencias digitales premium sin necesidad de page builders externos, manteniendo rendimiento óptimo y control total sobre cada aspecto del diseño.

Fundamentos del Full Site Editing: Más Allá de lo Básico

El Full Site Editing no es simplemente arrastrar bloques. Es un sistema completo de diseño que te otorga control granular sobre cada elemento de tu sitio.

La Anatomía de un Tema FSE

Un tema FSE profesional se estructura completamente diferente a los temas clásicos:

Estructura de directorios:

mi-tema-fse/
├── theme.json          // Configuración global
├── style.css
├── functions.php
├── templates/          // Plantillas del sitio
│   ├── index.html
│   ├── single.html
│   ├── page.html
│   ├── archive.html
│   └── 404.html
├── parts/              // Partes de plantilla
│   ├── header.html
│   ├── footer.html
│   └── sidebar.html
└── patterns/           // Patrones de bloques
    ├── hero-section.php
    ├── testimonials.php
    └── call-to-action.php

Theme.json: El Cerebro de tu Diseño

El archivo theme.json es donde ocurre la magia. Define estilos globales, paletas de colores, tipografía y configuraciones que se aplican consistentemente en todo el sitio.

Configuración profesional de theme.json:

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "useRootPaddingAwareAlignments": true,
    "color": {
      "defaultPalette": false,
      "defaultGradients": false,
      "palette": [
        {
          "slug": "primary",
          "color": "#0066cc",
          "name": "Primario"
        },
        {
          "slug": "secondary",
          "color": "#ff6b35",
          "name": "Secundario"
        },
        {
          "slug": "neutral-100",
          "color": "#f8f9fa",
          "name": "Neutral Claro"
        },
        {
          "slug": "neutral-900",
          "color": "#212529",
          "name": "Neutral Oscuro"
        }
      ],
      "gradients": [
        {
          "slug": "primary-gradient",
          "gradient": "linear-gradient(135deg, #0066cc 0%, #004c99 100%)",
          "name": "Gradiente Primario"
        }
      ]
    },
    "typography": {
      "defaultFontSizes": false,
      "fontFamilies": [
        {
          "fontFamily": "'Inter', -apple-system, sans-serif",
          "slug": "primary",
          "name": "Primaria"
        },
        {
          "fontFamily": "'Playfair Display', Georgia, serif",
          "slug": "heading",
          "name": "Encabezados"
        }
      ],
      "fontSizes": [
        {
          "slug": "small",
          "size": "0.875rem",
          "name": "Pequeño"
        },
        {
          "slug": "medium",
          "size": "1rem",
          "name": "Medio"
        },
        {
          "slug": "large",
          "size": "1.25rem",
          "name": "Grande"
        },
        {
          "slug": "x-large",
          "size": "2rem",
          "name": "Extra Grande"
        },
        {
          "slug": "xx-large",
          "size": "3rem",
          "name": "Doble Extra Grande"
        }
      ]
    },
    "spacing": {
      "padding": true,
      "margin": true,
      "units": ["px", "em", "rem", "vh", "vw", "%"],
      "spacingSizes": [
        {
          "slug": "30",
          "size": "0.5rem",
          "name": "1"
        },
        {
          "slug": "40",
          "size": "1rem",
          "name": "2"
        },
        {
          "slug": "50",
          "size": "1.5rem",
          "name": "3"
        },
        {
          "slug": "60",
          "size": "2rem",
          "name": "4"
        },
        {
          "slug": "70",
          "size": "3rem",
          "name": "5"
        },
        {
          "slug": "80",
          "size": "4rem",
          "name": "6"
        }
      ]
    },
    "layout": {
      "contentSize": "800px",
      "wideSize": "1200px"
    }
  },
  "styles": {
    "color": {
      "background": "var(--wp--preset--color--neutral-100)",
      "text": "var(--wp--preset--color--neutral-900)"
    },
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--primary)",
      "fontSize": "var(--wp--preset--font-size--medium)",
      "lineHeight": "1.6"
    },
    "spacing": {
      "blockGap": "1.5rem"
    },
    "elements": {
      "h1": {
        "typography": {
          "fontFamily": "var(--wp--preset--font-family--heading)",
          "fontSize": "var(--wp--preset--font-size--xx-large)",
          "lineHeight": "1.2",
          "fontWeight": "700"
        },
        "spacing": {
          "margin": {
            "top": "0",
            "bottom": "1.5rem"
          }
        }
      },
      "link": {
        "color": {
          "text": "var(--wp--preset--color--primary)"
        },
        ":hover": {
          "color": {
            "text": "var(--wp--preset--color--secondary)"
          }
        }
      },
      "button": {
        "color": {
          "background": "var(--wp--preset--color--primary)",
          "text": "#ffffff"
        },
        "border": {
          "radius": "4px"
        },
        "spacing": {
          "padding": {
            "top": "0.75rem",
            "right": "1.5rem",
            "bottom": "0.75rem",
            "left": "1.5rem"
          }
        },
        ":hover": {
          "color": {
            "background": "var(--wp--preset--color--secondary)"
          }
        }
      }
    },
    "blocks": {
      "core/quote": {
        "border": {
          "left": {
            "width": "4px",
            "color": "var(--wp--preset--color--primary)"
          }
        },
        "spacing": {
          "padding": {
            "left": "1.5rem"
          }
        }
      }
    }
  }
}

Este archivo centraliza tu sistema de diseño completo, garantizando consistencia y facilitando actualizaciones globales.

Bloques Avanzados: Técnicas Profesionales

1. Bloques de Grupo y Contenedores Anidados

Los bloques de grupo permiten crear estructuras complejas y responsivas.

Técnica: Secciones Hero Avanzadas

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"8rem","bottom":"8rem"}}},"backgroundColor":"primary","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-primary-background-color has-background">
  
  <!-- wp:columns {"verticalAlignment":"center"} -->
  <div class="wp-block-columns are-vertically-aligned-center">
    
    <!-- wp:column {"verticalAlignment":"center","width":"50%"} -->
    <div class="wp-block-column is-vertically-aligned-center">
      <!-- wp:heading {"level":1,"style":{"typography":{"fontSize":"3.5rem","lineHeight":"1.1"}}} -->
      <h1>Crea experiencias digitales extraordinarias</h1>
      <!-- /wp:heading -->
      
      <!-- wp:paragraph {"style":{"typography":{"fontSize":"1.25rem"}}} -->
      <p>Transforma tu visión en realidad con diseño premium y rendimiento excepcional.</p>
      <!-- /wp:paragraph -->
      
      <!-- wp:buttons -->
      <div class="wp-block-buttons">
        <!-- wp:button {"className":"is-style-fill"} -->
        <div class="wp-block-button is-style-fill"><a class="wp-block-button__link">Comenzar ahora</a></div>
        <!-- /wp:button -->
      </div>
      <!-- /wp:buttons -->
    </div>
    <!-- /wp:column -->
    
    <!-- wp:column {"width":"50%"} -->
    <div class="wp-block-column">
      <!-- wp:image {"sizeSlug":"large"} -->
      <figure class="wp-block-image size-large"><img src="hero-image.jpg" alt=""/></figure>
      <!-- /wp:image -->
    </div>
    <!-- /wp:column -->
    
  </div>
  <!-- /wp:columns -->
  
</div>
<!-- /wp:group -->

Elementos clave:

• align="full" extiende el bloque más allá del contenedor
• Padding generoso crea espacio respirable
• Columnas con alineación vertical centrada
• Tipografía personalizada en línea para casos específicos

2. Bloques de Consulta (Query Loop)

El Query Loop es uno de los bloques más poderosos de FSE, permitiendo mostrar contenido dinámico con control total sobre diseño.

Creando un Grid de Blog Premium:

<!-- wp:query {"queryId":1,"query":{"perPage":6,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"flex","columns":3}} -->
<div class="wp-block-query">
  
  <!-- wp:post-template -->
  <!-- wp:group {"style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"}}},"className":"post-card"} -->
  <div class="wp-block-group post-card">
    
    <!-- wp:post-featured-image {"isLink":true,"aspectRatio":"16/9","style":{"border":{"radius":"8px"}}} /-->
    
    <!-- wp:group {"style":{"spacing":{"padding":{"top":"1.5rem","right":"1.5rem","bottom":"1.5rem","left":"1.5rem"}}}} -->
    <div class="wp-block-group">
      
      <!-- wp:post-terms {"term":"category","style":{"typography":{"fontSize":"0.875rem","textTransform":"uppercase","letterSpacing":"0.05em"}}} /-->
      
      <!-- wp:post-title {"isLink":true,"style":{"typography":{"fontSize":"1.5rem","lineHeight":"1.3"}}} /-->
      
      <!-- wp:post-excerpt {"moreText":"Leer más →","excerptLength":20} /-->
      
      <!-- wp:group {"layout":{"type":"flex","justifyContent":"space-between"}} -->
      <div class="wp-block-group">
        <!-- wp:post-date {"format":"M j, Y"} /-->
        <!-- wp:post-author {"showAvatar":false} /-->
      </div>
      <!-- /wp:group -->
      
    </div>
    <!-- /wp:group -->
    
  </div>
  <!-- /wp:group -->
  <!-- /wp:post-template -->
  
  <!-- wp:query-pagination {"layout":{"type":"flex","justifyContent":"center"}} -->
  <!-- wp:query-pagination-previous /-->
  <!-- wp:query-pagination-numbers /-->
  <!-- wp:query-pagination-next /-->
  <!-- /wp:query-pagination -->
  
  <!-- wp:query-no-results -->
  <!-- wp:paragraph -->
  <p>No se encontraron artículos.</p>
  <!-- /wp:paragraph -->
  <!-- /wp:query-no-results -->
  
</div>
<!-- /wp:query -->

Ventajas de Query Loop:

• Actualización automática cuando publicas nuevo contenido
• Control total sobre diseño de cada elemento
• Parámetros de consulta personalizables
• Paginación integrada

3. Bloques Cover con Efectos Parallax

Los bloques Cover crean impactantes secciones hero con imágenes de fondo.

Técnica avanzada con overlays:

<!-- wp:cover {"url":"background.jpg","hasParallax":true,"dimRatio":50,"overlayColor":"neutral-900","contentPosition":"center center","align":"full","style":{"spacing":{"padding":{"top":"10rem","bottom":"10rem"}}}} -->
<div class="wp-block-cover alignfull has-parallax">
  <span class="wp-block-cover__background has-neutral-900-background-color has-background-dim"></span>
  <div class="wp-block-cover__image-background has-parallax"></div>
  
  <div class="wp-block-cover__inner-container">
    <!-- wp:heading {"textAlign":"center","level":1,"style":{"typography":{"fontSize":"4rem"}}} -->
    <h1 class="has-text-align-center">Título Impactante</h1>
    <!-- /wp:heading -->
    
    <!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"1.5rem"}}} -->
    <p class="has-text-align-center">Subtítulo descriptivo que captura la atención</p>
    <!-- /wp:paragraph -->
  </div>
</div>
<!-- /wp:cover -->

4. Bloques de Medios y Texto Avanzados

Crea layouts sofisticados combinando medios con contenido.

Layout alternado profesional:

<!-- wp:media-text {"mediaPosition":"right","mediaType":"image","verticalAlignment":"center","imageFill":true,"style":{"spacing":{"padding":{"top":"4rem","bottom":"4rem"}}}} -->
<div class="wp-block-media-text has-media-on-the-right is-vertically-aligned-center is-image-fill">
  <figure class="wp-block-media-text__media"><img src="feature-1.jpg" alt=""/></figure>
  
  <div class="wp-block-media-text__content">
    <!-- wp:heading -->
    <h2>Característica Destacada Uno</h2>
    <!-- /wp:heading -->
    
    <!-- wp:paragraph -->
    <p>Descripción detallada de esta característica que convence al usuario del valor de tu producto o servicio.</p>
    <!-- /wp:paragraph -->
    
    <!-- wp:list -->
    <ul>
      <li>Beneficio importante uno</li>
      <li>Beneficio importante dos</li>
      <li>Beneficio importante tres</li>
    </ul>
    <!-- /wp:list -->
  </div>
</div>
<!-- /wp:media-text -->

<!-- wp:media-text {"mediaType":"image","verticalAlignment":"center","imageFill":true,"style":{"spacing":{"padding":{"top":"4rem","bottom":"4rem"}}}} -->
<div class="wp-block-media-text is-vertically-aligned-center is-image-fill">
  <figure class="wp-block-media-text__media"><img src="feature-2.jpg" alt=""/></figure>
  
  <div class="wp-block-media-text__content">
    <!-- Contenido similar alternando el lado de la imagen -->
  </div>
</div>
<!-- /wp:media-text -->

Patrones de Bloques: Componentes Reutilizables

Los patrones son combinaciones predefinidas de bloques que puedes reutilizar en todo el sitio.

Creando un Patrón de Testimonios Premium

archivo: patterns/testimonials.php

<?php
/**
 * Title: Sección de Testimonios Premium
 * Slug: mi-tema/testimonials
 * Categories: featured
 * Keywords: testimonials, reviews, social proof
 */
?>

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"6rem","bottom":"6rem"}}},"backgroundColor":"neutral-100","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-neutral-100-background-color has-background">
  
  <!-- wp:heading {"textAlign":"center","style":{"spacing":{"margin":{"bottom":"3rem"}}}} -->
  <h2 class="has-text-align-center">Lo Que Dicen Nuestros Clientes</h2>
  <!-- /wp:heading -->
  
  <!-- wp:columns {"align":"wide"} -->
  <div class="wp-block-columns alignwide">
    
    <!-- wp:column -->
    <div class="wp-block-column">
      <!-- wp:group {"style":{"spacing":{"padding":{"top":"2rem","right":"2rem","bottom":"2rem","left":"2rem"}},"border":{"radius":"8px"}},"backgroundColor":"base"} -->
      <div class="wp-block-group has-base-background-color has-background">
        
        <!-- wp:paragraph {"style":{"typography":{"fontSize":"1.125rem","lineHeight":"1.6"}}} -->
        <p>"Trabajar con este equipo ha transformado completamente nuestra presencia digital. Los resultados superaron todas nuestras expectativas."</p>
        <!-- /wp:paragraph -->
        
        <!-- wp:group {"style":{"spacing":{"margin":{"top":"1.5rem"}}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
        <div class="wp-block-group">
          <!-- wp:image {"width":48,"height":48,"sizeSlug":"thumbnail","linkDestination":"none","className":"is-style-rounded"} -->
          <figure class="wp-block-image size-thumbnail is-resized is-style-rounded">
            <img src="avatar-1.jpg" alt="" width="48" height="48"/>
          </figure>
          <!-- /wp:image -->
          
          <!-- wp:group {"layout":{"type":"flex","orientation":"vertical"}} -->
          <div class="wp-block-group">
            <!-- wp:paragraph {"style":{"typography":{"fontWeight":"600"}}} -->
            <p><strong>María González</strong></p>
            <!-- /wp:paragraph -->
            
            <!-- wp:paragraph {"style":{"typography":{"fontSize":"0.875rem"}}} -->
            <p>CEO, Tech Innovations</p>
            <!-- /wp:paragraph -->
          </div>
          <!-- /wp:group -->
        </div>
        <!-- /wp:group -->
        
      </div>
      <!-- /wp:group -->
    </div>
    <!-- /wp:column -->
    
    <!-- Repetir para más testimonios -->
    
  </div>
  <!-- /wp:columns -->
  
</div>
<!-- /wp:group -->

Técnicas Avanzadas de Diseño

1. Variables CSS Personalizadas en Theme.json

Aprovecha las CSS custom properties para diseño dinámico:

{
  "styles": {
    "blocks": {
      "core/button": {
        "css": "transition: all 0.3s ease; transform: translateY(0); &:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }"
      }
    }
  }
}

2. Layouts Responsivos Avanzados

Usa el sistema de layout de bloques para responsividad:

<!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":"2rem"}}} -->
<div class="wp-block-columns alignwide">
  
  <!-- wp:column {"width":"66.66%"} -->
  <div class="wp-block-column" style="flex-basis:66.66%">
    <!-- Contenido principal -->
  </div>
  <!-- /wp:column -->
  
  <!-- wp:column {"width":"33.33%"} -->
  <div class="wp-block-column" style="flex-basis:33.33%">
    <!-- Sidebar -->
  </div>
  <!-- /wp:column -->
  
</div>
<!-- /wp:columns -->

En móvil, las columnas se apilan automáticamente.

3. Animaciones y Transiciones

Añade vida a tu sitio con animaciones sutiles:

functions.php:

function mi_tema_custom_css() {
    wp_add_inline_style('wp-block-library', '
        .wp-block-group {
            animation: fadeInUp 0.6s ease-out;
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .wp-block-image img {
            transition: transform 0.3s ease;
        }
        
        .wp-block-image:hover img {
            transform: scale(1.05);
        }
    ');
}
add_action('wp_enqueue_scripts', 'mi_tema_custom_css');

Optimización y Rendimiento

Lazy Loading de Bloques

Implementa carga diferida para bloques pesados:

function optimizar_bloques_pesados() {
    wp_enqueue_script(
        'intersection-observer-polyfill',
        'https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver',
        array(),
        null,
        true
    );
    
    wp_add_inline_script('wp-dom-ready', '
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add("is-visible");
                    observer.unobserve(entry.target);
                }
            });
        });
        
        document.querySelectorAll(".wp-block-gallery, .wp-block-embed").forEach(block => {
            observer.observe(block);
        });
    ');
}
add_action('wp_enqueue_scripts', 'optimizar_bloques_pesados');

Precarga de Fuentes Críticas

function precargar_fuentes_criticas() {
    echo '<link rel="preload" href="' . get_template_directory_uri() . '/assets/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>';
}
add_action('wp_head', 'precargar_fuentes_criticas', 1);

Bloques Personalizados Avanzados

Para necesidades específicas, crea bloques custom:

Bloque de Estadísticas Animadas:

// blocks/stats-counter/index.js
import { registerBlockType } from '@wordpress/blocks';
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import { PanelBody, TextControl } from '@wordpress/components';

registerBlockType('mi-tema/stats-counter', {
    title: 'Contador de Estadísticas',
    icon: 'chart-bar',
    category: 'widgets',
    attributes: {
        number: { type: 'string', default: '0' },
        label: { type: 'string', default: 'Métrica' },
        suffix: { type: 'string', default: '' }
    },
    edit: ({ attributes, setAttributes }) => {
        const blockProps = useBlockProps();
        
        return (
            <>
                <InspectorControls>
                    <PanelBody title="Configuración">
                        <TextControl
                            label="Número"
                            value={attributes.number}
                            onChange={(value) => setAttributes({ number: value })}
                        />
                        <TextControl
                            label="Etiqueta"
                            value={attributes.label}
                            onChange={(value) => setAttributes({ label: value })}
                        />
                        <TextControl
                            label="Sufijo"
                            value={attributes.suffix}
                            onChange={(value) => setAttributes({ suffix: value })}
                        />
                    </PanelBody>
                </InspectorControls>
                
                <div {...blockProps}>
                    <div className="stat-counter">
                        <span className="stat-number">{attributes.number}{attributes.suffix}</span>
                        <span className="stat-label">{attributes.label}</span>
                    </div>
                </div>
            </>
        );
    },
    save: ({ attributes }) => {
        const blockProps = useBlockProps.save();
        
        return (
            <div {...blockProps}>
                <div className="stat-counter" data-target={attributes.number}>
                    <span className="stat-number">0{attributes.suffix}</span>
                    <span className="stat-label">{attributes.label}</span>
                </div>
            </div>
        );
    }
});

Plantillas Dinámicas Premium

Plantilla de Página de Servicios

templates/template-services.html:

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

<!-- wp:group {"tagName":"main","align":"full","layout":{"type":"constrained"}} -->
<main class="wp-block-group alignfull">
    
    <!-- wp:cover {"url":"services-hero.jpg","dimRatio":40,"align":"full","style":{"spacing":{"padding":{"top":"8rem","bottom":"8rem"}}}} -->
    <div class="wp-block-cover alignfull">
        <div class="wp-block-cover__inner-container">
            <!-- wp:post-title {"textAlign":"center","level":1} /-->
        </div>
    </div>
    <!-- /wp:cover -->
    
    <!-- wp:group {"style":{"spacing":{"padding":{"top":"4rem","bottom":"4rem"}}}} -->
    <div class="wp-block-group">
        <!-- wp:post-content /-->
    </div>
    <!-- /wp:group -->
    
    <!-- wp:pattern {"slug":"mi-tema/services-grid"} /-->
    
    <!-- wp:pattern {"slug":"mi-tema/cta-section"} /-->
    
</main>
<!-- /wp:group -->

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

Mejores Prácticas para Sitios Premium

1. Consistencia de Diseño

• Usa siempre las variables de theme.json
• Crea un sistema de espaciado coherente
• Mantén máximo 2-3 familias tipográficas
• Define una paleta de colores limitada pero versátil

2. Accesibilidad

• Contraste mínimo de 4.5:1 para texto
• Tamaños de fuente escalables con rem/em
• Navegación por teclado funcional
• Texto alternativo descriptivo en todas las imágenes

3. Rendimiento

• Limita bloques anidados a máximo 3-4 niveles
• Optimiza imágenes antes de subirlas
• Usa formatos modernos (WebP, AVIF)
• Implementa caché de bloques pesados

4. Mantenibilidad

• Documenta patrones personalizados
• Usa nombres de clase semánticos
• Mantén theme.json organizado
• Versionado de cambios críticos

Conclusión: El Arte del Full Site Editing

Dominar Full Site Editing al máximo nivel no se trata solo de conocer bloques individuales, sino de entender cómo combinarlos estratégicamente para crear experiencias coherentes, performantes y visualmente impactantes. Los sitios premium no nacen de plantillas genéricas sino de la comprensión profunda del sistema de bloques, la configuración meticulosa de theme.json y la implementación de patrones reutilizables bien diseñados.

El FSE te otorga un control sin precedentes manteniendo la flexibilidad de WordPress. Los mejores sitios del futuro serán aquellos que aprovechen esta potencia mientras mantienen simplicidad en su código y excelencia en su ejecución.

La curva de aprendizaje vale la pena: una vez dominas estas técnicas, puedes crear sitios que compiten con cualquier solución custom mientras mantienes la facilidad de actualización y gestión que hace grande a WordPress.