Vytvorené pre ľudí, ktorí upravujú obsah

Širší panel polí, ovládacie prvky panela nástrojov, pravidlá editora a prehľad v administrácii, nastavené v block.json a blockstudio.json.

Priestor pre každé pole

Opakovače, polia kódu a vnorené skupiny sa do bočného panela zmestia len ťažko. Hlavička bloku obsahuje tlačidlo Open Expanded Editor, ktoré otvorí rovnaké polia v širšom paneli sprava. Panel zatvoríte kliknutím na Hotovo, na pozadie alebo stlačením Esc; blok zostane vybratý.

Rovnaký vykresľovač polí zapisuje rovnaké atribúty, takže ukážka sa aktualizuje počas písania a netreba žiadne nastavenie block.json. Polia, ktoré majú byť pri obsahu, možno presunúť na panel nástrojov bloku pomocou "position": "toolbar".

Rozšírený editor

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

Automatické dopĺňanie z vášho CSS

Vypíšte adresy URL štýlov v blockEditor.cssClasses a cssVariables; polia classes a code napovedajú, čo tieto súbory definujú.

Indikátory pri podržaní kurzora a výbere

Nastavením blockEditor.enhance pridáte do editora prvky Blockstudio na indikáciu podržania kurzora a výberu.

Kto má prístup do editora

users.ids a users.roles v blockstudio.json určujú ID používateľov a roly s prístupom do editora cez Blockstudio.

V jazyku vášho klienta

Ovládacie prvky polí, administračná obrazovka a plátno používajú jazyk webu alebo jazyk profilu jednotlivých používateľov, a to z dodaných prekladov.

Zdroje určené len pre editor

editor.assets v blockstudio.json uvádza ďalšie zdroje, ktoré sa majú načítať v editore.

Médiá v počiatočnom dátovom balíku

Polia Files načítavajú údaje príloh z počiatočného dátového balíka editora cez vnorené skupiny, karty a opakovače ešte pred odoslaním požiadavky na mediálny endpoint.

Vždy len jedna požiadavka na náhľad

Novšia požiadavka na náhľad bloku zruší v prehliadači predchádzajúcu požiadavku, pričom aktuálny náhľad zostane medzitým zobrazený.

Každý blok si zachová svoje hodnoty

Bloky vybrané naraz si zachovajú vlastné hodnoty a funkcie vrátenia a opakovania zmien zahŕňajú polia RichText aj polia na bočnom paneli.

Vypnite pole a zachovajte jeho hodnotu

Editor môže pole vypnúť v inšpektore: prejde kurzorom na jeho ľavý okraj, kým sa nezobrazí modrý okraj, a potom klikne. Pole sa zobrazí priehľadne, jeho hodnota zostane uložená a blok ho prestane vykresľovať, kým ho niekto znova nezapne.

To isté platí pre jednotlivé položky v poli súborov, takže jeden obrázok možno skryť a ostatné ponechať zobrazené. Nastavením "switch": true zobrazíte pri poli prepínač a pomocou $a['_disabled'] zistíte, či ho šablóna potrebuje.

Zakázanie atribútov

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

Ukážka vo vkladači

Pridajte kľúč example do block.json a blok zobrazí ukážku, keď nad ním editor prejde kurzorom vo vkladači blokov. Bloku, ktorý vyzerá dobre s predvolenými hodnotami, stačí prázdny objekt.

Zadajte example.attributes vzorové hodnoty pre vlastné polia alebo example.innerBlocks počiatočný strom pre blok, ktorý obaľuje iné bloky.

Ukážka vo vkladači

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>

Pravidlá editora v jednom súbore

Určte, čo vkladač ponúka, bez pomocného kódu témy. blockEditor.blocks prijíma zoznamy povolených a zakázaných položiek s náhradnými znakmi, napríklad core/*, premenuje a zoradí kategórie, odstráni štýly blokov registrované v PHP, skryje zastarané widgety a môže vypnúť adresár blokov.

blockEditor.patterns zapína alebo vypína zdroje vzorov jadra, vzdialené zdroje, tému a Blockstudio a filtruje ich kategórie. blockEditor.media vypína Openverse a obmedzuje veľkosti obrázkov, ktoré si môžu editori vybrať.

Nastavenia editora 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"] }
    }
  }
}

Rýchle prvé vykreslenie

Bloky Blockstudio sa vykresľujú na serveri. Editor vopred načíta vykreslený výstup blokov, ktoré už sú v príspevku, vrátane vnorených blokov v synchronizovaných vzoroch, a pri prvom vykreslení ho znovu použije namiesto odosielania požiadavky vykresľovaču pre každý uložený blok.

Kód, triedy, atribúty a ovládacie prvky WYSIWYG sa načítajú pri prvom zobrazení, takže nevybraté bloky ich nikdy nenačítajú. Blok, ktorý nepotrebuje živú ukážku, môže nastaviť disableLoading a zobraziť zástupný obsah, pričom všetky polia zostanú upraviteľné.

Načítanie editora

block.json

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

blockstudio.json

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

Ukážky, ktoré sa správajú ako stránka

Interactivity API sa načíta v rámci iframe editora, takže data-wp-context, väzby, obslužné rutiny udalostí a akcie vášho úložiska fungujú na plátne. Pribalené komponenty bsui/* na tom stavajú, takže počas úprav sa otvorí dialóg a rozbalí výber.

Odkazy v náhľade nikdy nevedú na inú stránku, či už na ne kliknete, otvoríte ich pomocou modifikačného klávesu alebo aktivujete z klávesnice, a kliknutím sa stále vyberie blok. Pomocou assets.reset.enabled sa triedy body témy skopírujú na plátno, takže tam zodpovedajú aj selektory ako .brand-a .site-card.

Interaktivita

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']));
});

Prehľad v ponuke Nástroje > Blockstudio

Na administračnej obrazovke sa zobrazuje, čo Blockstudio zaregistrovalo zo súborového systému: bloky, rozšírenia, polia, stránky s ich stavom synchronizácie a schémy db.php v natívnych tabuľkách DataViews WordPress. Zobrazenie Databases umožňuje prehliadať záznamy jednotlivých schém, ktoré sa načítavajú a stránkujú cez REST API.

Keď blocks.json témy pomenuje registre, zobrazenie Registry vypíše ich bloky a umožní importovať ich do adresára blokov z wp-admin. Obrazovka je dostupná používateľom s oprávnením manage_options a filter blockstudio/admin/enabled ju vypne.

Administračná obrazovka

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

Oficiálna súprava rozšírení

Prémiové šablóny webov, systémové pokyny pre AI a súkromná komunita Discord. Jednorazový nákup, aktualizácie na celý život.

500+ šablón stránok
Systémové pokyny pre AI
Doživotné aktualizácie
Súkromná komunita Discord

Získať Plus