Использование нового ограниченного макета в блочных темах WordPress

Одна из основных целей редактора сайта WordPress (и, да, это сейчас "Официальное название) заключается в перемещении основного стиля блока от CSS в структурированный JSON. Файлы JSON являются машиночитаемыми, что делает их пригодными для использования редактором сайта на основе JavaScript для настройки глобальных стилей темы непосредственно в WordPress.

Это еще не все! Если мы посмотрим на стандартную тему Twenty Twenty-Two (TT2), то увидим две основные нерешенные проблемы: взаимодействие стилей (как :hover, :active, :focus), а также расширение поля и заполнение контейнеров макета. Вы можете увидеть, как они были временно исправлены в TT2. style.css файл, а не помещать его в theme.json .

WordPress 6.1 исправили эти проблемы, и я хочу обратить особое внимание на последнее. Теперь, когда у нас есть стили JSON для полей и отступов контейнеров макета, это открывает перед нами новые возможности. более гибкие и надежные способы определения интервалов в макетах наших тем.

О каком интервале идет речь?

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

Но это еще не все, потому что теперь у нас есть способ для блоков обойти этот отступ и выровнять себя по всей ширине. Это благодаря выравнивание с учетом заполнения это новая функция подписки в theme.json. Таким образом, даже если у вас есть заполнение на корневом уровне, вы все равно можете позволить, скажем, изображению (или какому-то другому блоку) выйти на полную ширину.

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

Давайте начнем с…

Заполнение корневого уровня

Опять же, это не ново. У нас была возможность установить отступы на элемент в theme.json с момента экспериментального Плагин Гутенберга представил его в версии 11.7. Мы устанавливаем его на styles.spacing объект, где мы имеем margin и padding объекты для определения верхнего, правого, нижнего и левого интервалов на теле:

{
  "version": 2,
  "styles": {
    "spacing": {
      "margin": {
        "top": "60px",
        "right": "30px",
        "bottom": "60px",
        "left": "30px"
      },
      "padding": {
        "top": "30px",
        "right": "30px",
        "bottom": "30px",
        "left": "30px"
      }
    }
  }
}

Это глобальная настройка. Итак, если бы мы взломали DevTools и проверили элемент, мы увидим следующие стили CSS:

body {
  margin-top: 60px;
  margin-right: 30px;
  margin-bottom: 60px;
  margin-left: 30px;
  padding-top: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
  padding-left: 30px;
}

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

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

Войти…

Выравнивание с учетом заполнения

При попытке создать первую тему WordPress по умолчанию, которая определяет все стили в theme.json Ведущий дизайнер Кьелл Рейгстад ​​иллюстрирует сложные аспекты отказа от заполнения на корневом уровне в этом Проблема с GitHub.

Для решения этой проблемы были созданы новые функции в WordPress 6.1. Давайте углубимся в следующие.

useRootPaddingAwareAlignments

Новая useRootPaddingAwareAlignments свойство было создано для решения проблемы. Впервые он был представлен в плагине Gutenberg версии 13.8. исходный запрос на вытягивание хороший пример того, как это работает.

{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "useRootPaddingAwareAlignments": true,
    // etc.
  },

Сразу же обратите внимание, что это функция, которую мы должны использовать. Свойство установлено на false по умолчанию, и мы должны явно установить его на true чтобы включить его. Также обратите внимание, что у нас есть appearanceTools установлен в true так же. Это позволяет нам использовать элементы управления пользовательского интерфейса в редакторе сайта для оформления границ, цветов ссылок, типографики и, да, интервалов, включая поля и отступы.

настройка appearanceTools установлен в true автоматически выбирает блоки в поля и отступы без необходимости устанавливать либо settings.spacing.padding or setting.spacing.margin в true.

Когда мы включаем useRootPaddingAwareAlignments, нам предоставляются настраиваемые свойства со значениями корневого отступа, которые устанавливаются на элемент на переднем конце. Интересно, что он также применяет отступы к .editor-styles-wrapper класс, чтобы интервал отображался при работе во внутреннем редакторе блоков. Довольно круто!

Я смог подтвердить эти пользовательские свойства CSS в DevTools, пока копался.

Включение useRootPaddingAwareAlignments также применяет левое и правое заполнение к любому блоку, который поддерживает значения ширины «контента» и «широкой» ширины на изображении глобальных стилей выше. Мы также можем определить эти значения в theme.json:

{
  "version": 2,
  "settings": {
    "layout": {
      "contentSize": "640px",
      "wideSize": "1000px"
    }
  }
}

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

• contentSize ширина по умолчанию для блоков.
• wideSize обеспечивает «широкий» вариант макета и устанавливает более широкую колонку для растягивания блоков.

Итак, последний пример кода даст нам следующий CSS:

/* The default content container */
.wp-container-[id] > * {
  max-width: 640px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* The wider content container */
.wp-container-[id] > .alignwide {
  max-width: 1000px;
}

[id] указывает уникальный номер, автоматически сгенерированный WordPress.

Но угадайте, что еще мы получаем? Полное выравнивание, а также!

.wp-container-[id] .alignfull {
  max-width: none;
}

Видеть, что? Включив useRootPaddingAwareAlignments и определяющий contentSize и wideSize, мы также получаем класс CSS с полным выравниванием для трех конфигураций контейнера для управления шириной блоков, которые добавляются к страницам и сообщениям.

Это относится к следующим блокам, специфичным для макета: столбцы, группа, пост-контент и цикл запросов.

Элементы управления расположением блоков

Допустим, мы добавляем на страницу любой из вышеупомянутых блоков, специфичных для макета. Когда мы выбираем блок, пользовательский интерфейс настроек блока предлагает нам новые настройки макета на основе settings.layout значения, которые мы определили в theme.json (или пользовательский интерфейс глобальных стилей).

Здесь мы имеем дело с очень специфическими блоками — блоками, внутри которых могут быть вложены другие блоки. Таким образом, эти настройки макета на самом деле предназначены для управления шириной и выравниванием этих вложенных блоков. Параметр «Внутренние блоки используют ширину содержимого» включен по умолчанию. Если мы отключим его, то у нас не будет max-width на контейнере и блоки внутри него идут встык.

Если мы оставим переключатель включенным, то вложенные блоки будут присоединяться либо к contentWidth or wideWidth значения (подробнее об этом чуть позже). Или мы можем использовать числовые входы для определения пользовательских contentWidth и wideWidth значения в этом единичном экземпляре. Это отличная гибкость!

Широкие блоки

Настройки, которые мы только что посмотрели, установлены в родительском блоке. После того, как мы вложили блок внутрь и выбрали его, у нас есть дополнительные параметры в этом блоке для использования contentWidth, wideWidth, или перейти на полную ширину.

Обратите внимание, как WordPress умножает пользовательские свойства CSS отступов корневого уровня на -1 для создания отрицательных полей при выборе параметра «Полная ширина».

Использование ограниченного макета

Мы только что рассмотрели новые интервалы и выравнивания, которые появились в WordPress 6.1. Они специфичны для блоков и любых вложенных блоков внутри блоков. Но WordPress 6.1 также представляет новые функции макета для еще большей гибкости и согласованности шаблонов темы.

Показательный пример: WordPress полностью реструктурировал свои типы макетов Flex и Flow и дал нам ограничен макет тип, который упрощает выравнивание блочных макетов в темах с помощью настроек ширины содержимого в пользовательском интерфейсе глобальных стилей редактора сайта.

Макеты Flex, Flow и Constrained

Разница между этими тремя типами макетов заключается в стилях, которые они выводят. У Изабель Брисон отличная рецензия. это хорошо описывает различия, но давайте перефразируем их здесь для справки:

• Схема потока: Добавляет интервал по вертикали между вложенными блоками в margin-block направление. Эти вложенные блоки также могут быть выровнены по левому, правому краю или по центру.
• Ограниченный макет: То же самое, что и макет Flow, но с ограничениями по ширине для вложенных блоков, которые основаны на contentWidth и wideWidth настройки (либо в theme.json или глобальные стили).
• Гибкая компоновка: Это не изменилось в WordPress 6.1. Оно использует CSS флексбокс для создания макета, который по умолчанию размещается горизонтально (рядом), но может располагаться и вертикально, поэтому блоки располагаются один над другим. Интервал применяется с помощью CSS gap имущество.

Этот новый набор типов макетов создает имена семантических классов для каждого макета:

Семантический класс макета	Тип макета	Поддерживаемые блоки
.is-layout-flow	Схема потока	Столбцы, группы, пост-контент и цикл запросов.
.is-layout-constrained	Ограниченный макет	Столбцы, группы, пост-контент и цикл запросов.
.is-layout-flex	Макет Flex	Колонки, кнопки, социальные иконки

У Джастина Тэдлока есть обширная статья о различные типы компоновки и семантические классы, включая варианты использования и примеры.

Обновление вашей темы для поддержки ограниченных макетов

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

{
  "version": 2,
  "settings": {
    "layout": {
      "type": "constrained", // replaces `"inherit": true`
      "type": "default", // replaces `"inherit": false`
    }
  }
}

Это недавно выпущенные темы блоков, в которых включены настройки интервалов с useRootPaddingAwareAlignments и иметь обновленный theme.json файл, который определяет ограниченный макет:

Отключение стилей макета

Базовые стили макета — это функции по умолчанию, которые поставляются в WordPress 6.1 Core. Другими словами, они включены прямо из коробки. Но мы можем отключить их, если нам нужно, с помощью этого небольшого фрагмента в functions.php:

// Remove layout styles.
add_theme_support( 'disable-layout-styles' );

Здесь большое предупреждение: отключение поддержки типов макетов по умолчанию также удаляет все базовые стили для этих макетов. Это означает, что вам нужно будет использовать свои собственные стили для интервалов, выравнивания и всего остального, необходимого для отображения контента в различных контекстах шаблонов и блоков.

Подведение итогов

Как большой поклонник полноразмерных изображений, новый встроенный макет WordPress 6.1 и функции выравнивания с учетом отступов — две из моих самых любимых функций. В сочетании с другими инструментами, включая улучшенный контроль полей и отступов, плавная типографика, а также обновленные блоки «Список» и «Цитата», среди прочего, являются убедительным доказательством того, что WordPress движется к лучшему процессу создания контента.

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

Из-за продолжающихся итераций разработки редактора сайта мы всегда должны предвидеть трудный путь впереди. Однако, как оптимист, мне не терпится увидеть, что произойдет в следующей версии WordPress 6.2. Некоторые вещи, за которыми я внимательно слежу, это такие вещи, как рассматриваемые особенности для включения, поддержка липкое позиционирование, новые имена классов макета для обертки внутренних блоков, обновлены параметры выравнивания нижнего колонтитулакачества добавление параметров макета с ограничениями и потока в блоки обложки.

Эта Ошибка GitHub # 44720 перечисляет обсуждения, связанные с макетом намечено для WordPress 6.2.

Дополнительные ресурсы

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

Руководства

Сообщения WordPress

Запросы на вытягивание GitHub и проблемы