wpnext
github wpnext
Cover Image for Custom CSS для отдельных блоков в WordPress 7.0

Custom CSS для отдельных блоков в WordPress 7.0

18 марта 2026

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

Что такое Custom CSS для отдельных блоков?

Ранее в WordPress существовала возможность добавлять дополнительные CSS-классы к блокам, однако сами стили всё равно приходилось прописывать вручную в файле style.css или через настройщик темы. WordPress 7.0 меняет этот подход, позволяя вводить CSS-правила непосредственно в панели настроек конкретного блока.

Как это работает?

В боковой панели редактора блоков (Gutenberg) появилась новая вкладка или секция, где можно вписать произвольные CSS-правила для выбранного блока. Эти стили применяются только к данному экземпляру блока и не затрагивают другие блоки того же типа на странице или сайте.

/* Пример CSS для конкретного блока */
.wp-block-paragraph {
  color: #ff6600;
  font-size: 1.2rem;
  line-height: 1.8;
}

Преимущества для разработчиков и пользователей

  • Гибкость без плагинов — больше не нужны сторонние решения для точечного управления стилями блоков.
  • Быстрое прототипирование — дизайнеры могут тестировать стили прямо в редакторе без переключения между файлами.
  • Изоляция стилей — CSS применяется только к конкретному блоку, исключая нежелательные побочные эффекты.
  • Совместимость с FSE — функция полностью интегрирована с Full Site Editing и работает в шаблонах и частях шаблонов.

Техническая реализация

WordPress генерирует уникальный идентификатор для каждого блока и добавляет инлайн-стили или динамически создаваемый <style>-тег с соответствующим селектором. Это позволяет изолировать стили без конфликтов с глобальными правилами темы.

На что обратить внимание

При использовании пользовательского CSS для блоков важно помнить о нескольких моментах. Во-первых, чрезмерное использование инлайн-стилей может усложнить поддержку проекта. Во-вторых, при смене темы некоторые стили могут конфликтовать с новыми правилами. Рекомендуется использовать эту функцию точечно — для уникальных элементов дизайна, а не как замену глобальным стилям темы.

Итог

Custom CSS для отдельных экземпляров блоков в WordPress 7.0 — это значительный шаг вперёд в развитии редактора блоков. Функция делает платформу более гибкой и дружелюбной как для опытных разработчиков, так и для продвинутых пользователей, которые хотят иметь полный контроль над внешним видом своего сайта без написания кода за пределами редактора.

Ещё почитать