Creat pentru cei care editează
Un panou lateral mai larg pentru câmpuri, controale în bara de instrumente, politici editoriale și un inventar administrativ, configurate în block.json și blockstudio.json.
Loc pentru fiecare câmp
Repeaterele, câmpurile de cod și grupurile imbricate ocupă prea mult loc în bara laterală. Antetul blocului include un buton Open Expanded Editor care deschide aceleași câmpuri într-un panou mai larg, din dreapta. Gata, fundalul sau Esc îl închid, iar blocul rămâne selectat.
Este același randator de câmpuri care scrie aceleași atribute, astfel încât previzualizarea se actualizează pe măsură ce tastați și nu este necesară nicio setare block.json. Câmpurile care trebuie să apară lângă conținut pot fi mutate în bara de instrumente a blocului cu "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"
}
]
}
}Completare automată din CSS
Listează URL-urile foilor de stil din blockEditor.cssClasses și cssVariables, iar câmpurile classes și code sugerează ce definesc fișierele respective.
Indicii la trecerea cu mouse-ul și la selectare
Setați blockEditor.enhance pentru a adăuga în editor indicii de trecere cu mouse-ul și de selectare ale Blockstudio.
Cine are acces la editor
users.ids și users.roles din blockstudio.json specifică ID-urile și rolurile utilizatorilor cu acces la editor prin Blockstudio.
În limba clientului dumneavoastră
Controalele câmpurilor, ecranul de administrare și canvasul folosesc limba site-ului sau limba din profilul fiecărui utilizator, din traducerile incluse.
Resurse disponibile doar în editor
editor.assets din blockstudio.json enumeră resurse suplimentare de încărcat în editor.
Fișiere media în încărcătura inițială
Câmpurile Files citesc datele atașamentelor din încărcătura inițială a editorului, prin grupuri imbricate, file și câmpuri repetabile, înainte de a solicita date de la endpointul media.
O singură solicitare de previzualizare odată
O solicitare nouă de previzualizare pentru un bloc o anulează pe cea anterioară în browser, iar previzualizarea curentă rămâne pe ecran între timp.
Fiecare bloc își păstrează valorile
Blocurile selectate simultan își păstrează propriile valori, iar anularea și refacerea acțiunilor includ câmpurile RichText și cele din bara laterală.
Dezactivați un câmp, păstrați-i valoarea
Un editor poate dezactiva un câmp din inspector: treceți cu cursorul peste marginea sa stângă până apare chenarul albastru, apoi faceți clic. Câmpul devine translucid, valoarea sa rămâne salvată, iar blocul nu îl mai randează până când cineva îl reactivează.
Același lucru funcționează pentru elementele individuale dintr-un câmp de fișiere, astfel încât o imagine poate fi ascunsă în timp ce celelalte sunt afișate. Setați "switch": true pentru a oferi unui câmp un comutator vizibil și citiți $a['_disabled'] când un șablon trebuie să știe.
{
"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; ?>O previzualizare în inserator
Adăugați o cheie example la block.json, iar blocul va afișa o previzualizare când un editor trece cu cursorul peste el în inseratorul de blocuri. Pentru un bloc care arată bine cu valorile implicite, este suficient un obiect gol.
Oferiți valori exemplu pentru propriile câmpuri în example.attributes sau example.innerBlocks un arbore inițial pentru un bloc care încadrează alte blocuri.
{
"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>Politica editorială într-un singur fișier
Decideți ce oferă inseratorul fără cod de legătură în temă. blockEditor.blocks acceptă liste de includere și excludere cu metacaractere precum core/*, redenumește și ordonează categoriile, elimină stilurile de bloc înregistrate în PHP, ascunde widgeturile vechi și poate dezactiva directorul de blocuri.
blockEditor.patterns activează sau dezactivează sursele de modele pentru nucleu, la distanță, temă și Blockstudio și filtrează categoriile acestora. blockEditor.media dezactivează Openverse și limitează dimensiunile imaginilor pe care le pot selecta editorii.
{
"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"] }
}
}
}Prima randare rapidă
Blocurile Blockstudio sunt randate pe server. Editorul preîncarcă rezultatul randat al blocurilor deja prezente în articol, inclusiv al blocurilor imbricate din modelele sincronizate, și îl reutilizează pentru prima randare în loc să trimită o cerere de randare pentru fiecare bloc salvat.
Codul, clasele, atributele și controalele WYSIWYG se descarcă la prima afișare, astfel încât blocurile neselectate să nu le încarce niciodată. Un bloc care nu are nevoie de o previzualizare live poate seta disableLoading și afișa un substituent, păstrând editabile toate câmpurile.
{
"name": "my-theme/map",
"title": "Map",
"blockstudio": {
"blockEditor": {
"disableLoading": true
}
}
}{
"blockEditor": {
"disableLoading": true
}
}Previzualizări care se comportă ca pagina
Interactivity API se încarcă în iframe-ul editorului, astfel încât data-wp-context, legăturile, gestionarele de evenimente și acțiunile magazinului dvs. rulează în canvas. Componentele bsui/* incluse se bazează pe acesta, așa că un dialog se deschide, iar un meniu derulant se deschide în timp ce editați.
Linkurile dintr-o previzualizare nu duc niciodată în altă parte, indiferent dacă sunt accesate prin clic, deschise cu o tastă modificatoare sau activate de la tastatură, iar clicul selectează în continuare blocul. Cu assets.reset.enabled, clasele body ale temei sunt copiate pe canvas, astfel încât selectori precum .brand-a .site-card se potrivesc și acolo.
{
"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']));
});Un inventar la Instrumente > Blockstudio
Ecranul de administrare listează ce a înregistrat Blockstudio din sistemul de fișiere: blocuri, extensii, câmpuri, pagini cu starea lor de sincronizare și scheme db.php, în tabele DataViews native WordPress. O vizualizare Baze de date răsfoiește înregistrările fiecărei scheme, preluate și paginate prin REST API.
Când blocks.json temei numește registre, o vizualizare Registru listează blocurile acestora și le importă în directorul de blocuri din wp-admin. Ecranul este accesibil utilizatorilor cu manage_options, iar filtrul blockstudio/admin/enabled îl dezactivează.
{
"$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');Kitul oficial de extensii
Șabloane premium de site, instrucțiuni de sistem pentru AI și o comunitate privată Discord. Achiziție unică, actualizări pe viață.
- 500+ șabloane de site
- Instrucțiuni de sistem pentru IA
- Actualizări pe viață
- Comunitate privată Discord