Обзор редактора блоков Gutenberg (от опытного пользователя WordPress)

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

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

Итак, далее следует мой личный обзор блочного редактора Gutenberg с точки зрения опытного пользователя WordPress. Я буду говорить о том, что мне нравится, не нравится и что, по моему мнению, можно было бы улучшить.

Редактор блоков WordPress: определение

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

Редактор сообщений/страниц

Я уже упоминал об этом. Это то, на что вы попадаете, когда переходите в «Сообщения/страницы» > «Добавить новый» или редактируете существующий контент. Первоначальная реализация Gutenberg в WordPress 5.0 заменила только эту часть опыта редактирования, заменив TinyMCE, который WordPress использовал раньше. Естественно, здесь вы редактируете содержимое своих сообщений и страниц, но ничего не связано с шаблонами.

Редактор сайта

Впервые представленная как Полное редактирование сайта (FSE), эта часть Гутенберга теперь переименована в Редактор сайта. Он доступен через «Внешний вид» > «Редактор» , когда вы используете блочную тему, такую ​​как Twenty Twenty-Two или Twenty Twenty-Three. Здесь WordPress позволяет редактировать всю архитектуру сайта, включая верхние и нижние колонтитулы, меню, шаблоны страниц, виджеты и домашнюю страницу.

Редактор шаблонов

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

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

Редактор виджетов

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

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

Обзор редактора сообщений/страниц Gutenberg

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

Что мне нравится в этом

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

Гладкий и современный

Вся честь TinyMCE, настоящей рабочей лошадке, которая хорошо служила WordPress в течение долгого времени. Однако, скажем прямо, это не самое современное программное обеспечение.

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

Он просторный, минималистичный и чистый. Мне также легко найти все важные настройки и информацию. Я, например, не удивлен, что его внедряют в другие системы управления контентом.

Что вы видите, это то, что вы получаете

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

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

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

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

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

Легко ориентироваться

Одна вещь, которую я помню о классическом редакторе: Итак. Много. Прокрутка.

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

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

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

Что может быть лучше

Конечно, использование Post/Page Editor — это не только розы и бабочки. У него тоже есть недостатки, некоторые из них я бы назвал серьезными.

Производительность

Моя главная проблема - иногда неравномерная работа редактора. Весь этот JavaScript, необходимый для его запуска, может серьезно сказаться на вашем браузере.

Дело в том, что, как я уже говорил, я склонен писать длинные статьи. В моем собственном блоге сообщения обычно содержат не менее 3000-4000 слов, а то и больше.

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

Так что это серьезная область для улучшения, даже если все уже стало лучше. Также есть что сказать о стабильности, но об этом я расскажу ниже.

Отсутствующие сочетания клавиш

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

Это часть, которая просто отсутствует в редакторе блоков. Хотя есть разумные сочетания клавиш (найдите их в меню в правом верхнем углу или нажав Shift+Alt+H ), они просто не охватывают так много, как TinyMCE.

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

Может быть, это личное раздражение, но, на мой взгляд, это определенно то, что могло бы быть лучше.

Погружаемся в редактор сайта

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

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

Что хорошо делает редактор сайта

Я начну с того, в чем, по моему мнению, редактор сайта уже преуспевает.

Очень могущественный

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

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

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

Массивы блоков и части шаблона

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

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

Возможности для совершенствования

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

Не самый удобный для пользователя

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

Кроме того, часто это мелочи:

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

Безусловно, самая запутанная задача — это создание меню. Честно говоря, я даже не уверен, что понял это полностью к этому моменту. Вы как бы делаете это на странице, но есть также ссылка «Управление меню» в параметрах блока, которая ведет вас к старому пользовательскому интерфейсу, где вы ничего не можете сделать.

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

Отсутствие документации

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

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

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

Отсутствующая функциональность

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

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

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

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

Стабильность

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

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

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

Редактор шаблонов

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

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

Вот что мне нравится

Давайте посмотрим, что есть в редакторе шаблонов.

Подходит для использования по назначению

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

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

С чем я не мог справиться

С другой стороны, вот что мне не очень понравилось.

Возможно, сбивает с толку новичков

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

Здесь также возникает вопрос о том, как передать такую ​​мощь в руки пользователей, не обучая их должным образом тому, как ее применять.

Заключительные мысли: обзор Гутенберга

Итак, у вас есть обзор редактора блоков WordPress и реализации проекта Gutenberg от человека, который ежедневно профессионально работает с платформой.

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

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

Вы согласны с моим обзором Гутенберга? Что вы думаете о редакторе блоков и о том, как он реализован? Пожалуйста, поделитесь в комментариях ниже!