Loodud neile, kes sisu redigeerivad

Laiem väljade sahtel, tööriistariba juhtelemendid, redaktori reeglid ja halduse loend, seadistatuna asukohas block.json ja blockstudio.json.

Ruumi igale väljale

Korduvad väljad, koodiväljad ja pesastatud rühmad jäävad külgribal kitsikusse. Ploki päises on nupp Open Expanded Editor, mis avab samad väljad paremal laiemas sahtlis. Valmis, taustal klõpsamine või Esc sulgeb selle ning plokk jääb valituks.

Sama väljade renderdaja kirjutab samad atribuudid, nii et eelvaade uueneb tippimise ajal ja block.json seadistust pole vaja. Sisu kõrvale sobivad väljad saab viia ploki tööriistaribale valikuga "position": "toolbar".

Laiendatud redaktor

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

Automaatne täitmine sinu CSS põhjal

Loetle stiililehtede URL-id väljal blockEditor.cssClasses ja cssVariables ning klassid ja koodiväljad annavad vihjeid selle kohta, mida need failid määratlevad.

Hõljutamise ja valiku märguanded

Määra blockEditor.enhance, et lisada redaktorisse Blockstudio hõljutamise ja valiku võimalused.

Kes pääseb redaktorisse

users.ids ja users.roles määravad blockstudio.json kasutajatunnused ja rollid, kellel on Blockstudio kaudu redaktorile juurdepääs.

Kliendi keeles

Väljade juhtelemendid, haldusvaade ja lõuend kasutavad saidi keelt või iga kasutaja profiili keelt ning komplekti kuuluvaid tõlkeid.

Ainult redaktori varad

editor.assets failis blockstudio.json loetleb redaktoris laaditavad lisaressursid.

Meediumid esimeses päringus

Failiväljad loevad manuseandmed redaktori algsest päringust, liikudes läbi pesastatud rühmade, vahekaartide ja kordajate, enne kui meediumite lõpp-punkti poole pöördutakse.

Korraga üks eelvaatepäring

Ploki uuem eelvaatepäring tühistab brauseris eelmise päringu ning vahepeal jääb ekraanile praegune eelvaade.

Iga plokk säilitab oma väärtused

Mitme valitud ploki väärtused jäävad igaühel eraldi alles ning tagasivõtmine ja uuesti tegemine hõlmavad RichTexti ja külgriba välju.

Lülitage väli välja, säilitage selle väärtus

Redaktor saab välja inspektoris välja lülitada: viige kursor selle vasaku serva kohale, kuni ilmub sinine ääris, ja klõpsake. Väli muutub läbipaistvaks, selle väärtus jääb salvestatuks ning plokk ei renderda seda enam enne, kui keegi selle uuesti sisse lülitab.

Sama saab teha failivälja üksikute elementidega, nii et üks pilt võib peituda, samal ajal kui teised kuvatakse. Määrake "switch": true, et anda väljale nähtav lüliti, ja lugege väärtust $a['_disabled'], kui mallil on seda vaja.

Atribuutide väljalülitamine

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

Eelvaade lisajas

Lisage võtmele block.json võti example ja plokil kuvatakse eelvaade, kui redaktor viib kursori ploki lisajas selle kohale. Tühjast objektist piisab ploki jaoks, mis näeb vaikeväärtustega õige välja.

Andke example.attributes-le oma väljade näidisväärtused või example.innerBlocks-le algne puu ploki jaoks, mis ümbritseb teisi plokke.

Lisaja eelvaade

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>

Redaktori reeglid ühes failis

Otsustage, mida lisaja pakub, ilma teema siduskoodita. blockEditor.blocks võtab lubamis- ja keelamisloendeid, mis toetavad metamärke, näiteks core/*, nimetab kategooriad ümber ja järjestab neid, eemaldab asukohas PHP registreeritud plokistiilid, peidab pärandvidinad ja saab plokkide kataloogi välja lülitada.

blockEditor.patterns lülitab tuuma, kaug-, teema- ja Blockstudio mustrite allikad sisse või välja ning filtreerib nende kategooriaid. blockEditor.media lülitab välja Openverse ja piirab redaktorite valitavate pildisuuruste hulka.

Plokiredaktori seaded

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

Kiire esmane renderdus

Serveris renderdatakse plokid Blockstudio. Redaktor laadib eeltööna postituses juba olevate plokkide renderdatud väljundi, sealhulgas sünkroonitud mustrite pesastatud plokkide oma, ning kasutab seda esmasel renderdusel, selle asemel et saata iga salvestatud ploki kohta eraldi renderduspäring.

Kood, klassid, atribuudid ja WYSIWYG-juhtelemendid laaditakse alla nende esmakordsel ilmumisel, nii et valimata plokid ei laadi neid kunagi. Plokk, mis ei vaja reaalajas eelvaadet, saab määrata disableLoading ja kuvada kohatäitja, samal ajal kui kõik väljad jäävad muudetavaks.

Redaktori laadimine

block.json

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

blockstudio.json

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

Eelvaated käituvad nagu leht

Interactivity API laaditakse redaktori iframe’i sisse, nii et data-wp-context, sidumised, sündmusekäsitlejad ja teie salvesti toimingud töötavad lõuendil. Komplektis olevad bsui/* komponendid ehituvad selle peale, nii et dialoog avaneb ja valikumenüü avaneb redigeerimise ajal.

Eelvaates olevad lingid ei vii kunagi mujale, olgu need klõpsatud, avatud muuteklahviga või aktiveeritud klaviatuurilt, ning klõps valib endiselt ploki. Kui kasutusel on assets.reset.enabled, kopeeritakse teema body-klassid lõuendile, nii et ka sellised selektorid nagu .brand-a .site-card seal sobivad.

Interaktiivsus

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

Inventar menüüs Tööriistad > Blockstudio

Haldusvaade loetleb, mida Blockstudio failisüsteemist registreeris: plokid, laiendused, väljad, sünkroonimisolekuga lehed ja db.php skeemid natiivsetes WordPress DataViewsi tabelites. Andmebaaside vaates saab sirvida iga skeemi kirjeid, mida hangitakse ja lehekülgede kaupa kuvatakse REST API kaudu.

Kui teema blocks.json nimetab registrid, loetleb Registri vaade nende plokid ja impordib need wp-administ sinu plokikataloogi. Vaade on kasutajatele avatud, kui neil on manage_options, ning filter blockstudio/admin/enabled lülitab selle välja.

Haldusvaade

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

Ametlik laienduskomplekt

Esmaklassilised saidimallid, tehisintellekti süsteemijuhised ja privaatne Discord kogukond. Ühekordne ost, eluaegsed uuendused.

500+ saidimalli
Tehisintellekti süsteemijuhised
Eluaegsed uuendused
Privaatne Discord-i kogukond

Hangi Plus