Markup di rendering pubblico dei blocchi
Questo file risponde alla domanda pratica di chi costruisce pagine: "Quando aggiungo questo blocco del CMS, quale HTML pubblico e quali classi di WebBlocks UI vengono renderizzati?" Usatelo quando componete pagine manualmente, quando rivedete l'output del Page Converter o quando chiedete a un assistente IA di costruire una pagina del CMS a partire da blocchi strutturati.
I blocchi che possiedono la propria radice renderizzano la loro radice pubblica semantica e collocano data-wb-public-block-type su quella radice. Alcuni esempi sono Section, Container, Grid, Card, Hero, Gallery e Navbar. I blocchi che non possiedono la propria radice renderizzano il loro markup interno e di norma vengono avvolti dal renderer degli slot in .wb-public-block con data-wb-public-block-type. Alcuni esempi sono Plain Text, Rich Text, Button Link, Alert e la maggior parte dei figli di utilità della navigazione.
Questo file è stato preparato a partire dalle sorgenti Blade reali del renderer pubblico. L'HTML di esempio è rappresentativo, ma deve restare compatibile con il contratto del renderer. La sorgente principale del renderer del pacchetto è packages/webblocks-cms/resources/views/pages/partials/blocks/.blade.php; i file di compatibilità della radice sotto resources/views/pages/partials/blocks/.blade.php di norma delegano di nuovo al namespace del pacchetto. Block::publicRenderView() risolve prima i partial di blocco del pacchetto, poi i partial di compatibilità della radice e infine il partial sicuro di fallback o di renderer mancante.
Composizione dei blocchi consigliata per le nuove pagine
Preferite questi blocchi per le nuove pagine del CMS costruite a mano:
- Layout e ritmo:
section,container,grid,cluster. - Testo di pagina e di sezione:
content_header,header,plain_text,rich-text,button_linkebuttonquando si tratta di un'azione gestita di Hero/CTA. - Marketing e contenuti strutturati:
hero,cta,columnsconcolumn_item,cardconcard_header,card_bodyecard_footer,accordioncon righe figlie in stile FAQ,gallery,image. - Navigazione ed elementi condivisi:
sticky-navbar,navbar-brand,navbar-navigation,header-actions,search-form, oltre ai blocchi della barra laterale per i layout documentazione/sidebar.
Non preferite questi per le nuove pagine costruite a mano, a meno che non stiate preservando contenuti legacy, output del convertitore o comportamenti di compatibilità: feature-grid, feature-item, card-grid, contact-info, faq-list, menu, metric-card, showcase-list, slider, stats, tabs, testimonial, text, callout e i percorsi di renderer solo di fallback.
Usate Safe HTML (html) e i renderer di fallback solo come ripieghi soggetti a revisione, quando il contenuto non può ancora essere rappresentato da blocchi strutturati del CMS. Non devono essere l'output predefinito delle pagine migrate o create dall'IA.
Alberi di pagina comuni
Pagina di marketing:
Page
└── main slot
└── Section
└── Container
├── Content Header or Hero
├── Grid or Columns
└── CTAGriglia di card:
Section
└── Container
└── Grid
└── Card
├── Card Header
├── Card Body
└── Card FooterNavbar / header condiviso:
Navbar
└── Container
└── Cluster
├── Navbar Brand
└── Cluster
├── Navbar Navigation
└── Header ActionsFAQ:
Section
└── Container
└── Accordion
├── FAQ child row
├── FAQ child row
└── FAQ child rowL'attuale renderer di Accordion consuma le righe figlie pubblicate con titolo e contenuto come elementi a comparsa. Il Page Converter scrive i gruppi <details> adiacenti in righe figlie faq quando sono disponibili sia il contratto accordion sia quello faq.
Il wrapper predefinito dello slot main renderizza i blocchi che non possiedono la propria radice all'interno di:
<div class="wb-public-block" data-wb-public-block-type="plain-text">
...
</div>I blocchi che possiedono la propria radice, invece, collocano data-wb-public-block-type sul proprio elemento radice pubblico.
Section (`section`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/section.blade.php
HTML renderizzato
<section class="wb-section wb-section-lg wb-stack" data-wb-public-block-type="section">
<!-- child blocks -->
</section>Classi principali CSS / WebBlocks UI
wb-section, la classe di spaziatura da sectionSpacingClass(), wb-stack.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| settings.spacing | sm | sectionSpacingClass() aggiunge wb-section-sm. |
| settings.spacing | lg | sectionSpacingClass() aggiunge wb-section-lg. |
| settings.spacing | default/vuoto | Usa solo wb-section wb-stack. |
| status | unpublished | Il blocco non viene incluso dalle normali query dell'albero dei blocchi pubblici. |
Usare per / Evitare per
Usare per: sezioni principali della pagina e raggruppamento dei blocchi.
Evitare per: inserire testo visibile direttamente nelle impostazioni di Section; usate blocchi di testo figli.
Note
Il blocco possiede la propria radice <section>. Renderizza tutti i blocchi figli tramite il normale partial di blocco. Non ha un contratto di testo traducibile; il contenuto visibile dovrebbe stare nei blocchi figli.
Container (`container`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/container.blade.php
HTML renderizzato
<div class="wb-container wb-container-lg wb-stack" data-wb-public-block-type="container">
<!-- child blocks -->
</div>Classi principali CSS / WebBlocks UI
wb-container, la classe di larghezza da containerWidthClass(), la classe di flusso da containerFlowClass().
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| settings.width | sm/md/lg/xl/full | containerWidthClass() aggiunge wb-container-sm, wb-container-md, wb-container-lg, wb-container-xl o wb-container-full. |
| settings.width | default/vuoto | Usa la classe base wb-container. |
| settings.flow | stack/default | containerFlowClass() aggiunge wb-stack. |
| settings.flow | none | Non viene aggiunta alcuna classe di flusso. |
Usare per / Evitare per
Usare per: controllo della larghezza dentro sezioni, navbar e strutture di pagina.
Evitare per: usare Container come card visiva o superficie di contenuto.
Note
Il blocco possiede la propria radice <div>. Renderizza direttamente i blocchi figli. Le impostazioni di larghezza e di flusso cambiano le classi.
Grid (`grid`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/grid.blade.php
HTML renderizzato
<div class="wb-grid wb-grid-3 wb-gap-4" data-wb-public-block-type="grid">
<!-- child blocks -->
</div>Classi principali CSS / WebBlocks UI
wb-grid, la classe di colonne da gridColumnsClass(), la classe di gap da gridGapClass().
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| settings.columns | 2 | gridColumnsClass() aggiunge wb-grid-2. |
| settings.columns | 4 | gridColumnsClass() aggiunge wb-grid-4. |
| settings.columns | default/3/altro | gridColumnsClass() aggiunge wb-grid-3. |
| settings.gap | 3/4/6 | gridGapClass() aggiunge wb-gap-3, wb-gap-4 o wb-gap-6. |
| settings.gap | default/vuoto | Non viene aggiunta alcuna classe di gap oltre a wb-grid. |
Usare per / Evitare per
Usare per: layout a più colonne di card, media o contenuti.
Evitare per: semplici righe di pulsanti o elementi interni della navbar; usate Cluster.
Note
Il blocco possiede la propria radice <div>. Renderizza direttamente i blocchi figli. Le impostazioni di colonne e gap cambiano le classi.
Cluster (`cluster`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/cluster.blade.php
HTML renderizzato
<div class="wb-cluster wb-cluster-2 wb-cluster-between wb-cluster-center" data-wb-public-block-type="cluster">
<!-- child blocks -->
</div>Classi principali CSS / WebBlocks UI
wb-cluster, più le classi degli helper di gap, giustificazione, allineamento, wrap e larghezza.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| settings.gap | none | clusterGapClass() aggiunge wb-cms-cluster-gap-none. |
| settings.gap | xs | clusterGapClass() aggiunge wb-gap-1. |
| settings.gap | sm o 2 | clusterGapClass() aggiunge wb-cluster-2. |
| settings.gap | md o 4 | clusterGapClass() aggiunge wb-cluster-4. |
| settings.gap | lg o 6 | clusterGapClass() aggiunge wb-cluster-6. |
| settings.alignment | center/end/between | clusterAlignmentClass() aggiunge wb-cluster-center, wb-cluster-end o wb-cluster-between. |
| settings.items_alignment | start/end/stretch | clusterAlignClass() aggiunge wb-items-start, wb-items-end o wb-cms-items-stretch; center non aggiunge alcuna classe. |
| settings.wrap | nowrap | clusterWrapClass() aggiunge wb-flex-nowrap. |
| settings.width | full | clusterWidthClass() aggiunge wb-w-full. |
Usare per / Evitare per
Usare per: composizione orizzontale, righe di azioni ed elementi interni della navbar.
Evitare per: usare Grid per una singola riga orizzontale di piccoli controlli.
Note
Il blocco possiede la propria radice <div>. Renderizza direttamente i blocchi figli. È la normale primitiva di composizione orizzontale per pulsanti ed elementi interni della navbar.
Content Header (`content_header`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/content_header.blade.php
HTML renderizzato
<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>Classi principali CSS / WebBlocks UI
wb-content-header, classe di allineamento opzionale, wb-content-title, wb-content-subtitle, wb-content-meta, wb-content-meta-divider.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| settings.alignment | left/center/right | contentHeaderAlignmentClass() aggiunge wb-text-left, wb-text-center o wb-text-right. |
| title | qualsiasi testo | Viene renderizzato come . |
| subtitle | qualsiasi testo | Renderizza quando è presente. |
| meta | elenco | Renderizza span .wb-content-meta separati da .wb-content-meta-divider. |
Usare per / Evitare per
Usare per: introduzioni di pagina o di sezione principale con titolo, testo introduttivo e metadati.
Evitare per: contenuti annidati nelle card o punti in cui l'intestazione non dovrebbe essere un H1.
Note
Il blocco possiede la propria radice <header>. Renderizza sempre il titolo come <h1>. Non è un contenitore.
Hero (`hero`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/hero.blade.php
HTML renderizzato
<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>Classi principali CSS / WebBlocks UI
wb-card, wb-promo, facoltativamente wb-card-muted o wb-card-accent, wb-card-body, wb-promo-copy, wb-stack, wb-gap-3, facoltativamente wb-text-center, wb-eyebrow, wb-promo-title, wb-promo-text, wb-promo-actions, wb-cluster, wb-btn.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| variant | muted o soft | Aggiunge wb-card-muted alla card promozionale. |
| variant | accent | Aggiunge wb-card-accent alla card promozionale. |
| variant | default/altro | Usa wb-card wb-promo senza il modificatore muted/accent. |
| settings.layout | centered | Aggiunge wb-text-center a .wb-promo-copy. |
| settings.title_tag | h1/h2/h3 | Hero ammette h1, h2 o h3; CTA renderizza il suo titolo come h2. |
| blocchi button figli | pubblicati con etichetta e URL | Renderizza fino a due azioni gestite .wb-btn tramite _actions. |
Usare per / Evitare per
Usare per: introduzioni di marketing all'inizio della pagina con pulsanti CTA gestiti.
Evitare per: raggruppamento generico di sezioni o contenuti annidati arbitrari.
Note
Il blocco possiede la propria radice promozionale <section>. Accetta solo blocchi figli button per le azioni gestite e renderizza al massimo due figli pubblicati con URL ed etichetta. settings.title_tag può cambiare l'elemento di intestazione in h1, h2 o h3.
CTA (`cta`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/cta.blade.php
HTML renderizzato
<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>Classi principali CSS / WebBlocks UI
wb-card, wb-promo, facoltativamente 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.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| variant | muted o soft | Aggiunge wb-card-muted alla card promozionale. |
| variant | accent | Aggiunge wb-card-accent alla card promozionale. |
| variant | default/altro | Usa wb-card wb-promo senza il modificatore muted/accent. |
| settings.layout | centered | Aggiunge wb-text-center a .wb-promo-copy. |
| settings.title_tag | h2 fisso nel renderer | Hero ammette h1, h2 o h3; CTA renderizza il suo titolo come h2. |
| blocchi button figli | pubblicati con etichetta e URL | Renderizza fino a due azioni gestite .wb-btn tramite _actions. |
Usare per / Evitare per
Usare per: sezioni di conversione mirate con una breve riga di azioni.
Evitare per: introduzioni di pagina intera; usate Hero o Content Header.
Note
Il blocco possiede la propria radice promozionale <section>. Accetta solo blocchi figli button per le azioni gestite e renderizza al massimo due figli pubblicati con URL ed etichetta.
Card (`card`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/card.blade.php
HTML renderizzato
<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>Fallback legacy senza regioni:
<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>Classi principali CSS / WebBlocks UI
wb-card, wb-card-header, wb-card-body, wb-card-footer, facoltativamente wb-stack, wb-gap-2, wb-m-0, wb-btn, wb-btn-secondary.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| settings.layout_name | qualsiasi valore memorizzato | Solo metadati di amministrazione/layout; nessun effetto sulle classi pubbliche nel renderer attuale. |
| blocchi figli | figli pubblicati | Vengono renderizzati dentro la card o la radice della regione. |
| campi card legacy | vecchie righe Card senza figli di regione | Il Card padre può renderizzare un fallback minimo legacy di header/body/footer. |
Usare per / Evitare per
Usare per: elementi ripetuti incorniciati con figli Header, Body e Footer espliciti.
Evitare per: racchiudere intere sezioni di pagina o annidare card dentro altre card.
Note
Il blocco possiede il proprio <article> radice. La struttura normale è composta dai blocchi di regione figli card_header, card_body e card_footer. Il percorso di fallback si applica solo alle vecchie righe di card salvate senza figli di regione.
Card Header (`card_header`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/card_header.blade.php
HTML renderizzato
<div class="wb-card-header" data-wb-public-block-type="card-header">
<!-- child blocks -->
</div>Classi CSS principali / WebBlocks UI
wb-card-header.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| settings.layout_name | qualsiasi valore memorizzato | Solo metadati di amministrazione/layout; nessun effetto sulle classi pubbliche nel renderer attuale. |
| blocchi figli | figli pubblicati | Renderizzati dentro la radice della card o della regione. |
| campi card legacy | vecchie righe Card senza figli di regione | Il Card padre può renderizzare un fallback minimo legacy di intestazione/corpo/piè di pagina. |
Usare per / Evitare per
Usare per: la regione di intestazione dentro Card.
Evitare per: collocarlo fuori da Card.
Note
Il blocco possiede la radice della propria regione di card e renderizza i blocchi figli. È destinato esclusivamente all'uso sotto card.
Card Body (`card_body`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/card_body.blade.php
HTML renderizzato
<div class="wb-card-body" data-wb-public-block-type="card-body">
<!-- child blocks -->
</div>Classi CSS principali / WebBlocks UI
wb-card-body.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| settings.layout_name | qualsiasi valore memorizzato | Solo metadati di amministrazione/layout; nessun effetto sulle classi pubbliche nel renderer attuale. |
| blocchi figli | figli pubblicati | Renderizzati dentro la radice della card o della regione. |
| campi card legacy | vecchie righe Card senza figli di regione | Il Card padre può renderizzare un fallback minimo legacy di intestazione/corpo/piè di pagina. |
Usare per / Evitare per
Usare per: la regione di contenuto principale dentro Card.
Evitare per: collocarlo fuori da Card.
Note
Il blocco possiede la radice della propria regione di card e renderizza i blocchi figli. È destinato esclusivamente all'uso sotto card.
Card Footer (`card_footer`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/card_footer.blade.php
HTML renderizzato
<div class="wb-card-footer" data-wb-public-block-type="card-footer">
<!-- child blocks -->
</div>Classi CSS principali / WebBlocks UI
wb-card-footer.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| settings.layout_name | qualsiasi valore memorizzato | Solo metadati di amministrazione/layout; nessun effetto sulle classi pubbliche nel renderer attuale. |
| blocchi figli | figli pubblicati | Renderizzati dentro la radice della card o della regione. |
| campi card legacy | vecchie righe Card senza figli di regione | Il Card padre può renderizzare un fallback minimo legacy di intestazione/corpo/piè di pagina. |
Usare per / Evitare per
Usare per: azioni o contenuto di piè di pagina complementare dentro Card.
Evitare per: collocarlo fuori da Card.
Note
Il blocco possiede la radice della propria regione di card e renderizza i blocchi figli. È destinato esclusivamente all'uso sotto card.
Header (`header`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/header.blade.php
HTML renderizzato
<h2 class="wb-text-center" id="section-anchor" data-wb-public-block-type="header">Heading</h2>Classi CSS principali / WebBlocks UI
Classe di allineamento opzionale fornita da headerAlignmentClass().
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| variant | h1-h6 | Controlla l'elemento di intestazione. |
| variant | vuoto/altro | Per impostazione predefinita . |
| settings.alignment | left/center/right | headerAlignmentClass() aggiunge wb-text-left, wb-text-center o wb-text-right. |
| settings.anchor o fallback URL legacy | stringa di ancoraggio sicura | Aggiunge un attributo id per i link nella stessa pagina e per l'indice. |
Usare per / Evitare per
Usare per: intestazioni semantiche dentro il contenuto della pagina.
Evitare per: introduzioni di pagina che richiedono sottotitolo o metadati; usate Content Header.
Note
Il blocco possiede l'elemento di intestazione vero e proprio (da h1 a h6). variant controlla il livello dell'intestazione, con h2 come predefinito. settings.anchor o il fallback URL legacy possono aggiungere id.
Plain Text (`plain_text`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/plain_text.blade.php
HTML renderizzato
<div class="wb-public-block" data-wb-public-block-type="plain-text">
<p class="wb-text-center">Plain copy.</p>
</div>Classi CSS principali / WebBlocks UI
Classe di allineamento opzionale fornita da plainTextAlignmentClass(). Il wrapper generico usa wb-public-block.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| settings.alignment | left/center/right | plainTextAlignmentClass() aggiunge wb-text-left, wb-text-center o wb-text-right a . |
| content | testo | Sottoposto a escape in un unico paragrafo. |
| status | non pubblicato | Il blocco non viene incluso nelle normali query dell'albero dei blocchi pubblici. |
Usare per / Evitare per
Usare per: testi brevi senza formattazione.
Evitare per: paragrafi formattati, elenchi, link o intestazioni; usate Rich Text/Header.
Note
Il blocco non possiede la propria radice pubblica secondo Block::ownsPublicRoot(), quindi il normale rendering dello slot lo racchiude. Il renderer stesso emette solo <p>.
Rich Text (`rich-text`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/rich-text.blade.php
HTML renderizzato
<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>Classi CSS principali / WebBlocks UI
wb-rich-text, wb-rich-text-readable, plus generic wb-public-block.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| content | HTML ricco sicuro | SafeRichTextRenderer restituisce il contenuto sanificato dentro wb-rich-text wb-rich-text-readable. |
| content | vuoto dopo la sanificazione | Il renderer non emette nulla. |
| HTML/classi non supportati | presenti nel contenuto | Rimossi dal renderer sicuro anziché mappati su classi pubbliche. |
Usare per / Evitare per
Usare per: testo di corpo con formattazione inline sicura, link ed elenchi semplici.
Evitare per: intestazioni, media, tabelle, pulsanti o markup di layout grezzo.
Note
Il renderer non emette nulla quando il contenuto sanificato è vuoto. Non possiede la radice a livello di slot. Il contenuto viene renderizzato tramite SafeRichTextRenderer.
Button Link (`button_link`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/button_link.blade.php
HTML renderizzato
<div class="wb-public-block" data-wb-public-block-type="button-link">
<a href="/start" class="wb-btn wb-btn-primary">Start</a>
</div>Classi CSS principali / WebBlocks UI
Classe fornita da buttonLinkVariantClass(), di norma wb-btn più una classe di variante.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| variant | secondary | buttonLinkVariantClass() produce wb-btn wb-btn-secondary. |
| variant | default/altro | buttonLinkVariantClass() produce wb-btn wb-btn-primary. |
| settings.url | URL sicuro | Renderizza l'href dell'ancora; un URL non sicuro o vuoto non produce nulla. |
| settings.target | _blank | Aggiunge target="_blank" rel="noopener noreferrer". |
Usare per / Evitare per
Usare per: link editoriali autonomi con stile a pulsante.
Evitare per: azioni gestite di Hero/CTA in cui è previsto il contratto del figlio button.
Note
Il renderer non emette nulla senza un URL sicuro. Il target _blank aggiunge target="_blank" e rel="noopener noreferrer". Di norma riceve il wrapper generico di blocco pubblico, a meno che non sia annidato in un padre che possiede la radice.
Image (`image`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/image.blade.php
HTML renderizzato
<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>Classi CSS principali / WebBlocks UI
wb-stack, wb-gap-2.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| media_id | media selezionato | Renderizza con usando URL e dimensioni del media. |
| url | URL sicuro | Racchiude in un'ancora soltanto l'immagine. |
| caption | testo tradotto | Renderizza quando presente. |
| testo alternativo | tradotto o fallback del media | Renderizza l'attributo alt dell'immagine. |
Usare per / Evitare per
Usare per: singole immagini semantiche con didascalia o link opzionali.
Evitare per: raccolte di immagini; usate Gallery.
Note
Il blocco possiede la propria radice <figure> e non emette nulla senza media. Il link opzionale racchiude solo l'immagine quando l'URL è sicuro (http, https, /, #, mailto o tel).
Gallery (`gallery`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/gallery.blade.php
HTML renderizzato
<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>Classi CSS principali / 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.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| settings.variant | grid/masonry/masonary/collage | galleryVariant() aggiunge wb-gallery--grid, wb-gallery--masonry o wb-gallery--collage; masonary viene normalizzato in masonry. |
| settings.columns | 2/3/4/5 | galleryColumns() aggiunge wb-gallery--cols-{n}; il valore predefinito è 3. |
| settings.gap | none/sm/md/lg | galleryGap() aggiunge wb-gallery--gap-{value}; il valore predefinito è md. |
| settings.aspect_ratio | auto/square/4:3/16:9/portrait | galleryAspectRatio() aggiunge wb-gallery--aspect-{value}, con : reso come -. |
| settings.captions_mode | hidden/below/overlay/on-hover | Controlla le didascalie sottostanti o il markup della didascalia in overlay; il valore predefinito è below. |
| settings.overlay_mode | none/gradient/solid | Controlla il modificatore della didascalia in overlay; il valore predefinito è gradient. |
| settings.lightbox_enabled | true/default | Usa .wb-gallery-trigger e registra gallery-viewer in PublicOverlayRegistry. |
| settings.lightbox_enabled | false | Usa .wb-gallery-link e nessuna finestra modale del visualizzatore. |
Usare per / Evitare per
Usare per: raccolte di immagini strutturate con didascalie e lightbox opzionale.
Evitare per: testo introduttivo di sezione; collocate Content Header/Rich Text prima di Gallery.
Note
Il blocco possiede la propria radice di galleria e registra l'HTML di gallery-viewer in PublicOverlayRegistry quando la lightbox è attiva. Varianti, colonne, spaziatura, proporzioni, didascalie, modalità overlay e impostazioni della lightbox modificano attributi e classi. Gli elementi legacy basati su settings restano leggibili.
Columns (`columns`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/columns.blade.php
HTML renderizzato
<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>Classi CSS principali / 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.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| variant | cards | Gli elementi figli vengono renderizzati in stile card. |
| variant | stats | Gli elementi figli vengono renderizzati in stile statistica. |
| variant | plain/default | Gli elementi figli vengono renderizzati in stile stack semplice. |
| numero di figli | 1 | Usa wb-stack wb-gap-3 per il layout dell'elemento. |
| numero di figli | 2/3/4+ | Usa wb-grid wb-grid-2, wb-grid-3 o wb-grid-4. |
Usare per / Evitare per
Usare per: gruppi strutturati di funzionalità, statistiche o colonne semplici.
Evitare per: griglie di layout arbitrarie dove Grid + Card risulta più chiaro.
Note
Il blocco possiede il proprio <section> radice. Il numero di figli determina la classe di griglia: un figlio usa wb-stack wb-gap-3, due usano wb-grid wb-grid-2, tre usano wb-grid wb-grid-3, altrimenti wb-grid wb-grid-4. variant viene passato ai renderer figli column_item/feature-item.
Column Item (`column_item`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/column_item.blade.php
HTML renderizzato
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>Classi CSS principali / 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.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| variante del columns padre | cards | Renderizza .wb-card > .wb-card-body. |
| variante del columns padre | stats | Renderizza .wb-stat con etichetta/valore/dettaglio. |
| variante del columns padre | plain/default | Renderizza .wb-stack wb-gap-2. |
| url | URL sicuro | Le varianti cards/plain racchiudono il contenuto in a.wb-no-decoration; stats non renderizza alcun link nel renderer attuale. |
Usare per / Evitare per
Usare per: figli di Columns.
Evitare per: contenuto di pagina autonomo; usate Card o Stat Card quando è indipendente.
Note
Questo renderer cambia sostanzialmente in base alla variante del columns padre. Non possiede una radice a livello di slot e di norma viene renderizzato dal padre.
Feature Grid (`feature-grid`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/feature-grid.blade.php
HTML renderizzato
<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>Classi CSS principali / WebBlocks UI
Delega a Columns: wb-stack, wb-gap-4, wb-grid, wb-card e le classi correlate di column_item.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| comportamento del renderer | alias delegato | Delega a un percorso di rendering esistente; la mappa esatta delle impostazioni segue il delegato dove è visibile. |
| pagine nuove consigliate | n/a | Preferite il blocco canonico indicato nelle Note invece di questo blocco alias/di compatibilità. |
Usare per / Evitare per
Usare per: contenuti feature-grid legacy già esistenti.
Evitare per: nuove pagine costruite a mano; usate Columns con Column Item oppure Grid con Card.
Note
Il renderer replica il blocco, filtra i figli a feature-item e al column_item compatibile con le versioni precedenti, forza variant = cards e include il renderer di Columns. Secondo l'helper non possiede la radice pubblica, quindi il rendering di primo livello può aggiungere wb-public-block.
Feature Item (`feature-item`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/feature-item.blade.php
HTML renderizzato
<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>Classi CSS / WebBlocks UI principali
Delega alla variante cards di Column Item: wb-card, wb-card-body, wb-stack, wb-gap-2, wb-m-0.
Settings -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| comportamento del renderer | alias delegato | Delega a un percorso di rendering esistente; la mappa esatta delle impostazioni segue il delegato dove è visibile. |
| pagine nuove consigliate | n/a | Preferite il blocco canonico indicato nelle Note invece di questo blocco alias/di compatibilità. |
Usare per / Evitare per
Usare per: figli legacy di Feature Grid.
Evitare per: nuove schede di caratteristica autonome; usate le regioni di Card oppure Column Item.
Note
Questo renderer include column_item con columnsVariant = cards. È pensato come figlio di feature-grid.
Accordion (`accordion`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/accordion.blade.php
HTML renderizzato
<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>Classi CSS / WebBlocks UI principali
wb-stack, wb-gap-3, wb-gap-1, wb-stack-2, più il generico wb-public-block.
Settings -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| title/subtitle | presente | Renderizza intestazione e testo introduttivo sopra gli elementi. |
| righe figlie | pubblicate con titolo e contenuto | Renderizza ognuna come elemento a comparsa .... |
| righe figlie | senza titolo o senza contenuto | Ignorate dall'attuale raccolta di elementi. |
| wrapper | blocco di primo livello non radice | Riceve dal renderer di slot il wrapper generico .wb-public-block. |
Usare per / Evitare per
Usare per: gruppi di domande frequenti o di contenuti a comparsa.
Evitare per: singole schede domanda/risposta; usate FAQ solo per le righe figlie di compatibilità.
Note
Il blocco renderizza le righe figlie come elementi della fisarmonica quando ogni figlia ha titolo e contenuto. Non possiede la radice a livello di slot. Page Converter scrive gli elementi details in righe faq quando il contratto è disponibile, e accordion consuma titolo e contenuto delle figlie.
FAQ (`faq`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/faq.blade.php
HTML renderizzato
<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>Classi CSS / WebBlocks UI principali
wb-card, wb-card-muted, wb-card-body, wb-stack, wb-gap-2, wb-m-0, più il generico wb-public-block.
Settings -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| title/content | presente | Renderizza una scheda attenuata con domanda e risposta. |
| figli | figli pubblicati | Renderizza un'area aggiuntiva di blocchi figli wb-stack wb-gap-4. |
| uso come figlio di Accordion | dentro Accordion | Accordion consuma titolo e contenuto della riga FAQ come contenuto dell'elemento a comparsa. |
Usare per / Evitare per
Usare per: righe figlie degli elementi della fisarmonica e schede legacy con una sola domanda/risposta.
Evitare per: nuove sezioni di domande frequenti autonome; usate Accordion come genitore.
Note
FAQ è un renderer di una singola scheda domanda/risposta. Se esistono figli, li renderizza anche in un blocco wb-stack wb-gap-4 aggiuntivo.
Navbar (`sticky-navbar`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/sticky-navbar.blade.php
HTML renderizzato
<nav class="wb-navbar wb-navbar--static" data-wb-public-block-type="sticky-navbar">
<!-- navbar child blocks -->
</nav>Classi CSS / WebBlocks UI principali
wb-navbar, più una classe opzionale da navbarPositionClass() come wb-navbar--static.
Settings -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| settings.sticky_mode | sticky/default | Usa solo la base wb-navbar per il comportamento sticky. |
| settings.sticky_mode | static | navbarPositionClass() aggiunge wb-navbar--static. |
| settings.sticky_mode | fixed | navbarPositionClass() aggiunge wb-fixed. |
| blocchi figli | figli consentiti e pubblicati | Renderizzati direttamente dentro . |
Usare per / Evitare per
Usare per: alberi di blocchi di intestazione e navigazione pubbliche condivise.
Evitare per: creare una struttura di intestazione personalizzata attorno al markup della navbar.
Note
L'etichetta del blocco è Navbar, ma lo slug persistito e il file del renderer sono sticky-navbar. Possiede la propria radice esterna <nav> e renderizza i blocchi figli. I tipi di figlio consentiti includono container, cluster, header, plain_text, rich-text, button_link, navbar-brand, navbar-navigation, header-actions e search-form.
Navbar Brand (`navbar-brand`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/navbar-brand.blade.php
HTML renderizzato
<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>Classi CSS / WebBlocks UI principali
wb-navbar-brand, wb-navbar-identity, wb-navbar-brand-note, più il generico wb-public-block a meno che non sia annidato in un genitore che possiede la radice.
Settings -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| settings.url | URL sicuro | L'URL salvato prevale per il link del marchio. |
| settings.url | vuoto | Ripiega sul percorso home del sito, poi su /. |
| settings.target | _blank | Aggiunge target="_blank" rel="noopener noreferrer". |
| settings.aria_label | testo | Usato come etichetta accessibile quando non viene renderizzato testo visibile. |
| media_id | media del logo | Renderizza l'immagine del marchio dentro wb-navbar-brand. |
Usare per / Evitare per
Usare per: l'identità del sito dentro Navbar.
Evitare per: layout di intestazione completi; componete con Navbar/Container/Cluster.
Note
Il blocco non possiede la struttura esterna della navbar. Prevale l'URL salvato, poi il percorso home del sito, poi /. L'output con solo logo usa aria-label quando non viene renderizzato alcun testo.
Navbar Navigation (`navbar-navigation`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/navbar-navigation.blade.php
HTML renderizzato
<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 gruppo a tendina:
<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>Classi CSS / WebBlocks UI principali
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 -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| settings.menu_key | chiave di menu NavigationItem nota | Seleziona l'albero di navigazione del CMS da renderizzare. |
| title | testo | Usato come etichetta ARIA condivisa quando presente. |
| elemento gruppo di navigazione | gruppo con figli | Renderizza il trigger a tendina di WebBlocks UI e .wb-dropdown-menu. |
| elemento attivo | corrisponde alla pagina corrente | Aggiunge is-active e aria-current="page". |
Usare per / Evitare per
Usare per: link di menu gestiti dal CMS dentro Navbar.
Evitare per: righe di pulsanti manuali; usate Button Link o Cluster.
Note
Lo slug reale del core è navbar-navigation. Renderizza gli alberi NavigationItem del CMS a partire dalla chiave di menu selezionata. Non possiede la struttura esterna della navbar. Usa gli hook a tendina di WebBlocks UI per i menu di gruppo e per il menu mobile.
Header Actions (`header-actions`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/header-actions.blade.php
HTML renderizzato
<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>Classi CSS / WebBlocks UI principali
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 -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| settings.show_search | false | Nasconde l'azione di ricerca pubblica. |
| settings.show_mode_toggle | false | Nasconde l'azione di cambio modalità. |
| settings.show_accent_toggle | false | Nasconde il menu a tendina accento/tema. |
| impostazioni predefinite | vuoto/true | Renderizza tutte le azioni. |
Usare per / Evitare per
Usare per: le utilità standard di ricerca e tema nelle intestazioni.
Evitare per: CTA aziendali personalizzate; usate Button Link/Button.
Note
Le impostazioni possono nascondere la ricerca, il cambio modalità o il menu accento/tema. Questo blocco non possiede una radice a livello di slot. Usa gli hook a tendina di WebBlocks UI e gli hook di ricerca pubblica del CMS.
Search Form (`search-form`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/search-form.blade.php
HTML renderizzato
<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>Classi CSS / WebBlocks UI principali
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 -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| variant | secondary | Il pulsante di invio usa wb-btn wb-btn-secondary. |
| variant | primary/default | Il pulsante di invio usa wb-btn wb-btn-primary. |
| settings.show_button | false | Omette il pulsante di invio. |
| rotta di ricerca non disponibile | n/a | Il renderer non emette nulla. |
Usare per / Evitare per
Usare per: moduli di ricerca del sito.
Evitare per: moduli di filtro o integrazioni di ricerca esterne personalizzate.
Note
Il renderer non emette nulla se il resolver delle rotte non riesce a produrre un percorso di ricerca. settings.show_button controlla se il pulsante di invio viene renderizzato.
Stat Card (`stat-card`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/stat-card.blade.php
HTML renderizzato
<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>Classi CSS / WebBlocks UI principali
wb-stat, wb-stat-label, wb-stat-value, wb-stat-detail, wb-link, più il generico wb-public-block.
Settings -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| subtitle | testo | Renderizza .wb-stat-label. |
| title | testo | Renderizza .wb-stat-value. |
| content | testo | Renderizza .wb-stat-detail. |
| url | URL sicuro | Aggiunge un link Learn more con .wb-link. |
Usare per / Evitare per
Usare per: schede metriche autonome.
Evitare per: gruppi di più metriche, dove la variante stats di Columns è più compatta.
Note
È un blocco di contenuto che non possiede la radice. Usa subtitle come etichetta, title come valore, content come dettaglio e un URL canonico opzionale per un link Learn more.
Code (`code`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/code.blade.php
HTML renderizzato
<div class="wb-public-block" data-wb-public-block-type="code">
<pre><code data-language="php">php artisan test</code></pre>
</div>Classi CSS / WebBlocks UI principali
Il renderer di code non emette di per sé alcuna classe WebBlocks UI. Il wrapper generico usa wb-public-block.
Settings -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| settings.language | testo | Sanificato in data-language su . |
| settings.lang | testo | Ripiego legacy per data-language. |
| content | vuoto | Il renderer non emette nulla. |
Usare per / Evitare per
Usare per: frammenti di codice.
Evitare per: prosa formattata o elenchi di comandi; usate Rich Text/List secondo il caso.
Note
Il renderer esce subito quando il contenuto è vuoto. settings.language o settings.lang diventa un valore data-language sanificato.
Download (`download`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/download.blade.php
HTML renderizzato
<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>Classi CSS / WebBlocks UI principali
wb-stack, wb-gap-2, wb-btn, wb-btn-primary, wb-btn-secondary, wb-btn-ghost.
Settings -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| variant | primary | La classe del pulsante è wb-btn wb-btn-primary. |
| variant | ghost | La classe del pulsante è wb-btn wb-btn-ghost. |
| variant | secondary/default/altro | La classe del pulsante è wb-btn wb-btn-secondary. |
| media_id | media di download | Viene usato l'URL del media; senza media il renderer non emette nulla. |
| subtitle | testo | Renderizza un di supporto. |
Usare per / Evitare per
Usare per: CTA di download basate su un media.
Evitare per: schede di file esterni; usate File quando non esiste un asset media.
Note
Il blocco possiede il proprio <div> radice. Emette solo quando downloadAsset() ha un URL. variant cambia la classe del pulsante.
File (`file`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/file.blade.php
HTML renderizzato
<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>Classi CSS / WebBlocks UI principali
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.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| media_id | media selezionato | L'URL del media prevale sull'URL esterno. |
| url | URL esterno sicuro | Usato solo quando non è disponibile alcun URL del media. |
| title/content | testo | Reso come testo visibile della scheda quando presente. |
| source unavailable | n/d | Il renderer non produce nulla o nessun controllo riproducibile, a seconda della disponibilità della sorgente. |
Usare per / Evitare per
Usare per: schede file con media o con URL esterno verificato come ripiego.
Evitare per: semplici download di media in cui Download è sufficiente.
Note
Il blocco possiede la propria scheda radice. L'URL del media prevale su un URL esterno sicuro http, https o mailto. L'etichetta del pulsante è Download per i media e Open file per l'URL esterno.
Video (`video`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/video.blade.php
HTML generato
<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 embed:
<iframe src="https://www.youtube.com/embed/abc123" title="Video title" loading="lazy" allowfullscreen></iframe>Principali classi CSS / di 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.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| media_id | media selezionato | L'URL del media prevale sull'URL esterno. |
| url | URL esterno sicuro | Usato solo quando non è disponibile alcun URL del media. |
| title/content | testo | Reso come testo visibile della scheda quando presente. |
| source unavailable | n/d | Il renderer non produce nulla o nessun controllo riproducibile, a seconda della disponibilità della sorgente. |
Usare per / Evitare per
Usare per: video caricati o embed sicuri di YouTube/Vimeo.
Evitare per: HTML arbitrario con iframe; usate Trusted HTML solo come ripiego verificato.
Note
Il blocco possiede la propria scheda radice. I media caricati usano un <video> nativo. Gli URL sicuri di YouTube e Vimeo producono embed iframe. Altri URL HTTP sicuri producono un pulsante Open video.
Audio (`audio`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/audio.blade.php
HTML generato
<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>Principali classi CSS / di WebBlocks UI
wb-card, wb-card-muted, wb-card-body, wb-stack, wb-gap-3, wb-gap-1, wb-m-0.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| media_id | media selezionato | L'URL del media prevale sull'URL esterno. |
| url | URL esterno sicuro | Usato solo quando non è disponibile alcun URL del media. |
| title/content | testo | Reso come testo visibile della scheda quando presente. |
| source unavailable | n/d | Il renderer non produce nulla o nessun controllo riproducibile, a seconda della disponibilità della sorgente. |
Usare per / Evitare per
Usare per: audio caricato o media audio esterni sicuri.
Evitare per: embed di podcast o player che richiedono markup non supportato; valutate Trusted HTML come ripiego.
Note
Il blocco possiede la propria scheda radice. L'URL del media caricato prevale su un URL HTTP esterno sicuro.
Table (`table`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/table.blade.php
HTML generato
<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>Principali classi CSS / di WebBlocks UI
wb-stack, wb-gap-2, wb-table-wrap, wb-table, più il generico wb-public-block.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| variant | plain | Nessuna riga di intestazione; tutte le righe finiscono in . |
| variant | default/other | La prima riga finisce in . |
| settings.rows | array | La sorgente di righe legacy prevale quando presente. |
| content | righe separate da barre verticali | Usato come sorgente di righe quando settings.rows è vuoto. |
Usare per / Evitare per
Usare per: tabelle strutturate semplici.
Evitare per: griglie di layout o tabelle dati interattive complesse.
Note
Le righe provengono dal settings.rows legacy quando presente, altrimenti dalle righe di contenuto tradotto separate da barre verticali. variant = plain disattiva il comportamento della riga di intestazione.
Quote (`quote`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/quote.blade.php
HTML generato
<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>Principali classi CSS / di WebBlocks UI
wb-stack, wb-gap-2, wb-m-0, facoltativamente wb-card, wb-card-muted, wb-card-body, più il generico wb-public-block.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| variant | testimonial | Avvolge il blockquote in wb-card wb-card-muted > .wb-card-body. |
| variant | default/other | Produce un semplice. |
| subtitle | testo | Reso in insieme al contesto di title/content. |
Usare per / Evitare per
Usare per: citazioni e testimonianze.
Evitare per: callout generici o schede.
Note
Il renderer di per sé non aggiunge data-wb-public-block-type: il wrapper generico è fornito dal rendering dello slot di primo livello.
Link List (`link-list`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/link-list.blade.php
HTML generato
<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>Principali classi CSS / di WebBlocks UI
wb-stack, wb-gap-3, wb-gap-1, wb-link-list, wb-link-list-meta.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| title/subtitle/content | testo | Produce uno stack introduttivo opzionale sopra i link. |
| figlio link-list-item | figli pubblicati | Rende i figli dentro .wb-link-list. |
| nessun figlio | n/d | Il renderer non ha righe di link da mostrare. |
Usare per / Evitare per
Usare per: elenchi strutturati di link.
Evitare per: menu di navigazione completi; usate Navbar/Navigation Auto a seconda dei casi.
Note
Il blocco rende solo i figli link-list-item pubblicati. Non possiede la radice a livello di slot.
Link List Item (`link-list-item`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/link-list-item.blade.php
HTML generato
<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>Principali classi CSS / di WebBlocks UI
wb-link-list-item, wb-link-list-main, wb-link-list-title, wb-link-list-meta, wb-link-list-desc.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| url | URL sicuro | Obbligatorio per l'output; diventa l'href dell'ancora. |
| title | testo | Obbligatorio per l'output; rende .wb-link-list-title. |
| subtitle | testo | Rende .wb-link-list-meta. |
| content | testo | Rende .wb-link-list-desc. |
Usare per / Evitare per
Usare per: figli di Link List.
Evitare per: pulsanti autonomi o voci di menu di navigazione.
Note
Il renderer produce output solo quando esistono sia un URL sicuro sia un titolo. È pensato come figlio di link-list.
Navigation Auto (`navigation-auto`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/navigation-auto.blade.php
HTML generato
<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 menu footer/legale:
<ul class="wb-stack wb-gap-1">
<li class="wb-stack wb-gap-1"><a href="/privacy" class="wb-link">Privacy</a></li>
</ul>Principali classi CSS / di 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.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| settings.menu_key o settings.location | chiave di menu nota | Seleziona il menu di navigazione del CMS; l'helper ripiega su primary/footer in base a slot o sottotitolo. |
| menu footer/legale | chiave footer o legal | Produce un elenco impilato di .wb-link. |
| altro menu | primary/default | Produce link radice raggruppati in stile pulsante. |
| voce attiva | corrispondenza con la pagina corrente | Aggiunge le classi current/active dove il renderer le risolve. |
Usare per / Evitare per
Usare per: il rendering di compatibilità dei menu del CMS.
Evitare per: nuove intestazioni condivise, dove il figlio previsto è Navbar Navigation.
Note
Il renderer risolve un menu di navigazione del CMS in base alla chiave. I menu footer e legali producono link impilati; gli altri menu producono link radice raggruppati in stile pulsante.
TOC (`toc`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/toc.blade.php
HTML generato
<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>Principali classi CSS / di 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.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| title | testo | Rende l'etichetta dell'intestazione; l'etichetta visibile predefinita è quella del comportamento attuale del renderer. |
| blocchi Header nella stessa pagina | pubblicati e con ancore | Genera link .wb-link-list-item. |
| variante di header | h3 | La descrizione riporta Jump to subsection; le altre riportano Jump to section. |
| nessuna intestazione idonea | n/d | Il renderer non produce nulla. |
Usare per / Evitare per
Usare per: indici della stessa pagina generati da blocchi Header con ancore.
Evitare per: elenchi di link manuali; usate Link List.
Note
Il renderer legge i blocchi Header pubblicati e ancorati dello stesso albero di pagina. Non produce nulla quando non esistono intestazioni idonee.
Alert (`alert`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/alert.blade.php
HTML generato
<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>Principali classi CSS / di WebBlocks UI
wb-alert, la classe di variante restituita da alertVariantClass(), wb-alert-title, più il generico wb-public-block.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| settings.variant | success/warning/danger | alertVariantClass() aggiunge wb-alert-success, wb-alert-warning o wb-alert-danger. |
| settings.variant | info/default/other | Aggiunge wb-alert-info. |
| title | testo | Rende .wb-alert-title. |
| content | testo | Rende il corpo dell'avviso. |
Usare per / Evitare per
Usare per: avvisi in linea rivolti all'utente.
Evitare per: promozioni di marketing; usate CTA/Hero.
Note
Il blocco non possiede la radice a livello di slot. La variante condivisa controlla la classe di tono dell'avviso.
Contact Form (`contact_form`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/contact_form.blade.php
HTML generato
<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>Principali classi CSS / di 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.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| destinatario di contatto del sito | configurato | Il modulo invia a contact-messages.store con il contesto nascosto di sito e pagina. |
| errori di validazione | presenti | Produce wb-alert wb-alert-danger e messaggi a livello di campo. |
| etichette di invio/successo in settings | impostazioni tradotte legacy | Spostate fuori dal resolver/writer delle traduzioni; l'output visibile segue gli attuali campi di blocco tradotti. |
Il modulo pubblico è output nativo di Blade, non contenuto Trusted HTML. Gli invii dal browser richiedono CSRF, includono il campo di controllo antispam generato e di proprietà del CMS, convalidano i campi obbligatori lato server, salvano prima i messaggi legittimi e solo dopo tentano la notifica via e-mail seguendo l'ordine documentato dei destinatari di ripiego. Il campo di controllo è generato dal renderer e non fa parte del normale input del visitatore.
Usare per / Evitare per
Usare per: il flusso dei messaggi di contatto proprio del prodotto.
Evitare per: moduli HTML grezzi o embed di terze parti, a meno che non siano verificati come Trusted HTML.
Note
Il renderer include campi nascosti, CSRF, il markup antispam .wb-form-check con inert e aria-hidden="true", errori di validazione mirati e invia a contact-messages.store. Il vecchio campo website non fa più parte del contratto del renderer pubblico.
Breadcrumb (`breadcrumb`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/breadcrumb.blade.php
HTML generato
<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>Principali classi CSS / di WebBlocks UI
wb-breadcrumb, wb-breadcrumb-list, wb-breadcrumb-item, wb-breadcrumb-link, wb-breadcrumb-current.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| settings.home_label | testo | Sostituisce l'etichetta della briciola iniziale. |
| settings.include_current | false | Omette la briciola della pagina corrente. |
| settings.include_current | true/default | Include la briciola della pagina corrente. |
| home page | include_current true | Produce solo la briciola corrente. |
Usare per / Evitare per
Usare per: navigazione gerarchica tra pagine.
Evitare per: la navigazione principale del sito.
Note
L'etichetta iniziale e l'inclusione della pagina corrente sono guidate dalle impostazioni. Nella home page viene prodotta solo la briciola corrente quando include_current è true.
Sidebar Brand (`sidebar-brand`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/sidebar-brand.blade.php
HTML generato
<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>Principali classi CSS / di WebBlocks UI
wb-sidebar-brand, wb-sidebar-brand-logo, wb-sidebar-brand-copy, wb-sidebar-brand-note.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| settings.url | URL sicuro | L'URL salvato ha la precedenza per il link del brand. |
| settings.url | vuoto | Ripiega sul percorso home del sito e poi su /. |
| settings.target | _blank | Aggiunge target="_blank" rel="noopener noreferrer". |
| settings.aria_label | testo | Viene usata come etichetta accessibile quando non viene renderizzato testo visibile. |
| media_id | media del logo | Renderizza l'immagine del brand dentro wb-sidebar-brand. |
Usare per / Evitare per
Usare per: identità del sito o della documentazione all'interno di layout con barra laterale.
Evitare per: l'identità nella navbar; utilizzate lì Navbar Brand.
Note
Il blocco non è proprietario dello shell della barra laterale. L'URL salvato ha la precedenza, poi il percorso home del sito, poi /. L'output con solo logo utilizza aria-label.
Sidebar Navigation (`sidebar-navigation`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/sidebar-navigation.blade.php
HTML renderizzato
<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>Principali classi 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.
Mappa settings -> classe / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| settings.menu_key | chiave di menu nota | Renderizza l'albero di CMS Navigation quando è presente. |
| {'es': 'hijos manuales', 'it': 'figli manuali', 'fr': 'enfants manuels'} | sidebar-nav-item/sidebar-nav-group | Renderizza i blocchi figli manuali quando la modalità menu non fornisce elementi. |
| settings.show_icons | booleano | L'effetto sulla visibilità delle icone richiede conferma dal codice sorgente. |
| settings.active_matching | valore | Il comportamento di corrispondenza attiva è gestito da un helper; l'output visibile è is-active/aria-current in caso di corrispondenza. |
Usare per / Evitare per
Usare per: blocchi di navigazione della documentazione o della barra laterale.
Evitare per: normali barre laterali di marketing senza semantica di navigazione.
Note
Il blocco può renderizzare un menu di CMS Navigation oppure blocchi figli manuali sidebar-nav-item / sidebar-nav-group. Non è proprietario dello shell esterno della pagina o della barra laterale.
Sidebar Nav Item (`sidebar-nav-item`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/sidebar-nav-item.blade.php
HTML renderizzato
<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 di gruppo annidato:
<a href="/docs/child" class="wb-nav-group-item">
<span>Child</span>
</a>Principali classi CSS / WebBlocks UI
wb-sidebar-link, wb-nav-group-item, wb-icon, wb-sidebar-icon, is-active.
Mappa settings -> classe / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| settings.url | URL sicuro | Necessario per produrre output. |
| settings.target | _blank | Aggiunge gli attributi target/rel esterni. |
| settings.icon | slug/classe dell'icona | Renderizza wb-icon ... wb-sidebar-icon quando è configurato. |
| settings.active_mode | exact/current-page/manual/default | Controlla l'helper dello stato attivo; l'output visibile è is-active e aria-current. |
| settings.manual_active | true | Può forzare l'output attivo quando la modalità attiva è manuale. |
Usare per / Evitare per
Usare per: link manuali della barra laterale.
Evitare per: link della navbar o pulsanti generici.
Note
Il renderer delega a sidebar-nav-item-link.blade.php. Non emette nulla senza sia URL sia etichetta.
Sidebar Nav Group (`sidebar-nav-group`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/sidebar-nav-group.blade.php
HTML renderizzato
<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>Principali classi 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.
Mappa settings -> classe / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| settings.icon | slug/classe dell'icona | Renderizza il markup dell'icona del gruppo quando è configurato. |
| settings.initially_open | true/predefinito | Aggiunge is-open. |
| settings.initially_open | false | Il gruppo parte chiuso. |
| {'es': 'sidebar-nav-item hijo', 'it': 'sidebar-nav-item figlio', 'fr': 'sidebar-nav-item enfant'} | figli pubblicati | Viene renderizzato dentro .wb-nav-group-items. |
Usare per / Evitare per
Usare per: gruppi comprimibili all'interno di Sidebar Navigation.
Evitare per: fisarmoniche generiche; utilizzate Accordion.
Note
Il gruppo viene renderizzato solo quando ha un'etichetta e figli sidebar-nav-item pubblicati. Utilizza gli hook nav-group di WebBlocks UI.
Sidebar Footer (`sidebar-footer`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/sidebar-footer.blade.php
HTML renderizzato
<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>Principali classi CSS / WebBlocks UI
wb-sidebar-footer, wb-callout, la classe della variante fornita da sidebarFooterVariantClass(), wb-callout-title, wb-text-xs, wb-text-muted, wb-mt-3, wb-mb-0.
Mappa settings -> classe / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| settings.variant | success/warning/danger | sidebarFooterVariantClass() aggiunge wb-callout-success, wb-callout-warning o wb-callout-danger. |
| settings.variant | info/predefinito/altro | Aggiunge wb-callout-info. |
| title/content/subtitle | tutti vuoti | Il renderer non emette nulla. |
| subtitle | testo | Renderizza la nota a piè di pagina con wb-text-xs wb-text-muted wb-mt-3 wb-mb-0. |
Usare per / Evitare per
Usare per: brevi note nella barra laterale o inviti all'azione.
Evitare per: le CTA principali della pagina.
Note
Il blocco viene renderizzato solo quando esiste title, content o subtitle. Non è proprietario dello shell della barra laterale.
HTML (Trusted) (`html`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/html.blade.php
HTML renderizzato
<div class="wb-public-block" data-wb-public-block-type="html">
<div>
<!-- trusted HTML content -->
</div>
</div>Principali classi CSS / WebBlocks UI
Il renderer stesso non aggiunge alcuna classe WebBlocks UI fissa. Il wrapper generico utilizza wb-public-block.
Mappa settings -> classe / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| content | HTML attendibile | Viene renderizzato dentro un semplice all'interno del wrapper pubblico generico. |
| {'es': 'fragmentos overlay/body-end', 'it': 'frammenti overlay/body-end', 'fr': 'fragments overlay/body-end'} | riconosciuti dall'extractor | Possono essere sollevati tramite TrustedHtmlOverlayExtractor, PublicOverlayRegistry e PublicBodyEndRegistry. |
| {'es': 'contenido no confiable', 'it': 'contenuto non attendibile', 'fr': 'contenu non approuvé'} | n/d | Non utilizzatelo; questo renderer presuppone markup statico attendibile. |
Usare per / Evitare per
Usare per: markup di riserva già revisionato che i blocchi strutturati non riescono ancora a rappresentare.
Evitare per: l'output predefinito di pagine migrate o create dall'IA.
Note
L'HTML attendibile può estrarre frammenti di overlay e di fine body tramite TrustedHtmlOverlayExtractor, PublicOverlayRegistry e PublicBodyEndRegistry. Utilizzatelo solo per markup statico attendibile.
Button (`button`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/button.blade.php
HTML renderizzato
<a href="/start" class="wb-btn wb-btn-primary">Open link</a>Variante senza URL:
<button type="button" class="wb-btn wb-btn-primary">Open link</button>Principali classi CSS / WebBlocks UI
wb-btn, wb-btn-primary, wb-btn-secondary, wb-btn-outline, wb-btn-ghost, wb-btn-danger, wrapper opzionale dei figli wb-stack wb-gap-4.
Mappa settings -> classe / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| variant | primary/secondary/outline/ghost/danger | Mappa su wb-btn più la classe di variante corrispondente. |
| variant | vuoto/altro | Per impostazione predefinita usa wb-btn wb-btn-primary. |
| {'es': 'URL del medio adjunto', 'it': 'URL del media allegato', 'fr': 'URL du média joint'} | presente | Ha la precedenza sull'URL canonico per compatibilità. |
| url | presente senza allegato | Renderizza un'ancora. |
| url | vuoto | Renderizza un inerte. |
Usare per / Evitare per
Usare per: azioni figlie gestite dentro Hero/CTA.
Evitare per: pulsanti di pagina autonomi; utilizzate Button Link.
Note
Questo è un blocco di azione figlia gestito per Hero/CTA. Non compare nell'attuale elenco del catalogo pubblicato di CoreBlockTypeCatalogSyncer, ma esistono renderer pubblici e supporto alla conversione. L'URL dell'allegato ha la precedenza sull'URL canonico per compatibilità.
Callout (`callout`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/callout.blade.php
HTML renderizzato
<div class="wb-alert wb-alert-info">
<div>
<div class="wb-alert-title">Title</div>
<div>Content</div>
</div>
</div>Principali classi CSS / WebBlocks UI
wb-alert, wb-alert-info, wb-alert-success, wb-alert-warning, wb-alert-danger, wb-alert-title, wrapper opzionale dei figli wb-stack wb-gap-4.
Mappa settings -> classe / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| variant | success/warning/danger | Aggiunge la classe wb-alert-{tone} corrispondente. |
| variant | info/predefinito/altro | Aggiunge wb-alert-info. |
| {'es': 'hijos', 'it': 'figli', 'fr': 'enfants'} | figli pubblicati | Vengono renderizzati dopo dentro 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 | Utilizzate Alert per gli avvisi di prima classe nelle nuove pagine. |
Usare per / Evitare per
Usare per: contenuti di tipo avviso legacy o compatibili con il convertitore.
Evitare per: nuove pagine strutturate; utilizzate Alert.
Note
callout è un renderer legacy e compatibile con la conversione e visivamente corrisponde al pattern alert. Non è elencato come riga attuale del catalogo core pubblicato, mentre alert lo è.
List (`list`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/list.blade.php
HTML renderizzato
<div class="wb-stack wb-gap-2">
<h3>List title</h3>
<ul class="wb-stack wb-gap-1">
<li>Item</li>
</ul>
</div>Principali classi CSS / WebBlocks UI
wb-stack, wb-gap-2, wb-gap-1, wrapper opzionale dei figli wb-stack wb-gap-4.
Mappa settings -> classe / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| variant | ordered | Renderizza . |
| variant | predefinito/altro | Renderizza . |
| settings.items/cards/entries | array | Viene usato come sorgente degli elementi quando è disponibile. |
| content | testo separato per righe | Viene usato come sorgente di riserva degli elementi. |
| title | testo | Renderizza un'intestazione sopra l'elenco. |
Usare per / Evitare per
Usare per: elenchi semplici importati o inseriti manualmente.
Evitare per: elenchi di navigazione o testo di corpo ricco che appartiene a Rich Text.
Note
Questo renderer esiste per compatibilità e conversione. Gli elementi provengono dai settings (items, cards, entries) o da contenuto separato per righe. variant = ordered trasforma ul in ol.
Text (`text`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/text.blade.php
HTML renderizzato
<div class="wb-stack wb-gap-2">
<strong>Title</strong>
<p>Content</p>
</div>Principali classi CSS / WebBlocks UI
wb-stack, wb-gap-2, wrapper opzionale dei figli wb-stack wb-gap-4.
Mappa settings -> classe / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| title | testo | Renderizza sopra il paragrafo quando è presente. |
| content | testo | Renderizza un paragrafo dentro wb-stack wb-gap-2. |
| {'es': 'hijos', 'it': 'figli', 'fr': 'enfants'} | figli pubblicati | Renderizza poi i blocchi figli dentro wb-stack wb-gap-4. |
Usare per / Evitare per
Usare per: contenuti legacy o compatibili con il convertitore che già dipendono da questo renderer.
Evitare per: nuove pagine costruite a mano; utilizzate i blocchi strutturati canonici elencati più in alto.
Note
Questo è un renderer di compatibilità. L'attuale blocco core canonico per il testo di corpo semplice è plain_text.
Partial interno delle azioni (`_actions`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/_actions.blade.php
HTML renderizzato
<div class="wb-cluster wb-cluster-2">
<a href="/start" class="wb-btn wb-btn-primary">Start</a>
</div>Principali classi CSS / WebBlocks UI
Wrapper predefinito wb-cluster wb-cluster-2, oppure una classe di wrapper fornita dal chiamante.
Mappa settings -> classe / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| {'es': 'entrada buttons', 'it': 'input buttons', 'fr': 'entrée buttons'} | blocchi figli di tipo button | Filtra solo i figli di tipo button e li renderizza. |
| {'es': 'entrada wrapperClass', 'it': 'input wrapperClass', 'fr': 'entrée wrapperClass'} | stringa di classe fornita | Utilizza la classe di wrapper fornita. |
| {'es': 'entrada wrapperClass', 'it': 'input wrapperClass', 'fr': 'entrée wrapperClass'} | vuoto | Per impostazione predefinita usa wb-cluster wb-cluster-2. |
Usare per / Evitare per
Usare per: l'output delle azioni Hero/CTA gestito dal renderer.
Evitare per: la composizione diretta delle pagine.
Note
Questo è un partial di supporto interno, non un blocco pubblicato autonomo. Filtra la collezione ricevuta ai figli di tipo button e renderizza ogni figlio tramite il consueto partial dei blocchi.
Card Grid (`card-grid`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/card-grid.blade.php
HTML renderizzato
<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>Principali classi 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.
Mappa settings -> classe / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| settings.items | array | Determina l'output delle card; ogni elemento può includere asset_id, title, content, url e url_label. |
| {'es': 'número de settings.items', 'it': 'numero di settings.items', 'fr': 'nombre de settings.items'} | 0-1/2/3/4+ | Utilizza 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 del media | Renderizza l'immagine dell'elemento quando esiste l'URL del media. |
| item.url + item.url_label | testo | Renderizza a.wb-link. |
Usare per / Evitare per
Usare per: contenuti legacy o compatibili con il convertitore che già dipendono da questo renderer.
Evitare per: nuove pagine costruite a mano; utilizzate i blocchi strutturati canonici elencati più in alto.
Note
Questo è un renderer legacy o di compatibilità basato su settings.items. La classe della griglia cambia in base al numero di elementi.
Contact Info (`contact-info`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/contact-info.blade.php
HTML renderizzato
<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>Principali classi CSS / WebBlocks UI
wb-card, wb-card-muted, wb-card-body, wb-stack, wb-gap-3, wb-gap-1, wb-link, oltre alle classi specifiche del CMS wb-public-contact-card e wb-public-contact-meta.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| settings.items | array | Renderizza le righe di contatto dentro wb-public-contact-meta. |
| item.url | URL sicuro | Renderizza il valore collegato con wb-link. |
| item.target | _blank | Aggiunge attributi target/rel esterni. |
| item.label/value | testo | Renderizza l'etichetta e il valore semplice quando non esiste un URL sicuro. |
Da usare per / Da evitare per
Da usare per: contenuti legacy o compatibili con il convertitore che dipendono già da questo renderer.
Da evitare per: nuove pagine costruite a mano; utilizzate i blocchi strutturati canonici elencati in alto.
Note
Questo è un renderer legacy/di compatibilità basato su settings.items. I link passano attraverso Block::safePublicUrl().
FAQ List (`faq-list`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/faq-list.blade.php
HTML renderizzato
<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>Classi CSS principali / WebBlocks UI
Utilizza le classi del renderer accordion.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| comportamento del renderer | delegato | Include direttamente il renderer Accordion. |
| righe figlie | titolo e contenuto | Seguono il contratto dell'elemento a comparsa di Accordion. |
| pagine nuove preferite | n/a | Utilizzate accordion come blocco padre canonico. |
Da usare per / Da evitare per
Da usare per: contenuti legacy o compatibili con il convertitore che dipendono già da questo renderer.
Da evitare per: nuove pagine costruite a mano; utilizzate i blocchi strutturati canonici elencati in alto.
Note
Questo partial di compatibilità delega direttamente a accordion.blade.php.
Gallery Viewer (`gallery-viewer`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/gallery-viewer.blade.php
HTML renderizzato
<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>Classi CSS principali / 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.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| input viewerId | stringa id | Imposta l'id di destinazione della modale/galleria usato dai trigger della galleria. |
| input galleryItems | collezione | Renderizza le slide/gli elementi del visualizzatore dai dati elemento preparati da Gallery. |
| impostazioni dirette del blocco | n/a | Partial interno; nessuna mappa di impostazioni di blocco autonoma. |
Da usare per / Da evitare per
Da usare per: il markup dell'overlay lightbox registrato da Gallery.
Da evitare per: l'uso manuale come blocco di pagina.
Note
Questo è un helper di overlay usato dai renderer di galleria/showcase tramite PublicOverlayRegistry, non un blocco autonomo.
Map (`map`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/map.blade.php
HTML renderizzato
<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>Classi CSS principali / WebBlocks UI
wb-card, wb-card-muted, wb-card-body, wb-stack, wb-gap-2, wb-m-0, wb-btn, wb-btn-secondary, e il wrapper opzionale dei figli wb-stack wb-gap-4.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| url | URL http/https | Accettato come sorgente mappa sicura e mostrato quando è distinto dal contenuto. |
| content | testo o query | Usato come query di mappa di fallback. |
| title | testo | Renderizza nella card. |
| children | figli pubblicati | Renderizza in seguito i blocchi figli dentro wb-stack wb-gap-4. |
Da usare per / Da evitare per
Da usare per: contenuti legacy o compatibili con il convertitore che dipendono già da questo renderer.
Da evitare per: nuove pagine costruite a mano; utilizzate i blocchi strutturati canonici elencati in alto.
Note
Questo è un renderer legacy/di compatibilità. Accetta solo gli schemi URL http e https per l'URL grezzo e può renderizzare i figli dopo la card.
Menu (`menu`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/menu.blade.php
HTML renderizzato
<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>Classi CSS principali / WebBlocks UI
Utilizza le classi del renderer navigation-auto.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| comportamento del renderer | delegato | Include direttamente il renderer Navigation Auto. |
| settings.menu_key/location | chiave di menu nota | Segue il comportamento di selezione del menu di Navigation Auto. |
| pagine nuove preferite | n/a | Utilizzate Navbar Navigation o Navigation Auto intenzionalmente, non menu. |
Da usare per / Da evitare per
Da usare per: contenuti legacy o compatibili con il convertitore che dipendono già da questo renderer.
Da evitare per: nuove pagine costruite a mano; utilizzate i blocchi strutturati canonici elencati in alto.
Note
Questo partial di compatibilità delega direttamente a navigation-auto.blade.php.
Metric Card (`metric-card`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/metric-card.blade.php
HTML renderizzato
<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>Classi CSS principali / WebBlocks UI
wb-stat, wb-stat-label, wb-stat-value, wb-stat-delta, e il wrapper opzionale dei figli wb-stack wb-gap-4.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| comportamento del renderer | alias delegato | Delega a un percorso di renderer esistente; la mappa esatta delle impostazioni segue il delegato dove visibile. |
| pagine nuove preferite | n/a | Preferite il blocco canonico indicato nelle Note invece di questo blocco alias/compatibilità. |
Da usare per / Da evitare per
Da usare per: contenuti legacy con l'alias metric-card.
Da evitare per: contenuti nuovi; utilizzate Stat Card o le statistiche di Columns.
Note
Questo è un renderer di metriche legacy/di compatibilità. L'attuale catalogo pubblicato utilizza stat-card.
Showcase List (`showcase-list`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/showcase-list.blade.php
HTML renderizzato
<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>Classi CSS principali / 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, oltre alla classe specifica del CMS wb-public-showcase-item.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| settings.items | array | Renderizza un elemento showcase in card attenuata per ogni voce. |
| item.images[].asset_id | id media | Renderizza le figure della galleria e registra un visualizzatore di galleria condiviso quando esistono immagini. |
| item.url | URL sicuro | Renderizza un wb-link esterno con target/rel. |
| item.title/subtitle/url_label | testo | Renderizza le intestazioni dello showcase e l'etichetta del link. |
Da usare per / Da evitare per
Da usare per: contenuti legacy o compatibili con il convertitore che dipendono già da questo renderer.
Da evitare per: nuove pagine costruite a mano; utilizzate i blocchi strutturati canonici elencati in alto.
Note
Questo è un renderer legacy/di compatibilità basato su settings.items. Può inserire il markup di overlay gallery-viewer in PublicOverlayRegistry.
Sidebar Nav Item Link (`sidebar-nav-item-link`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/sidebar-nav-item-link.blade.php
HTML renderizzato
<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>Classi CSS principali / WebBlocks UI
wb-sidebar-link, wb-nav-group-item, is-active, wb-icon, wb-sidebar-icon.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| input nested | true | Utilizza wb-nav-group-item. |
| input nested | false | Utilizza wb-sidebar-link. |
| URL/etichetta dell'elemento della sidebar | presente | Necessari per generare l'ancora. |
| icona dell'elemento | configurata | Renderizza i.wb-icon.wb-icon-{icon}.wb-sidebar-icon. |
| helper active | true | Aggiunge is-active e aria-current="page". |
Da usare per / Da evitare per
Da usare per: l'output interno dei link della sidebar condiviso dai renderer degli elementi della sidebar.
Da evitare per: la composizione diretta delle pagine.
Note
Questo è un helper interno per sidebar-nav-item e sidebar-nav-group. La classe passa a wb-nav-group-item quando viene renderizzato annidato.
Sidebar Navigation Menu Item (`sidebar-navigation-menu-item`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/sidebar-navigation-menu-item.blade.php
HTML renderizzato
<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>Classi CSS principali / 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.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| link_type di NavigationItem | gruppo con figli visibili | Renderizza .wb-nav-group con toggle ed elementi annidati. |
| input nested | true | I link figli utilizzano wb-nav-group-item. |
| input showIcons | true | Consente il rendering delle icone di sidebar degli elementi. |
| helper active | true | Aggiunge is-open/is-active e aria-current dove applicabile. |
Da usare per / Da evitare per
Da usare per: il rendering interno degli elementi di menu del CMS per la navigazione nella sidebar.
Da evitare per: la composizione diretta delle pagine.
Note
Questo helper renderizza le righe NavigationItem del CMS per sidebar-navigation quando quel blocco è basato su un menu anziché su figli manuali.
Slider (`slider`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/slider.blade.php
HTML renderizzato
<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>Classi CSS principali / 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.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| media della galleria | uno o più asset | Renderizza le slide da galleryAssets(). |
| numero di media della galleria | più di uno | Renderizza i controlli precedente/successivo e i dot. |
| title | testo | Renderizza un sopra lo slider. |
| subtitle | testo | Renderizza testo di supporto attenuato sotto lo slider. |
Da usare per / Da evitare per
Da usare per: contenuti legacy o compatibili con il convertitore che dipendono già da questo renderer.
Da evitare per: nuove pagine costruite a mano; utilizzate i blocchi strutturati canonici elencati in alto.
Note
Questo è un renderer legacy/di compatibilità basato su galleryAssets(). I controlli dello slider vengono renderizzati solo quando è presente più di un asset di slide.
Stats (`stats`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/stats.blade.php
HTML renderizzato
<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>Classi CSS principali / WebBlocks UI
Utilizza il renderer columns con variant = stats, incluse wb-stat, wb-stat-label, wb-stat-value e wb-stat-delta per i blocchi figli column_item.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| comportamento del renderer | alias delegato | Delega a un percorso di renderer esistente; la mappa esatta delle impostazioni segue il delegato dove visibile. |
| pagine nuove preferite | n/a | Preferite il blocco canonico indicato nelle Note invece di questo blocco alias/compatibilità. |
Da usare per / Da evitare per
Da usare per: contenuti legacy con l'alias stats.
Da evitare per: nuovi gruppi di statistiche; utilizzate Columns con la variante stats oppure Stat Card.
Note
Questo partial di compatibilità delega a columns.blade.php dopo aver forzato la variante a stats.
Tabs (`tabs`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/tabs.blade.php
HTML renderizzato
<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>Classi CSS principali / WebBlocks UI
wb-card, wb-card-header, wb-card-body, e il wrapper opzionale dei figli wb-stack wb-gap-4.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| title | testo/predefinito | Renderizza il titolo dell'intestazione della card, con Tab come valore predefinito. |
| subtitle | testo | Renderizza uno span secondario nell'intestazione. |
| content | testo/testo HTML | Viene renderizzato dentro .wb-card-body. |
| children | figli pubblicati | Renderizza in seguito i blocchi figli dentro wb-stack wb-gap-4. |
Da usare per / Da evitare per
Da usare per: contenuti legacy o compatibili con il convertitore che dipendono già da questo renderer.
Da evitare per: nuove pagine costruite a mano; utilizzate i blocchi strutturati canonici elencati in alto.
Note
Questo è un renderer legacy/di compatibilità. Renderizza i figli dopo la card se esistono blocchi figli.
Testimonial (`testimonial`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/testimonial.blade.php
HTML renderizzato
<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>Classi CSS principali / WebBlocks UI
Utilizza il renderer quote con variant = testimonial.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| comportamento del renderer | alias delegato | Delega a un percorso di renderer esistente; la mappa esatta delle impostazioni segue il delegato dove visibile. |
| pagine nuove preferite | n/d | Preferite il blocco canonico indicato nelle Note anziché questo blocco alias/di compatibilità. |
Usare per / Evitare per
Usare per: contenuti legacy con l'alias testimonial.
Evitare per: nuove citazioni; usate Quote con la variante testimonial se necessario.
Note
Questo partial di compatibilità delega a quote.blade.php dopo aver forzato la variante a testimonial.
Fallback Renderer (`fallback`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/fallback.blade.php
HTML renderizzato
<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>Classi CSS principali / WebBlocks UI
I rami di fallback usano primitive esistenti, tra cui 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 e wb-select.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| settings.items/cards/entries | array | Possono produrre un output di compatibilità in stile elenco o card a seconda del ramo di fallback. |
| settings.rows/options/related_slugs | array | Usati dai rami di fallback quando presenti. |
| tipo di blocco/contesto di origine | variabile | richiede conferma dal codice sorgente per la selezione esatta del ramo. |
Usare per / Evitare per
Usare per: un rendering degradato e sicuro dei blocchi di produzione non supportati.
Evitare per: la composizione pianificata delle pagine o le migrazioni normali.
Note
Questo è il renderer di sicurezza per gli slug sconosciuti o di transizione. Contiene output specifici per ramo per slug più vecchi come comparison, timeline, product-card, pagination, input, textarea, select, checkbox-group e radio-group. È preferibile documentare i file di renderer dedicati dove esistono.
Missing Renderer (`missing-renderer`)
Sorgente del renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/missing-renderer.blade.php
HTML renderizzato
<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>Classi CSS principali / WebBlocks UI
wb-alert, wb-alert-warning, wb-alert-title.
Impostazioni -> mappa classi / markup
| Impostazione | Valore | Effetto sull'output |
|---|---|---|
| slug del tipo | qualsiasi slug privo di renderer | Mostra un avviso che indica il file di renderer atteso. |
| ambiente | percorso di fallback non di produzione | Usato quando non esiste alcun renderer pubblico fuori dalla produzione. |
| impostazioni di runtime | n/d | Nessuna impostazione del blocco influenza questo output di avviso. |
Usare per / Evitare per
Usare per: dare visibilità agli sviluppatori quando non esiste alcun renderer fuori dalla produzione.
Evitare per: la progettazione di contenuti pubblici.
Note
Questo renderer diagnostico viene usato quando non è possibile risolvere un renderer di blocco concreto.