Как правильно подключать блоки Гутенберга?

У меня есть несколько блоков Гутенберга, созданных с использованием create-block, и я подключаю их через block.json. Я заметил, что все стили этих блоков загружаются на всех страницах сайта. Как можно исправить эту проблему? Нужно ли удалять регистрацию стилей из block.json и проверять вручную, или существуют более эффективные и удобные решения?
  • 26 марта 2025 г. 22:14
Ответы на вопрос 2
Подключение стилей блоков Гутенберга с использованием `block.json` удобно для автоматизации, но, как вы заметили, это может привести к загрузке стилей на всех страницах сайта, даже если блоки не используются.

Вот несколько способов оптимизации подключения стилей:

1. **Условная загрузка стилей**:
   Если вы используете стили блоков только на определенных страницах, можно ограничить их загрузку в зависимости от контекста. Для этого вы можете использовать хук `enqueue_block_assets` и проверять условия, при которых стили должны быть загружены. Например, можно загружать стили только на страницах, где есть редактор блоков:

   ```php
   add_action('enqueue_block_assets', function() {
       if (is_singular() || is_admin()) {
           // Загрузка стилей блоков здесь
           wp_enqueue_style('your-block-style', plugins_url('path/to/your-style.css', __FILE__));
       }
   });
   ```

2. **Ручная регистрация стилей**:
   Если вам нужно больше контроля, вы можете удалить автоматическую регистрацию стилей из `block.json` и зарегистрировать их вручную с помощью функций `wp_enqueue_style()` и `enqueue_block_assets`, учитывая, где и когда их нужно загружать. Это дает вам возможность настроить, какие стили будут загружены для каких блоков и на каких страницах.

3. **Ограничение на фронтенде**:
   Если ваши блоки используются только в админке или на определенных типах страниц, можно также использовать условные проверки в `enqueue_block_assets`, чтобы избежать загрузки стилей на других страницах.

4. **Оптимизация с помощью JavaScript**:
   Если ваши блоки требуют стилей только в редакторе, можно загружать их лишь в контексте редактора с использованием `enqueue_block_editor_assets`.

Основная идея заключается в том, чтобы отключить автоматическую загрузку стилей для блоков, которые не должны быть загружены на всех страницах, и регистрировать их там, где это действительно необходимо. Это поможет улучшить производительность вашего сайта и загрузку ресурсов.
Убирать регистрацию стилей из блок.json и вручную проверять?

Именно так, к сожалению, до сих пор эта задача на плечах юзеров.

В том году я написал свое решение для этих целей со всей необходимой логикой (включая подгрузку ассетов в зависимости от настроек блока), мой подход использует parse_blocks для проверки блока в контенте поста/страницы. Вот краткий пример:

add_action('wp_enqueue_scripts', function (): void {
  global $post;
  $content = $post->post_content;
  $blocks = parse_blocks($content);
  foreach ($blocks as $block) {
    if ('Your block name' === $block['blockName']) {
        // enqueue
    }
  }
});


Если интересно покопаться в коде, то здесь https://github.com/yarovikov/gutengood/blob/master...
Похожие вопросы