WordPress

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0

Пятая версия WordPress принесет с собой самое крупное изменение за последнее время новый редактор под названием Gutenberg .

На протяжении многих лет вы использовали в качестве редактора по умолчанию TinyMCE. Теперь ему на смену приходит блочный редактор Gutenberg. Из-за этого полностью изменится ваш подход к наполнению сайтов на WordPress контентом.

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

Что изменено в блочном редакторе WordPress Gutenberg?

Ладно, взгляните на редактор TinyMCE, если вы слегка запутались после моего рассказа (по идее, вы его уже знаете!):

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - gajd po gutenberg staryj redaktor 1024x530

А это Gutenberg:

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - gajd po gutenberg novyj redaktor 1024x513

Ну и… в чем разница?

Самая главная — в слове “блоки”.

Gutenberg позволяет отводить специальный блок для каждого элемента, вместо раскладывания всего контента на одном поле в TinyMCE.

В Gutenberg теперь:

  • Каждый абзац в отдельном блоке
  • Картинка в отдельном блоке
  • Цитата в отдельном блоке
  • Встроенное видео в отдельном блоке
  • …ну вы поняли! Все, что вы можете использовать, находится в отдельном блоке.

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

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

Допустим, вам хочется добавить на запись кнопку.

Вместо того, чтобы переключаться на вкладку Text и дописывать класс CSS, как в TinyMCE, или пользоваться плагином для создания кнопок, Gutenberg позволяет просто добавить блок Кнопка и сразу посмотреть на кнопку в самом редакторе:

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - dobavit knopku v gutenberg 1024x589
Вы можете изменить стиль, цвет кнопки и текста

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

Обучение WordPress Gutenberg: использование нового редактора

После того, как я вам кое-что рассказал про новый редактор, займемся собственно обучением.

Я разделю его пополам.

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

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

Создание простой записи блога или страницы сайта в Gutenberg

Добавить в Gutenberg обычный текст очень просто. Просто щелкните и пишите, как раньше. Единственное отличие в том, что при нажатии Enter, Gutenberg создаст новый блок абзаца.

Если вы прекратите писать, выскочит плавающая панель, с помощью которой можно настроить формат текста — толщину шрифта, выравнивание и все остальное.

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - gutenberg rabota s tekstom

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

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - gutenberg zakrepit plavajushhuju panel

Вставляем новый блок

Пока вы пишете, новые блоки создаются сами.

Но их нужно вставлять самостоятельно, чтобы добавить что-то другое — картинку, ролик, заголовки и т. д.

Есть два основных способа добавления блоков:

  1. Щелкните по плюсу слева вверху, чтобы добавить блок снизу
  2. Щелкните по плюсу между блоками, чтобы вставить блок между ними
Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - gutenberg dobavit novyj blok

Когда вы щелкнете по плюсу, выскочит список доступных блоков. Сверху будут часто используемые вами блоки:

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - gutenberg chasto ispolzuemye bloki

Еще вы можете:

  1. Воспользоваться поиском и найти блок по его названию
  2. Прокрутить список и найти вкладки, разделяющие все блоки по категориям

Давайте взглянем на пару примеров…

Вставка изображения/картинки

Вставьте блок Изображение. Затем выберите в его настройках, откуда взять картинку:

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - gutenberg vstavit izobrazhenie

Вставка видео ролика с YouTube

Вставьте блок YouTube. Скопируйте в него ссылку, и в редакторе появится превью ролика:

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - gutenberg dobavlenie video

Если вам надо выставить заголовок (второго, третьего или другого уровня)

Вставьте блок Заголовоки выберите размер заголовка на панели:

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - gutenberg dobavlenie bloka zagolovka

Или выберите имеющийся блок абзаца и конвертируйте его в блок заголовка (или любой другой подходящий вроде блока цитаты) с помощью панели:

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - gutenberg preobrazovat tekst v zagolovok 1024x527

Настройка блока

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

Для остальных настроек вам нужна вкладка Блокна правой боковой панели.

Если, скажем, вам надо изменить цвет блока кнопки, используйте правую боковую панель:

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - gutenberg kak izmenit cvet knopki

Перемещение блоков по странице

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

С Gutenberg, этого можно добиться двумя способами:

  • Поднять или опустить блок стрелками вверх и вниз
  • Перетащить блок туда, куда вам нужно

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

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

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - gutenberg peremeshhenie blokov 1024x797

Настраиваем основную информацию о записи (категория, ссылка и т. д.)

Описанное выше поможет вам сделать простейшие записи в блог и страницы на сайте.

Но как быть с технической информацией вроде:

  • Ссылки
  • Категории
  • Тэгов
  • и всего остального

Это все настраивается во вкладке Документ на боковой панели. Она похожа на аналогичную панель в TinyMCE:

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - gutenberg dannye zapisi stranicy 1024x550

Как быть с плагинами вроде Yoast SEO?

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

Что с ними?

Что ж, у некоторых плагинов, вроде Yoast SEO, уже есть поддержка Gutenberg. Чтобы настроить Yoast SEO и другие плагины со встроенной поддержкой, щелкните по значку справа вверху. Теперь можно настраивать плагин с помощью боковой панели:

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - gutenberg nastrojka yoast 1024x458

В остальных плагинах вы все так же можете пользоваться метабоксами, которые появляются снизу:

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - gutenberg proizvolnye polja nastrojka plaginov 1024x464

Пять советов, как лучше использовать Gutenberg

С помощью первой половины обучения Gutenberg вы можете дальше делать то, что вы раньше делали на TinyMCE.

А теперь прочитайте продвинутые советы, чтобы пользоваться Gutenberg.

1. Для увеличения производительности, запомните горячие клавиши

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

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

Нажмите Shift + Alt + H, чтобы увидеть весь список горячих клавиш:

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - gutenberg gorjachie klavishi 1024x751

2. Добавляйте блоки быстрее, используя косую черту

Не обязательно ждать, пока всплывет список блоков. Быстрее нажать “/” в пустом блоке и найти нужный по имени.

Например, так:

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - gutenberg bystroe dobavlenie bloka gorjachie knopki 1024x657

3. Перетаскивайте картинки с компьютера в Gutenberg

Чтобы быстрее вставлять картинки, перетаскивайте их с компьютера сразу в окно редактора на нужное место. Gutenberg сам загрузит их в библиотеку:

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - gutenberg bystraja zagruzka izobrazhenija 1024x672

4. Используйте колонки, чтобы сделать вид вашего сайта интересней

В Gutenberg существует блок Колонкидля того, чтобы верстать более сложные сайты. В блок колонок можно вставлять другие блоки:

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - gutenberg dobavlenie kolonok 1024x728

А чтобы сделать верстку еще удобней, можно поставить плагин Kadence Blocks. Кстати о плагинах…

5. Пользуйтесь сторонними плагинами с еще более полезными блоками

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

Еще существует Gutenberg Cloud, проект, дающий любопытную возможность ставить только отдельные блоки, созданные разными разработчиками.

Вдобавок, некоторые плагины, которыми вы пользовались и раньше, заменят шорт-коды на блоки. Как конкретный пример, магазин WooCommerce позволит добавлять новые товары, используя блоки.

Что случится после установки WordPress 5.0 со старым контентом?

Это нормально — беспокоиться о судьбе всего контента, созданного вами в TinyMCE, если у вас есть сайт на движке WordPress.

Но переживать не о чем — основная команда о нем не забывала.

Как будут обстоять дела.

Например, вы написали в TinyMCE вот такую запись:

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - klassicheskij redaktor

После переезда на WordPress 5.0, старый контент будет заключен в один-единственный блок Classic. Этот блок — по большей части, редактор TinyMCE просто внутри редактора Gutenberg.

Так что все заключается в один блок, а не разбивается на отдельные. Вот таким образом:

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - klassicheskij redaktor v gutenburg

В “классическом” блоке контент можно отредактировать, как в TinyMCE:

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - klassicheskij redaktor v gutenburg 2

Или использовать Convert to Blocks. При этом Gutenberg разделит старый контент на самостоятельные блоки, и с ними можно будет работать как со свежей записью, созданной в Gutenberg.

Можно ли и дальше работать в TinyMCE или придется переходить на Gutenberg?

Пользоваться Gutenberg не обязательно. Начиная с пятой версии, он станет использоваться по умолчанию, но можно и дальше пользоваться давно знакомым TinyMCE с помощью официального плагина Classic Editor. Кроме того, основная команда WordPress продолжит поддержку TinyMCE еще не меньше трех лет, до конца 2021.

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

Плагин можно настроить так, чтобы пользоваться обоими редакторами, и TinyMCE, и Gutenberg, если вам этого так хочется.

Чтобы сделать это, нажмите Settings → Writing и выберите Use the Block editor by default and include optional links back to the Classic editor:

Вот и прошли вы обучение по редактору WordPress Gutenberg!

Среди пользователей WordPress было много споров по поводу блочного редактора Gutenberg.

Не нам судить, хорош он или плох. Мы лишь хотим, чтобы вам по-прежнему нравилось пользоваться WordPress после выхода WordPress 5.0, и мы надеемся, что это обучение вам поможет.

У вас еще есть вопросы по поводу блочного редактора Gutenberg? Комментируйте, и мы постараемся вам помочь!

Написать комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.