Создано для тех, кто редактирует
Расширенная панель полей, элементы управления на панели инструментов, правила работы редактора и административный каталог — все это настроено в 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 указывают ID пользователей и роли, которым предоставлен доступ к редактору с Blockstudio.
На языке вашего клиента
Элементы управления полями, экран администрирования и холст используют язык сайта или язык профиля каждого пользователя, если для него есть перевод.
Ресурсы только для редактора
editor.assets в blockstudio.json перечисляет дополнительные ресурсы для загрузки в редакторе.
Медиафайлы в первой загрузке
Поля файлов получают данные вложений из начальной загрузки редактора, включая вложенные группы, вкладки и повторители, и только потом обращаются к эндпоинту медиафайлов.
Только один запрос предварительного просмотра за раз
Новый запрос предварительного просмотра блока отменяет предыдущий в браузере, а текущий просмотр тем временем остаётся на экране.
Каждый блок хранит свои значения
У каждого блока при множественном выборе сохраняются собственные значения; отмена и повтор действия распространяются на поля 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 включает и отключает источники шаблонов core, remote, theme и 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 классы body темы копируются на холст, поэтому там тоже срабатывают селекторы, такие как .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']));
});Список в разделе «Инструменты» > Blockstudio
На экране администрирования перечислено то, что Blockstudio зарегистрировал в файловой системе: блоки, расширения, поля, страницы с состоянием синхронизации и схемы db.php в таблицах DataViews из WordPress. Представление «Базы данных» позволяет просматривать записи каждой схемы; они загружаются и разбиваются на страницы через REST API.
Если blocks.json темы задаёт реестры, в представлении «Реестры» перечислены их блоки, которые можно импортировать в каталог блоков из 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');Официальный набор расширений
Премиум-шаблоны сайтов, системные инструкции для ИИ и закрытое сообщество Discord. Разовая покупка, обновления навсегда.
- 500+ шаблонов сайтов
- Системные инструкции для ИИ
- Пожизненные обновления
- Закрытое сообщество Discord