Почему в блочных темах WordPress используется формат комментариев

Блочные темы в WordPress появились вместе с редактором блоков Gutenberg, который перевернул традиционный подход к созданию и редактированию контента. Одной из ключевых особенностей блоков является специальная разметка, которая используется для идентификации и настройки блоков в редакторе. В частности, вы, возможно, заметили строки вида <!-- wp:group --> в коде страниц. В этой статье мы разберём, почему используется именно такой формат и какую роль он играет в блочных темах.

Что означает формат <!-- wp:group -->?

Эта строка — это комментарий HTML, в который встроены специальные маркеры для блоков WordPress. Они используются для того, чтобы указать, какой тип блока содержится в разметке страницы или поста.

Формат <!-- wp:... --> — это элемент внутренней разметки, который сообщает WordPress и редактору Gutenberg о наличии и типе блока на странице. В данном случае, <!-- wp:group --> обозначает групповой блок. Групповые блоки позволяют объединять несколько блоков в один контейнер, чтобы управлять ими как единым целым — например, изменять их стили или делать общие настройки.

Пример:

<! -- wp:group -- >
    <div class="wp-block-group">
        <p>Текст внутри группы</p>
        <p>Другой текст внутри группы</p>
    </div>
<! -- /wp:group -- >

В этом примере все блоки, помещённые внутрь контейнера group, будут считаться частью одной группы. Это может быть полезно для управления стилями сразу нескольких элементов.

Почему используется комментарий HTML?

Использование HTML-комментариев в формате <!-- wp:... --> имеет несколько важных преимуществ:

  1. Совместимость с HTML.
    Комментарии — это валидная часть HTML, которая не нарушает структуру документа и не отображается на странице. Это делает данный формат безопасным для использования, даже если страница будет редактироваться вручную или выводиться в старых версиях браузеров.

  2. Гибкость и расширяемость.
    Комментарии позволяют легко встраивать дополнительные данные и метаданные, не нарушая основной контент страницы. В случае с блоками WordPress они содержат информацию о типе блока, его настройках и иногда — о его содержимом. Это делает процесс создания и редактирования блоков более гибким, а их структура — лёгкой для восприятия и обработки как WordPress, так и разработчиками.

  3. Упрощение редактирования контента.
    Когда вы редактируете страницу в Gutenberg, блоки легко перетаскиваются, копируются или удаляются. Использование комментариев для идентификации блоков делает весь этот процесс простым и интуитивным, так как WordPress точно знает, какой контент относится к какому блоку.

  4. Поддержка блоков в других редакторах.
    Если кто-то решит редактировать страницу не через WordPress, а через внешний HTML-редактор, блоки останутся в виде комментариев. В отличие от меток или других способов разметки, комментарии не сломают структуру страницы, и блоки сохранятся в правильном виде.

Как работает структура блоков в коде?

Когда вы добавляете блоки в редакторе Gutenberg, WordPress автоматически генерирует HTML с комментариями. Эти комментарии содержат информацию о блоках и их параметрах. Для примера возьмём блок заголовка и параграфа:

<! -- wp:heading -- >
    <h2>Заголовок блока</h2>
<! -- /wp:heading -- >

<! -- wp:paragraph -- >
    <p>Это параграф внутри блока.</p>
<! -- /wp:paragraph -- >

  • <!-- wp:heading --> сообщает WordPress, что это блок заголовка.Закрывающий тег <!-- /wp:heading --> обозначает конец блока заголовка.
    • Внутри блоков может быть любой HTML-код, который затем будет выводиться на страницу сайт
    Как этот формат помогает ускорить работу с блоками?Использование структуры с HTML-комментариями делает процесс создания и редактирования контента в блочных темах намного быстрее по следующим причинам:

  • Простота обработки.
    Когда WordPress загружает страницу, он видит комментарии и легко может определить, где начинаются и заканчиваются блоки, а также применить нужные стили и настройки. Это ускоряет рендеринг блоков и снижает вероятность ошибок.Мгновенные изменения в редакторе.
    Благодаря тому, что структура блоков легко распознаётся с помощью комментариев, редактор может моментально обновлять блоки без задержек. Это особенно важно для больших страниц с множеством блоков.Меньшая нагрузка на сервер.
    Поскольку комментарии не занимают много места и не требуют сложной обработки, сервер тратит меньше ресурсов на работу с кодом страницы. Это улучшает производительность сайта.

    • Какие блоки используют такую разметку?Практически все блоки в WordPress используют такую разметку, включая заголовки, параграфы, изображения, галереи, видео и другие элементы. Групповые блоки (<!-- wp:group -->) особенно полезны для управления сложными макетами, так как они позволяют сгруппировать несколько элементов и легко их настроить.Пример использования нескольких блоков внутри группового блока:

<! -- wp:group -->
    <div class="wp-block-group">
        <! -- wp:heading -- >
            <h2>Заголовок внутри группы</h2>
        <! -- /wp:heading -- >

        <! -- wp:paragraph -- >
            <p>Параграф внутри группы.</p>
        <! -- /wp:paragraph -- >
    </div>
<! -- /wp:group -- >

Почитаем еще?: