Официальный релиз WordPress 5 произошел 6 декабря 2018 года. Это крупнейшее обновление самой популярной CMS в мире. Ключевым новшеством стало использование системы Gutenberg, которая принципиальным образом поменяла подход к добавлению контента. Система основывается на добавлении специальных блоков, с помощью которых строится информационная часть записи или страницы. И сегодня мы расскажем о том, как использовать блоки Gutenberg.
Предыдущая система добавления контента в WordPress называлась TinyMSE. Она применялась с первой по четвертой версии WordPress. Работа в TinyMSE строилась по принципу создания предварительной версии в админке CMS, после которой происходила публикация материала. В зависимости от настроек системы, созданный в панели админстратора контент и окончательный вид на сайте, могли значительно изменяться. Теперь, с использованием Gutenberg, внешний вид материала отличается от конечного минимальным образом. Система Gutenberg подразумевает использование дополнительных функций (таблицы и кнопки), о которых Вы можете узнать в нашей статье.
Как использовать Gutenberg в 3 шага
Полноценная система Gutenberg используется в WordPress 5. На версиях CMS, ниже данной версии,используется пробная версия. Для того, чтобы использовать возможности данной системы по максимуму, необходимо пройти обучение по его использованию. В нашем обзоре Вы сможете ознакомиться с наглядными инструкциями по использованию Gutenberg. Она подходит для добавления контента любого вида.
Шаг 1: добавляем блок в пост
Первое,что необходимо сделать при использование системы Gutenberg – добавить название поста в специальной верхней части текстового редактора (он открывается автоматически после открытия страницы для создания записи):
Это работает примерно так, как и в прошлой версии текстового редактора. После этого Вы увидите первые отличия от стандартного функционала. Если Вы наведете курсор ниже заголовка, то увидите несколько значков:
Значок плюс позволяет выбрать блоки в Gutenberg и добавить их в свой пост. Справа находится блоки наиболее популярных блоков –текста, изображений, галерей. Нажав на «плюсик» можно увидеть новое меню.
В этом меню перечислены все блоки, содержащиеся в редакторе Gutenberg. Вверху находятся блоки, которыми Вы пользуетесь чаще всего. Ниже блоки редактора находятся в упорядоченном положении.
Чтобы добавить блок в текст, кликаем на него левой кнопкой мыши, после чего приступаем к редактированию. Например, нажав на блок абзаца, мы можем приступить к его редактированию. Теперь необходимо перейти ко второму шагу.
Шаг 2 – настройка блока
Когда мы добавляем блок «абзац», он выглядит не очень корректно. После начала ввода символов, появится панель с дополнительными опциями. В частности, появится стандартные функции выделения, выравнивания и курсив. Справа появится дополнительное меню:
В этом меню находятся дополнительные функции для редактирования блока «абзац». Кроме этого, здесь можно сделать дополнительные настройки CSS. Если Вы хотите добавить новый блок, то необходимо нажать Enter.C помощью него можно создать другой тип блока, например,изображение.
В меню, которое добавляет изображение, можно увидеть новые функции блока. Например, добавить изображение из галереи или своего компьютера. Изображение можно выровнять по тексту с помощью инструментов или CSS.
Если Вы быстро хотите добавить новый блок, то вместо плюса в новой строке нажмите команду «/», после чего появится быстрый выбор блоков.Благодаря блокам существенно повысилась возможность визуального редактора в WordPress. Однако необходимо некоторое время, чтобы привыкнуть к нему.
Также, в редакторе имеются новые функции, например добавление кнопок. Для этого выбираем блок Button
После чего появляется интерактивная кнопку, в которой можно создать ссылку и отредактировать ее содержание. Кликнув на значок кнопки влевом верхнем углу, можно отредактировать стиль кнопки. Кроме этого, можно цвет фона и текст кнопки. Особенно данная функция будет полезна для продажи продуктов, сбора базы подписчиков и других способов монетизации сайта.
Шаг 3 – добавляем штрихи
После добавления нескольких блоков можно внести некоторые изменения в текст записи. Редактор Gutenberg позволяет гибко менять стиль всей страницы. Например, если Вы хотите удалить блок,необходимо нажать значок «параметры» (иконка с тремя точками) и выбрать«удалить» (Remove block):
При наведение курсора на блок, Вы можете использовать кнопки вверх и вниз для изменения порядка расположения блока.
Также, теперь доступна функция добавления нескольких столбцов с текстом (она отсутствовала в стандартном TinyMCE), благодаря чему можно добавлять красивые тексты. Для этого необходимо добавить блок «Колонки» (Columns).
C помощью функции Columns можно добавлять до 6 столбцов на одной странице (при этом содержание каждого столбца может изменяться).
Важно отметить, что в процессе редактирование может пропасть верхняя панель редактора. Чтобы включить ее, необходимо нажать в правой панели вкладку «Документ».
Во вкладке документ находится стандартное меню редактора WordPress. Например, можно опубликовать текст или задать изображение записи. Контент записи автоматически сохраняется в облачном сервисе, поэтому не стоит бояться потерять его.
С помощью данной инструкции Вы узнали как пользоваться новым Gutenberg. Однако его функционал значительно больше. Для того, чтобы полностью понять функционал новой системы, необходимо использовать Gutenberg некоторое время. Желаем Вам новых открытий и достижения новых вершин вместе с WordPress 5!
Оригинал статьи https://themeisle.com/blog/gutenberg-blocks-explained/?utm_campaign=feed&utm_medium=dashboard_widget
Вот попробовала новый редактор и честно мне не понравилось, возможно потому что непривычно и я не готова к таким кардинальным переменам, хотя некоторые функции мне очень понравились и оказались весьма удобными, во всяком случае ради интереса стоит попробовать, для того чтобы разобраться лучше, рекомендую прочитать эту статью: https://ifish2.ru/redaktor-gutenberg-wordpress/