¿Qué ventaja principal ofrece register_block_style en un block theme?

Permite ofrecer estilos reutilizables y consistentes en bloques core sin sobredimensionar la arquitectura.

Tema de bloques 06: variaciones y estilos por bloque con propósito

Define variaciones de bloques que aceleren edición y mantengan identidad visual sin obligar a CSS duplicado.

📘 Teoría

Cuándo crear una variación y cuándo no

Una variación debe resolver un patrón editorial repetido, no un capricho puntual.

Si un bloque se usa siempre con la misma intención visual (por ejemplo CTA destacado), una variación reduce fricción al editar.

Si el cambio es demasiado específico para una sola página, conviene resolverlo localmente y no inflar el sistema global.

Antes de crear una nueva variante, revisa si ya puedes lograrlo con presets de theme.json y estilos existentes.

Variaciones para usos repetidos y estables.
Nombres funcionales, no ambiguos.
Evitar catálogo infinito de estilos parecidos.
Documentar cuándo usar cada variante.

Registrar estilo de bloque desde el tema

Con register_block_style puedes ofrecer opciones visuales rápidas sin crear bloques nuevos.

Registrar estilo para core/group

<?php
add_action('init', function () {
  register_block_style('core/group', [
    'name'  => 'card-soft',
    'label' => __('Card Soft', 'mi-tema-bloques'),
  ]);
});

Aplicar estilos coherentes con theme.json

El estilo visual de la variante debe apoyarse en tokens del sistema, no en colores hardcodeados arbitrarios.

Define reglas CSS para la clase generada por el estilo del bloque y referencia presets del tema cuando sea posible.

Comprueba en editor y frontend que la variante mantiene contraste y spacing correctos con contenido real.

Si una variante necesita ajustes por bloque, usa styles.blocks en theme.json para centralizar comportamiento.

CSS para estilo is-style-card-soft

.wp-block-group.is-style-card-soft {
  border: 1px solid var(--wp--preset--color--ink, #0f172a33);
  background: var(--wp--preset--color--surface, #f8fafc);
  border-radius: 14px;
  padding: 1rem;
  box-shadow: 0 10px 25px rgba(2, 6, 23, 0.08);
}