wpnext
github wpnext
Cover Image for Стилизация форм через theme.json — новшество WordPress 6.9

Стилизация форм через theme.json — новшество WordPress 6.9

17 ноября 2025

Первый шаг к системным стилям форм и дизайн системе, которая будет настраиваться через theme.json

TL;DR

  • В WordPress 6.9 можно задавать глобальные стили форм напрямую в theme.json.
  • Пока два элемента: select и textInput (textarea + часть текстовых input).
  • Стили распространяются на весь фронтенд, включая формы плагинов.
  • Псевдоклассы и некоторые тонкости (например, focus-стили, caret-color) пока добавляются через CSS.
  • Рекомендуется использовать пресеты и токены вместо жёстких значений.
  • Ожидается дальнейшее расширение набора элементов в будущих релизах.

Стилизация форм через theme.json

С выходом 6.9 в системе глобальных стилей появились элементы форм, которые можно настраивать через styles.elements в theme.json. Это важный шаг к консистентным, предсказуемым и поддерживаемым стилям форм на уровне темы и дизайн‑системы.

Доступны два новых элемента:

  • select — нацеливается на HTML-элементы <select>.
  • textInput — нацеливается на <textarea> и <input> c типами text, search, email, url, tel, number, password.

Стили задаются в разделе styles.elements. Это глобальная точка управления: изменения применяются во всех блоках ядра и сторонних плагинах, если их CSS не переопределяет правила из темы.

Базовая структура в theme.json

Ниже — минимальный каркас, куда будут добавляться стили:

{
  "version": 3,
  "styles": {
    "elements": {
      "select": {},
      "textInput": {}
    }
  }
}

Пример: стили для выпадающих списков

Выпадающий список — менее распространённый элемент в блоках, но его легко протестировать, включив опцию «Отображать как раскрывающийся список» у «Список рубрик» или «Архивы».

{
  "styles": {
    "elements": {
      "select": {
        "color": {
          "text": "var:preset|color|contrast",
          "background": "var:preset|color|base"
        },
        "border": {
          "color": "var:preset|color|contrast-2",
          "width": "1px",
          "radius": "6px"
        },
        "spacing": {
          "padding": {
            "top": "0.625rem",
            "right": "0.75rem",
            "bottom": "0.625rem",
            "left": "0.75rem"
          }
        },
        "outline": {
          "style": "solid",
          "width": "2px",
          "color": "transparent",
          "offset": "2px"
        },
        "shadow": "var:preset|shadow|natural"
      }
    }
  }
}

Здесь используются пресеты цветов и теней — такой подход упрощает поддержку тёмной темы, тематизацию и дальнейшие изменения дизайна.

Пример: стили для текстовых полей

Те же принципы работают для textInput. Проверять удобнее всего на блоке «Форма комментариев», также подойдут «Вход/Выход», «Поиск» и любые блоки сторонних плагинов.

{
  "styles": {
    "elements": {
      "textInput": {
        "color": {
          "text": "var:preset|color|contrast",
          "background": "var:preset|color|base"
        },
        "border": {
          "color": "var:preset|color|contrast-2",
          "width": "1px",
          "radius": "6px"
        },
        "spacing": {
          "padding": {
            "top": "0.625rem",
            "right": "0.75rem",
            "bottom": "0.625rem",
            "left": "0.75rem"
          }
        },
        "outline": {
          "style": "solid",
          "width": "2px",
          "color": "transparent",
          "offset": "2px"
        },
        "shadow": "var:preset|shadow|natural"
      }
    }
  }
}

На практике стили для select и textInput часто совпадают: это удобно для унификации визуального языка формы.

Что пока не сделано в theme.json и как это закрыть через CSS

Текущее ограничение — отсутствие поддержки состояний (например, :focus) и ряда CSS-свойств. Особенно важно обеспечить заметную фокус‑индикацию для доступности.

Цвет каретки в полях ввода

Для лучшей визуальной обратной связи можно настроить цвет каретки (мигающий курсор в текстовом поле):

textarea,
input:where([type=email],[type=number],[type=password],[type=search],[type=text],[type=tel],[type=url]) {
  caret-color: #2770ce;
}

Фокус‑контур

В примерах выше outline-color в theme.json установлен как transparent, чтобы не мелькал вне фокуса. Настроим цвет при фокусе через CSS:

textarea:focus,
input:where([type=email],[type=number],[type=password],[type=search],[type=text],[type=tel],[type=url]):focus,
select:focus {
  outline-color: #2770ce;
}

Подберите цвет и толщину контура из вашей дизайн‑системы, соблюдая контрастность и видимость на любых фонах.

Стилизация label

label пока не поддерживается в theme.json как элемент формы. Базовые стили и исключения для чекбоксов/радиокнопок можно задать так:

/* Базовые стили для label */
label {
  color: #526277;
  font-size: 1rem;
}

/* Сброс рядом с checkbox/radio */
input[type="checkbox"] + label,
input[type="radio"] + label,
label:has(input[type="checkbox"], input[type="radio"]) {
  color: inherit;
  font-size: inherit;
}

Отдельный паттерн для чекбоксов и радиокнопок нужен потому, что их лейблы часто требуют иных отступов, размеров и выравнивания.

Совместимость и приоритеты: что учесть темам и плагинам

  • Каскад и специфичность. Глобальные стили из theme.json применяются ко всем формам, но CSS плагина с более высокой специфичностью может их переопределить. Поддерживайте умеренную специфичность в теме и избегайте !important, оставляя возможность переопределения.
  • Плагины. После перехода на 6.9 плагинам, которые агрессивно стилизуют формы, может потребоваться корректировка, чтобы не ломать дизайн темы.
  • Дизайн‑токены. Используйте пресеты (var:preset|color|..., var:preset|shadow|...) для цветов, теней и отступов. Это упростит поддержку нескольких цветовых схем и масштабирование дизайн‑системы.

Практики: доступность, тёмная тема, единый визуальный язык

  • Доступность. Гарантируйте видимый focus, достаточный контраст текста и рамок, понятные состояния ошибок. Не отключайте контур фокуса без альтернативы.
  • Согласованность. Выравнивайте радиусы, толщины границ и отступы между select, input и textarea. Это уменьшает когнитивную нагрузку и делает формы аккуратнее.
  • Тёмные схемы. Проверяйте цвета контуров и теней в светлой/тёмной темах. Пресеты сильно упрощают эту задачу.

План дальнейшего развития

В 6.9 поддерживаются только селекты и текстовые поля. Впереди — расширение набора элементов (чекбоксы, радиокнопки, диапазоны, поля даты/файла и др.) и поддержка состояний прямо в theme.json. Это приблизит формы к полному соответствию дизайн‑системе без «прослоек» из кастомного CSS.

Вывод

Новый цикл стилизации форм через theme.json — важная эволюция WordPress‑тем. Уже можно вынести большую часть базовой типографики, цветов, границ, отступов и теней в глобальные стили и гарантировать единый внешний вид форм на всём сайте. Псевдоклассы и некоторые детали пока закрываются CSS, но направление задано: дальше — больше.

Оригинал: https://developer.wordpress.org/news/2025/11/how-wordpress-6-9-gives-forms-a-theme-json-makeover/

Ещё почитать