Създадено за хората, които редактират
По-широк панел за полета, контроли в лентата с инструменти, правила за редактора и инвентаризация в администрацията, зададени в block.json и blockstudio.json.
Място за всяко поле
Повтарящите се полета, полетата за код и вложените групи се побират трудно в страничния панел. Заглавката на блока съдържа бутон Open Expanded Editor, който отваря същите полета в по-широк панел отдясно. Бутонът „Готово“, фонът или Esc затварят панела, а блокът остава избран.
Същият визуализатор на полета записва същите атрибути, така че визуализацията се актуализира, докато пишете, и не е необходима настройка block.json. Полетата, които трябва да са до съдържанието, могат да се преместят в лентата с инструменти на блока с "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"
}
]
}
}Автоматично довършване от вашия CSS
Изброява URL адресите на стиловите таблици в blockEditor.cssClasses и cssVariables, а класовете и полетата за код подсказват какво дефинират тези файлове.
Индикации при посочване и избиране
Задайте blockEditor.enhance, за да добавите към редактора възможностите на Blockstudio за посочване и избор.
Кой има достъп до редактора
users.ids и users.roles в blockstudio.json задават потребителските идентификатори и ролите с достъп до редактора чрез Blockstudio.
На езика на клиента ви
Контролите на полетата, екранът за администрация и платното следват езика на сайта или езика на профила на всеки потребител, като използват включените преводи.
Ресурси само за редактора
editor.assets в blockstudio.json изброява допълнителните ресурси, които да се заредят в редактора.
Медия в първоначалния пакет данни
Полетата Files зареждат данните за прикачените файлове от първоначалния пакет данни на редактора, включително през вложени групи, раздели и повтарящи се полета, преди да направят заявка към крайния интерфейс за медия.
Само една заявка за предварителен преглед наведнъж
По-нова заявка за предварителен преглед на блок отменя предишната в браузъра, а текущият преглед остава на екрана междувременно.
Всеки блок запазва стойностите си
Блоковете, избрани едновременно, запазват собствените си стойности, а действията за отмяна и повторение обхващат RichText и полетата в страничния панел.
Изключете поле, запазете стойността му
Редакторът може да изключи поле от инспектора: задръжте курсора над левия му ръб, докато се появи синята рамка, след което щракнете. Полето става полупрозрачно, стойността му остава запазена и блокът спира да го визуализира, докато някой не го включи отново.
Същото важи и за отделните елементи в поле за файлове, така че едно изображение може да бъде скрито, докато останалите се показват. Задайте "switch": true, за да дадете на полето видим превключвател, и прочетете $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; ?>Визуализация в инструмента за вмъкване
Добавете ключ example към block.json и блокът ще показва визуализация, когато редакторът задържи курсора над него в инструмента за вмъкване на блокове. За блок, който изглежда добре с настройките си по подразбиране, е достатъчен празен обект.
Задайте example.attributes примерни стойности за собствените си полета или example.innerBlocks начално дърво за блок, който обгръща други блокове.
{
"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>Правила за редактора в един файл
Определете какво предлага инструментът за вмъкване без помощен код за тема. blockEditor.blocks приема списъци за разрешаване и забрана с заместващи символи като core/*, преименува и подрежда категории, премахва стилове на блокове, регистрирани в PHP, скрива старите джаджи и може да изключи директорията с блокове.
blockEditor.patterns включва или изключва източниците на модели от ядрото, отдалечени източници, теми и Blockstudio и филтрира категориите им. blockEditor.media изключва Openverse и ограничава размерите на изображенията, които редакторите могат да избират.
{
"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"] }
}
}
}Бързо първоначално визуализиране
Blockstudio блоковете се визуализират на сървъра. Редакторът предварително зарежда визуализирания изход на блоковете, които вече са в публикацията, включително вложените блокове в синхронизираните модели, и го използва за първоначалното визуализиране, вместо да изпраща заявка към визуализатора за всеки запазен блок.
Кодът, класовете, атрибутите и контролите WYSIWYG се изтеглят при първата им поява, така че неизбраните блокове никога не ги зареждат. Блок, който не се нуждае от визуализация на живо, може да зададе disableLoading и да показва заместител, като всички полета остават редактируеми.
{
"name": "my-theme/map",
"title": "Map",
"blockstudio": {
"blockEditor": {
"disableLoading": true
}
}
}{
"blockEditor": {
"disableLoading": true
}
}Визуализации, които се държат като страницата
Interactivity API се зарежда във вътрешния iframe на редактора, така че data-wp-context, обвързванията, обработчиците на събития и действията на вашето хранилище се изпълняват в платното. Вградените компоненти bsui/* се основават на него, така че диалогов прозорец се отваря, а падащото меню за избор се разгръща, докато редактирате.
Връзките в предварителния преглед никога не водят към друга страница — независимо дали са щракнати, отворени с модифициращ клавиш или активирани от клавиатурата — а щракването пак избира блока. С assets.reset.enabled класовете на тялото на темата се копират върху платното, така че селектори като .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']));
});Инвентар в Tools > Blockstudio
Екранът за администрация показва какво Blockstudio е регистрирало от файловата система: блокове, разширения, полета, страници със състоянието им на синхронизиране и схеми db.php в нативни таблици на WordPress DataViews. Изгледът Databases преглежда записите във всяка схема, зареждани и страницирани чрез REST API.
Когато blocks.json на темата задава имена на регистри, изгледът Registry показва блоковете им и ги импортира в директорията ви с блокове от wp-admin. Екранът е достъпен за потребители с manage_options, а филтърът blockstudio/admin/enabled го изключва.
{
"$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');Официалният комплект за разширения
Премиум шаблони за сайтове, системни инструкции за AI и частна общност в Discord. Еднократна покупка, актуализации за цял живот.
- 500+ шаблона за сайтове
- Системни инструкции за AI
- Актуализации за целия период
- Частна общност на Discord