Byggt för dem som redigerar
En bredare fältpanel, verktygsfältskontroller, redigeringsregler och en adminöversikt, konfigurerade i block.json och blockstudio.json.
Plats för varje fält
Repeatrar, kodfält och nästlade grupper blir trångbodda i sidofältet. Blockrubriken har en Open Expanded Editor-knapp som öppnar samma fält i en bredare panel från höger. Klicka på Klar, bakgrunden eller Esc för att stänga den; blocket förblir markerat.
Det är samma fältåtergivare som skriver samma attribut, så förhandsvisningen uppdateras medan du skriver och ingen block.json-inställning behövs. Fält som hör hemma intill innehållet kan flyttas till blockets verktygsfält 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"
}
]
}
}Autokomplettering från din CSS
Lista URL:er till formatmallar i blockEditor.cssClasses och cssVariables. Fälten för klasser och kod ger ledtrådar om vad filerna definierar.
Markeringar vid hovring och val
Ange blockEditor.enhance för att lägga till Blockstudios funktioner för hovring och val i redigeraren.
Vem får åtkomst till redigeraren
users.ids och users.roles i blockstudio.json anger användar-ID:n och roller med Blockstudio-åtkomst till redigeraren.
På din kunds språk
Fältkontrollerna, administrationsvyn och arbetsytan följer webbplatsens språk eller varje användares profilspråk, med hjälp av medföljande översättningar.
Tillgångar enbart för redigeraren
editor.assets i blockstudio.json listar ytterligare resurser som ska laddas i redigeraren.
Media i den första nyttolasten
Filfält läser bilageinformation från redigerarens ursprungliga nyttolast, genom nästlade grupper, flikar och upprepningsfält, innan de anropar mediegränssnittet.
En förhandsvisningsbegäran åt gången
En nyare förhandsvisningsbegäran för ett block avbryter den föregående i webbläsaren, medan den aktuella förhandsvisningen ligger kvar på skärmen.
Varje block behåller sina värden
Flermarkerade block behåller sina egna värden, och ångra och gör om omfattar RichText och fält i sidopanelen.
Inaktivera ett fält, behåll värdet
En redigerare kan inaktivera ett fält från inspektören: håll pekaren över dess vänsterkant tills den blå ramen visas och klicka sedan. Fältet blir genomskinligt, värdet förblir sparat och blocket slutar återge det tills någon aktiverar det igen.
Samma sak fungerar för enskilda objekt i ett filfält, så en bild kan döljas medan de andra visas. Ange "switch": true för att ge ett fält en synlig växlingsknapp, och läs $a['_disabled'] när en mall behöver veta.
{
"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 förhandsvisning i infogaren
Lägg till en example-nyckel i block.json så visar blocket en förhandsvisning när en redigerare håller pekaren över det i blockinfogaren. Ett tomt objekt räcker för ett block som ser bra ut med standardvärdena.
Ge example.attributes exempelvärden för dina egna fält, eller example.innerBlocks ett startträd för ett block som omsluter andra block.
{
"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>Redigeringsregler i en fil
Bestäm vad infogaren erbjuder utan temakod. blockEditor.blocks tar emot tillåtelse- och spärrlistor med jokertecken som core/*, byter namn på kategorier och sorterar dem, tar bort blockstilar som registrerats i PHP, döljer äldre widgetar och kan inaktivera blockkatalogen.
blockEditor.patterns aktiverar eller inaktiverar mönsterkällorna core, remote, theme och Blockstudio samt filtrerar deras kategorier. blockEditor.media inaktiverar Openverse och begränsar vilka bildstorlekar redigerare kan välja.
{
"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"] }
}
}
}En snabb första rendering
Blockstudio-block renderas på servern. Redigeraren förladdar den renderade utdata som blocken i inlägget redan har, inklusive nästlade block i synkroniserade mönster, och återanvänder den vid den första renderingen i stället för att skicka en renderingsbegäran för varje sparat block.
Kod, klasser, attribut och WYSIWYG-kontroller laddas ned första gången de visas, så omarkerade block laddar dem aldrig. Ett block som inte behöver en liveförhandsvisning kan ange disableLoading och visa en platshållare; alla fält förblir redigerbara.
{
"name": "my-theme/map",
"title": "Map",
"blockstudio": {
"blockEditor": {
"disableLoading": true
}
}
}{
"blockEditor": {
"disableLoading": true
}
}Förhandsvisningar som fungerar som sidan
Interactivity API laddas i redigerarens iframe, så data-wp-context, bindningar, händelsehanterare och dina lageråtgärder körs i arbetsytan. De medföljande bsui/*-komponenterna bygger vidare på detta, så en dialogruta öppnas och en väljare fälls ned medan du redigerar.
Länkar i en förhandsvisning navigerar aldrig bort från sidan, oavsett om de klickas på, öppnas med en modifierartangent eller aktiveras från tangentbordet, och klicket markerar fortfarande blocket. Med assets.reset.enabled kopieras temats body-klasser till arbetsytan, så att väljare som .brand-a .site-card matchar även 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 inventering under Verktyg > Blockstudio
Administrationsvyn visar vad Blockstudio har registrerat från filsystemet: block, tillägg, fält, sidor med synkroniseringsstatus och db.php-scheman i inbyggda WordPress DataViews-tabeller. I vyn Databaser går det att bläddra bland posterna i varje schema, som hämtas och sidindelas via REST API.
När temats blocks.json namnger register visar en registervy deras block och importerar dem till din blockkatalog från wp-admin. Vyn är tillgänglig för användare med manage_options, och filtret blockstudio/admin/enabled stänger av den.
{
"$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 officiella tilläggspaketet
Premiumwebbplatsmallar, systeminstruktioner för AI och en privat Discord-community. Engångsköp, uppdateringar på livstid.
- 500+ webbplatsmallar
- AI-systeminstruktioner
- Uppdateringar livet ut
- Privat Discord-community