Gebouwd voor de mensen die bewerken
Een bredere veldlade, werkbalkbediening, editorbeleid en een inventaris in de beheeromgeving, ingesteld in block.json en blockstudio.json.
Ruimte voor elk veld
Herhalingsvelden, codevelden en geneste groepen raken krap in de zijbalk. De blokkop bevat een knop Open Expanded Editor die dezelfde velden opent in een bredere lade aan de rechterkant. Klik op Gereed, de achtergrond of Esc om de lade te sluiten; het blok blijft geselecteerd.
Dezelfde veldrenderer schrijft dezelfde attributen, dus de voorbeeldweergave wordt bijgewerkt terwijl je typt en er is geen instelling block.json nodig. Velden die naast de inhoud horen, kunnen met "position": "toolbar" naar de blokwerkbalk worden verplaatst.
{
"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"
}
]
}
}Automatisch aanvullen vanuit je CSS
Toon stylesheet-URL’s in blockEditor.cssClasses en cssVariables; de klassen en codevelden geven aan wat die bestanden definiëren.
Aanwijzingen bij aanwijzen en selecteren
Stel blockEditor.enhance in om de aanwijzings- en selectieopties van Blockstudio aan de editor toe te voegen.
Wie toegang krijgt tot de editor
users.ids en users.roles in blockstudio.json geven de gebruikers-ID’s en rollen aan die editor-toegang hebben via Blockstudio.
In de taal van je klant
Veldbedieningselementen, het beheerscherm en het canvas volgen de sitetaal of de profieltaal van elke gebruiker, met vertalingen uit het meegeleverde pakket.
Alleen voor de editor bedoelde assets
editor.assets in blockstudio.json vermeldt extra assets die in de editor moeten worden geladen.
Media in de eerste payload
Bestandsvelden lezen bijlagengegevens uit de initiële editor-payload, ook in geneste groepen, tabbladen en herhalers, voordat ze het media-eindpunt opvragen.
Eén voorbeeldverzoek tegelijk
Een nieuwer voorbeeldverzoek voor een blok annuleert het vorige in de browser; ondertussen blijft het huidige voorbeeld in beeld.
Elk blok behoudt zijn waarden
Meervoudig geselecteerde blokken behouden hun eigen waarden; ongedaan maken en opnieuw uitvoeren omvatten RichText en velden in de zijbalk.
Schakel een veld uit en behoud de waarde
Een editor kan een veld uitschakelen vanuit de inspecteur: beweeg de aanwijzer over de linkerrand tot de blauwe rand verschijnt en klik dan. Het veld wordt doorschijnend, de waarde blijft opgeslagen en het blok geeft het niet meer weer totdat iemand het weer inschakelt.
Dit werkt ook voor afzonderlijke items in een bestandsveld, zodat één afbeelding verborgen kan blijven terwijl de andere worden weergegeven. Stel "switch": true in om een zichtbaar schakelaar voor een veld te tonen, en lees $a['_disabled'] wanneer een template moet weten wat de status is.
{
"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; ?>Een voorbeeldweergave in de invoeger
Voeg een sleutel example toe aan block.json en het blok toont een voorbeeld wanneer een editor er in de blokinvoeger met de aanwijzer overheen beweegt. Voor een blok dat er met de standaardwaarden goed uitziet, volstaat een leeg object.
Geef example.attributes voorbeeldwaarden voor je eigen velden, of geef example.innerBlocks een startboom voor een blok dat andere blokken omvat.
{
"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>Editorbeleid in één bestand
Bepaal wat de invoeger aanbiedt zonder code om het thema aan te passen. blockEditor.blocks accepteert toestaan- en weigerenlijsten met jokertekens zoals core/*, wijzigt categorienamen en -volgorde, verwijdert blokstijlen die zijn geregistreerd in PHP, verbergt verouderde widgets en kan de blokdirectory uitschakelen.
blockEditor.patterns schakelt de core-, externe, thema- en Blockstudio-patroonbronnen in of uit en filtert hun categorieën. blockEditor.media schakelt Openverse uit en beperkt de afbeeldingsformaten waaruit editors kunnen kiezen.
{
"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"] }
}
}
}Een snelle eerste weergave
Blockstudio-blokken worden op de server gerenderd. De editor laadt vooraf de gerenderde uitvoer van de blokken die al in het bericht staan, inclusief geneste blokken in gesynchroniseerde patronen, en hergebruikt die voor de eerste weergave in plaats van voor elk opgeslagen blok een renderer-verzoek te versturen.
Code, klassen, attributen en WYSIWYG-bedieningselementen worden gedownload wanneer ze voor het eerst verschijnen, zodat niet-geselecteerde blokken ze nooit laden. Een blok dat geen live voorbeeldweergave nodig heeft, kan disableLoading instellen en een tijdelijke aanduiding tonen, terwijl elk veld bewerkbaar blijft.
{
"name": "my-theme/map",
"title": "Map",
"blockstudio": {
"blockEditor": {
"disableLoading": true
}
}
}{
"blockEditor": {
"disableLoading": true
}
}Voorbeeldweergaven die zich gedragen als de pagina
De Interactivity API wordt in het iframe van de editor geladen, zodat data-wp-context, bindings, gebeurtenishandlers en je store-acties op het canvas worden uitgevoerd. De meegeleverde componenten bsui/* bouwen daarop voort, zodat een dialoogvenster opent en een selectielijst uitklapt terwijl je bewerkt.
Links in een voorbeeld navigeren nooit weg, of je nu klikt, ze met een modificatietoets opent of ze activeert via het toetsenbord; met de klik selecteer je nog steeds het blok. Met assets.reset.enabled worden de bodyklassen van het thema naar het canvas gekopieerd, zodat selectors zoals .brand-a .site-card daar ook overeenkomen.
{
"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']));
});Een inventaris onder Tools > Blockstudio
Het beheerscherm toont wat Blockstudio vanuit het bestandssysteem heeft geregistreerd: blokken, extensies, velden, pagina’s met hun synchronisatiestatus en db.php-schema’s, in native WordPress-DataViews-tabellen. In de Databases-weergave kun je de records van elk schema bekijken; ze worden opgehaald en gepagineerd via de REST API.
Wanneer de blocks.json van het thema registers benoemt, toont een registerweergave de blokken en kun je ze vanuit wp-admin naar je blokmap importeren. Gebruikers met manage_options hebben toegang tot het scherm; met het filter blockstudio/admin/enabled schakel je die toegang uit.
{
"$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');De officiële uitbreidingskit
Premium-sitetemplates, AI-systeeminstructies en een privécommunity van Discord. Eenmalige aankoop, levenslange updates.
- 500+ websitesjablonen
- Systeeminstructies voor AI
- Updates voor altijd
- Privécommunity van Discord