Хотя немного позже, чем планировалось изначально, мы получаем новую тему WordPress по умолчанию. Его имя — Twenty Twenty-Two!
Новая тема WordPress по умолчанию поставляется с предстоящим выпуском WordPress 5.9. Нам было любопытно узнать больше о новой теме, поэтому мы установили и протестировали Twenty Twenty-Two в локальной среде разработки под управлением WordPress 5.9.
Мы покажем вам наши результаты, прежде чем подвести итоги, чтобы представить вам подробный обзор всех тонкостей новой темы WordPress.
Предварительный просмотр Twenty Twenty-Two, новой темы WordPress по умолчанию (Источник изображения: WordPress.org) Twenty Twenty-Two была разработана как самая гибкая, легкая и настраиваемая тема по умолчанию из когда-либо существовавших. Она представляет собой отличную площадку для тестирования блоков, паттернов и шаблонов.
Будучи темой блоков, она поможет вам лучше изучить полное редактирование сайта, глобальные стили, блоки навигации и новые галереи изображений, которые являются наиболее ожидаемыми функциями WordPress 5.9.
Сразу скажем, что Twenty Twenty-Two — это первая тема блока по умолчанию !
Одна из самых амбициозных целей новой темы — расширить возможности пользователей . Благодаря такому количеству шаблонов и шаблонов, доступных прямо из коробки, пользователи могут создавать сложные макеты всего несколькими щелчками мыши. Остальное — просто настройка стиля.
С технической точки зрения, описание Twenty Twenty-Two не сильно отличается от описания последних и самых мощных функций WordPress 5.9. Но Twenty Twenty-Two предоставляет нам увеличительное стекло, чтобы лучше оценить новые функции редактирования сайта и получить лучшее представление о будущем платформы.
Итак, мы должны познакомить вас с новой темой.
Сначала мы рассмотрим новый процесс редактирования сайта который пользователи будут испытывать с WordPress 5.9 и Twenty Twenty-Two.
После этого мы погрузимся в основные функции темы блоков, реализованные в Twenty Twenty-Two. Вы познакомитесь с глобальными стилями шаблонами блоков шаблонами и частями шаблонов .
Но о Twenty Twenty-Two и темах блоков WordPress можно сказать гораздо больше. Итак, в качестве дополнительной главы мы дадим краткий обзор того, как расширить возможности Twenty Twenty-Two с помощью файла theme.json .
Вот первый взгляд на следующую тему WordPress по умолчанию! Я рад быть одним из руководителей этого проекта вместе с @jffng, и мы оба надеемся, что вы внесете в него свой вклад и / или просто получите удовольствие от его использования! 🐦🦆🐤🦉https: //t.co/covjrpgFIO
— kjellr (@kjellr) 6 октября 2021 г.
Давайте приступим к работе и погрузимся в новую тему WordPress Twenty Twenty-Two по умолчанию.
«Двадцать двадцать два» открывает новый порядок редактирования сайта
Несколько функций полного редактирования сайта входят в ядро WordPress 5.9. Владельцы сайтов, использующие последнюю версию WordPress с установленной темой блоков, например Twenty Twenty-Two, скоро смогут:
- Создавайте и редактируйте сообщения и страницы, используя дополнительные блоки и шаблоны
- Настройте параметры и стили, определенные в файле theme.json через интерфейс глобальных стилей
- Создавайте и редактируйте шаблоны для страниц и сообщений
- Создание и редактирование частей шаблона для верхнего, нижнего колонтитула и других областей шаблона
Со всеми этими функциями, объединенными в ядро, основные участники WordPress обсуждали эволюцию информационной архитектуры и переработали весь процесс редактирования сайта.
Первое, что вы можете заметить после активации Twenty Twenty-Two, — это то, что точка входа в редактор сайта больше не находится в главном меню вашей панели управления WordPress, а перемещена под Внешний вид Меню .
Новое меню внешнего вида в WordPress 5.9 Объединение функций редактирования шаблонов и стилей в одном Меню внешнего вида должно упростить процесс редактирования. Оно должно упростить понимание того, что функции, к которым вы получаете доступ, относятся к презентации ваших страниц.
Пункт меню Редактор открывает шаблон домашней страницы сайта. В зависимости от настроек чтения это может быть либо страница ваших последних сообщений, либо статическая страница.
Редактор сайта в WordPress 5.9 с Twenty Twenty-Two Сейчас при нажатии на значок WordPress в верхнем левом углу отображается новое меню навигации редактора сайта, включающее три пункта меню: Сайт Шаблоны, и Части шаблона .
Давайте рассмотрим подробнее.
Меню навигации редактора Параметр Сайт открывает шаблон домашней страницы (последние статьи в блоге или статическая домашняя страница).
В пункте меню Templates вы получите список доступных шаблонов. Вы можете щелкнуть любой шаблон в списке, чтобы запустить его в редакторе.
На момент написания этой статьи Twenty Twenty-Two предоставляет 11 шаблонов.
Двадцать двадцать два шаблона. Щелчок по многоточию ( ︙ ) значок справа позволяет удалить ваши настройки.
Очистить настройки шаблона В отличие от шаблонов тем, пользовательские шаблоны можно только переименовать или удалить ( но вы можете редактировать собственные шаблоны в редакторе сообщений).
Переименовать / удалить пользовательские шаблоны Части шаблона В пункте меню перечислены доступные части шаблона, которые вы можете открыть в редакторе для своих настроек.
По умолчанию в Twenty Twenty-Two добавлены четыре части шаблона. При наведении курсора на измененный шаблон отображается всплывающая подсказка, сообщающая, что шаблон был настроен.
Двадцать двадцать две части шаблона. Вы можете удалить эти настройки с помощью нажав на значок с многоточием ( ︙ ) справа.
Очистить настройки части шаблона Редактирование шаблонов и частей шаблона
Редактор предоставляет интерфейс для настройки структуры ваших шаблонов и частей шаблона.
Здесь вы можете легко добавлять или редактировать блоки и шаблоны, и ваши изменения будут автоматически применяться к каждой странице, использующей этот шаблон.
Редактирование шаблона одного сообщения На изображении ниже показан шаблон страницы 404 в редактор. Это довольно простой шаблон, включающий только заголовок, абзац и поле поиска. Тем не менее, он дает нам хорошее представление о том, как работает пользовательский интерфейс.
Шаблон блока 404 Twenty-Two в редакторе шаблонов Здесь вы можете создать редактирует и настраивает шаблоны в соответствии с вашими потребностями. Например, вы можете добавить шаблон Сетка сообщений с изображениями чтобы повысить заинтересованность посетителей и пригласить их просматривать содержимое вашего веб-сайта.
Настройка шаблона блока 404 Twenty-Two Раскрывающийся заголовок вверху редактор шаблонов отображает список доступных областей шаблона . Тот же список отображается на вкладке Шаблон на боковой панели Настройки .
Области шаблона в Twenty Twenty-Two Щелчком по любому шаблону область (например, заголовок), вы попадете прямо в ту часть шаблона, которую хотите отредактировать.
Если вы нажмете на значок с многоточием справа, вы получите доступ к Редактору изолированной части шаблона .
Значок с многоточием запускает редактор изолированной части шаблона Редактор части шаблона также предоставляет пару перетаскиваемых маркеров, позволяющих проверить поведение шаблона при разных разрешениях экрана.
Регулировка размера предварительного просмотра детали шаблона Когда вы будете довольны своими изменениями, сохраните изменения и вернитесь в главный редактор шаблонов, чтобы проверить окончательный результат.
Если вы хотите глубже погрузиться в новую информационную архитектуру, вы можете проверить следующие статьи:
Ядро Twenty Twenty-Two: Краткий обзор theme.json
Чтобы полностью понять, как работают Twenty-Twenty-Two и блочные темы, давайте взглянем на новый механизм конфигурации и стиля темы, основанный на файле theme.json .
Представленный в WordPress 5.8, этот новый механизм позволяет разработчикам тем настраивать редактор и добавлять поддержку функций из центральной точки конфигурации.
В Twenty Twenty-Two файл theme.json имеет следующую структуру:
{
«версия»: 2,
"настройки": {},
"стили": {},
"customTemplates": {},
"templateParts": {}
}
Давайте быстро рассмотрим каждый раздел.
Версия
Поле версия описывает версию спецификации, которая в настоящее время составляет 2 .
Настройки
Раздел settings определяет настройки на глобальном или блочном уровне. Настройки, определенные на верхнем уровне, влияют на все блоки, но блоки могут индивидуально переопределять глобальные настройки. В Twenty Twenty-Two вы найдете следующие настройки:
{
"настройки": {
"appearanceTools": правда,
"цвет": {
"дуотон": [...],
"градиенты": [...],
«палитра»: [...]
},
"обычай": {...},
"интервал": {...},
"типография": {
"dropCap": ложь,
"fontFamilies": [...],
"fontSizes": [...]
},
"макет": {...}
}
}
Значения по умолчанию называются предустановками и используются для создания настраиваемых свойств CSS и имен классов на основе определенного соглашения об именах:
- Пользовательское свойство CSS:
- wp - preset - {preset-category} - {preset-slug} - Имя класса CSS:
.has- {preset-slug} - {preset-category}
После того, как тема определила свои предустановки, соответствующие настраиваемые свойства CSS можно использовать для стилизации блоков и элементов в разделе стилей .
Стили
В разделе стилей темы определяют стили блоков и элементов по умолчанию. См., Например, следующие двадцать двадцать два стиля для основного блока кнопок:
{
«версия»: 2,
"стили": {
"блоки": {
"core / button": {
"граница": {
"radius": "0"
},
"цвет": {
"background": "var (- wp - preset - color - primary)",
"текст": "var (- wp - preset - color - background)"
},
"типография": {
"fontSize": "var (- wp - preset - typography - font-size - normal)"
}
}
}
}
}
Обратите внимание на настраиваемые свойства CSS, используемые в объявлениях свойств.
Пользовательские шаблоны
В разделе customTemplates тема объявляет свои настраиваемые шаблоны. Поля name и title обязательны. Темы также могут указывать, какой тип сообщения может использовать шаблон, задав свойство postTypes .
Twenty Twenty-Two предоставляет четыре настраиваемых шаблона:
{
«версия»: 2,
"customTemplates": [
{
"name": "blank",
"title": "Blank",
"postTypes": [
"page",
"post"
]
},
{
"name": "большой заголовок страницы",
"title": "Страница (большой заголовок)",
"postTypes": [
"page"
]
},
{
"name": "одинарные без разделителей",
"title": "Одно сообщение (без разделителей)",
"postTypes": [
"post"
]
},
{
"name": "страницы без разделителей",
"title": "Страница (без разделителей)",
"postTypes": [
"page"
]
}
]
}
Вы найдете соответствующие файлы .html в папке block-templates .
Папка шаблонов блоков Twenty-Two Детали шаблона
Раздел templateParts включает определения частей шаблона:
{
«версия»: 2,
"templateParts": [
{
"name": "header",
"title": "Header",
"area": "header"
},
{
"name": "header-large-dark",
"title": "Header (Dark, large)",
"area": "header"
},
{
"name": "header-small-dark",
"title": "Header (Dark, small)",
"area": "header"
},
{
"name": "footer",
"title": "Footer",
"area": "footer"
}
]
}
Поля name и title обязательны. Темы также могут объявлять термин области где часть шаблона будет отображаться в редакторе.
Двадцать двадцать две части шаблона Части шаблона .html Файлы находятся в папке template-parts .
Теперь, когда вы знаете больше о Twenty Twenty-Two theme.json мы можем более подробно изучить возможности темы и новый интерфейс редактирования.
Давайте погрузимся в Twenty-Two’s Global Styles .
Глобальные стили в двадцать два
Если вы посмотрите на Twenty Twenty-Two ’ style.css, вы можете быть удивлены, заметив, что он содержит минимальное количество объявлений CSS. Причина в том, что стили объявлены в файле theme.json в блочных темах .
WordPress 5.9 сделает шаг вперед, представив новую функцию, которая позволяет пользователям блочной темы настраивать внешний вид элементов сайта из пользовательского интерфейса под названием Global Styles.
Доступ к интерфейсу глобальных стилей можно получить с помощью нового значка Стили расположенного в верхнем правом углу редактора (см. Также Интерфейс глобальных стилей).
При нажатии на этот значок отображается новая боковая панель Стили включающая три отдельные панели:
- Панель Предварительный просмотр показывающая предварительный просмотр ваших настроек
- Панель Глобальные стили обеспечивающая доступ к определенным группам элементов управления для Типографика Цвета и Макет
- Элемент Blocks обеспечивающий доступ к настройкам стиля на уровне блока
Боковая панель стилей в Twenty Twenty-Two Цветовая палитра Twenty Twenty-Two
Панель Цвета может помочь вам редактировать доступные палитры и назначать или изменять цвета для Фон Текст или Ссылки .
На панели Палитра вы можете настроить палитры Тема или По умолчанию и даже создать свою собственную палитру.
Настройки цвета в Twenty Twenty-Two Вы нашли код, который генерирует цвет? еще нет контроля?
Если нет, откройте файл Twenty Twenty-Two theme.json в своем любимом редакторе кода. Вы найдете следующие объявления цветовой палитры:
{
«версия»: 2,
"настройки": {
"цвет": {
"палитра": [
{
"slug": "foreground",
"color": "#000000",
"name": "Foreground"
},
{
"slug": "background",
"color": "#ffffff",
"name": "Background"
},
{
"slug": "primary",
"color": "#1a4548",
"name": "Primary"
},
{
"slug": "secondary",
"color": "#ffe2c7",
"name": "Secondary"
},
{
"slug": "tertiary",
"color": "#F6F6F6",
"name": "Tertiary"
}
]
}
}
}
На изображении ниже показано, как приведенный выше код соответствует цветовой палитре Twenty Twenty-Two.
Цветовая палитра Twenty-Twenty-Two Теперь предположим, что вы хотите изменить значение по умолчанию цвет фона для определенного блока. Выбор другого цвета для фона блока просто присвоит другую переменную CSS свойству элемента background-color . На изображении ниже показан пример этого:
Основной цвет Twenty-Two используется как цвет фона И все! не нужно будет добавлять в настройщик ни единой строчки пользовательского кода CSS или создавать для этого дочернюю тему.
Но давайте продолжим изучение Global Styles Twenty-Two с некоторыми дополнительными примерами.
Настройки типографики
На панели Типография вы можете настроить стили оформления для элементов Текст и Ссылки вашего веб-сайта на глобальном уровне.
Каждый элемент предоставляет доступ к группе элементов управления, позволяющих настроить семейство шрифтов, размер и высоту строки.
Настройки типографики в Twenty Twenty-Two Вам интересно, какой код генерирует эти элементы управления?
Откройте файл Twenty Twenty-Two theme.json и найдите раздел типографика . Вы увидите следующие настройки:
{
«версия»: 1,
"настройки": {
"appearanceTools": правда,
"типография": {
"dropCap": ложь,
"fontFamilies": [
{
"fontFamily": "-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif",
"name": "System Font",
"slug": "system-font"
},
{
"fontFamily": ""Source Serif Pro", serif",
"name": "Source Serif Pro",
"slug": "source-serif-pro"
}
],
"fontSizes": [
{
"name": "Small",
"size": "1rem",
"slug": "small"
},
{
"name": "Normal",
"size": "1.125rem",
"slug": "normal"
},
{
"name": "Medium",
"size": "1.75rem",
"slug": "medium"
},
{
"name": "Large",
"size": "clamp(1.75rem, 3vw, 2.25rem)",
"slug": "large"
},
{
"name": "Huge",
"size": "clamp(2.5rem, 4vw, 3rem)",
"slug": "huge"
}
]
},
}
Вы можете ожидать увидеть два семейства шрифтов и пять размеров шрифта из приведенного выше кода. И вы правильно догадались.
Вот как приведенный выше код преобразуется в настройки Global Styles Typography :
Стили типографики в Twenty Twenty-Two Вы можете догадаться, какие настройки генерирует элемент управления Высота строки . В Twenty Twenty-Two вы не найдете для этого конкретного параметра, потому что он включен свойством appearanceTools которое является ярлыком для нескольких объявлений параметров (см. следующий раздел).
Инструменты макета и внешнего вида
Последним элементом боковой панели Global Styles является макет Layout . На момент написания он включает только элемент управления padding .
Настройки макета в Twenty Twenty-Two In Twenty Twenty-Two , панель Layout активируется свойством настройки appearanceTools логическим значением, которое можно использовать для одновременного включения нескольких настроек:
{
"настройки": {
"appearanceTools": правда
}
}
"appearanceTools": true просто заменяет следующий блок объявлений:
{
'настройки': {
'граница': {
'цвет': правда,
'radius': истина,
'стиль': правда,
'width': истина
},
'цвет': {
'ссылка': правда
},
'spacing': {
'blockGap': правда,
'маржа': правда,
'заполнение': истина
},
'типография': {
'lineHeight': правда
}
}
}
Хорошо, теперь вы, надеюсь, понимаете, как настройки, объявленные в файле theme.json соответствуют соответствующим элементам управления глобальными стилями.
Еще не хватает одного фрагмента нашей головоломки, чтобы получить полное представление о новой теме WordPress по умолчанию: шаблоны блоков .
Двадцать двадцать два шаблона блоков
Можно сказать, что Twenty Twenty-Two — это в основном набор паттернов — и так оно и есть. В Twenty Twenty-Two вы найдете множество готовых к использованию шаблонов блоков, из которых вы можете выбирать, чтобы создавать удивительные и непредсказуемые структуры вложенных блоков для своих веб-страниц.
Ключевым термином здесь является расширение прав и возможностей пользователей . И это подходит, потому что с помощью шаблонов блоков вы можете создавать самые разные вещи, от привлекательного портфолио до одностраничного рекламного веб-сайта, даже если вы не знаете HTML или CSS!
А WordPress 5.9 вносит значительные улучшения в систему шаблонов с новым проводником шаблонов, инструментом, который позволяет просматривать шаблоны в полноэкранном модальном режиме.
Исследователь паттернов в Twenty Twenty-Two Новый инструмент также позволяет быстро и легко импортировать шаблоны блоков непосредственно из Каталога шаблонов. Это открывает новые возможности как для пользователей, так и для разработчиков WordPress, поэтому его использование, вероятно, значительно возрастет в будущем.
Каталог шаблонов WordPress Twenty Twenty-Two включает множество шаблонов (более 65) по пять категорий.
Двадцать двадцать две категории шаблонов Этот прочный набор шаблонов идеально сочетается с шаблонами и частями шаблонов, которые поставляются с новой темой по умолчанию, что делает редактирование поистине потрясающим.
Многослойные изображения с дуплексом 
Видео с заголовком и деталями 
Два изображения с текстом Если у вас еще не было возможности поэкспериментировать с блочными шаблонами, мы на простом примере покажем вам, почему они считаются такими мощными инструментами.
Предположим, вы хотите удалить нижний колонтитул по умолчанию из шаблонов указателя и отдельного сообщения и заменить его другим шаблоном блока Twenty Twenty-Two.
Запустите редактор сайта из меню Внешний вид или кнопки панели инструментов внешнего интерфейса WordPress, чтобы настроить шаблон индекса.
Нажмите кнопку Индекс чтобы отобразить раскрывающийся список заголовков со списком областей шаблона, доступных на странице. Нажмите кнопку с многоточием рядом с Нижний колонтитул а затем на Редактировать нижний колонтитул .
Инспектор шаблонов Как упоминалось выше, это запустит редактор изолированных частей шаблона.
Двадцать два нижнего колонтитула по умолчанию в редакторе изолированной части шаблона Теперь открыто устройство для вставки блоков и щелкните Patterns .
Запустите новый инструмент Pattern Explorer выберите категорию Двадцать два нижних колонтитула и выберите нужный нижний колонтитул.
Исследователь паттернов в Twenty Twenty-Two Теперь добавьте и отредактируйте блоки в соответствии со своими потребностями.
Редактирование нижнего колонтитула в редакторе изолированной части шаблона Сохранить заголовок и перепроверьте свой сайт, когда будете довольны внесенными изменениями.
На изображении ниже сравниваются три шаблона (Индекс, Одно сообщение и Одно сообщение без разделителей) с различными настройками верхнего и нижнего колонтитула:
Сравнение настроек верхнего и нижнего колонтитула в разных шаблонах Twenty-Two Расширение «двадцать двадцать два» с детской темой
Создание дочерней темы для темы блока сильно отличается от создания дочерней темы для классической темы.
Но когда вы хорошо понимаете структуру темы блока, вам не составит труда создать дочернюю тему для Twenty Twenty-Two или любой другой темы блока.
Итак, давайте разберемся, как настроить внешний вид вашего веб-сайта Twenty Twenty-Two.
1. Создание детской темы для "Двадцать двадцать два"
В каталоге / wp-content / themes создайте новую папку и назовите ее как хотите (в соответствии со стандартами разработки тем). В этом примере мы назвали папку дочерней темы Twentytwo-child .
Теперь вам нужен файл style.css . Откройте ваш любимый редактор кода и создайте следующую таблицу стилей:
/ *
Название темы: Двадцать двадцать два ребенка
URI темы: https://example.com/
Автор: Ваше имя
URI автора: https://example.com/
Описание: Дочерняя тема для TT2.
Требуется минимум: 5.8
Проверено до: 5.9
Требуется PHP: 5.6
Версия: 0.2
Лицензия: Стандартная общественная лицензия GNU v2 или новее.
URI лицензии: http://www.gnu.org/licenses/gpl-2.0.html
Текстовый домен: двадцать двадцать два ребенка
Шаблон: двадцать двадцать два
Теги: один столбец, настраиваемые цвета, настраиваемое меню, настраиваемый логотип, стиль редактора, избранные изображения, полное редактирование сайта, шаблоны блоков, поддержка языка RTL, прикрепленная публикация, цепочки комментариев
Тема Twenty Twenty-Two Child WordPress, (C) 2021 WordPress.org
Twenty Twenty-Two Child распространяется на условиях GNU GPL.
* /
Как всегда, вы можете редактировать поля в соответствии со своими потребностями.
Ваша дочерняя тема теперь доступна для предварительного просмотра. Вы можете активировать его на экране администратора Внешний вид> Темы .
2. Настройка глобальных настроек
Начиная с WordPress 5.9, дочерние темы с файлом theme.json наследуют настройки родительской темы. Если дочерний theme.json определяет набор стилей, то эти стили применяются поверх родительских стилей.
Таким образом, мы можем создать файл theme.json который будет включать только небольшой настраиваемый блок настроек и определений стилей, а не переопределять все наши исходные варианты.
Как объявить собственную цветовую палитру
При создании дочерней темы для Twenty Twenty-Two самая простая задача — заменить цветовую палитру. Все, что вам нужно сделать, это определить новую цветовую палитру в файле theme.json вашего ребенка, как показано ниже:
{
«версия»: 2,
"настройки": {
"цвет": {
«палитра»: [
{
"slug": "foreground",
"color": "#FFFFFF",
"name": "Foreground"
},
{
"slug": "background",
"color": "#001F29",
"name": "Background"
},
{
"slug": "primary",
"color": "#D6FDFF",
"name": "Primary"
},
{
"slug": "secondary",
"color": "#FDFCDC",
"name": "Secondary"
},
{
"slug": "tertiary",
"color": "#FED9B7",
"name": "Tertiary"
},
{
"slug": "accent",
"color": "#E94435",
"name": "Accent"
}
]
}
}
}
Сохраните файл и вернитесь в редактор сайта. Цветовая палитра, определенная выше, должна была заменить цветовую палитру Twenty Twenty-Two по умолчанию.
Цветовая палитра дочерней темы Цвета будут показаны на palette, а их имена должны соответствовать лучшим практикам и соглашениям об именах, обсуждаемым на Github.
Вы можете узнать больше о параметрах цвета theme.json в этом подробном обзоре Каролины Наймарк.
Как объявить пользовательские дуплексные фильтры
Вы также можете заменить двухцветные цвета по умолчанию на свой собственный набор фильтров.
Для этого просто добавьте следующий код в настройки вашего ребенка theme.json на том же уровне, что и свойство palette :
{
«версия»: 2,
"настройки": {
"цвет": {
«палитра»: [...],
"дуотон": [
{
"colors": [
"#001F29",
"#FFFFFF"
],
"slug": "фильтр по умолчанию",
"name": "Фильтр по умолчанию"
}
]
}
}
}
Save your file and check the result in the block editor. You should only see a single duotone filter.
A child theme duotone filter3. Customizing Block Styles
As we mentioned earlier, with WordPress 5.9, you can now customize theme.json settings and styles from the Global Styles interface.
Block styles can be customized from the Global Styles interface only if the block declares support for specific functionality in the corresponding block.json file. But you can override default block settings in your child theme’s theme.json.
Now suppose you want to override Post Title and Group block styles. All you need to do is define the styles you want to add or override, as shown below:
{
"version": 2,
"settings": {...},
"styles": {
"blocks": {
"core/post-title": {
"typography": {
"fontFamily": "Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif"
},
"color": {
"background": "var(--wp--preset--color--tertiary)"
},
"spacing": {
"padding": "var(--wp--custom--spacing--small)"
}
},
"core/group": {
"spacing": {
"margin": {
"top": "0",
"bottom": "0"
}
}
}
}
}
}In the example above, we changed the font family, background color, and padding values for core/post-titleas well as the top and bottom margins for core/group.
The image below shows the result as it would look on the public site:
A customized Post Title blockAnd that’s it for the review!
We won’t dive any deeper into child themes for now as it would go beyond the scope of this post. In the meanwhile, you’ll find more examples of Twenty Twenty-Two child themes on Github.
Summary
While taking a closer look at the new WordPress default theme Twenty Twenty-Two and its features (which make it the most flexible default theme ever released), we unveiled the new information architecture introduced with WordPress 5.9. We even got a sneak peek at the new Global Styles interface.
There are many exciting new features on the way, and it seems clear that the new editing environment is getting more robust, reliable, and functional over time.
While many new WordPress features are on the way, others are disappearing or decreasing in importance. Many users are left wondering what will happen to the Customizer and how to best maintain backward compatibility with existing themes.
However, you shouldn’t expect to suddenly leap from traditional themes to block themes in a single bound. We currently have four different types of themes to choose from:
- Block themes: Themes designed for FSE
- Universal themes: Themes that work with both the Customizer and the Site Editor
- Hybrid themes: Classic themes supporting FSE features like theme.json
- Classic themes: Themes with PHP templates, functions.php, etc.
So, fear not for now — there are still plenty of solutions to choose from if you don’t feel ready to switch to block themes yet.
And now it’s up to you! Are you ready to make the big leap and start using block themes right now? Share your thoughts with us in the comments below.
Save time, costs and maximize site performance with:
- Instant help from WordPress hosting experts, 24/7.
- Cloudflare Enterprise integration.
- Global audience reach with 29 data centers worldwide.
- Optimization with our built-in Application Performance Monitoring.
All of that and much more, in one plan with no long-term contracts, assisted migrations, and a 30-day-money-back-guarantee. Check out our plans or talk to sales to find the plan that’s right for you.
Загрузка...
