Marcado de renderizado de bloques públicos

Este archivo responde a la pregunta práctica de la creación de páginas: "Cuando añado este bloque del CMS, ¿qué HTML público y qué clases de WebBlocks UI se renderizan?" Úselo al componer páginas manualmente, al revisar la salida del Page Converter o al pedir a un asistente de IA que construya una página del CMS a partir de bloques estructurados.

Los bloques que poseen su raíz renderizan su propia raíz pública semántica y colocan data-wb-public-block-type en esa raíz. Algunos ejemplos son Section, Container, Grid, Card, Hero, Gallery y Navbar. Los bloques que no poseen su raíz renderizan su marcado interno y normalmente los envuelve el renderizador de slots en .wb-public-block con data-wb-public-block-type. Algunos ejemplos son Plain Text, Rich Text, Button Link, Alert y la mayoría de los hijos utilitarios de navegación.

Este archivo se ha elaborado a partir de las fuentes Blade reales del renderizador público. El HTML de ejemplo es representativo, pero debe seguir siendo compatible con el contrato del renderizador. La fuente principal del renderizador del paquete es packages/webblocks-cms/resources/views/pages/partials/blocks/.blade.php; los archivos de compatibilidad de la raíz bajo resources/views/pages/partials/blocks/.blade.php suelen delegar de vuelta en el espacio de nombres del paquete. Block::publicRenderView() resuelve primero los partials de bloque del paquete, después los partials de compatibilidad de la raíz y, por último, el partial seguro de reserva o de renderizador ausente.

Composición de bloques recomendada para páginas nuevas

Prefiera estos bloques para las páginas del CMS nuevas creadas a mano:

Layout y ritmo: section, container, grid, cluster.
Texto de página y de sección: content_header, header, plain_text, rich-text, button_link, y button cuando se trata de una acción gestionada de Hero/CTA.
Marketing y contenido estructurado: hero, cta, columns con column_item, card con card_header, card_body y card_footer, accordion con filas hijas tipo FAQ, gallery, image.
Navegación y elementos compartidos: sticky-navbar, navbar-brand, navbar-navigation, header-actions, search-form, además de los bloques de barra lateral para los layouts de documentación/barra lateral.

No prefiera estos para páginas nuevas creadas a mano, salvo que esté conservando contenido heredado, salida del conversor o comportamiento de compatibilidad: feature-grid, feature-item, card-grid, contact-info, faq-list, menu, metric-card, showcase-list, slider, stats, tabs, testimonial, text, callout y las rutas de renderizador exclusivas de reserva.

Use Safe HTML (html) y los renderizadores de reserva únicamente como recursos revisados, cuando el contenido todavía no pueda representarse con bloques estructurados del CMS. No deberían ser la salida por defecto de las páginas migradas o creadas por IA.

Árboles de página habituales

Página de marketing:

Page
└── main slot
    └── Section
        └── Container
            ├── Content Header or Hero
            ├── Grid or Columns
            └── CTA

Cuadrícula de tarjetas:

Section
└── Container
    └── Grid
        └── Card
            ├── Card Header
            ├── Card Body
            └── Card Footer

Navbar / cabecera compartida:

Navbar
└── Container
    └── Cluster
        ├── Navbar Brand
        └── Cluster
            ├── Navbar Navigation
            └── Header Actions

FAQ:

Section
└── Container
    └── Accordion
        ├── FAQ child row
        ├── FAQ child row
        └── FAQ child row

El renderizador actual de Accordion consume las filas hijas publicadas con título y contenido como elementos desplegables. El Page Converter escribe los grupos <details> adyacentes en filas hijas faq cuando están disponibles tanto el contrato accordion como el faq.

El wrapper por defecto del slot main renderiza los bloques que no poseen su raíz dentro de:

<div class="wb-public-block" data-wb-public-block-type="plain-text">
  ...
</div>

Los bloques que poseen su raíz, en cambio, colocan data-wb-public-block-type en su propio elemento raíz público.

Section (`section`)

Fuente del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/section.blade.php

HTML renderizado

<section class="wb-section wb-section-lg wb-stack" data-wb-public-block-type="section">
  <!-- child blocks -->
</section>

Clases principales de CSS / WebBlocks UI

wb-section, la clase de espaciado de sectionSpacingClass(), wb-stack.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
settings.spacing	sm	sectionSpacingClass() añade wb-section-sm.
settings.spacing	lg	sectionSpacingClass() añade wb-section-lg.
settings.spacing	default/vacío	Usa únicamente wb-section wb-stack.
status	unpublished	El bloque no se incluye en las consultas normales del árbol de bloques públicos.

Usar para / Evitar para

Usar para: secciones principales de la página y agrupación de bloques.

Evitar para: poner texto visible directamente en los ajustes de Section; use bloques de texto hijos.

Notas

El bloque posee su raíz <section>. Renderiza todos los bloques hijos a través del partial de bloque normal. No tiene contrato de texto traducible; el contenido visible debería estar en bloques hijos.

Container (`container`)

Fuente del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/container.blade.php

HTML renderizado

<div class="wb-container wb-container-lg wb-stack" data-wb-public-block-type="container">
  <!-- child blocks -->
</div>

Clases principales de CSS / WebBlocks UI

wb-container, la clase de anchura de containerWidthClass(), la clase de flujo de containerFlowClass().

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
settings.width	sm/md/lg/xl/full	containerWidthClass() añade wb-container-sm, wb-container-md, wb-container-lg, wb-container-xl o wb-container-full.
settings.width	default/vacío	Usa la clase base wb-container.
settings.flow	stack/default	containerFlowClass() añade wb-stack.
settings.flow	none	No se añade ninguna clase de flujo.

Usar para / Evitar para

Usar para: control de anchura dentro de secciones, navbars y estructuras de página.

Evitar para: usar Container como tarjeta visual o superficie de contenido.

Notas

El bloque posee su raíz <div>. Renderiza los bloques hijos directamente. Los ajustes de anchura y de flujo cambian las clases.

Grid (`grid`)

Fuente del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/grid.blade.php

HTML renderizado

<div class="wb-grid wb-grid-3 wb-gap-4" data-wb-public-block-type="grid">
  <!-- child blocks -->
</div>

Clases principales de CSS / WebBlocks UI

wb-grid, la clase de columnas de gridColumnsClass(), la clase de espaciado de gridGapClass().

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
settings.columns	2	gridColumnsClass() añade wb-grid-2.
settings.columns	4	gridColumnsClass() añade wb-grid-4.
settings.columns	default/3/otro	gridColumnsClass() añade wb-grid-3.
settings.gap	3/4/6	gridGapClass() añade wb-gap-3, wb-gap-4 o wb-gap-6.
settings.gap	default/vacío	No se añade ninguna clase de espaciado más allá de wb-grid.

Usar para / Evitar para

Usar para: layouts de tarjetas, medios o contenido en varias columnas.

Evitar para: filas simples de botones o elementos internos de la navbar; use Cluster.

Notas

El bloque posee su raíz <div>. Renderiza los bloques hijos directamente. Los ajustes de columnas y de espaciado cambian las clases.

Cluster (`cluster`)

Fuente del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/cluster.blade.php

HTML renderizado

<div class="wb-cluster wb-cluster-2 wb-cluster-between wb-cluster-center" data-wb-public-block-type="cluster">
  <!-- child blocks -->
</div>

Clases principales de CSS / WebBlocks UI

wb-cluster, más las clases de los helpers de espaciado, justificación, alineación, ajuste de línea y anchura.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
settings.gap	none	clusterGapClass() añade wb-cms-cluster-gap-none.
settings.gap	xs	clusterGapClass() añade wb-gap-1.
settings.gap	sm o 2	clusterGapClass() añade wb-cluster-2.
settings.gap	md o 4	clusterGapClass() añade wb-cluster-4.
settings.gap	lg o 6	clusterGapClass() añade wb-cluster-6.
settings.alignment	center/end/between	clusterAlignmentClass() añade wb-cluster-center, wb-cluster-end o wb-cluster-between.
settings.items_alignment	start/end/stretch	clusterAlignClass() añade wb-items-start, wb-items-end o wb-cms-items-stretch; center no añade ninguna clase.
settings.wrap	nowrap	clusterWrapClass() añade wb-flex-nowrap.
settings.width	full	clusterWidthClass() añade wb-w-full.

Usar para / Evitar para

Usar para: composición horizontal, filas de acciones y elementos internos de la navbar.

Evitar para: usar Grid para una sola fila horizontal de controles pequeños.

Notas

El bloque posee su raíz <div>. Renderiza los bloques hijos directamente. Es la primitiva normal de composición horizontal para botones y elementos internos de la navbar.

Content Header (`content_header`)

Fuente del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/content_header.blade.php

HTML renderizado

<header class="wb-content-header wb-text-center" data-wb-public-block-type="content-header">
  <h1 class="wb-content-title">Page title</h1>
  <p class="wb-content-subtitle">Intro text</p>
  <div class="wb-content-meta">
    <span>Meta item</span>
    <span class="wb-content-meta-divider"></span>
    <span>Another item</span>
  </div>
</header>

Clases principales de CSS / WebBlocks UI

wb-content-header, clase de alineación opcional, wb-content-title, wb-content-subtitle, wb-content-meta, wb-content-meta-divider.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
settings.alignment	left/center/right	contentHeaderAlignmentClass() añade wb-text-left, wb-text-center o wb-text-right.
title	cualquier texto	Se renderiza como .
subtitle	cualquier texto	Renderiza cuando está presente.
meta	lista	Renderiza spans .wb-content-meta separados por .wb-content-meta-divider.

Usar para / Evitar para

Usar para: introducciones de página o de sección principal con título, entradilla y metadatos.

Evitar para: contenido anidado en tarjetas o lugares donde el encabezado no debería ser un H1.

Notas

El bloque posee su raíz <header>. Siempre renderiza el título como <h1>. No es un contenedor.

Hero (`hero`)

Fuente del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/hero.blade.php

HTML renderizado

<section class="wb-card wb-promo wb-card-accent" data-wb-public-block-type="hero">
  <div class="wb-card-body wb-promo-copy wb-stack wb-gap-3 wb-text-center">
    <p class="wb-eyebrow">Eyebrow</p>
    <h1 class="wb-promo-title">Hero title</h1>
    <p class="wb-promo-text">Hero copy.</p>
    <div class="wb-promo-actions wb-cluster wb-cluster-2">
      <a href="/start" class="wb-btn wb-btn-primary">Start</a>
    </div>
  </div>
</section>

Clases principales de CSS / WebBlocks UI

wb-card, wb-promo, opcionalmente wb-card-muted o wb-card-accent, wb-card-body, wb-promo-copy, wb-stack, wb-gap-3, opcionalmente wb-text-center, wb-eyebrow, wb-promo-title, wb-promo-text, wb-promo-actions, wb-cluster, wb-btn.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
variant	muted o soft	Añade wb-card-muted a la tarjeta promocional.
variant	accent	Añade wb-card-accent a la tarjeta promocional.
variant	default/otro	Usa wb-card wb-promo sin el modificador muted/accent.
settings.layout	centered	Añade wb-text-center a .wb-promo-copy.
settings.title_tag	h1/h2/h3	Hero admite h1, h2 o h3; CTA renderiza su título como h2.
bloques button hijos	publicados con etiqueta y URL	Renderiza hasta dos acciones gestionadas .wb-btn a través de _actions.

Usar para / Evitar para

Usar para: introducciones de marketing al principio de la página con botones CTA gestionados.

Evitar para: agrupación general de secciones o contenido anidado arbitrario.

Notas

El bloque posee su raíz promocional <section>. Solo acepta bloques hijos button para las acciones gestionadas y renderiza como máximo dos hijos publicados con URL y etiqueta. settings.title_tag puede cambiar el elemento de encabezado a h1, h2 o h3.

CTA (`cta`)

Fuente del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/cta.blade.php

HTML renderizado

<section class="wb-card wb-promo wb-card-muted" data-wb-public-block-type="cta">
  <div class="wb-card-body wb-promo-copy wb-stack wb-gap-3">
    <p class="wb-eyebrow">Ready</p>
    <h2 class="wb-promo-title">Start now</h2>
    <p class="wb-promo-text">CTA body.</p>
    <div class="wb-promo-actions wb-cluster wb-cluster-2">
      <a href="/contact" class="wb-btn wb-btn-primary">Contact</a>
    </div>
  </div>
</section>

Clases principales de CSS / WebBlocks UI

wb-card, wb-promo, opcionalmente wb-card-muted o wb-card-accent, wb-card-body, wb-promo-copy, wb-stack, wb-gap-3, wb-eyebrow, wb-promo-title, wb-promo-text, wb-promo-actions, wb-cluster, wb-btn.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
variant	muted o soft	Añade wb-card-muted a la tarjeta promocional.
variant	accent	Añade wb-card-accent a la tarjeta promocional.
variant	default/otro	Usa wb-card wb-promo sin el modificador muted/accent.
settings.layout	centered	Añade wb-text-center a .wb-promo-copy.
settings.title_tag	h2 fijado en el renderizador	Hero admite h1, h2 o h3; CTA renderiza su título como h2.
bloques button hijos	publicados con etiqueta y URL	Renderiza hasta dos acciones gestionadas .wb-btn a través de _actions.

Usar para / Evitar para

Usar para: secciones de conversión centradas con una fila de acciones breve.

Evitar para: introducciones de página completa; use Hero o Content Header.

Notas

El bloque posee su raíz promocional <section>. Solo acepta bloques hijos button para las acciones gestionadas y renderiza como máximo dos hijos publicados con URL y etiqueta.

Card (`card`)

Fuente del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/card.blade.php

HTML renderizado

<article class="wb-card" data-wb-public-block-type="card">
  <div class="wb-card-header">...</div>
  <div class="wb-card-body">...</div>
  <div class="wb-card-footer">...</div>
</article>

Reserva heredada sin regiones:

<article class="wb-card" data-wb-public-block-type="card">
  <div class="wb-card-header">Subtitle</div>
  <div class="wb-card-body wb-stack wb-gap-2">
    <strong>Title</strong>
    <p class="wb-m-0">Description</p>
  </div>
  <div class="wb-card-footer">
    <a href="/target" class="wb-btn wb-btn-secondary">Action</a>
  </div>
</article>

Clases principales de CSS / WebBlocks UI

wb-card, wb-card-header, wb-card-body, wb-card-footer, opcionalmente wb-stack, wb-gap-2, wb-m-0, wb-btn, wb-btn-secondary.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
settings.layout_name	cualquier valor almacenado	Solo metadatos de administración/layout; sin efecto sobre las clases públicas en el renderizador actual.
bloques hijos	hijos publicados	Se renderizan dentro de la tarjeta o de la raíz de la región.
campos de tarjeta heredados	filas de Card antiguas sin hijos de región	El Card padre puede renderizar una reserva mínima de cabecera/cuerpo/pie heredada.

Usar para / Evitar para

Usar para: elementos repetidos enmarcados con hijos Header, Body y Footer explícitos.

Evitar para: envolver secciones enteras de página o anidar tarjetas dentro de tarjetas.

Notas

El bloque es propietario de su <article> raíz. La estructura normal son bloques de región hijos card_header, card_body y card_footer. La vía de fallback solo se aplica a registros de tarjeta antiguos guardados sin hijos de región.

Card Header (`card_header`)

Fuente del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/card_header.blade.php

HTML renderizado

<div class="wb-card-header" data-wb-public-block-type="card-header">
  <!-- child blocks -->
</div>

Clases CSS principales / WebBlocks UI

wb-card-header.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
settings.layout_name	cualquier valor almacenado	Solo metadatos de administración/layout; sin efecto de clase pública en el renderizador actual.
bloques hijos	hijos publicados	Se renderizan dentro de la raíz de la tarjeta o de la región.
campos de tarjeta heredados	registros Card antiguos sin hijos de región	El Card padre puede renderizar un fallback mínimo de cabecera/cuerpo/pie heredado.

Usar para / Evitar para

Usar para: la región de cabecera dentro de Card.

Evitar para: colocarlo fuera de Card.

Notas

El bloque es propietario de la raíz de su región de tarjeta y renderiza los bloques hijos. Está pensado solo para usarse bajo card.

Card Body (`card_body`)

Fuente del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/card_body.blade.php

HTML renderizado

<div class="wb-card-body" data-wb-public-block-type="card-body">
  <!-- child blocks -->
</div>

Clases CSS principales / WebBlocks UI

wb-card-body.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
settings.layout_name	cualquier valor almacenado	Solo metadatos de administración/layout; sin efecto de clase pública en el renderizador actual.
bloques hijos	hijos publicados	Se renderizan dentro de la raíz de la tarjeta o de la región.
campos de tarjeta heredados	registros Card antiguos sin hijos de región	El Card padre puede renderizar un fallback mínimo de cabecera/cuerpo/pie heredado.

Usar para / Evitar para

Usar para: la región de contenido principal dentro de Card.

Evitar para: colocarlo fuera de Card.

Notas

El bloque es propietario de la raíz de su región de tarjeta y renderiza los bloques hijos. Está pensado solo para usarse bajo card.

Card Footer (`card_footer`)

Fuente del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/card_footer.blade.php

HTML renderizado

<div class="wb-card-footer" data-wb-public-block-type="card-footer">
  <!-- child blocks -->
</div>

Clases CSS principales / WebBlocks UI

wb-card-footer.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
settings.layout_name	cualquier valor almacenado	Solo metadatos de administración/layout; sin efecto de clase pública en el renderizador actual.
bloques hijos	hijos publicados	Se renderizan dentro de la raíz de la tarjeta o de la región.
campos de tarjeta heredados	registros Card antiguos sin hijos de región	El Card padre puede renderizar un fallback mínimo de cabecera/cuerpo/pie heredado.

Usar para / Evitar para

Usar para: acciones o contenido de pie complementario dentro de Card.

Evitar para: colocarlo fuera de Card.

Notas

El bloque es propietario de la raíz de su región de tarjeta y renderiza los bloques hijos. Está pensado solo para usarse bajo card.

Header (`header`)

Fuente del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/header.blade.php

HTML renderizado

<h2 class="wb-text-center" id="section-anchor" data-wb-public-block-type="header">Heading</h2>

Clases CSS principales / WebBlocks UI

Clase de alineación opcional procedente de headerAlignmentClass().

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
variant	h1-h6	Controla el elemento de encabezado.
variant	vacío/otro	Por defecto, .
settings.alignment	left/center/right	headerAlignmentClass() añade wb-text-left, wb-text-center o wb-text-right.
settings.anchor o fallback de URL heredado	cadena de anclaje segura	Añade un atributo id para enlaces dentro de la misma página y para el índice.

Usar para / Evitar para

Usar para: encabezados semánticos dentro del contenido de la página.

Evitar para: introducciones de página que necesiten subtítulo o metadatos; use Content Header.

Notas

El bloque es propietario del propio elemento de encabezado (de h1 a h6). variant controla el nivel del encabezado, con h2 por defecto. settings.anchor o el fallback de URL heredado pueden añadir id.

Plain Text (`plain_text`)

Fuente del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/plain_text.blade.php

HTML renderizado

<div class="wb-public-block" data-wb-public-block-type="plain-text">
  <p class="wb-text-center">Plain copy.</p>
</div>

Clases CSS principales / WebBlocks UI

Clase de alineación opcional procedente de plainTextAlignmentClass(). El contenedor genérico usa wb-public-block.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
settings.alignment	left/center/right	plainTextAlignmentClass() añade wb-text-left, wb-text-center o wb-text-right a .
content	texto	Se escapa dentro de un único párrafo.
status	sin publicar	El bloque no se incluye en las consultas normales del árbol de bloques públicos.

Usar para / Evitar para

Usar para: textos breves sin formato.

Evitar para: párrafos con formato, listas, enlaces o encabezados; use Rich Text/Header.

Notas

El bloque no es propietario de su raíz pública según Block::ownsPublicRoot(), por lo que el renderizado normal del slot lo envuelve. El propio renderizador solo emite <p>.

Rich Text (`rich-text`)

Fuente del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/rich-text.blade.php

HTML renderizado

<div class="wb-public-block" data-wb-public-block-type="rich-text">
  <div class="wb-rich-text wb-rich-text-readable">
    <p>Safe <strong>formatted</strong> copy.</p>
  </div>
</div>

Clases CSS principales / WebBlocks UI

wb-rich-text, wb-rich-text-readable, plus generic wb-public-block.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
content	HTML enriquecido seguro	SafeRichTextRenderer emite el contenido saneado dentro de wb-rich-text wb-rich-text-readable.
content	vacío tras el saneamiento	El renderizador no emite nada.
HTML/clases no admitidos	presentes en el contenido	El renderizador seguro los elimina en lugar de asignarlos a clases públicas.

Usar para / Evitar para

Usar para: texto de cuerpo con formato en línea seguro, enlaces y listas sencillas.

Evitar para: encabezados, medios, tablas, botones o marcado de layout en bruto.

Notas

El renderizador no emite nada cuando el contenido saneado está vacío. No es propietario de la raíz a nivel de slot. El contenido se renderiza mediante SafeRichTextRenderer.

Button Link (`button_link`)

Fuente del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/button_link.blade.php

HTML renderizado

<div class="wb-public-block" data-wb-public-block-type="button-link">
  <a href="/start" class="wb-btn wb-btn-primary">Start</a>
</div>

Clases CSS principales / WebBlocks UI

Clase procedente de buttonLinkVariantClass(), normalmente wb-btn más una clase de variante.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
variant	secondary	buttonLinkVariantClass() emite wb-btn wb-btn-secondary.
variant	default/otro	buttonLinkVariantClass() emite wb-btn wb-btn-primary.
settings.url	URL segura	Renderiza el href del enlace; una URL insegura o vacía no renderiza nada.
settings.target	_blank	Añade target="_blank" rel="noopener noreferrer".

Usar para / Evitar para

Usar para: enlaces editoriales independientes con estilo de botón.

Evitar para: acciones gestionadas de Hero/CTA donde se espera el contrato de hijo button.

Notas

El renderizador no emite nada sin una URL segura. El destino _blank añade target="_blank" y rel="noopener noreferrer". Normalmente recibe el contenedor genérico de bloque público, salvo que esté anidado en un padre propietario de la raíz.

Image (`image`)

Fuente del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/image.blade.php

HTML renderizado

<figure class="wb-stack wb-gap-2" data-wb-public-block-type="image">
  <a href="/target">
    <img src="/media/photo.jpg" alt="Alt text" width="1200" height="800">
  </a>
  <figcaption>Caption</figcaption>
</figure>

Clases CSS principales / WebBlocks UI

wb-stack, wb-gap-2.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
media_id	medio seleccionado	Renderiza con usando la URL y las dimensiones del medio.
url	URL segura	Envuelve en un enlace únicamente la imagen.
caption	texto traducido	Renderiza cuando está presente.
texto alternativo	traducido o fallback del medio	Renderiza el atributo alt de la imagen.

Usar para / Evitar para

Usar para: imágenes semánticas individuales con pie de foto o enlace opcionales.

Evitar para: colecciones de imágenes; use Gallery.

Notas

El bloque es propietario de su raíz <figure> y no emite nada sin medio. El enlace opcional envuelve solo la imagen cuando la URL es segura (http, https, /, #, mailto o tel).

Gallery (`gallery`)

Fuente del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/gallery.blade.php

HTML renderizado

<div class="wb-gallery wb-gallery--grid wb-gallery--cols-3 wb-gallery--gap-4 wb-gallery--aspect-16-9"
  data-wb-public-block-type="gallery"
  data-wb-gallery-variant="grid"
  data-wb-gallery-captions="below"
  aria-label="Gallery">
  <div class="wb-gallery-grid">
    <figure class="wb-gallery-item">
      <a href="/media/full.jpg" class="wb-gallery-trigger" data-wb-gallery-target="#wb-gallery-viewer-10">
        <img src="/media/thumb.jpg" alt="Alt" class="wb-gallery-media">
      </a>
      <figcaption class="wb-gallery-caption">Caption</figcaption>
    </figure>
  </div>
</div>

Clases CSS principales / WebBlocks UI

wb-gallery, wb-gallery--{variant}, wb-gallery--cols-{n}, wb-gallery--gap-{n}, wb-gallery--aspect-{ratio}, wb-gallery-grid, wb-gallery-item, wb-gallery-trigger or wb-gallery-link, wb-gallery-media, wb-gallery-caption, wb-gallery-caption-title, wb-gallery-caption-meta.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
settings.variant	grid/masonry/masonary/collage	galleryVariant() añade wb-gallery--grid, wb-gallery--masonry o wb-gallery--collage; masonary se normaliza a masonry.
settings.columns	2/3/4/5	galleryColumns() añade wb-gallery--cols-{n}; el valor por defecto es 3.
settings.gap	none/sm/md/lg	galleryGap() añade wb-gallery--gap-{value}; el valor por defecto es md.
settings.aspect_ratio	auto/square/4:3/16:9/portrait	galleryAspectRatio() añade wb-gallery--aspect-{value}, con : representado como -.
settings.captions_mode	hidden/below/overlay/on-hover	Controla los pies de foto inferiores o el marcado de pie superpuesto; el valor por defecto es below.
settings.overlay_mode	none/gradient/solid	Controla el modificador del pie superpuesto; el valor por defecto es gradient.
settings.lightbox_enabled	true/default	Usa .wb-gallery-trigger y registra gallery-viewer en PublicOverlayRegistry.
settings.lightbox_enabled	false	Usa .wb-gallery-link y no hay modal de visor.

Usar para / Evitar para

Usar para: colecciones de imágenes estructuradas con pies de foto y lightbox opcional.

Evitar para: texto introductorio de sección; coloque Content Header/Rich Text antes de Gallery.

Notas

El bloque es propietario de su raíz de galería y registra el HTML de gallery-viewer en PublicOverlayRegistry cuando el lightbox está activado. Las variantes, columnas, separación, relación de aspecto, pies de foto, modo de superposición y los ajustes del lightbox cambian atributos y clases. Los elementos heredados basados en settings siguen siendo legibles.

Columns (`columns`)

Fuente del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/columns.blade.php

HTML renderizado

<section class="wb-stack wb-gap-4" data-wb-public-block-type="columns">
  <div class="wb-stack wb-gap-1">
    <h2>Columns title</h2>
    <p class="wb-text-muted">Subtitle</p>
  </div>
  <div class="wb-stack wb-gap-2">
    <p class="wb-m-0">Intro copy.</p>
  </div>
  <div class="wb-grid wb-grid-3">
    <!-- column_item or feature-item output -->
  </div>
</section>

Clases CSS principales / WebBlocks UI

wb-stack, wb-gap-4, wb-gap-1, wb-text-muted, wb-gap-2, wb-m-0, wb-grid, wb-grid-2, wb-grid-3, wb-grid-4.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
variant	cards	Los elementos hijos se renderizan con estilo de tarjeta.
variant	stats	Los elementos hijos se renderizan con estilo de estadística.
variant	plain/default	Los elementos hijos se renderizan con estilo de pila simple.
número de hijos	1	Usa wb-stack wb-gap-3 para el layout del elemento.
número de hijos	2/3/4+	Usa wb-grid wb-grid-2, wb-grid-3 o wb-grid-4.

Usar para / Evitar para

Usar para: grupos estructurados de características, estadísticas o columnas simples.

Evitar para: rejillas de layout arbitrarias donde Grid + Card resulta más claro.

Notas

El bloque es propietario de su <section> raíz. El número de hijos determina la clase de rejilla: un hijo usa wb-stack wb-gap-3, dos usan wb-grid wb-grid-2, tres usan wb-grid wb-grid-3 y, en los demás casos, wb-grid wb-grid-4. variant se pasa a los renderizadores hijos column_item/feature-item.

Column Item (`column_item`)

Fuente del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/column_item.blade.php

HTML renderizado

Variante cards:

<div class="wb-card">
  <div class="wb-card-body wb-stack wb-gap-2">
    <a href="/item" class="wb-no-decoration">
      <div class="wb-stack wb-gap-2">
        <strong>Title</strong>
        <p class="wb-m-0">Copy.</p>
      </div>
    </a>
  </div>
</div>

Variante plain:

<div class="wb-stack wb-gap-2">
  <strong>Title</strong>
  <p class="wb-m-0">Copy.</p>
</div>

Variante stats:

<div class="wb-stat">
  <div class="wb-stat-label">Label</div>
  <div class="wb-stat-value">Value</div>
  <div class="wb-stat-delta">Detail</div>
</div>

Clases CSS principales / WebBlocks UI

wb-card, wb-card-body, wb-stack, wb-gap-2, wb-no-decoration, wb-m-0, wb-stat, wb-stat-label, wb-stat-value, wb-stat-delta.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
variante del columns padre	cards	Renderiza .wb-card > .wb-card-body.
variante del columns padre	stats	Renderiza .wb-stat con etiqueta/valor/detalle.
variante del columns padre	plain/default	Renderiza .wb-stack wb-gap-2.
url	URL segura	Las variantes cards/plain envuelven el contenido en a.wb-no-decoration; stats no renderiza enlace en el renderizador actual.

Usar para / Evitar para

Usar para: hijos de Columns.

Evitar para: contenido de página independiente; use Card o Stat Card cuando sea autónomo.

Notas

Este renderizador cambia sustancialmente según la variante del columns padre. No es propietario de una raíz a nivel de slot y normalmente lo renderiza el padre.

Feature Grid (`feature-grid`)

Fuente del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/feature-grid.blade.php

HTML renderizado

<section class="wb-stack wb-gap-4" data-wb-public-block-type="feature-grid">
  <div class="wb-grid wb-grid-3">
    <div class="wb-card">...</div>
  </div>
</section>

Clases CSS principales / WebBlocks UI

Delega en Columns: wb-stack, wb-gap-4, wb-grid, wb-card y las clases relacionadas de column_item.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
comportamiento del renderizador	alias delegado	Delega en una ruta de renderizado existente; el mapa exacto de ajustes sigue al delegado allí donde es visible.
páginas nuevas preferidas	n/a	Prefiera el bloque canónico indicado en Notas en lugar de este bloque alias/de compatibilidad.

Usar para / Evitar para

Usar para: contenido de feature-grid heredado que ya existe.

Evitar para: páginas nuevas construidas a mano; use Columns con Column Item o Grid con Card.

Notas

El renderizador replica el bloque, filtra los hijos a feature-item y al column_item compatible con versiones anteriores, fuerza variant = cards e incluye el renderizador de Columns. Según el helper, no es propietario de la raíz pública, por lo que el renderizado de primer nivel puede añadir wb-public-block.

Feature Item (`feature-item`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/feature-item.blade.php

HTML renderizado

<div class="wb-card">
  <div class="wb-card-body wb-stack wb-gap-2">
    <strong>Feature title</strong>
    <p class="wb-m-0">Feature copy.</p>
  </div>
</div>

Clases CSS / WebBlocks UI principales

Delega en la variante cards de Column Item: wb-card, wb-card-body, wb-stack, wb-gap-2, wb-m-0.

Settings -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
comportamiento del renderizador	alias delegado	Delega en una ruta de renderizado existente; el mapa exacto de ajustes sigue al delegado allí donde es visible.
páginas nuevas preferidas	n/a	Prefiera el bloque canónico indicado en Notas en lugar de este bloque alias/de compatibilidad.

Usar para / Evitar para

Usar para: hijos heredados de Feature Grid.

Evitar para: tarjetas de característica nuevas e independientes; use regiones de Card o Column Item.

Notas

Este renderizador incluye column_item con columnsVariant = cards. Está pensado como hijo de feature-grid.

Accordion (`accordion`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/accordion.blade.php

HTML renderizado

<div class="wb-public-block" data-wb-public-block-type="accordion">
  <div class="wb-stack wb-gap-3">
    <div class="wb-stack wb-gap-1">
      <h3>Questions</h3>
      <p>Intro copy.</p>
    </div>
    <div class="wb-stack-2">
      <details>
        <summary>Question?</summary>
        <div>Answer.</div>
      </details>
    </div>
  </div>
</div>

Clases CSS / WebBlocks UI principales

wb-stack, wb-gap-3, wb-gap-1, wb-stack-2, más el genérico wb-public-block.

Settings -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
title/subtitle	presente	Renderiza el encabezado y el texto de introducción sobre los elementos.
filas hijas	publicadas con título y contenido	Renderiza cada una como elemento desplegable ....
filas hijas	sin título o sin contenido	Se omiten en la recopilación de elementos actual.
envoltorio	bloque de primer nivel que no es raíz	Recibe del renderizador de slots el envoltorio genérico .wb-public-block.

Usar para / Evitar para

Usar para: grupos de preguntas frecuentes o de contenido desplegable.

Evitar para: tarjetas sueltas de pregunta y respuesta; use FAQ solo para filas hijas de compatibilidad.

Notas

El bloque renderiza las filas hijas como elementos de acordeón cuando cada hija tiene título y contenido. No es propietario de la raíz a nivel de slot. Page Converter escribe los elementos details en filas faq cuando el contrato está disponible, y accordion consume el título y el contenido de las hijas.

FAQ (`faq`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/faq.blade.php

HTML renderizado

<div class="wb-public-block" data-wb-public-block-type="faq">
  <section class="wb-card wb-card-muted">
    <div class="wb-card-body wb-stack wb-gap-2">
      <strong>Question?</strong>
      <p class="wb-m-0">Answer.</p>
    </div>
  </section>
</div>

Clases CSS / WebBlocks UI principales

wb-card, wb-card-muted, wb-card-body, wb-stack, wb-gap-2, wb-m-0, más el genérico wb-public-block.

Settings -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
title/content	presente	Renderiza una tarjeta atenuada con la pregunta y la respuesta.
hijos	hijos publicados	Renderiza un área adicional de bloques hijos wb-stack wb-gap-4.
uso como hijo de Accordion	dentro de Accordion	Accordion consume el título y el contenido de la fila FAQ como contenido del elemento desplegable.

Usar para / Evitar para

Usar para: filas hijas de elementos de acordeón y tarjetas heredadas de una sola pregunta y respuesta.

Evitar para: secciones de preguntas frecuentes nuevas e independientes; use Accordion como padre.

Notas

FAQ es un renderizador de una sola tarjeta de pregunta y respuesta. Si existen hijos, también los renderiza en un bloque wb-stack wb-gap-4 adicional.

Navbar (`sticky-navbar`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/sticky-navbar.blade.php

HTML renderizado

<nav class="wb-navbar wb-navbar--static" data-wb-public-block-type="sticky-navbar">
  <!-- navbar child blocks -->
</nav>

Clases CSS / WebBlocks UI principales

wb-navbar, más una clase opcional de navbarPositionClass() como wb-navbar--static.

Settings -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
settings.sticky_mode	sticky/default	Usa solo la base wb-navbar para el comportamiento fijo.
settings.sticky_mode	static	navbarPositionClass() añade wb-navbar--static.
settings.sticky_mode	fixed	navbarPositionClass() añade wb-fixed.
bloques hijos	hijos permitidos y publicados	Se renderizan directamente dentro de .

Usar para / Evitar para

Usar para: árboles de bloques de cabecera y navegación públicas compartidas.

Evitar para: crear un armazón de cabecera propio alrededor del marcado de la navbar.

Notas

La etiqueta del bloque es Navbar, pero el slug persistido y el archivo del renderizador son sticky-navbar. Es propietario de su raíz externa <nav> y renderiza los bloques hijos. Los tipos de hijo permitidos incluyen container, cluster, header, plain_text, rich-text, button_link, navbar-brand, navbar-navigation, header-actions y search-form.

Navbar Brand (`navbar-brand`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/navbar-brand.blade.php

HTML renderizado

<div class="wb-public-block" data-wb-public-block-type="navbar-brand">
  <a href="/" class="wb-navbar-brand">
    <img src="/media/logo.svg" alt="Site name">
    <span class="wb-navbar-identity">
      <span>Site name</span>
      <span class="wb-navbar-brand-note">Tagline</span>
    </span>
  </a>
</div>

Clases CSS / WebBlocks UI principales

wb-navbar-brand, wb-navbar-identity, wb-navbar-brand-note, más el genérico wb-public-block salvo que esté anidado en un padre propietario de la raíz.

Settings -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
settings.url	URL segura	La URL guardada prevalece para el enlace de la marca.
settings.url	vacío	Recurre a la ruta de inicio del sitio y, después, a /.
settings.target	_blank	Añade target="_blank" rel="noopener noreferrer".
settings.aria_label	texto	Se usa como etiqueta accesible cuando no se renderiza texto visible.
media_id	medio del logotipo	Renderiza la imagen de marca dentro de wb-navbar-brand.

Usar para / Evitar para

Usar para: la identidad del sitio dentro de Navbar.

Evitar para: layouts de cabecera completos; combínelo con Navbar/Container/Cluster.

Notas

El bloque no es propietario del armazón externo de la navbar. Prevalece la URL guardada, después la ruta de inicio del sitio y después /. La salida con solo logotipo usa aria-label cuando no se renderiza texto.

Navbar Navigation (`navbar-navigation`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/navbar-navigation.blade.php

HTML renderizado

<div class="wb-public-block" data-wb-public-block-type="navbar-navigation">
  <div class="wb-cms-navbar-navigation">
    <div class="wb-dropdown wb-dropdown-end wb-cms-navbar-mobile-toggle">
      <button class="wb-navbar-toggle wb-cms-navbar-mobile-toggle-button" data-wb-toggle="dropdown">
        <i class="wb-icon wb-icon-menu" aria-hidden="true"></i>
      </button>
      <div class="wb-dropdown-menu wb-cms-navbar-mobile-menu">
        <ul class="wb-navbar-nav wb-cms-navbar-mobile-nav">...</ul>
      </div>
    </div>
    <div class="wb-navbar-links">
      <ul class="wb-navbar-nav">
        <li class="wb-navbar-nav-item">
          <a href="/" class="wb-navbar-link is-active" aria-current="page">Home</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Variante de grupo desplegable:

<li class="wb-navbar-nav-item wb-dropdown">
  <button class="wb-navbar-link" data-wb-toggle="dropdown" data-wb-target="#navbar-navigation-group-1-2">
    Group <i class="wb-icon wb-icon-chevron-down" aria-hidden="true"></i>
  </button>
  <div class="wb-dropdown-menu" id="navbar-navigation-group-1-2">
    <a class="wb-dropdown-item" href="/child">Child</a>
  </div>
</li>

Clases CSS / WebBlocks UI principales

wb-cms-navbar-navigation, wb-dropdown, wb-dropdown-end, wb-cms-navbar-mobile-toggle, wb-navbar-toggle, wb-cms-navbar-mobile-toggle-button, wb-icon, wb-icon-menu, wb-dropdown-menu, wb-cms-navbar-mobile-menu, wb-navbar-nav, wb-cms-navbar-mobile-nav, wb-navbar-links, wb-navbar-nav-item, wb-navbar-link, wb-dropdown-item, is-active.

Settings -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
settings.menu_key	clave de menú NavigationItem conocida	Selecciona el árbol de navegación del CMS que se renderiza.
title	texto	Se usa como etiqueta ARIA compartida cuando está presente.
elemento de grupo de navegación	grupo con hijos	Renderiza el disparador desplegable de WebBlocks UI y .wb-dropdown-menu.
elemento activo	coincide con la página actual	Añade is-active y aria-current="page".

Usar para / Evitar para

Usar para: enlaces de menú gestionados por el CMS dentro de Navbar.

Evitar para: filas de botones manuales; use Button Link o Cluster.

Notas

El slug real del núcleo es navbar-navigation. Renderiza árboles NavigationItem del CMS a partir de la clave de menú seleccionada. No es propietario del armazón externo de la navbar. Usa los hooks de desplegable de WebBlocks UI para los menús de grupo y para el menú móvil.

Header Actions (`header-actions`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/header-actions.blade.php

HTML renderizado

<div class="wb-public-block" data-wb-public-block-type="header-actions">
  <div class="wb-cluster wb-cluster-2 wb-cluster-end" data-wb-header-actions>
    <div class="wb-topbar-actions">
      <a class="wb-topbar-action" data-wb-public-search-open>
        <i class="wb-icon wb-icon-search" aria-hidden="true"></i>
      </a>
      <button class="wb-topbar-action" data-wb-mode-cycle>
        <i class="wb-icon wb-icon-sun-moon" aria-hidden="true"></i>
      </button>
      <div class="wb-dropdown wb-dropdown-end">
        <button class="wb-topbar-action" data-wb-toggle="dropdown">
          <i class="wb-icon wb-icon-palette" aria-hidden="true"></i>
        </button>
        <div class="wb-dropdown-menu">...</div>
      </div>
    </div>
  </div>
</div>

Clases CSS / WebBlocks UI principales

wb-cluster, wb-cluster-2, wb-cluster-end, wb-topbar-actions, wb-topbar-action, wb-icon, wb-icon-search, wb-icon-sun-moon, wb-icon-palette, wb-dropdown, wb-dropdown-end, wb-dropdown-menu, wb-dropdown-item, wb-dropdown-label, wb-dropdown-divider.

Settings -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
settings.show_search	false	Oculta la acción de búsqueda pública.
settings.show_mode_toggle	false	Oculta la acción de cambio de modo.
settings.show_accent_toggle	false	Oculta el desplegable de acento/tema.
ajustes por defecto	vacío/true	Renderiza todas las acciones.

Usar para / Evitar para

Usar para: las utilidades estándar de búsqueda y tema en las cabeceras.

Evitar para: CTA de negocio personalizadas; use Button Link/Button.

Notas

Los ajustes pueden ocultar la búsqueda, el cambio de modo o el menú de acento/tema. Este bloque no es propietario de una raíz a nivel de slot. Usa los hooks de desplegable de WebBlocks UI y los hooks de búsqueda pública del CMS.

Search Form (`search-form`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/search-form.blade.php

HTML renderizado

<div class="wb-public-block" data-wb-public-block-type="search-form">
  <form action="/search" method="GET" role="search" class="wb-cluster wb-cluster-2">
    <div class="wb-stack wb-gap-1 wb-flex-1">
      <label for="search-form-1">Search</label>
      <input id="search-form-1" type="search" name="q" class="wb-input" placeholder="Search this site">
    </div>
    <button type="submit" class="wb-btn wb-btn-primary">Search</button>
  </form>
</div>

Clases CSS / WebBlocks UI principales

wb-cluster, wb-cluster-2, wb-stack, wb-gap-1, wb-flex-1, wb-input, wb-btn, wb-btn-primary o wb-btn-secondary.

Settings -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
variant	secondary	El botón de envío usa wb-btn wb-btn-secondary.
variant	primary/default	El botón de envío usa wb-btn wb-btn-primary.
settings.show_button	false	Omite el botón de envío.
ruta de búsqueda no disponible	n/a	El renderizador no emite nada.

Usar para / Evitar para

Usar para: formularios de búsqueda del sitio.

Evitar para: formularios de filtrado o integraciones de búsqueda externas personalizadas.

Notas

El renderizador no emite nada si el resolvedor de rutas no puede producir una ruta de búsqueda. settings.show_button controla si se renderiza el botón de envío.

Stat Card (`stat-card`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/stat-card.blade.php

HTML renderizado

<div class="wb-public-block" data-wb-public-block-type="stat-card">
  <div class="wb-stat">
    <div class="wb-stat-label">Label</div>
    <div class="wb-stat-value">Value</div>
    <div class="wb-stat-detail">Detail</div>
    <div class="wb-stat-detail"><a href="/more" class="wb-link">Learn more</a></div>
  </div>
</div>

Clases CSS / WebBlocks UI principales

wb-stat, wb-stat-label, wb-stat-value, wb-stat-detail, wb-link, más el genérico wb-public-block.

Settings -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
subtitle	texto	Renderiza .wb-stat-label.
title	texto	Renderiza .wb-stat-value.
content	texto	Renderiza .wb-stat-detail.
url	URL segura	Añade un enlace Learn more con .wb-link.

Usar para / Evitar para

Usar para: tarjetas de métrica independientes.

Evitar para: grupos de varias métricas donde la variante stats de Columns es más compacta.

Notas

Es un bloque de contenido que no es propietario de la raíz. Usa subtitle como etiqueta, title como valor, content como detalle y una URL canónica opcional para un enlace Learn more.

Code (`code`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/code.blade.php

HTML renderizado

<div class="wb-public-block" data-wb-public-block-type="code">
  <pre><code data-language="php">php artisan test</code></pre>
</div>

Clases CSS / WebBlocks UI principales

El propio renderizador de code no emite ninguna clase de WebBlocks UI. El envoltorio genérico usa wb-public-block.

Settings -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
settings.language	texto	Se sanea y se convierte en data-language sobre .
settings.lang	texto	Alternativa heredada para data-language.
content	vacío	El renderizador no emite nada.

Usar para / Evitar para

Usar para: fragmentos de código.

Evitar para: prosa con formato o listas de comandos; use Rich Text/List según corresponda.

Notas

El renderizador termina antes de tiempo cuando el contenido está vacío. settings.language o settings.lang se convierte en un valor data-language saneado.

Download (`download`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/download.blade.php

HTML renderizado

<div class="wb-stack wb-gap-2" data-wb-public-block-type="download">
  <a href="/media/file.pdf" class="wb-btn wb-btn-secondary" download>Download file</a>
  <p>Helper copy.</p>
</div>

Clases CSS / WebBlocks UI principales

wb-stack, wb-gap-2, wb-btn, wb-btn-primary, wb-btn-secondary, wb-btn-ghost.

Settings -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
variant	primary	La clase del botón es wb-btn wb-btn-primary.
variant	ghost	La clase del botón es wb-btn wb-btn-ghost.
variant	secondary/default/otro	La clase del botón es wb-btn wb-btn-secondary.
media_id	medio de descarga	Se usa la URL del medio; sin medio, el renderizador no emite nada.
subtitle	texto	Renderiza un de ayuda.

Usar para / Evitar para

Usar para: CTA de descarga respaldadas por un medio.

Evitar para: tarjetas de archivos externos; use File cuando no exista un recurso de medios.

Notas

El bloque es propietario de su <div> raíz. Solo emite cuando downloadAsset() tiene una URL. variant cambia la clase del botón.

File (`file`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/file.blade.php

HTML renderizado

<div class="wb-card wb-card-muted" data-wb-public-block-type="file">
  <div class="wb-card-body wb-stack wb-gap-2">
    <strong>File title</strong>
    <p class="wb-m-0">Description.</p>
    <a href="/media/file.pdf" class="wb-btn wb-btn-secondary" download>Download</a>
    <span class="wb-text-sm wb-text-muted">file.pdf | application/pdf</span>
  </div>
</div>

Clases CSS / WebBlocks UI principales

wb-card, wb-card-muted, wb-card-body, wb-stack, wb-gap-2, wb-m-0, wb-btn, wb-btn-secondary, wb-text-sm, wb-text-muted.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
media_id	medio seleccionado	La URL del medio prevalece sobre la URL externa.
url	URL externa segura	Se usa solo cuando no hay ninguna URL de medio disponible.
title/content	texto	Se muestra como texto visible de la tarjeta cuando está presente.
source unavailable	n/d	El renderizador no genera nada o no genera ningún control reproducible, según la disponibilidad de la fuente.

Usar para / Evitar para

Usar para: tarjetas de archivo con un medio o con una URL externa revisada como alternativa.

Evitar para: descargas simples de medios en las que Download ya es suficiente.

Notas

El bloque es propietario de su tarjeta raíz. La URL del medio prevalece sobre una URL externa segura http, https o mailto. La etiqueta del botón es Download para los medios y Open file para una URL externa.

Video (`video`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/video.blade.php

HTML generado

<div class="wb-card wb-card-muted" data-wb-public-block-type="video">
  <div class="wb-card-body wb-stack wb-gap-3">
    <div class="wb-stack wb-gap-1">
      <strong>Video title</strong>
      <p class="wb-m-0">Video copy.</p>
    </div>
    <video controls preload="metadata">
      <source src="/media/video.mp4">
    </video>
  </div>
</div>

Variante de incrustación:

<iframe src="https://www.youtube.com/embed/abc123" title="Video title" loading="lazy" allowfullscreen></iframe>

Principales clases CSS / de WebBlocks UI

wb-card, wb-card-muted, wb-card-body, wb-stack, wb-gap-3, wb-gap-1, wb-m-0, wb-btn, wb-btn-secondary.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
media_id	medio seleccionado	La URL del medio prevalece sobre la URL externa.
url	URL externa segura	Se usa solo cuando no hay ninguna URL de medio disponible.
title/content	texto	Se muestra como texto visible de la tarjeta cuando está presente.
source unavailable	n/d	El renderizador no genera nada o no genera ningún control reproducible, según la disponibilidad de la fuente.

Usar para / Evitar para

Usar para: vídeos subidos o incrustaciones seguras de YouTube/Vimeo.

Evitar para: HTML arbitrario con iframes; use Trusted HTML solo como alternativa revisada.

Notas

El bloque es propietario de su tarjeta raíz. Los medios subidos se muestran con un <video> nativo. Las URL seguras de YouTube y Vimeo se muestran como incrustaciones en iframe. Otras URL HTTP seguras muestran un botón Open video.

Audio (`audio`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/audio.blade.php

HTML generado

<div class="wb-card wb-card-muted" data-wb-public-block-type="audio">
  <div class="wb-card-body wb-stack wb-gap-3">
    <div class="wb-stack wb-gap-1">
      <strong>Audio title</strong>
      <p class="wb-m-0">Audio copy.</p>
    </div>
    <audio controls preload="metadata">
      <source src="/media/audio.mp3">
    </audio>
  </div>
</div>

Principales clases CSS / de WebBlocks UI

wb-card, wb-card-muted, wb-card-body, wb-stack, wb-gap-3, wb-gap-1, wb-m-0.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
media_id	medio seleccionado	La URL del medio prevalece sobre la URL externa.
url	URL externa segura	Se usa solo cuando no hay ninguna URL de medio disponible.
title/content	texto	Se muestra como texto visible de la tarjeta cuando está presente.
source unavailable	n/d	El renderizador no genera nada o no genera ningún control reproducible, según la disponibilidad de la fuente.

Usar para / Evitar para

Usar para: audio subido o medios de audio externos seguros.

Evitar para: incrustaciones de pódcast o reproductores que requieran marcado no admitido; valore Trusted HTML como alternativa.

Notas

El bloque es propietario de su tarjeta raíz. La URL del medio subido prevalece sobre una URL HTTP externa segura.

Table (`table`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/table.blade.php

HTML generado

<div class="wb-public-block" data-wb-public-block-type="table">
  <div class="wb-stack wb-gap-2">
    <h3>Table title</h3>
    <div class="wb-table-wrap">
      <table class="wb-table">
        <thead>
          <tr><th>Name</th><th>Value</th></tr>
        </thead>
        <tbody>
          <tr><td>One</td><td>Two</td></tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Principales clases CSS / de WebBlocks UI

wb-stack, wb-gap-2, wb-table-wrap, wb-table, más el genérico wb-public-block.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
variant	plain	Sin fila de encabezado; todas las filas se generan en .
variant	default/other	La primera fila se genera en .
settings.rows	array	La fuente de filas heredada prevalece cuando está presente.
content	líneas separadas por barras verticales	Se usa como fuente de filas cuando settings.rows está vacío.

Usar para / Evitar para

Usar para: tablas estructuradas sencillas.

Evitar para: rejillas de maquetación o tablas de datos interactivas complejas.

Notas

Las filas provienen del settings.rows heredado cuando existe y, si no, de las líneas de contenido traducido separadas por barras verticales. variant = plain desactiva el comportamiento de fila de encabezado.

Quote (`quote`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/quote.blade.php

HTML generado

<div class="wb-public-block" data-wb-public-block-type="quote">
  <blockquote class="wb-stack wb-gap-2">
    <p class="wb-m-0">Quote text.</p>
    <footer>Name | Role</footer>
  </blockquote>
</div>

Variante testimonial:

<div class="wb-card wb-card-muted">
  <div class="wb-card-body">
    <blockquote class="wb-stack wb-gap-2">...</blockquote>
  </div>
</div>

Principales clases CSS / de WebBlocks UI

wb-stack, wb-gap-2, wb-m-0, opcionalmente wb-card, wb-card-muted, wb-card-body, más el genérico wb-public-block.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
variant	testimonial	Envuelve el blockquote en wb-card wb-card-muted > .wb-card-body.
variant	default/other	Genera un simple.
subtitle	texto	Se genera en junto con el contexto de title/content.

Usar para / Evitar para

Usar para: citas y testimonios.

Evitar para: avisos destacados genéricos o tarjetas.

Notas

El renderizador en sí no añade data-wb-public-block-type; el envoltorio genérico lo aporta el renderizado del slot de nivel superior.

Link List (`link-list`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/link-list.blade.php

HTML generado

<div class="wb-public-block" data-wb-public-block-type="link-list">
  <div class="wb-stack wb-gap-3">
    <div class="wb-stack wb-gap-1">
      <div class="wb-link-list-meta">Meta</div>
      <h2>Links</h2>
      <p>Description.</p>
    </div>
    <div class="wb-link-list">
      <a href="/item" class="wb-link-list-item">...</a>
    </div>
  </div>
</div>

Principales clases CSS / de WebBlocks UI

wb-stack, wb-gap-3, wb-gap-1, wb-link-list, wb-link-list-meta.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
title/subtitle/content	texto	Genera una pila introductoria opcional encima de los enlaces.
hijo link-list-item	hijos publicados	Genera los hijos dentro de .wb-link-list.
sin hijos	n/d	El renderizador no tiene filas de enlace que mostrar.

Usar para / Evitar para

Usar para: listas estructuradas de enlaces.

Evitar para: menús de navegación completos; use Navbar/Navigation Auto según corresponda.

Notas

El bloque solo muestra los hijos link-list-item publicados. No es propietario de la raíz a nivel de slot.

Link List Item (`link-list-item`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/link-list-item.blade.php

HTML generado

<a href="/item" class="wb-link-list-item">
  <div class="wb-link-list-main">
    <span class="wb-link-list-title">Title</span>
    <span class="wb-link-list-meta">Meta</span>
  </div>
  <div class="wb-link-list-desc">Description.</div>
</a>

Principales clases CSS / de WebBlocks UI

wb-link-list-item, wb-link-list-main, wb-link-list-title, wb-link-list-meta, wb-link-list-desc.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
url	URL segura	Obligatorio para que haya salida; se convierte en el href del ancla.
title	texto	Obligatorio para que haya salida; genera .wb-link-list-title.
subtitle	texto	Genera .wb-link-list-meta.
content	texto	Genera .wb-link-list-desc.

Usar para / Evitar para

Usar para: hijos de Link List.

Evitar para: botones autónomos o elementos de menú de navegación.

Notas

El renderizador solo genera salida cuando existen tanto una URL segura como un título. Está pensado como hijo de link-list.

Navigation Auto (`navigation-auto`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/navigation-auto.blade.php

HTML generado

<div class="wb-public-block" data-wb-public-block-type="navigation-auto">
  <nav class="wb-stack wb-gap-2" aria-label="main navigation" data-wb-menu-key="main">
    <ul class="wb-cluster wb-cluster-2 wb-cluster-between">
      <li class="wb-stack wb-gap-1">
        <a href="/" class="wb-btn wb-btn-secondary">Home</a>
      </li>
    </ul>
  </nav>
</div>

Variante de menú de pie de página / legal:

<ul class="wb-stack wb-gap-1">
  <li class="wb-stack wb-gap-1"><a href="/privacy" class="wb-link">Privacy</a></li>
</ul>

Principales clases CSS / de WebBlocks UI

wb-stack, wb-gap-2, wb-gap-1, wb-cluster, wb-cluster-2, wb-cluster-between, wb-btn, wb-btn-secondary, wb-link, wb-text-sm.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
settings.menu_key o settings.location	clave de menú conocida	Selecciona el menú de navegación del CMS; el helper recurre a primary/footer según el slot o el subtítulo.
menú footer/legal	clave footer o legal	Genera una lista apilada de .wb-link.
otro menú	primary/default	Genera enlaces raíz agrupados con estilo de botón.
elemento activo	coincide con la página actual	Añade clases current/active donde el renderizador las resuelve.

Usar para / Evitar para

Usar para: el renderizado por compatibilidad de los menús del CMS.

Evitar para: nuevas cabeceras compartidas, donde el hijo previsto es Navbar Navigation.

Notas

El renderizador resuelve un menú de navegación del CMS por su clave. Los menús de pie de página y legales se muestran como enlaces apilados; los demás menús muestran enlaces raíz agrupados con estilo de botón.

TOC (`toc`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/toc.blade.php

HTML generado

<div class="wb-public-block" data-wb-public-block-type="toc">
  <div class="wb-stack wb-gap-2">
    <strong>Contents</strong>
    <div class="wb-link-list">
      <a class="wb-link-list-item" href="#intro">
        <div class="wb-link-list-main">
          <span class="wb-link-list-title">Intro</span>
        </div>
        <div class="wb-link-list-desc">Jump to section</div>
      </a>
    </div>
  </div>
</div>

Principales clases CSS / de WebBlocks UI

wb-stack, wb-gap-2, wb-link-list, wb-link-list-item, wb-link-list-main, wb-link-list-title, wb-link-list-meta, wb-link-list-desc.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
title	texto	Genera la etiqueta del encabezado; la etiqueta visible por defecto es la del comportamiento actual del renderizador.
bloques Header de la misma página	publicados y con anclas	Genera enlaces .wb-link-list-item.
variante de header	h3	La descripción indica Jump to subsection; las demás indican Jump to section.
sin encabezados elegibles	n/d	El renderizador no genera nada.

Usar para / Evitar para

Usar para: índices de contenido de la misma página a partir de bloques Header con anclas.

Evitar para: listas de enlaces manuales; use Link List.

Notas

El renderizador lee los bloques Header publicados y con ancla del mismo árbol de página. No genera nada cuando no hay encabezados elegibles.

Alert (`alert`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/alert.blade.php

HTML generado

<div class="wb-public-block" data-wb-public-block-type="alert">
  <div class="wb-alert wb-alert-info">
    <h3 class="wb-alert-title">Notice</h3>
    <p>Message.</p>
  </div>
</div>

Principales clases CSS / de WebBlocks UI

wb-alert, la clase de variante que devuelve alertVariantClass(), wb-alert-title, más el genérico wb-public-block.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
settings.variant	success/warning/danger	alertVariantClass() añade wb-alert-success, wb-alert-warning o wb-alert-danger.
settings.variant	info/default/other	Añade wb-alert-info.
title	texto	Genera .wb-alert-title.
content	texto	Genera el cuerpo del aviso.

Usar para / Evitar para

Usar para: avisos en línea dirigidos al usuario.

Evitar para: promociones de marketing; use CTA/Hero.

Notas

El bloque no es propietario de la raíz a nivel de slot. La variante compartida controla la clase de tono del aviso.

Contact Form (`contact_form`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/contact_form.blade.php

HTML generado

<div class="wb-public-block" data-wb-public-block-type="contact-form">
  <section class="wb-card wb-public-contact-form-card" id="contact-form-1">
    <div class="wb-card-body wb-stack wb-gap-4">
      <div class="wb-stack wb-gap-2">
        <h2>Contact</h2>
        <p>Intro copy.</p>
      </div>
      <form method="POST" action="/contact-messages" class="wb-stack wb-gap-3">
        <input type="hidden" name="_token" value="csrf-token">
        <input type="hidden" name="block_id" value="1">
        <input type="hidden" name="page_id" value="10">
        <input type="hidden" name="source_url" value="/contact">
        <input type="hidden" name="submitted_at" value="1770000000">
        <input type="hidden" name="_form_check_name" value="signed-generated-field-name">
        <div class="wb-form-check" inert aria-hidden="true">
          <label for="contact-form-check-1">Leave this field empty</label>
          <input id="contact-form-check-1" type="text" name="form_check_generatedtoken" tabindex="-1" autocomplete="off">
        </div>
        <div class="wb-grid wb-grid-2">
          <div class="wb-stack wb-gap-1">
            <label class="wb-label">Name</label>
            <input class="wb-input" required>
          </div>
          <div class="wb-stack wb-gap-1">
            <label class="wb-label">Email</label>
            <input class="wb-input" type="email" required>
          </div>
        </div>
        <textarea class="wb-textarea" rows="7" required></textarea>
        <div class="wb-cluster wb-cluster-between wb-cluster-2">
          <span class="wb-text-sm wb-text-muted">Your message is stored first...</span>
          <button class="wb-btn wb-btn-primary">Send message</button>
        </div>
      </form>
    </div>
  </section>
</div>

Principales clases CSS / de WebBlocks UI

wb-card, wb-public-contact-form-card, wb-card-body, wb-stack, wb-gap-4, wb-gap-3, wb-gap-2, wb-gap-1, wb-alert, wb-alert-danger, wb-alert-title, wb-grid, wb-grid-2, wb-label, wb-input, wb-textarea, wb-cluster, wb-cluster-between, wb-cluster-2, wb-text-sm, wb-text-muted, wb-btn, wb-btn-primary.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
destinatario de contacto del sitio	configurado	El formulario envía a contact-messages.store con el contexto oculto de sitio y página.
errores de validación	presentes	Genera wb-alert wb-alert-danger y mensajes a nivel de campo.
etiquetas de envío/éxito en settings	ajustes traducidos heredados	Trasladadas fuera por el resolutor/escritor de traducciones; la salida visible sigue los campos de bloque traducidos actuales.

El formulario público es salida nativa de Blade, no contenido de Trusted HTML. Los envíos desde el navegador requieren CSRF, incluyen el campo de comprobación antispam generado y propiedad del CMS, validan los campos obligatorios en el servidor, almacenan primero los mensajes legítimos y solo después intentan la notificación por correo electrónico siguiendo el orden documentado de destinatarios alternativos. El campo de comprobación lo genera el renderizador y no forma parte de la entrada normal del visitante.

Usar para / Evitar para

Usar para: el flujo de mensajes de contacto propio del producto.

Evitar para: formularios HTML sin procesar o incrustaciones de terceros, salvo que se revisen como Trusted HTML.

Notas

El renderizador incluye campos ocultos, CSRF, el marcado antispam .wb-form-check con inert y aria-hidden="true", errores de validación específicos, y envía a contact-messages.store. El antiguo campo website ya no forma parte del contrato del renderizador público.

Breadcrumb (`breadcrumb`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/breadcrumb.blade.php

HTML generado

<div class="wb-public-block" data-wb-public-block-type="breadcrumb">
  <nav class="wb-breadcrumb" aria-label="Breadcrumb">
    <ol class="wb-breadcrumb-list">
      <li class="wb-breadcrumb-item">
        <a class="wb-breadcrumb-link" href="/">Home</a>
      </li>
      <li class="wb-breadcrumb-item">
        <span class="wb-breadcrumb-current" aria-current="page">Current page</span>
      </li>
    </ol>
  </nav>
</div>

Principales clases CSS / de WebBlocks UI

wb-breadcrumb, wb-breadcrumb-list, wb-breadcrumb-item, wb-breadcrumb-link, wb-breadcrumb-current.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
settings.home_label	texto	Sustituye la etiqueta de la miga de inicio.
settings.include_current	false	Omite la miga de la página actual.
settings.include_current	true/default	Incluye la miga de la página actual.
página de inicio	include_current true	Genera únicamente la miga actual.

Usar para / Evitar para

Usar para: navegación jerárquica entre páginas.

Evitar para: la navegación principal del sitio.

Notas

La etiqueta de inicio y la inclusión de la página actual se controlan mediante ajustes. En la página de inicio solo se genera la miga actual cuando include_current es true.

Sidebar Brand (`sidebar-brand`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/sidebar-brand.blade.php

HTML generado

<div class="wb-public-block" data-wb-public-block-type="sidebar-brand">
  <a href="/" class="wb-sidebar-brand">
    <img src="/media/logo.svg" alt="Docs" class="wb-sidebar-brand-logo">
    <span class="wb-sidebar-brand-copy">
      <span>Docs</span>
      <span class="wb-sidebar-brand-note">Guide</span>
    </span>
  </a>
</div>

Principales clases CSS / de WebBlocks UI

wb-sidebar-brand, wb-sidebar-brand-logo, wb-sidebar-brand-copy, wb-sidebar-brand-note.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
settings.url	URL segura	La URL guardada tiene prioridad para el enlace de marca.
settings.url	vacío	Recurre a la ruta de inicio del sitio y, después, a /.
settings.target	_blank	Añade target="_blank" rel="noopener noreferrer".
settings.aria_label	texto	Se utiliza como etiqueta accesible cuando no se renderiza texto visible.
media_id	medio del logotipo	Renderiza la imagen de marca dentro de wb-sidebar-brand.

Usar para / Evitar para

Usar para: identidad del sitio o de la documentación dentro de layouts con barra lateral.

Evitar para: la identidad en la barra de navegación; utilice ahí Navbar Brand.

Notas

El bloque no es propietario del shell de la barra lateral. La URL guardada tiene prioridad, después la ruta de inicio del sitio y después /. La salida con solo logotipo utiliza aria-label.

Sidebar Navigation (`sidebar-navigation`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/sidebar-navigation.blade.php

HTML renderizado

<div class="wb-public-block" data-wb-public-block-type="sidebar-navigation">
  <nav class="wb-sidebar-nav" aria-label="Documentation navigation">
    <div class="wb-sidebar-section">
      <a href="/docs" class="wb-sidebar-link is-active" aria-current="page">
        <i class="wb-icon wb-icon-book wb-sidebar-icon" aria-hidden="true"></i>
        <span>Docs</span>
      </a>
    </div>
  </nav>
</div>

Principales clases CSS / WebBlocks UI

wb-sidebar-nav, wb-sidebar-section, wb-sidebar-link, wb-nav-group, wb-nav-group-toggle, wb-nav-group-items, wb-nav-group-item, wb-icon, wb-sidebar-icon, is-active.

Mapa de settings -> clase / marcado

Ajuste	Valor	Efecto en la salida
settings.menu_key	clave de menú conocida	Renderiza el árbol de CMS Navigation cuando está presente.
{'es': 'hijos manuales', 'it': 'figli manuali', 'fr': 'enfants manuels'}	sidebar-nav-item/sidebar-nav-group	Renderiza los bloques hijos manuales cuando el modo de menú no aporta elementos.
settings.show_icons	booleano	El efecto sobre la visibilidad de los iconos necesita confirmarse en el código fuente.
settings.active_matching	valor	El comportamiento de coincidencia activa lo determina un helper; la salida visible es is-active/aria-current cuando hay coincidencia.

Usar para / Evitar para

Usar para: bloques de navegación de documentación o de barra lateral.

Evitar para: barras laterales de marketing corrientes sin semántica de navegación.

Notas

El bloque puede renderizar un menú de CMS Navigation o bloques hijos manuales sidebar-nav-item / sidebar-nav-group. No es propietario del shell exterior de la página ni de la barra lateral.

Sidebar Nav Item (`sidebar-nav-item`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/sidebar-nav-item.blade.php

HTML renderizado

<a href="/docs/page" class="wb-sidebar-link is-active" aria-current="page">
  <i class="wb-icon wb-icon-file wb-sidebar-icon" aria-hidden="true"></i>
  <span>Page</span>
</a>

Elemento de grupo anidado:

<a href="/docs/child" class="wb-nav-group-item">
  <span>Child</span>
</a>

Principales clases CSS / WebBlocks UI

wb-sidebar-link, wb-nav-group-item, wb-icon, wb-sidebar-icon, is-active.

Mapa de settings -> clase / marcado

Ajuste	Valor	Efecto en la salida
settings.url	URL segura	Obligatorio para que haya salida.
settings.target	_blank	Añade los atributos target/rel externos.
settings.icon	slug/clase de icono	Renderiza wb-icon ... wb-sidebar-icon cuando está configurado.
settings.active_mode	exact/current-page/manual/default	Controla el helper de estado activo; la salida visible es is-active y aria-current.
settings.manual_active	true	Puede forzar la salida activa cuando el modo activo es manual.

Usar para / Evitar para

Usar para: enlaces manuales de la barra lateral.

Evitar para: enlaces de la barra de navegación o botones genéricos.

Notas

El renderizador delega en sidebar-nav-item-link.blade.php. No emite nada si faltan la URL o la etiqueta.

Sidebar Nav Group (`sidebar-nav-group`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/sidebar-nav-group.blade.php

HTML renderizado

<div class="wb-nav-group is-open" data-wb-nav-group>
  <button type="button" class="wb-nav-group-toggle is-active" data-wb-nav-group-toggle>
    <span class="wb-nav-group-icon"><i class="wb-icon wb-icon-folder" aria-hidden="true"></i></span>
    <span class="wb-nav-group-label">Group</span>
    <span class="wb-nav-group-arrow" aria-hidden="true"></span>
  </button>
  <div class="wb-nav-group-items" id="wb-nav-group-items-1">
    <a href="/docs/child" class="wb-nav-group-item">...</a>
  </div>
</div>

Principales clases CSS / WebBlocks UI

wb-nav-group, is-open, wb-nav-group-toggle, is-active, wb-nav-group-icon, wb-icon, wb-nav-group-label, wb-nav-group-arrow, wb-nav-group-items, wb-nav-group-item.

Mapa de settings -> clase / marcado

Ajuste	Valor	Efecto en la salida
settings.icon	slug/clase de icono	Renderiza el marcado del icono del grupo cuando está configurado.
settings.initially_open	true/predeterminado	Añade is-open.
settings.initially_open	false	El grupo empieza cerrado.
{'es': 'sidebar-nav-item hijo', 'it': 'sidebar-nav-item figlio', 'fr': 'sidebar-nav-item enfant'}	hijos publicados	Se renderiza dentro de .wb-nav-group-items.

Usar para / Evitar para

Usar para: grupos plegables dentro de Sidebar Navigation.

Evitar para: acordeones generales; utilice Accordion.

Notas

El grupo solo se renderiza cuando tiene una etiqueta e hijos sidebar-nav-item publicados. Utiliza los hooks de nav-group de WebBlocks UI.

Sidebar Footer (`sidebar-footer`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/sidebar-footer.blade.php

HTML renderizado

<div class="wb-public-block" data-wb-public-block-type="sidebar-footer">
  <div class="wb-sidebar-footer">
    <div class="wb-callout wb-callout-info">
      <div class="wb-callout-title">Title</div>
      <p>Copy.</p>
    </div>
    <p class="wb-text-xs wb-text-muted wb-mt-3 wb-mb-0">Footer note.</p>
  </div>
</div>

Principales clases CSS / WebBlocks UI

wb-sidebar-footer, wb-callout, la clase de variante procedente de sidebarFooterVariantClass(), wb-callout-title, wb-text-xs, wb-text-muted, wb-mt-3, wb-mb-0.

Mapa de settings -> clase / marcado

Ajuste	Valor	Efecto en la salida
settings.variant	success/warning/danger	sidebarFooterVariantClass() añade wb-callout-success, wb-callout-warning o wb-callout-danger.
settings.variant	info/predeterminado/otro	Añade wb-callout-info.
title/content/subtitle	todos vacíos	El renderizador no emite nada.
subtitle	texto	Renderiza la nota de pie con wb-text-xs wb-text-muted wb-mt-3 wb-mb-0.

Usar para / Evitar para

Usar para: notas breves de la barra lateral o llamadas a la acción.

Evitar para: las CTA principales de la página.

Notas

El bloque solo se renderiza cuando existe title, content o subtitle. No es propietario del shell de la barra lateral.

HTML (Trusted) (`html`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/html.blade.php

HTML renderizado

<div class="wb-public-block" data-wb-public-block-type="html">
  <div>
    <!-- trusted HTML content -->
  </div>
</div>

Principales clases CSS / WebBlocks UI

El renderizador en sí no añade ninguna clase fija de WebBlocks UI. El wrapper genérico utiliza wb-public-block.

Mapa de settings -> clase / marcado

Ajuste	Valor	Efecto en la salida
content	HTML de confianza	Se renderiza dentro de un simple, dentro del wrapper público genérico.
{'es': 'fragmentos overlay/body-end', 'it': 'frammenti overlay/body-end', 'fr': 'fragments overlay/body-end'}	reconocidos por el extractor	Se pueden elevar mediante TrustedHtmlOverlayExtractor, PublicOverlayRegistry y PublicBodyEndRegistry.
{'es': 'contenido no confiable', 'it': 'contenuto non attendibile', 'fr': 'contenu non approuvé'}	n/d	No lo utilice; este renderizador presupone marcado estático de confianza.

Usar para / Evitar para

Usar para: marcado de reserva ya revisado que los bloques estructurados todavía no pueden representar.

Evitar para: la salida predeterminada de páginas migradas o creadas por IA.

Notas

El HTML de confianza puede extraer fragmentos de overlay y de final de body mediante TrustedHtmlOverlayExtractor, PublicOverlayRegistry y PublicBodyEndRegistry. Utilícelo únicamente para marcado estático de confianza.

Button (`button`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/button.blade.php

HTML renderizado

<a href="/start" class="wb-btn wb-btn-primary">Open link</a>

Variante sin URL:

<button type="button" class="wb-btn wb-btn-primary">Open link</button>

Principales clases CSS / WebBlocks UI

wb-btn, wb-btn-primary, wb-btn-secondary, wb-btn-outline, wb-btn-ghost, wb-btn-danger, wrapper opcional de hijos wb-stack wb-gap-4.

Mapa de settings -> clase / marcado

Ajuste	Valor	Efecto en la salida
variant	primary/secondary/outline/ghost/danger	Se asigna a wb-btn más la clase de variante correspondiente.
variant	vacío/otro	Adopta de forma predeterminada wb-btn wb-btn-primary.
{'es': 'URL del medio adjunto', 'it': 'URL del media allegato', 'fr': 'URL du média joint'}	presente	Tiene prioridad sobre la URL canónica por compatibilidad.
url	presente sin adjunto	Renderiza un enlace.
url	vacío	Renderiza un inerte.

Usar para / Evitar para

Usar para: acciones hijas gestionadas dentro de Hero/CTA.

Evitar para: botones independientes de página; utilice Button Link.

Notas

Este es un bloque de acción hija gestionado para Hero/CTA. No figura en la lista actual del catálogo publicado de CoreBlockTypeCatalogSyncer, pero existen renderizadores públicos y soporte de conversión. La URL del adjunto tiene prioridad sobre la URL canónica por compatibilidad.

Callout (`callout`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/callout.blade.php

HTML renderizado

<div class="wb-alert wb-alert-info">
  <div>
    <div class="wb-alert-title">Title</div>
    <div>Content</div>
  </div>
</div>

Principales clases CSS / WebBlocks UI

wb-alert, wb-alert-info, wb-alert-success, wb-alert-warning, wb-alert-danger, wb-alert-title, wrapper opcional de hijos wb-stack wb-gap-4.

Mapa de settings -> clase / marcado

Ajuste	Valor	Efecto en la salida
variant	success/warning/danger	Añade la clase wb-alert-{tone} correspondiente.
variant	info/predeterminado/otro	Añade wb-alert-info.
{'es': 'hijos', 'it': 'figli', 'fr': 'enfants'}	hijos publicados	Se renderizan después dentro de wb-stack wb-gap-4.
{'es': 'preferido en páginas nuevas', 'it': 'preferito nelle nuove pagine', 'fr': 'préféré pour les nouvelles pages'}	n/d	Utilice Alert para los avisos de primer nivel en páginas nuevas.

Usar para / Evitar para

Usar para: contenido de tipo alerta heredado o compatible con el conversor.

Evitar para: páginas estructuradas nuevas; utilice Alert.

Notas

callout es un renderizador heredado y compatible con la conversión, y visualmente se corresponde con el patrón alert. No figura como fila publicada actual del catálogo principal, mientras que alert sí.

List (`list`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/list.blade.php

HTML renderizado

<div class="wb-stack wb-gap-2">
  <h3>List title</h3>
  <ul class="wb-stack wb-gap-1">
    <li>Item</li>
  </ul>
</div>

Principales clases CSS / WebBlocks UI

wb-stack, wb-gap-2, wb-gap-1, wrapper opcional de hijos wb-stack wb-gap-4.

Mapa de settings -> clase / marcado

Ajuste	Valor	Efecto en la salida
variant	ordered	Renderiza .
variant	predeterminado/otro	Renderiza .
settings.items/cards/entries	array	Se utiliza como fuente de elementos cuando está disponible.
content	texto separado por líneas	Se utiliza como fuente de elementos de reserva.
title	texto	Renderiza un encabezado encima de la lista.

Usar para / Evitar para

Usar para: listas sencillas importadas o introducidas manualmente.

Evitar para: listas de navegación o texto de cuerpo enriquecido que corresponde a Rich Text.

Notas

Este renderizador existe por compatibilidad y para la conversión. Los elementos proceden de los settings (items, cards, entries) o de contenido separado por líneas. variant = ordered cambia ul por ol.

Text (`text`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/text.blade.php

HTML renderizado

<div class="wb-stack wb-gap-2">
  <strong>Title</strong>
  <p>Content</p>
</div>

Principales clases CSS / WebBlocks UI

wb-stack, wb-gap-2, wrapper opcional de hijos wb-stack wb-gap-4.

Mapa de settings -> clase / marcado

Ajuste	Valor	Efecto en la salida
title	texto	Renderiza encima del párrafo cuando está presente.
content	texto	Renderiza un párrafo dentro de wb-stack wb-gap-2.
{'es': 'hijos', 'it': 'figli', 'fr': 'enfants'}	hijos publicados	Renderiza después los bloques hijos dentro de wb-stack wb-gap-4.

Usar para / Evitar para

Usar para: contenido heredado o compatible con el conversor que ya depende de este renderizador.

Evitar para: páginas nuevas creadas a mano; utilice los bloques estructurados canónicos que aparecen más arriba.

Notas

Este es un renderizador de compatibilidad. El bloque principal canónico actual para texto de cuerpo simple es plain_text.

Partial interno de acciones (`_actions`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/_actions.blade.php

HTML renderizado

<div class="wb-cluster wb-cluster-2">
  <a href="/start" class="wb-btn wb-btn-primary">Start</a>
</div>

Principales clases CSS / WebBlocks UI

Wrapper predeterminado wb-cluster wb-cluster-2, o una clase de wrapper proporcionada por el llamador.

Mapa de settings -> clase / marcado

Ajuste	Valor	Efecto en la salida
{'es': 'entrada buttons', 'it': 'input buttons', 'fr': 'entrée buttons'}	bloques hijos de tipo button	Filtra solo los hijos de tipo button y los renderiza.
{'es': 'entrada wrapperClass', 'it': 'input wrapperClass', 'fr': 'entrée wrapperClass'}	cadena de clase proporcionada	Utiliza la clase de wrapper proporcionada.
{'es': 'entrada wrapperClass', 'it': 'input wrapperClass', 'fr': 'entrée wrapperClass'}	vacío	Adopta de forma predeterminada wb-cluster wb-cluster-2.

Usar para / Evitar para

Usar para: la salida de acciones de Hero/CTA gestionada por el renderizador.

Evitar para: la composición directa de páginas.

Notas

Este es un partial auxiliar interno, no un bloque publicado independiente. Filtra la colección recibida a los hijos de tipo button y renderiza cada hijo mediante el partial de bloque habitual.

Card Grid (`card-grid`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/card-grid.blade.php

HTML renderizado

<section class="wb-stack wb-gap-4">
  <div class="wb-stack wb-gap-1">
    <h2>Cards</h2>
    <p class="wb-text-muted">Intro</p>
  </div>
  <div class="wb-grid wb-grid-3">
    <div class="wb-card">
      <div class="wb-card-body wb-stack wb-gap-2">
        <img src="/media/card.jpg" alt="Card image">
        <strong>Card title</strong>
        <p class="wb-m-0">Card content.</p>
        <a href="/target" class="wb-link">Read more</a>
      </div>
    </div>
  </div>
</section>

Principales clases CSS / WebBlocks UI

wb-stack, wb-gap-4, wb-gap-1, wb-text-muted, wb-grid, wb-grid-2, wb-grid-3, wb-grid-4, wb-card, wb-card-body, wb-gap-2, wb-m-0, wb-link.

Mapa de settings -> clase / marcado

Ajuste	Valor	Efecto en la salida
settings.items	array	Determina la salida de las tarjetas; cada elemento puede incluir asset_id, title, content, url y url_label.
{'es': 'número de settings.items', 'it': 'numero di settings.items', 'fr': 'nombre de settings.items'}	0-1/2/3/4+	Utiliza wb-stack wb-gap-3, wb-grid wb-grid-2, wb-grid wb-grid-3 o wb-grid wb-grid-4.
item.asset_id	id de medio	Renderiza la imagen del elemento cuando existe la URL del medio.
item.url + item.url_label	texto	Renderiza a.wb-link.

Usar para / Evitar para

Usar para: contenido heredado o compatible con el conversor que ya depende de este renderizador.

Evitar para: páginas nuevas creadas a mano; utilice los bloques estructurados canónicos que aparecen más arriba.

Notas

Este es un renderizador heredado o de compatibilidad respaldado por settings.items. La clase de rejilla cambia según el número de elementos.

Contact Info (`contact-info`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/contact-info.blade.php

HTML renderizado

<section class="wb-card wb-card-muted wb-public-contact-card">
  <div class="wb-card-body wb-stack wb-gap-3">
    <div class="wb-stack wb-gap-1">
      <h2>Contact</h2>
      <p>Reach us.</p>
    </div>
    <div class="wb-stack wb-gap-1 wb-public-contact-meta">
      <strong>Email</strong>
      <a href="mailto:hello@example.test" class="wb-link">hello@example.test</a>
    </div>
  </div>
</section>

Principales clases CSS / WebBlocks UI

wb-card, wb-card-muted, wb-card-body, wb-stack, wb-gap-3, wb-gap-1, wb-link, además de las clases específicas del CMS wb-public-contact-card y wb-public-contact-meta.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
settings.items	array	Renderiza las filas de contacto dentro de wb-public-contact-meta.
item.url	URL segura	Renderiza el valor enlazado con wb-link.
item.target	_blank	Añade atributos target/rel externos.
item.label/value	texto	Renderiza la etiqueta y el valor sin formato cuando no existe una URL segura.

Usar para / Evitar para

Usar para: contenido heredado o compatible con el conversor que ya depende de este renderizador.

Evitar para: páginas nuevas construidas a mano; utilice los bloques estructurados canónicos indicados cerca del principio.

Notas

Este es un renderizador heredado/de compatibilidad respaldado por settings.items. Los enlaces pasan por Block::safePublicUrl().

FAQ List (`faq-list`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/faq-list.blade.php

HTML renderizado

<div class="wb-stack wb-gap-3">
  <details class="wb-card">
    <summary class="wb-card-header"><strong>Question?</strong></summary>
    <div class="wb-card-body">Answer.</div>
  </details>
</div>

Clases CSS principales / de WebBlocks UI

Utiliza las clases del renderizador accordion.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
comportamiento del renderizador	delegado	Incluye directamente el renderizador Accordion.
filas hijas	título y contenido	Siguen el contrato de elemento desplegable de Accordion.
páginas nuevas preferidas	n/a	Utilice accordion como bloque padre canónico.

Usar para / Evitar para

Usar para: contenido heredado o compatible con el conversor que ya depende de este renderizador.

Evitar para: páginas nuevas construidas a mano; utilice los bloques estructurados canónicos indicados cerca del principio.

Notas

Este parcial de compatibilidad delega directamente en accordion.blade.php.

Gallery Viewer (`gallery-viewer`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/gallery-viewer.blade.php

HTML renderizado

<div class="wb-modal wb-modal-xl" id="wb-gallery-viewer-1" role="dialog" aria-modal="true">
  <div class="wb-modal-dialog">
    <div class="wb-modal-body">
      <div class="wb-gallery-viewer">
        <div class="wb-gallery-viewer-toolbar">
          <button class="wb-btn wb-btn-secondary wb-btn-icon wb-gallery-viewer-prev" type="button"></button>
          <div class="wb-gallery-viewer-counter" aria-live="polite">1 / 3</div>
        </div>
        <figure class="wb-gallery-viewer-media">
          <img class="wb-gallery-viewer-image" src="/media/full.jpg" alt="Image">
          <figcaption class="wb-gallery-viewer-caption">Caption</figcaption>
        </figure>
      </div>
    </div>
  </div>
</div>

Clases CSS principales / de WebBlocks UI

wb-modal, wb-modal-xl, wb-modal-dialog, wb-modal-body, wb-gallery-viewer, wb-gallery-viewer-toolbar, wb-btn, wb-btn-secondary, wb-btn-icon, wb-icon, wb-gallery-viewer-counter, wb-gallery-viewer-media, wb-gallery-viewer-image, wb-gallery-viewer-caption, wb-gallery-viewer-meta, wb-text-sm, wb-text-muted, wb-m-0.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
entrada viewerId	cadena de id	Define el id de destino del modal/galería que usan los disparadores de galería.
entrada galleryItems	colección	Renderiza las diapositivas/elementos del visor a partir de los datos de elemento preparados por Gallery.
ajustes directos del bloque	n/a	Parcial interno; no tiene mapa de ajustes de bloque independiente.

Usar para / Evitar para

Usar para: el marcado de superposición de la caja de luz de Gallery registrado por Gallery.

Evitar para: el uso manual como bloque de página.

Notas

Este es un ayudante de superposición utilizado por los renderizadores de galería/escaparate a través de PublicOverlayRegistry, no un bloque independiente.

Map (`map`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/map.blade.php

HTML renderizado

<div class="wb-card wb-card-muted">
  <div class="wb-card-body wb-stack wb-gap-2">
    <strong>Location</strong>
    <p class="wb-m-0">Address text</p>
    <a href="https://maps.google.com/?q=Address" class="wb-btn wb-btn-secondary" target="_blank" rel="noopener noreferrer">Open map</a>
  </div>
</div>

Clases CSS principales / de WebBlocks UI

wb-card, wb-card-muted, wb-card-body, wb-stack, wb-gap-2, wb-m-0, wb-btn, wb-btn-secondary, y el contenedor opcional de hijos wb-stack wb-gap-4.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
url	URL http/https	Se acepta como origen de mapa seguro y se muestra cuando difiere del contenido.
content	texto o consulta	Se usa como consulta de mapa de reserva.
title	texto	Renderiza dentro de la tarjeta.
children	hijos publicados	Renderiza después los bloques hijos dentro de wb-stack wb-gap-4.

Usar para / Evitar para

Usar para: contenido heredado o compatible con el conversor que ya depende de este renderizador.

Evitar para: páginas nuevas construidas a mano; utilice los bloques estructurados canónicos indicados cerca del principio.

Notas

Este es un renderizador heredado/de compatibilidad. Solo acepta los esquemas de URL http y https para la URL sin procesar y puede renderizar hijos después de la tarjeta.

Menu (`menu`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/menu.blade.php

HTML renderizado

<nav class="wb-stack wb-gap-2" aria-label="Menu">
  <ul class="wb-cluster wb-cluster-2 wb-cluster-between">
    <li><a href="/page" class="wb-btn wb-btn-secondary">Page</a></li>
  </ul>
</nav>

Clases CSS principales / de WebBlocks UI

Utiliza las clases del renderizador navigation-auto.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
comportamiento del renderizador	delegado	Incluye directamente el renderizador Navigation Auto.
settings.menu_key/location	clave de menú conocida	Sigue el comportamiento de selección de menú de Navigation Auto.
páginas nuevas preferidas	n/a	Utilice Navbar Navigation o Navigation Auto de forma intencionada, no menu.

Usar para / Evitar para

Usar para: contenido heredado o compatible con el conversor que ya depende de este renderizador.

Evitar para: páginas nuevas construidas a mano; utilice los bloques estructurados canónicos indicados cerca del principio.

Notas

Este parcial de compatibilidad delega directamente en navigation-auto.blade.php.

Metric Card (`metric-card`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/metric-card.blade.php

HTML renderizado

<div class="wb-stat">
  <div class="wb-stat-label">Label</div>
  <div class="wb-stat-value">42</div>
  <div class="wb-stat-delta">+8%</div>
</div>

Clases CSS principales / de WebBlocks UI

wb-stat, wb-stat-label, wb-stat-value, wb-stat-delta, y el contenedor opcional de hijos wb-stack wb-gap-4.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
comportamiento del renderizador	alias delegado	Delega en una ruta de renderizador existente; el mapa exacto de ajustes sigue al delegado cuando es visible.
páginas nuevas preferidas	n/a	Prefiera el bloque canónico indicado en Notas en lugar de este bloque de alias/compatibilidad.

Usar para / Evitar para

Usar para: contenido heredado con el alias metric-card.

Evitar para: contenido nuevo; utilice Stat Card o las estadísticas de Columns.

Notas

Este es un renderizador de métricas heredado/de compatibilidad. El catálogo publicado actual utiliza stat-card.

Showcase List (`showcase-list`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/showcase-list.blade.php

HTML renderizado

<section class="wb-stack wb-gap-6">
  <div class="wb-stack wb-gap-1">
    <h2>Projects</h2>
    <p>Selected work.</p>
  </div>
  <article class="wb-card wb-card-muted wb-public-showcase-item">
    <div class="wb-card-body wb-stack wb-gap-4">
      <div class="wb-stack wb-gap-1">
        <h3>Project</h3>
        <p>Summary.</p>
      </div>
      <section class="wb-gallery" aria-label="Project screenshots">
        <div class="wb-gallery-grid">
          <figure class="wb-gallery-item">
            <a href="/media/full.jpg" class="wb-gallery-trigger" data-wb-gallery-target="#wb-gallery-viewer-1">
              <img src="/media/full.jpg" alt="Project image" class="wb-gallery-media">
            </a>
            <figcaption class="wb-gallery-caption">Screenshot</figcaption>
          </figure>
        </div>
      </section>
      <a href="/project" class="wb-link">View project</a>
    </div>
  </article>
</section>

Clases CSS principales / de WebBlocks UI

wb-stack, wb-gap-6, wb-gap-1, wb-card, wb-card-muted, wb-card-body, wb-gap-4, wb-gallery, wb-gallery-grid, wb-gallery-item, wb-gallery-trigger, wb-gallery-media, wb-gallery-caption, wb-link, además de la clase específica del CMS wb-public-showcase-item.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
settings.items	array	Renderiza un elemento de escaparate en tarjeta atenuada por cada entrada.
item.images[].asset_id	id de medio	Renderiza las figuras de la galería y registra un visor de galería compartido cuando hay imágenes.
item.url	URL segura	Renderiza un wb-link externo con target/rel.
item.title/subtitle/url_label	texto	Renderiza los encabezados del escaparate y la etiqueta del enlace.

Usar para / Evitar para

Usar para: contenido heredado o compatible con el conversor que ya depende de este renderizador.

Evitar para: páginas nuevas construidas a mano; utilice los bloques estructurados canónicos indicados cerca del principio.

Notas

Este es un renderizador heredado/de compatibilidad respaldado por settings.items. Puede insertar el marcado de superposición gallery-viewer en PublicOverlayRegistry.

Sidebar Nav Item Link (`sidebar-nav-item-link`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/sidebar-nav-item-link.blade.php

HTML renderizado

<a href="/docs" class="wb-sidebar-link is-active" aria-current="page">
  <i class="wb-icon wb-icon-book-open wb-sidebar-icon" aria-hidden="true"></i>
  <span>Docs</span>
</a>

Clases CSS principales / de WebBlocks UI

wb-sidebar-link, wb-nav-group-item, is-active, wb-icon, wb-sidebar-icon.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
entrada nested	true	Utiliza wb-nav-group-item.
entrada nested	false	Utiliza wb-sidebar-link.
URL/etiqueta del elemento de la barra lateral	presente	Obligatorio para generar el ancla.
icono del elemento	configurado	Renderiza i.wb-icon.wb-icon-{icon}.wb-sidebar-icon.
ayudante active	true	Añade is-active y aria-current="page".

Usar para / Evitar para

Usar para: la salida interna de enlaces de la barra lateral compartida por los renderizadores de elementos de la barra lateral.

Evitar para: la composición directa de páginas.

Notas

Este es un ayudante interno para sidebar-nav-item y sidebar-nav-group. La clase cambia a wb-nav-group-item cuando se renderiza anidado.

Sidebar Navigation Menu Item (`sidebar-navigation-menu-item`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/sidebar-navigation-menu-item.blade.php

HTML renderizado

<div class="wb-nav-group is-open" data-wb-nav-group>
  <button type="button" class="wb-nav-group-toggle is-active" aria-expanded="true" data-wb-nav-group-toggle>
    <span class="wb-nav-group-icon"><i class="wb-icon wb-icon-folder" aria-hidden="true"></i></span>
    <span class="wb-nav-group-label">Group</span>
    <span class="wb-nav-group-arrow" aria-hidden="true"></span>
  </button>
  <div class="wb-nav-group-items">
    <a href="/child" class="wb-nav-group-item">Child</a>
  </div>
</div>

Clases CSS principales / de WebBlocks UI

wb-nav-group, is-open, wb-nav-group-toggle, is-active, wb-nav-group-icon, wb-icon, wb-nav-group-label, wb-nav-group-arrow, wb-nav-group-items, wb-nav-group-item, wb-sidebar-link, wb-sidebar-icon.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
link_type de NavigationItem	grupo con hijos visibles	Renderiza .wb-nav-group con conmutador y elementos anidados.
entrada nested	true	Los enlaces hijos utilizan wb-nav-group-item.
entrada showIcons	true	Permite que se rendericen los iconos de barra lateral de los elementos.
ayudante active	true	Añade is-open/is-active y aria-current cuando corresponde.

Usar para / Evitar para

Usar para: el renderizado interno de elementos de menú del CMS para la navegación en la barra lateral.

Evitar para: la composición directa de páginas.

Notas

Este ayudante renderiza las filas NavigationItem del CMS para sidebar-navigation cuando ese bloque se basa en un menú en lugar de en hijos manuales.

Slider (`slider`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/slider.blade.php

HTML renderizado

<section class="wb-stack wb-gap-3">
  <h3>Slider</h3>
  <div class="wb-slider wb-card wb-card-muted" data-wb-slider>
    <div class="wb-slider-track" data-wb-slider-track>
      <article class="wb-slider-slide" data-wb-slider-slide>
        <div class="wb-card-body wb-stack wb-gap-3">
          <img src="/media/slide.jpg" alt="Slide">
          <div class="wb-stack wb-gap-1">
            <strong>Slide title</strong>
            <p>Caption.</p>
          </div>
        </div>
      </article>
    </div>
    <div class="wb-card-body wb-slider-controls">
      <button type="button" class="wb-btn wb-btn-secondary" data-wb-slider-prev>Previous</button>
      <div class="wb-slider-dots" role="tablist">
        <button type="button" class="wb-slider-dot is-active" data-wb-slider-dot></button>
      </div>
      <button type="button" class="wb-btn wb-btn-secondary" data-wb-slider-next>Next</button>
    </div>
  </div>
  <p class="wb-text-sm wb-text-muted">Caption</p>
</section>

Clases CSS principales / de WebBlocks UI

wb-stack, wb-gap-3, wb-slider, wb-card, wb-card-muted, wb-slider-track, wb-slider-slide, wb-card-body, wb-gap-1, wb-slider-controls, wb-btn, wb-btn-secondary, wb-slider-dots, wb-slider-dot, is-active, wb-text-sm, wb-text-muted.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
medios de la galería	uno o más activos	Renderiza las diapositivas a partir de galleryAssets().
número de medios de la galería	más de uno	Renderiza los controles anterior/siguiente y los puntos.
title	texto	Renderiza un encima del slider.
subtitle	texto	Renderiza texto de ayuda atenuado debajo del slider.

Usar para / Evitar para

Usar para: contenido heredado o compatible con el conversor que ya depende de este renderizador.

Evitar para: páginas nuevas construidas a mano; utilice los bloques estructurados canónicos indicados cerca del principio.

Notas

Este es un renderizador heredado/de compatibilidad respaldado por galleryAssets(). Los controles del slider solo se renderizan cuando hay más de un activo de diapositiva.

Stats (`stats`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/stats.blade.php

HTML renderizado

<section class="wb-stack wb-gap-4">
  <div class="wb-grid wb-grid-3">
    <div class="wb-stat">
      <div class="wb-stat-label">Metric</div>
      <div class="wb-stat-value">42</div>
    </div>
  </div>
</section>

Clases CSS principales / de WebBlocks UI

Utiliza el renderizador columns con variant = stats, incluidas wb-stat, wb-stat-label, wb-stat-value y wb-stat-delta para los bloques hijos column_item.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
comportamiento del renderizador	alias delegado	Delega en una ruta de renderizador existente; el mapa exacto de ajustes sigue al delegado cuando es visible.
páginas nuevas preferidas	n/a	Prefiera el bloque canónico indicado en Notas en lugar de este bloque de alias/compatibilidad.

Usar para / Evitar para

Usar para: contenido heredado con el alias stats.

Evitar para: grupos de estadísticas nuevos; utilice Columns con la variante stats o Stat Card.

Notas

Este parcial de compatibilidad delega en columns.blade.php después de forzar la variante a stats.

Tabs (`tabs`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/tabs.blade.php

HTML renderizado

<div class="wb-card">
  <div class="wb-card-header">
    <strong>Tab</strong>
    <span>Subtitle</span>
  </div>
  <div class="wb-card-body">
    <div>Content</div>
  </div>
</div>

Clases CSS principales / de WebBlocks UI

wb-card, wb-card-header, wb-card-body, y el contenedor opcional de hijos wb-stack wb-gap-4.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
title	texto/predeterminado	Renderiza el título de la cabecera de la tarjeta, con Tab por defecto.
subtitle	texto	Renderiza un span secundario en la cabecera.
content	texto/texto HTML	Se renderiza dentro de .wb-card-body.
children	hijos publicados	Renderiza después los bloques hijos dentro de wb-stack wb-gap-4.

Usar para / Evitar para

Usar para: contenido heredado o compatible con el conversor que ya depende de este renderizador.

Evitar para: páginas nuevas construidas a mano; utilice los bloques estructurados canónicos indicados cerca del principio.

Notas

Este es un renderizador heredado/de compatibilidad. Renderiza los hijos después de la tarjeta si existen bloques hijos.

Testimonial (`testimonial`)

Origen del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/testimonial.blade.php

HTML renderizado

<blockquote class="wb-card wb-card-muted">
  <div class="wb-card-body wb-stack wb-gap-2">
    <p class="wb-m-0">Quote text.</p>
    <footer class="wb-text-sm wb-text-muted">Name</footer>
  </div>
</blockquote>

Clases CSS principales / de WebBlocks UI

Utiliza el renderizador quote con variant = testimonial.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
comportamiento del renderizador	alias delegado	Delega en una ruta de renderizador existente; el mapa exacto de ajustes sigue al delegado allí donde sea visible.
páginas nuevas preferidas	n/d	Prefiera el bloque canónico indicado en las Notas en lugar de este bloque de alias/compatibilidad.

Usar para / Evitar para

Usar para: contenido heredado con el alias testimonial.

Evitar para: citas nuevas; use Quote con la variante testimonial si es necesario.

Notas

Este partial de compatibilidad delega en quote.blade.php tras forzar la variante a testimonial.

Fallback Renderer (`fallback`)

Fuente del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/fallback.blade.php

HTML renderizado

<section class="wb-card wb-card-muted">
  <div class="wb-card-body wb-stack wb-gap-3">
    <div class="wb-stack wb-gap-1">
      <h3>Block title</h3>
      <p>Block content.</p>
    </div>
    <div class="wb-grid wb-grid-2">
      <!-- fallback child/content output -->
    </div>
  </div>
</section>

Clases CSS principales / WebBlocks UI

Las ramas de fallback usan primitivas existentes, entre ellas wb-card, wb-card-muted, wb-card-body, wb-stack, wb-gap-1, wb-gap-2, wb-gap-3, wb-grid, wb-grid-2, wb-grid-3, wb-table-wrap, wb-table, wb-table-striped, wb-slider, wb-btn, wb-link, wb-input, wb-textarea y wb-select.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
settings.items/cards/entries	arrays	Pueden generar una salida de compatibilidad con estilo de lista o de tarjeta según la rama de fallback.
settings.rows/options/related_slugs	arrays	Las usan las ramas de fallback cuando están presentes.
tipo de bloque/contexto de origen	variable	requiere confirmación en el código fuente para determinar la rama exacta.

Usar para / Evitar para

Usar para: un renderizado degradado y seguro de bloques de producción no admitidos.

Evitar para: la composición planificada de páginas o las migraciones normales.

Notas

Este es el renderizador de seguridad para slugs desconocidos o de transición. Contiene salidas específicas por rama para slugs antiguos como comparison, timeline, product-card, pagination, input, textarea, select, checkbox-group y radio-group. Es preferible documentar los archivos de renderizador dedicados allí donde existan.

Missing Renderer (`missing-renderer`)

Fuente del renderizador

packages/webblocks-cms/resources/views/pages/partials/blocks/missing-renderer.blade.php

HTML renderizado

<div class="wb-alert wb-alert-warning">
  <div>
    <div class="wb-alert-title">Missing Block Renderer</div>
    <div>Expected renderer for <code>unknown</code> at <code>...</code>.</div>
  </div>
</div>

Clases CSS principales / WebBlocks UI

wb-alert, wb-alert-warning, wb-alert-title.

Ajustes -> mapa de clases / marcado

Ajuste	Valor	Efecto en la salida
slug de tipo	cualquier slug sin renderizador	Muestra una alerta de advertencia que nombra el archivo de renderizador esperado.
entorno	vía de fallback fuera de producción	Se usa cuando no existe ningún renderizador público fuera de producción.
ajustes de runtime	n/d	Ningún ajuste del bloque afecta a esta salida de advertencia.

Usar para / Evitar para

Usar para: dar visibilidad al desarrollador cuando no existe renderizador fuera de producción.

Evitar para: el diseño de contenido público.

Notas

Este renderizador de diagnóstico se usa cuando no se puede resolver un renderizador de bloque concreto.