Stworzone z myślą o osobach edytujących
Szerszy panel pól, przyciski paska narzędzi, zasady edytora i spis w panelu administracyjnym, skonfigurowane w block.json i blockstudio.json.
Miejsce na każde pole
Powtarzalne pola, pola kodu i zagnieżdżone grupy zajmują dużo miejsca na pasku bocznym. Nagłówek bloku zawiera przycisk Open Expanded Editor, który otwiera te same pola w szerszym panelu wysuwanym z prawej strony. Kliknięcie przycisku Done, tła lub naciśnięcie Esc zamyka panel, a blok pozostaje zaznaczony.
Ten sam mechanizm renderowania pól zapisuje te same atrybuty, więc podgląd aktualizuje się podczas pisania i nie jest potrzebne ustawienie block.json. Pola, które powinny znajdować się obok treści, można przenieść na pasek narzędzi bloku za pomocą "position": "toolbar".
{
"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"
}
]
}
}Autouzupełnianie z CSS
Wymień adresy URL arkuszy stylów w blockEditor.cssClasses i cssVariables; klasy oraz pola kodu podpowiedzą, co definiują te pliki.
Wskazówki przy najechaniu i zaznaczeniu
Ustaw blockEditor.enhance, aby dodać do edytora funkcje Blockstudio ułatwiające najeżdżanie i zaznaczanie.
Kto ma dostęp do edytora
users.ids i users.roles w blockstudio.json określają identyfikatory użytkowników i role mające dostęp do edytora przez Blockstudio.
W języku Twojego klienta
Elementy sterujące pól, ekran administracyjny i obszar roboczy używają języka witryny lub języka profilu danego użytkownika, korzystając z dołączonych tłumaczeń.
Zasoby dostępne tylko w edytorze
editor.assets w blockstudio.json wyświetla dodatkowe zasoby do załadowania w edytorze.
Media w początkowym żądaniu
Pola plików odczytują dane załączników z początkowego żądania edytora, także w zagnieżdżonych grupach, kartach i powtarzających się polach, zanim wywołają punkt końcowy mediów.
Tylko jedno żądanie podglądu naraz
Nowsze żądanie podglądu bloku anuluje w przeglądarce poprzednie, a bieżący podgląd pozostaje w tym czasie na ekranie.
Każdy blok zachowuje swoje wartości
Bloki zaznaczone jednocześnie zachowują własne wartości, a cofanie i ponawianie obejmuje pola RichText i panelu bocznego.
Wyłącz pole, zachowaj jego wartość
Edytor może wyłączyć pole w inspektorze: najedź na jego lewą krawędź, aż pojawi się niebieska ramka, a następnie kliknij. Pole stanie się półprzezroczyste, jego wartość pozostanie zapisana, a blok przestanie je renderować, dopóki ktoś nie włączy go ponownie.
To samo działa dla pojedynczych elementów w polu plików, więc jeden obraz może być ukryty, podczas gdy pozostałe są wyświetlane. Ustaw "switch": true, aby udostępnić widoczny przełącznik pola, a gdy szablon musi to sprawdzić, odczytaj $a['_disabled'].
{
"name": "acme/card",
"title": "Card",
"blockstudio": {
"attributes": [
{
"id": "title",
"type": "text",
"label": "Title",
"switch": true
}
]
}
}<?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; ?>Podgląd w inserterze
Dodaj klucz example do block.json, a blok będzie wyświetlał podgląd, gdy edytor najedzie na niego w inserterze bloków. W przypadku bloku, który dobrze wygląda z domyślnymi ustawieniami, wystarczy pusty obiekt.
Podaj example.attributes przykładowe wartości dla własnych pól albo example.innerBlocks początkowe drzewo dla bloku, który obejmuje inne bloki.
{
"name": "my-theme/hero",
"title": "Hero",
"category": "text",
"example": {
"attributes": {
"title": "This title will be shown in the preview"
}
},
"blockstudio": true
}<h1><?php echo esc_html($a['title']); ?></h1>Zasady edytora w jednym pliku
Decyduj, co oferuje inserter, bez kodu konfiguracji motywu. blockEditor.blocks przyjmuje listy dozwolonych i zablokowanych elementów z symbolami wieloznacznymi, takimi jak core/*, zmienia nazwy i kolejność kategorii, usuwa style bloków zarejestrowane w PHP, ukrywa starsze widżety i może wyłączyć katalog bloków.
blockEditor.patterns włącza lub wyłącza źródła wzorców: podstawowe, zdalne, motywu i Blockstudio, a także filtruje ich kategorie. blockEditor.media wyłącza Openverse i ogranicza rozmiary obrazów, które mogą wybierać edytorzy.
{
"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"] }
}
}
}Szybkie pierwsze wyświetlenie
Bloki Blockstudio są renderowane na serwerze. Edytor wstępnie ładuje wyrenderowany wynik dla bloków już znajdujących się we wpisie, w tym zagnieżdżonych bloków w zsynchronizowanych wzorcach, i wykorzystuje go przy pierwszym wyświetleniu zamiast wysyłać osobne żądanie renderowania dla każdego zapisanego bloku.
Kod, klasy, atrybuty i kontrolki WYSIWYG są pobierane przy pierwszym wyświetleniu, więc niezaznaczone bloki nigdy ich nie ładują. Blok, który nie potrzebuje podglądu na żywo, może ustawić disableLoading i wyświetlić symbol zastępczy, zachowując możliwość edycji wszystkich pól.
{
"name": "my-theme/map",
"title": "Map",
"blockstudio": {
"blockEditor": {
"disableLoading": true
}
}
}{
"blockEditor": {
"disableLoading": true
}
}Podglądy działające jak strona
Interactivity API ładuje się w elemencie iframe edytora, więc data-wp-context, powiązania, procedury obsługi zdarzeń i akcje magazynu działają na kanwie. Dołączone komponenty bsui/* bazują na nim, dzięki czemu podczas edycji otwiera się okno dialogowe, a lista rozwijana się rozwija.
Linki w podglądzie nigdy nie prowadzą poza niego: niezależnie od tego, czy zostaną kliknięte, otwarte z klawiszem modyfikującym czy aktywowane z klawiatury, kliknięcie nadal zaznacza blok. Dzięki assets.reset.enabled klasy body motywu są kopiowane na obszar roboczy, więc pasują tam również selektory takie jak .brand-a .site-card.
{
"name": "my-theme/disclosure",
"title": "Disclosure",
"blockstudio": {
"interactivity": true
}
}<?php
add_filter('blockstudio/editor/canvas/body_class', function (array $classes) {
return array_values(array_diff($classes, ['logged-in']));
});Spis w Narzędzia > Blockstudio
Ekran administracyjny wyświetla elementy zarejestrowane przez Blockstudio w systemie plików: bloki, rozszerzenia, pola, strony wraz ze stanem synchronizacji oraz schematy db.php w natywnych tabelach DataViews WordPress. Widok baz danych umożliwia przeglądanie rekordów każdego schematu, pobieranych i stronicowanych za pośrednictwem REST API.
Gdy blocks.json motywu określa rejestry, widok Rejestru wyświetla ich bloki i importuje je do katalogu bloków z wp-admin. Ekran jest dostępny dla użytkowników z manage_options, a filtr blockstudio/admin/enabled go wyłącza.
{
"$schema": "https://blockstudio.dev/schema/blocks.json",
"directory": "blockstudio",
"registries": {
"ui": "https://blocks.example.com/registry.json"
}
}<?php
add_filter('blockstudio/admin/enabled', '__return_false');Oficjalny zestaw rozszerzeń
Wysokiej jakości szablony witryn, systemowe instrukcje AI i prywatna społeczność Discord. Jednorazowy zakup, dożywotnie aktualizacje.
- 500+ szablonów stron
- Instrukcje systemowe AI
- Dożywotnie aktualizacje
- Prywatna społeczność Discord