[Новое Blockstudio 7.7](https://blockstudio.dev/ru/blog/blockstudio-7-7/)

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

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

Терминал

```
composer require blockstudio/blockstudio
```

[Начало работы](https://blockstudio.dev/ru/docs/)

[Скачать v7.7.12](https://github.com/inline0/blockstudio/releases)

## [Блоки](https://blockstudio.dev/ru/features/blocks/)

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

## [Страницы](https://blockstudio.dev/ru/features/pages/)

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

## [Паттерны](https://blockstudio.dev/ru/features/patterns/)

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

## [Расширения](https://blockstudio.dev/ru/features/extensions/)

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

## [Типы полей](https://blockstudio.dev/ru/docs/blocks/attributes/field-types/)

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

## [Обработка ресурсов](https://blockstudio.dev/ru/docs/blocks/assets/)

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

## [JSON Schema](https://blockstudio.dev/ru/docs/blocks/schema/)

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

## [Шаблонизация](https://blockstudio.dev/ru/docs/blocks/registration/#template)

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

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

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

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

[Начать](https://blockstudio.dev/ru/docs/general/getting-started/)

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.

[Посмотреть компоненты](https://blockstudio.dev/ru/docs/blocks/react-components/)

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.

[Подробнее о шаблонах](https://blockstudio.dev/ru/docs/blocks/registration/#template)

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 с реальными блоками, которые можно полностью редактировать в редакторе блоков.

[Подробнее о страницах](https://blockstudio.dev/ru/docs/pages-and-patterns/pages/)

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()`.

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

[Подробнее о паттернах](https://blockstudio.dev/ru/docs/pages-and-patterns/patterns/)

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`.

[Подробнее о сопоставлении элементов](https://blockstudio.dev/ru/docs/pages-and-patterns/#element-mapping)

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.

[Подробнее о расширениях](https://blockstudio.dev/ru/docs/extensions/)

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, таких как классы и атрибуты данных. Дополнительно можно зарегистрировать собственные типы.

[Изучить типы полей](https://blockstudio.dev/ru/docs/blocks/attributes/field-types/)

[attributes](https://blockstudio.dev/ru/docs/blocks/attributes/field-types/) [block](https://blockstudio.dev/ru/docs/blocks/attributes/field-types/) [checkbox](https://blockstudio.dev/ru/docs/blocks/attributes/field-types/) [classes](https://blockstudio.dev/ru/docs/blocks/attributes/field-types/) [code](https://blockstudio.dev/ru/docs/blocks/attributes/field-types/) [color](https://blockstudio.dev/ru/docs/blocks/attributes/field-types/) [date](https://blockstudio.dev/ru/docs/blocks/attributes/field-types/) [datetime](https://blockstudio.dev/ru/docs/blocks/attributes/field-types/) [files](https://blockstudio.dev/ru/docs/blocks/attributes/field-types/) [gradient](https://blockstudio.dev/ru/docs/blocks/attributes/field-types/) [group](https://blockstudio.dev/ru/docs/blocks/attributes/field-types/) [html-tag](https://blockstudio.dev/ru/docs/blocks/attributes/field-types/) [icon](https://blockstudio.dev/ru/docs/blocks/attributes/field-types/) [link](https://blockstudio.dev/ru/docs/blocks/attributes/field-types/) [message](https://blockstudio.dev/ru/docs/blocks/attributes/field-types/) [number](https://blockstudio.dev/ru/docs/blocks/attributes/field-types/) [radio](https://blockstudio.dev/ru/docs/blocks/attributes/field-types/) [range](https://blockstudio.dev/ru/docs/blocks/attributes/field-types/) [select](https://blockstudio.dev/ru/docs/blocks/attributes/field-types/) [tabs](https://blockstudio.dev/ru/docs/blocks/attributes/field-types/) [text](https://blockstudio.dev/ru/docs/blocks/attributes/field-types/) [textarea](https://blockstudio.dev/ru/docs/blocks/attributes/field-types/) [toggle](https://blockstudio.dev/ru/docs/blocks/attributes/field-types/) [repeater](https://blockstudio.dev/ru/docs/blocks/attributes/field-types/) [richtext](https://blockstudio.dev/ru/docs/blocks/attributes/field-types/) [unit](https://blockstudio.dev/ru/docs/blocks/attributes/field-types/) [wysiwyg](https://blockstudio.dev/ru/docs/blocks/attributes/field-types/)

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

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

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

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

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

[Подробнее о ресурсах](https://blockstudio.dev/ru/docs/blocks/assets/)

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. Поле классов предоставляет автодополнение в редакторе.

[Подробнее о Tailwind](https://blockstudio.dev/ru/docs/tailwind/)

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/*`, чтобы увидеть, как компоненты объединяются в более крупные интерфейсы.

[Просмотреть компоненты](https://blockstudio.dev/ru/ui/)

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>
```

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

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

## [Гибкое хранение](https://blockstudio.dev/ru/docs/blocks/storage/)

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

## [Условная логика](https://blockstudio.dev/ru/docs/blocks/attributes/conditional-logic/)

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

## [Более 130 хуков PHP и JS](https://blockstudio.dev/ru/docs/blocks/hooks/php/)

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

## [JSON Schema](https://blockstudio.dev/ru/docs/blocks/schema/)

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

## [Контекст API](https://blockstudio.dev/ru/docs/blocks/context/)

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

## [Интеграция с ИИ](https://blockstudio.dev/ru/docs/dev/ai/)

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

## [Интеграция SEO](https://blockstudio.dev/ru/docs/blocks/seo/)

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

## [Программная отрисовка](https://blockstudio.dev/ru/docs/blocks/rendering/)

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

## [Пользовательские поля](https://blockstudio.dev/ru/docs/blocks/attributes/custom-fields/)

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

## [Преобразования блоков](https://blockstudio.dev/ru/docs/blocks/transforms/)

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

## [Динамические варианты](https://blockstudio.dev/ru/docs/blocks/attributes/populating-options/)

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

## [Утилиты HTML](https://blockstudio.dev/ru/docs/blocks/attributes/html-utilities/)

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

## [Плагин, MU-плагин или Composer](https://blockstudio.dev/ru/docs/dev/composer/)

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

## [Обновления без конфликтов](https://blockstudio.dev/ru/docs/general/getting-started/)

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

## [Переход с v6 на v7](https://blockstudio.dev/ru/docs/dev/migration/v7/)

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

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

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

### [Canvas](https://blockstudio.dev/ru/docs/dev/canvas/)

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

`admin.php?page=blockstudio-canvas`

### [Element Grabber](https://blockstudio.dev/ru/docs/dev/grab/)

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

`?blockstudio-devtools`

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

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

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

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

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

[Разработка с ИИ](https://blockstudio.dev/ru/ai/)

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` для запланированных задач. Каждый файл отвечает за одну задачу, без контроллеров и инструментов сборки.

[Руководство по полнофункциональным блокам](https://blockstudio.dev/ru/guides/full-stack-blocks/)

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];
  },
];
```

## [База данных](https://blockstudio.dev/ru/docs/blocks/block-api/database/#storage-modes)

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

## [RPC](https://blockstudio.dev/ru/docs/blocks/block-api/rpc/)

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

## [Cron](https://blockstudio.dev/ru/docs/blocks/block-api/cron/)

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

## [CLI](https://blockstudio.dev/ru/docs/dev/cli/)

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

## [Защита от CSRF](https://blockstudio.dev/ru/docs/blocks/block-api/database/#csrf-protection)

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

## [Область видимости пользователя](https://blockstudio.dev/ru/docs/blocks/block-api/database/#user-scoped-data)

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

## [Переносимость](https://blockstudio.dev/ru/guides/full-stack-blocks/)

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

## [Компоненты](https://blockstudio.dev/ru/docs/blocks/components/)

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

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

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

[Статическая предварительная генерация](https://blockstudio.dev/ru/features/production/)

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

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

## До запуска WordPress

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

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

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

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

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

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

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

[Создать запрос](https://github.com/inline0/blockstudio/issues)

### Что такое 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](https://blockstudio.dev/ru/plus/)