Перейти к содержимому
НовоеBlockstudio 7.7

Фреймворк блоков
для WordPress

Пользовательские блоки из обычных файлов. Определяйте поля в JSON, пишите шаблоны на PHP, Twig или Blade. Сборка не требуется.

Терминал
composer require blockstudio/blockstudio
Начало работы
Скачать v7.7.12 (открывается в новой вкладке)

Блоки

Создавайте пользовательские блоки с шаблонами JSON и PHP, Twig или Blade. 27 типов полей, сборка не нужна.

Страницы

Создавайте полноценные страницы WordPress в виде файлов шаблонов и синхронизируйте их со встроенными блоками одной командой.

Паттерны

Задавайте повторно используемые шаблоны блоков в файлах; они автоматически регистрируются в окне вставки.

Расширения

Добавляйте пользовательские поля к любому блоку — основному, стороннему или собственному — с помощью одного файла JSON.

Типы полей

27 встроенных типов, включая повторители, палитры цветов, редакторы кода и медиафайлы, а также зарегистрированные вами типы полей.

Обработка ресурсов

Компиляция SCSS, модули ES, изолированные стили и необязательная минификация — всё по соглашению об именовании.

JSON Schema

Полное автодополнение и проверка конфигураций блоков, расширений и настроек в среде разработки.

Шаблонизация

Пишите шаблоны на PHP, Twig или Blade с изолированными ресурсами, вложенными InnerBlocks и переменными шаблонов.

Blockstudio значительно расширяет базовый способ создания блоков. Определения JSON, шаблоны PHP, стили с ограниченной областью действия. Только файлы — всё готово для агентов, которые создадут следующее поколение решений.

Пользовательские блоки в 3 файлах

Задайте поля в block.json, отобразите их в шаблоне, добавьте стили с помощью CSS или SCSS. Без JavaScript, сборки и шаблонного кода.

Начать
block.json
{
  "name": "starter/hero",
  "title": "Hero",
  "blockstudio": {
    "attributes": [
      { "id": "heading", "type": "text" },
      { "id": "showCta", "type": "toggle" },
      { "id": "background", "type": "color" }
    ]
  }
}
index.php
<section useBlockProps class="hero"
  style="background: <?= esc_attr($a['background']['value'] ?? '') ?>">
  <h1><?= esc_html($a['heading']) ?></h1>

  <?php if ($a['showCta']): ?>
    <a href="/contact">Get Started</a>
  <?php endif; ?>

  <InnerBlocks />
</section>
style.scss
.hero {
  padding: 4rem 2rem;

  h1 {
    font-size: 3rem;
    font-weight: 700;
  }

  a {
    padding: 0.75rem 1.5rem;
    color: #fff;
    background: #18181b;
  }
}

Возможности React, шаблоны PHP

Встроенные компоненты редактора WordPress, например RichText и InnerBlocks, доступны прямо в ваших шаблонах PHP. Без JavaScript и этапа сборки.

Всё в одном файле

Используйте <RichText /> для встроенного редактирования в редакторе блоков и статический HTML на сайте. <InnerBlocks /> управляет вложенными дочерними блоками, а useBlockProps обозначает обертку блока.

Blockstudio автоматически связывает редактор с блоком. В редакторе они становятся настоящими компонентами React. На сайте они отображаются как обычный серверный HTML.

index.php
<div useBlockProps class="container">
  <RichText
    class="text-xl font-semibold"
    tag="h1"
    attribute="headline"
    placeholder="Enter headline"
  />

  <?php if ($a['showCta']): ?>
    <a href="<?= esc_url($a['ctaUrl']) ?>">
      <?= esc_html($a['ctaLabel']) ?>
    </a>
  <?php endif; ?>

  <InnerBlocks class="mt-4 p-4 border" />
</div>

Пишите шаблоны на PHP, Twig или Blade

Используйте язык шаблонов, который вам уже знаком. Все три языка поддерживают одни и те же переменные, компоненты и функции. JavaScript не требуется.

Одни переменные для любого языка

Получайте доступ к атрибутам через $a, данным блока — через $b, а контексту родителя — через $c. Используйте флаги, например $isEditor, чтобы настраивать вывод для каждой среды.

Используйте <InnerBlocks />, <RichText /> и <MediaPlaceholder /> прямо в шаблонах без написания JavaScript.

PHP
<section class="hero">
  <h1><?= esc_html($a['heading']) ?></h1>
  <p><?= esc_html($a['description']) ?></p>
  <?php if ($a['showCta']): ?>
    <a href="<?= esc_url($a['ctaUrl']) ?>">
      <?= esc_html($a['ctaLabel']) ?>
    </a>
  <?php endif; ?>
  <InnerBlocks />
</section>

Полные страницы, заданные в коде

Создавайте полные страницы WordPress из файлов шаблонов. HTML сопоставляет элементы с базовыми блоками, а одна команда синхронизирует их с редактором.

Пишите HTML, получайте блоки

Стандартные элементы, такие как <h1>, <p> и <ul>, автоматически сопоставляются с базовыми блоками. Для всего остального используйте <block>.

Определяйте полные макеты в своей кодовой базе. При запуске wp bs pages sync Blockstudio преобразует шаблоны в настоящие страницы WordPress с реальными блоками, которые можно полностью редактировать в редакторе блоков.

index.php
<div>
  <h1 blockEditingMode="contentOnly">About Us</h1>
  <p>We build tools for WordPress developers.</p>
  <img src="/team.jpg" alt="Our team" />
</div>

<block name="core/columns">
  <block name="core/column">
    <h2>Our Mission</h2>
    <p>Making block development fast and simple.</p>
  </block>
  <block name="core/column">
    <block name="core/group" layout='{"type":"grid"}'>
      <h2>Our Stack</h2>
    </block>
  </block>
</block>

Явная синхронизация

Запустите wp bs pages sync, чтобы применить изменения шаблонов. Неизмененные страницы не записываются.

Блокировка шаблона

Зафиксируйте структуру, пока клиенты редактируют содержимое. Идеально для целевых страниц и маркетинговых сайтов.

Блоки с ключами

Назначайте ключи, чтобы пользовательские изменения сохранялись при обновлении шаблонов. Синхронизируйте структуру, сохраняйте содержимое.

Под контролем версий

Страницы хранятся в файлах. Отслеживайте изменения в Git, развертывайте среды и проверяйте их в PR.

Повторно используемые паттерны из файлов шаблонов

Задавайте паттерны блоков в виде файлов шаблонов. Тот же синтаксис HTML, что и у страниц; автоматическая регистрация в панели вставки блоков.

Файлы шаблонов вместо кода регистрации

Создайте папку с pattern.json и файлом шаблона. Blockstudio автоматически зарегистрирует паттерн без шаблонного кода register_block_pattern().

Паттерны вставляются как настоящие редактируемые блоки. Пользователи получают начальный макет, который можно настроить, а вы храните шаблоны в системе контроля версий.

index.php
<div>
  <h2>Pricing</h2>
  <p>Simple, transparent pricing.</p>
  <block name="core/columns">
    <block name="core/column">
      <h3>Starter</h3>
      <p>For small teams getting started.</p>
    </block>
    <block name="core/column">
      <h3>Pro</h3>
      <ul><li>Priority support</li><li>Custom integrations</li></ul>
    </block>
  </block>
</div>

Тот же синтаксис, что и у страниц

Стандартные HTML сопоставляются с базовыми блоками; тег блока обрабатывает всё остальное.

Автоматическая регистрация

Добавьте шаблон и pattern.json. Blockstudio зарегистрирует его автоматически.

Полностью редактируемые

Паттерны вставляются как редактируемый контент блоков, который можно настроить для каждого экземпляра.

С категориями и поиском

Категории и ключевые слова помогают легко находить паттерны в панели вставки.

Настраиваемое сопоставление элементов

Переопределяйте блок, которому сопоставляется любой элемент HTML. Назначайте стандартные теги, например h1, p и img, своим типам блоков.

Переназначайте HTML на пользовательские блоки

По умолчанию стандартные HTML сопоставляются с базовыми блоками WordPress. Используйте фильтр element_mapping, чтобы назначить любому элементу другой тип блока. Каждый <h1> может выводить ваш пользовательский блок вместо core/heading.

functions.php
add_filter(
  'blockstudio/parser/element_mapping',
  function ($mapping) {
    $mapping['h1']  = 'custom/heading';
    $mapping['h2']  = 'custom/heading';
    $mapping['p']   = 'custom/paragraph';
    $mapping['img'] = 'custom/image';
    return $mapping;
  }
);

Добавляйте поля в любой блок

Добавляйте пользовательские поля к базовым, сторонним и собственным блокам. Только JSON: без шаблонов и кода.

Пользовательские поля без шаблонов

Создайте файл JSON, укажите целевой блок с помощью name и определите поля. Свойство set напрямую сопоставляет значения полей с классами, стилями, атрибутами данных и всем остальным.

Без шаблонов и функций обратного вызова рендеринга. Blockstudio автоматически обрабатывает вывод с помощью WordPress HTML Tag Processor.

extend-animation.json
{
  "name": "core/*",
  "blockstudio": {
    "extend": { "priority": 10 },
    "attributes": [
      {
        "id": "animation",
        "type": "select",
        "allowNull": "None",
        "options": [
          { "value": "fade", "label": "Fade" },
          { "value": "slide", "label": "Slide" }
        ],
        "set": [{
          "attribute": "class",
          "value": "animate-{attributes.animation}"
        }]
      }
    ]
  }
}

Целевой блок любого типа

Расширяйте один блок, список или целое пространство имён с помощью шаблонов, например core/*.

Свойство set

Напрямую сопоставляйте значения полей с классами, стилями, атрибутами данных или любым атрибутом HTML.

Условные поля

Показывайте и скрывайте поля в зависимости от других значений, используя те же операторы, что и блоки.

Полный набор возможностей

Все типы полей, условная логика, источники данных и повторно используемые свойства.

Доступно типов полей: 27

От простых текстовых полей до повторителей и вкладок, а также полей для работы с DOM, таких как классы и атрибуты данных. Дополнительно можно зарегистрировать собственные типы.

Изучить типы полей
attributesblockcheckboxclassescodecolordatedatetimefilesgradientgrouphtml-tagiconlinkmessagenumberradiorangeselecttabstexttextareatogglerepeaterrichtextunitwysiwyg

Конвейер ресурсов без настройки

Компиляция SCSS, импорты модулей ES и опциональная минификация — всё по соглашению об именовании. Без webpack и Vite.

Назовите файлы, а Blockstudio сделает остальное

Добавьте style.scss рядом с блоком, и он автоматически скомпилируется и будет поставлен в очередь. То же относится к script.js: поддерживаются модули ES и прямые импорты npm. Минификация включается одним параметром.

Ресурсы относятся к отдельным блокам и загружаются только при необходимости. Используйте editor.* для ресурсов только редактора или *.inline.*, чтобы встроить их в страницу.

SCSS
$accent: var(--wp--preset--color--primary);

.hero {
  padding: 4rem 2rem;
  h1 { color: $accent; font-size: clamp(2rem, 5vw, 4rem); }
  &--dark { background: #0a0a0a; }
}

Компиляция SCSS

Используйте вложенность, переменные и примеси. Blockstudio выполнит компиляцию.

Импорты модулей ES

Импортируйте пакеты npm напрямую. Blockstudio скачивает их и обслуживает локально.

Соглашение об именовании

style.scss, script.js, editor.css. Достаточно назвать файл.

Область действия и встраивание

Ресурсы загружаются только при наличии блока; встраивайте их, следуя соглашению об именовании файлов.

Tailwind v4, компиляция в PHP

Пишите классы-утилиты в шаблонах. Blockstudio компилирует их на сервере с помощью TailwindPHP и автоматически кэширует файлы.

Один параметр — никаких инструментов

Установите для tailwind.enabled значение true в blockstudio.json и пишите классы-утилиты. Blockstudio компилирует CSS на сервере, кэширует его и внедряет без Node.js.

Используйте blockstudio/tailwind/css, чтобы определять темы, утилиты и варианты с синтаксисом Tailwind v4 CSS-first. Поле классов предоставляет автодополнение в редакторе.

functions.php
add_filter('blockstudio/tailwind/css', function ($css) {
  return $css . '
    @theme { --color-accent: #4f46e5; }
    @utility container-narrow {
      max-width: 48rem;
      margin-inline: auto;
    }
  ';
});

Компиляция на стороне сервера

TailwindPHP компилирует классы, используемые на каждой странице. Без Node и этапа сборки.

Автоматическое кэширование

Скомпилированный CSS кэшируется на диске по набору классов для ускорения повторных запросов.

Конфигурация с приоритетом CSS

Определяйте темы, утилиты и варианты напрямую с помощью Tailwind v4 CSS.

Предпросмотр в редакторе в реальном времени

Мгновенный предпросмотр в редакторе, пока интерфейс сайта использует скомпилированный на сервере CSS.

Входящие компоненты

В комплект Blockstudio входят 59 компонентов UI, готовых к использованию в шаблонах.

Интерактивные элементы в виде тегов блоков

Включите ui.enabled, и Blockstudio зарегистрирует 59 автономных компонентов в пространстве имён bsui: диалоги, меню, вкладки, комбобоксы, поля даты и файлов, всплывающие уведомления и многое другое. Они работают на основе WordPress Interactivity API.

Используйте их как теги блоков в любом шаблоне, на странице или в паттерне, рендерьте их из PHP либо разрешите bsui/* использовать их в содержимом записей через blockTags. Каждый из них — обычный блок с собственным block.json, который работает и на холсте редактора, и на странице; страница загружает только CSS и JS отрисованных на ней компонентов.

Назначьте элементу управления формы name — и он выведет скрытое поле ввода, чтобы окружающая форма отправляла обычные значения без необходимости создавать собственный JavaScript. В списках выбора, меню и диалоговых окнах используются соответствующие шаблоны ARIA, включая перемещение стрелками, поиск по вводимому тексту и удержание фокуса внутри открытого модального окна.

Стилизация работает на токенах --bs-ui-*; полная тёмная схема включается классом .dark. Всё находится внутри каскадного слоя bsui, поэтому обычные стили темы CSS имеют приоритет без флагов important и игр со специфичностью. Добавьте собственный вариант компонента через фильтр и изучите демонстрационные приложения app/*, чтобы увидеть, как компоненты объединяются в более крупные интерфейсы.

index.php
<bs:bsui-dialog>
  <bs:bsui-dialog-trigger trigger_label="Edit profile" trigger_variant="outline" />
  <bs:bsui-dialog-backdrop />
  <bs:bsui-dialog-popup>
    <bs:bsui-dialog-header>
      <bs:bsui-dialog-title content="Edit profile" />
      <bs:bsui-dialog-description content="Make changes to your profile here, then save when you are done." />
    </bs:bsui-dialog-header>
    <bs:bsui-dialog-content>
      <bs:bsui-field>
        <bs:bsui-field-label text="Name" />
        <bs:bsui-input defaultValue="Pedro Duarte" />
      </bs:bsui-field>
    </bs:bsui-dialog-content>
    <bs:bsui-dialog-footer>
      <bs:bsui-dialog-close label="Cancel" variant="outline" />
      <bs:bsui-dialog-close label="Save changes" variant="default" />
    </bs:bsui-dialog-footer>
  </bs:bsui-dialog-popup>
</bs:bsui-dialog>

Создано для разработчиков

Возможности, упрощающие создание и поддержку сложных блоков.

Гибкое хранение

Храните значения в метаданных записи, параметрах или обоих местах. Запрашивайте блоки по метаданным и предоставляйте данные через REST.

Условная логика

Показывайте поля в зависимости от значений, используя операторы сравнения, вложенные условия и глобальные правила.

Более 130 хуков PHP и JS

Фильтры и действия для регистрации, полей, ресурсов, параметров и вывода.

JSON Schema

Автодополнение, встроенная документация и проверка в VS Code и JetBrains.

Контекст API

Передавайте объявленные данные между родительским и вложенными дочерними блоками.

Интеграция с ИИ

Индекс документации для агентам программирования и сгенерированный AGENTS.md вашего проекта.

Интеграция SEO

Автоматическое внедрение контента для Yoast, Rank Math и SEOPress.

Программная отрисовка

Выводите блоки из PHP и используйте их как компоненты вне редактора.

Пользовательские поля

Определяйте повторно используемые наборы полей один раз и подключайте их в разных блоках.

Преобразования блоков

Преобразуйте блоки и добавляйте сочетания клавиш для вставки по Enter или префиксу.

Динамические варианты

Заполняйте варианты записями, терминами, пользователями, функциями или API.

Утилиты HTML

Выводите атрибуты данных или переменные CSS в обёртке блока.

Плагин, MU-плагин или Composer

Установите zip-архив плагина, загрузите его как must-use-плагин или подключите через Composer в теме или плагине. Bedrock может подключить его на раннем этапе, а BLOCKSTUDIO_URL поддерживает пользовательские URL пакетов.

Обновления без конфликтов

Встроенные библиотеки, такие как TailwindPHP, ScssPhp и Minify, являются изолированными приватными копиями в собственных пространствах имён, поэтому они никогда не заменяют версии из других плагинов. Установленные из zip-архива версии обновляются из релизов GitHub; при желании можно указать токен доступа.

Переход с v6 на v7

Блоки, созданные для v6, продолжат работать: старый префикс импорта blockstudio/, имена хуков в camelCase и суффиксы ресурсов с дефисами по-прежнему поддерживаются. В руководстве по миграции описаны изменения.

Инструменты разработчика

Встроенные инструменты для анализа, отладки и разработки с помощью ИИ.

Canvas

Обзор всех управляемых страниц в стиле Figma. Перемещайтесь по сайту, масштабируйте его и изучайте на одном экране.

admin.php?page=blockstudio-canvas

Element Grabber

Удерживайте Cmd+C на любом элементе, чтобы скопировать его разметку и путь к шаблону блока. Вставьте этот контекст в редактор с ИИ.

?blockstudio-devtools

Создано для агентов

Документация, индексируемая агентом, контракт для вашего проекта и анализ, отклоняющий несоответствия.

Индекс, контракт и фильтр

Blockstudio включает blockstudio-llm.txt — индекс каждого документа с его маршрутом, назначением и принадлежащими ему идентификаторами, — а также blockstudio-llm-full.txt с полным текстом. Агент читает индекс, а затем открывает только нужную страницу.

В вашем проекте blockstudio-agents создаёт AGENTS.md на основе ваших файлов и параметров, а blockstudio-phpstan запускает выбранный вами пресет, при желании — из управляемого хука коммита.

blockstudio-llm.txt
## Docs / Blocks / Attributes

### Registering Attributes
route: /docs/blocks/attributes/registering
file: docs/docs/blocks/attributes/registering.md
purpose: Learn how to register custom attributes for your blocks.
php: $a

### Field Types
route: /docs/blocks/attributes/field-types
file: docs/docs/blocks/attributes/field-types.md
purpose: All available field types and their properties in Blockstudio.
hooks: blockstudio/field_types

Сначала индекс

Каждый документ с маршрутом, назначением и идентификаторами — примерно 11k токенов.

Полный текст по запросу

Вся документация и схемы JSON в одном файле, примерно 164k токенов.

Сгенерированный AGENTS.md

blockstudio-agents описывает, что авторы вашего проекта создают, что он поддерживает и что отклоняет.

Профили анализа

В base, theme и extreme-theme находятся шаблоны для block.json и других задач.

Блоки полного стека

Создавайте полноценные приложения внутри папки блока. База данных, серверная логика, запланированные задачи и CLI — всё из файлов.

Добавьте файл и получите API

Добавьте db.php, чтобы определить модель данных. Blockstudio создаёт конечные точки REST, проверяет входные данные, управляет хранилищем и предоставляет API JavaScript и PHP.

Добавьте rpc.php для серверных функций и cron.php для запланированных задач. Каждый файл отвечает за одну задачу, без контроллеров и инструментов сборки.

db.php
<?php
return [
  'storage'    => 'sqlite',
  'userScoped' => true,
  'capability' => [
    'create' => true,
    'read'   => true,
    'update' => true,
    'delete' => true,
  ],
  'fields' => [
    'text' => ['type' => 'string', 'required' => true],
    'done' => ['type' => 'boolean', 'default' => false],
  ],
];

Серверные функции в одной строке

Определяйте функции PHP в rpc.php и вызывайте их с помощью bs.fn(). Blockstudio обрабатывает маршрутизацию, аутентификацию, защиту от CSRF и сериализацию JSON.

rpc.php
<?php
use Blockstudio\Db;

return [
  'toggle' => function (array $params): array {
    $db   = Db::get('my-theme/todo');
    $id   = (int) ($params['id'] ?? 0);
    $todo = $db->get_record($id);
    if ($todo) {
      $db->update($id, ['done' => !$todo['done']]);
    }
    return ['success' => (bool) $todo];
  },
];

База данных

CRUD по схеме в режимах хранения: 6; table, sqlite, jsonc, storh, meta, post_type.

RPC

Серверные функции, вызываемые из интерфейса сайта с помощью bs.fn().

Cron

Запланированные задачи в cron.php, зарегистрированные с помощью WP-Cron.

CLI

Управляйте блоками, страницами, записями, RPC, заданиями cron и параметрами с помощью wp bs.

Защита от CSRF

Публичные конечные точки защищаются автоматически; открытый режим включается явно.

Область видимости пользователя

Данные автоматически изолируются для каждого пользователя без ручной фильтрации по владельцу.

Переносимость

С SQLite или JSONC код и данные хранятся вместе в одной папке.

Компоненты

Программные компоненты UI используют полный конвейер Blockstudio.

Статика, когда это возможно

Включите статическую предварительную генерацию, и анонимные посетители будут получать сохранённые страницы HTML, а всё персональное останется динамическим.

Статическая предварительная генерация

Выключено, пока вы не включите

performance.staticPrerender в blockstudio.json включает эту функцию.

До запуска WordPress

При включённом earlyServe страница из хранилища отправляется до загрузки WordPress.

Обновление при сохранении

При сохранении записи её сохранённая страница и главная страница очищаются или создаются заново.

Динамический рендеринг там, где это нужно

Для авторизованных запросов, поиска и dynamicPaths по умолчанию выполняется динамический рендеринг.

Вопросы и ответы

Всё, что нужно знать о Blockstudio. Не нашли ответ? Спросите на GitHub.

Создать запрос

Что такое Blockstudio?

Плагин WordPress, который позволяет создавать пользовательские блоки с помощью JSON и файла шаблона. Определяйте поля и пишите разметку без инструментов сборки React.

Нужно ли знать JavaScript?

Нет. Если вы умеете писать HTML и знаете основы PHP, вы можете создавать блоки. Blockstudio берёт на себя внутреннюю логику редактора.

Будет ли это работать с моей темой?

Да. В блоках используются встроенные WordPress блочный API, и они работают с любой темой, совместимой с блоками.

Чем это отличается от блоков ACF?

ACF PRO тоже регистрирует блоки через block.json и отображает шаблоны PHP с помощью InnerBlocks, а начиная с ACF PRO 6.8.1 там можно также объявлять поля блока. Blockstudio обнаруживает папки блоков без вызова register_block_type(), отображает PHP, Twig или Blade, компилирует стили и скрипты каждого блока, добавляет RichText в шаблоны, страницы на основе файлов, паттерны и расширения и распространяется бесплатно по GPL, а не входит в платную лицензию.

Какие языки шаблонов поддерживаются?

PHP работает сразу после установки, Twig — после установки timber/timber, а Blade — на версиях illuminate/view с 8 по 12 через короткий фильтр рендеринга, вызывающий Blockstudio\Blade_Renderer. Все три получают одинаковые переменные и компоненты, а Blade также может рендерить страницы, паттерны и шаблоны редактора сайта.

Можно ли расширять существующие блоки?

Да. Расширения добавляют поля к основным, сторонним и пользовательским блокам, в том числе ко всем блокам в пространстве имён с помощью подстановочных знаков.

Как работает конвейер ресурсов?

Используйте соглашения об именовании, например style.scss, script.js и editor.css. Blockstudio компилирует файлы, ограничивает область действия стилей и добавляет файлы в очередь, а также минифицирует их, если включить минификацию.

Есть ли поддержка IDE?

Да. Схема JSON обеспечивает автодополнение, встроенную документацию и проверку в совместимых редакторах.

Какие требования?

WordPress 6.7 или новее и PHP 8.2 или новее.

Blockstudio бесплатен?

Да. Blockstudio — бесплатный проект с открытым исходным кодом; в него входят расширения, все типы полей, ресурсы, страницы и паттерны.

Plus

Официальный набор расширений

Премиум-шаблоны сайтов, системные инструкции для ИИ и закрытое сообщество Discord. Разовая покупка, обновления навсегда.

  • 500+ шаблонов сайтов
  • Системные инструкции для ИИ
  • Пожизненные обновления
  • Закрытое сообщество Discord
Получить Plus