Управляйте дизайном блоков с помощью плагина EditorPlus WordPress

На прошлой неделе, когда я вносил последние правки в обзор его проекта Gutenberg Forms, Мунир Камаль готовился к запуску другого плагина WordPress для редактора блоков. Этот назывался EditorPlus, и он должен был создать систему дизайна для блоков. Камаль и его команда незаметно доработали версию 1.0 и через несколько дней выпустили плагин в репозиторий плагинов WordPress.

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

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

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

Как работает РедакторПлюс

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

• Граница
• Коробчатая тень
• Размеры
• Задний план
• Допуск
• Прокладка
• Радиус границы
• Дополнительно

В настоящее время эти вкладки будут отображаться только для основных блоков WordPress, а не для блоков сторонних плагинов. Помимо вкладки «Дополнительно», каждая вкладка соответствует своим аналогам в CSS. Вкладка «Дополнительно» предоставляет более продвинутый параметр «Отображение», который позволяет пользователям изменять display значение элемента обтекания блока в CSS. Этот вариант лучше оставить более продвинутым пользователям. Он также предоставляет вариант перехода, который будет хорошо работать со стилями наведения.

На каждой из вкладок параметров блока также есть загадочные кнопки «R» и «H». Кнопка «R» позволяет пользователям включать адаптивные параметры, что означает, что они могут изменять стили блоков в зависимости от экранов настольных компьютеров, планшетов и мобильных устройств. Кнопка «H» позволяет пользователям изменять дизайн в зависимости от состояния наведения мыши.

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

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

Есть несколько областей, которые могут оказаться проблематичными для некоторых пользователей, в зависимости от того, как их тема стилизует определенные блоки. Например, настройки ширины на вкладке «Размеры» могут не всегда работать. Некоторые темы добавляют к блокам максимальную ширину, что ограничивает общую ширину независимо от размера. Это можно отменить с помощью плагина, но Камаль решил не делать этого в версии 1.0.

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

Одна проблема, с которой я столкнулся с плагином, заключалась в том, что стили моей активной темы преобладали над стилями плагина в целом. Например, тема Twenty Twenty по умолчанию нацелена p.has-background в своем CSS для добавления пользовательского заполнения. Таким образом, он отменяет CSS плагина EditorPlus с более высокой специфичностью. Эта проблема была ожидаемой, и разработчик плагина добавил для нее решение в виде «важного» флажка для каждого варианта оформления. Если пользователь отметит этот флажок, он добавит !important к правилу стиля на выходе, что позволит ему отменить стили темы. Это не 100% надежное решение. Ваш пробег может варьироваться в зависимости от темы, но он должен работать для большинства случаев использования.

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

Последние мысли

Для выпуска версии 1.0 EditorPlus дал хороший старт. В своих тестах я нашел несколько недостатков. Любые проблемы для среднего пользователя, скорее всего, придут в виде конфликтов тем, и эти конфликты, скорее всего, будут связаны с темами, использующими высокую специфичность или !important в их CSS.

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

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