Für alle, die Inhalte bearbeiten
Eine breitere Feldleiste, Symbolleisten-Steuerelemente, Editor-Richtlinien und eine Admin-Übersicht, eingerichtet in block.json und blockstudio.json.
Platz für jedes Feld
Repeater, Codefelder und verschachtelte Gruppen haben in der Seitenleiste wenig Platz. Die Blockkopfzeile enthält eine Open Expanded Editor-Schaltfläche, die dieselben Felder in einer breiteren Leiste von rechts öffnet. Mit „Fertig“, dem Hintergrund oder Esc wird sie geschlossen, und der Block bleibt ausgewählt.
Derselbe Feld-Renderer schreibt dieselben Attribute. So wird die Vorschau während der Eingabe aktualisiert, ohne dass eine block.json-Einstellung erforderlich ist. Felder, die neben den Inhalt gehören, kannst du mit "position": "toolbar" in die Blocksymbolleiste verschieben.
{
"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"
}
]
}
}Autovervollständigung aus deinem CSS
Listet Stylesheet-URLs in blockEditor.cssClasses und cssVariables auf. Die Felder für Klassen und Code geben Hinweise darauf, was diese Dateien definieren.
Hinweise beim Darüberfahren und Auswählen
Setze blockEditor.enhance, um die Hinweise zum Darüberfahren und Auswählen von Blockstudio im Editor einzublenden.
Wer auf den Editor zugreifen darf
users.ids und users.roles in blockstudio.json geben die Benutzer-IDs und Rollen an, die Editorzugriff mit Blockstudio haben.
In der Sprache deines Kunden
Feldsteuerelemente, der Admin-Bildschirm und die Arbeitsfläche richten sich nach der Sprache der Website oder der Profilsprache des jeweiligen Benutzers. Die Übersetzungen sind bereits enthalten.
Nur für den Editor bestimmte Assets
editor.assets in blockstudio.json listet zusätzliche Assets auf, die im Editor geladen werden sollen.
Medien in der ersten Nutzlast
Dateifelder lesen Anhangdaten aus der anfänglichen Editor-Nutzlast – auch aus verschachtelten Gruppen, Tabs und Wiederholungsfeldern –, bevor sie den Medien-Endpunkt abfragen.
Immer nur eine Vorschauanfrage
Eine neuere Vorschauanfrage für einen Block bricht die vorherige im Browser ab. Währenddessen bleibt die aktuelle Vorschau auf dem Bildschirm.
Jeder Block behält seine Werte
Mehrfach ausgewählte Blöcke behalten ihre eigenen Werte. Rückgängig und Wiederholen umfassen RichText- und Seitenleistenfelder.
Feld deaktivieren, Wert behalten
Redakteure können ein Feld im Inspektor deaktivieren: Fahre mit der Maus über den linken Rand, bis der blaue Rahmen erscheint, und klicke dann. Das Feld wird durchscheinend, sein Wert bleibt gespeichert und der Block rendert es nicht mehr, bis es wieder aktiviert wird.
Das funktioniert auch bei einzelnen Elementen eines Dateifelds, sodass ein Bild ausgeblendet werden kann, während die anderen angezeigt werden. Setze "switch": true, damit ein Feld einen sichtbaren Umschalter erhält, und lies $a['_disabled'] aus, wenn ein Template wissen muss, ob es aktiviert ist.
{
"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; ?>Eine Vorschau im Inserter
Füge einen example-Schlüssel zu block.json hinzu. Dann zeigt der Block eine Vorschau, wenn ein Redakteur im Block-Inserter mit der Maus darüberfährt. Für einen Block, der mit seinen Standardwerten gut aussieht, genügt ein leeres Objekt.
Gib example.attributes Beispielwerte für deine eigenen Felder oder example.innerBlocks einen Ausgangsbaum für einen Block, der andere Blöcke umschließt.
{
"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>Editor-Richtlinie in einer Datei
Lege ohne Theme-Code fest, was der Inserter anbietet. blockEditor.blocks akzeptiert Zulassungs- und Sperrlisten mit Platzhaltern wie core/*, benennt Kategorien um und ordnet sie neu, entfernt in PHP registrierte Blockstile, blendet ältere Widgets aus und kann das Blockverzeichnis deaktivieren.
blockEditor.patterns aktiviert oder deaktiviert die Musterquellen Core, Remote, Theme und Blockstudio und filtert ihre Kategorien. blockEditor.media deaktiviert Openverse und begrenzt die Bildgrößen, die Redakteure auswählen können.
{
"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"] }
}
}
}Schnelle erste Darstellung
Blockstudio-Blöcke werden auf dem Server gerendert. Der Editor lädt die gerenderte Ausgabe der bereits im Beitrag enthaltenen Blöcke vor, einschließlich verschachtelter Blöcke in synchronisierten Mustern, und verwendet sie für die erste Darstellung wieder, statt für jeden gespeicherten Block eine Renderer-Anfrage zu senden.
Code, Klassen, Attribute und WYSIWYG-Steuerelemente werden erst geladen, wenn sie zum ersten Mal angezeigt werden. Nicht ausgewählte Blöcke laden sie daher nie. Ein Block, der keine Live-Vorschau benötigt, kann disableLoading setzen und einen Platzhalter anzeigen; alle Felder bleiben bearbeitbar.
{
"name": "my-theme/map",
"title": "Map",
"blockstudio": {
"blockEditor": {
"disableLoading": true
}
}
}{
"blockEditor": {
"disableLoading": true
}
}Vorschauen, die sich wie die Seite verhalten
Die Interactivity-API wird im Editor-Iframe geladen, sodass data-wp-context, Bindings, Ereignisbehandlungsroutinen und deine Store-Aktionen auf der Arbeitsfläche ausgeführt werden. Die gebündelten bsui/*-Komponenten bauen darauf auf, sodass sich beim Bearbeiten ein Dialog öffnet und ein Auswahlmenü aufklappt.
Links in einer Vorschau führen nie von der Seite weg – egal, ob du sie anklickst, mit einer Zusatztaste öffnest oder über die Tastatur aktivierst. Der Klick wählt trotzdem den Block aus. Mit assets.reset.enabled werden die Body-Klassen des Themes auf die Arbeitsfläche kopiert, sodass dort auch Selektoren wie .brand-a .site-card greifen.
{
"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']));
});Eine Übersicht unter Tools > Blockstudio
Der Admin-Bildschirm listet auf, was Blockstudio im Dateisystem registriert hat: Blöcke, Erweiterungen, Felder, Seiten mit ihrem Synchronisierungsstatus und db.php-Schemas – in nativen WordPress-DataViews-Tabellen. In einer Datenbankansicht kannst du die Datensätze jedes Schemas durchsuchen; sie werden über REST API abgerufen und paginiert.
Wenn das Theme mit blocks.json Registrys benennt, listet eine Registry-Ansicht deren Blöcke auf und importiert sie aus wp-admin in dein Blockverzeichnis. Der Bildschirm ist für Benutzer mit manage_options zugänglich; mit dem Filter blockstudio/admin/enabled kannst du ihn deaktivieren.
{
"$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');Das offizielle Erweiterungspaket
Premium-Websitevorlagen, KI-Systemanweisungen und eine private Discord-Community. Einmaliger Kauf, Updates auf Lebenszeit.
- 500+ Website-Vorlagen
- KI-Systemanweisungen
- Updates auf Lebenszeit
- Private Discord-Community