Что нового в WordPress 6.2: режим просмотра, книга стилей, улучшенные меню навигации, новые API и многое другое

Опубликовано: 2023-03-24

Выпуск WordPress 6.2 запланирован на 28 марта 2023 года , и пришло время нам изучить, что будет с первым выпуском 2023 года.

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

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

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

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

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

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

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

Обновленный интерфейс редактора сайта и режим просмотра

В WordPress 6.2 реализовано несколько улучшений интерфейса редактора. Первое и самое интересное обновление затрагивает интерфейс Редактора сайта. Благодаря новому режиму просмотра теперь проще перемещаться по шаблонам и частям шаблонов.

Изображение, показывающее интерфейс редактора сайта в WordPress 6.2.
Интерфейс редактора сайта в WordPress 6.2

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

Меню шаблонов редактора сайта в WordPress 6.2
Меню шаблонов редактора сайта в WordPress 6.2

По словам Райана Уэлчера, участника Wp Core and Documentation, «работа над этой функцией продолжается и будет продолжать улучшаться по мере выпуска новых версий Gutenberg».

Добавление нового шаблона в WordPress 6.2
Добавление нового шаблона в WordPress 6.2

Теперь рабочий процесс стал более плавным и плавным. Чтобы начать редактирование текущего шаблона/части шаблона, просто нажмите кнопку «Редактировать» в левом меню или на предварительном просмотре шаблона в середине страницы.

Нажмите на кнопку «Редактировать» или на предварительном просмотре шаблона, чтобы отредактировать шаблон.
Нажмите на кнопку «Редактировать» или на предварительном просмотре шаблона, чтобы отредактировать шаблон.

Режим без отвлекающих факторов

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

Включение режима без отвлекающих факторов
Включение режима без отвлекающих факторов

Вы можете активировать эту функцию на панели параметров, которая появляется, щелкнув значок с многоточием (три точки) в правом верхнем углу.

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

Инспектор блоков с вкладками

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

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

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

  • Представление в виде списка: включает элементы управления дочерними элементами блока, такими как подменю и ссылки в блоке навигации.
  • Настройки: включает настройки конфигурации, не связанные с внешним видом блока.
  • Внешний вид: включает настройки, относящиеся непосредственно к стилю текущего блока, такие как типографика и цвета.
Новая боковая панель настроек с вкладками для блока кнопок в WordPress 6.2.
Новая боковая панель настроек с вкладками для блока кнопок в WordPress 6.2.

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

Обратите внимание, что:

  • Новый Инспектор показывает вкладку, только если она содержит элементы для отображения.
  • Если вкладка «Настройки» содержит только панель «Дополнительно», она перемещается на вкладку «Внешний вид».
  • Если в Инспекторе блоков есть только одна вкладка, она отображается так, как это было до WordPress 6.2.

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

Раскрашенные части шаблона и многоразовые блоки

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

Раскрашенная часть шаблона в виде списка
Раскрашенная часть шаблона в виде списка

Это происходит как в редакторе сайта, так и в редакторе сообщений, как показано на изображении ниже.

Изображение, показывающее раскрашенный многоразовый блок в редакторе сообщений.
Цветной многоразовый блок в редакторе постов

Обновленный инструмент для вставки блоков

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

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

Предварительный просмотр шаблона в инструменте вставки блоков в WordPress 6.2
Предварительный просмотр шаблона в инструменте вставки блоков в WordPress 6.2

Когда на сайте есть медиафайлы, в средстве вставки блоков отображается вкладка «Медиа», чтобы упростить вставку медиафайлов в контент. Вы можете перетаскивать изображения/медиаданные или просто щелкнуть по медиафайлу, чтобы добавить его к содержимому.

Изображение, показывающее новый <strong><figcaptionwp-caption-text Вкладка «Медиа» в средстве вставки блоков» width = «1296» height = «1420» class = «size-full wp-image-148375»> Новая вкладка «Медиа» в средстве вставки блоков

Внутри вкладки кнопка «Открыть медиатеку» открывает доступ к библиотеке медиафайлов WordPress.

Интеграция Openverse в механизм вставки блоков

Openverse — это инструмент, предназначенный для публикации работ, находящихся под открытой лицензией или в общественном достоянии, для использования кем угодно. Теперь, в WordPress 6.2, Openverse интегрирован в средство вставки блоков.

Чтобы получить доступ к этой новой функции, щелкните вкладку «Медиа» в инструменте вставки блоков. Здесь показана панель с полем поиска и превью изображений, взятых непосредственно из репозитория Openverse.

Openverse теперь интегрирован в средство вставки блоков.
Openverse теперь интегрирован в средство вставки блоков.

Технические подробности см. в запросе на вытягивание интеграции Openverse.

Перенос виджетов в блочные темы

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

Давайте узнаем, как это работает.

Сначала создайте область виджетов в классической теме. Например, вы можете активировать Twenty-Eleven и добавить календарь в область нижнего колонтитула One.

Добавление виджета в Twenty Eleven
Добавление виджета в Twenty Eleven

Теперь измените тему на Twenty Twenty-Three. Откройте редактор сайта, выберите шаблон для редактирования и добавьте часть шаблона.

Добавление части шаблона в шаблон с темой Twenty Twenty-Three
Добавление части шаблона в шаблон с темой Twenty Twenty-Three

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

Импорт области виджетов в WordPress 6.2
Импорт области виджетов в WordPress 6.2

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

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

Сведения о документе и просмотр списка вместе

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

Всплывающее окно «Подробности» в WordPress 6.1
Всплывающее окно «Подробности» в WordPress 6.1

Начиная с WordPress 6.2, представление списка и сведения были перемещены на единую панель обзора документа , разделенную на две вкладки: представление списка и структура .

Новая панель обзора документов в WordPress 6.2
Новая панель обзора документов в WordPress 6.2

Это изменение должно упростить управление документом.

Расширенные возможности блока

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

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

Редактирование на основе списка для блока навигации

С выпуском WordPress 6.2 можно изменить расположение элементов блока навигации из представления списка на боковой панели настроек блока.

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

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

Боковая панель настроек ссылки на страницу
Боковая панель настроек ссылки на страницу

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

Заблокировать навигацию

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

Кроме того, выбранные параметры можно применить и к внутренним блокам (ссылки и подменю).

Блокировка навигации в WordPress 6.2
Блокировка навигации в WordPress 6.2

Добавить/удалить подписи на панели инструментов блока

Новая кнопка «Добавить/удалить заголовок» позволяет пользователям управлять заголовками с панели инструментов блока для нескольких блоков (аудио, видео, изображение).

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

Добавить/удалить подпись с панели инструментов блока
Добавить/удалить подпись с панели инструментов блока

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

Два улучшения касаются блока списка страниц.

Во-первых, блок «Список страниц» теперь можно развернуть, чтобы отобразить список страниц на панели «Список».

Блок расширенного списка страниц в представлении списка
Блок расширенного списка страниц в представлении списка

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

Установка родительской страницы для блока списка страниц
Установка родительской страницы для блока списка страниц

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

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

Заполнитель группового блока в WordPress 6.2
Заполнитель группового блока в WordPress 6.2

Поддержка липкого позиционирующего блока

WordPress 6.2 представляет новую функцию поддержки блока позиций, начиная с фиксированного позиционирования.

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

Разработчики тем могут включить фиксированное позиционирование в своих темах с помощью функции appearanceTools в файле theme.json . Если вам нужен более детальный контроль над инструментами внешнего вида, вы также можете установить для свойства settings.position.sticky значение true .

Вы можете включить фиксированное позиционирование на панели «Позиция» боковой панели управления «Инспектор».

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

При включенном фиксированном позиционировании HTML-тег получает класс is-position-sticky , и к соответствующему элементу применяются некоторые правила CSS:

 .wp-container-6 { top: calc(0px + var(--wp-admin--admin-bar--position-offset, 0px)); position: sticky; z-index: 10; }
Пример липкого позиционирования с темой Twenty Twenty-Three
Пример липкого позиционирования с темой Twenty Twenty-Three

Липкое позиционирование работает только для групповых блоков в корне документа . Хотя это может предотвратить путаницу и ошибки для пользователей, на данный момент встроенное фиксированное позиционирование может оказаться немного сложным (и вы можете проверить различные методы добавления фиксированного заголовка на свой веб-сайт WordPress). Однако, согласно примечанию разработчиков,

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

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

Дополнительные улучшения для редактирования блоков

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

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

    Элементы управления типографикой в ​​WordPress 6.1 и WordPress 6.2
    Элементы управления типографикой в ​​WordPress 6.1 и WordPress 6.2

  • Теперь можно изменить межбуквенный интервал блоков заголовков непосредственно в интерфейсе глобальных стилей.
  • Теперь вы можете установить цвет фона, ссылки и текста блока календаря.
  • Были введены две новые категории шаблонов блоков «Баннеры» и « Нижние колонтитулы », которые лучше отражают структуру веб-страниц.
  • Теперь можно автозаполнять ссылки в любом блоке с помощью ярлыка [[ . До этого изменения блоки должны были явно объявлять поддержку автодополнения ссылок с помощью __experimentalSlashInserter .
  • Новое сочетание 6 control + option + 1 позволяет преобразовать абзац в заголовок.
  • Блок «Список страниц» теперь поддерживает все параметры типографики, включая семейство шрифтов, размер шрифта, внешний вид, высоту строки, межбуквенный интервал, оформление и регистр букв.

    Настройки типографики блока списка страниц в WordPress 6.2
    Настройки типографики блока списка страниц в WordPress 6.2

Усовершенствованные инструменты проектирования

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

Книга стилей

WordPress 6.2 представляет новую функцию «Книга стилей», которая позволяет пользователям просматривать любой блок, который можно использовать на их веб-сайтах, без необходимости добавлять эти блоки в шаблон/часть шаблона. Вы можете запустить книгу стилей, нажав кнопку «Открыть книгу стилей» (значок глаза), которая теперь отображается в заголовке «Стили» в глобальных стилях.

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

Изображение, показывающее интерфейс книги стилей
Интерфейс книги стилей

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

С технической точки зрения новый интерфейс создается новым компонентом StyleBook , добавленным в @wordpress/edit-site для предварительного просмотра каждого зарегистрированного блока в iframe (см. также PR № 45960).

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

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

Разработчики могут скрыть блок от вставки и предварительного просмотра двумя способами. Во-первых, вы можете установить для supports.inserter значение false в block.json :

 { "supports": { "inserter": false } }

Еще один способ скрыть предварительный просмотр блока — избежать свойства example , которое используется для создания предварительного просмотра блока на панели справки Inspector (подробнее здесь).

Тени в глобальных стилях

В WordPress 6.2 теперь можно добавлять и настраивать тени для некоторых блоков с помощью Global Styles или theme.json (на момент написания этой статьи функция тени доступна только для блока Button).

Во-первых, в темах, поддерживающих эту функцию, вы можете добавлять тени из интерфейса Global Styles.

Чтобы увидеть его в действии, активируйте тему Twenty Twenty-Three, перейдите в «Стили » > «Блоки» > «Кнопка» и нажмите кнопку «Тень» .

Всплывающее окно «Тень» позволяет выбрать тень из предустановленных тем.

Установка тени в стили блока
Установка тени в стили блока

Разработчики тем и опытные пользователи также могут добавлять тень к блокам с помощью theme.json . Следующее определение добавляет к блокам кнопок черную тень размером 4 пикселя:

 "styles": { "blocks": { "core/button": { "shadow": "4px 4px #000000" } } },

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

 "settings": { "shadow": { "presets": [ { "shadow": "4px 4px #FF0000", "name": "Red", "slug": "red" }, { "shadow": "4px 4px #00FF00", "name": "Green", "slug": "green" }, { "shadow": "4px 4px #0000FF", "name": "Blue", "slug": "blue" } ] }, }

После определения ваши пресеты появляются на панели «Тень» в блоке «Стили».

Пользовательские пресеты теней в стилях блоков
Пользовательские пресеты теней в стилях блоков

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

 "styles": { "blocks": { "core/button": { "shadow": "var(--wp--preset--shadow--blue)" } } }

Новый элемент управления минимальной высотой

Начиная с WordPress 6.2, панель «Размеры» боковой панели настроек блока для блоков «Группа» и «Публиковать содержимое» теперь предоставляет новый элемент управления «Минимальная высота», включенный по умолчанию в темах, использующих функцию appearanceTools .

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

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

В сочетании с новыми инструментами вертикального выравнивания он также позволяет вертикально выравнивать внутренние элементы вверху/в центре/внизу страницы.

Разработчики могут добавить в темы поддержку минимальной высоты, добавив параметр minHeight в theme.json :

 { "settings": { dimensions: "minHeight": true } }

Вы также можете использовать свойство appearanceTools :

 { "settings": { "appearanceTools": true } }

Новое свойство minHeight также можно использовать для установки определенного значения непосредственно в theme.json :

 { "styles": { "blocks": { "core/post-content": { "dimensions": { "minHeight": "80vh" } } } } }

Разработчики блоков могут добавить свойство supports.dimensions.minHeight в свой файл block.json и установить для него значение true . Для статических блоков правило min-height CSS будет сохранено как встроенный стиль, а для динамических блоков оно будет включено в атрибут стиля, возвращаемый get_block_wrapper_attributes .

Пользовательский CSS на панели стилей

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

Дополнительный CSS блока на панели стилей блока
Дополнительный CSS блока на панели стилей блока

Пользовательские стили можно добавлять либо для каждого блока, либо на панели стилей блока, либо нажав кнопку «Дополнительные стили» на панели инструментов «Стили». Отобразится всплывающее меню с дополнительным элементом CSS .

Дополнительная текстовая область CSS в WordPress 6.2
Дополнительная текстовая область CSS в WordPress 6.2

Для поддержки пользовательского CSS в theme.json было добавлено новое свойство styles.css .

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

Вы также можете добавить пользовательский CSS для каждого блока в файле theme.json , используя свойство styles.blocks.block.css :

 "styles": { "blocks": { "core/button": { "css": "background: #FF0000" } } }

Вы также можете использовать & для вложенных элементов и псевдоселекторов.

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

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

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

Копирование стилей в WordPress 6.2
Копирование стилей в WordPress 6.2

Чтобы попробовать эту новую функцию, добавьте новый блок, например заголовок. Измените стиль и выберите «Копировать стили» в меню «Параметры» блока.

Разрешить Google Chrome видеть текст и изображения, скопированные в буфер обмена
Разрешить Google Chrome видеть текст и изображения, скопированные в буфер обмена

Затем выберите другой блок и выберите «Вставить стиль» . Скопированные стили будут автоматически применены ко второму блоку.

Вставка стилей в WordPress 6.2
Вставка стилей в WordPress 6.2

Обратите внимание, что эта функция доступна только на защищенных (https) сайтах в поддерживаемых браузерах. Дополнительные сведения см. в запросе на вытягивание.

Применение изменений блоков глобально

WordPress 6.2 также представляет кнопку «Применить глобально» под панелью «Дополнительно» для отдельных блоков, которая позволяет вам перенести изменения стиля блока в глобальные стили и применить эти изменения ко всему веб-сайту.

Кнопка «Применить стили блока глобально» в WordPress 6.2
Кнопка «Применить стили блока глобально» в WordPress 6.2

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

Улучшенный опыт проектирования с помощью визуализаторов интервалов

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

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

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

Визуализатор интервалов без панели инструментов блока
Визуализатор интервалов без панели инструментов блока

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

Изменения для разработчиков

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

Новый HTML-API

В WordPress 6.2 представлен обработчик тегов HTML, парсер, совместимый со спецификацией HTML5, который обеспечивает безопасный способ поиска определенных тегов HTML и добавления, удаления или обновления атрибутов с помощью PHP. Процессор тегов HTML — это первый компонент нового API обработки HTML.

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

В следующем примере мы просто добавляем атрибут alt к тегу img :

 $html = '<img src="/my-image.jpg" />'; $p = new WP_HTML_Tag_Processor( $html ); if ( $p->next_tag() ) { $p->set_attribute( 'alt', 'Hello WordPress 6.2' ); } echo $p->get_updated_html();

Этот код создаст следующий тег img :

 <img alt="Hello WordPress 6.2" src="/my-image.jpg">

Метод $p->next_tag() перемещает к следующему доступному тегу в HTML. Он также принимает имя тега, класс CSS или и то, и другое для поиска определенных тегов, как показано в примере выше.

Чтобы редактировать HTML-теги, сначала нужно выбрать целевой тег:

 $p->next_tag();

После того, как вы выбрали целевой тег, вы можете использовать методы API для выполнения нескольких операций:

  • $p->get_tag()
  • $p->set_attribute()
  • $p->get_attribute()
  • $p->remove_attribute()
  • $p->add_class()
  • $p->remove_class()

Вы можете установить атрибут стиля:

 $html = '<a href="https://example.com">example.com</a>'; $p = new WP_HTML_Tag_Processor( $html ); if ( $p->next_tag( 'a' ) ) { $p->set_attribute( 'style', 'text-decoration: wavy underline purple;' ); } echo $p->get_updated_html();

Вы также можете добавить или удалить класс или атрибут. В следующем коде мы добавляем пользовательский класс к тегу h1 :

 $html = '<div><h1>Page Title</h1></div>'; $p = new WP_HTML_Tag_Processor( $html ); if( $p->next_tag( 'h1' ) ) { $p->add_class( 'title' ); } echo $p->get_updated_html();

Затем вы можете повторить или вернуть обновленный тег, используя метод $p->get_updated_html() .

Чтобы поближе познакомиться с новым HTML API, ознакомьтесь с интерактивным руководством по PHP от Адама Зелински, коммитера WordPress Core.

API Patterns и новое свойство template_types

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

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

Хорхе Коста подчеркивает, что это обновление только для серверной части , и в настоящее время нет соответствующей функциональности UX. Однако мы можем ожидать увидеть улучшенные реализации этой функции в WordPress 6.3:

Первое использование, при мысли о WordPress 6.3, — показать пользователю некоторые шаблоны, которые имеют смысл в шаблоне, когда пользователь начинает создавать шаблон. Пользователи могут начать с шаблона вместо «пустого» или резервного шаблона.

С технической стороны функция register_block_pattern() была изменена, чтобы включить новый параметр template_types , который представляет собой массив строк, содержащих имена шаблонов, для которых предназначен шаблон блока.

API REST также был изменен, чтобы возвращать типы шаблонов шаблона блока, если хотя бы один из них был определен.

React v18.0 и режим параллелизма

WordPress 6.2 также включает новую версию библиотеки React, обновленную до версии 18.0. Новая версия поставляется с новыми API, функциями, улучшениями и исправлениями ошибок. Одной из основных функций, появившихся в React v18.0, является введение режима параллелизма, «нового скрытого механизма, который позволяет React одновременно готовить несколько версий вашего пользовательского интерфейса».

Одной из основных характеристик параллельного режима в React является то, что его можно прерывать:

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

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

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

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

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

  • В WordPress 6.2 представлен новый фильтр JavaScript, который можно использовать для фильтрации настроек блока перед отображением редактора на экране. Новый фильтр blockEditor.useSetting.before также позволяет разработчикам изменять настройки в зависимости от местоположения блока, текущей роли пользователя, соседних блоков и т. д. Дополнительную информацию и примеры использования см. в разделе Настройка параметров любого блока в WordPress 6.2.
  • Была введена новая поддержка skipBlockSupportAttributes для исключения атрибутов и стилей, связанных с поддержкой блоков в компоненте ServerSideRender .
  • Новый API theme.json теперь позволяет стилизовать существующие варианты основного блока из theme.json .
  • Шрифты Google теперь включены локально и не извлекаются из адресов Google в связанных темах от Twenty Twelve до Twenty Seventeen.

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

Краткое содержание

WordPress 6.2 приближает нас к завершению второй фазы проекта Gutenberg под названием Customization. Но, как отмечает Матиас Вентура, это не означает, что работа над кастомизацией завершена и появится в будущих версиях. Как всегда, мы можем ожидать дополнительных улучшений редактора на основе отзывов сообщества.

В этом посте мы рассмотрели некоторые основные функции, улучшения и исправления ошибок, появившиеся в WordPress 6.2. Но в 6.2 гораздо больше. С десятью версиями плагина Gutenberg в ядре — от 14.2 до 15.1 — мы увидим новый режим просмотра, инспектор блоков с вкладками, миграцию виджетов в блочные темы, новые API и множество улучшений и исправлений ошибок. Также будут улучшены доступность и интернационализация.

И если вы любите WordPress и хотите приобрести новые навыки разработки WordPress или протестировать и внести свой вклад в CMS, обязательно возьмите DevKinsta, полностью бесплатный локальный пакет разработки WordPress от Kinsta, для тест-драйва.

А теперь к вам: вы уже протестировали новую версию в своей среде разработки? Какие функции вам больше всего нравятся в WordPress 6.2? Поделитесь своими мыслями в разделе комментариев ниже.