Gutenberg 12.5 представляет глобальные вариации стилей, сохраняет стили смежных кнопок и добавляет альфа-прозрачность в палитры цветов

Опубликовано: 2022-02-03

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

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

Вариации глобальных стилей

Авторы тем теперь могут создавать несколько вариантов theme.json и помещать их в папку /styles своей темы. Затем пользователи могут переключаться между различными пресетами на то, что им больше всего подходит.

Новая функция обещает стать одним из основных моментов выпуска WordPress 6.0, а тема Twenty Twenty-Two по умолчанию в конечном итоге будет иметь несколько собственных вариантов.

Я углубился в эту функцию более подробно в посте на прошлой неделе. Руководитель проекта Gutenberg Матиас Вентура подробно рассказал об этом в комментариях:

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

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

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

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

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

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

Новые кнопки сохраняют стиль соседних кнопок

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

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

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

Однако это не заведет нас так далеко, как нам нужно. Что произойдет, если вы решите изменить дизайн для каждой кнопки позже? У вас впереди много работы по изменению каждого из них. Есть открытый тикет на копирование одного стиля во все остальные в группе блоков Кнопки.

Пользователи могут добавлять прозрачные цвета

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

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

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

Опция размера рекомендуемого изображения публикации

Разместите блок Featured Image внутри блока Query Loop в редакторе. На боковой панели инспектора блоков выбирается раскрывающийся список «Размер изображения», в котором перечислены все доступные размеры.
Обрезанные изображения одинакового размера в блоке Query Loop.

В Gutenberg 12.5 представлена ​​новая опция, которая позволяет настроить блок Post Featured Image на использование размера изображения WordPress или темы. Это кажется тривиальным изменением, но это шаг вперед для тематики блоков.

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

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

Теперь, если бы мы могли использовать избранное изображение только внутри блоков «Обложка» и «Медиа и текст»…

Скопировать все содержимое редактора сайта

Редактор сайта WordPress с открытым меню параметров. Выбрана кнопка «Копировать все содержимое».
Копирование всего контента из редактора сайта.

Сегодня я узнал , что в меню опций редактора постов есть кнопка «Копировать весь контент». Я не знаю, как долго это было там, но это вроде опрятно. Я без нужды пытался выбрать весь контент — иногда с некоторым успехом — через холст контента. Даже те из нас, кто проводит почти каждый час бодрствования в редакторе, время от времени могут научиться новому трюку.

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

Просмотр кода в редакторе сайта

Редактор сайта WordPress с открытым окном редактирования кода.
Открытие редактора кода.

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

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