Gutenberg 9.8 добавляет закругленные границы к групповому блоку и перемещает холст редактора сайта во встроенный фрейм

Вчера был запущен Gutenberg 9.8 с небольшими улучшениями пользовательского интерфейса. Команда разработчиков добавила начальную реализацию для поддержки border-radius для блока Group, который авторы темы могут выбрать. Они также переместили редактор сайта в элемент iframe, чтобы удалить конфликты CSS из стилей глобального администратора.

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

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

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

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

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

В продолжение улучшений пользовательского интерфейса в Gutenberg 9.7 работа над вариантами блоков продолжается. Варианты – это когда один блок используется в качестве основы для создания нескольких вариантов одного и того же блока. Самый распространенный пример – блок Embed, у которого есть YouTube, Vimeo и другие варианты. До 9.7 эти варианты имели один и тот же общий значок, имя и описание в инспекторе блоков и навигации вместо информации, специфичной для варианта.

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

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

Загрузка холста редактора сайта в iframe

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

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

Автор ядра WordPress Элла ван Дурп перечислила преимущества перемещения холста в iframe:

• Не было бы админки CSS bleed вообще. Это то, с чем мы боролись с самого начала.
• Не было бы необходимости имитировать медиа-запросы, что, возможно, технически сложнее, чем использование iframe.
• Относительные единицы вроде (r)emи vw/ vhпросто работают.
• Для полноценного сайта таблицу стилей темы можно просто перетащить в редактор без каких-либо изменений. Я считаю, что это важно, так как это значительно облегчает жизнь авторам тем.
• Можно иметь один выбор для каждого окна, поэтому один в админке, а другой в контенте. Это полезно, например, для пользовательского интерфейса ссылки, где выбор в контенте может быть сохранен, в то время как выбор также находится в элементе ввода (для URL). Может быть полезно в других случаях.

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

Поддержка радиуса границы для группового блока

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

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

"core/group" : {
        "styles" : {
                "border" : {
                        "radius" : "50px"
                }
        }
}

Это позволит авторам темы установить радиус границы по умолчанию для группового блока. Однако он не передаст контроль пользователям. Для этого темам нужно будет добавить следующий фрагмент в settings раздел своего experimental-theme.json файла:

"border" : {
        "customRadius" : true
}

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