Dibuat untuk para editor
Panel bidang yang lebih luas, kontrol toolbar, kebijakan editor, dan inventaris admin, diatur di block.json dan blockstudio.json.
Ruang untuk setiap bidang
Repeater, bidang kode, dan grup bertingkat terasa sesak di bilah sisi. Header blok memuat tombol Open Expanded Editor yang membuka bidang yang sama di panel lebih luas dari sisi kanan. Selesai, mengklik latar, atau menekan Esc akan menutupnya, dan blok tetap dipilih.
Perender bidang yang sama menulis atribut yang sama, sehingga pratinjau diperbarui saat Anda mengetik dan tidak diperlukan pengaturan block.json. Bidang yang perlu berada di samping konten dapat dipindahkan ke toolbar blok dengan "position": "toolbar".
{
"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"
}
]
}
}Pelengkapan otomatis dari CSS Anda
Cantumkan URL stylesheet di blockEditor.cssClasses dan cssVariables; field kelas dan kode memberi petunjuk tentang definisi berkas tersebut.
Petunjuk hover dan pemilihan
Atur blockEditor.enhance untuk menambahkan affordance hover dan pemilihan milik Blockstudio ke editor.
Siapa yang mendapat akses editor
users.ids dan users.roles di blockstudio.json mencantumkan ID pengguna dan peran yang memiliki akses editor Blockstudio.
Dalam bahasa klien Anda
Kontrol field, layar admin, dan kanvas mengikuti bahasa situs atau bahasa profil masing-masing pengguna, menggunakan terjemahan yang disertakan.
Aset khusus editor
editor.assets di blockstudio.json mencantumkan aset tambahan yang perlu dimuat di editor.
Media dalam payload pertama
Field Files membaca data lampiran dari payload editor awal, melalui grup bersarang, tab, dan repeater, sebelum meminta data ke endpoint media.
Satu permintaan pratinjau dalam satu waktu
Permintaan pratinjau yang lebih baru untuk suatu blok membatalkan permintaan sebelumnya di browser, sementara pratinjau yang sedang ditampilkan tetap terlihat.
Setiap blok menyimpan nilainya sendiri
Blok yang dipilih bersama tetap menyimpan nilainya masing-masing, dan undo serta redo mencakup RichText dan field sidebar.
Nonaktifkan bidang, pertahankan nilainya
Editor dapat menonaktifkan bidang dari inspektur: arahkan kursor ke tepi kirinya hingga batas biru muncul, lalu klik. Bidang menjadi transparan, nilainya tetap tersimpan, dan blok berhenti merendernya sampai seseorang mengaktifkannya kembali.
Hal yang sama berlaku untuk item tunggal dalam bidang file, sehingga satu gambar dapat disembunyikan sementara yang lain tetap ditampilkan. Atur "switch": true agar bidang memiliki tombol pengalih yang terlihat, dan baca $a['_disabled'] saat templat perlu mengetahuinya.
{
"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; ?>Pratinjau di inserter
Tambahkan kunci example ke block.json dan blok akan menampilkan pratinjau saat editor mengarahkan kursor ke blok tersebut di inserter blok. Objek kosong sudah cukup untuk blok yang tampil baik dengan nilai defaultnya.
Beri example.attributes nilai contoh untuk bidang Anda sendiri, atau example.innerBlocks struktur awal untuk blok yang membungkus blok lain.
{
"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>Kebijakan editor dalam satu file
Tentukan apa yang ditawarkan inserter tanpa kode perekat tema. blockEditor.blocks menerima daftar izin dan penolakan dengan wildcard seperti core/*, mengganti nama dan mengurutkan kategori, menghapus gaya blok yang terdaftar di PHP, menyembunyikan widget lama, dan dapat menonaktifkan direktori blok.
blockEditor.patterns mengaktifkan atau menonaktifkan sumber pola inti, jarak jauh, tema, dan Blockstudio serta memfilter kategorinya. blockEditor.media menonaktifkan Openverse dan membatasi ukuran gambar yang dapat dipilih editor.
{
"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"] }
}
}
}Tampilan awal yang cepat
Blok Blockstudio dirender di server. Editor memuat sebelumnya hasil render blok yang sudah ada di pos, termasuk blok bertingkat dalam pola tersinkronisasi, lalu menggunakannya kembali untuk tampilan awal alih-alih mengirim permintaan perender untuk setiap blok tersimpan.
Kode, kelas, atribut, dan kontrol WYSIWYG diunduh saat pertama kali muncul, sehingga blok yang tidak dipilih tidak pernah memuatnya. Blok yang tidak memerlukan pratinjau langsung dapat menetapkan disableLoading dan menampilkan placeholder, sementara setiap bidang tetap dapat diedit.
{
"name": "my-theme/map",
"title": "Map",
"blockstudio": {
"blockEditor": {
"disableLoading": true
}
}
}{
"blockEditor": {
"disableLoading": true
}
}Pratinjau yang berperilaku seperti halaman
Interactivity API dimuat di dalam iframe editor, sehingga data-wp-context, binding, penangan kejadian, dan tindakan store Anda berjalan di kanvas. Komponen bsui/* yang disertakan dibangun di atasnya, sehingga dialog terbuka dan menu select terbuka saat Anda mengedit.
Tautan di pratinjau tidak pernah berpindah halaman, baik diklik, dibuka dengan tombol pengubah maupun diaktifkan dari keyboard, dan klik tetap memilih blok. Dengan assets.reset.enabled, kelas body tema disalin ke kanvas, sehingga selektor seperti .brand-a .site-card juga cocok di sana.
{
"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']));
});Inventaris di Tools > Blockstudio
Layar admin mencantumkan apa saja yang didaftarkan Blockstudio dari sistem berkas: blok, ekstensi, field, halaman beserta status sinkronisasinya, dan skema db.php, dalam tabel DataViews bawaan WordPress. Tampilan Databases menelusuri catatan setiap skema, yang diambil dan dipaginasi melalui REST API.
Saat blocks.json tema memberi nama pada registry, tampilan Registry mencantumkan bloknya dan mengimpornya ke direktori blok Anda dari wp-admin. Layar ini tersedia bagi pengguna dengan manage_options, dan filter blockstudio/admin/enabled menonaktifkannya.
{
"$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');Kit ekstensi resmi
Template situs premium, instruksi sistem AI, dan komunitas Discord privat. Pembelian satu kali, pembaruan seumur hidup.
- 500+ templat situs
- Instruksi sistem AI
- Pembaruan seumur hidup
- Komunitas privat Discord