Azoknak készült, akik szerkesztenek

Szélesebb mezőpanel, eszköztárvezérlők, szerkesztői szabályok és adminfelületi leltár, a block.json és a blockstudio.json beállítva.

Hely minden mezőnek

Az ismétlődő mezők, a kódmezők és a beágyazott csoportok szűkösen férnek el az oldalsávban. A blokk fejlécén lévő Open Expanded Editor gomb ugyanazokat a mezőket nyitja meg egy szélesebb, jobbról beúszó panelen. A Kész gomb, a háttérre kattintás vagy az Esc bezárja, a blokk pedig kijelölve marad.

Ugyanaz a mezőmegjelenítő írja ugyanazokat az attribútumokat, ezért az előnézet gépelés közben frissül, és nincs szükség block.json beállításra. A tartalom mellett megjelenítendő mezők a blokk eszköztárára helyezhetők a "position": "toolbar" segítségével.

Kibővített szerkesztő

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

Automatikus kiegészítés a(z) CSS alapján

Listázza a stíluslapok URL-jeit a(z) blockEditor.cssClasses és a cssVariables mezőben; az osztályok és kódmezők alapján következtethet arra, hogy mit definiálnak ezek a fájlok.

Rámutatási és kijelölési jelzések

Állítsa be a(z) blockEditor.enhance értékét, hogy a szerkesztőben megjelenjenek a(z) Blockstudio rámutatási és kijelölési lehetőségei.

Kik férnek hozzá a szerkesztőhöz

A(z) users.ids és users.roles a(z) blockstudio.json értékben a(z) Blockstudio szerkesztői hozzáféréssel rendelkező felhasználók azonosítóit és szerepköreit nevezi meg.

Ügyfele nyelvén

A mezővezérlők, az adminisztrációs képernyő és a vászon a webhely nyelvét vagy az egyes felhasználók profilnyelvét követik a csomagban található fordítások alapján.

Csak a szerkesztőben használt eszközök

A editor.assets a blockstudio.json helyen felsorolja a szerkesztőben betöltendő további eszközöket.

Média az első adatcsomagban

A fájlmezők a kezdeti szerkesztői adatcsomagból olvassák ki a mellékletadatokat a beágyazott csoportokon, lapokon és ismétlőkön keresztül, mielőtt lekérdeznék a média végpontját.

Egyszerre egy előnézeti kérés

Ha egy blokkhoz újabb előnézeti kérés érkezik, a böngésző megszakítja az előzőt, miközben az aktuális előnézet továbbra is látható marad.

Minden blokk megőrzi az értékeit

A többes kijelölésű blokkok megőrzik saját értékeiket, a visszavonás és az ismétlés pedig a RichText és az oldalsáv mezőire is kiterjed.

Mező kikapcsolása az érték megtartásával

A szerkesztő a felügyelőpanelen kikapcsolhat egy mezőt: vigye az egérmutatót a bal szélére, amíg meg nem jelenik a kék keret, majd kattintson. A mező áttetszővé válik, az értéke mentve marad, és a blokk nem jeleníti meg, amíg valaki vissza nem kapcsolja.

Ugyanez a fájlmezők egyes elemeire is működik, így egy kép ideiglenesen elrejthető, miközben a többi látható marad. Állítsa be a "switch": true értékét, hogy a mezőhöz látható kapcsoló tartozzon, és olvassa ki a $a['_disabled'] értékét, ha a sablonnak tudnia kell erről.

Letiltási attribútumok

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

Előnézet a beszúróban

Adjon egy example kulcsot a block.json fájlhoz, és a blokk előnézete megjelenik, amikor a szerkesztő fölé viszi az egérmutatót a blokkbeszúróban. Az alapértelmezett beállításokkal jól kinéző blokknál elegendő egy üres objektum.

Adjon example.attributes mintaértékeket a saját mezőihez, vagy adja meg a example.innerBlocks kezdő blokkhierarchiáját egy más blokkokat körülölelő blokkhoz.

Beszúró-előnézet

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>

Szerkesztői szabályok egy fájlban

Döntse el, mit kínál fel a beszúró témaösszekötő kód nélkül. A blockEditor.blocks engedélyezési és tiltási listákat fogad, olyan helyettesítő karakterekkel, mint a core/*, átnevezi és sorba rendezi a kategóriákat, eltávolítja a PHP fájlban regisztrált blokkszíneket, elrejti az örökölt widgeteket, és kikapcsolhatja a blokkkatalógust.

A blockEditor.patterns be- vagy kikapcsolja a core, remote, theme és Blockstudio mintaforrásokat, valamint szűri a kategóriáikat. A blockEditor.media kikapcsolja a Openverse elemet, és korlátozza a szerkesztők által választható képméreteket.

Blokkszerkesztői beállítások

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

Gyors első megjelenítés

A Blockstudio blokkok a szerveren jelennek meg. A szerkesztő előtölti a bejegyzésben már szereplő blokkok megjelenített kimenetét, beleértve a szinkronizált mintákba ágyazott blokkokat is, majd ezt használja az első megjelenítéshez ahelyett, hogy minden mentett blokkhoz külön megjelenítési kérést küldene.

A kód, az osztályok, az attribútumok és a WYSIWYG vezérlők csak akkor töltődnek le, amikor először megjelennek, így a ki nem jelölt blokkok nem töltik be őket. Az az élő előnézetet nem igénylő blokk beállíthatja a disableLoading értékét, és helyőrzőt jeleníthet meg; közben minden mező szerkeszthető marad.

Szerkesztő betöltése

block.json

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

blockstudio.json

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

Az előnézet úgy működik, mint az oldal

Az Interactivity API a szerkesztő iframe-jébe töltődik be, így a data-wp-context, a kötések, az eseménykezelők és az áruház műveletei a vásznon futnak. A hozzá csomagolt bsui/* komponensek erre épülnek, ezért szerkesztés közben megnyílik egy párbeszédablak, és legördül egy választólista.

Az előnézetben a hivatkozásokra kattintva, módosítóbillentyűvel megnyitva vagy billentyűzetről aktiválva sem navigál el az oldal, a kattintás pedig továbbra is kijelöli a blokkot. A assets.reset.enabled segítségével a téma törzsosztályai a vászonra is átkerülnek, így az olyan szelektorok is illeszkednek ott, mint a .brand-a .site-card.

Interaktivitás

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

Leltár itt: Eszközök > Blockstudio

Az adminisztrációs képernyő felsorolja, mit regisztrált a fájlrendszerből a Blockstudio: blokkokat, bővítményeket, mezőket, szinkronizálási állapotukkal együtt megjelenő oldalakat, valamint db.php sémákat, natív WordPress DataViews táblázatokban. Az Adatbázisok nézetben az egyes sémák rekordjai böngészhetők, amelyeket a rendszer a REST API segítségével kér le és lapoz.

Ha a téma blocks.json regisztereket nevez meg, a Regiszter nézet felsorolja azok blokkjait, és importálja őket a blokk könyvtárába a wp-admin felületéről. A képernyőt manage_options rendelkező felhasználók érhetik el; a blockstudio/admin/enabled szűrővel kikapcsolható.

Adminisztrációs képernyő

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

A hivatalos bővítőkészlet

Prémium webhelysablonok, MI-rendszerutasítások és privát Discord közösség. Egyszeri vásárlás, élethosszig tartó frissítések.

500+ webhelysablon
AI-rendszerutasítások
Élettartamra szóló frissítések
Privát Discord közösség

Plus beszerzése