Balisage de rendu public des blocs
Ce fichier répond à la question pratique que pose la création de pages : "Lorsque j'ajoute ce bloc du CMS, quel HTML public et quelles classes WebBlocks UI sont rendus ?" Utilisez-le pour composer des pages manuellement, relire la sortie du Page Converter ou demander à un assistant IA de construire une page du CMS à partir de blocs structurés.
Les blocs qui possèdent leur racine rendent leur propre racine publique sémantique et placent data-wb-public-block-type sur cette racine. Section, Container, Grid, Card, Hero, Gallery et Navbar en sont des exemples. Les blocs qui ne possèdent pas leur racine rendent leur balisage interne et sont normalement enveloppés par le moteur de rendu des slots dans .wb-public-block avec data-wb-public-block-type. Plain Text, Rich Text, Button Link, Alert et la plupart des enfants utilitaires de navigation en sont des exemples.
Ce fichier est établi à partir des sources Blade réelles du moteur de rendu public. Le HTML d'exemple est représentatif, mais il doit rester compatible avec le contrat du moteur de rendu. La source principale du moteur de rendu du paquet est packages/webblocks-cms/resources/views/pages/partials/blocks/.blade.php ; les fichiers de compatibilité de la racine sous resources/views/pages/partials/blocks/.blade.php délèguent généralement à l'espace de noms du paquet. Block::publicRenderView() résout d'abord les partials de bloc du paquet, puis les partials de compatibilité de la racine, et enfin le partial sûr de repli ou de moteur de rendu manquant.
Composition de blocs recommandée pour les nouvelles pages
Préférez ces blocs pour les nouvelles pages du CMS construites à la main :
- Layout et rythme :
section,container,grid,cluster. - Texte de page et de section :
content_header,header,plain_text,rich-text,button_link, etbuttonlorsqu'il s'agit d'une action gérée de Hero/CTA. - Marketing et contenu structuré :
hero,cta,columnsaveccolumn_item,cardaveccard_header,card_bodyetcard_footer,accordionavec des lignes enfants de type FAQ,gallery,image. - Navigation et éléments partagés :
sticky-navbar,navbar-brand,navbar-navigation,header-actions,search-form, ainsi que les blocs de barre latérale pour les layouts documentation/sidebar.
Ne privilégiez pas ceux-ci pour de nouvelles pages construites à la main, sauf si vous préservez du contenu hérité, la sortie du convertisseur ou un comportement de compatibilité : feature-grid, feature-item, card-grid, contact-info, faq-list, menu, metric-card, showcase-list, slider, stats, tabs, testimonial, text, callout et les chemins de rendu uniquement de repli.
N'utilisez Safe HTML (html) et les moteurs de rendu de repli que comme solutions relues, lorsque le contenu ne peut pas encore être représenté par des blocs structurés du CMS. Ils ne doivent pas constituer la sortie par défaut des pages migrées ou créées par IA.
Arborescences de page courantes
Page marketing :
Page
└── main slot
└── Section
└── Container
├── Content Header or Hero
├── Grid or Columns
└── CTAGrille de cartes :
Section
└── Container
└── Grid
└── Card
├── Card Header
├── Card Body
└── Card FooterNavbar / en-tête partagé :
Navbar
└── Container
└── Cluster
├── Navbar Brand
└── Cluster
├── Navbar Navigation
└── Header ActionsFAQ :
Section
└── Container
└── Accordion
├── FAQ child row
├── FAQ child row
└── FAQ child rowLe moteur de rendu actuel d'Accordion consomme les lignes enfants publiées, avec titre et contenu, comme éléments dépliants. Le Page Converter écrit les groupes <details> adjacents dans des lignes enfants faq lorsque les contrats accordion et faq sont tous deux disponibles.
Le wrapper par défaut du slot main rend les blocs qui ne possèdent pas leur racine à l'intérieur de :
<div class="wb-public-block" data-wb-public-block-type="plain-text">
...
</div>Les blocs qui possèdent leur racine placent en revanche data-wb-public-block-type sur leur propre élément racine public.
Section (`section`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/section.blade.php
HTML rendu
<section class="wb-section wb-section-lg wb-stack" data-wb-public-block-type="section">
<!-- child blocks -->
</section>Principales classes CSS / WebBlocks UI
wb-section, la classe d'espacement issue de sectionSpacingClass(), wb-stack.
Réglages -> correspondance classes / balisage
| Réglage | Valeur | Effet sur la sortie |
|---|---|---|
| settings.spacing | sm | sectionSpacingClass() ajoute wb-section-sm. |
| settings.spacing | lg | sectionSpacingClass() ajoute wb-section-lg. |
| settings.spacing | default/vide | N'utilise que wb-section wb-stack. |
| status | unpublished | Le bloc n'est pas inclus par les requêtes normales de l'arbre de blocs publics. |
À utiliser pour / À éviter pour
À utiliser pour : les sections principales de la page et le regroupement des blocs.
À éviter pour : placer du texte visible directement dans les réglages de Section ; utilisez des blocs de texte enfants.
Remarques
Le bloc possède sa racine <section>. Il rend tous les blocs enfants via le partial de bloc normal. Il n'a pas de contrat de texte traduisible ; le contenu visible doit se trouver dans les blocs enfants.
Container (`container`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/container.blade.php
HTML rendu
<div class="wb-container wb-container-lg wb-stack" data-wb-public-block-type="container">
<!-- child blocks -->
</div>Principales classes CSS / WebBlocks UI
wb-container, la classe de largeur issue de containerWidthClass(), la classe de flux issue de containerFlowClass().
Réglages -> correspondance classes / balisage
| Réglage | Valeur | Effet sur la sortie |
|---|---|---|
| settings.width | sm/md/lg/xl/full | containerWidthClass() ajoute wb-container-sm, wb-container-md, wb-container-lg, wb-container-xl ou wb-container-full. |
| settings.width | default/vide | Utilise la classe de base wb-container. |
| settings.flow | stack/default | containerFlowClass() ajoute wb-stack. |
| settings.flow | none | Aucune classe de flux n'est ajoutée. |
À utiliser pour / À éviter pour
À utiliser pour : le contrôle de la largeur à l'intérieur des sections, des navbars et des structures de page.
À éviter pour : utiliser Container comme carte visuelle ou surface de contenu.
Remarques
Le bloc possède sa racine <div>. Il rend directement les blocs enfants. Les réglages de largeur et de flux modifient les classes.
Grid (`grid`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/grid.blade.php
HTML rendu
<div class="wb-grid wb-grid-3 wb-gap-4" data-wb-public-block-type="grid">
<!-- child blocks -->
</div>Principales classes CSS / WebBlocks UI
wb-grid, la classe de colonnes issue de gridColumnsClass(), la classe d'écart issue de gridGapClass().
Réglages -> correspondance classes / balisage
| Réglage | Valeur | Effet sur la sortie |
|---|---|---|
| settings.columns | 2 | gridColumnsClass() ajoute wb-grid-2. |
| settings.columns | 4 | gridColumnsClass() ajoute wb-grid-4. |
| settings.columns | default/3/autre | gridColumnsClass() ajoute wb-grid-3. |
| settings.gap | 3/4/6 | gridGapClass() ajoute wb-gap-3, wb-gap-4 ou wb-gap-6. |
| settings.gap | default/vide | Aucune classe d'écart n'est ajoutée au-delà de wb-grid. |
À utiliser pour / À éviter pour
À utiliser pour : les mises en page multicolonnes de cartes, de médias ou de contenu.
À éviter pour : les simples rangées de boutons ou les éléments internes de la navbar ; utilisez Cluster.
Remarques
Le bloc possède sa racine <div>. Il rend directement les blocs enfants. Les réglages de colonnes et d'écart modifient les classes.
Cluster (`cluster`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/cluster.blade.php
HTML rendu
<div class="wb-cluster wb-cluster-2 wb-cluster-between wb-cluster-center" data-wb-public-block-type="cluster">
<!-- child blocks -->
</div>Principales classes CSS / WebBlocks UI
wb-cluster, plus les classes issues des helpers d'écart, de justification, d'alignement, de retour à la ligne et de largeur.
Réglages -> correspondance classes / balisage
| Réglage | Valeur | Effet sur la sortie |
|---|---|---|
| settings.gap | none | clusterGapClass() ajoute wb-cms-cluster-gap-none. |
| settings.gap | xs | clusterGapClass() ajoute wb-gap-1. |
| settings.gap | sm ou 2 | clusterGapClass() ajoute wb-cluster-2. |
| settings.gap | md ou 4 | clusterGapClass() ajoute wb-cluster-4. |
| settings.gap | lg ou 6 | clusterGapClass() ajoute wb-cluster-6. |
| settings.alignment | center/end/between | clusterAlignmentClass() ajoute wb-cluster-center, wb-cluster-end ou wb-cluster-between. |
| settings.items_alignment | start/end/stretch | clusterAlignClass() ajoute wb-items-start, wb-items-end ou wb-cms-items-stretch ; center n'ajoute aucune classe. |
| settings.wrap | nowrap | clusterWrapClass() ajoute wb-flex-nowrap. |
| settings.width | full | clusterWidthClass() ajoute wb-w-full. |
À utiliser pour / À éviter pour
À utiliser pour : la composition horizontale, les rangées d'actions et les éléments internes de la navbar.
À éviter pour : utiliser Grid pour une seule rangée horizontale de petits contrôles.
Remarques
Le bloc possède sa racine <div>. Il rend directement les blocs enfants. C'est la primitive normale de composition horizontale pour les boutons et les éléments internes de la navbar.
Content Header (`content_header`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/content_header.blade.php
HTML rendu
<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>Principales classes CSS / WebBlocks UI
wb-content-header, classe d'alignement facultative, wb-content-title, wb-content-subtitle, wb-content-meta, wb-content-meta-divider.
Réglages -> correspondance classes / balisage
| Réglage | Valeur | Effet sur la sortie |
|---|---|---|
| settings.alignment | left/center/right | contentHeaderAlignmentClass() ajoute wb-text-left, wb-text-center ou wb-text-right. |
| title | tout texte | Rendu sous la forme . |
| subtitle | tout texte | Rend lorsqu'il est présent. |
| meta | liste | Rend des spans .wb-content-meta séparés par .wb-content-meta-divider. |
À utiliser pour / À éviter pour
À utiliser pour : les introductions de page ou de section principale avec titre, chapeau et métadonnées.
À éviter pour : le contenu imbriqué dans des cartes ou les emplacements où le titre ne devrait pas être un H1.
Remarques
Le bloc possède sa racine <header>. Il rend toujours le titre sous forme de <h1>. Ce n'est pas un conteneur.
Hero (`hero`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/hero.blade.php
HTML rendu
<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>Principales classes CSS / WebBlocks UI
wb-card, wb-promo, éventuellement wb-card-muted ou wb-card-accent, wb-card-body, wb-promo-copy, wb-stack, wb-gap-3, éventuellement wb-text-center, wb-eyebrow, wb-promo-title, wb-promo-text, wb-promo-actions, wb-cluster, wb-btn.
Réglages -> correspondance classes / balisage
| Réglage | Valeur | Effet sur la sortie |
|---|---|---|
| variant | muted ou soft | Ajoute wb-card-muted à la carte promotionnelle. |
| variant | accent | Ajoute wb-card-accent à la carte promotionnelle. |
| variant | default/autre | Utilise wb-card wb-promo sans le modificateur muted/accent. |
| settings.layout | centered | Ajoute wb-text-center à .wb-promo-copy. |
| settings.title_tag | h1/h2/h3 | Hero accepte h1, h2 ou h3 ; CTA rend son titre en h2. |
| blocs button enfants | publiés avec libellé et URL | Rend jusqu'à deux actions gérées .wb-btn via _actions. |
À utiliser pour / À éviter pour
À utiliser pour : les introductions marketing en haut de page avec des boutons CTA gérés.
À éviter pour : le regroupement général de sections ou du contenu imbriqué arbitraire.
Remarques
Le bloc possède sa racine promotionnelle <section>. Il n'accepte que des blocs enfants button pour les actions gérées et rend au maximum deux enfants publiés dotés d'une URL et d'un libellé. settings.title_tag peut changer l'élément de titre en h1, h2 ou h3.
CTA (`cta`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/cta.blade.php
HTML rendu
<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>Principales classes CSS / WebBlocks UI
wb-card, wb-promo, éventuellement wb-card-muted ou 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.
Réglages -> correspondance classes / balisage
| Réglage | Valeur | Effet sur la sortie |
|---|---|---|
| variant | muted ou soft | Ajoute wb-card-muted à la carte promotionnelle. |
| variant | accent | Ajoute wb-card-accent à la carte promotionnelle. |
| variant | default/autre | Utilise wb-card wb-promo sans le modificateur muted/accent. |
| settings.layout | centered | Ajoute wb-text-center à .wb-promo-copy. |
| settings.title_tag | h2 fixé dans le moteur de rendu | Hero accepte h1, h2 ou h3 ; CTA rend son titre en h2. |
| blocs button enfants | publiés avec libellé et URL | Rend jusqu'à deux actions gérées .wb-btn via _actions. |
À utiliser pour / À éviter pour
À utiliser pour : les sections de conversion ciblées avec une courte rangée d'actions.
À éviter pour : les introductions de page entière ; utilisez Hero ou Content Header.
Remarques
Le bloc possède sa racine promotionnelle <section>. Il n'accepte que des blocs enfants button pour les actions gérées et rend au maximum deux enfants publiés dotés d'une URL et d'un libellé.
Card (`card`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/card.blade.php
HTML rendu
<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>Repli hérité sans régions :
<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>Principales classes CSS / WebBlocks UI
wb-card, wb-card-header, wb-card-body, wb-card-footer, éventuellement wb-stack, wb-gap-2, wb-m-0, wb-btn, wb-btn-secondary.
Réglages -> correspondance classes / balisage
| Réglage | Valeur | Effet sur la sortie |
|---|---|---|
| settings.layout_name | toute valeur enregistrée | Métadonnées d'administration/layout uniquement ; aucun effet sur les classes publiques dans le moteur de rendu actuel. |
| blocs enfants | enfants publiés | Rendus à l'intérieur de la carte ou de la racine de la région. |
| champs de carte hérités | anciennes lignes Card sans enfants de région | Le Card parent peut rendre un repli hérité minimal d'en-tête/corps/pied. |
À utiliser pour / À éviter pour
À utiliser pour : les éléments répétés encadrés avec des enfants Header, Body et Footer explicites.
À éviter pour : envelopper des sections entières de page ou imbriquer des cartes dans des cartes.
Notes
Le bloc possède son <article> racine. La structure normale repose sur les blocs de région enfants card_header, card_body et card_footer. Le chemin de repli ne s'applique qu'aux anciennes lignes de carte enregistrées sans enfants de région.
Card Header (`card_header`)
Source du renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/card_header.blade.php
HTML rendu
<div class="wb-card-header" data-wb-public-block-type="card-header">
<!-- child blocks -->
</div>Classes CSS principales / WebBlocks UI
wb-card-header.
Paramètres -> correspondance classes / balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| settings.layout_name | toute valeur enregistrée | Métadonnées d'administration / de layout uniquement ; aucun effet sur les classes publiques dans le renderer actuel. |
| blocs enfants | enfants publiés | Rendus à l'intérieur de la racine de la carte ou de la région. |
| champs de carte hérités | anciennes lignes Card sans enfants de région | Le Card parent peut rendre un repli minimal hérité en-tête / corps / pied. |
À utiliser pour / À éviter pour
À utiliser pour : la région d'en-tête à l'intérieur de Card.
À éviter pour : le placer en dehors de Card.
Notes
Le bloc possède la racine de sa région de carte et rend les blocs enfants. Il est prévu uniquement sous card.
Card Body (`card_body`)
Source du renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/card_body.blade.php
HTML rendu
<div class="wb-card-body" data-wb-public-block-type="card-body">
<!-- child blocks -->
</div>Classes CSS principales / WebBlocks UI
wb-card-body.
Paramètres -> correspondance classes / balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| settings.layout_name | toute valeur enregistrée | Métadonnées d'administration / de layout uniquement ; aucun effet sur les classes publiques dans le renderer actuel. |
| blocs enfants | enfants publiés | Rendus à l'intérieur de la racine de la carte ou de la région. |
| champs de carte hérités | anciennes lignes Card sans enfants de région | Le Card parent peut rendre un repli minimal hérité en-tête / corps / pied. |
À utiliser pour / À éviter pour
À utiliser pour : la région de contenu principal à l'intérieur de Card.
À éviter pour : le placer en dehors de Card.
Notes
Le bloc possède la racine de sa région de carte et rend les blocs enfants. Il est prévu uniquement sous card.
Card Footer (`card_footer`)
Source du renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/card_footer.blade.php
HTML rendu
<div class="wb-card-footer" data-wb-public-block-type="card-footer">
<!-- child blocks -->
</div>Classes CSS principales / WebBlocks UI
wb-card-footer.
Paramètres -> correspondance classes / balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| settings.layout_name | toute valeur enregistrée | Métadonnées d'administration / de layout uniquement ; aucun effet sur les classes publiques dans le renderer actuel. |
| blocs enfants | enfants publiés | Rendus à l'intérieur de la racine de la carte ou de la région. |
| champs de carte hérités | anciennes lignes Card sans enfants de région | Le Card parent peut rendre un repli minimal hérité en-tête / corps / pied. |
À utiliser pour / À éviter pour
À utiliser pour : les actions ou le contenu de pied complémentaire à l'intérieur de Card.
À éviter pour : le placer en dehors de Card.
Notes
Le bloc possède la racine de sa région de carte et rend les blocs enfants. Il est prévu uniquement sous card.
Header (`header`)
Source du renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/header.blade.php
HTML rendu
<h2 class="wb-text-center" id="section-anchor" data-wb-public-block-type="header">Heading</h2>Classes CSS principales / WebBlocks UI
Classe d'alignement optionnelle issue de headerAlignmentClass().
Paramètres -> correspondance classes / balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| variant | h1-h6 | Contrôle l'élément de titre. |
| variant | vide / autre | Vaut par défaut. |
| settings.alignment | left/center/right | headerAlignmentClass() ajoute wb-text-left, wb-text-center ou wb-text-right. |
| settings.anchor ou repli d'URL hérité | chaîne d'ancre sûre | Ajoute un attribut id pour les liens internes à la page et le sommaire. |
À utiliser pour / À éviter pour
À utiliser pour : les titres sémantiques au sein du contenu de la page.
À éviter pour : les introductions de page nécessitant un sous-titre ou des métadonnées ; utilisez Content Header.
Notes
Le bloc possède l'élément de titre lui-même (de h1 à h6). variant contrôle le niveau de titre, avec h2 par défaut. settings.anchor ou le repli d'URL hérité peuvent ajouter un id.
Plain Text (`plain_text`)
Source du renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/plain_text.blade.php
HTML rendu
<div class="wb-public-block" data-wb-public-block-type="plain-text">
<p class="wb-text-center">Plain copy.</p>
</div>Classes CSS principales / WebBlocks UI
Classe d'alignement optionnelle issue de plainTextAlignmentClass(). Le conteneur générique utilise wb-public-block.
Paramètres -> correspondance classes / balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| settings.alignment | left/center/right | plainTextAlignmentClass() ajoute wb-text-left, wb-text-center ou wb-text-right à . |
| content | texte | Échappé dans un paragraphe unique. |
| status | non publié | Le bloc n'est pas inclus par les requêtes normales de l'arbre des blocs publics. |
À utiliser pour / À éviter pour
À utiliser pour : de courts textes sans mise en forme.
À éviter pour : les paragraphes mis en forme, listes, liens ou titres ; utilisez Rich Text/Header.
Notes
Le bloc ne possède pas sa racine publique selon Block::ownsPublicRoot() : le rendu normal du slot l'enveloppe donc. Le renderer lui-même n'émet que <p>.
Rich Text (`rich-text`)
Source du renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/rich-text.blade.php
HTML rendu
<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>Classes CSS principales / WebBlocks UI
wb-rich-text, wb-rich-text-readable, plus generic wb-public-block.
Paramètres -> correspondance classes / balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| content | HTML riche sûr | SafeRichTextRenderer produit le contenu assaini à l'intérieur de wb-rich-text wb-rich-text-readable. |
| content | vide après assainissement | Le renderer n'émet rien. |
| HTML / classes non pris en charge | présents dans le contenu | Supprimés par le renderer sûr plutôt que convertis en classes publiques. |
À utiliser pour / À éviter pour
À utiliser pour : du texte courant avec mise en forme inline sûre, liens et listes simples.
À éviter pour : les titres, médias, tableaux, boutons ou balisage de layout brut.
Notes
Le renderer n'émet rien lorsque le contenu assaini est vide. Il ne possède pas la racine au niveau du slot. Le contenu est rendu via SafeRichTextRenderer.
Button Link (`button_link`)
Source du renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/button_link.blade.php
HTML rendu
<div class="wb-public-block" data-wb-public-block-type="button-link">
<a href="/start" class="wb-btn wb-btn-primary">Start</a>
</div>Classes CSS principales / WebBlocks UI
Classe issue de buttonLinkVariantClass(), généralement wb-btn plus une classe de variante.
Paramètres -> correspondance classes / balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| variant | secondary | buttonLinkVariantClass() produit wb-btn wb-btn-secondary. |
| variant | default / autre | buttonLinkVariantClass() produit wb-btn wb-btn-primary. |
| settings.url | URL sûre | Rend le href du lien ; une URL non sûre ou vide ne rend rien. |
| settings.target | _blank | Ajoute target="_blank" rel="noopener noreferrer". |
À utiliser pour / À éviter pour
À utiliser pour : des liens éditoriaux autonomes stylés en boutons.
À éviter pour : les actions gérées de Hero/CTA où le contrat d'enfant button est attendu.
Notes
Le renderer n'émet rien sans URL sûre. La cible _blank ajoute target="_blank" et rel="noopener noreferrer". Il reçoit normalement le conteneur générique de bloc public, sauf s'il est imbriqué dans un parent possédant la racine.
Image (`image`)
Source du renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/image.blade.php
HTML rendu
<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>Classes CSS principales / WebBlocks UI
wb-stack, wb-gap-2.
Paramètres -> correspondance classes / balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| media_id | média sélectionné | Rend avec en utilisant l'URL et les dimensions du média. |
| url | URL sûre | N'enveloppe que l'image dans un lien. |
| caption | texte traduit | Rend lorsqu'elle est présente. |
| texte alternatif | traduit ou repli du média | Rend l'attribut alt de l'image. |
À utiliser pour / À éviter pour
À utiliser pour : des images sémantiques uniques avec légende ou lien optionnels.
À éviter pour : les collections d'images ; utilisez Gallery.
Notes
Le bloc possède sa racine <figure> et n'émet rien sans média. Le lien optionnel n'enveloppe que l'image lorsque l'URL est sûre (http, https, /, #, mailto ou tel).
Gallery (`gallery`)
Source du renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/gallery.blade.php
HTML rendu
<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>Classes CSS principales / WebBlocks UI
wb-gallery, wb-gallery--{variant}, wb-gallery--cols-{n}, wb-gallery--gap-{n}, wb-gallery--aspect-{ratio}, wb-gallery-grid, wb-gallery-item, wb-gallery-trigger or wb-gallery-link, wb-gallery-media, wb-gallery-caption, wb-gallery-caption-title, wb-gallery-caption-meta.
Paramètres -> correspondance classes / balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| settings.variant | grid/masonry/masonary/collage | galleryVariant() ajoute wb-gallery--grid, wb-gallery--masonry ou wb-gallery--collage ; masonary est normalisé en masonry. |
| settings.columns | 2/3/4/5 | galleryColumns() ajoute wb-gallery--cols-{n} ; la valeur par défaut est 3. |
| settings.gap | none/sm/md/lg | galleryGap() ajoute wb-gallery--gap-{value} ; la valeur par défaut est md. |
| settings.aspect_ratio | auto/square/4:3/16:9/portrait | galleryAspectRatio() ajoute wb-gallery--aspect-{value}, le : étant rendu par -. |
| settings.captions_mode | hidden/below/overlay/on-hover | Contrôle les légendes en dessous ou le balisage de légende en surimpression ; la valeur par défaut est below. |
| settings.overlay_mode | none/gradient/solid | Contrôle le modificateur de légende en surimpression ; la valeur par défaut est gradient. |
| settings.lightbox_enabled | true/default | Utilise .wb-gallery-trigger et enregistre gallery-viewer dans PublicOverlayRegistry. |
| settings.lightbox_enabled | false | Utilise .wb-gallery-link sans fenêtre modale de visionneuse. |
À utiliser pour / À éviter pour
À utiliser pour : des collections d'images structurées avec légendes et lightbox optionnelle.
À éviter pour : le texte d'introduction de section ; placez Content Header/Rich Text avant Gallery.
Notes
Le bloc possède sa racine de galerie et enregistre le HTML de gallery-viewer dans PublicOverlayRegistry lorsque la lightbox est activée. Variantes, colonnes, espacement, ratio d'aspect, légendes, mode de surimpression et paramètres de lightbox modifient les attributs et les classes. Les éléments hérités basés sur settings restent lisibles.
Columns (`columns`)
Source du renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/columns.blade.php
HTML rendu
<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>Classes CSS principales / WebBlocks UI
wb-stack, wb-gap-4, wb-gap-1, wb-text-muted, wb-gap-2, wb-m-0, wb-grid, wb-grid-2, wb-grid-3, wb-grid-4.
Paramètres -> correspondance classes / balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| variant | cards | Les éléments enfants sont rendus en style carte. |
| variant | stats | Les éléments enfants sont rendus en style statistique. |
| variant | plain/default | Les éléments enfants sont rendus en style pile simple. |
| nombre d'enfants | 1 | Utilise wb-stack wb-gap-3 pour la mise en page de l'élément. |
| nombre d'enfants | 2/3/4+ | Utilise wb-grid wb-grid-2, wb-grid-3 ou wb-grid-4. |
À utiliser pour / À éviter pour
À utiliser pour : des groupes structurés de fonctionnalités, de statistiques ou de colonnes simples.
À éviter pour : les grilles de mise en page arbitraires où Grid + Card est plus clair.
Notes
Le bloc possède son <section> racine. Le nombre d'enfants détermine la classe de grille : un enfant utilise wb-stack wb-gap-3, deux wb-grid wb-grid-2, trois wb-grid wb-grid-3, sinon wb-grid wb-grid-4. variant est transmis aux renderers enfants column_item/feature-item.
Column Item (`column_item`)
Source du renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/column_item.blade.php
HTML rendu
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>Classes CSS principales / WebBlocks UI
wb-card, wb-card-body, wb-stack, wb-gap-2, wb-no-decoration, wb-m-0, wb-stat, wb-stat-label, wb-stat-value, wb-stat-delta.
Paramètres -> correspondance classes / balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| variante du columns parent | cards | Rend .wb-card > .wb-card-body. |
| variante du columns parent | stats | Rend .wb-stat avec libellé / valeur / détail. |
| variante du columns parent | plain/default | Rend .wb-stack wb-gap-2. |
| url | URL sûre | Les variantes cards/plain enveloppent le contenu dans a.wb-no-decoration ; stats ne rend aucun lien dans le renderer actuel. |
À utiliser pour / À éviter pour
À utiliser pour : les enfants de Columns.
À éviter pour : du contenu de page autonome ; utilisez Card ou Stat Card lorsqu'il est indépendant.
Notes
Ce renderer change sensiblement selon la variante du columns parent. Il ne possède pas de racine au niveau du slot et est normalement rendu par le parent.
Feature Grid (`feature-grid`)
Source du renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/feature-grid.blade.php
HTML rendu
<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>Classes CSS principales / WebBlocks UI
Délègue à Columns : wb-stack, wb-gap-4, wb-grid, wb-card et les classes associées de column_item.
Paramètres -> correspondance classes / balisage
| Réglage | Valeur | Effet sur la sortie |
|---|---|---|
| comportement du moteur de rendu | alias délégué | Délègue à un chemin de rendu existant ; la correspondance exacte des réglages suit le délégué là où elle est visible. |
| pages nouvelles conseillées | n/a | Préférez le bloc canonique indiqué dans les Remarques plutôt que ce bloc alias/de compatibilité. |
À utiliser pour / À éviter pour
À utiliser pour : du contenu feature-grid hérité qui existe déjà.
À éviter pour : les nouvelles pages construites à la main ; utilisez Columns avec Column Item ou Grid avec Card.
Remarques
Le moteur de rendu réplique le bloc, filtre les enfants vers feature-item et le column_item rétrocompatible, force variant = cards et inclut le moteur de rendu de Columns. D'après l'assistant, il ne possède pas la racine publique : le rendu de premier niveau peut donc ajouter wb-public-block.
Feature Item (`feature-item`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/feature-item.blade.php
HTML rendu
<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>Principales classes CSS / WebBlocks UI
Délègue à la variante cards de Column Item : wb-card, wb-card-body, wb-stack, wb-gap-2, wb-m-0.
Settings -> correspondance classes / balisage
| Réglage | Valeur | Effet sur la sortie |
|---|---|---|
| comportement du moteur de rendu | alias délégué | Délègue à un chemin de rendu existant ; la correspondance exacte des réglages suit le délégué là où elle est visible. |
| pages nouvelles conseillées | n/a | Préférez le bloc canonique indiqué dans les Remarques plutôt que ce bloc alias/de compatibilité. |
À utiliser pour / À éviter pour
À utiliser pour : les enfants hérités de Feature Grid.
À éviter pour : de nouvelles cartes de fonctionnalité autonomes ; utilisez les régions de Card ou Column Item.
Remarques
Ce moteur de rendu inclut column_item avec columnsVariant = cards. Il est prévu comme enfant de feature-grid.
Accordion (`accordion`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/accordion.blade.php
HTML rendu
<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>Principales classes CSS / WebBlocks UI
wb-stack, wb-gap-3, wb-gap-1, wb-stack-2, plus le générique wb-public-block.
Settings -> correspondance classes / balisage
| Réglage | Valeur | Effet sur la sortie |
|---|---|---|
| title/subtitle | présent | Rend le titre et le texte d'introduction au-dessus des éléments. |
| lignes enfants | publiées avec titre et contenu | Rend chacune comme élément dépliant .... |
| lignes enfants | sans titre ou sans contenu | Ignorées par la collecte d'éléments actuelle. |
| conteneur | bloc de premier niveau non racine | Reçoit du moteur de rendu de slot le conteneur générique .wb-public-block. |
À utiliser pour / À éviter pour
À utiliser pour : les groupes de FAQ ou de contenus dépliants.
À éviter pour : les cartes question/réponse isolées ; utilisez FAQ uniquement pour les lignes enfants de compatibilité.
Remarques
Le bloc rend les lignes enfants comme éléments d'accordéon lorsque chaque enfant possède un titre et un contenu. Il ne possède pas la racine au niveau du slot. Page Converter écrit les éléments details dans des lignes faq lorsque le contrat est disponible, et accordion consomme le titre et le contenu des enfants.
FAQ (`faq`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/faq.blade.php
HTML rendu
<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>Principales classes CSS / WebBlocks UI
wb-card, wb-card-muted, wb-card-body, wb-stack, wb-gap-2, wb-m-0, plus le générique wb-public-block.
Settings -> correspondance classes / balisage
| Réglage | Valeur | Effet sur la sortie |
|---|---|---|
| title/content | présent | Rend une carte atténuée avec la question et la réponse. |
| enfants | enfants publiés | Rend une zone supplémentaire de blocs enfants wb-stack wb-gap-4. |
| usage comme enfant d'Accordion | dans Accordion | Accordion consomme le titre et le contenu de la ligne FAQ comme contenu de l'élément dépliant. |
À utiliser pour / À éviter pour
À utiliser pour : les lignes enfants des éléments d'accordéon et les cartes héritées à une seule question/réponse.
À éviter pour : de nouvelles sections FAQ autonomes ; utilisez Accordion comme parent.
Remarques
FAQ est un moteur de rendu de carte question/réponse unique. Si des enfants existent, il les rend également dans un bloc wb-stack wb-gap-4 supplémentaire.
Navbar (`sticky-navbar`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/sticky-navbar.blade.php
HTML rendu
<nav class="wb-navbar wb-navbar--static" data-wb-public-block-type="sticky-navbar">
<!-- navbar child blocks -->
</nav>Principales classes CSS / WebBlocks UI
wb-navbar, plus une classe optionnelle issue de navbarPositionClass() telle que wb-navbar--static.
Settings -> correspondance classes / balisage
| Réglage | Valeur | Effet sur la sortie |
|---|---|---|
| settings.sticky_mode | sticky/default | N'utilise que la base wb-navbar pour le comportement collant. |
| settings.sticky_mode | static | navbarPositionClass() ajoute wb-navbar--static. |
| settings.sticky_mode | fixed | navbarPositionClass() ajoute wb-fixed. |
| blocs enfants | enfants autorisés et publiés | Rendus directement dans . |
À utiliser pour / À éviter pour
À utiliser pour : les arbres de blocs d'en-tête et de navigation publics partagés.
À éviter pour : créer une coque d'en-tête personnalisée autour du balisage de la navbar.
Remarques
Le libellé du bloc est Navbar, mais le slug persisté et le fichier du moteur de rendu sont sticky-navbar. Il possède sa racine externe <nav> et rend les blocs enfants. Les types d'enfants autorisés incluent container, cluster, header, plain_text, rich-text, button_link, navbar-brand, navbar-navigation, header-actions et search-form.
Navbar Brand (`navbar-brand`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/navbar-brand.blade.php
HTML rendu
<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>Principales classes CSS / WebBlocks UI
wb-navbar-brand, wb-navbar-identity, wb-navbar-brand-note, plus le générique wb-public-block sauf s'il est imbriqué dans un parent qui possède la racine.
Settings -> correspondance classes / balisage
| Réglage | Valeur | Effet sur la sortie |
|---|---|---|
| settings.url | URL sûre | L'URL enregistrée l'emporte pour le lien de la marque. |
| settings.url | vide | Se rabat sur le chemin d'accueil du site, puis sur /. |
| settings.target | _blank | Ajoute target="_blank" rel="noopener noreferrer". |
| settings.aria_label | texte | Utilisé comme libellé accessible quand aucun texte visible n'est rendu. |
| media_id | média du logo | Rend l'image de marque dans wb-navbar-brand. |
À utiliser pour / À éviter pour
À utiliser pour : l'identité du site dans Navbar.
À éviter pour : des mises en page d'en-tête complètes ; composez avec Navbar/Container/Cluster.
Remarques
Le bloc ne possède pas la coque externe de la navbar. L'URL enregistrée l'emporte, puis le chemin d'accueil du site, puis /. La sortie logo seul utilise aria-label lorsque aucun texte n'est rendu.
Navbar Navigation (`navbar-navigation`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/navbar-navigation.blade.php
HTML rendu
<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 groupe déroulant :
<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>Principales classes CSS / WebBlocks UI
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 -> correspondance classes / balisage
| Réglage | Valeur | Effet sur la sortie |
|---|---|---|
| settings.menu_key | clé de menu NavigationItem connue | Sélectionne l'arbre de navigation du CMS à rendre. |
| title | texte | Utilisé comme libellé ARIA partagé lorsqu'il est présent. |
| élément de groupe de navigation | groupe avec enfants | Rend le déclencheur déroulant de WebBlocks UI et .wb-dropdown-menu. |
| élément actif | correspond à la page courante | Ajoute is-active et aria-current="page". |
À utiliser pour / À éviter pour
À utiliser pour : les liens de menu gérés par le CMS dans Navbar.
À éviter pour : les rangées de boutons manuelles ; utilisez Button Link ou Cluster.
Remarques
Le slug réel du cœur est navbar-navigation. Il rend les arbres NavigationItem du CMS à partir de la clé de menu sélectionnée. Il ne possède pas la coque externe de la navbar. Il utilise les hooks de menu déroulant de WebBlocks UI pour les menus de groupe et pour le menu mobile.
Header Actions (`header-actions`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/header-actions.blade.php
HTML rendu
<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>Principales classes CSS / WebBlocks UI
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 -> correspondance classes / balisage
| Réglage | Valeur | Effet sur la sortie |
|---|---|---|
| settings.show_search | false | Masque l'action de recherche publique. |
| settings.show_mode_toggle | false | Masque l'action de bascule de mode. |
| settings.show_accent_toggle | false | Masque le menu déroulant accent/thème. |
| réglages par défaut | vide/true | Rend toutes les actions. |
À utiliser pour / À éviter pour
À utiliser pour : les utilitaires standard de recherche et de thème dans les en-têtes.
À éviter pour : des CTA métier personnalisés ; utilisez Button Link/Button.
Remarques
Les réglages peuvent masquer la recherche, la bascule de mode ou le menu accent/thème. Ce bloc ne possède pas de racine au niveau du slot. Il utilise les hooks de menu déroulant de WebBlocks UI et les hooks de recherche publique du CMS.
Search Form (`search-form`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/search-form.blade.php
HTML rendu
<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>Principales classes CSS / WebBlocks UI
wb-cluster, wb-cluster-2, wb-stack, wb-gap-1, wb-flex-1, wb-input, wb-btn, wb-btn-primary ou wb-btn-secondary.
Settings -> correspondance classes / balisage
| Réglage | Valeur | Effet sur la sortie |
|---|---|---|
| variant | secondary | Le bouton d'envoi utilise wb-btn wb-btn-secondary. |
| variant | primary/default | Le bouton d'envoi utilise wb-btn wb-btn-primary. |
| settings.show_button | false | Omet le bouton d'envoi. |
| route de recherche indisponible | n/a | Le moteur de rendu n'émet rien. |
À utiliser pour / À éviter pour
À utiliser pour : les formulaires de recherche du site.
À éviter pour : les formulaires de filtrage ou les intégrations de recherche externes personnalisées.
Remarques
Le moteur de rendu n'émet rien si le résolveur de routes ne parvient pas à produire un chemin de recherche. settings.show_button contrôle si le bouton d'envoi est rendu.
Stat Card (`stat-card`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/stat-card.blade.php
HTML rendu
<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>Principales classes CSS / WebBlocks UI
wb-stat, wb-stat-label, wb-stat-value, wb-stat-detail, wb-link, plus le générique wb-public-block.
Settings -> correspondance classes / balisage
| Réglage | Valeur | Effet sur la sortie |
|---|---|---|
| subtitle | texte | Rend .wb-stat-label. |
| title | texte | Rend .wb-stat-value. |
| content | texte | Rend .wb-stat-detail. |
| url | URL sûre | Ajoute un lien Learn more avec .wb-link. |
À utiliser pour / À éviter pour
À utiliser pour : les cartes de métrique autonomes.
À éviter pour : les groupes de plusieurs métriques, où la variante stats de Columns est plus compacte.
Remarques
C'est un bloc de contenu qui ne possède pas la racine. Il utilise subtitle comme libellé, title comme valeur, content comme détail et une URL canonique optionnelle pour un lien Learn more.
Code (`code`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/code.blade.php
HTML rendu
<div class="wb-public-block" data-wb-public-block-type="code">
<pre><code data-language="php">php artisan test</code></pre>
</div>Principales classes CSS / WebBlocks UI
Le moteur de rendu de code n'émet lui-même aucune classe WebBlocks UI. Le conteneur générique utilise wb-public-block.
Settings -> correspondance classes / balisage
| Réglage | Valeur | Effet sur la sortie |
|---|---|---|
| settings.language | texte | Nettoyé en data-language sur . |
| settings.lang | texte | Repli hérité pour data-language. |
| content | vide | Le moteur de rendu n'émet rien. |
À utiliser pour / À éviter pour
À utiliser pour : les extraits de code.
À éviter pour : de la prose mise en forme ou des listes de commandes ; utilisez Rich Text/List selon le cas.
Remarques
Le moteur de rendu s'arrête immédiatement lorsque le contenu est vide. settings.language ou settings.lang devient une valeur data-language nettoyée.
Download (`download`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/download.blade.php
HTML rendu
<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>Principales classes CSS / WebBlocks UI
wb-stack, wb-gap-2, wb-btn, wb-btn-primary, wb-btn-secondary, wb-btn-ghost.
Settings -> correspondance classes / balisage
| Réglage | Valeur | Effet sur la sortie |
|---|---|---|
| variant | primary | La classe du bouton est wb-btn wb-btn-primary. |
| variant | ghost | La classe du bouton est wb-btn wb-btn-ghost. |
| variant | secondary/default/autre | La classe du bouton est wb-btn wb-btn-secondary. |
| media_id | média de téléchargement | L'URL du média est utilisée ; sans média, le moteur de rendu n'émet rien. |
| subtitle | texte | Rend un d'aide. |
À utiliser pour / À éviter pour
À utiliser pour : les CTA de téléchargement adossés à un média.
À éviter pour : les cartes de fichiers externes ; utilisez File quand aucun média n'existe.
Remarques
Le bloc possède son <div> racine. Il n'émet que lorsque downloadAsset() dispose d'une URL. variant change la classe du bouton.
File (`file`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/file.blade.php
HTML rendu
<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>Principales classes CSS / WebBlocks UI
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.
Paramètres -> carte des classes / du balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| media_id | média sélectionné | L'URL du média l'emporte sur l'URL externe. |
| url | URL externe sûre | Utilisée uniquement lorsqu'aucune URL de média n'est disponible. |
| title/content | texte | Rendu comme texte visible de la carte lorsqu'il est présent. |
| source unavailable | n/d | Le moteur de rendu ne produit rien, ou aucun contrôle lisible, selon la disponibilité de la source. |
À utiliser pour / À éviter pour
À utiliser pour : des cartes de fichier avec un média ou une URL externe vérifiée en repli.
À éviter pour : de simples téléchargements de médias où Download suffit.
Remarques
Le bloc possède sa carte racine. L'URL du média l'emporte sur une URL externe sûre en http, https ou mailto. Le libellé du bouton est Download pour les médias et Open file pour une URL externe.
Video (`video`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/video.blade.php
HTML généré
<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>Principales classes CSS / 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.
Paramètres -> carte des classes / du balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| media_id | média sélectionné | L'URL du média l'emporte sur l'URL externe. |
| url | URL externe sûre | Utilisée uniquement lorsqu'aucune URL de média n'est disponible. |
| title/content | texte | Rendu comme texte visible de la carte lorsqu'il est présent. |
| source unavailable | n/d | Le moteur de rendu ne produit rien, ou aucun contrôle lisible, selon la disponibilité de la source. |
À utiliser pour / À éviter pour
À utiliser pour : des vidéos téléversées ou des intégrations sûres YouTube/Vimeo.
À éviter pour : du HTML iframe arbitraire ; n'utilisez Trusted HTML qu'en repli vérifié.
Remarques
Le bloc possède sa carte racine. Les médias téléversés sont rendus par un <video> natif. Les URL YouTube et Vimeo sûres produisent des intégrations iframe. Les autres URL HTTP sûres produisent un bouton Open video.
Audio (`audio`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/audio.blade.php
HTML généré
<div class="wb-card wb-card-muted" data-wb-public-block-type="audio">
<div class="wb-card-body wb-stack wb-gap-3">
<div class="wb-stack wb-gap-1">
<strong>Audio title</strong>
<p class="wb-m-0">Audio copy.</p>
</div>
<audio controls preload="metadata">
<source src="/media/audio.mp3">
</audio>
</div>
</div>Principales classes CSS / WebBlocks UI
wb-card, wb-card-muted, wb-card-body, wb-stack, wb-gap-3, wb-gap-1, wb-m-0.
Paramètres -> carte des classes / du balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| media_id | média sélectionné | L'URL du média l'emporte sur l'URL externe. |
| url | URL externe sûre | Utilisée uniquement lorsqu'aucune URL de média n'est disponible. |
| title/content | texte | Rendu comme texte visible de la carte lorsqu'il est présent. |
| source unavailable | n/d | Le moteur de rendu ne produit rien, ou aucun contrôle lisible, selon la disponibilité de la source. |
À utiliser pour / À éviter pour
À utiliser pour : de l'audio téléversé ou des médias audio externes sûrs.
À éviter pour : des intégrations de podcast ou de lecteur nécessitant un balisage non pris en charge ; envisagez Trusted HTML en repli.
Remarques
Le bloc possède sa carte racine. L'URL du média téléversé l'emporte sur une URL HTTP externe sûre.
Table (`table`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/table.blade.php
HTML généré
<div class="wb-public-block" data-wb-public-block-type="table">
<div class="wb-stack wb-gap-2">
<h3>Table title</h3>
<div class="wb-table-wrap">
<table class="wb-table">
<thead>
<tr><th>Name</th><th>Value</th></tr>
</thead>
<tbody>
<tr><td>One</td><td>Two</td></tr>
</tbody>
</table>
</div>
</div>
</div>Principales classes CSS / WebBlocks UI
wb-stack, wb-gap-2, wb-table-wrap, wb-table, plus le générique wb-public-block.
Paramètres -> carte des classes / du balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| variant | plain | Aucune ligne d'en-tête ; toutes les lignes sont rendues dans . |
| variant | default/other | La première ligne est rendue dans . |
| settings.rows | array | La source de lignes héritée l'emporte lorsqu'elle est présente. |
| content | lignes séparées par des barres verticales | Utilisé comme source de lignes lorsque settings.rows est vide. |
À utiliser pour / À éviter pour
À utiliser pour : des tableaux structurés simples.
À éviter pour : des grilles de mise en page ou des tableaux de données interactifs complexes.
Remarques
Les lignes proviennent du settings.rows hérité lorsqu'il existe, sinon des lignes de contenu traduit séparées par des barres verticales. variant = plain désactive le comportement de ligne d'en-tête.
Quote (`quote`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/quote.blade.php
HTML généré
<div class="wb-public-block" data-wb-public-block-type="quote">
<blockquote class="wb-stack wb-gap-2">
<p class="wb-m-0">Quote text.</p>
<footer>Name | Role</footer>
</blockquote>
</div>Variante testimonial :
<div class="wb-card wb-card-muted">
<div class="wb-card-body">
<blockquote class="wb-stack wb-gap-2">...</blockquote>
</div>
</div>Principales classes CSS / WebBlocks UI
wb-stack, wb-gap-2, wb-m-0, éventuellement wb-card, wb-card-muted, wb-card-body, plus le générique wb-public-block.
Paramètres -> carte des classes / du balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| variant | testimonial | Enveloppe le blockquote dans wb-card wb-card-muted > .wb-card-body. |
| variant | default/other | Produit un simple. |
| subtitle | texte | Rendu dans avec le contexte title/content. |
À utiliser pour / À éviter pour
À utiliser pour : des citations et des témoignages.
À éviter pour : des encadrés génériques ou des cartes.
Remarques
Le moteur de rendu n'ajoute pas lui-même data-wb-public-block-type ; l'enveloppe générique provient du rendu du slot de premier niveau.
Link List (`link-list`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/link-list.blade.php
HTML généré
<div class="wb-public-block" data-wb-public-block-type="link-list">
<div class="wb-stack wb-gap-3">
<div class="wb-stack wb-gap-1">
<div class="wb-link-list-meta">Meta</div>
<h2>Links</h2>
<p>Description.</p>
</div>
<div class="wb-link-list">
<a href="/item" class="wb-link-list-item">...</a>
</div>
</div>
</div>Principales classes CSS / WebBlocks UI
wb-stack, wb-gap-3, wb-gap-1, wb-link-list, wb-link-list-meta.
Paramètres -> carte des classes / du balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| title/subtitle/content | texte | Produit une pile d'introduction facultative au-dessus des liens. |
| enfant link-list-item | enfants publiés | Rend les enfants dans .wb-link-list. |
| aucun enfant | n/d | Le moteur de rendu n'a aucune ligne de lien à afficher. |
À utiliser pour / À éviter pour
À utiliser pour : des listes structurées de liens.
À éviter pour : des menus de navigation complets ; utilisez Navbar/Navigation Auto selon le cas.
Remarques
Le bloc ne rend que les enfants link-list-item publiés. Il ne possède pas la racine au niveau du slot.
Link List Item (`link-list-item`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/link-list-item.blade.php
HTML généré
<a href="/item" class="wb-link-list-item">
<div class="wb-link-list-main">
<span class="wb-link-list-title">Title</span>
<span class="wb-link-list-meta">Meta</span>
</div>
<div class="wb-link-list-desc">Description.</div>
</a>Principales classes CSS / WebBlocks UI
wb-link-list-item, wb-link-list-main, wb-link-list-title, wb-link-list-meta, wb-link-list-desc.
Paramètres -> carte des classes / du balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| url | URL sûre | Requis pour toute sortie ; devient le href de l'ancre. |
| title | texte | Requis pour toute sortie ; rend .wb-link-list-title. |
| subtitle | texte | Rend .wb-link-list-meta. |
| content | texte | Rend .wb-link-list-desc. |
À utiliser pour / À éviter pour
À utiliser pour : les enfants de Link List.
À éviter pour : des boutons autonomes ou des éléments de menu de navigation.
Remarques
Le moteur de rendu ne produit une sortie que lorsqu'une URL sûre et un titre existent tous les deux. Il est prévu comme enfant de link-list.
Navigation Auto (`navigation-auto`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/navigation-auto.blade.php
HTML généré
<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 de pied de page / mentions légales :
<ul class="wb-stack wb-gap-1">
<li class="wb-stack wb-gap-1"><a href="/privacy" class="wb-link">Privacy</a></li>
</ul>Principales classes CSS / 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.
Paramètres -> carte des classes / du balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| settings.menu_key ou settings.location | clé de menu connue | Sélectionne le menu de navigation du CMS ; l'assistant se rabat sur primary/footer selon le slot ou le sous-titre. |
| menu footer/mentions légales | clé footer ou legal | Produit une liste empilée de .wb-link. |
| autre menu | primary/default | Produit des liens racine groupés de style bouton. |
| élément actif | correspondance avec la page courante | Ajoute les classes current/active là où le moteur de rendu les résout. |
À utiliser pour / À éviter pour
À utiliser pour : le rendu de compatibilité des menus du CMS.
À éviter pour : de nouveaux en-têtes partagés, où l'enfant prévu est Navbar Navigation.
Remarques
Le moteur de rendu résout un menu de navigation du CMS par sa clé. Les menus de pied de page et de mentions légales produisent des liens empilés ; les autres menus produisent des liens racine groupés de style bouton.
TOC (`toc`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/toc.blade.php
HTML généré
<div class="wb-public-block" data-wb-public-block-type="toc">
<div class="wb-stack wb-gap-2">
<strong>Contents</strong>
<div class="wb-link-list">
<a class="wb-link-list-item" href="#intro">
<div class="wb-link-list-main">
<span class="wb-link-list-title">Intro</span>
</div>
<div class="wb-link-list-desc">Jump to section</div>
</a>
</div>
</div>
</div>Principales classes CSS / 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.
Paramètres -> carte des classes / du balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| title | texte | Rend le libellé du titre ; le libellé visible par défaut est celui du comportement actuel du moteur de rendu. |
| blocs Header de la même page | publiés et avec ancres | Génère des liens .wb-link-list-item. |
| variante de header | h3 | La description indique Jump to subsection ; les autres indiquent Jump to section. |
| aucun titre éligible | n/d | Le moteur de rendu ne produit rien. |
À utiliser pour / À éviter pour
À utiliser pour : des sommaires de la même page issus de blocs Header ancrés.
À éviter pour : des listes de liens manuelles ; utilisez Link List.
Remarques
Le moteur de rendu lit les blocs Header publiés et ancrés du même arbre de page. Il ne produit rien lorsqu'aucun titre éligible n'existe.
Alert (`alert`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/alert.blade.php
HTML généré
<div class="wb-public-block" data-wb-public-block-type="alert">
<div class="wb-alert wb-alert-info">
<h3 class="wb-alert-title">Notice</h3>
<p>Message.</p>
</div>
</div>Principales classes CSS / WebBlocks UI
wb-alert, la classe de variante issue de alertVariantClass(), wb-alert-title, plus le générique wb-public-block.
Paramètres -> carte des classes / du balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| settings.variant | success/warning/danger | alertVariantClass() ajoute wb-alert-success, wb-alert-warning ou wb-alert-danger. |
| settings.variant | info/default/other | Ajoute wb-alert-info. |
| title | texte | Rend .wb-alert-title. |
| content | texte | Rend le corps de l'alerte. |
À utiliser pour / À éviter pour
À utiliser pour : des avis en ligne destinés à l'utilisateur.
À éviter pour : des promotions marketing ; utilisez CTA/Hero.
Remarques
Le bloc ne possède pas la racine au niveau du slot. La variante partagée pilote la classe de ton de l'alerte.
Contact Form (`contact_form`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/contact_form.blade.php
HTML généré
<div class="wb-public-block" data-wb-public-block-type="contact-form">
<section class="wb-card wb-public-contact-form-card" id="contact-form-1">
<div class="wb-card-body wb-stack wb-gap-4">
<div class="wb-stack wb-gap-2">
<h2>Contact</h2>
<p>Intro copy.</p>
</div>
<form method="POST" action="/contact-messages" class="wb-stack wb-gap-3">
<input type="hidden" name="_token" value="csrf-token">
<input type="hidden" name="block_id" value="1">
<input type="hidden" name="page_id" value="10">
<input type="hidden" name="source_url" value="/contact">
<input type="hidden" name="submitted_at" value="1770000000">
<input type="hidden" name="_form_check_name" value="signed-generated-field-name">
<div class="wb-form-check" inert aria-hidden="true">
<label for="contact-form-check-1">Leave this field empty</label>
<input id="contact-form-check-1" type="text" name="form_check_generatedtoken" tabindex="-1" autocomplete="off">
</div>
<div class="wb-grid wb-grid-2">
<div class="wb-stack wb-gap-1">
<label class="wb-label">Name</label>
<input class="wb-input" required>
</div>
<div class="wb-stack wb-gap-1">
<label class="wb-label">Email</label>
<input class="wb-input" type="email" required>
</div>
</div>
<textarea class="wb-textarea" rows="7" required></textarea>
<div class="wb-cluster wb-cluster-between wb-cluster-2">
<span class="wb-text-sm wb-text-muted">Your message is stored first...</span>
<button class="wb-btn wb-btn-primary">Send message</button>
</div>
</form>
</div>
</section>
</div>Principales classes CSS / 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.
Paramètres -> carte des classes / du balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| destinataire de contact du site | configuré | Le formulaire poste vers contact-messages.store avec le contexte masqué de site et de page. |
| erreurs de validation | présentes | Produit wb-alert wb-alert-danger et des messages au niveau des champs. |
| libellés d'envoi/de succès dans settings | paramètres traduits hérités | Sortis par le résolveur/écrivain de traductions ; la sortie visible suit les champs de bloc traduits actuels. |
Le formulaire public est une sortie Blade native, et non du contenu Trusted HTML. Les envois depuis le navigateur exigent le CSRF, incluent le champ de contrôle anti-spam généré et appartenant au CMS, valident les champs obligatoires côté serveur, enregistrent d'abord les messages légitimes puis seulement tentent la notification par e-mail selon l'ordre de repli des destinataires documenté. Le champ de contrôle est généré par le moteur de rendu et ne fait pas partie de la saisie normale du visiteur.
À utiliser pour / À éviter pour
À utiliser pour : le flux de messages de contact propre au produit.
À éviter pour : des formulaires HTML bruts ou des intégrations tierces, sauf s'ils sont validés en tant que Trusted HTML.
Remarques
Le moteur de rendu inclut des champs masqués, le CSRF, le balisage anti-spam .wb-form-check avec inert et aria-hidden="true", des erreurs de validation ciblées, et poste vers contact-messages.store. L'ancien champ website ne fait plus partie du contrat du moteur de rendu public.
Breadcrumb (`breadcrumb`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/breadcrumb.blade.php
HTML généré
<div class="wb-public-block" data-wb-public-block-type="breadcrumb">
<nav class="wb-breadcrumb" aria-label="Breadcrumb">
<ol class="wb-breadcrumb-list">
<li class="wb-breadcrumb-item">
<a class="wb-breadcrumb-link" href="/">Home</a>
</li>
<li class="wb-breadcrumb-item">
<span class="wb-breadcrumb-current" aria-current="page">Current page</span>
</li>
</ol>
</nav>
</div>Principales classes CSS / WebBlocks UI
wb-breadcrumb, wb-breadcrumb-list, wb-breadcrumb-item, wb-breadcrumb-link, wb-breadcrumb-current.
Paramètres -> carte des classes / du balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| settings.home_label | texte | Remplace le libellé du fil d'accueil. |
| settings.include_current | false | Omet le fil de la page courante. |
| settings.include_current | true/default | Inclut le fil de la page courante. |
| page d'accueil | include_current true | Ne produit que le fil courant. |
À utiliser pour / À éviter pour
À utiliser pour : la navigation hiérarchique entre les pages.
À éviter pour : la navigation principale du site.
Remarques
Le libellé d'accueil et l'inclusion de la page courante sont pilotés par les paramètres. Sur la page d'accueil, seul le fil courant est produit lorsque include_current vaut true.
Sidebar Brand (`sidebar-brand`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/sidebar-brand.blade.php
HTML généré
<div class="wb-public-block" data-wb-public-block-type="sidebar-brand">
<a href="/" class="wb-sidebar-brand">
<img src="/media/logo.svg" alt="Docs" class="wb-sidebar-brand-logo">
<span class="wb-sidebar-brand-copy">
<span>Docs</span>
<span class="wb-sidebar-brand-note">Guide</span>
</span>
</a>
</div>Principales classes CSS / WebBlocks UI
wb-sidebar-brand, wb-sidebar-brand-logo, wb-sidebar-brand-copy, wb-sidebar-brand-note.
Paramètres -> carte des classes / du balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| settings.url | URL sûre | L'URL enregistrée l'emporte pour le lien de marque. |
| settings.url | vide | Se rabat sur le chemin d'accueil du site, puis sur /. |
| settings.target | _blank | Ajoute target="_blank" rel="noopener noreferrer". |
| settings.aria_label | texte | Utilisé comme libellé accessible lorsqu'aucun texte visible n'est rendu. |
| media_id | média du logo | Rend l'image de marque à l'intérieur de wb-sidebar-brand. |
À utiliser pour / À éviter pour
À utiliser pour : l'identité du site ou de la documentation dans les layouts à barre latérale.
À éviter pour : l'identité dans la navbar ; utilisez plutôt Navbar Brand.
Notes
Le bloc n'est pas propriétaire du shell de la barre latérale. L'URL enregistrée l'emporte, puis le chemin d'accueil du site, puis /. La sortie composée du seul logo utilise aria-label.
Sidebar Navigation (`sidebar-navigation`)
Source du renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/sidebar-navigation.blade.php
HTML rendu
<div class="wb-public-block" data-wb-public-block-type="sidebar-navigation">
<nav class="wb-sidebar-nav" aria-label="Documentation navigation">
<div class="wb-sidebar-section">
<a href="/docs" class="wb-sidebar-link is-active" aria-current="page">
<i class="wb-icon wb-icon-book wb-sidebar-icon" aria-hidden="true"></i>
<span>Docs</span>
</a>
</div>
</nav>
</div>Principales classes 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.
Carte settings -> classe / balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| settings.menu_key | clé de menu connue | Rend l'arbre CMS Navigation lorsqu'il est présent. |
| {'es': 'hijos manuales', 'it': 'figli manuali', 'fr': 'enfants manuels'} | sidebar-nav-item/sidebar-nav-group | Rend les blocs enfants manuels lorsque le mode menu ne fournit pas d'éléments. |
| settings.show_icons | booléen | L'effet sur la visibilité des icônes doit être confirmé dans le code source. |
| settings.active_matching | valeur | Le comportement de correspondance active est piloté par un helper ; la sortie visible est is-active/aria-current en cas de correspondance. |
À utiliser pour / À éviter pour
À utiliser pour : les blocs de navigation de documentation ou de barre latérale.
À éviter pour : les barres latérales marketing ordinaires sans sémantique de navigation.
Notes
Le bloc peut rendre un menu CMS Navigation ou des blocs enfants manuels sidebar-nav-item / sidebar-nav-group. Il n'est pas propriétaire du shell externe de la page ou de la barre latérale.
Sidebar Nav Item (`sidebar-nav-item`)
Source du renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/sidebar-nav-item.blade.php
HTML rendu
<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>Élément de groupe imbriqué :
<a href="/docs/child" class="wb-nav-group-item">
<span>Child</span>
</a>Principales classes CSS / WebBlocks UI
wb-sidebar-link, wb-nav-group-item, wb-icon, wb-sidebar-icon, is-active.
Carte settings -> classe / balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| settings.url | URL sûre | Requis pour produire une sortie. |
| settings.target | _blank | Ajoute les attributs target/rel externes. |
| settings.icon | slug/classe d'icône | Rend wb-icon ... wb-sidebar-icon lorsqu'il est configuré. |
| settings.active_mode | exact/current-page/manual/default | Contrôle le helper d'état actif ; la sortie visible est is-active et aria-current. |
| settings.manual_active | true | Peut forcer la sortie active lorsque le mode actif est manuel. |
À utiliser pour / À éviter pour
À utiliser pour : les liens manuels de la barre latérale.
À éviter pour : les liens de navbar ou les boutons génériques.
Notes
Le renderer délègue à sidebar-nav-item-link.blade.php. Il n'émet rien sans URL ni libellé.
Sidebar Nav Group (`sidebar-nav-group`)
Source du renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/sidebar-nav-group.blade.php
HTML rendu
<div class="wb-nav-group is-open" data-wb-nav-group>
<button type="button" class="wb-nav-group-toggle is-active" data-wb-nav-group-toggle>
<span class="wb-nav-group-icon"><i class="wb-icon wb-icon-folder" aria-hidden="true"></i></span>
<span class="wb-nav-group-label">Group</span>
<span class="wb-nav-group-arrow" aria-hidden="true"></span>
</button>
<div class="wb-nav-group-items" id="wb-nav-group-items-1">
<a href="/docs/child" class="wb-nav-group-item">...</a>
</div>
</div>Principales classes 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.
Carte settings -> classe / balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| settings.icon | slug/classe d'icône | Rend le balisage de l'icône du groupe lorsqu'il est configuré. |
| settings.initially_open | true/par défaut | Ajoute is-open. |
| settings.initially_open | false | Le groupe démarre fermé. |
| {'es': 'sidebar-nav-item hijo', 'it': 'sidebar-nav-item figlio', 'fr': 'sidebar-nav-item enfant'} | enfants publiés | Rendu à l'intérieur de .wb-nav-group-items. |
À utiliser pour / À éviter pour
À utiliser pour : les groupes repliables dans Sidebar Navigation.
À éviter pour : les accordéons génériques ; utilisez Accordion.
Notes
Le groupe n'est rendu que s'il possède un libellé et des enfants sidebar-nav-item publiés. Il utilise les hooks nav-group de WebBlocks UI.
Sidebar Footer (`sidebar-footer`)
Source du renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/sidebar-footer.blade.php
HTML rendu
<div class="wb-public-block" data-wb-public-block-type="sidebar-footer">
<div class="wb-sidebar-footer">
<div class="wb-callout wb-callout-info">
<div class="wb-callout-title">Title</div>
<p>Copy.</p>
</div>
<p class="wb-text-xs wb-text-muted wb-mt-3 wb-mb-0">Footer note.</p>
</div>
</div>Principales classes CSS / WebBlocks UI
wb-sidebar-footer, wb-callout, la classe de variante issue de sidebarFooterVariantClass(), wb-callout-title, wb-text-xs, wb-text-muted, wb-mt-3, wb-mb-0.
Carte settings -> classe / balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| settings.variant | success/warning/danger | sidebarFooterVariantClass() ajoute wb-callout-success, wb-callout-warning ou wb-callout-danger. |
| settings.variant | info/par défaut/autre | Ajoute wb-callout-info. |
| title/content/subtitle | tous vides | Le renderer n'émet rien. |
| subtitle | texte | Rend la note de pied avec wb-text-xs wb-text-muted wb-mt-3 wb-mb-0. |
À utiliser pour / À éviter pour
À utiliser pour : de courtes notes de barre latérale ou des appels à l'action.
À éviter pour : les CTA principaux de la page.
Notes
Le bloc n'est rendu que si title, content ou subtitle existe. Il n'est pas propriétaire du shell de la barre latérale.
HTML (Trusted) (`html`)
Source du renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/html.blade.php
HTML rendu
<div class="wb-public-block" data-wb-public-block-type="html">
<div>
<!-- trusted HTML content -->
</div>
</div>Principales classes CSS / WebBlocks UI
Le renderer lui-même n'ajoute aucune classe WebBlocks UI fixe. Le wrapper générique utilise wb-public-block.
Carte settings -> classe / balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| content | HTML approuvé | Rendu à l'intérieur d'un simple au sein du wrapper public générique. |
| {'es': 'fragmentos overlay/body-end', 'it': 'frammenti overlay/body-end', 'fr': 'fragments overlay/body-end'} | reconnus par l'extracteur | Peuvent être remontés via TrustedHtmlOverlayExtractor, PublicOverlayRegistry et PublicBodyEndRegistry. |
| {'es': 'contenido no confiable', 'it': 'contenuto non attendibile', 'fr': 'contenu non approuvé'} | s. o. | Ne l'utilisez pas ; ce renderer suppose un balisage statique approuvé. |
À utiliser pour / À éviter pour
À utiliser pour : du balisage de repli déjà relu que les blocs structurés ne peuvent pas encore représenter.
À éviter pour : la sortie par défaut des pages migrées ou créées par IA.
Notes
Le HTML approuvé peut extraire des fragments d'overlay et de fin de body via TrustedHtmlOverlayExtractor, PublicOverlayRegistry et PublicBodyEndRegistry. Ne l'utilisez que pour du balisage statique approuvé.
Button (`button`)
Source du renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/button.blade.php
HTML rendu
<a href="/start" class="wb-btn wb-btn-primary">Open link</a>Variante sans URL :
<button type="button" class="wb-btn wb-btn-primary">Open link</button>Principales classes CSS / WebBlocks UI
wb-btn, wb-btn-primary, wb-btn-secondary, wb-btn-outline, wb-btn-ghost, wb-btn-danger, wrapper d'enfants optionnel wb-stack wb-gap-4.
Carte settings -> classe / balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| variant | primary/secondary/outline/ghost/danger | Correspond à wb-btn plus la classe de variante associée. |
| variant | vide/autre | Utilise par défaut wb-btn wb-btn-primary. |
| {'es': 'URL del medio adjunto', 'it': 'URL del media allegato', 'fr': 'URL du média joint'} | présent | L'emporte sur l'URL canonique pour des raisons de compatibilité. |
| url | présente sans pièce jointe | Rend une ancre. |
| url | vide | Rend un inerte. |
À utiliser pour / À éviter pour
À utiliser pour : les actions enfants gérées dans Hero/CTA.
À éviter pour : les boutons de page autonomes ; utilisez Button Link.
Notes
Il s'agit d'un bloc d'action enfant géré pour Hero/CTA. Il ne figure pas dans la liste actuelle du catalogue publié de CoreBlockTypeCatalogSyncer, mais des renderers publics et un support de conversion existent. L'URL de la pièce jointe l'emporte sur l'URL canonique pour des raisons de compatibilité.
Callout (`callout`)
Source du renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/callout.blade.php
HTML rendu
<div class="wb-alert wb-alert-info">
<div>
<div class="wb-alert-title">Title</div>
<div>Content</div>
</div>
</div>Principales classes CSS / WebBlocks UI
wb-alert, wb-alert-info, wb-alert-success, wb-alert-warning, wb-alert-danger, wb-alert-title, wrapper d'enfants optionnel wb-stack wb-gap-4.
Carte settings -> classe / balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| variant | success/warning/danger | Ajoute la classe wb-alert-{tone} correspondante. |
| variant | info/par défaut/autre | Ajoute wb-alert-info. |
| {'es': 'hijos', 'it': 'figli', 'fr': 'enfants'} | enfants publiés | Rendus ensuite dans wb-stack wb-gap-4. |
| {'es': 'preferido en páginas nuevas', 'it': 'preferito nelle nuove pagine', 'fr': 'préféré pour les nouvelles pages'} | s. o. | Utilisez Alert pour les avis de première classe sur les nouvelles pages. |
À utiliser pour / À éviter pour
À utiliser pour : du contenu de type alerte hérité ou compatible avec le convertisseur.
À éviter pour : les nouvelles pages structurées ; utilisez Alert.
Notes
callout est un renderer hérité et compatible avec la conversion, qui correspond visuellement au motif alert. Il ne figure pas comme ligne actuelle du catalogue core publié, contrairement à alert.
List (`list`)
Source du renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/list.blade.php
HTML rendu
<div class="wb-stack wb-gap-2">
<h3>List title</h3>
<ul class="wb-stack wb-gap-1">
<li>Item</li>
</ul>
</div>Principales classes CSS / WebBlocks UI
wb-stack, wb-gap-2, wb-gap-1, wrapper d'enfants optionnel wb-stack wb-gap-4.
Carte settings -> classe / balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| variant | ordered | Rend . |
| variant | par défaut/autre | Rend . |
| settings.items/cards/entries | tableau | Utilisé comme source d'éléments lorsqu'il est disponible. |
| content | texte séparé par des lignes | Utilisé comme source d'éléments de repli. |
| title | texte | Rend un titre au-dessus de la liste. |
À utiliser pour / À éviter pour
À utiliser pour : des listes simples importées ou saisies manuellement.
À éviter pour : les listes de navigation ou le corps de texte enrichi qui relève de Rich Text.
Notes
Ce renderer existe pour la compatibilité et la conversion. Les éléments proviennent des settings (items, cards, entries) ou d'un contenu séparé par des lignes. variant = ordered remplace ul par ol.
Text (`text`)
Source du renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/text.blade.php
HTML rendu
<div class="wb-stack wb-gap-2">
<strong>Title</strong>
<p>Content</p>
</div>Principales classes CSS / WebBlocks UI
wb-stack, wb-gap-2, wrapper d'enfants optionnel wb-stack wb-gap-4.
Carte settings -> classe / balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| title | texte | Rend au-dessus du paragraphe lorsqu'il est présent. |
| content | texte | Rend un paragraphe dans wb-stack wb-gap-2. |
| {'es': 'hijos', 'it': 'figli', 'fr': 'enfants'} | enfants publiés | Rend ensuite les blocs enfants dans wb-stack wb-gap-4. |
À utiliser pour / À éviter pour
À utiliser pour : du contenu hérité ou compatible avec le convertisseur qui dépend déjà de ce renderer.
À éviter pour : les nouvelles pages construites à la main ; utilisez les blocs structurés canoniques listés plus haut.
Notes
Il s'agit d'un renderer de compatibilité. Le bloc core canonique actuel pour le corps de texte simple est plain_text.
Partial interne d'actions (`_actions`)
Source du renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/_actions.blade.php
HTML rendu
<div class="wb-cluster wb-cluster-2">
<a href="/start" class="wb-btn wb-btn-primary">Start</a>
</div>Principales classes CSS / WebBlocks UI
Wrapper par défaut wb-cluster wb-cluster-2, ou une classe de wrapper fournie par l'appelant.
Carte settings -> classe / balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| {'es': 'entrada buttons', 'it': 'input buttons', 'fr': 'entrée buttons'} | blocs enfants de type button | Ne conserve que les enfants de type button et les rend. |
| {'es': 'entrada wrapperClass', 'it': 'input wrapperClass', 'fr': 'entrée wrapperClass'} | chaîne de classe fournie | Utilise la classe de wrapper fournie. |
| {'es': 'entrada wrapperClass', 'it': 'input wrapperClass', 'fr': 'entrée wrapperClass'} | vide | Utilise par défaut wb-cluster wb-cluster-2. |
À utiliser pour / À éviter pour
À utiliser pour : la sortie d'actions Hero/CTA gérée par le renderer.
À éviter pour : la composition directe de pages.
Notes
Il s'agit d'un partial auxiliaire interne, et non d'un bloc publié autonome. Il filtre la collection fournie sur les enfants de type button et rend chaque enfant via le partial de bloc habituel.
Card Grid (`card-grid`)
Source du renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/card-grid.blade.php
HTML rendu
<section class="wb-stack wb-gap-4">
<div class="wb-stack wb-gap-1">
<h2>Cards</h2>
<p class="wb-text-muted">Intro</p>
</div>
<div class="wb-grid wb-grid-3">
<div class="wb-card">
<div class="wb-card-body wb-stack wb-gap-2">
<img src="/media/card.jpg" alt="Card image">
<strong>Card title</strong>
<p class="wb-m-0">Card content.</p>
<a href="/target" class="wb-link">Read more</a>
</div>
</div>
</div>
</section>Principales classes 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.
Carte settings -> classe / balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| settings.items | tableau | Pilote la sortie des cartes ; chaque élément peut inclure asset_id, title, content, url et url_label. |
| {'es': 'número de settings.items', 'it': 'numero di settings.items', 'fr': 'nombre de settings.items'} | 0-1/2/3/4+ | Utilise wb-stack wb-gap-3, wb-grid wb-grid-2, wb-grid wb-grid-3 ou wb-grid wb-grid-4. |
| item.asset_id | id du média | Rend l'image de l'élément lorsque l'URL du média existe. |
| item.url + item.url_label | texte | Rend a.wb-link. |
À utiliser pour / À éviter pour
À utiliser pour : du contenu hérité ou compatible avec le convertisseur qui dépend déjà de ce renderer.
À éviter pour : les nouvelles pages construites à la main ; utilisez les blocs structurés canoniques listés plus haut.
Notes
Il s'agit d'un renderer hérité ou de compatibilité adossé à settings.items. La classe de grille change selon le nombre d'éléments.
Contact Info (`contact-info`)
Source du renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/contact-info.blade.php
HTML rendu
<section class="wb-card wb-card-muted wb-public-contact-card">
<div class="wb-card-body wb-stack wb-gap-3">
<div class="wb-stack wb-gap-1">
<h2>Contact</h2>
<p>Reach us.</p>
</div>
<div class="wb-stack wb-gap-1 wb-public-contact-meta">
<strong>Email</strong>
<a href="mailto:hello@example.test" class="wb-link">hello@example.test</a>
</div>
</div>
</section>Principales classes CSS / WebBlocks UI
wb-card, wb-card-muted, wb-card-body, wb-stack, wb-gap-3, wb-gap-1, wb-link, ainsi que les classes propres au CMS wb-public-contact-card et wb-public-contact-meta.
Réglages -> carte des classes / du balisage
| Réglage | Valeur | Effet sur la sortie |
|---|---|---|
| settings.items | array | Génère les lignes de contact à l'intérieur de wb-public-contact-meta. |
| item.url | URL sûre | Génère la valeur liée avec wb-link. |
| item.target | _blank | Ajoute les attributs target/rel externes. |
| item.label/value | texte | Génère le libellé et la valeur brute lorsqu'aucune URL sûre n'existe. |
À utiliser pour / À éviter pour
À utiliser pour : contenu hérité ou compatible avec le convertisseur qui dépend déjà de ce moteur de rendu.
À éviter pour : les nouvelles pages construites à la main ; utilisez les blocs structurés canoniques listés en haut.
Notes
Il s'agit d'un moteur de rendu hérité/de compatibilité alimenté par settings.items. Les liens passent par Block::safePublicUrl().
FAQ List (`faq-list`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/faq-list.blade.php
HTML rendu
<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>Principales classes CSS / WebBlocks UI
Utilise les classes du moteur de rendu accordion.
Réglages -> carte des classes / du balisage
| Réglage | Valeur | Effet sur la sortie |
|---|---|---|
| comportement du moteur de rendu | délégué | Inclut directement le moteur de rendu Accordion. |
| lignes enfants | titre et contenu | Suivent le contrat d'élément dépliant d'Accordion. |
| nouvelles pages préférées | n/a | Utilisez accordion comme bloc parent canonique. |
À utiliser pour / À éviter pour
À utiliser pour : contenu hérité ou compatible avec le convertisseur qui dépend déjà de ce moteur de rendu.
À éviter pour : les nouvelles pages construites à la main ; utilisez les blocs structurés canoniques listés en haut.
Notes
Ce partiel de compatibilité délègue directement à accordion.blade.php.
Gallery Viewer (`gallery-viewer`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/gallery-viewer.blade.php
HTML rendu
<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>Principales classes CSS / 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.
Réglages -> carte des classes / du balisage
| Réglage | Valeur | Effet sur la sortie |
|---|---|---|
| entrée viewerId | chaîne d'id | Définit l'id cible de la modale/galerie utilisé par les déclencheurs de galerie. |
| entrée galleryItems | collection | Génère les diapositives/éléments de la visionneuse à partir des données d'élément préparées par Gallery. |
| réglages directs du bloc | n/a | Partiel interne ; pas de carte de réglages de bloc autonome. |
À utiliser pour / À éviter pour
À utiliser pour : le balisage de superposition de la visionneuse enregistré par Gallery.
À éviter pour : une utilisation manuelle en tant que bloc de page.
Notes
Il s'agit d'un utilitaire de superposition employé par les moteurs de rendu de galerie/vitrine via PublicOverlayRegistry, et non d'un bloc autonome.
Map (`map`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/map.blade.php
HTML rendu
<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>Principales classes CSS / WebBlocks UI
wb-card, wb-card-muted, wb-card-body, wb-stack, wb-gap-2, wb-m-0, wb-btn, wb-btn-secondary, et le conteneur d'enfants facultatif wb-stack wb-gap-4.
Réglages -> carte des classes / du balisage
| Réglage | Valeur | Effet sur la sortie |
|---|---|---|
| url | URL http/https | Acceptée comme source de carte sûre et affichée lorsqu'elle diffère du contenu. |
| content | texte ou requête | Utilisé comme requête de carte de repli. |
| title | texte | Génère dans la carte. |
| children | enfants publiés | Génère ensuite les blocs enfants à l'intérieur de wb-stack wb-gap-4. |
À utiliser pour / À éviter pour
À utiliser pour : contenu hérité ou compatible avec le convertisseur qui dépend déjà de ce moteur de rendu.
À éviter pour : les nouvelles pages construites à la main ; utilisez les blocs structurés canoniques listés en haut.
Notes
Il s'agit d'un moteur de rendu hérité/de compatibilité. Il n'accepte que les schémas d'URL http et https pour l'URL brute et peut générer des enfants après la carte.
Menu (`menu`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/menu.blade.php
HTML rendu
<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>Principales classes CSS / WebBlocks UI
Utilise les classes du moteur de rendu navigation-auto.
Réglages -> carte des classes / du balisage
| Réglage | Valeur | Effet sur la sortie |
|---|---|---|
| comportement du moteur de rendu | délégué | Inclut directement le moteur de rendu Navigation Auto. |
| settings.menu_key/location | clé de menu connue | Suit le comportement de sélection de menu de Navigation Auto. |
| nouvelles pages préférées | n/a | Utilisez délibérément Navbar Navigation ou Navigation Auto, et non menu. |
À utiliser pour / À éviter pour
À utiliser pour : contenu hérité ou compatible avec le convertisseur qui dépend déjà de ce moteur de rendu.
À éviter pour : les nouvelles pages construites à la main ; utilisez les blocs structurés canoniques listés en haut.
Notes
Ce partiel de compatibilité délègue directement à navigation-auto.blade.php.
Metric Card (`metric-card`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/metric-card.blade.php
HTML rendu
<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>Principales classes CSS / WebBlocks UI
wb-stat, wb-stat-label, wb-stat-value, wb-stat-delta, et le conteneur d'enfants facultatif wb-stack wb-gap-4.
Réglages -> carte des classes / du balisage
| Réglage | Valeur | Effet sur la sortie |
|---|---|---|
| comportement du moteur de rendu | alias délégué | Délègue à un chemin de moteur de rendu existant ; la carte exacte des réglages suit le délégué lorsqu'elle est visible. |
| nouvelles pages préférées | n/a | Préférez le bloc canonique nommé dans les Notes plutôt que ce bloc d'alias/de compatibilité. |
À utiliser pour / À éviter pour
À utiliser pour : le contenu hérité utilisant l'alias metric-card.
À éviter pour : le nouveau contenu ; utilisez Stat Card ou les statistiques de Columns.
Notes
Il s'agit d'un moteur de rendu de métriques hérité/de compatibilité. Le catalogue publié actuel utilise stat-card.
Showcase List (`showcase-list`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/showcase-list.blade.php
HTML rendu
<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>Principales classes CSS / 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, ainsi que la classe propre au CMS wb-public-showcase-item.
Réglages -> carte des classes / du balisage
| Réglage | Valeur | Effet sur la sortie |
|---|---|---|
| settings.items | array | Génère un élément de vitrine en carte atténuée par entrée. |
| item.images[].asset_id | id de média | Génère les figures de la galerie et enregistre une visionneuse de galerie partagée lorsque des images existent. |
| item.url | URL sûre | Génère un wb-link externe avec target/rel. |
| item.title/subtitle/url_label | texte | Génère les titres de la vitrine et le libellé du lien. |
À utiliser pour / À éviter pour
À utiliser pour : contenu hérité ou compatible avec le convertisseur qui dépend déjà de ce moteur de rendu.
À éviter pour : les nouvelles pages construites à la main ; utilisez les blocs structurés canoniques listés en haut.
Notes
Il s'agit d'un moteur de rendu hérité/de compatibilité alimenté par settings.items. Il peut pousser le balisage de superposition gallery-viewer dans PublicOverlayRegistry.
Sidebar Nav Item Link (`sidebar-nav-item-link`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/sidebar-nav-item-link.blade.php
HTML rendu
<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>Principales classes CSS / WebBlocks UI
wb-sidebar-link, wb-nav-group-item, is-active, wb-icon, wb-sidebar-icon.
Réglages -> carte des classes / du balisage
| Réglage | Valeur | Effet sur la sortie |
|---|---|---|
| entrée nested | true | Utilise wb-nav-group-item. |
| entrée nested | false | Utilise wb-sidebar-link. |
| URL/libellé de l'élément de barre latérale | présent | Requis pour produire l'ancre. |
| icône de l'élément | configurée | Génère i.wb-icon.wb-icon-{icon}.wb-sidebar-icon. |
| utilitaire active | true | Ajoute is-active et aria-current="page". |
À utiliser pour / À éviter pour
À utiliser pour : la sortie interne des liens de barre latérale partagée par les moteurs de rendu d'éléments de barre latérale.
À éviter pour : la composition directe de pages.
Notes
Il s'agit d'un utilitaire interne pour sidebar-nav-item et sidebar-nav-group. La classe devient wb-nav-group-item lorsqu'il est rendu de manière imbriquée.
Sidebar Navigation Menu Item (`sidebar-navigation-menu-item`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/sidebar-navigation-menu-item.blade.php
HTML rendu
<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>Principales classes 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, wb-sidebar-link, wb-sidebar-icon.
Réglages -> carte des classes / du balisage
| Réglage | Valeur | Effet sur la sortie |
|---|---|---|
| link_type de NavigationItem | groupe avec enfants visibles | Génère .wb-nav-group avec bascule et éléments imbriqués. |
| entrée nested | true | Les liens enfants utilisent wb-nav-group-item. |
| entrée showIcons | true | Autorise le rendu des icônes de barre latérale des éléments. |
| utilitaire active | true | Ajoute is-open/is-active et aria-current le cas échéant. |
À utiliser pour / À éviter pour
À utiliser pour : le rendu interne des éléments de menu du CMS pour la navigation en barre latérale.
À éviter pour : la composition directe de pages.
Notes
Cet utilitaire génère les lignes NavigationItem du CMS pour sidebar-navigation lorsque ce bloc s'appuie sur un menu plutôt que sur des enfants saisis manuellement.
Slider (`slider`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/slider.blade.php
HTML rendu
<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>Principales classes CSS / 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.
Réglages -> carte des classes / du balisage
| Réglage | Valeur | Effet sur la sortie |
|---|---|---|
| médias de la galerie | un ou plusieurs éléments | Génère les diapositives à partir de galleryAssets(). |
| nombre de médias de la galerie | plus d'un | Génère les contrôles précédent/suivant et les points. |
| title | texte | Génère un au-dessus du slider. |
| subtitle | texte | Génère un texte d'aide atténué sous le slider. |
À utiliser pour / À éviter pour
À utiliser pour : contenu hérité ou compatible avec le convertisseur qui dépend déjà de ce moteur de rendu.
À éviter pour : les nouvelles pages construites à la main ; utilisez les blocs structurés canoniques listés en haut.
Notes
Il s'agit d'un moteur de rendu hérité/de compatibilité alimenté par galleryAssets(). Les contrôles du slider ne sont générés que lorsqu'il existe plus d'un élément de diapositive.
Stats (`stats`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/stats.blade.php
HTML rendu
<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>Principales classes CSS / WebBlocks UI
Utilise le moteur de rendu columns avec variant = stats, y compris wb-stat, wb-stat-label, wb-stat-value et wb-stat-delta pour les blocs enfants column_item.
Réglages -> carte des classes / du balisage
| Réglage | Valeur | Effet sur la sortie |
|---|---|---|
| comportement du moteur de rendu | alias délégué | Délègue à un chemin de moteur de rendu existant ; la carte exacte des réglages suit le délégué lorsqu'elle est visible. |
| nouvelles pages préférées | n/a | Préférez le bloc canonique nommé dans les Notes plutôt que ce bloc d'alias/de compatibilité. |
À utiliser pour / À éviter pour
À utiliser pour : le contenu hérité utilisant l'alias stats.
À éviter pour : les nouveaux groupes de statistiques ; utilisez Columns avec la variante stats ou Stat Card.
Notes
Ce partiel de compatibilité délègue à columns.blade.php après avoir forcé la variante à stats.
Tabs (`tabs`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/tabs.blade.php
HTML rendu
<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>Principales classes CSS / WebBlocks UI
wb-card, wb-card-header, wb-card-body, et le conteneur d'enfants facultatif wb-stack wb-gap-4.
Réglages -> carte des classes / du balisage
| Réglage | Valeur | Effet sur la sortie |
|---|---|---|
| title | texte/par défaut | Génère le titre de l'en-tête de carte, avec Tab par défaut. |
| subtitle | texte | Génère un span secondaire dans l'en-tête. |
| content | texte/texte HTML | Est généré à l'intérieur de .wb-card-body. |
| children | enfants publiés | Génère ensuite les blocs enfants à l'intérieur de wb-stack wb-gap-4. |
À utiliser pour / À éviter pour
À utiliser pour : contenu hérité ou compatible avec le convertisseur qui dépend déjà de ce moteur de rendu.
À éviter pour : les nouvelles pages construites à la main ; utilisez les blocs structurés canoniques listés en haut.
Notes
Il s'agit d'un moteur de rendu hérité/de compatibilité. Il génère les enfants après la carte si des blocs enfants existent.
Testimonial (`testimonial`)
Source du moteur de rendu
packages/webblocks-cms/resources/views/pages/partials/blocks/testimonial.blade.php
HTML rendu
<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>Principales classes CSS / WebBlocks UI
Utilise le moteur de rendu quote avec variant = testimonial.
Réglages -> carte des classes / du balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| comportement du renderer | alias délégué | Délègue à un chemin de renderer existant ; la correspondance exacte des paramètres suit le délégué là où elle est visible. |
| pages nouvelles recommandées | s.o. | Préférez le bloc canonique indiqué dans les Notes plutôt que ce bloc d'alias / de compatibilité. |
À utiliser pour / À éviter pour
À utiliser pour : du contenu hérité utilisant l'alias testimonial.
À éviter pour : les nouvelles citations ; utilisez Quote avec la variante testimonial si nécessaire.
Notes
Ce partial de compatibilité délègue à quote.blade.php après avoir forcé la variante à testimonial.
Fallback Renderer (`fallback`)
Source du renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/fallback.blade.php
HTML rendu
<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>Classes CSS principales / WebBlocks UI
Les branches de repli utilisent des primitives existantes, dont 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 et wb-select.
Paramètres -> correspondance classes / balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| settings.items/cards/entries | tableaux | Peuvent produire une sortie de compatibilité en style liste ou carte selon la branche de repli. |
| settings.rows/options/related_slugs | tableaux | Utilisés par les branches de repli lorsqu'ils sont présents. |
| type de bloc / contexte source | variable | nécessite une confirmation dans le code source pour déterminer la branche exacte. |
À utiliser pour / À éviter pour
À utiliser pour : un rendu dégradé et sûr des blocs de production non pris en charge.
À éviter pour : la composition planifiée de pages ou les migrations normales.
Notes
Il s'agit du renderer de sécurité pour les slugs inconnus ou transitoires. Il contient des sorties spécifiques par branche pour d'anciens slugs tels que comparison, timeline, product-card, pagination, input, textarea, select, checkbox-group et radio-group. Préférez documenter les fichiers de renderer dédiés lorsqu'ils existent.
Missing Renderer (`missing-renderer`)
Source du renderer
packages/webblocks-cms/resources/views/pages/partials/blocks/missing-renderer.blade.php
HTML rendu
<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>Classes CSS principales / WebBlocks UI
wb-alert, wb-alert-warning, wb-alert-title.
Paramètres -> correspondance classes / balisage
| Paramètre | Valeur | Effet sur la sortie |
|---|---|---|
| slug de type | tout slug sans renderer | Affiche une alerte d'avertissement nommant le fichier de renderer attendu. |
| environnement | chemin de repli hors production | Utilisé lorsqu'aucun renderer public n'existe en dehors de la production. |
| paramètres d'exécution | s.o. | Aucun paramètre de bloc n'influe sur cette sortie d'avertissement. |
À utiliser pour / À éviter pour
À utiliser pour : donner de la visibilité aux développeurs lorsqu'aucun renderer n'existe hors production.
À éviter pour : la conception de contenu public.
Notes
Ce renderer de diagnostic est utilisé lorsqu'un renderer de bloc concret ne peut pas être résolu.