Gutenberg 8.3 обновляет категории блоков, включает селектор родительских блоков и добавляет новые элементы управления дизайном

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

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

В Gutenberg 8.2 нажатие клавиши Enter в поле заголовка для блока изображения создавало новый абзац. В версии 8.3 эта функция была распространена на все блоки с подписями.

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

Новые категории блоков

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

• Текст
• Средства массовой информации
• Дизайн
• Виджеты
• Встраивает

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

Выберите родительский блок

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

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

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

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

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

Авторы тем теперь могут добавить поддержку экспериментального элемента управления отступами через add_theme_support( 'experimental-custom-spacing' ) . При поддержке конечный пользователь увидит новую вкладку «Интервал» на боковой панели параметров блока для блока «Обложка», которая должна быть доступна для других блоков в будущем. По умолчанию пользователи могут управлять отступами для всех четырех сторон блока с помощью одного значения. Они также могут «развязать» отступы и управлять верхним, нижним, левым и правым значениями по отдельности.

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

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

Я не против идеи. Я хочу, чтобы это было сделано прямо перед тем, как это появится в WordPress. Авторы тем должны иметь возможность регистрировать именованные классы, которые обрабатываются с помощью таблицы стилей. Это восходит к идее, что WordPress имеет структуру дизайна. Создайте набор служебных классов для интервалов (о, привет, Tailwind). Позвольте авторам темы определить интервал на основе их дизайна. Пусть пользователи выбирают из них. Затем предоставьте пользовательский вариант для тех случаев, когда пользователи хотят взять дело в свои руки. В этот момент они приняли явное решение отойти от процесса проектирования, который выбрал автор темы.

Цвета ссылок

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

Вот тут-то и появляются контролируемые пользователем цвета ссылок. Чтобы добавить поддержку пользовательских цветов ссылок, авторы тем должны включить эту функцию через add_theme_support( 'experimental-link-color' ) . Это добавит новый селектор цвета для блоков «Абзац», «Заголовок», «Группа», «Столбцы» и «Медиа и текст».

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

 a { color: var( --wp--style--color--link, #000 ); }

WordPress автоматически установит --wp--style--color--link . Для большей конкретики авторы тем также могут использовать .has-link-color a .