Bygget til dem, der redigerer
En bredere feltmenu, værktøjslinjekontroller, redaktørregler og en adminoversigt, konfigureret i block.json og blockstudio.json.
Plads til alle felter
Gentagelsesfelter, kodefelter og indlejrede grupper bliver klemt i sidepanelet. Blokoverskriften har en Open Expanded Editor-knap, der åbner de samme felter i en bredere menu fra højre. Klik på Udført, baggrunden eller Esc for at lukke den, mens blokken forbliver valgt.
Den samme feltgengiver skriver de samme attributter, så forhåndsvisningen opdateres, mens du skriver, og du behøver ingen block.json-indstilling. Felter, der hører til ved siden af indholdet, kan flyttes til blokkens værktøjslinje med "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"
}
]
}
}Autofuldførelse fra din CSS
Vis URL’er til stylesheets i blockEditor.cssClasses og cssVariables, og lad klasse- og kodefelterne vise, hvad filerne definerer.
Markering ved hover og valg
Angiv blockEditor.enhance for at føje Blockstudios muligheder for hover og valg til editoren.
Hvem har adgang til editoren
users.ids og users.roles i blockstudio.json angiver bruger-id’er og roller med editoradgang via Blockstudio.
På din kundes sprog
Feltkontrollerne, administrationsskærmen og lærredet følger webstedets sprog eller den enkelte brugers profilsprog via de medfølgende oversættelser.
Aktiver kun til editoren
editor.assets i blockstudio.json angiver yderligere aktiver, der skal indlæses i editoren.
Medier i den første payload
Filer-felter læser vedhæftningsdata fra editorens første payload gennem indlejrede grupper, faner og gentagelsesfelter, før de forespørger medie-endpointet.
Én forhåndsvisningsanmodning ad gangen
En nyere forhåndsvisningsanmodning for en blok annullerer den forrige i browseren, mens den aktuelle forhåndsvisning forbliver på skærmen.
Hver blok beholder sine værdier
Blokke, der er valgt sammen, beholder hver deres værdier, og fortryd og gentag omfatter RichText- og sidepanelfelter.
Slå et felt fra, og behold dets værdi
En redaktør kan slå et felt fra i inspektøren: Hold markøren over venstre kant, indtil den blå ramme vises, og klik derefter. Feltet bliver gennemsigtigt, dets værdi forbliver gemt, og blokken gengiver det ikke længere, før nogen slår det til igen.
Det samme gælder enkelte elementer i et filfelt, så ét billede kan skjules, mens de andre vises. Indstil "switch": true for at give et felt en synlig til/fra-knap, og læs $a['_disabled'], når en skabelon skal vide det.
{
"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; ?>En forhåndsvisning i indsætteren
Tilføj en example-nøgle til block.json, så blokken viser en forhåndsvisning, når en redaktør holder markøren over den i blokindsætteren. Et tomt objekt er nok for en blok, der ser rigtig ud med standardindstillingerne.
Giv example.attributes eksempelværdier til dine egne felter, eller example.innerBlocks et starttræ til en blok, der omslutter andre blokke.
{
"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>Redaktørregler i én fil
Bestem, hvad indsætteren tilbyder, uden kode til temaets sammenkobling. blockEditor.blocks tager imod tilladelses- og afvisningslister med jokertegn som core/*, omdøber og sorterer kategorier, fjerner bloktypografier registreret i PHP, skjuler ældre widgets og kan slå blokmappen fra.
blockEditor.patterns slår mønsterkilderne fra og til for core, eksterne kilder, temaet og Blockstudio og filtrerer deres kategorier. blockEditor.media slår Openverse fra og begrænser de billedstørrelser, redaktører kan vælge.
{
"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"] }
}
}
}Hurtig første visning
Blockstudio-blokke gengives på serveren. Editorindlæseren forudindlæser det gengivne output fra de blokke, der allerede findes i indlægget, herunder indlejrede blokke i synkroniserede mønstre, og genbruger det til den første visning i stedet for at sende en gengivelsesanmodning for hver gemt blok.
Kode, klasser, attributter og WYSIWYG-kontroller downloades, når de vises første gang, så ikke-valgte blokke aldrig indlæser dem. En blok, der ikke behøver en liveforhåndsvisning, kan indstille disableLoading og vise en pladsholder, mens alle felter stadig kan redigeres.
{
"name": "my-theme/map",
"title": "Map",
"blockstudio": {
"blockEditor": {
"disableLoading": true
}
}
}{
"blockEditor": {
"disableLoading": true
}
}Forhåndsvisninger, der fungerer som siden
Interactivity API indlæses i editorens iframe, så data-wp-context, bindings, event handlers og dine store-handlinger kører på lærredet. De medfølgende bsui/*-komponenter bygger videre på det, så en dialog åbner, og en select-menu foldes ud, mens du redigerer.
Links i en forhåndsvisning navigerer aldrig væk, uanset om de klikkes på, åbnes med en ændringstast eller aktiveres fra tastaturet, og klikket vælger stadig blokken. Med assets.reset.enabled kopieres temaets body-klasser til lærredet, så vælgere som .brand-a .site-card også matcher dér.
{
"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']));
});En oversigt under Tools > Blockstudio
Administrationsskærmen viser det, Blockstudio har registreret fra filsystemet: blokke, udvidelser, felter, sider med deres synkroniseringstilstand samt db.php-skemaer i native WordPress DataViews-tabeller. En Database-visning gennemser posterne i hvert skema, hentet og sideinddelt via REST API.
Når temaets blocks.json navngiver registre, viser en Registry-visning deres blokke og importerer dem til din blokmappe fra wp-admin. Skærmen er tilgængelig for brugere med manage_options, og filteret blockstudio/admin/enabled slår den fra.
{
"$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');Det officielle udvidelsessæt
Premiumskabeloner til websteder, AI-systeminstruktioner og et privat Discord-fællesskab. Engangskøb med opdateringer hele livet.
- 500+ hjemmesideskabeloner
- AI-systeminstruktioner
- Opdateringer hele livet
- Privat Discord-fællesskab