Начало работы: WordPress

Плагин wordpress/ui-kit: блоки и шорткоды на PHP-рендерере, тема и режим в настройках. Accordion, Tabs, FAQ и Pricing оживают через свой React 19 — в WordPress 7.1 wp.element всё ещё React 18

1. Соберите плагин

Сборка кладёт в dist-wp/ui-kit/ PHP плагина, рендерер (lib/), assets/ui-kit.css и скрипты build/editor.js и build/view.js, рядом — установочный zip.

npm run build:wp
# → dist-wp/ui-kit-0.1.0.zip

2. Установите

Плагины → Добавить новый → Загрузить плагин, или через WP-CLI. Нужны WordPress 6.6+ (скрипт react-jsx-runtime для редактора) и PHP 8.1+. Проверено: WordPress 7.1.3 на PHP 8.5.9 (встроенный сервер php -S) с SQLite Database Integration 3.1.0, тема Twenty Twenty-Five, WP-CLI 2.12.

wp plugin install dist-wp/ui-kit-0.1.0.zip --activate

3. Тема и режим

Настройки → UI Kit: Vercel или Liquid Glass; светлый, тёмный или «как в системе» (скрипт в <head> ставит data-mode до отрисовки и следит за сменой). Атрибуты темы добавляются к <html> через language_attributes только на сайте — админка не меняется; в холсте редактора тема ставится отдельно. «Фон страницы» делает фон body прозрачным, чтобы был виден фон темы UI Kit. Шрифты остаются от сайта: плагин не поставляет файлы Geist, поэтому с Vercel компоненты наследуют шрифт темы WordPress (Manrope в Twenty Twenty-Five), а не Geist. Чтобы был вид Geist, подключите в своей теме fonts/geist.css и fonts/geist-mono.css из npm-пакета и сделайте его шрифтом body.

4. Блоки

Категория «UI Kit»: Button, Badge, Alert, Card (с вложенными блоками), Hero, Feature grid, Call to action, Testimonials, Logo cloud — рендерятся на сервере (block.json + render.php), без JavaScript на странице. Pricing table, FAQ, Accordion и Tabs — «острова»: сервер отдаёт разметку и пропсы в JSON, view.js (React 19 + эти четыре компонента, ~250 КБ, ~80 КБ gzip) монтирует компонент на её место; без JS остаётся серверная разметка. В редакторе блоки настраиваются в боковой панели (элементы списков добавляются, двигаются и удаляются), а превью — тот же серверный рендер (ServerSideRender), потому что редактор работает на React 18.

5. Шорткоды

Для классических тем и виджетов: ui_button, ui_badge, ui_alert, ui_card, ui_avatar, ui_progress, ui_separator, ui_spinner, ui_stats, ui_icon. Флаги пишутся без значения (pill, dot, show_value). Значения атрибутов экранируются, вложенный контент проходит wp_kses_post и вложенные шорткоды.

[ui_button variant="primary" href="/start" icon="Zap"]Get started[/ui_button]
[ui_badge color="green" dot]Live[/ui_badge]
[ui_alert variant="warning" title="Heads up"]Disk almost <strong>full</strong>.[/ui_alert]
[ui_card title="Project" description="Production"]Body [ui_badge]Nested[/ui_badge][/ui_card]
[ui_progress value="60" label="Upload" show_value]
[ui_stats label="Revenue" value="12480.5" delta="12.5" caption="vs last week"]

6. Что проверено

Страницы со всеми блоками и шорткодами в обеих темах, светлом, тёмном и системном режимах; клики по Pricing, FAQ, Accordion и Tabs; вставка блока через инсёртер, правка в боковой панели и сохранение в редакторе; консоль без ошибок плагина (остаётся предупреждение ядра WordPress про global-styles-css-custom-properties). Установка zip через WP-CLI.

Другие фреймворки