Düzenleme yapanlar için tasarlandı
block.json ve blockstudio.json içinde tanımlanan geniş alan çekmecesi, araç çubuğu denetimleri, editör politikaları ve yönetici envanteri.
Her alan için yer
Yineleyiciler, kod alanları ve iç içe gruplar kenar çubuğuna sığmaz. Blok başlığındaki Open Expanded Editor düğmesi, aynı alanları sağdan açılan daha geniş bir çekmecede gösterir. Bitti’ye tıklayın, arka plana tıklayın veya Esc tuşuna basın; çekmece kapanır ve blok seçili kalır.
Aynı alan oluşturucu aynı öznitelikleri yazar; böylece siz yazarken önizleme güncellenir ve block.json ayarı gerekmez. İçeriğin yanında bulunması gereken alanlar "position": "toolbar" ile blok araç çubuğuna taşınabilir.
{
"name": "my-theme/hero",
"title": "Hero",
"blockstudio": {
"attributes": [
{
"id": "alignment",
"type": "select",
"label": "Alignment",
"position": "toolbar",
"options": [
{ "value": "left", "label": "Left" },
{ "value": "center", "label": "Center" },
{ "value": "right", "label": "Right" }
]
},
{
"id": "title",
"type": "text",
"label": "Title"
}
]
}
}CSS kaynağından otomatik tamamlama
blockEditor.cssClasses ve cssVariables içindeki stil sayfası URL’lerini listeleyin; sınıflar ve kod alanları bu dosyaların ne tanımladığını gösterir.
Üzerine gelme ve seçim ipuçları
Düzenleyiciye Blockstudio için üzerine gelme ve seçim ipuçlarını eklemek üzere blockEditor.enhance ayarını yapın.
Düzenleyiciye kimler erişebilir
blockstudio.json içindeki users.ids ve users.roles, Blockstudio düzenleyici erişimine sahip kullanıcı kimliklerini ve rollerini belirtir.
Müşterinizin dilinde
Alan denetimleri, yönetici ekranı ve tuval; paketle gelen çevirilerden yararlanarak sitenin dilini veya her kullanıcının profil dilini izler.
Yalnızca düzenleyicide kullanılan varlıklar
editor.assets, blockstudio.json içinde düzenleyicide yüklenecek ek varlıkları listeler.
İlk yükteki medya
Dosya alanları, medya uç noktasına başvurmadan önce iç içe gruplar, sekmeler ve tekrarlayıcılar üzerinden ilk düzenleyici yükündeki ek verilerini okur.
Aynı anda tek bir önizleme isteği
Bir blok için daha yeni bir önizleme isteği, tarayıcıda önceki isteği iptal eder; bu sırada geçerli önizleme ekranda kalır.
Her blok kendi değerlerini korur
Çoklu seçilen bloklar kendi değerlerini korur; geri alma ve yineleme, RichText’i ve kenar çubuğu alanlarını kapsar.
Bir alanı kapatın, değerini koruyun
Editör, denetçiden bir alanı kapatabilir: mavi kenarlık belirene kadar sol kenarının üzerine gelin, ardından tıklayın. Alan yarı saydam olur, değeri kayıtlı kalır ve biri yeniden açana kadar blokta görüntülenmez.
Aynı işlem dosya alanındaki tek tek öğeler için de geçerlidir; böylece bir görsel gizlenirken diğerleri gösterilebilir. Bir alanda görünür bir açma kapama denetimi göstermek için "switch": true ayarını yapın; şablonun bilmesi gerektiğinde $a['_disabled'] değerini okuyun.
{
"name": "acme/card",
"title": "Card",
"blockstudio": {
"attributes": [
{
"id": "title",
"type": "text",
"label": "Title",
"switch": true
}
]
}
}<?php if (!empty($a['_disabled']) && in_array('title', $a['_disabled'])) : ?>
<p>No title on this one.</p>
<?php else : ?>
<h1><?php echo esc_html($a['title']); ?></h1>
<?php endif; ?>Ekleyicide önizleme
block.json içine bir example anahtarı ekleyin; editör blok ekleyicide bloğun üzerine geldiğinde önizleme görüntülenir. Varsayılanlarıyla iyi görünen bir blok için boş bir nesne yeterlidir.
Kendi alanlarınız için example.attributes içine örnek değerler ekleyin veya başka blokları saran bir blok için başlangıç ağacını example.innerBlocks.
{
"name": "my-theme/hero",
"title": "Hero",
"category": "text",
"example": {
"attributes": {
"title": "This title will be shown in the preview"
}
},
"blockstudio": true
}<h1><?php echo esc_html($a['title']); ?></h1>Editör politikası tek dosyada
Tema bağlama kodu olmadan ekleyicide nelerin sunulacağını belirleyin. blockEditor.blocks, core/* gibi joker karakterler içeren izin ve ret listelerini alır; kategorileri yeniden adlandırıp sıralar, PHP içinde kayıtlı blok stillerini kaldırır, eski bileşenleri gizler ve blok dizinini kapatabilir.
blockEditor.patterns, çekirdek, uzak, tema ve Blockstudio örüntü kaynaklarını açıp kapatır ve kategorilerini filtreler. blockEditor.media, Openverse bileşenini kapatır ve editörlerin seçebileceği görsel boyutlarını sınırlar.
{
"blockEditor": {
"blocks": {
"allow": ["core/*", "my-theme/*"],
"deny": ["core/embed", "core/freeform"],
"directory": false,
"categories": {
"rename": { "text": "Writing" },
"order": ["my-theme", "text", "media"]
},
"styles": {
"deny": { "my-theme/card": ["outline"] }
},
"legacyWidgets": { "hide": ["archives", "calendar"] }
},
"patterns": {
"core": false,
"remote": false,
"categories": { "deny": ["gallery"] }
},
"media": {
"openverse": false,
"imageSizes": { "allow": ["thumbnail", "large"] }
}
}
}İlk görüntüleme hızlı
Blockstudio blokları sunucuda işlenir. Editör, eşzamanlı örüntülerdeki iç içe bloklar da dahil olmak üzere yazıda zaten bulunan blokların işlenmiş çıktısını önceden yükler ve kaydedilmiş her blok için ayrı bir işleyici isteği göndermek yerine ilk görüntülemede yeniden kullanır.
Kod, sınıflar, öznitelikler ve WYSIWYG denetimleri ilk göründüklerinde indirilir; böylece seçilmemiş bloklar bunları hiç yüklemez. Canlı önizleme gerektirmeyen bir blok disableLoading ayarını yapıp bir yer tutucu gösterebilir; tüm alanlar düzenlenebilir kalır.
{
"name": "my-theme/map",
"title": "Map",
"blockstudio": {
"blockEditor": {
"disableLoading": true
}
}
}{
"blockEditor": {
"disableLoading": true
}
}Sayfa gibi davranan önizlemeler
Interactivity API, editör iframe’inin içinde yüklenir; böylece data-wp-context, bağlamalar, olay işleyicileri ve deponuzun eylemleri tuvalde çalışır. Paketlenmiş bsui/* bileşenleri bunun üzerine kurulur; böylece düzenleme sırasında bir iletişim kutusu açılır ve bir seçim listesi açılır.
Önizlemedeki bağlantılar tıklansa, değiştirici tuşla açılsa veya klavyeden etkinleştirilse de başka bir yere yönlendirme yapmaz; tıklama yine bloğu seçer. assets.reset.enabled ile temanın body sınıfları tuvale kopyalanır, böylece .brand-a .site-card gibi seçiciler burada da eşleşir.
{
"name": "my-theme/disclosure",
"title": "Disclosure",
"blockstudio": {
"interactivity": true
}
}<?php
add_filter('blockstudio/editor/canvas/body_class', function (array $classes) {
return array_values(array_diff($classes, ['logged-in']));
});Araçlar > Blockstudio altında bir envanter
Yönetici ekranında Blockstudio tarafından dosya sisteminden kaydedilenler listelenir: bloklar, uzantılar, alanlar, eşitleme durumlarıyla sayfalar ve db.php şemaları; bunların tümü yerel WordPress DataViews tablolarındadır. Veritabanları görünümü, REST API üzerinden getirilen ve sayfalandırılan her şemanın kayıtlarına göz atmanızı sağlar.
Tema blocks.json kayıt defterlerini adlandırıyorsa, Kayıt Defteri görünümü bloklarını listeler ve wp-admin üzerinden blok dizininize aktarır. Ekran manage_options iznine sahip kullanıcılara açıktır; blockstudio/admin/enabled filtresiyle kapatılır.
{
"$schema": "https://blockstudio.dev/schema/blocks.json",
"directory": "blockstudio",
"registries": {
"ui": "https://blocks.example.com/registry.json"
}
}<?php
add_filter('blockstudio/admin/enabled', '__return_false');Resmî uzantı kiti
Premium site şablonları, yapay zekâ sistem talimatları ve özel bir Discord topluluğu. Tek seferlik satın alma, ömür boyu güncellemeler.
- 500+ site şablonu
- Yapay zekâ sistem talimatları
- Ömür boyu güncellemeler
- Özel Discord topluluğu