Gutenberg E03: Использование нового редактора сообщений Gutenberg

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

В этом эпизоде ​​мы сосредоточимся только на использовании нового редактора сообщений Gutenberg. Мы продемонстрируем более практичные изменения Гутенберга, связанные с редактированием контента.

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

Как работают блоки редактора сообщений Gutenberg

До сих пор редактирование текста в WordPress было довольно простой задачей. TinyMCE предоставил интерфейс, который напоминал программное обеспечение для редактирования документов (Microsoft Word, LibreOffice Writer, Google Docs и т. д.). Была одна единственная область тела, куда вы могли поместить все (текст, заголовки, списки, изображения и т. д.), а затем использовать глобальную панель инструментов для форматирования.

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

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

Это открывает множество возможностей, которых раньше не существовало.

1. Простое изменение порядка

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

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

2. Заблокировать определенные настройки и панель инструментов

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

3. Запретить повторное использование

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

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

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

Добавление форматированного текста в редакторе Гутенберга

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

Преобразование заголовка в блок

В TinyMCE вы вводите заголовок, абзац и все остальное обычным текстом.

А затем, например, выберите нужный текст и измените его формат на Заголовок 1.

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

Все, что осталось сделать, это преобразовать первый блок «Абзац» в блок «Заголовок».

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

Говоря о заголовках, у вас также есть оглавление, основанное на заголовке, H1, H2 и т. д. Насколько это круто?

Добавление списка

Допустим, вы хотите добавить список в свой текст. В TinyMCE вы сначала нажимаете кнопку «Список» на панели инструментов, а затем начинаете печатать. Нажатие клавиши [Enter] добавляет новый элемент в список.

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

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

Добавление изображений и галерей изображений

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

Добавление изображения

Здесь мало что изменилось. В TinyMCE вы нажимаете «Добавить медиа» и вставляете свои изображения в контент, а затем управляете ими оттуда.

В Гутенберге вы… ну вы догадались! Вы просто добавляете новый блок изображения следующим образом:

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

Ну, теперь это не сильно отличалось, не так ли? Тоже довольно интуитивно понятно. Итак, давайте погрузимся в нечто более сложное, но также знакомое: короткие коды.

И для этого мы собираемся использовать галерею, еще один распространенный элемент изображения.

Разместите свой сайт с Pressidium

60- ДНЕВНАЯ ГАРАНТИЯ ВОЗВРАТА ДЕНЕГ

ПОСМОТРЕТЬ НАШИ ПЛАНЫ

Добавление галереи

Кнопка «Добавить медиа», представленная в WordPress 3.5, упростила и сделала процесс создания галереи интуитивно понятным. Вот как вы это делаете в TinyMCE:

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

Ну да, но с некоторыми оговорками.

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

Вы должны щелкнуть значок «Редактировать» и вернуться в окно мультимедиа, чтобы завершить там свои изменения.

Как мы намекали выше, это происходит потому, что галерея перед вами — не что иное, как замаскированный шорткод !

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

Итак, как бы вы поступили с Гутенбергом? Во-первых, давайте посмотрим, как мы работаем с короткими кодами в целом.

Шорткоды в Гутенберге

Если вы подумали «Блок шорткода?» тогда ты мой друг, прав. В Гутенберге есть специальный блок, который портирует функциональность старых шорткодов. Это сохраняет совместимость, ничего не ломая.

Это создаст точно такую ​​же галерею, когда посетитель просматривает веб-сайт.

Однако это не идеально. Мы уже много говорили о том, что шорткоды устарели и неуклюжи, и работать с ними неинтересно. Так почему же мы продолжаем использовать их с Гутенбергом?

Ответ прост. Блок шорткода существует из соображений совместимости.

WordPress хочет дать разработчикам время для переноса их шорткодов в пользовательские блоки. Таким образом, все станет более интуитивно понятным.

На самом деле есть блок галереи, который поставляется с редактором Gutenberg, так что давайте использовать его вместо шорткода и посмотрим на него в действии!

Блок галереи в Гутенберге

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

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

Добавление пользовательских макетов

Макет столбца

Очень часто в вашем контенте есть столбцы. Может быть, вы хотите сравнить многие вещи бок о бок, или, может быть, вы хотите представить похожие объекты вместе.

До Гутенберга для создания таких макетов приходилось полагаться на внешние шорткоды. См. пример ниже с использованием плагина «Шорткоды столбцов»:

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

Теперь давайте посмотрим на редактор Gutenberg:

Используя блоки «Текстовые столбцы» и «Столбцы», Гутенберг позволяет без особых проблем создать именно тот макет, который вам нужен. Это просто, интуитивно понятно для конечного пользователя и гораздо менее подвержено ошибкам со стороны пользователя. Создание контента не должно быть похоже на написание кода

Добавление настраиваемых полей

WordPress больше не является исключительно платформой для ведения блогов. У пользователя есть возможность создать пользовательский тип записи, чтобы добавить функциональность своему сайту WordPress. Простым примером могут быть обзоры книг, где вы создаете настраиваемый тип сообщения с именем «Книга», добавляя настраиваемые поля, такие как «Название», «Автор», «Дата публикации» и «Рейтинг».

С помощью настраиваемых полей вы можете использовать те, которые предоставляет WordPress:

В качестве альтернативы можно использовать сторонний плагин, например ACF (Advanced Custom Fields) или Meta-box. Они могут обеспечить большую гибкость и широко используются сообществом разработчиков.

Итак, дело в том, что Гутенберг хочет отойти от такой терминологии и сосредоточиться на создании и редактировании контента. Термины «шорткоды», «виджеты», «настраиваемые поля», «TinyMCE» могут быть вам уже знакомы, но новички могут сбить с толку. Вместо этого Гутенберг перемещает фокус на Блоки.

«Да, это все прекрасно, но как у нас будет эта функциональность настраиваемого поля с Гутенбергом?»

В конце концов, настраиваемое поле — это просто значение, хранящееся в таблице post_meta в базе данных. Что ж, блок Гутенберга уже может это сделать.

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

*только со сторонними плагинами. Смотри ниже.

Пользовательские поля в Гутенберге

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

Пользовательские поля как блоки в Гутенберге

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

Вывод

Ну, если бы мы могли обобщить весь этот эпизод одним словом, это было бы «Блок».

Если вы хотите начать думать в стиле Гутенберга, каждый раз, когда вы в чем-то сомневаетесь, думайте «заблокировать». Отныне это будет строительный блок (каламбур) вашего контента WordPress.

И поскольку это так важно, в следующем эпизоде ​​мы рассмотрим блоки по умолчанию, которые предоставляет Гутенберг. Увидимся там!