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

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=
В этой статье:

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

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

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

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

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

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=

А это Gutenberg:

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=

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

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

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

В Gutenberg теперь:

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

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

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

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

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

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=
Вы можете изменить стиль, цвет кнопки и текста

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

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

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

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

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

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

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

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

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

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=

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

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=

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

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

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

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

  1. Щелкните по плюсу слева вверху, чтобы добавить блок снизу
  2. Щелкните по плюсу между блоками, чтобы вставить блок между ними
Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=

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

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=

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

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

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

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

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

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=

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

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

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=

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

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

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=

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

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=

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

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

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

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

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=

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

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

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

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

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

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

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=

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

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

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

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

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

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=

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

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

Что с ними?

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

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=

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

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=

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

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

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

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

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

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

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

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=

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

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

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

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=

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

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

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=

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

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

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=

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

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

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

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

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

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

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

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

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

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

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=

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

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

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=

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

Обучение WordPress Gutenberg: как пользоваться новым блочным редактором в WordPress 5.0 - png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=

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

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

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

Как отключить Gutenberg и вернуться к старому редактору вы можете прочитать в нашей статье – Как вернуть старый редактор.

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

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

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

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Total
2
Shares
Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

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

Предыдущая статья
Плагин галереи для WordPress — NextGEN Gallery - png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=

Плагин галереи для WordPress — NextGEN Gallery

Next Post
robots.txt для WordPress

Правильный robots.txt для WordPress – 2023

Похожие статьи

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: