Створено для тих, хто редагує
Ширша панель полів, елементи керування на панелі інструментів, правила редактора та перелік в адмінці налаштовуються в 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 перелічує додаткові ресурси для завантаження в редакторі.
Медіафайли в першому запиті
Поля файлів зчитують дані вкладень із початкового запиту редактора, зокрема з вкладених груп, вкладок і повторюваних полів, перш ніж звертатися до кінцевої точки медіафайлів.
Лише один запит попереднього перегляду одночасно
Новіший запит попереднього перегляду блоку скасовує попередній у браузері, а поточний перегляд тим часом залишається на екрані.
Кожен блок зберігає власні значення
У блоків, вибраних разом, зберігаються власні значення; скасування та повторення дій охоплюють 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 класи 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']));
});Перелік у розділі Tools > 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