Rakennettu sisällön muokkaajille

Laajempi kenttävalikko, työkalupalkin ohjaimet, muokkauskäytännöt ja ylläpidon luettelo, määritelty kohteissa block.json ja blockstudio.json.

Tilaa jokaiselle kentälle

Toistimet, koodikentät ja sisäkkäiset ryhmät jäävät ahtaalle sivupalkissa. Lohkon otsakkeessa on Open Expanded Editor-painike, joka avaa samat kentät leveämpään oikealta avautuvaan valikkoon. Valmis-painike, tausta tai Esc sulkee sen, ja lohko pysyy valittuna.

Sama kenttien hahmontaja kirjoittaa samat attribuutit, joten esikatselu päivittyy kirjoittaessasi eikä block.json-asetusta tarvita. Sisällön viereen kuuluvat kentät voi siirtää lohkon työkalupalkkiin kohteella "position": "toolbar".

Laajennettu editori

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

Automaattinen täydennys lähteestä CSS

Listaa tyylitiedostojen URL-osoitteet kohdissa blockEditor.cssClasses ja cssVariables; luokat ja koodikentät antavat vihjeitä tiedostojen sisällöstä.

Kohdistuksen ja valinnan ilmaisimet

Määritä blockEditor.enhance, jotta Blockstudio-kohteen kohdistus- ja valintailmaisimet lisätään editoriin.

Kenellä on editorin käyttöoikeus

users.ids ja users.roles kohdassa blockstudio.json määrittävät käyttäjätunnukset ja roolit, joilla on Blockstudio-editorin käyttöoikeus.

Asiakkaasi kielellä

Kenttien ohjaimet, hallintanäkymä ja piirtoalue käyttävät sivuston kieltä tai kunkin käyttäjän profiilikieltä paketoitujen käännösten avulla.

Vain editorissa käytettävät resurssit

editor.assets kohdassa blockstudio.json luettelee editorissa ladattavat lisäresurssit.

Media ensimmäisessä hyötykuormassa

Tiedostokentät lukevat liitteen tiedot editorin alkuperäisestä hyötykuormasta sisäkkäisten ryhmien, välilehtien ja toistokenttien läpi ennen kuin ne kysyvät mediarajapinnalta.

Vain yksi esikatselupyyntö kerrallaan

Uudempi lohkon esikatselupyyntö peruuttaa selaimessa edellisen pyynnön, ja nykyinen esikatselu pysyy sillä välin näkyvissä.

Kunkin lohkon arvot säilyvät

Useita lohkoja valittaessa kullakin lohkolla säilyvät omat arvonsa, ja kumoa- ja tee uudelleen -toiminnot kattavat RichText-kentät ja sivupalkin kentät.

Poista kenttä käytöstä, säilytä sen arvo

Muokkaaja voi poistaa kentän käytöstä tarkastelupaneelista: vie osoitin sen vasemman reunan päälle, kunnes sininen reunus ilmestyy, ja napsauta. Kenttä muuttuu läpikuultavaksi, sen arvo säilyy tallessa, eikä lohko enää näytä sitä ennen kuin se otetaan uudelleen käyttöön.

Sama toimii myös tiedostokentän yksittäisille kohteille, joten yksi kuva voidaan piilottaa muiden näkyessä. Määritä "switch": true, jotta kentässä on näkyvä valitsin, ja tarkista $a['_disabled'], kun mallipohjan täytyy tietää valitsimen tila.

Käytöstä poistetut attribuutit

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

Esikatselu lisäysnäkymässä

Lisää block.json-kohteeseen example-avain, niin lohkon esikatselu näkyy, kun muokkaaja vie osoittimen sen päälle lohkojen lisäysnäkymässä. Tyhjä objekti riittää lohkolle, joka näyttää hyvältä oletusarvoillaan.

Anna example.attributes-kohteelle omien kenttiesi esimerkkiarvot tai example.innerBlocks-kohteelle aloituspuu lohkolle, joka ympäröi muita lohkoja.

Lisäysnäkymän esikatselu

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>

Muokkauskäytäntö yhdessä tiedostossa

Päätä, mitä lisäysnäkymä tarjoaa ilman teemakohtaista liimakoodia. blockEditor.blocks hyväksyy sallitut ja estetyt listat jokerimerkeillä, kuten core/*, nimeää ja järjestää luokkia uudelleen, poistaa kohteessa PHP rekisteröityjä lohkotyylejä, piilottaa vanhat vimpaimet ja voi poistaa lohkohakemiston käytöstä.

blockEditor.patterns ottaa ydin-, etä-, teema- ja Blockstudio-kuviolähteitä käyttöön tai poistaa ne käytöstä sekä suodattaa niiden luokat. blockEditor.media poistaa käytöstä Openverse-toiminnon ja rajoittaa muokkaajien valittavissa olevia kuvakokoja.

Lohkoeditorin asetukset

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

Nopea ensilataus

Blockstudio-lohkot hahmonnetaan palvelimella. Muokkain esilataa viestissä jo olevien lohkojen hahmonnetun tulosteen, myös synkronoitujen kuvioiden sisäkkäiset lohkot, ja käyttää sitä ensimmäisessä piirrossa sen sijaan, että lähettäisi jokaisesta tallennetusta lohkosta erillisen hahmonnuspyynnön.

Koodi, luokat, attribuutit ja WYSIWYG-ohjaimet ladataan, kun ne tulevat ensimmäisen kerran näkyviin, joten valitsemattomat lohkot eivät lataa niitä. Lohko, joka ei tarvitse reaaliaikaista esikatselua, voi määrittää disableLoading-asetuksen ja näyttää paikkamerkin, jolloin kaikki kentät ovat silti muokattavissa.

Muokkaimen lataaminen

block.json

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

blockstudio.json

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

Sivun tavoin toimivat esikatselut

Interactivity API latautuu muokkaimen iframe-kehyksen sisään, joten data-wp-context, sidonnat, tapahtumankäsittelijät ja kaupan toiminnot toimivat piirtoalueella. Mukana tulevat bsui/*-komponentit rakentuvat sen varaan, joten valintaikkuna avautuu ja pudotusvalikko toimii muokatessasi.

Esikatselun linkit eivät koskaan siirry muualle, kun niitä napsautetaan, avataan muokkausnäppäimellä tai aktivoidaan näppäimistöllä, ja napsautus valitsee silti lohkon. Kun assets.reset.enabled on käytössä, teeman body-luokat kopioidaan piirtoalueelle, joten myös valitsimet, kuten .brand-a .site-card, osuvat siellä.

Vuorovaikutteisuus

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

Luettelo kohdassa Työkalut > Blockstudio

Hallintanäkymässä luetellaan tiedostojärjestelmästä rekisteröidyt Blockstudio-kohteet: lohkot, laajennukset, kentät, sivut synkronointitiloineen sekä db.php-skeemat, kaikki natiiveissa WordPress DataViews -taulukoissa. Tietokantanäkymässä voi selata kunkin skeeman tietueita, jotka haetaan ja sivutetaan REST API -toimintojen kautta.

Kun teeman blocks.json nimeää rekistereitä, Rekisteri-näkymässä luetellaan niiden lohkot ja tuodaan ne lohkokansioosi wp-administa. Näkymä on avoinna käyttäjille, joilla on manage_options, ja blockstudio/admin/enabled-suodatin poistaa sen käytöstä.

Hallintanäkymä

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

Virallinen laajennuspaketti

Premium-sivupohjia, tekoälyn järjestelmäohjeita ja yksityinen Discord-yhteisö. Kertamaksu, elinikäiset päivitykset.

500+ sivustomallia
Tekoälyn järjestelmäohjeet
Elinikäiset päivitykset
Yksityinen Discord-yhteisö

Hanki Plus