Herkese Açık Blok Render İşaretlemesi

Bu dosya, pratik sayfa oluşturma sorusunu yanıtlar: "Bu CMS blokunu eklediğimde hangi herkese açık HTML ve WebBlocks UI sınıfları render edilir?" Sayfaları elle oluştururken, Page Converter çıktısını incelerken veya bir yapay zekâ asistanından yapılandırılmış bloklardan bir CMS sayfası oluşturmasını isterken kullanın.

Kök sahibi bloklar kendi anlamsal herkese açık köklerini render eder ve data-wb-public-block-type özniteliğini bu köke yerleştirir. Örnekler arasında Section, Container, Grid, Card, Hero, Gallery ve Navbar bulunur. Kök sahibi olmayan bloklar iç işaretlemelerini render eder ve normalde slot renderer tarafından data-wb-public-block-type ile birlikte .wb-public-block içine sarılır. Örnekler arasında Plain Text, Rich Text, Button Link, Alert ve çoğu gezinme yardımcı alt bloğu bulunur.

Bu dosya gerçek herkese açık renderer Blade kaynaklarından hazırlanmıştır. Örnek HTML temsilidir ancak renderer sözleşmesiyle uyumlu kalmak zorundadır. Birincil paket renderer kaynağı packages/webblocks-cms/resources/views/pages/partials/blocks/.blade.php; resources/views/pages/partials/blocks/.blade.php altındaki kök uyumluluk dosyaları genellikle paket ad alanına geri devreder. Block::publicRenderView() önce paket blok partial'larını, ardından kök uyumluluk partial'larını, son olarak güvenli fallback/eksik-renderer partial'ını çözümler.

Yeni sayfalar için önerilen blok kompozisyonu

Elle oluşturulan yeni CMS sayfaları için şu blokları tercih edin:

Yerleşim ve ritim: section, container, grid, cluster.
Sayfa ve bölüm metni: content_header, header, plain_text, rich-text, button_link, yönetilen bir Hero/CTA eylemi olduğunda button.
Pazarlama ve yapılandırılmış içerik: hero, cta, column_item ile columns, card_header, card_body ve card_footer ile card, SSS tarzı alt satırlarla accordion, gallery, image.
Gezinme ve ortak site iskeleti: sticky-navbar, navbar-brand, navbar-navigation, header-actions, search-form, ayrıca dokümantasyon/kenar çubuğu yerleşimleri için kenar çubuğu blokları.

Eski içeriği, dönüştürücü çıktısını veya uyumluluk davranışını korumuyorsanız, elle oluşturulan yeni sayfalar için şunları tercih etmeyin: feature-grid, feature-item, card-grid, contact-info, faq-list, menu, metric-card, showcase-list, slider, stats, tabs, testimonial, text, callout ve yalnızca fallback olan renderer yolları.

Safe HTML (html) ve fallback renderer'ları yalnızca, içerik henüz yapılandırılmış CMS bloklarıyla temsil edilemediğinde gözden geçirilmiş yedekler olarak kullanın. Taşınan veya yapay zekâ ile oluşturulan sayfalar için varsayılan çıktı olmamalıdır.

Yaygın sayfa ağaçları

Pazarlama sayfası:

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

Kart ızgarası:

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

Navbar / ortak üst bilgi:

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

SSS:

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

Mevcut Accordion renderer'ı, başlık ve içerik taşıyan yayında alt satırları açılır-kapanır öğeler olarak kullanır. Page Converter, hem accordion hem de faq sözleşmeleri mevcut olduğunda bitişik <details> gruplarını faq alt satırlarına yazar.

Varsayılan ana slot sarmalayıcısı, kök sahibi olmayan blokları şunun içinde render eder:

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

Kök sahibi bloklar ise data-wb-public-block-type özniteliğini kendi herkese açık kök öğelerine yerleştirir.

Section (`section`)

Renderer kaynağı

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

Render edilen HTML

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

Ana CSS / WebBlocks UI sınıfları

wb-section, sectionSpacingClass() kaynaklı boşluk sınıfı, wb-stack.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
settings.spacing	sm	sectionSpacingClass() wb-section-sm ekler.
settings.spacing	lg	sectionSpacingClass() wb-section-lg ekler.
settings.spacing	varsayılan/boş	Yalnızca wb-section wb-stack kullanır.
status	unpublished	Blok, normal herkese açık blok ağacı sorgularına dahil edilmez.

Şunun için kullanın / Şunun için kullanmayın

Şunun için kullanın: ana sayfa bölümleri ve blok gruplama.

Şunun için kullanmayın: görünür metni doğrudan Section ayarlarına koymak; alt metin blokları kullanın.

Notlar

Blok, kök <section> öğesinin sahibidir. Tüm alt blokları normal blok partial'ı üzerinden render eder. Çevrilebilir bir metin sözleşmesi yoktur; görünür içerik alt bloklarda olmalıdır.

Container (`container`)

Renderer kaynağı

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

Render edilen HTML

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

Ana CSS / WebBlocks UI sınıfları

wb-container, containerWidthClass() kaynaklı genişlik sınıfı, containerFlowClass() kaynaklı akış sınıfı.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
settings.width	sm/md/lg/xl/full	containerWidthClass() wb-container-sm, wb-container-md, wb-container-lg, wb-container-xl veya wb-container-full ekler.
settings.width	varsayılan/boş	Temel wb-container sınıfını kullanır.
settings.flow	stack/varsayılan	containerFlowClass() wb-stack ekler.
settings.flow	none	Akış sınıfı eklenmez.

Şunun için kullanın / Şunun için kullanmayın

Şunun için kullanın: bölümler, navbar'lar ve sayfa iskeletleri içinde genişlik denetimi.

Şunun için kullanmayın: Container'ı görsel bir kart veya içerik yüzeyi olarak kullanmak.

Notlar

Blok, kök <div> öğesinin sahibidir. Alt blokları doğrudan render eder. Genişlik ve akış ayarları sınıfları değiştirir.

Grid (`grid`)

Renderer kaynağı

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

Render edilen HTML

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

Ana CSS / WebBlocks UI sınıfları

wb-grid, gridColumnsClass() kaynaklı sütun sınıfı, gridGapClass() kaynaklı boşluk sınıfı.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
settings.columns	2	gridColumnsClass() wb-grid-2 ekler.
settings.columns	4	gridColumnsClass() wb-grid-4 ekler.
settings.columns	varsayılan/3/diğer	gridColumnsClass() wb-grid-3 ekler.
settings.gap	3/4/6	gridGapClass() wb-gap-3, wb-gap-4 veya wb-gap-6 ekler.
settings.gap	varsayılan/boş	wb-grid dışında boşluk sınıfı eklenmez.

Şunun için kullanın / Şunun için kullanmayın

Şunun için kullanın: çok sütunlu kart, medya veya içerik yerleşimleri.

Şunun için kullanmayın: basit düğme satırları veya navbar iç öğeleri; Cluster kullanın.

Notlar

Blok, kök <div> öğesinin sahibidir. Alt blokları doğrudan render eder. Sütun ve boşluk ayarları sınıfları değiştirir.

Cluster (`cluster`)

Renderer kaynağı

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

Render edilen HTML

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

Ana CSS / WebBlocks UI sınıfları

wb-cluster, ayrıca gap, justify, align, wrap ve width yardımcılarından gelen sınıflar.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
settings.gap	none	clusterGapClass() wb-cms-cluster-gap-none ekler.
settings.gap	xs	clusterGapClass() wb-gap-1 ekler.
settings.gap	sm veya 2	clusterGapClass() wb-cluster-2 ekler.
settings.gap	md veya 4	clusterGapClass() wb-cluster-4 ekler.
settings.gap	lg veya 6	clusterGapClass() wb-cluster-6 ekler.
settings.alignment	center/end/between	clusterAlignmentClass() wb-cluster-center, wb-cluster-end veya wb-cluster-between ekler.
settings.items_alignment	start/end/stretch	clusterAlignClass() wb-items-start, wb-items-end veya wb-cms-items-stretch ekler; center sınıf eklemez.
settings.wrap	nowrap	clusterWrapClass() wb-flex-nowrap ekler.
settings.width	full	clusterWidthClass() wb-w-full ekler.

Şunun için kullanın / Şunun için kullanmayın

Şunun için kullanın: yatay kompozisyon, eylem satırları ve navbar iç öğeleri.

Şunun için kullanmayın: küçük denetimlerden oluşan tek bir yatay satır için Grid kullanmak.

Notlar

Blok, kök <div> öğesinin sahibidir. Alt blokları doğrudan render eder. Düğmeler ve navbar iç öğeleri için normal yatay kompozisyon temel öğesidir.

Content Header (`content_header`)

Renderer kaynağı

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

Render edilen HTML

<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>

Ana CSS / WebBlocks UI sınıfları

wb-content-header, isteğe bağlı hizalama sınıfı, wb-content-title, wb-content-subtitle, wb-content-meta, wb-content-meta-divider.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
settings.alignment	left/center/right	contentHeaderAlignmentClass() wb-text-left, wb-text-center veya wb-text-right ekler.
title	herhangi bir metin	olarak render edilir.
subtitle	herhangi bir metin	Mevcut olduğunda render eder.
meta	liste	.wb-content-meta-divider ile ayrılmış .wb-content-meta span öğeleri render eder.

Şunun için kullanın / Şunun için kullanmayın

Şunun için kullanın: başlık, giriş metni ve meta verilerle sayfa veya ana bölüm girişleri.

Şunun için kullanmayın: iç içe kart içeriği veya başlığın H1 olmaması gereken yerler.

Notlar

Blok, kök <header> öğesinin sahibidir. Başlığı her zaman <h1> olarak render eder. Bir kapsayıcı değildir.

Hero (`hero`)

Renderer kaynağı

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

Render edilen HTML

<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>

Ana CSS / WebBlocks UI sınıfları

wb-card, wb-promo, isteğe bağlı wb-card-muted veya wb-card-accent, wb-card-body, wb-promo-copy, wb-stack, wb-gap-3, isteğe bağlı wb-text-center, wb-eyebrow, wb-promo-title, wb-promo-text, wb-promo-actions, wb-cluster, wb-btn.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
variant	muted veya soft	Promo kartına wb-card-muted ekler.
variant	accent	Promo kartına wb-card-accent ekler.
variant	varsayılan/diğer	Muted/accent değiştiricisi olmadan wb-card wb-promo kullanır.
settings.layout	centered	.wb-promo-copy öğesine wb-text-center ekler.
settings.title_tag	h1/h2/h3	Hero h1, h2 veya h3 değerlerine izin verir; CTA başlığını h2 olarak render eder.
alt button blokları	etiket ve URL ile yayında	_actions üzerinden en fazla iki yönetilen .wb-btn eylemi render eder.

Şunun için kullanın / Şunun için kullanmayın

Şunun için kullanın: yönetilen CTA düğmeleriyle sayfa başı pazarlama girişleri.

Şunun için kullanmayın: genel bölüm gruplama veya rastgele iç içe içerik.

Notlar

Blok, kök promo <section> öğesinin sahibidir. Yönetilen eylemler için yalnızca button alt bloklarını kabul eder ve URL ile etikete sahip en fazla iki yayında alt bloğu render eder. settings.title_tag başlık öğesini h1, h2 veya h3 olarak değiştirebilir.

CTA (`cta`)

Renderer kaynağı

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

Render edilen HTML

<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>

Ana CSS / WebBlocks UI sınıfları

wb-card, wb-promo, isteğe bağlı wb-card-muted veya 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.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
variant	muted veya soft	Promo kartına wb-card-muted ekler.
variant	accent	Promo kartına wb-card-accent ekler.
variant	varsayılan/diğer	Muted/accent değiştiricisi olmadan wb-card wb-promo kullanır.
settings.layout	centered	.wb-promo-copy öğesine wb-text-center ekler.
settings.title_tag	renderer'da h2 olarak sabit	Hero h1, h2 veya h3 değerlerine izin verir; CTA başlığını h2 olarak render eder.
alt button blokları	etiket ve URL ile yayında	_actions üzerinden en fazla iki yönetilen .wb-btn eylemi render eder.

Şunun için kullanın / Şunun için kullanmayın

Şunun için kullanın: kısa bir eylem satırı içeren odaklı dönüşüm bölümleri.

Şunun için kullanmayın: tam sayfa girişleri; Hero veya Content Header kullanın.

Notlar

Blok, kök promo <section> öğesinin sahibidir. Yönetilen eylemler için yalnızca button alt bloklarını kabul eder ve URL ile etikete sahip en fazla iki yayında alt bloğu render eder.

Card (`card`)

Renderer kaynağı

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

Render edilen HTML

<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>

Eski (legacy) bölgesiz fallback:

<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>

Ana CSS / WebBlocks UI sınıfları

wb-card, wb-card-header, wb-card-body, wb-card-footer, isteğe bağlı wb-stack, wb-gap-2, wb-m-0, wb-btn, wb-btn-secondary.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
settings.layout_name	kayıtlı herhangi bir değer	Yalnızca yönetim/yerleşim meta verisi; mevcut renderer'da herkese açık sınıf etkisi yoktur.
alt bloklar	yayında alt bloklar	Kartın veya bölge kökünün içinde render edilir.
eski kart alanları	bölge alt öğesi olmayan eski Card satırları	Card üst bloğu minimal bir eski üst bilgi/gövde/alt bilgi fallback'i render edebilir.

Şunun için kullanın / Şunun için kullanmayın

Şunun için kullanın: açık Header, Body ve Footer alt bloklarına sahip çerçeveli, yinelenen öğeler.

Ne için kullanmayın: sayfa bölümlerinin tamamını sarmak veya kartların içine kart yerleştirmek.

Notlar

Blok, kök <article> öğesinin sahibidir. Normal yapı, alt card_header, card_body ve card_footer bölge bloklarından oluşur. Geri dönüş (fallback) yolu yalnızca bölge alt öğeleri olmayan eski kayıtlı kart satırları için geçerlidir.

Kart Üstbilgisi (`card_header`)

Renderer kaynağı

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

Oluşturulan HTML

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

Ana CSS / WebBlocks UI sınıfları

wb-card-header.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
settings.layout_name	saklanan herhangi bir değer	Yalnızca yönetim/yerleşim meta verisi; mevcut renderer'da genel (public) sınıf etkisi yoktur.
alt bloklar	yayında olan alt öğeler	Kartın veya bölge kökünün içinde oluşturulur.
eski kart alanları	bölge alt öğeleri olmayan eski Kart satırları	Kart üst öğesi, minimal bir eski üstbilgi/gövde/altbilgi geri dönüşü (fallback) oluşturabilir.

Ne için kullanın / Ne için kullanmayın

Ne için kullanın: Kart içindeki üstbilgi bölgesi.

Ne için kullanmayın: Kart dışında kullanmak.

Notlar

Blok, kart bölgesi kökünün sahibidir ve alt blokları oluşturur. Yalnızca card altında kullanılmak üzere tasarlanmıştır.

Kart Gövdesi (`card_body`)

Renderer kaynağı

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

Oluşturulan HTML

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

Ana CSS / WebBlocks UI sınıfları

wb-card-body.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
settings.layout_name	saklanan herhangi bir değer	Yalnızca yönetim/yerleşim meta verisi; mevcut renderer'da genel (public) sınıf etkisi yoktur.
alt bloklar	yayında olan alt öğeler	Kartın veya bölge kökünün içinde oluşturulur.
eski kart alanları	bölge alt öğeleri olmayan eski Kart satırları	Kart üst öğesi, minimal bir eski üstbilgi/gövde/altbilgi geri dönüşü (fallback) oluşturabilir.

Ne için kullanın / Ne için kullanmayın

Ne için kullanın: Kart içindeki ana içerik bölgesi.

Ne için kullanmayın: Kart dışında kullanmak.

Notlar

Blok, kart bölgesi kökünün sahibidir ve alt blokları oluşturur. Yalnızca card altında kullanılmak üzere tasarlanmıştır.

Kart Altbilgisi (`card_footer`)

Renderer kaynağı

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

Oluşturulan HTML

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

Ana CSS / WebBlocks UI sınıfları

wb-card-footer.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
settings.layout_name	saklanan herhangi bir değer	Yalnızca yönetim/yerleşim meta verisi; mevcut renderer'da genel (public) sınıf etkisi yoktur.
alt bloklar	yayında olan alt öğeler	Kartın veya bölge kökünün içinde oluşturulur.
eski kart alanları	bölge alt öğeleri olmayan eski Kart satırları	Kart üst öğesi, minimal bir eski üstbilgi/gövde/altbilgi geri dönüşü (fallback) oluşturabilir.

Ne için kullanın / Ne için kullanmayın

Ne için kullanın: Kart içindeki eylemler veya destekleyici altbilgi içeriği.

Ne için kullanmayın: Kart dışında kullanmak.

Notlar

Blok, kart bölgesi kökünün sahibidir ve alt blokları oluşturur. Yalnızca card altında kullanılmak üzere tasarlanmıştır.

Başlık (`header`)

Renderer kaynağı

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

Oluşturulan HTML

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

Ana CSS / WebBlocks UI sınıfları

headerAlignmentClass() tarafından eklenen isteğe bağlı hizalama sınıfı.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
variant	h1-h6	Başlık öğesini denetler.
variant	boş/diğer	Varsayılan olarak kullanılır.
settings.alignment	left/center/right	headerAlignmentClass(), wb-text-left, wb-text-center veya wb-text-right ekler.
settings.anchor veya eski URL geri dönüşü	güvenli bağlantı (anchor) dizesi	Sayfa içi bağlantılar ve içindekiler tablosu için bir id özniteliği ekler.

Ne için kullanın / Ne için kullanmayın

Ne için kullanın: sayfa içeriğindeki anlamsal başlıklar.

Ne için kullanmayın: alt başlık/meta gerektiren sayfa girişleri; İçerik Başlığı (Content Header) kullanın.

Notlar

Blok, asıl başlık öğesinin (h1 ile h6 arası) sahibidir. variant, başlık düzeyini denetler; varsayılan h2'dir. settings.anchor veya eski URL geri dönüşü id ekleyebilir.

Düz Metin (`plain_text`)

Renderer kaynağı

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

Oluşturulan HTML

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

Ana CSS / WebBlocks UI sınıfları

plainTextAlignmentClass() tarafından eklenen isteğe bağlı hizalama sınıfı. Genel sarmalayıcı wb-public-block kullanır.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
settings.alignment	left/center/right	plainTextAlignmentClass(), öğesine wb-text-left, wb-text-center veya wb-text-right ekler.
content	metin	Kaçış uygulanarak tek bir paragrafa dönüştürülür.
status	yayında değil	Blok, normal genel (public) blok ağacı sorgularına dahil edilmez.

Ne için kullanın / Ne için kullanmayın

Ne için kullanın: kısa, biçimlendirilmemiş metinler.

Ne için kullanmayın: biçimlendirilmiş paragraflar, listeler, bağlantılar veya başlıklar; Zengin Metin/Başlık kullanın.

Notlar

Block::ownsPublicRoot()'a göre blok, genel (public) kökünün sahibi değildir; bu nedenle normal slot oluşturma onu sarmalar. Renderer'ın kendisi yalnızca <p> üretir.

Zengin Metin (`rich-text`)

Renderer kaynağı

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

Oluşturulan HTML

<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>

Ana CSS / WebBlocks UI sınıfları

wb-rich-text, wb-rich-text-readable ve ayrıca genel wb-public-block.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
content	güvenli zengin HTML	SafeRichTextRenderer, arındırılmış içeriği wb-rich-text wb-rich-text-readable içinde üretir.
content	arındırma sonrası boş	Renderer hiçbir şey üretmez.
desteklenmeyen HTML/sınıflar	içerikte mevcut	Genel sınıflara eşlenmek yerine güvenli renderer tarafından ayıklanır.

Ne için kullanın / Ne için kullanmayın

Ne için kullanın: güvenli satır içi biçimlendirme, bağlantılar ve basit listeler içeren gövde metni.

Ne için kullanmayın: başlıklar, medya, tablolar, butonlar veya ham yerleşim işaretlemesi.

Notlar

Arındırılmış içerik boş olduğunda renderer hiçbir şey üretmez. Slot düzeyindeki kökün sahibi değildir. İçerik, SafeRichTextRenderer aracılığıyla oluşturulur.

Buton Bağlantısı (`button_link`)

Renderer kaynağı

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

Oluşturulan HTML

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

Ana CSS / WebBlocks UI sınıfları

buttonLinkVariantClass() tarafından belirlenen sınıf; genellikle wb-btn ve bir varyant sınıfı.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
variant	secondary	buttonLinkVariantClass(), wb-btn wb-btn-secondary üretir.
variant	varsayılan/diğer	buttonLinkVariantClass(), wb-btn wb-btn-primary üretir.
settings.url	güvenli URL	Bağlantının href özniteliğini oluşturur; güvenli olmayan/boş URL hiçbir şey üretmez.
settings.target	_blank	target="_blank" rel="noopener noreferrer" ekler.

Ne için kullanın / Ne için kullanmayın

Ne için kullanın: buton olarak biçimlendirilmiş bağımsız editoryal bağlantılar.

Ne için kullanmayın: button alt öğe sözleşmesinin beklendiği yönetilen Hero/CTA eylemleri.

Notlar

Renderer, güvenli bir URL olmadan hiçbir şey üretmez. _blank hedefi target="_blank" ve rel="noopener noreferrer" ekler. Kök sahibi bir üst öğenin içine yerleştirilmediği sürece normalde genel public blok sarmalayıcısını alır.

Görsel (`image`)

Renderer kaynağı

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

Oluşturulan HTML

<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>

Ana CSS / WebBlocks UI sınıfları

wb-stack, wb-gap-2.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
media_id	seçili medya	Medya URL'si ve boyutlarını kullanarak içeren oluşturur.
url	güvenli URL	Yalnızca görseli bir bağlantıyla sarmalar.
caption	çevrilmiş metin	Mevcut olduğunda oluşturur.
alt metni	çevrilmiş veya medya geri dönüşü	Görselin alt özniteliğini oluşturur.

Ne için kullanın / Ne için kullanmayın

Ne için kullanın: isteğe bağlı altyazı/bağlantı içeren tekil anlamsal görseller.

Ne için kullanmayın: görsel koleksiyonları; Galeri kullanın.

Notlar

Blok, <figure> kökünün sahibidir ve medya olmadan hiçbir şey üretmez. İsteğe bağlı bağlantı, URL güvenli olduğunda (http, https, /, #, mailto veya tel) yalnızca görseli sarmalar.

Galeri (`gallery`)

Renderer kaynağı

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

Oluşturulan HTML

<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>

Ana CSS / WebBlocks UI sınıfları

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 veya wb-gallery-link, wb-gallery-media, wb-gallery-caption, wb-gallery-caption-title, wb-gallery-caption-meta.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
settings.variant	grid/masonry/masonary/collage	galleryVariant(), wb-gallery--grid, wb-gallery--masonry veya wb-gallery--collage ekler; masonary, masonry olarak normalleştirilir.
settings.columns	2/3/4/5	galleryColumns(), wb-gallery--cols-{n} ekler; varsayılan 3'tür.
settings.gap	none/sm/md/lg	galleryGap(), wb-gallery--gap-{value} ekler; varsayılan md'dir.
settings.aspect_ratio	auto/square/4:3/16:9/portrait	galleryAspectRatio(), : karakteri - olarak yazılacak şekilde wb-gallery--aspect-{value} ekler.
settings.captions_mode	hidden/below/overlay/on-hover	Alt kısımdaki altyazıları veya bindirme (overlay) altyazı işaretlemesini denetler; varsayılan below'dur.
settings.overlay_mode	none/gradient/solid	Bindirme altyazı değiştiricisini denetler; varsayılan gradient'tir.
settings.lightbox_enabled	true/varsayılan	.wb-gallery-trigger kullanır ve PublicOverlayRegistry içine gallery-viewer kaydeder.
settings.lightbox_enabled	false	.wb-gallery-link kullanır; görüntüleyici modalı yoktur.

Ne için kullanın / Ne için kullanmayın

Ne için kullanın: altyazılı ve isteğe bağlı lightbox içeren yapılandırılmış görsel koleksiyonları.

Ne için kullanmayın: bölüm giriş metni; Galeri'den önce İçerik Başlığı/Zengin Metin yerleştirin.

Notlar

Blok, galeri kökünün sahibidir ve lightbox etkin olduğunda PublicOverlayRegistry içine gallery-viewer HTML'i kaydeder. Varyant, sütun, boşluk, en-boy oranı, altyazı, bindirme modu ve lightbox ayarları öznitelikleri/sınıfları değiştirir. Eski, ayar tabanlı öğeler okunabilir kalır.

Sütunlar (`columns`)

Renderer kaynağı

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

Oluşturulan HTML

<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>

Ana CSS / WebBlocks UI sınıfları

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.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
variant	cards	Alt öğeler kart stilinde oluşturulur.
variant	stats	Alt öğeler istatistik stilinde oluşturulur.
variant	plain/varsayılan	Alt öğeler düz yığın stilinde oluşturulur.
alt öğe sayısı	1	Öğe yerleşimi için wb-stack wb-gap-3 kullanır.
alt öğe sayısı	2/3/4+	wb-grid wb-grid-2, wb-grid-3 veya wb-grid-4 kullanır.

Ne için kullanın / Ne için kullanmayın

Ne için kullanın: yapılandırılmış özellik, istatistik veya basit sütun grupları.

Ne için kullanmayın: Grid + Kart kombinasyonunun daha net olduğu serbest yerleşim ızgaraları.

Notlar

Blok, kök <section> öğesinin sahibidir. Alt öğe sayısı ızgara sınıfını denetler: tek alt öğe wb-stack wb-gap-3, iki alt öğe wb-grid wb-grid-2, üç alt öğe wb-grid wb-grid-3, diğer durumlarda wb-grid wb-grid-4 kullanılır. variant, alt column_item/feature-item renderer'larına aktarılır.

Sütun Öğesi (`column_item`)

Renderer kaynağı

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

Oluşturulan HTML

Kart (cards) varyantı:

<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>

Düz (plain) varyant:

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

İstatistik (stats) varyantı:

<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>

Ana CSS / WebBlocks UI sınıfları

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.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
üst columns varyantı	cards	.wb-card > .wb-card-body oluşturur.
üst columns varyantı	stats	Etiket/değer/ayrıntı içeren .wb-stat oluşturur.
üst columns varyantı	plain/varsayılan	.wb-stack wb-gap-2 oluşturur.
url	güvenli URL	Cards/plain varyantları içeriği a.wb-no-decoration içine sarmalar; stats varyantı mevcut renderer'da bağlantı oluşturmaz.

Ne için kullanın / Ne için kullanmayın

Ne için kullanın: Sütunlar bloğunun alt öğeleri.

Ne için kullanmayın: bağımsız sayfa içeriği; bağımsız kullanımda Kart veya İstatistik Kartı (Stat Card) kullanın.

Notlar

Bu renderer, üst columns varyantına bağlı olarak önemli ölçüde değişir. Slot düzeyinde bir kökün sahibi değildir ve normalde üst öğe tarafından oluşturulur.

Özellik Izgarası (`feature-grid`)

Renderer kaynağı

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

Oluşturulan HTML

<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>

Ana CSS / WebBlocks UI sınıfları

Sütunlar bloğuna devreder: wb-stack, wb-gap-4, wb-grid, wb-card ve ilgili column_item sınıfları.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
renderer davranışı	devredilen takma ad	Var olan bir renderer yoluna devreder; kesin ayar eşlemesi, görünür olduğu yerde devredilen renderer'ı izler.
tercih edilen yeni sayfalar	yok	Bu takma ad/uyumluluk bloğu yerine Notlar bölümünde adı geçen standart bloğu tercih edin.

Ne için kullanılır / Ne için kullanılmaz

Şunun için kullanın: hâlihazırda var olan eski feature-grid içeriği.

Şunun için kaçının: yeni elle oluşturulan sayfalar; Column Item ile Columns ya da Card ile Grid kullanın.

Notlar

Renderer bloğu çoğaltır, alt öğeleri feature-item ve eski sürümle uyumlu column_item ile sınırlar, variant = cards değerini zorlar ve Columns renderer'ını dahil eder. Yardımcıya (helper) göre public kökün sahibi değildir; bu nedenle üst düzey işleme wb-public-block ekleyebilir.

Feature Item (`feature-item`)

Renderer kaynağı

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

Üretilen HTML

<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>

Ana CSS / WebBlocks UI sınıfları

Column Item'ın cards varyantına devreder: wb-card, wb-card-body, wb-stack, wb-gap-2, wb-m-0.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
renderer davranışı	devredilen takma ad	Var olan bir renderer yoluna devreder; kesin ayar eşlemesi, görünür olduğu yerde devredilen renderer'ı izler.
tercih edilen yeni sayfalar	yok	Bu takma ad/uyumluluk bloğu yerine Notlar bölümünde adı geçen standart bloğu tercih edin.

Ne için kullanılır / Ne için kullanılmaz

Şunun için kullanın: eski Feature Grid alt öğeleri.

Şunun için kaçının: yeni bağımsız özellik kartları; Card bölgelerini veya Column Item kullanın.

Notlar

Bu renderer, columnsVariant = cards ile column_item öğesini dahil eder. feature-grid bloğunun alt öğesi olarak kullanılmak üzere tasarlanmıştır.

Accordion (`accordion`)

Renderer kaynağı

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

Üretilen HTML

<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>

Ana CSS / WebBlocks UI sınıfları

wb-stack, wb-gap-3, wb-gap-1, wb-stack-2, ayrıca genel wb-public-block.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
title/subtitle	mevcut	Öğelerin üzerinde giriş başlığını/metnini işler.
alt satırlar	başlık ve içerikle yayında	Her birini ... açılır öğesi olarak işler.
alt satırlar	başlık veya içerik eksik	Geçerli öğe toplama tarafından atlanır.
sarmalayıcı	üst düzey, kök olmayan blok	Slot renderer'dan genel .wb-public-block sarmalayıcısını alır.

Ne için kullanılır / Ne için kullanılmaz

Şunun için kullanın: SSS/açılır içerik grupları.

Şunun için kaçının: tek soru/cevap kartları; FAQ'yu yalnızca uyumluluk amaçlı alt satırlar için kullanın.

Notlar

Blok, her alt öğenin başlığı ve içeriği olduğunda alt satırları akordeon öğeleri olarak işler. Slot düzeyindeki kökün sahibi değildir. Page Converter, sözleşme (contract) mevcut olduğunda details öğelerini faq satırlarına yazar ve accordion alt öğelerin başlık/içeriğini kullanır.

FAQ (`faq`)

Renderer kaynağı

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

Üretilen HTML

<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>

Ana CSS / WebBlocks UI sınıfları

wb-card, wb-card-muted, wb-card-body, wb-stack, wb-gap-2, wb-m-0, ayrıca genel wb-public-block.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
title/content	mevcut	Soru ve cevabı içeren tek bir soluk (muted) kart işler.
alt öğeler	yayında alt öğeler	Ek bir wb-stack wb-gap-4 alt blok alanı işler.
akordeon alt öğe kullanımı	Accordion içinde	Accordion, FAQ satırının başlık/içeriğini açılır öğe içeriği olarak kullanır.

Ne için kullanılır / Ne için kullanılmaz

Şunun için kullanın: akordeon öğesi alt satırları ve eski tek soru/cevap kartları.

Şunun için kaçının: yeni bağımsız SSS bölümleri; üst öğe olarak Accordion kullanın.

Notlar

FAQ, tek soru/cevap kartı işleyen bir renderer'dır. Alt öğeler varsa bunları da ek bir wb-stack wb-gap-4 bloğunda işler.

Navbar (`sticky-navbar`)

Renderer kaynağı

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

Üretilen HTML

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

Ana CSS / WebBlocks UI sınıfları

wb-navbar, ayrıca navbarPositionClass() tarafından eklenen wb-navbar--static gibi isteğe bağlı bir sınıf.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
settings.sticky_mode	sticky/varsayılan	Yapışkan davranış için yalnızca temel wb-navbar sınıfını kullanır.
settings.sticky_mode	static	navbarPositionClass(), wb-navbar--static ekler.
settings.sticky_mode	fixed	navbarPositionClass(), wb-fixed ekler.
alt bloklar	yayında izin verilen alt öğeler	Doğrudan içinde işlenir.

Ne için kullanılır / Ne için kullanılmaz

Şunun için kullanın: ortak kullanılan public başlık/gezinme blok ağaçları.

Şunun için kaçının: navbar işaretlemesinin etrafında ayrı bir özel başlık kabuğu oluşturmak.

Notlar

Bloğun etiketi Navbar'dır; ancak kalıcı slug ve renderer dosyası sticky-navbar'dır. Dış <nav> kökünün sahibidir ve alt blokları işler. İzin verilen alt türler arasında container, cluster, header, plain_text, rich-text, button_link, navbar-brand, navbar-navigation, header-actions ve search-form bulunur.

Navbar Brand (`navbar-brand`)

Renderer kaynağı

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

Üretilen HTML

<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>

Ana CSS / WebBlocks UI sınıfları

wb-navbar-brand, wb-navbar-identity, wb-navbar-brand-note; kök sahibi bir üst öğenin içine yerleştirilmediği sürece ayrıca genel wb-public-block.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
settings.url	güvenli URL	Marka bağlantısı için kaydedilen URL önceliklidir.
settings.url	boş	Sitenin ana sayfa yoluna, ardından / değerine geri döner.
settings.target	_blank	target="_blank" rel="noopener noreferrer" ekler.
settings.aria_label	metin	Görünür metin işlenmediğinde erişilebilir etiket olarak kullanılır.
media_id	logo medyası	Marka görselini wb-navbar-brand içinde işler.

Ne için kullanılır / Ne için kullanılmaz

Şunun için kullanın: Navbar içinde site kimliği.

Şunun için kaçının: tam başlık yerleşimleri; Navbar/Container/Cluster ile birleştirerek oluşturun.

Notlar

Blok, dıştaki navbar kabuğunun sahibi değildir. Önce kaydedilen URL, ardından sitenin ana sayfa yolu, en son / kullanılır. Yalnızca logodan oluşan çıktı, metin işlenmediğinde aria-label kullanır.

Navbar Navigation (`navbar-navigation`)

Renderer kaynağı

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

Üretilen HTML

<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>

Açılır menü grubu varyantı:

<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>

Ana CSS / WebBlocks UI sınıfları

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.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
settings.menu_key	bilinen NavigationItem menü anahtarı	İşlenecek CMS gezinme ağacını seçer.
title	metin	Mevcut olduğunda ortak ARIA etiketi olarak kullanılır.
gezinme grubu öğesi	alt öğeleri olan grup	WebBlocks UI açılır menü tetikleyicisini ve .wb-dropdown-menu öğesini işler.
etkin öğe	geçerli sayfa eşleşmesi	is-active ve aria-current="page" ekler.

Ne için kullanılır / Ne için kullanılmaz

Şunun için kullanın: Navbar içinde CMS tarafından yönetilen menü bağlantıları.

Şunun için kaçının: elle oluşturulan düğme satırları; Button Link veya Cluster kullanın.

Notlar

Gerçek çekirdek slug navbar-navigation'dır. Seçilen menü anahtarındaki CMS NavigationItem ağaçlarını işler. Dıştaki navbar kabuğunun sahibi değildir. Grup menüleri ve mobil menü için WebBlocks UI açılır menü kancalarını kullanır.

Header Actions (`header-actions`)

Renderer kaynağı

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

Üretilen HTML

<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>

Ana CSS / WebBlocks UI sınıfları

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.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
settings.show_search	false	Public arama eylemini gizler.
settings.show_mode_toggle	false	Mod değiştirme eylemini gizler.
settings.show_accent_toggle	false	Vurgu/tema açılır menüsünü gizler.
varsayılan ayarlar	boş/true	Tüm eylemleri işler.

Ne için kullanılır / Ne için kullanılmaz

Şunun için kullanın: başlıklardaki standart arama/tema araçları.

Şunun için kaçının: özel iş odaklı CTA'lar; Button Link/Button kullanın.

Notlar

Ayarlar; aramayı, mod değiştiriciyi veya vurgu/tema menüsünü gizleyebilir. Bu blok, slot düzeyinde bir kökün sahibi değildir. WebBlocks UI açılır menü kancalarını ve CMS public arama kancalarını kullanır.

Search Form (`search-form`)

Renderer kaynağı

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

Üretilen HTML

<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>

Ana CSS / WebBlocks UI sınıfları

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

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
variant	secondary	Gönder düğmesi wb-btn wb-btn-secondary kullanır.
variant	primary/varsayılan	Gönder düğmesi wb-btn wb-btn-primary kullanır.
settings.show_button	false	Gönder düğmesini atlar.
arama rotası kullanılamıyor	yok	Renderer hiçbir şey üretmez.

Ne için kullanılır / Ne için kullanılmaz

Şunun için kullanın: site arama formları.

Şunun için kaçının: filtre formları veya özel harici arama entegrasyonları.

Notlar

Rota çözümleyici bir arama yolu üretemezse renderer hiçbir şey üretmez. Gönder düğmesinin işlenip işlenmeyeceğini settings.show_button denetler.

Stat Card (`stat-card`)

Renderer kaynağı

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

Üretilen HTML

<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>

Ana CSS / WebBlocks UI sınıfları

wb-stat, wb-stat-label, wb-stat-value, wb-stat-detail, wb-link, ayrıca genel wb-public-block.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
subtitle	metin	.wb-stat-label öğesini işler.
title	metin	.wb-stat-value öğesini işler.
content	metin	.wb-stat-detail öğesini işler.
url	güvenli URL	.wb-link ile Learn more bağlantısı ekler.

Ne için kullanılır / Ne için kullanılmaz

Şunun için kullanın: bağımsız metrik kartları.

Şunun için kaçının: Columns stats varyantının daha derli toplu olduğu çok metrikli gruplar.

Notlar

Bu, kök sahibi olmayan bir içerik bloğudur. subtitle'ı etiket, title'ı değer, content'i ayrıntı olarak kullanır; isteğe bağlı standart URL ise Learn more bağlantısı için kullanılır.

Code (`code`)

Renderer kaynağı

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

Üretilen HTML

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

Ana CSS / WebBlocks UI sınıfları

Code renderer'ın kendisi herhangi bir WebBlocks UI sınıfı üretmez. Genel sarmalayıcı wb-public-block kullanır.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
settings.language	metin	Temizlenerek üzerindeki data-language özniteliğine aktarılır.
settings.lang	metin	data-language için eski geri dönüş değeri.
content	boş	Renderer hiçbir şey üretmez.

Ne için kullanılır / Ne için kullanılmaz

Şunun için kullanın: kod parçacıkları.

Şunun için kaçının: biçimlendirilmiş düzyazı veya komut listeleri; duruma göre Rich Text/List kullanın.

Notlar

İçerik boş olduğunda renderer erken döner. settings.language veya settings.lang, temizlenmiş bir data-language değerine dönüşür.

Download (`download`)

Renderer kaynağı

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

Üretilen HTML

<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>

Ana CSS / WebBlocks UI sınıfları

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

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
variant	primary	Düğme sınıfı wb-btn wb-btn-primary olur.
variant	ghost	Düğme sınıfı wb-btn wb-btn-ghost olur.
variant	secondary/varsayılan/diğer	Düğme sınıfı wb-btn wb-btn-secondary olur.
media_id	indirme medyası	Medya URL'si kullanılır; medya yoksa renderer hiçbir şey üretmez.
subtitle	metin	Yardımcı öğesini işler.

Ne için kullanılır / Ne için kullanılmaz

Şunun için kullanın: medya destekli indirme CTA'ları.

Şunun için kaçının: harici dosya kartları; medya varlığı yoksa File kullanın.

Notlar

Blok, kök <div> öğesinin sahibidir. Yalnızca downloadAsset() bir URL döndürdüğünde çıktı üretir. variant düğme sınıfını değiştirir.

File (`file`)

Renderer kaynağı

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

Üretilen HTML

<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>

Ana CSS / WebBlocks UI sınıfları

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.

Ayarlar -> sınıf / işaretleme haritası

Ayar	Değer	Çıktı etkisi
media_id	seçilen medya	Medya URL'si harici URL'ye göre önceliklidir.
url	güvenli harici URL	Yalnızca medya URL'si yokken kullanılır.
title/content	metin	Mevcut olduğunda görünür kart metni olarak oluşturulur.
kaynak kullanılamıyor	n/a	Renderer, kaynak kullanılabilirliğine bağlı olarak hiçbir şey ya da oynatılabilir denetim üretmez.

Şunun için kullanın / Şunun için kullanmayın

Şunun için kullanın: medya içeren veya incelenmiş harici URL yedeğine sahip dosya kartları.

Şunun için kullanmayın: Download düğmesinin yeterli olduğu basit medya indirmeleri.

Notlar

Blok kendi kök kartına sahiptir. Medya URL'si; güvenli bir harici http, https veya mailto URL'sine göre önceliklidir. Düğme etiketi medya için Download, harici URL için Open file şeklindedir.

Video (`video`)

Renderer kaynağı

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

Oluşturulan HTML

<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>

Gömme (embed) varyantı:

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

Ana CSS / WebBlocks UI sınıfları

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

Ayarlar -> sınıf / işaretleme haritası

Ayar	Değer	Çıktı etkisi
media_id	seçilen medya	Medya URL'si harici URL'ye göre önceliklidir.
url	güvenli harici URL	Yalnızca medya URL'si yokken kullanılır.
title/content	metin	Mevcut olduğunda görünür kart metni olarak oluşturulur.
kaynak kullanılamıyor	n/a	Renderer, kaynak kullanılabilirliğine bağlı olarak hiçbir şey ya da oynatılabilir denetim üretmez.

Şunun için kullanın / Şunun için kullanmayın

Şunun için kullanın: yüklenmiş video veya güvenli YouTube/Vimeo gömmeleri.

Şunun için kullanmayın: rastgele iframe HTML'i; Trusted HTML'i yalnızca incelenmiş yedek olarak kullanın.

Notlar

Blok kendi kök kartına sahiptir. Yüklenen medya yerel <video> olarak oluşturulur. Güvenli YouTube ve Vimeo URL'leri iframe gömmeleri olarak oluşturulur. Diğer güvenli HTTP URL'leri bir Open video düğmesi oluşturur.

Ses (`audio`)

Renderer kaynağı

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

Oluşturulan HTML

<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>

Ana CSS / WebBlocks UI sınıfları

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

Ayarlar -> sınıf / işaretleme haritası

Ayar	Değer	Çıktı etkisi
media_id	seçilen medya	Medya URL'si harici URL'ye göre önceliklidir.
url	güvenli harici URL	Yalnızca medya URL'si yokken kullanılır.
title/content	metin	Mevcut olduğunda görünür kart metni olarak oluşturulur.
kaynak kullanılamıyor	n/a	Renderer, kaynak kullanılabilirliğine bağlı olarak hiçbir şey ya da oynatılabilir denetim üretmez.

Şunun için kullanın / Şunun için kullanmayın

Şunun için kullanın: yüklenmiş veya güvenli harici ses medyası.

Şunun için kullanmayın: desteklenmeyen işaretleme gerektiren podcast/oynatıcı gömmeleri; Trusted HTML yedeğini gözden geçirin.

Notlar

Blok kendi kök kartına sahiptir. Yüklenen medya URL'si güvenli harici HTTP URL'sine göre önceliklidir.

Tablo (`table`)

Renderer kaynağı

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

Oluşturulan HTML

<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>

Ana CSS / WebBlocks UI sınıfları

wb-stack, wb-gap-2, wb-table-wrap, wb-table ve genel wb-public-block.

Ayarlar -> sınıf / işaretleme haritası

Ayar	Değer	Çıktı etkisi
variant	plain	Başlık satırı yok; tüm satırlar içinde oluşturulur.
variant	default/diğer	İlk satır içinde oluşturulur.
settings.rows	dizi	Mevcut olduğunda eski (legacy) satır kaynağı önceliklidir.
content	dikey çizgiyle ayrılmış satırlar	settings.rows boş olduğunda satır kaynağı olarak kullanılır.

Şunun için kullanın / Şunun için kullanmayın

Şunun için kullanın: basit yapılandırılmış tablolar.

Şunun için kullanmayın: yerleşim ızgaraları veya karmaşık etkileşimli veri tabloları.

Notlar

Satırlar, mevcut olduğunda eski settings.rows kaynağından, aksi halde dikey çizgiyle ayrılmış çevrilmiş içerik satırlarından gelir. variant = plain başlık satırı davranışını devre dışı bırakır.

Alıntı (`quote`)

Renderer kaynağı

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

Oluşturulan HTML

<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>

Referans (testimonial) varyantı:

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

Ana CSS / WebBlocks UI sınıfları

wb-stack, wb-gap-2, wb-m-0, isteğe bağlı wb-card, wb-card-muted, wb-card-body ve genel wb-public-block.

Ayarlar -> sınıf / işaretleme haritası

Ayar	Değer	Çıktı etkisi
variant	testimonial	Blok alıntısını wb-card wb-card-muted > .wb-card-body içine sarar.
variant	default/diğer	Düz oluşturur.
subtitle	metin	Başlık/içerik bağlamıyla birlikte içinde oluşturulur.

Şunun için kullanın / Şunun için kullanmayın

Şunun için kullanın: alıntılar ve referanslar (testimonial).

Şunun için kullanmayın: genel bilgi kutuları veya kartlar.

Notlar

Renderer'ın kendisi data-wb-public-block-type eklemez; genel sarmalayıcıyı üst düzey slot oluşturma sağlar.

Bağlantı Listesi (`link-list`)

Renderer kaynağı

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

Oluşturulan HTML

<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>

Ana CSS / WebBlocks UI sınıfları

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

Ayarlar -> sınıf / işaretleme haritası

Ayar	Değer	Çıktı etkisi
title/subtitle/content	metin	Bağlantıların üzerinde isteğe bağlı giriş yığınını oluşturur.
alt link-list-item	yayında olan alt bloklar	Alt blokları .wb-link-list içinde oluşturur.
alt blok yok	n/a	Renderer'ın gösterecek bağlantı satırı yoktur.

Şunun için kullanın / Şunun için kullanmayın

Şunun için kullanın: yapılandırılmış bağlantı listeleri.

Şunun için kullanmayın: tam gezinme menüleri; duruma göre Navbar/Navigation Auto kullanın.

Notlar

Blok yalnızca yayında olan link-list-item alt bloklarını oluşturur. Slot düzeyindeki köke sahip değildir.

Bağlantı Listesi Öğesi (`link-list-item`)

Renderer kaynağı

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

Oluşturulan HTML

<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>

Ana CSS / WebBlocks UI sınıfları

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

Ayarlar -> sınıf / işaretleme haritası

Ayar	Değer	Çıktı etkisi
url	güvenli URL	Çıktı için zorunludur; bağlantının href değeri olur.
title	metin	Çıktı için zorunludur; .wb-link-list-title oluşturur.
subtitle	metin	.wb-link-list-meta oluşturur.
content	metin	.wb-link-list-desc oluşturur.

Şunun için kullanın / Şunun için kullanmayın

Şunun için kullanın: Bağlantı Listesi'nin (Link List) alt blokları.

Şunun için kullanmayın: bağımsız düğmeler veya gezinme menüsü öğeleri.

Notlar

Renderer yalnızca hem güvenli bir URL hem de başlık mevcut olduğunda çıktı üretir. link-list bloğunun alt öğesi olarak tasarlanmıştır.

Otomatik Gezinme (`navigation-auto`)

Renderer kaynağı

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

Oluşturulan HTML

<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>

Alt bilgi/yasal menü varyantı:

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

Ana CSS / WebBlocks UI sınıfları

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.

Ayarlar -> sınıf / işaretleme haritası

Ayar	Değer	Çıktı etkisi
settings.menu_key veya settings.location	bilinen menü anahtarı	CMS gezinme menüsünü seçer; yardımcı, slot/subtitle temelinde primary/footer'a geri döner.
alt bilgi/yasal menü	footer veya legal anahtarı	Yığılmış .wb-link listesi oluşturur.
diğer menü	primary/default	Kümelenmiş düğme stilinde kök bağlantılar oluşturur.
etkin öğe	geçerli sayfa eşleşmesi	Renderer'ın çözümleyebildiği yerlerde current/active sınıflarını ekler.

Şunun için kullanın / Şunun için kullanmayın

Şunun için kullanın: CMS menülerinin uyumluluk amaçlı oluşturulması.

Şunun için kullanmayın: Navbar Navigation'ın amaçlanan alt blok olduğu yeni ortak üst bilgiler.

Notlar

Renderer, CMS gezinme menüsünü anahtara göre çözümler. Alt bilgi ve yasal menüler yığılmış bağlantılar olarak; diğer menüler kümelenmiş düğme stilinde kök bağlantılar olarak oluşturulur.

İçindekiler (`toc`)

Renderer kaynağı

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

Oluşturulan HTML

<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>

Ana CSS / WebBlocks UI sınıfları

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.

Ayarlar -> sınıf / işaretleme haritası

Ayar	Değer	Çıktı etkisi
title	metin	Başlık etiketini oluşturur; varsayılan görünür etiket geçerli renderer davranışıdır.
aynı sayfadaki Header blokları	çapalı ve yayında	.wb-link-list-item bağlantıları üretir.
başlık varyantı	h3	Açıklama Jump to subsection der; diğerleri Jump to section der.
uygun başlık yok	n/a	Renderer hiçbir şey üretmez.

Şunun için kullanın / Şunun için kullanmayın

Şunun için kullanın: çapalı Header bloklarından oluşturulan aynı sayfa içindekiler listeleri.

Şunun için kullanmayın: elle oluşturulan bağlantı listeleri; Link List kullanın.

Notlar

Renderer, aynı sayfa ağacındaki çapalı ve yayında olan Header bloklarını okur. Uygun başlık yoksa hiçbir şey üretmez.

Uyarı (`alert`)

Renderer kaynağı

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

Oluşturulan HTML

<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>

Ana CSS / WebBlocks UI sınıfları

wb-alert, alertVariantClass() tarafından belirlenen varyant sınıfı, wb-alert-title ve genel wb-public-block.

Ayarlar -> sınıf / işaretleme haritası

Ayar	Değer	Çıktı etkisi
settings.variant	success/warning/danger	alertVariantClass(); wb-alert-success, wb-alert-warning veya wb-alert-danger ekler.
settings.variant	info/default/diğer	wb-alert-info ekler.
title	metin	.wb-alert-title oluşturur.
content	metin	Uyarı gövdesini oluşturur.

Şunun için kullanın / Şunun için kullanmayın

Şunun için kullanın: sayfa içi kullanıcıya yönelik bildirimler.

Şunun için kullanmayın: pazarlama tanıtımları; CTA/Hero kullanın.

Notlar

Blok, slot düzeyindeki köke sahip değildir. Ortak varyant, uyarının ton sınıfını denetler.

İletişim Formu (`contact_form`)

Renderer kaynağı

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

Oluşturulan HTML

<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>

Ana CSS / WebBlocks UI sınıfları

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.

Ayarlar -> sınıf / işaretleme haritası

Ayar	Değer	Çıktı etkisi
site iletişim alıcısı	yapılandırılmış	Form, gizli site/sayfa bağlamıyla birlikte contact-messages.store hedefine gönderilir.
doğrulama hataları	mevcut	wb-alert wb-alert-danger ve alan düzeyinde geri bildirim oluşturur.
settings submit/success etiketleri	eski çevrilmiş ayarlar	Çeviri çözümleyici/yazıcı tarafından dışarı taşınmıştır; görünür çıktı, geçerli çevrilmiş blok alanlarını izler.

Genel form, Trusted HTML içeriği değil, yerel Blade çıktısıdır. Tarayıcı gönderimleri CSRF gerektirir; CMS'e ait, otomatik oluşturulan gizli istenmeyen posta denetim alanını içerir; zorunlu alanları sunucu tarafında doğrular; meşru mesajları önce depolar ve ardından belgelenen alıcı yedekleme sırasını kullanarak e-posta bildirimi göndermeyi dener. Denetim alanı renderer tarafından oluşturulur ve normal ziyaretçi girdisinin bir parçası değildir.

Şunun için kullanın / Şunun için kullanmayın

Şunun için kullanın: ürüne ait iletişim mesajı iş akışı.

Şunun için kullanmayın: ham HTML formları veya üçüncü taraf gömmeleri; ancak Trusted HTML olarak incelenmişlerse kullanılabilirler.

Notlar

Renderer; gizli alanları, CSRF'yi, inert ve aria-hidden="true" içeren .wb-form-check istenmeyen posta önleme işaretlemesini ve hedefe yönelik doğrulama hatalarını içerir; gönderimi contact-messages.store hedefine yapar. Eski website alanı artık genel renderer sözleşmesinin parçası değildir.

Breadcrumb (`breadcrumb`)

Renderer kaynağı

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

Oluşturulan HTML

<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>

Ana CSS / WebBlocks UI sınıfları

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

Ayarlar -> sınıf / işaretleme haritası

Ayar	Değer	Çıktı etkisi
settings.home_label	metin	Ana sayfa breadcrumb etiketini geçersiz kılar.
settings.include_current	false	Geçerli sayfa breadcrumb'ını atlar.
settings.include_current	true/varsayılan	Geçerli sayfa breadcrumb'ını içerir.
ana sayfa	include_current true	Yalnızca geçerli sayfa breadcrumb'ını oluşturur.

Şunun için kullanın / Şunun için kullanmayın

Şunun için kullanın: hiyerarşik sayfa gezinmesi.

Şunun için kullanmayın: birincil site gezinmesi.

Notlar

Ana sayfa etiketi ve geçerli sayfanın dahil edilmesi ayarlarla yönetilir. Ana sayfada, include_current true olduğunda yalnızca geçerli sayfa breadcrumb'ı oluşturulur.

Kenar Çubuğu Markası (`sidebar-brand`)

Renderer kaynağı

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

Oluşturulan HTML

<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>

Ana CSS / WebBlocks UI sınıfları

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

Ayarlar -> sınıf / işaretleme haritası

Ayar	Değer	Çıktı etkisi
settings.url	güvenli URL	Marka bağlantısı için kaydedilen URL önceliklidir.
settings.url	boş	Site ana sayfa yoluna, ardından / yoluna geri döner.
settings.target	_blank	target="_blank" rel="noopener noreferrer" ekler.
settings.aria_label	metin	Görünür metin render edilmediğinde erişilebilir etiket olarak kullanılır.
media_id	logo medyası	wb-sidebar-brand içinde marka görselini render eder.

Kullanın / Kullanmayın

Kullanın: kenar çubuğu yerleşimlerinde site/dokümantasyon kimliği için.

Kullanmayın: navbar kimliği için; orada Navbar Brand kullanın.

Notlar

Blok, kenar çubuğu kabuğuna sahip değildir. Kaydedilen URL önceliklidir, ardından site ana sayfa yolu, ardından / gelir. Yalnızca logo içeren çıktı aria-label kullanır.

Kenar Çubuğu Gezinmesi (`sidebar-navigation`)

Renderer kaynağı

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

Render edilen HTML

<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>

Ana CSS / WebBlocks UI sınıfları

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.

Ayarlar -> sınıf / markup eşlemesi

Ayar	Değer	Çıktı etkisi
settings.menu_key	bilinen menü anahtarı	Mevcut olduğunda CMS Navigation ağacını render eder.
manuel alt bloklar	sidebar-nav-item/sidebar-nav-group	Menü modu öğe sağlamadığında manuel alt blokları render eder.
settings.show_icons	boolean	Simge görünürlüğü etkisi kaynak kodundan doğrulanmalıdır.
settings.active_matching	değer	Etkin eşleştirme davranışı yardımcı (helper) tarafından yönetilir; eşleşme olduğunda görünür çıktı is-active/aria-current olur.

Kullanın / Kullanmayın

Kullanın: dokümantasyon/kenar çubuğu gezinme blokları için.

Kullanmayın: gezinme semantiği olmayan sıradan pazarlama kenar çubukları için.

Notlar

Blok, bir CMS Navigation menüsünü veya manuel alt sidebar-nav-item / sidebar-nav-group bloklarını render edebilir. Dıştaki sayfa/kenar çubuğu kabuğuna sahip değildir.

Kenar Çubuğu Gezinme Öğesi (`sidebar-nav-item`)

Renderer kaynağı

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

Render edilen HTML

<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>

İç içe grup öğesi:

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

Ana CSS / WebBlocks UI sınıfları

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

Ayarlar -> sınıf / markup eşlemesi

Ayar	Değer	Çıktı etkisi
settings.url	güvenli URL	Çıktı için zorunludur.
settings.target	_blank	Harici target/rel özniteliklerini ekler.
settings.icon	simge kısa adı/sınıfı	Yapılandırıldığında wb-icon ... wb-sidebar-icon render eder.
settings.active_mode	exact/current-page/manual/default	Etkin durum yardımcısını kontrol eder; görünür çıktı is-active ve aria-current olur.
settings.manual_active	true	Etkin mod manual olduğunda etkin çıktıyı zorlayabilir.

Kullanın / Kullanmayın

Kullanın: manuel kenar çubuğu bağlantıları için.

Kullanmayın: navbar bağlantıları veya genel düğmeler için.

Notlar

Renderer, işi sidebar-nav-item-link.blade.php dosyasına devreder. Hem URL hem etiket olmadan hiçbir şey üretmez.

Kenar Çubuğu Gezinme Grubu (`sidebar-nav-group`)

Renderer kaynağı

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

Render edilen HTML

<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>

Ana CSS / WebBlocks UI sınıfları

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.

Ayarlar -> sınıf / markup eşlemesi

Ayar	Değer	Çıktı etkisi
settings.icon	simge kısa adı/sınıfı	Yapılandırıldığında grup simgesi markup'ını render eder.
settings.initially_open	true/default	is-open ekler.
settings.initially_open	false	Grup kapalı başlar.
alt sidebar-nav-item	yayında alt bloklar	.wb-nav-group-items içinde render edilir.

Kullanın / Kullanmayın

Kullanın: Kenar Çubuğu Gezinmesi içindeki katlanabilir gruplar için.

Kullanmayın: genel akordeonlar için; Accordion kullanın.

Notlar

Grup yalnızca bir etiketi ve yayında sidebar-nav-item alt blokları olduğunda render edilir. WebBlocks UI nav-group kancalarını kullanır.

Kenar Çubuğu Alt Bilgisi (`sidebar-footer`)

Renderer kaynağı

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

Render edilen HTML

<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>

Ana CSS / WebBlocks UI sınıfları

wb-sidebar-footer, wb-callout, sidebarFooterVariantClass() kaynaklı varyant sınıfı, wb-callout-title, wb-text-xs, wb-text-muted, wb-mt-3, wb-mb-0.

Ayarlar -> sınıf / markup eşlemesi

Ayar	Değer	Çıktı etkisi
settings.variant	success/warning/danger	sidebarFooterVariantClass(), wb-callout-success, wb-callout-warning veya wb-callout-danger ekler.
settings.variant	info/default/diğer	wb-callout-info ekler.
title/content/subtitle	tümü boş	Renderer hiçbir şey üretmez.
subtitle	metin	Alt bilgi notunu wb-text-xs wb-text-muted wb-mt-3 wb-mb-0 ile render eder.

Kullanın / Kullanmayın

Kullanın: küçük kenar çubuğu notları veya eylem çağrıları için.

Kullanmayın: ana sayfa CTA'ları için.

Notlar

Blok yalnızca title/content/subtitle mevcut olduğunda render edilir. Kenar çubuğu kabuğuna sahip değildir.

HTML (Güvenilir) (`html`)

Renderer kaynağı

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

Render edilen HTML

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

Ana CSS / WebBlocks UI sınıfları

Renderer'ın kendisi sabit bir WebBlocks UI sınıfı eklemez. Genel sarmalayıcı wb-public-block kullanır.

Ayarlar -> sınıf / markup eşlemesi

Ayar	Değer	Çıktı etkisi
content	güvenilir HTML	Genel public sarmalayıcı içindeki düz bir içinde render edilir.
overlay/body-end parçaları	extractor tarafından tanınır	TrustedHtmlOverlayExtractor, PublicOverlayRegistry ve PublicBodyEndRegistry aracılığıyla yukarı taşınabilir.
güvenilmeyen içerik	n/a	Kullanmayın; bu renderer güvenilir statik markup varsayar.

Kullanın / Kullanmayın

Kullanın: yapılandırılmış blokların henüz temsil edemediği, gözden geçirilmiş yedek markup için.

Kullanmayın: varsayılan taşınmış/yapay zekâ ile oluşturulmuş sayfa çıktısı için.

Notlar

Güvenilir HTML, TrustedHtmlOverlayExtractor, PublicOverlayRegistry ve PublicBodyEndRegistry aracılığıyla overlay ve body-end parçalarını çıkarabilir. Bunu yalnızca güvenilir statik markup için kullanın.

Düğme (`button`)

Renderer kaynağı

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

Render edilen HTML

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

URL'siz varyant:

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

Ana CSS / WebBlocks UI sınıfları

wb-btn, wb-btn-primary, wb-btn-secondary, wb-btn-outline, wb-btn-ghost, wb-btn-danger, isteğe bağlı alt blok sarmalayıcısı wb-stack wb-gap-4.

Ayarlar -> sınıf / markup eşlemesi

Ayar	Değer	Çıktı etkisi
variant	primary/secondary/outline/ghost/danger	wb-btn ile birlikte ilgili varyant sınıfına eşlenir.
variant	boş/diğer	Varsayılan olarak wb-btn wb-btn-primary kullanılır.
ek (attachment) medya URL'si	mevcut	Uyumluluk için kanonik URL'ye göre önceliklidir.
url	ek olmadan mevcut	Bağlantı (anchor) render eder.
url	boş	Etkisiz bir render eder.

Kullanın / Kullanmayın

Kullanın: Hero/CTA içindeki yönetilen alt eylemler için.

Kullanmayın: bağımsız sayfa düğmeleri için; Button Link kullanın.

Notlar

Bu, Hero/CTA için yönetilen bir alt eylem bloğudur. CoreBlockTypeCatalogSyncer kaynaklı güncel yayınlanan katalog listesinde yer almaz, ancak public renderer'lar ve dönüştürme desteği mevcuttur. Uyumluluk için ek (attachment) URL'si kanonik URL'ye göre önceliklidir.

Callout (`callout`)

Renderer kaynağı

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

Render edilen HTML

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

Ana CSS / WebBlocks UI sınıfları

wb-alert, wb-alert-info, wb-alert-success, wb-alert-warning, wb-alert-danger, wb-alert-title, isteğe bağlı alt blok sarmalayıcısı wb-stack wb-gap-4.

Ayarlar -> sınıf / markup eşlemesi

Ayar	Değer	Çıktı etkisi
variant	success/warning/danger	Eşleşen wb-alert-{tone} sınıfını ekler.
variant	info/default/diğer	wb-alert-info ekler.
alt bloklar	yayında alt bloklar	Sonrasında wb-stack wb-gap-4 içinde render edilir.
tercih edilen yeni sayfalar	n/a	Birinci sınıf yeni sayfa bildirimleri için Alert kullanın.

Kullanın / Kullanmayın

Kullanın: eski/dönüştürücü uyumlu, uyarı benzeri içerik için.

Kullanmayın: yeni yapılandırılmış sayfalar için; Alert kullanın.

Notlar

callout, eski/dönüştürme uyumlu bir renderer'dır ve görsel olarak alert desenine karşılık gelir. Güncel yayınlanan çekirdek katalog satırı olarak listelenmez; alert ise listelenir.

Liste (`list`)

Renderer kaynağı

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

Render edilen HTML

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

Ana CSS / WebBlocks UI sınıfları

wb-stack, wb-gap-2, wb-gap-1, isteğe bağlı alt blok sarmalayıcısı wb-stack wb-gap-4.

Ayarlar -> sınıf / markup eşlemesi

Ayar	Değer	Çıktı etkisi
variant	ordered	render eder.
variant	default/diğer	render eder.
settings.items/cards/entries	dizi	Mevcut olduğunda öğe kaynağı olarak kullanılır.
content	satır satır ayrılmış metin	Yedek öğe kaynağı olarak kullanılır.
title	metin	Listenin üzerinde başlık render eder.

Kullanın / Kullanmayın

Kullanın: basit içe aktarılmış veya elle girilmiş listeler için.

Kullanmayın: gezinme listeleri veya Rich Text'e ait olan zengin gövde metni için.

Notlar

Bu renderer uyumluluk ve dönüştürme için vardır. Öğeler ayarlardan (items, cards, entries) veya satır satır ayrılmış içerikten gelir. variant = ordered, ul öğesini ol öğesine çevirir.

Metin (`text`)

Renderer kaynağı

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

Render edilen HTML

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

Ana CSS / WebBlocks UI sınıfları

wb-stack, wb-gap-2, isteğe bağlı alt blok sarmalayıcısı wb-stack wb-gap-4.

Ayarlar -> sınıf / markup eşlemesi

Ayar	Değer	Çıktı etkisi
title	metin	Mevcut olduğunda paragrafın üzerinde render eder.
content	metin	wb-stack wb-gap-2 içinde bir paragraf render eder.
alt bloklar	yayında alt bloklar	Sonrasında alt blokları wb-stack wb-gap-4 içinde render eder.

Kullanın / Kullanmayın

Kullanın: zaten bu renderer'a bağlı olan eski veya dönüştürücü uyumlu içerik için.

Kullanmayın: yeni elle oluşturulan sayfalar için; üst kısımda listelenen kanonik yapılandırılmış blokları kullanın.

Notlar

Bu bir uyumluluk renderer'ıdır. Güncel kanonik düz gövde metni çekirdek bloğu plain_text bloğudur.

Dahili Eylemler Parçası (`_actions`)

Renderer kaynağı

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

Render edilen HTML

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

Ana CSS / WebBlocks UI sınıfları

Varsayılan sarmalayıcı wb-cluster wb-cluster-2 veya çağıran tarafından sağlanan bir sarmalayıcı sınıfı.

Ayarlar -> sınıf / markup eşlemesi

Ayar	Değer	Çıktı etkisi
buttons girdisi	type değeri button olan alt bloklar	Yalnızca button alt bloklarına filtreler ve onları render eder.
wrapperClass girdisi	sağlanan sınıf dizesi	Sağlanan sarmalayıcı sınıfını kullanır.
wrapperClass girdisi	boş	Varsayılan olarak wb-cluster wb-cluster-2 kullanılır.

Kullanın / Kullanmayın

Kullanın: renderer'a ait Hero/CTA eylem çıktısı için.

Kullanmayın: doğrudan sayfa kompozisyonu için.

Notlar

Bu, bağımsız yayınlanan bir blok değil, dahili bir yardımcı parçadır. Sağlanan koleksiyonu button alt bloklarına filtreler ve her alt bloğu normal blok parçası üzerinden render eder.

Kart Izgarası (`card-grid`)

Renderer kaynağı

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

Render edilen HTML

<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>

Ana CSS / WebBlocks UI sınıfları

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.

Ayarlar -> sınıf / markup eşlemesi

Ayar	Değer	Çıktı etkisi
settings.items	dizi	Kart çıktısını yönlendirir; her öğe asset_id, title, content, url ve url_label içerebilir.
settings.items sayısı	0-1/2/3/4+	wb-stack wb-gap-3, wb-grid wb-grid-2, wb-grid wb-grid-3 veya wb-grid wb-grid-4 kullanır.
item.asset_id	medya id	Medya URL'si mevcut olduğunda öğe görselini render eder.
item.url + item.url_label	metin	a.wb-link render eder.

Kullanın / Kullanmayın

Kullanın: zaten bu renderer'a bağlı olan eski veya dönüştürücü uyumlu içerik için.

Kullanmayın: yeni elle oluşturulan sayfalar için; üst kısımda listelenen kanonik yapılandırılmış blokları kullanın.

Notlar

Bu, settings.items tarafından beslenen bir eski/uyumluluk renderer'ıdır. Izgara sınıfı öğe sayısına göre değişir.

İletişim Bilgileri (`contact-info`)

Renderer kaynağı

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

Render edilen HTML

<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>

Ana CSS / WebBlocks UI sınıfları

wb-card, wb-card-muted, wb-card-body, wb-stack, wb-gap-3, wb-gap-1, wb-link, ayrıca CMS'e özgü wb-public-contact-card ve wb-public-contact-meta.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
settings.items	dizi	wb-public-contact-meta içinde iletişim satırlarını oluşturur.
item.url	güvenli URL	Değeri wb-link ile bağlantılı olarak oluşturur.
item.target	_blank	Harici target/rel özniteliklerini ekler.
item.label/value	metin	Güvenli bir URL yoksa etiketi ve düz değeri oluşturur.

Şunun için kullanın / Şunun için kullanmayın

Şunun için kullanın: hâlihazırda bu renderer'a bağımlı olan eski (legacy) veya dönüştürücü uyumlu içerik.

Şunun için kullanmayın: elle oluşturulan yeni sayfalar; sayfanın üst kısmında listelenen standart yapılandırılmış blokları kullanın.

Notlar

Bu, settings.items tarafından desteklenen eski (legacy)/uyumluluk amaçlı bir renderer'dır. Bağlantılar Block::safePublicUrl() üzerinden geçirilir.

SSS Listesi (`faq-list`)

Renderer kaynağı

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

Oluşturulan HTML

<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>

Ana CSS / WebBlocks UI sınıfları

accordion renderer'ının sınıflarını kullanır.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
renderer davranışı	devredilmiş	Accordion renderer'ını doğrudan dahil eder.
alt satırlar	başlık ve içerik	Accordion açılır öğe (disclosure) sözleşmesine uyar.
yeni sayfalarda tercih	yok (n/a)	Standart üst blok olarak accordion kullanın.

Şunun için kullanın / Şunun için kullanmayın

Şunun için kullanın: hâlihazırda bu renderer'a bağımlı olan eski (legacy) veya dönüştürücü uyumlu içerik.

Şunun için kullanmayın: elle oluşturulan yeni sayfalar; sayfanın üst kısmında listelenen standart yapılandırılmış blokları kullanın.

Notlar

Bu uyumluluk partial'ı doğrudan accordion.blade.php dosyasına devreder.

Galeri Görüntüleyici (`gallery-viewer`)

Renderer kaynağı

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

Oluşturulan HTML

<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>

Ana CSS / WebBlocks UI sınıfları

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.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
viewerId girdisi	id dizesi	Galeri tetikleyicilerinin kullandığı modal/galeri hedef id'sini ayarlar.
galleryItems girdisi	koleksiyon	Görüntüleyici slaytlarını/öğelerini Galeri tarafından hazırlanan öğe verilerinden oluşturur.
doğrudan blok ayarları	yok (n/a)	Dahili partial; bağımsız bir blok ayarları eşlemesi yoktur.

Şunun için kullanın / Şunun için kullanmayın

Şunun için kullanın: Galeri tarafından kaydedilen galeri lightbox katman (overlay) işaretlemesi.

Şunun için kullanmayın: sayfa bloğu olarak elle kullanım.

Notlar

Bu, bağımsız bir blok değil; galeri/vitrin renderer'ları tarafından PublicOverlayRegistry aracılığıyla kullanılan bir katman (overlay) yardımcısıdır.

Harita (`map`)

Renderer kaynağı

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

Oluşturulan HTML

<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>

Ana CSS / WebBlocks UI sınıfları

wb-card, wb-card-muted, wb-card-body, wb-stack, wb-gap-2, wb-m-0, wb-btn, wb-btn-secondary, isteğe bağlı alt sarmalayıcı wb-stack wb-gap-4.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
url	http/https URL	Güvenli bir harita kaynağı olarak kabul edilir ve içerikten farklı olduğunda görüntülenir.
content	metin veya sorgu	Harita sorgusu için yedek (fallback) olarak kullanılır.
title	metin	Kart içinde oluşturur.
children	yayında olan alt bloklar	Alt blokları sonrasında wb-stack wb-gap-4 içinde oluşturur.

Şunun için kullanın / Şunun için kullanmayın

Şunun için kullanın: hâlihazırda bu renderer'a bağımlı olan eski (legacy) veya dönüştürücü uyumlu içerik.

Şunun için kullanmayın: elle oluşturulan yeni sayfalar; sayfanın üst kısmında listelenen standart yapılandırılmış blokları kullanın.

Notlar

Bu, eski (legacy)/uyumluluk amaçlı bir renderer'dır. Ham URL için yalnızca http ve https URL şemalarını kabul eder ve karttan sonra alt blokları oluşturabilir.

Menü (`menu`)

Renderer kaynağı

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

Oluşturulan HTML

<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>

Ana CSS / WebBlocks UI sınıfları

navigation-auto renderer'ının sınıflarını kullanır.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
renderer davranışı	devredilmiş	Navigation Auto renderer'ını doğrudan dahil eder.
settings.menu_key/location	bilinen menü anahtarı	Navigation Auto menü seçim davranışını izler.
yeni sayfalarda tercih	yok (n/a)	menu yerine bilinçli olarak Navbar Navigation veya Navigation Auto kullanın.

Şunun için kullanın / Şunun için kullanmayın

Şunun için kullanın: hâlihazırda bu renderer'a bağımlı olan eski (legacy) veya dönüştürücü uyumlu içerik.

Şunun için kullanmayın: elle oluşturulan yeni sayfalar; sayfanın üst kısmında listelenen standart yapılandırılmış blokları kullanın.

Notlar

Bu uyumluluk partial'ı doğrudan navigation-auto.blade.php dosyasına devreder.

Metrik Kartı (`metric-card`)

Renderer kaynağı

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

Oluşturulan HTML

<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>

Ana CSS / WebBlocks UI sınıfları

wb-stat, wb-stat-label, wb-stat-value, wb-stat-delta, isteğe bağlı alt sarmalayıcı wb-stack wb-gap-4.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
renderer davranışı	devredilmiş takma ad (alias)	Mevcut bir renderer yoluna devreder; tam ayar eşlemesi, görünür olduğu ölçüde devredilen renderer'ı izler.
yeni sayfalarda tercih	yok (n/a)	Bu takma ad/uyumluluk bloğu yerine Notlar bölümünde adı geçen standart bloğu tercih edin.

Şunun için kullanın / Şunun için kullanmayın

Şunun için kullanın: eski metric-card takma ad (alias) içeriği.

Şunun için kullanmayın: yeni içerik; Stat Card veya Columns istatistiklerini kullanın.

Notlar

Bu, eski (legacy)/uyumluluk amaçlı bir metrik renderer'ıdır. Güncel yayımlanmış katalog stat-card kullanır.

Vitrin Listesi (`showcase-list`)

Renderer kaynağı

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

Oluşturulan HTML

<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>

Ana CSS / WebBlocks UI sınıfları

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, ayrıca CMS'e özgü wb-public-showcase-item.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
settings.items	dizi	Her giriş için soluk (muted) kart stilinde bir vitrin öğesi oluşturur.
item.images[].asset_id	medya id'si	Galeri figürlerini oluşturur ve görseller mevcut olduğunda ortak bir galeri görüntüleyicisi kaydeder.
item.url	güvenli URL	target/rel ile harici wb-link oluşturur.
item.title/subtitle/url_label	metin	Vitrin başlıklarını ve bağlantı etiketini oluşturur.

Şunun için kullanın / Şunun için kullanmayın

Şunun için kullanın: hâlihazırda bu renderer'a bağımlı olan eski (legacy) veya dönüştürücü uyumlu içerik.

Şunun için kullanmayın: elle oluşturulan yeni sayfalar; sayfanın üst kısmında listelenen standart yapılandırılmış blokları kullanın.

Notlar

Bu, settings.items tarafından desteklenen eski (legacy)/uyumluluk amaçlı bir renderer'dır. gallery-viewer katman (overlay) işaretlemesini PublicOverlayRegistry içine ekleyebilir.

Kenar Çubuğu Gezinme Öğesi Bağlantısı (`sidebar-nav-item-link`)

Renderer kaynağı

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

Oluşturulan HTML

<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>

Ana CSS / WebBlocks UI sınıfları

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

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
nested girdisi	true	wb-nav-group-item kullanır.
nested girdisi	false	wb-sidebar-link kullanır.
kenar çubuğu öğesi URL/etiketi	mevcut	Bağlantı (anchor) çıktısı için gereklidir.
öğe simgesi	yapılandırılmış	i.wb-icon.wb-icon-{icon}.wb-sidebar-icon oluşturur.
aktiflik yardımcısı	true	is-active ve aria-current="page" ekler.

Şunun için kullanın / Şunun için kullanmayın

Şunun için kullanın: kenar çubuğu öğe renderer'larının paylaştığı dahili kenar çubuğu bağlantı çıktısı.

Şunun için kullanmayın: doğrudan sayfa kompozisyonu.

Notlar

Bu, sidebar-nav-item ve sidebar-nav-group için dahili bir yardımcıdır. İç içe oluşturulduğunda sınıf wb-nav-group-item olarak değişir.

Kenar Çubuğu Gezinme Menüsü Öğesi (`sidebar-navigation-menu-item`)

Renderer kaynağı

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

Oluşturulan HTML

<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>

Ana CSS / WebBlocks UI sınıfları

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.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
NavigationItem link_type	görünür alt öğeleri olan grup	Açma/kapama düğmesi ve iç içe öğelerle .wb-nav-group oluşturur.
nested girdisi	true	Alt bağlantılar wb-nav-group-item kullanır.
showIcons girdisi	true	Öğelerin kenar çubuğu simgelerinin oluşturulmasına izin verir.
aktiflik yardımcısı	true	Uygun olduğunda is-open/is-active ve aria-current ekler.

Şunun için kullanın / Şunun için kullanmayın

Şunun için kullanın: kenar çubuğu gezinmesi için dahili CMS menü öğesi oluşturma.

Şunun için kullanmayın: doğrudan sayfa kompozisyonu.

Notlar

Bu yardımcı, sidebar-navigation bloğu elle eklenen alt bloklar yerine bir menüye dayandığında CMS NavigationItem satırlarını oluşturur.

Slider (`slider`)

Renderer kaynağı

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

Oluşturulan HTML

<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>

Ana CSS / WebBlocks UI sınıfları

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.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
galeri medyası	bir veya daha fazla varlık	Slaytları galleryAssets() üzerinden oluşturur.
galeri medya sayısı	birden fazla	Önceki/sonraki denetimlerini ve noktaları oluşturur.
title	metin	Slider'ın üzerinde oluşturur.
subtitle	metin	Slider'ın altında soluk yardımcı metin oluşturur.

Şunun için kullanın / Şunun için kullanmayın

Şunun için kullanın: hâlihazırda bu renderer'a bağımlı olan eski (legacy) veya dönüştürücü uyumlu içerik.

Şunun için kullanmayın: elle oluşturulan yeni sayfalar; sayfanın üst kısmında listelenen standart yapılandırılmış blokları kullanın.

Notlar

Bu, galleryAssets() tarafından desteklenen eski (legacy)/uyumluluk amaçlı bir renderer'dır. Slider denetimleri yalnızca birden fazla slayt varlığı bulunduğunda oluşturulur.

İstatistikler (`stats`)

Renderer kaynağı

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

Oluşturulan HTML

<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>

Ana CSS / WebBlocks UI sınıfları

columns renderer'ını variant = stats ile kullanır; alt column_item blokları için wb-stat, wb-stat-label, wb-stat-value ve wb-stat-delta dahildir.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
renderer davranışı	devredilmiş takma ad (alias)	Mevcut bir renderer yoluna devreder; tam ayar eşlemesi, görünür olduğu ölçüde devredilen renderer'ı izler.
yeni sayfalarda tercih	yok (n/a)	Bu takma ad/uyumluluk bloğu yerine Notlar bölümünde adı geçen standart bloğu tercih edin.

Şunun için kullanın / Şunun için kullanmayın

Şunun için kullanın: eski stats takma ad (alias) içeriği.

Şunun için kullanmayın: yeni istatistik grupları; stats varyantlı Columns veya Stat Card kullanın.

Notlar

Bu uyumluluk partial'ı, varyantı stats olarak zorladıktan sonra columns.blade.php dosyasına devreder.

Sekmeler (`tabs`)

Renderer kaynağı

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

Oluşturulan HTML

<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>

Ana CSS / WebBlocks UI sınıfları

wb-card, wb-card-header, wb-card-body, isteğe bağlı alt sarmalayıcı wb-stack wb-gap-4.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
title	metin/varsayılan	Kart başlığını oluşturur; varsayılan değer Tab olur.
subtitle	metin	İkincil başlık span'ını oluşturur.
content	metin/HTML metni	.wb-card-body içinde oluşturur.
children	yayında olan alt bloklar	Alt blokları sonrasında wb-stack wb-gap-4 içinde oluşturur.

Şunun için kullanın / Şunun için kullanmayın

Şunun için kullanın: hâlihazırda bu renderer'a bağımlı olan eski (legacy) veya dönüştürücü uyumlu içerik.

Şunun için kullanmayın: elle oluşturulan yeni sayfalar; sayfanın üst kısmında listelenen standart yapılandırılmış blokları kullanın.

Notlar

Bu, eski (legacy)/uyumluluk amaçlı bir renderer'dır. Alt bloklar varsa bunları karttan sonra oluşturur.

Referans (Testimonial) (`testimonial`)

Renderer kaynağı

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

Oluşturulan HTML

<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>

Ana CSS / WebBlocks UI sınıfları

quote renderer'ını variant = testimonial ile kullanır.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
renderer davranışı	devredilmiş takma ad (alias)	Mevcut bir renderer yoluna devreder; tam ayar eşlemesi, görünür olduğu ölçüde devredilen renderer'ı izler.
yeni sayfalarda tercih	yok (n/a)	Bu takma ad/uyumluluk bloğu yerine Notlar bölümünde adı geçen standart bloğu tercih edin.

Şunun için kullanın / Şunun için kullanmayın

Şunun için kullanın: eski testimonial takma ad (alias) içeriği.

Şunun için kullanmayın: yeni alıntılar; gerekirse testimonial varyantlı Quote kullanın.

Notlar

Bu uyumluluk partial'ı, varyantı testimonial olarak zorladıktan sonra quote.blade.php dosyasına devreder.

Yedek Renderer (`fallback`)

Renderer kaynağı

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

Oluşturulan HTML

<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>

Ana CSS / WebBlocks UI sınıfları

Fallback dalları, 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 ve wb-select dahil olmak üzere mevcut temel öğeleri kullanır.

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
settings.items/cards/entries	diziler	Fallback dalına bağlı olarak uyumluluk amaçlı liste/kart tarzı çıktıyı yönlendirebilir.
settings.rows/options/related_slugs	diziler	Mevcut olduğunda fallback dalları tarafından kullanılır.
blok türü/kaynak bağlamı	değişken	Tam dal seçimi için kaynak kod doğrulaması gerekir.

Şunun için kullanın / Şunun için kullanmayın

Şunun için kullanın: desteklenmeyen üretim blokları için güvenli, indirgenmiş oluşturma.

Şunun için kullanmayın: planlı sayfa kompozisyonu veya normal geçişler.

Notlar

Bu, bilinmeyen veya geçiş aşamasındaki slug'lar için güvenlik renderer'ıdır. comparison, timeline, product-card, pagination, input, textarea, select, checkbox-group ve radio-group gibi eski slug'lar için dala özgü çıktı içerir. Mevcut olduklarında özel renderer dosyalarını belgelemeyi tercih edin.

Eksik Renderer (`missing-renderer`)

Renderer kaynağı

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

Oluşturulan HTML

<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>

Ana CSS / WebBlocks UI sınıfları

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

Ayarlar -> sınıf / işaretleme eşlemesi

Ayar	Değer	Çıktı etkisi
tür slug'ı	renderer'ı eksik herhangi bir slug	Beklenen renderer dosyasını belirten bir uyarı kutusu gösterir.
ortam	üretim dışı fallback yolu	Üretim dışında genel (public) bir renderer bulunmadığında kullanılır.
çalışma zamanı ayarları	yok (n/a)	Hiçbir blok ayarı bu uyarı çıktısını etkilemez.

Şunun için kullanın / Şunun için kullanmayın

Şunun için kullanın: üretim dışında renderer bulunmadığında geliştirici görünürlüğü.

Şunun için kullanmayın: genel (public) içerik tasarımı.

Notlar

Bu tanılama renderer'ı, somut bir blok renderer'ı çözümlenemediğinde kullanılır.