Что нового в WordPress 5.9 — полное редактирование сайта, глобальные стили, блоки, шаблоны, API, улучшения пользовательского интерфейса и многое другое.

WordPress 5.9 Жозефин уже здесь! Первоначально выпуск первой версии WordPress в этом году был запланирован на 14 декабря 2021 года. Из-за нескольких открытых проблем и нерешенных ошибок окончательный выпуск был отложен и наконец выпущен 25 января 2022 года.

Если вам интересно, что нового в WordPress 5.9, краткий ответ — Полное редактирование сайта (FSE).

И действительно, многие функции 5.9 доступны только в том случае, если вы используете тему, поддерживающую полное редактирование сайта, например новую тему по умолчанию Twenty Twenty-Two.

В WordPress 5.9 мы подошли к сути второго этапа дорожной карты Гутенберга: этапа настройки , который в основном сосредоточен на полнофункциональном редактировании сайта, шаблонах блоков, каталоге блоков и темах на основе блоков.

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

Эти слова Мэтта Малленвега из 2021 State of the Word лучше всего резюмируют ключевые особенности новой версии WordPress.

Тем не менее, что нового в первом выпуске WordPress 2022 года?

Давай выясним!

Глобальные стили: графический интерфейс для theme.json

С выпуском WordPress 5.8 в 2021 году манипулирование файлом theme.json стало стандартным способом для разработчиков тем настраивать параметры и стили редактора.

WordPress 5.9 выводит вещи на новый уровень, представляя графический интерфейс, который позволяет пользователям настраивать предустановки стилей для своих веб-сайтов глобально или на уровне блоков без написания единой строки кода.

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

Во-первых, интерфейс Global Styles заменяет Customizer и теперь является единственным способом настроить параметры и стили с темами блоков. Точно так же больше не понадобятся страницы администрирования сложных тем. Это обеспечивает новый стандартный способ настройки параметров и стилей темы и в то же время должен упростить рабочий процесс разработки темы.

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

В редакторе сайта теперь доступна новая боковая панель, в верхней части которой вы найдете небольшую панель предварительного просмотра и четыре компонента в следующем порядке:

• Типография
• Цвета
• Макет
• Блоки

Мы можем ожидать, что со временем будут добавлены новые компоненты.

Рассмотрим подробнее новый интерфейс.

Это здесь! Все, что вам нужно знать о WordPress 5.9, в одном мегапосте Click to Tweet
[СТА]

Предварительный просмотр стиля

Первый элемент боковой панели «Глобальные стили» — это панель предварительного просмотра. Эта панель позволяет вам проверить результат ваших настроек и особенно полезна, когда ваши изменения применяются к элементам, которые не отображаются на холсте редактора сайта.

На следующем изображении показано сравнение трех различных комбинаций стилей:

Типография

Панель «Типографика» — это место, где вы управляете типографикой своего веб-сайта. Конечно, элементы управления, доступные на этой панели, зависят от настроек вашего theme.json .

Например, тема Twenty Twenty-One Blocks (TT1 Blocks) объявляет следующие свойства типографики:

 "settings": { "typography": { "customLineHeight": true, "fontSizes": [], "fontFamilies": [] } }

На следующем изображении показаны результирующие настройки типографики на боковой панели «Глобальные стили»:

Давайте углубимся и посмотрим, как тема TT1 Blocks объявляет fontFamilies :

 "fontFamilies": [ { "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif", "slug": "system-font", "name": "System Font" }, { "fontFamily": "Helvetica Neue, Helvetica, Arial, sans-serif", "slug": "helvetica-arial" }, { "fontFamily": "Geneva, Tahoma, Verdana, sans-serif", "slug": "geneva-verdana" }, { "fontFamily": "Cambria, Georgia, serif", "slug": "cambria-georgia" }, { "fontFamily": "Hoefler Text, Baskerville Old Face, Garamond, Times New Roman, serif", "slug": "hoefler-times-new-roman" } ]

Вы можете проверить эти семейства шрифтов на панели предварительного просмотра глобальных стилей:

Цвета

В разделе «Цвета» вы можете просматривать и редактировать цветовые палитры, а также настраивать цвет некоторых элементов сайта.

Нажав на эти элементы, вы получите доступ к новой панели, где вы можете выбрать цвета из трех цветовых палитр: основная, тематическая и пользовательская палитра (подробнее см. в разделе «Цвета по умолчанию», «Цвета темы» и «Пользовательские цвета»).

На этой панели вы сможете установить и изменить цвет текущего элемента.

Макет

Последняя группа инструментов предназначена для настройки макета. В глобальном контексте это ограничено контейнером сайта.

Блоки

С внедрением механизма глобальных стилей теперь также можно изменить внешний вид определенных блоков, таких как «Абзац» (типографика и цвета), «Кнопки» (макет) и «Столбец» (цвета и макет).

Обратите внимание, что стили блоков можно настраивать в интерфейсе глобальных стилей только в том случае, если в блоке объявлена ​​поддержка определенных функций в соответствующем файле block.json . Например, core/post-title в настоящее время поддерживает следующие стили:

 "supports": { "align": [ "wide", "full" ], "html": false, "color": { "gradients": true, "link": true }, "spacing": { "margin": true }, "typography": { "fontSize": true, "lineHeight": true, "__experimentalFontFamily": true, "__experimentalFontWeight": true, "__experimentalFontStyle": true, "__experimentalTextTransform": true, "__experimentalLetterSpacing": true, "__experimentalDefaultControls": { "fontSize": true, "fontAppearance": true, "textTransform": true } } },

Так как core/post-title поддерживает цвета, интервалы и типографику, вы найдете соответствующие записи в настройках глобальных стилей блока заголовка поста.

На следующем изображении показаны настройки типографики, которые вы можете легко сравнить с приведенным выше кодом:

Стоит отметить, что WordPress 5.9 предоставляет только первую реализацию интерфейса Global Styles. Как отмечает Матиас Вентура, мы можем с полным основанием ожидать дальнейшего развития новой функции управления стилем:

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

Так что вскоре мы можем увидеть серьезные улучшения. Изображение ниже является лишь примером того, что мы можем ожидать:

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

На прошлой неделе я встроил несколько вариаций цвета и шрифта Twenty Twenty-Two в суперпростые дочерние темы. Они действительно легкие, и мне нравится идея предлагать людям совершенно другой сайт одним щелчком мыши. https://t.co/dItIkvvhK9 pic.twitter.com/rB4CcTfW0A

– Кьеллр (@kjellr) 15 ноября 2021 г.

Разработчики могут глубже изучить глобальный механизм стилей в статье поддержки Глобальные настройки и стили (theme.json). Вы найдете дополнительные примеры в нашем введении к теме по умолчанию Twenty Twenty-Two.

Блок навигации

Блок навигации был назван «одним из самых эффективных тематических блоков», и мы не боимся сказать, что согласны.

Блокировка некоторое время находилась в зачаточном состоянии (см. также Проблема с отслеживанием блока навигации и Проблема с отслеживанием i2). Тем не менее, теперь, когда все нерешенные проблемы и блокировщики, перечисленные в списке обязательных элементов WordPress 5.9, устранены, мы наконец-то можем начать использовать одну из самых мощных функций, объединенных в ядро ​​WordPress 5.9.
[СТА]

Краткий обзор интерфейса блока навигации

Поначалу использование нового блока может показаться немного запутанным, но как только вы освоите его, вы оцените весь его потенциал.

Когда вы впервые добавляете блок навигации, заполнитель блока предоставляет три варианта выбора существующего меню на основе блоков, создания меню со всеми страницами или создания нового меню с пустым.

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

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

Вы можете добавить блок навигации в любое место на своих страницах. Например, в длинных статьях может быть полезно создать оглавление, позволяющее пользователям переходить к определенным разделам контента.

Новые навигационные ссылки мгновенно добавляются в блок навигации, если щелкнуть значок плюса ( + ) с правой стороны (см. также примечания к выпуску Gutenberg 11.7), если в меню еще не добавлены другие типы блоков.

Щелчок по кнопке « Редактировать » на панели инструментов блока «Ссылка для навигации» преобразует пункт меню в настраиваемую ссылку. Это позволяет добавлять, редактировать, изменять порядок и удалять элементы по отдельности.

Вы также можете преобразовать ссылки в блоки, нажав кнопку « Преобразовать » на панели инструментов блока. Это позволяет добавлять определенные блоки непосредственно в меню навигации.

Блоки Custom Link, Spacer, Logo Site, Home Link, Social Icons и Search теперь доступны пользователям при добавлении блоков в меню навигации.

На боковой панели «Настройки» вы найдете полный набор параметров для управления несколькими аспектами меню навигации.

Панель «Макет» содержит элементы управления для выравнивания, ориентации и переноса.

В блоке навигации также есть улучшенная панель настроек дисплея с опцией для постоянно включенного меню бургеров.

Вы также можете настроить цвет текста и фона для меню и подменю.

Другим полезным дополнением, недавно добавленным в блок навигации, является поддержка промежутка между блоками, которая позволяет пользователям контролировать расстояние между элементами меню.

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

Навигационный блок: под капотом

Данные блока навигации хранятся в базе данных с использованием специального типа wp_navigation .

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

Допустим, вы создали меню навигации, состоящее из двух настраиваемых ссылок и окна поиска. С установленной темой Twenty Twenty-Two меню может выглядеть так, как показано на следующем рисунке:

Приведенный выше блок навигации хранится в базе данных как тип wp_navigation следующим образом:

 <!-- wp:navigation-link {"label":"Contacts","type":"page","id":7,"url":"http://wordpress-59.local/?page_id=7","kind":"post-type","isTopLevelLink":true} /--> <!-- wp:navigation-link {"label":"About Us","type":"page","id":10,"url":"http://wordpress-59.local/?page_id=10","kind":"post-type","isTopLevelLink":true} /--> <!-- wp:search {"showLabel":false,"placeholder":"Search the site","buttonPosition":"button-inside","buttonUseIcon":true} /-->

Сохранение содержимого блока навигации в базе данных позволяет пользователям использовать одни и те же меню навигации в разных темах блоков. Если меню не видно сразу, просто выберите нужное меню навигации в селекторе меню (см. также проблему № 36087 и PR № 36178).

На следующем изображении показано вышеуказанное меню с темой Twenty Twenty-One Blocks:

Блок навигации прошел несколько итераций. Вы можете глубже изучить каждую реализацию в примечаниях к выпуску Gutenberg 11.7, 11.8 и 11.9.

Вы также можете узнать больше о навигационном блоке в новых заметках разработчика о навигационном блоке и статье о поддержке навигационного блока.
[СТА]

Галереи изображений, избранные изображения и значки сайтов

Стремясь сделать изображения более согласованными в разных контекстах, WordPress 5.9 предоставляет новые функции и улучшения для нескольких блоков. Блок «Галерея» был полностью переработан, а различные изменения в блоках «Избранное изображение» и «Значок сайта» дают пользователям более детальный контроль над соответствующими изображениями.

Рефакторинг блока галереи

В WordPress 5.8 возможность настраивать внешний вид изображений в галереях была несколько ограничена. Не было возможности изменить стиль изображения или применить двухцветный фильтр.

Кроме того, в изображениях галереи отсутствовали важные функции, такие как добавление настраиваемых ссылок на отдельные изображения в галерее.

Чтобы лучше понять причину этой асимметрии между изображениями в двух разных контекстах одного изображения и изображения в галерее, давайте взглянем на блок «Галерея» в представлении «Код» в WordPress 5.8:

Обратите внимание, что сведения об изображении хранятся только в разделителе блока Галерея (см. также Что такое блок Гутенберга?).

Это заставило отдельные изображения вести себя иначе, чем изображения в галереях.

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

В WordPress 5.9 изображения галереи вложены друг в друга с помощью основных API innerBlocks , и каждое изображение хранит свой собственный набор деталей, точно так же, как отдельные изображения.

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

С новым блоком «Галерея» вы сможете индивидуально стилизовать изображения. Это предоставляет широкий спектр возможностей настройки.

На изображении ниже показано несколько изображений в галерее, у каждого из которых углы закруглены по-разному:

Вы также можете использовать разные двухцветные фильтры для разных изображений в одной галерее.

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

Для более подробного ознакомления с новым блоком «Галерея» см. также Заметки для разработчиков по рефакторингу блока «Галерея», Предстоящие улучшения блока «Галерея» и примечания к выпуску Gutenberg 11.4.

Улучшения избранного изображения

Несколько улучшений также были внесены в блок Featured Image.

Основные размеры

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

Управление размерами также применяется к избранным изображениям в блоках цикла запросов, как показано на следующем рисунке:

Двухцветные фильтры на избранных изображениях

Выше мы упоминали, что теперь мы можем применять двухцветный фильтр к изображениям, помещенным в новый рефакторинговый блок «Галерея».

Теперь, начиная с WordPress 5.9, двухцветные фильтры также доступны в блоках Featured Image в любом контексте, от шаблонов записей и страниц до блоков цикла запросов.

Эта функция открывает двери для творческих и последовательных цветовых комбинаций по всему сайту.

Обрезка изображения в логотипе сайта

До WordPress 5.9 (и Gutenberg 11.6) изображения логотипа можно было редактировать только перед загрузкой. В WordPress 5.9 вы можете обрезать, масштабировать и поворачивать изображения, используемые в блоке логотипа сайта, непосредственно с панели инструментов блока.

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

Одиннадцать версий Gutenberg объединены в ядро ​​с WordPress 5.9, предоставляя так много функций, улучшений и исправлений ошибок, что было бы невозможно охватить их все в одной статье.

Поэтому мы выбрали некоторые из тех, которые нам показались наиболее достойными внимания. Для более глубокого обзора этих функций и улучшений вы также можете проверить сообщения о выпуске Gutenberg 10.8, 10.9, 11.0, 11.1, 11.2, 11.3, 11.4, 11.5, 11.6, 11.7, 11.8 и 11.9.

С учетом сказанного, в этом разделе будут рассмотрены следующие изменения:

Граница поддерживает пользовательский интерфейс

Начиная с WordPress 5.9, когда в файле theme.json объявляются настройки border , а в блоке объявляется поддержка границ через API Block Supports, новая панель настроек предоставляет элементы управления для радиуса границы, ширины, стиля, цвета и единиц измерения (см. также Gutenberg 11.1). .

Основной блок Group — хороший пример этого полезного усовершенствования пользовательского интерфейса. Файл block.json блока Group теперь включает следующие объявления supports :

 { ... "supports": { "align": [ "wide", "full" ], "anchor": true, "html": false, "color": { "gradients": true, "link": true }, "spacing": { "padding": true, "__experimentalDefaultControls": { "padding": true } }, "__experimentalBorder": { "color": true, "radius": true, "style": true, "width": true, "__experimentalDefaultControls": { "color": true, "radius": true, "style": true, "width": true } }, ... }, ... }

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

В новом посте или на странице создайте новый блок группы и выберите его. Вы увидите панель « Граница » на боковой панели настроек блока. Измените ширину и стиль границы по мере необходимости и наслаждайтесь результатом.

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

 { "version": 1, "settings": { "border": { "customColor": true, "customRadius": true, "customStyle": true, "customWidth": true } } }

Сохраните файл и вернитесь в панель управления WordPress. В новом посте или на странице создайте новый блок группы и выберите его. Теперь вы должны увидеть панель «Граница» на боковой панели настроек блока (см. также этот экспериментальный файл theme.json).

Улучшения представления списка

В WordPress 5.9 представление списка было улучшено и теперь поддерживает перетаскивание, сворачиваемые разделы и привязки HTML.

Перетаскивание в виде списка

Как упоминалось в запросе на вытягивание № 33320, перетаскивание было реализовано в представлении списка, но было отключено из-за проблем с производительностью.

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

Сворачиваемые разделы представления списка

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

Вы также можете разворачивать и сворачивать разделы представления списка, используя стрелки влево и вправо.

Привязки HTML к элементам представления списка

Еще одним полезным усовершенствованием является возможность добавлять привязки HTML к блокам в представлении списка и просматривать их с первого взгляда.

Контроль интервалов между блоками

Впервые представленный в Gutenberg 11.4 и теперь интегрированный в ядро ​​​​WordPress 5.9, новый элемент управления «Интервал между блоками» позволяет вам устанавливать пользовательское расстояние между элементами внутри блока. Ниже вы можете увидеть предварительный просмотр с различными значениями интервала между блоками в блоке Columns с темой Twenty Twenty-Two по умолчанию:

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

Темы должны включать Gap Spacing в файле theme.json с помощью нового свойства AppearanceTools . Вы можете узнать больше об инструментах внешнего вида в нашем подробном обзоре Twenty Twenty-Two. См. также запросы на вытягивание #33991 и #34630.

Расширенный предварительный просмотр URL для управления ссылками

Используя преимущество новой конечной точки REST url-details, элемент управления Link теперь предоставляет расширенный предварительный просмотр URL-адреса, показывающий сведения о целевом ресурсе ссылки.

В своей первой реализации эта функция была доступна только в компоненте форматированного текста Post Editor. На момент написания этой статьи он также доступен в редакторе сайта, но не в редакторах навигации и виджетов.

Создание страниц из всплывающего окна со ссылкой

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

Улучшения в блоке поиска

В блоке поиска теперь отображаются кнопки и настройки цвета рамки.

Теперь вы также можете настроить цвет фона и текста, а также цвет и радиус границы.

Новые элементы управления размерами блока

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

Разработчики блоков найдут компонент <DimensionControl /> задокументированным на GitHub, но обратите внимание, что он по-прежнему помечен как экспериментальная функция и на момент написания этой статьи может подвергаться критическим изменениям.

На экран виджетов добавлен новый блок группы виджетов

В блочном редакторе виджетов теперь доступен новый блок «Группа виджетов». Последний блок позволяет добавить группу блоков в виджет с заголовком в редакторе виджетов и настройщике классических тем.

Вы можете прочитать больше о редакторе виджетов в редакторе блочных виджетов и блочных виджетах в настройщике.

Flex Layout и новый блок строк

Первоначально представленная как экспериментальная функция в Gutenberg 11.2, гибкий макет был расширен до нескольких блоков, включая социальные ссылки и групповые блоки.

Некоторые блоки, такие как блок «Социальные ссылки», теперь предоставляют набор элементов управления панели инструментов и параметров боковой панели, которые позволяют настраивать гибкий макет.

Эта же функциональность доступна в блоке навигации и блоке строк, новом варианте блока группы, представленном в Gutenberg 11.5.

На следующем изображении показан блок Row с элементами управления макетом на боковой панели настроек:

Ниже вы можете увидеть один и тот же блок Row в интерфейсе и в инструменте инспектора Chrome.

Усовершенствования массива блоков

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

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

Итак, что нового в шаблонах блоков в WordPress 5.9?

Избранные узоры из каталога узоров

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

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

Новый полноэкранный обозреватель паттернов

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

Новая кнопка « Исследовать» теперь открывает полноэкранное модальное окно, которое позволяет пользователям просматривать, искать и вставлять шаблоны блоков всего за несколько кликов. Результатом является улучшенный пользовательский опыт.

Вы также найдете дополнительные примечания и несколько примеров шаблонов блоков в нашем глубоком погружении в тему Twenty Twenty-Two WordPress.

Если вам интересно и вы хотите узнать больше, послушайте подкаст Джозефы Хейден Чомфоси, эпизоды 16 и 21, и посмотрите видео на YouTube «Изучаем WordPress 5.9» от Энн Маккарти.

Тема Twenty Twenty Two и темы блоков WordPress

С WordPress 5.9 вам больше не нужно устанавливать плагин Gutenberg, чтобы включить полное редактирование сайта на вашем веб-сайте WordPress. Вам просто нужно разрешить блочной теме использовать все функции FSE.

Кроме того, WordPress 5.9 был связан с совершенно новой темой по умолчанию, Twenty Twenty-Two, и это меняет правила игры, поскольку Twenty Twenty-Two — первая блочная тема по умолчанию.

Twenty Twenty-Two — очень гибкая и настраиваемая тема. Он представляет собой идеальную песочницу, чтобы опробовать новый процесс редактирования шаблонов, новые блоки, улучшения интерфейса и все функции редактирования сайта, добавленные в ядро, начиная с WordPress 5.9.

Как упоминалось выше, все, что вам нужно сделать, это установить и активировать блочную тему, такую ​​как Twenty Twenty-Two. Как только тема станет активной, в административном меню панели управления WordPress появится новый пункт меню « Редактор (бета) ».

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

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

Итак, начиная с WordPress 5.9, точка доступа к Customizer больше не доступна в меню администратора, когда тема блока активна (если вы не используете плагин, который ее использует).

Если вы все еще привязаны к традиционным темам и беспокоитесь об обратной совместимости, успокойтесь: вы можете продолжать использовать свою тему.

В настоящее время у вас есть четыре различные категории тем на выбор:

• Блокировать темы : Темы, разработанные для FSE
• Универсальные темы : темы, которые работают как с настройщиком, так и с редактором сайта.
• Гибридные темы : классические темы, поддерживающие функции FSE, такие как theme.json.
• Классические темы : Темы с шаблонами PHP, functions.php и т.д.

Из-за влияния, которое блочные темы, вероятно, окажут на экосистему WordPress, у нас есть целая статья, посвященная блочным темам Twenty Twenty-Two и WordPress. Обязательно ознакомьтесь с более подробным обзором.

Улучшения производительности

Здесь, в Kinsta, мы одержимы скоростью веб-сайта. Вот почему мы рады улучшениям производительности в WordPress 5.9.

Эти улучшения коснутся нескольких областей CMS, от редактора блоков до тем блоков, отложенной загрузки и многого другого. Давайте погрузимся.

Усовершенствования средства вставки блоков

Начиная с WordPress 5.9, типы блоков, шаблоны и категории лениво отображаются в средстве вставки блоков. Браузер сначала загружает контент с более высоким приоритетом, предоставляя пользователю более плавный процесс редактирования и повышенную производительность.

Дальнейшие заметные улучшения производительности в контексте редактора блоков затрагивают повторно используемые блоки и представление списка.

Меньше загрузки CSS

Что касается внешнего интерфейса, WordPress 5.9 резко сократил объем CSS, загружаемого блочными темами, что привело к значительному ускорению загрузки страниц.

Основное улучшение, которое следует отметить в этом контексте, — введение механизма настроек и стилей theme.json , который не позволяет темам использовать массивные таблицы стилей, включая сотни объявлений CSS. Объем кода CSS, используемого темой, теперь сокращен до нескольких пользовательских свойств CSS, которые может повторно использовать любой тип блока.

Улучшения производительности ленивой загрузки

Ленивая загрузка изображений была впервые представлена ​​в WordPress 5.5. Начиная с WordPress 5.7, функция ленивой загрузки была распространена на iframe, что позволило владельцам сайтов создавать более быстрые веб-сайты и улучшать их SEO.

Так или иначе, после анализа Largest Contentful Paint (LCP) выяснилось, что присвоение атрибута loading="lazy" всем изображениям и фреймам на странице приводит к небольшому снижению производительности.

Простой пропуск атрибута loading="lazy" не был решением, потому что это привело бы к потере очевидных преимуществ отложенной загрузки.

Оптимальным решением было бы опустить атрибут loading="lazy" только для изображений, появляющихся в верхней части страницы. Однако, поскольку атрибут loading="lazy" назначается на стороне сервера, WordPress не может точно определить, какие изображения отображаются в верхней части страницы. Это то, что в основном зависит от активной темы.

Теперь, в качестве компромиссного решения, начиная с WordPress 5.9, атрибут loading="lazy" не применяется к первому изображению контента или iframe. Анализ, проведенный на 50 популярных темах WordPress, показал, что это решение приводит к значительному повышению производительности и загрузке страниц на 30% быстрее.

Феликс Арнц объясняет, как это работает:

… чтобы повысить производительность «из коробки», не требуя от разработчика настройки поведения, WordPress теперь пропускает самое первое «изображение контента или iframe» на странице из-за ленивой загрузки. Термин «изображение контента или iframe» здесь обозначает любое изображение или iframe, найденное в содержимом любого сообщения в текущем цикле основного запроса, а также любое избранное изображение такого сообщения. Это относится как к «единичному», так и к «архивному» контенту: в «единичном» контексте первое изображение или iframe (единственного) поста не загружается отложенной загрузкой, в то время как в «архивном» контексте первое изображение или iframe первый пост в запросе не загружается отложенно.

Разработчики тем теперь могут использовать новый фильтр wp_omit_loading_attr_threshold , чтобы изменить количество изображений/iframe, которые будут пропущены при отложенной загрузке.

Несколько таблиц стилей на блок

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

По словам Ари Статопулоса:

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

Дополнительные возможности для разработчиков

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

Новый атрибут блокировки блоков

Разработчики блоков теперь могут запретить пользователям перемещать или удалять отдельные блоки, добавляя атрибут lock в настройки блока:

 { ... "attributes": { "lock": { "type": "object", "default": { "move": true, "remove": true } } } }

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

Определение атрибута lock , как показано в приведенном выше коде, скрывает средства перемещения блоков и элементы управления « Переместить в» и « Удалить » на панели инструментов блока. На изображении ниже показан окончательный результат на экране:

Вы также можете заблокировать определенный блок в шаблоне блока. См. также пример блокировки блоков в WordPress 5.9.

Новый API для доступа к глобальным настройкам и стилям

WordPress 5.9 представляет новый общедоступный API PHP для чтения данных из theme.json .

Чтение настроек и стилей из theme.json

Есть две новые функции для чтения данных из разделов settings и styles объявленных в theme.json :

 wp_get_global_settings( $path = array() , $context = array() ); wp_get_global_styles( $path = array(), $context = array() );

• $path — это массив, в котором указан путь к указанному параметру.
• $context — это массив, устанавливающий контекст для этих данных. Разработчики могут читать из определенного раздела настроек блока — например, array( 'block_name' => 'core/paragraph' ) . orygin , установленный на base , позволяет игнорировать пользовательские данные, сохраненные пользователем.

Следующий пример кода вернет значение параметра contentSize . В Twenty Twenty-Two это будет 650px :

 wp_get_global_settings( array( 'layout', 'contentSize' ) );

Установив контекст, вы можете получить стили для определенных блоков. В следующем коде показано, как получить значение радиуса границы для блока core/button :

 function get_global_styles() { return wp_get_global_styles( array( 'border', 'radius' ), array( 'block_name' => 'core/button' ) ); }

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

Чтобы игнорировать пользовательские данные, вы должны использовать следующий код:

 function get_global_styles() { return wp_get_global_styles( array( 'border', 'radius' ), array( 'block_name' => 'core/button', 'origin' => 'base' ) ); }

Получение сгенерированной таблицы стилей

WordPress 5.9 также представляет новую функцию для получения таблицы стилей, полученной из стилей по умолчанию, темы и пользовательских стилей:

 wp_get_global_stylesheet( $types = array() );

$types — это список стилей для генерации.

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

Дополнительные возможности для разработчиков

Дополнительные изменения WordPress 5.9 для разработчиков, о которых вы, возможно, захотите узнать, включают:

• Блочные темы — новый способ создания тем в WordPress 5.9.
• Обновления для настроек, стилей и theme.json
• Тематические изменения и фильтры в WordPress 5.9
• Новые запросы возможностей в WordPress 5.9
• Разное Основные изменения в WordPress 5.9
• Различные изменения редактора блоков в WordPress 5.9
• Получите больший контроль над внутренними областями блока (как разработчик блока)

Ваш полный путеводитель по WordPress 5.9: от улучшений пользовательского интерфейса до глобальных стилей (и многого другого!) Click to Tweet

Резюме

Мы завершим эту статью краткой заметкой о доле рынка WordPress. В настоящее время WordPress поддерживает более 65% всех веб-сайтов, чья система управления контентом известна, и находится к северу от 43% всех веб-сайтов .

Эти цифры впечатляют, особенно по сравнению с ближайшими конкурентами с долей рынка менее 5%, такими как Shopify.

И это также означает, что вы не можете упускать из виду эволюцию WP CMS. Каждая новая версия WordPress приносит новые функции, улучшения интерфейса, улучшения производительности, и WordPress 5.9 не является исключением. Все, что вам нужно для тестирования новых функций, — это блочная тема, такая как новая тема Twenty Twenty-Two по умолчанию, и вы будете готовы к работе.

Теперь к вам! Готовы ли вы переключиться на блочные темы и FSE? И какие ваши любимые изменения в WordPress 5.9?