Розробка 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 днів.