Vytvořeno pro ty, kdo upravují obsah

Širší panel polí, ovládací prvky panelu nástrojů, pravidla editoru a přehled v administraci, nastavené v block.json a blockstudio.json.

Prostor pro každé pole

Opakovače, pole kódu a vnořené skupiny se do postranního panelu nevejdou. Záhlaví bloku obsahuje tlačítko Open Expanded Editor, které otevře stejná pole v širším panelu zprava. Panel zavře tlačítko Hotovo, kliknutí na pozadí nebo klávesa Esc a blok zůstane vybraný.

Pole vykresluje i zapisuje stejné atributy stejný vykreslovač, takže se náhled při psaní aktualizuje a není potřeba nastavení block.json. Pole, která mají být vedle obsahu, lze přesunout do panelu nástrojů bloku pomocí "position": "toolbar".

Rozšířený 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é doplňování z vašeho CSS

V blockEditor.cssClasses a cssVariables jsou uvedeny URL stylopisů; třídy a pole kódu napovídají, co tyto soubory definují.

Indikátory při najetí a výběru

Nastavením blockEditor.enhance přidáte do editoru indikátory Blockstudio při najetí a výběru.

Kdo má přístup k editoru

users.ids a users.roles v blockstudio.json určují ID uživatelů a role s přístupem k editoru přes Blockstudio.

V jazyce vašeho klienta

Ovládací prvky polí, obrazovka administrace i plátno používají jazyk webu nebo jazyk profilu každého uživatele z přibalených překladů.

Prostředky pouze pro editor

editor.assets v blockstudio.json uvádí další prostředky, které se mají načíst v editoru.

Média v počáteční datové dávce

Pole souborů načítají údaje o přílohách z počáteční datové dávky editoru, a to i z vnořených skupin, karet a opakovačů, než požádají o data z mediálního koncového bodu.

Vždy jen jeden požadavek na náhled

Novější požadavek na náhled bloku v prohlížeči zruší ten předchozí a mezitím zůstane na obrazovce aktuální náhled.

Každý blok si uchovává své hodnoty

Bloky vybrané najednou si zachovávají vlastní hodnoty a vrácení i opakování změn zahrnuje RichText a pole v postranním panelu.

Vypněte pole a zachovejte jeho hodnotu

Editor může pole vypnout v inspektoru: najeďte na jeho levý okraj, dokud se neobjeví modrý rámeček, a klikněte. Pole zprůhlední, jeho hodnota zůstane uložená a blok ho přestane vykreslovat, dokud ho někdo znovu nezapne.

Stejně to funguje i u jednotlivých položek v poli souborů, takže jeden obrázek může zůstat skrytý, zatímco ostatní se zobrazují. Nastavením "switch": true zpřístupníte přepínač pole a pomocí $a['_disabled'] tuto informaci načtete v šabloně.

Zakázání atributů

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

Náhled v nabídce vkládání

Přidejte klíč example do block.json a při najetí editora na blok v nabídce vkládání bloků se zobrazí jeho náhled. Bloku, který vypadá dobře s výchozím nastavením, stačí prázdný objekt.

Doplňte example.attributes ukázkovými hodnotami pro vlastní pole nebo nastavte example.innerBlocks jako výchozí strom pro blok, který obaluje jiné bloky.

Náhled v nabídce vkládání

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>

Pravidla editoru v jednom souboru

Určete, co nabízí nabídka vkládání, bez pomocného kódu motivu. blockEditor.blocks přijímá seznamy povolených a zakázaných položek s žolíky, jako je core/*, přejmenovává a řadí kategorie, odebírá styly bloků registrované v PHP, skrývá starší widgety a může vypnout adresář bloků.

blockEditor.patterns zapíná a vypíná zdroje vzorů core, remote, theme a Blockstudio a filtruje jejich kategorie. blockEditor.media vypíná Openverse a omezuje velikosti obrázků, které si mohou editoři vybrat.

Nastavení editoru bloků

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

Rychlé první vykreslení

Bloky Blockstudio se vykreslují na serveru. Editor předem načte vykreslený výstup bloků, které už jsou v příspěvku, včetně vnořených bloků v synchronizovaných vzorech, a použije ho při prvním vykreslení místo odesílání požadavku na vykreslovač pro každý uložený blok.

Kód, třídy, atributy a ovládací prvky WYSIWYG se stáhnou při prvním zobrazení, takže nevybrané bloky je nikdy nenačtou. Blok, který nepotřebuje živý náhled, může nastavit disableLoading a zobrazit zástupný obsah; všechna pole zůstanou upravitelná.

Načítání editoru

block.json

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

blockstudio.json

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

Náhledy, které se chovají jako stránka

Interactivity API se načítá uvnitř iframe editoru, takže data-wp-context, vazby, obslužné funkce událostí i akce vašeho úložiště běží na plátně. Navazují na něj přibalené komponenty bsui/*, takže při úpravách se otevře dialog a rozbalí nabídka výběru.

Odkazy v náhledu nikdy neodvedou jinam, ať na ně kliknete, otevřete je pomocí modifikační klávesy nebo aktivujete z klávesnice, a kliknutí přitom stále vybere blok. Pomocí assets.reset.enabled se do plátna zkopírují třídy těla stránky motivu, takže tam odpovídají i selektory jako .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']));
});

Přehled v nabídce Nástroje > Blockstudio

Obrazovka administrace uvádí, co Blockstudio zaregistroval z filesystému: bloky, rozšíření, pole, stránky s jejich stavem synchronizace a schémata db.php v nativních tabulkách WordPress DataViews. Zobrazení Databáze umožňuje procházet záznamy jednotlivých schémat, načítané a stránkované přes REST API.

Když blocks.json motivu pojmenovává registry, zobrazení Registry vypíše jejich bloky a importuje je do adresáře bloků z wp-admin. Obrazovka je přístupná uživatelům s manage_options a filtr blockstudio/admin/enabled ji vypne.

Obrazovka administrace

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ální sada rozšíření

Prémiové šablony webů, systémové pokyny pro umělou inteligenci a soukromá komunita Discord. Jednorázový nákup, doživotní aktualizace.

500+ šablon webů
Systémové instrukce AI
Doživotní aktualizace
Soukromá komunita Discord

Získat Plus