Разработка Full Site Editing (FSE) темы WordPress

Разработка Full Site Editing (FSE) темы WordPress

Full Site Editing — архитектура WordPress, при которой весь сайт — шапка, футер, сайдбары, шаблоны страниц — собирается из блоков в визуальном редакторе, а не через PHP-шаблоны. FSE тема избавляет от файлов header.php, footer.php, sidebar.php и заменяет их HTML-файлами с разметкой блоков. Подход кардинально другой по сравнению с классической темой; переход со старой темы на FSE занимает от 5 до 15 рабочих дней в зависимости от сложности дизайна.

Структура FSE темы

wp-content/themes/my-fse-theme/
├── style.css                    # Заголовок темы
├── functions.php                # Минимальный (theme supports, enqueue)
├── theme.json                   # Дизайн-токены и глобальные стили
├── templates/
│   ├── index.html               # Дефолтный шаблон
│   ├── single.html              # Одиночная запись
│   ├── single-project.html      # CPT project
│   ├── archive.html             # Архив
│   ├── page.html                # Страница
│   ├── page-no-title.html       # Кастомный шаблон страницы
│   └── 404.html                 # Страница 404
└── parts/
    ├── header.html              # Шапка
    ├── footer.html              # Футер
    └── sidebar.html             # Сайдбар

Вместо get_header() в шаблоне теперь блок core/template-part:

<!-- wp:template-part {"slug":"header","theme":"my-fse-theme","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
  <!-- wp:post-content /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","theme":"my-fse-theme","tagName":"footer"} /-->

theme.json — сердце FSE темы

theme.json определяет дизайн-систему: цвета, типографику, отступы, размеры — всё, что раньше было в CSS:

{
  "$schema": "https://schemas.wp.org/wp/6.5/theme.json",
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        { "slug": "primary",   "color": "#1a1a2e", "name": "Primary"   },
        { "slug": "secondary", "color": "#e94560", "name": "Secondary" },
        { "slug": "neutral",   "color": "#f5f5f5", "name": "Neutral"   }
      ],
      "custom": true,
      "customDuotone": false
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "Inter, sans-serif",
          "slug": "inter",
          "name": "Inter",
          "fontFace": [
            {
              "fontFamily": "Inter",
              "fontWeight": "400 700",
              "fontStyle": "normal",
              "src": ["file:./assets/fonts/Inter-Variable.woff2"]
            }
          ]
        }
      ],
      "fontSizes": [
        { "slug": "sm",  "size": "0.875rem", "name": "Small"  },
        { "slug": "md",  "size": "1rem",     "name": "Base"   },
        { "slug": "lg",  "size": "1.25rem",  "name": "Large"  },
        { "slug": "xl",  "size": "1.5rem",   "name": "XL"     },
        { "slug": "2xl", "size": "2rem",     "name": "2XL"    },
        { "slug": "3xl", "size": "3rem",     "name": "3XL"    }
      ],
      "fluid": true
    },
    "spacing": {
      "spacingSizes": [
        { "slug": "sm",  "size": "1rem",  "name": "Small"  },
        { "slug": "md",  "size": "2rem",  "name": "Medium" },
        { "slug": "lg",  "size": "4rem",  "name": "Large"  },
        { "slug": "xl",  "size": "8rem",  "name": "XL"     }
      ],
      "customSpacingSize": true
    },
    "layout": {
      "contentSize": "768px",
      "wideSize": "1280px"
    }
  },
  "styles": {
    "color": {
      "background": "var(--wp--preset--color--neutral)",
      "text": "var(--wp--preset--color--primary)"
    },
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--inter)",
      "fontSize": "var(--wp--preset--font-size--md)",
      "lineHeight": "1.6"
    },
    "elements": {
      "h1": { "typography": { "fontSize": "var(--wp--preset--font-size--3xl)", "fontWeight": "700" } },
      "h2": { "typography": { "fontSize": "var(--wp--preset--font-size--2xl)", "fontWeight": "600" } },
      "link": {
        "color": { "text": "var(--wp--preset--color--secondary)" },
        ":hover": { "color": { "text": "var(--wp--preset--color--primary)" } }
      }
    }
  }
}

Все значения из theme.json становятся CSS-переменными вида --wp--preset--color--primary. Это и есть «дизайн-токены» для блочного редактора.

Шаблон архива кастомного типа записей

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"top":"var:preset|spacing|lg","bottom":"var:preset|spacing|lg"}}}} -->
<main class="wp-block-group">

  <!-- wp:query {"queryId":1,"query":{"postType":"project","perPage":12,"inherit":true}} -->
  <div class="wp-block-query">

    <!-- wp:post-template {"layout":{"type":"grid","columnCount":3}} -->
      <!-- wp:post-featured-image {"isLink":true,"aspectRatio":"4/3"} /-->
      <!-- wp:post-title {"isLink":true,"level":3} /-->
      <!-- wp:post-excerpt {"moreText":"Подробнее"} /-->
    <!-- /wp:post-template -->

    <!-- wp:query-pagination -->
      <!-- wp:query-pagination-previous /-->
      <!-- wp:query-pagination-numbers /-->
      <!-- wp:query-pagination-next /-->
    <!-- /wp:query-pagination -->

    <!-- wp:query-no-results -->
      <!-- wp:paragraph -->
      <p>Проекты не найдены.</p>
      <!-- /wp:paragraph -->
    <!-- /wp:query-no-results -->

  </div>
  <!-- /wp:query -->

</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

Кастомные блок-паттерны

Паттерны — готовые комбинации блоков, которые редактор вставляет одним кликом:

register_block_pattern('my-theme/hero-section', [
    'title'       => 'Hero секция',
    'description' => 'Полноширинный баннер с заголовком и кнопкой',
    'categories'  => ['featured'],
    'content'     => '<!-- wp:cover {"url":"' . get_template_directory_uri() . '/assets/img/hero.jpg","dimRatio":50,"align":"full"} -->
<div class="wp-block-cover alignfull">
  <!-- wp:heading {"level":1,"textColor":"white"} --><h1 class="wp-block-heading has-white-color">Заголовок сайта</h1><!-- /wp:heading -->
  <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
    <div class="wp-block-buttons">
      <!-- wp:button {"backgroundColor":"secondary"} --><div class="wp-block-button"><a class="wp-block-button__link has-secondary-background-color">Узнать больше</a></div><!-- /wp:button -->
    </div>
  <!-- /wp:buttons -->
</div>
<!-- /wp:cover -->',
]);

Отключение ненужного в редакторе

FSE даёт редактору слишком много свободы — он может сломать верстку. Ограничения через theme.json:

"settings": {
  "color": {
    "custom": false,
    "customGradient": false
  },
  "typography": {
    "customFontSize": false,
    "dropCap": false
  }
}

И через PHP — разрешаем только нужные блоки:

add_filter('allowed_block_types_all', function (array|bool $allowed, WP_Block_Editor_Context $context): array {
    return [
        'core/paragraph', 'core/heading', 'core/image', 'core/list',
        'core/quote', 'core/table', 'core/buttons', 'core/button',
        'core/group', 'core/columns', 'core/column', 'core/spacer',
        'my-plugin/project-card', 'my-plugin/cta-section',
    ];
}, 10, 2);

Различия от классической темы

Типовые сроки

Минимальная FSE тема (5–7 шаблонов, тема без дизайн-системы) — 3–5 дней. Тема с полноценной дизайн-системой через theme.json, паттернами и ограничениями редактора — 8–12 дней. Портирование сложной классической темы на FSE с сохранением всего функционала — от 15 дней.