Pensato per chi modifica
Più spazio nel pannello dei campi, controlli nella barra degli strumenti, regole dell’editor e inventario amministrativo, configurati in block.json e blockstudio.json.
Spazio per ogni campo
I repeater, i campi codice e i gruppi annidati sono troppo compressi nella barra laterale. L’intestazione del blocco include un pulsante Open Expanded Editor che apre gli stessi campi in un pannello più ampio a destra. Fatto, lo sfondo o Esc lo chiudono e il blocco rimane selezionato.
È lo stesso renderer dei campi a scrivere gli stessi attributi, quindi l’anteprima si aggiorna mentre digiti e non serve alcuna impostazione block.json. I campi che devono stare accanto al contenuto possono essere spostati nella barra degli strumenti del blocco con "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"
}
]
}
}Completamento automatico dal tuo CSS
Elenca gli URL dei fogli di stile in blockEditor.cssClasses e cssVariables; i campi classes e code suggeriscono cosa definiscono quei file.
Indicatori al passaggio del mouse e alla selezione
Imposta blockEditor.enhance per aggiungere all’editor gli indicatori al passaggio del mouse e alla selezione di Blockstudio.
Chi può accedere all’editor
users.ids e users.roles in blockstudio.json indicano gli ID utente e i ruoli con accesso all’editor tramite Blockstudio.
Nella lingua del tuo cliente
I controlli dei campi, la schermata di amministrazione e la canvas seguono la lingua del sito o quella del profilo di ciascun utente, usando le traduzioni incluse.
Risorse solo per l’editor
editor.assets in blockstudio.json elenca gli asset aggiuntivi da caricare nell’editor.
Media nel payload iniziale
I campi Files leggono i dati degli allegati dal payload iniziale dell’editor, anche attraverso gruppi annidati, schede e ripetitori, prima di interrogare l’endpoint dei media.
Una sola richiesta di anteprima alla volta
Una nuova richiesta di anteprima per un blocco annulla quella precedente nel browser, mentre l’anteprima corrente resta visualizzata.
Ogni blocco conserva i propri valori
I blocchi selezionati insieme conservano i propri valori; le operazioni di annullamento e ripristino includono RichText e i campi della barra laterale.
Nascondi un campo, conserva il suo valore
Un editor può disattivare un campo dall’ispettore: passa il puntatore sul bordo sinistro finché non appare il bordo blu, poi fai clic. Il campo diventa traslucido, il suo valore resta salvato e il blocco smette di visualizzarlo finché qualcuno non lo riattiva.
Lo stesso vale per i singoli elementi in un campo file, così un’immagine può essere esclusa mentre le altre restano visibili. Imposta "switch": true per mostrare l’interruttore di un campo e leggi $a['_disabled'] quando un template deve conoscerne lo stato.
{
"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; ?>Un’anteprima nell’inseritore
Aggiungi una chiave example a block.json e il blocco mostrerà un’anteprima quando un editor passa il puntatore sul blocco nell’inseritore. Per un blocco che ha un aspetto corretto con le impostazioni predefinite, basta un oggetto vuoto.
Assegna a example.attributes valori di esempio per i tuoi campi oppure example.innerBlocks un albero iniziale per un blocco che contiene altri blocchi.
{
"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>Regole dell’editor in un solo file
Decidi cosa mostra l’inseritore senza codice di supporto nel tema. blockEditor.blocks accetta elenchi di inclusione ed esclusione con caratteri jolly come core/*, rinomina e riordina le categorie, rimuove gli stili dei blocchi registrati in PHP, nasconde i widget legacy e può disattivare la directory dei blocchi.
blockEditor.patterns attiva o disattiva le origini dei pattern core, remote, del tema e Blockstudio e ne filtra le categorie. blockEditor.media disattiva Openverse e limita le dimensioni delle immagini selezionabili dagli 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"] }
}
}
}Visualizzazione iniziale rapida
I blocchi Blockstudio vengono renderizzati sul server. L’editor precarica l’output renderizzato dei blocchi già presenti nel post, compresi quelli annidati nei pattern sincronizzati, e lo riutilizza per la visualizzazione iniziale invece di inviare una richiesta al renderer per ogni blocco salvato.
Il codice, le classi, gli attributi e i controlli WYSIWYG vengono scaricati alla prima visualizzazione, così i blocchi non selezionati non li caricano mai. Un blocco che non necessita di un’anteprima dinamica può impostare disableLoading e mostrare un segnaposto, mantenendo modificabili tutti i campi.
{
"name": "my-theme/map",
"title": "Map",
"blockstudio": {
"blockEditor": {
"disableLoading": true
}
}
}{
"blockEditor": {
"disableLoading": true
}
}Anteprime che si comportano come la pagina
Interactivity API viene caricato nell’iframe dell’editor, così data-wp-context, i binding, i gestori di eventi e le azioni del tuo store vengono eseguiti nell’area di lavoro. I componenti bsui/* integrati si basano su di esso, così mentre modifichi si apre una finestra di dialogo e si espande un menu a discesa.
I link nell’anteprima non portano mai a un’altra pagina, né se cliccati, aperti con un tasto modificatore o attivati dalla tastiera, e il clic continua a selezionare il blocco. Con assets.reset.enabled, le classi del body del tema vengono copiate sulla canvas, così anche selettori come .brand-a .site-card corrispondono.
{
"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 inventario in Strumenti > Blockstudio
La schermata di amministrazione elenca ciò che Blockstudio ha registrato dal filesystem: blocchi, estensioni, campi, pagine con il relativo stato di sincronizzazione e schemi db.php, nelle tabelle native DataViews di WordPress. Una vista Database permette di consultare i record di ogni schema, recuperati e paginati tramite REST API.
Quando blocks.json del tema nomina i registri, una vista Registro ne elenca i blocchi e li importa nella directory dei blocchi da wp-admin. La schermata è accessibile agli utenti con manage_options; il filtro blockstudio/admin/enabled la disattiva.
{
"$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');Il kit ufficiale di estensioni
Template di siti premium, istruzioni di sistema per l’AI e una community privata Discord. Acquisto una tantum, aggiornamenti a vita.
- Oltre 500 modelli di siti
- Istruzioni di sistema per l’AI
- Aggiornamenti a vita
- Community privata di Discord