Ustvarjeno za ljudi, ki urejajo

Širši stranski predal polj, kontrolniki orodne vrstice, pravilniki urejevalnika in skrbniški pregled, določeni v block.json in blockstudio.json.

Prostor za vsako polje

Ponavljalniki, kodna polja in ugnezdene skupine imajo v stranski vrstici premalo prostora. Glava bloka vsebuje gumb Open Expanded Editor, ki odpre ista polja v širšem predalu z desne. Predal zaprete z gumbom Done, klikom na ozadje ali tipko Esc, blok pa ostane izbran.

Isti izrisovalnik polj zapisuje iste atribute, zato se predogled posodablja med tipkanjem in nastavitev block.json ni potrebna. Polja, ki sodijo ob vsebino, lahko premaknete v orodno vrstico bloka z "position": "toolbar".

Razširjeni urejevalnik

block.json

{
  "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"
      }
    ]
  }
}

Samodokončanje iz vašega CSS

Naštejte URL-je slogovnih datotek v blockEditor.cssClasses in cssVariables; polji classes in code pa nakažeta, kaj te datoteke določajo.

Odzivi ob prehodu in izbiri

Nastavite blockEditor.enhance, da urejevalniku dodate odzive Blockstudio ob prehodu in izbiri.

Kdo ima dostop do urejevalnika

users.ids in users.roles v blockstudio.json določata ID-je uporabnikov in vloge z dostopom do urejevalnika prek Blockstudio.

V jeziku vaše stranke

Kontrolniki polj, skrbniški zaslon in platno uporabljajo jezik spletnega mesta ali jezik profila posameznega uporabnika, in sicer iz priloženih prevodov.

Sredstva samo za urejevalnik

editor.assets v blockstudio.json navede dodatna sredstva, ki jih je treba naložiti v urejevalniku.

Predstavnost v začetnem paketu podatkov

Polja Files pred klicem končne točke za predstavnost preberejo podatke o prilogah iz začetnega paketa podatkov urejevalnika, tudi iz ugnezdenih skupin, zavihkov in ponavljalnikov.

Po ena zahteva za predogled

Novejša zahteva za predogled bloka v brskalniku prekliče prejšnjo, trenutni predogled pa medtem ostane prikazan.

Vsak blok ohrani svoje vrednosti

Bloki, izbrani hkrati, ohranijo vsak svoje vrednosti; razveljavitev in uveljavitev znova zajemata RichText in polja stranske vrstice.

Izklopite polje, ohranite njegovo vrednost

Urejevalnik lahko polje izklopi v pregledovalniku: premakne kazalec čez njegov levi rob, dokler se ne prikaže modra obroba, nato pa klikne. Polje postane prosojno, njegova vrednost ostane shranjena, blok pa ga neha izrisovati, dokler ga nekdo znova ne vklopi.

Enako velja za posamezne elemente v polju datotek, zato lahko ena slika začasno izgine, druge pa ostanejo prikazane. Nastavite "switch": true, da omogočite vidno preklopno stikalo za polje, in preberite $a['_disabled'], kadar mora predloga poznati njegovo stanje.

Atributi za izklop

block.json

{
  "name": "acme/card",
  "title": "Card",
  "blockstudio": {
    "attributes": [
      {
        "id": "title",
        "type": "text",
        "label": "Title",
        "switch": true
      }
    ]
  }
}

index.php

<?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; ?>

Predogled v vstavljalniku

Dodajte ključ example v block.json in blok bo prikazal predogled, ko se urejevalnik zadrži nad njim v vstavljalniku blokov. Za blok, ki je videti dobro s privzetimi nastavitvami, zadostuje prazen objekt.

Za svoja polja določite vzorčne vrednosti za example.attributes ali example.innerBlocks začetno drevo za blok, ki ovije druge bloke.

Predogled v vstavljalniku

block.json

{
  "name": "my-theme/hero",
  "title": "Hero",
  "category": "text",
  "example": {
    "attributes": {
      "title": "This title will be shown in the preview"
    }
  },
  "blockstudio": true
}

index.php

<h1><?php echo esc_html($a['title']); ?></h1>

Pravilnik urejevalnika v eni datoteki

Določite, kaj ponuja vstavljalnik, brez povezovalne kode teme. blockEditor.blocks sprejema sezname dovoljenih in zavrnjenih elementov z nadomestnimi znaki, kot je core/*, preimenuje in razvršča kategorije, odstrani sloge blokov, registrirane v PHP, skrije stare pripomočke in lahko izklopi imenik blokov.

blockEditor.patterns vklopi ali izklopi vire vzorcev core, remote, theme in Blockstudio ter filtrira njihove kategorije. blockEditor.media izklopi Openverse in omeji velikosti slik, ki jih lahko izberejo urejevalniki.

Nastavitve urejevalnika blokov

blockstudio.json

{
  "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"] }
    }
  }
}

Hiter prvi izris

Bloki Blockstudio se izrišejo na strežniku. Urejevalnik vnaprej naloži izrisan izhod blokov, ki so že v objavi, vključno z ugnezdenimi bloki v sinhroniziranih vzorcih, in ga uporabi za prvi izris, namesto da bi za vsak shranjeni blok poslal zahtevo za izris.

Koda, razredi, atributi in kontrolniki WYSIWYG se prenesejo, ko se prvič prikažejo, zato neizbrani bloki ne naložijo teh datotek. Blok, ki ne potrebuje sprotnega predogleda, lahko nastavi disableLoading in prikaže označbo mesta, vsa polja pa ostanejo urejevalna.

Nalaganje urejevalnika

block.json

{
  "name": "my-theme/map",
  "title": "Map",
  "blockstudio": {
    "blockEditor": {
      "disableLoading": true
    }
  }
}

blockstudio.json

{
  "blockEditor": {
    "disableLoading": true
  }
}

Predogledi, ki delujejo kot stran

Interactivity API se naloži znotraj okvirja iframe urejevalnika, zato data-wp-context, vezave, upravljalniki dogodkov in dejanja vaše shrambe tečejo na platnu. Priložene komponente bsui/* temeljijo na njem, zato se pogovorno okno odpre, izbirni seznam pa spusti, medtem ko urejate.

Povezave v predogledu nikoli ne odprejo druge strani, ne glede na to, ali jih kliknete, odprete s pridržano modifikacijsko tipko ali aktivirate s tipkovnico; klik še vedno izbere blok. Z assets.reset.enabled se razredi telesa teme kopirajo na platno, zato se tam ujemajo tudi izbirniki, kot je .brand-a .site-card.

Interaktivnost

block.json

{
  "name": "my-theme/disclosure",
  "title": "Disclosure",
  "blockstudio": {
    "interactivity": true
  }
}

functions.php

<?php
add_filter('blockstudio/editor/canvas/body_class', function (array $classes) {
  return array_values(array_diff($classes, ['logged-in']));
});

Popis v Orodja > Blockstudio

Skrbniški zaslon prikazuje, kaj je Blockstudio registriral iz datotečnega sistema: bloke, razširitve, polja, strani z njihovim stanjem sinhronizacije in sheme db.php v izvornih tabelah WordPress DataViews. Pogled Podatkovne zbirke omogoča brskanje po zapisih posameznih shem, ki se pridobivajo in razvrščajo po straneh prek REST API.

Ko blocks.json teme poimenuje registre, jih pogled Register prikaže z njihovimi bloki in omogoča njihov uvoz v imenik blokov iz wp-admin. Zaslon je dostopen uporabnikom z dovoljenjem manage_options, filter blockstudio/admin/enabled pa ga izklopi.

Skrbniški zaslon

blocks.json

{
  "$schema": "https://blockstudio.dev/schema/blocks.json",
  "directory": "blockstudio",
  "registries": {
    "ui": "https://blocks.example.com/registry.json"
  }
}

functions.php

<?php
add_filter('blockstudio/admin/enabled', '__return_false');

Plus

Uradni komplet razširitev

Vrhunske predloge spletnih mest, sistemska navodila za UI in zasebna skupnost Discord. Enkratni nakup, posodobitve za vedno.

Več kot 500+ predlog spletnih mest
Sistemska navodila za UI
Doživljenjske posodobitve
Zasebna skupnost Discord

Pridobite Plus