Создание дизайна веб-страницы и идеальное выравнивание каждого элемента может оказаться сложной задачей. Даже многие разработчики полагаются на фреймворки CSS-сетки. Конечно, с появлением систем flexbox и grid в языке CSS в таких фреймворках нет необходимости. Будь то уменьшение вертикального и горизонтального ритма или просто выравнивание изображения рядом с фрагментом текста, макеты страниц часто лучше всего делать с помощью какой-то системы сеток.
Это становится еще более очевидным при создании макета страницы визуально через редактор блоков WordPress. Текущая версия редактора отлично справляется с ролью редактора общего содержимого, обеспечивая при этом возможность вставки различных элементов на страницу.
Однако это ни в коем случае не конструктор страниц – пока .
Прежде чем мы займемся редактированием всего сайта, глобальными стилями, шаблонами блоков и другими предстоящими инструментами, возникает вопрос, должна ли система сеток быть частью уравнения. Если да, то как должна работать эта система? Будет ли это настраиваться авторами темы? Как он будет обрабатывать просмотры на планшетах и мобильных устройствах? Будет ли сетка видна пользователям или что-то скрытое на заднем плане?
По мере выпуска новых блочных плагинов, особенно тех, которые могут иметь несколько элементов, которые могут нуждаться в согласовании, возможно, пришло время рассмотреть систему сеток. Такая система может принести пользу существующим базовым блокам прямо сейчас, таким как Columns и Media & Text. Или может быть лучше в виде отдельного автономного блока.
Включение системы сеток также дает дополнительное преимущество стандартизации имен классов, связанных с макетом, которые авторы тем могут использовать в своих CSS, даже вне редактора содержимого. Это обеспечит лучшую совместимость по всем направлениям, когда пользователи неизбежно меняют темы.
Отправная точка: блок сетки макета
Компания Automattic в рамках своего проекта Block Experiments выпустила плагин Layout Grid Block . По сути, это улучшенная версия основного блока Columns. Основное отличие заключается в том, что выравнивание столбца привязано к определенной точке сетки. Эта сетка также отображается в фоновом режиме при редактировании сообщения.
Сложность сеток заключается не в простом выравнивании столбцов на рабочем столе. Он касается того, как эти столбцы трансформируются на небольших устройствах, таких как планшеты и смартфоны. Иногда это игра в угадывание с точки зрения дизайна темы, потому что автор темы не осведомлен о реальном содержании, которое необходимо согласовать. В свою очередь дизайнеры принимают верные решения и надеются, что это сработает в большинстве случаев.
В блоке Layout Grid есть вкладка «Адаптивные точки останова» под панелью параметров блока, которая позволяет пользователям настраивать это в зависимости от устройства. Пользователи могут решить, как отдельные столбцы охватывают сетку. Система сетки основана на различном количестве секций сетки в зависимости от устройства:
- Рабочий стол: 12 разделов
- Таблица: 8 разделов
- Мобильный: 4 секции
Представьте, что вы хотите отобразить простое изображение с текстом рядом с ним. В редакторе блоков есть несколько способов сделать это. У каждого есть свои плюсы и минусы, в зависимости от того, чем вы хотите заниматься. С точки зрения пользователя и визуальной точки зрения, мне нравится видеть линии сетки на месте, когда я определяю, как они должны отображаться.
Еще один плюс системы сеток – согласованность в дизайне. Если пользователи могут масштабировать ширину столбцов на основе произвольных чисел, так же, как они теперь могут это делать с блоком «Медиа и текст», нет согласованности с размером элементов по горизонтали на странице. Система сеток меняет это.
Layout Grid Block все еще нуждается в доработке. В пользовательском интерфейсе есть несколько банальных болевых точек, которые можно улучшить. В целом мой опыт работы с этим блоком дал веские аргументы в пользу включения грид-системы в ядро.
Плагин прямо сейчас обращается к простым столбцам с одним, двумя, тремя и четырьмя столбцами. Система сеток в CSS намного мощнее, чем базовые горизонтальные столбцы. Однако, если мы начнем с основ, у нас появится место для развития.
Должно ли ядро включать сетку?
Врепозитории Гутенберга есть как минимум один открытый билет для обращения к грид-системе. Марк Урейн, автор билета, задал семь ключевых вопросов:
- Должна ли сетка быть отзывчивой?
- Должна ли быть система сеток Гутенберга по умолчанию, но разрешать темам регистрировать свои собственные?
- Должна ли система сеток соответствовать текущей структуре блоков Гутенберга или это должна быть отдельная вещь, в которую нам нужно реструктурировать блоки в редакторе?
- Должна ли сетка включать желоба?
- Должна ли сетка включать или допускать какие-либо привязки вертикального выравнивания?
- На чем должна быть основана сетка? (например, 12 столбцов, пиксельная сетка и т. д.)
- Должна ли сетка разрешать включение / выключение? А также включить параметр, отображающий или нет, при изменении размера объектов в редакторе?
Почти год назад билет вызвал серьезные обсуждения, но не так много в последнее время. Хотели бы вы видеть в редакторе сетку? Если да, то как бы вы хотели, чтобы это работало?
