Что такое гутенберг в вордпрессе

Пошаговое руководство по редактору Gutenberg для WordPress

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

Что такое редактор Gutenberg?

Gutenberg – редактор блоков, используемый WordPress по умолчанию

Если вы используете WordPress 5.0 и выше, то наверняка сталкивались с новым блочным редактором Gutenberg. С точки зрения функциональности привычный классический редактор и Gutenberg делают одно и то же: помогают создавать контент. Только помните о том, что WordPress перестанет поддерживать классический редактор после 2022 года.

Gutenberg не похож на традиционный текстовый редактор. Он использует блоки контента так же, как и современные конструкторы веб-страниц.

Как создать запись WordPress с помощью редактора Gutenberg

После чего вы попадете в редактор Gutenberg.

Добавление заголовка

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

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

Добавление нового абзаца

После добавления текста появляется панель инструментов для форматирования.

С помощью панели форматирования можно:

Дополнительные параметры доступны на вкладке « Блок» в меню боковой панели.

Вкладка «Документ» в боковой панели

Как работать с этой панелью:

Теперь добавим изображение ниже первого абзаца.

Добавление изображений в редакторе Gutenberg

После нажатия Enter создается новый блок абзаца. Чтобы добавить изображение, кликните по иконке «+».

Все варианты добавления изображений:

Нажмите любую из иконок и добавьте изображение.

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

Обычные настройки мультимедиа…

В качестве иллюстрации я добавила текст и кнопку под ним.

Как добавить загружаемые файлы

Добавление цитаты в редакторе Gutenberg

Чтобы добавить цитату, на новой строке кликните по иконке «+» и в основных блоках выберите «Цитата».

Чтобы добавить цитату, введите текст внутри этого блока.

Добавление встроенных блоков медиа в редакторе Gutenberg

Редактор Gutenberg поставляется с блоками для встраивания видео и других медиафайлов с более чем 30 различных площадок (YouTube, Vimeo, Facebook, SoundCloud, WordPress, Slideshare и так далее).

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

Как добавить кнопку в редакторе Gutenberg

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

Как добавить колонки в редакторе Gutenberg

Блок «Колонки» доступен в разделе « Элементы разметки ».

Редактор Gutenberg по умолчанию добавляет две колонки.

Вот что у меня получилось.

Как в редакторе Gutenberg добавить изображение рядом с текстом

Чтобы добавить изображение с текстом, в коллекции блоков « Элементы разметки » выберите элемент « Мультимедиа и текст ».

Затем загрузите изображение или видео. После этого добавьте текст.

Вот что получилось.

Сторонние блоки для редактора Gutenberg

Редактор Gutenberg поддерживает и блоки сторонних разработчиков. Например, вы можете добавить блоки WooCommerce в запись WordPress. Для этого необходимо установить и активировать плагин WooCommerce. Затем в новой строке кликните по иконке «+», в разделе « WooCommerce» выберите тот блок, который вам необходим.

Другие важные блоки

Вот список других блоков, доступных в Gutenberg:

Быстрые хаки для редактора Gutenberg и сочетания горячих клавиш

Редактор Gutenberg поставляется «в комплекте» с парой хаков и сочетаний горячих клавиш. Например, если вы введете «/» внутри блока абзаца, то появится список доступных блоков.

Вы также можете выбрать конкретный блок, введя его название после обратной косой черты («/»). Например, если ввести «/image», то получите блок изображения.

Д ля просмотра всех доступных сочетаний горячих клавиш воспользуйтесь клавиатурной комбинацией SHIFT + ALT + H в Windows и OPT + CTRL + H в Mac.

Чтобы просмотреть структуру документа, кликните по иконке «i».

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

Дайте знать, что вы думаете по этой теме статьи в комментариях. За комментарии, подписки, лайки, дизлайки, отклики огромное вам спасибо!

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

Источник

WordPress редактор Gutenberg: исчерпывающее руководство

Гутенберг — больше, чем редактор. Сейчас редактор находится в центре внимания, и в конечном итоге проект повлияет на весь опыт публикаций

Редактор Гутенберг построен по типу конструктора, основным элементом является блок.

Основные

Абзац

По умолчанию блок – абзац, тут вводим текст. Если нужен другой, например, заголовок, то необходимо нажать на знак “плюс”.

Или введите в пустом блоке «/», начните вводить имя блока и редактор Гутенберг выведет все совпадения, останется только выбрать нужный.

У каждого блока есть всплывающая панель настроек и настройки в правой части – параметры блока.

Рассмотрим инструменты на всплывающей панели:

Кликнув на перевернутый треугольник, можем

В правой части мы видим все уровни заголовков, выравнивание текста. Во вкладке “Дополнительно” можно задать якорь, а также настроить стили.

Остальные настройки спрятаны за троеточием (они одинаковы для всех блоков):

Также, чтобы удалить блок можно воспользоваться кнопкой делит. Нужно кликнуть на нем, чтобы он стал активным. Именно блок, а не его содержимое и удалить. Или использовать комбинацию клавиш Shift+Alt+Z.

Абзац

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

Изображения

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

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

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

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

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

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

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

Дайте название рисунку.

Цитаты

Цитата – это фрагмент текста, который необходимо выделить, акцентировать внимание читателя.

Списки

У нас на выбор два вида списков: нумерованный и маркированный, присутствуют настройки отступов.

Галерея

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

Лучше ставить галочку “обрезать изображения”, чтобы картинки обрезались для выравнивания.

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

Добавим блок – файл. Появляется кнопка для скачивания.

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

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

Минус в том, что нет инструментов для редактирования кнопки: придать ей форму и цвет. Поэтому нужно использовать css-стили или плагин.

Видео, аудио

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

В настройках выставьте изменение размера видео для небольших экранов.

Аудио добавляется аналогично.

Обложка

Чем она отличается от простой картинки? Тем, что здесь можно фиксировать фон. Давайте что-нибудь напишем и зафиксируем фон.
При скроле получается красивый эффект.

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

Форматирование

Таблицы

Очень удобно задавать таблицу, задаете количество строк и столбцов и все готово.

Можем задать стиль таблицы, пока это только добавить полосы. Выравнивание и форматирование: добавить строки и столбцы, ссылку, работа с текстом.

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

Имеется несколько фоновых цветов.

Выдержка

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

Выберите стиль, предлагается два:

Подберите подходящий цвет окаймляющих линий и текста.

Классический редактор

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

В сочетании с темой Root – это идеальный вариант.

Если вам необходимо показать какой-то код, вы можете воспользоваться одноименным блоком.

html-код

Также есть возможность добавить блок с html-кодом и сразу в редакторе посмотреть результат. Не нужно как раньше переключаться между визуальным редактором и редактором кода.
Вставляем код, смотрим изменения. Я вставлял код формы подписки.

Элементы разметки

Кнопка

Теперь ее не надо создавать, загружать или устанавливать специальный плагин и прописывать шорткод.

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

Разрыв страницы

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

Интервал

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

На скриншоте ниже мы видим, что расстояние между блоком “Выдержка” и “галерея” отсутствует. Нижняя линия сливается с рисунками.

Добавим между этими блоками интервал. Мы можем его задавать по своему усмотрению.

До применения блока “интервал” После. Блоки разделены.

Тег далее

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

Медиа и текст

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

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

Можем продублировать блок и поменять местами рисунок и текст. И уже будет похоже на лендинг.

На первый взгляд он недружелюбен, на самом деле он хороший!

Разделитель

Это простая линия. Можем задать ее стиль – короткая, на всю ширину статьи и три точки.

Колонки

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

Например, в первой колонке – видео, во второй картинка, в третьей – описание. Поэкспериментируйте.

Виджеты

Шорткод

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

Эту форму я также могу установить с помощью блока, в котором уже есть мой плагин wpforms. Данный плагин совместим с Gutenberg и уже отображается в разделе виджеты.

Последние записи

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

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

Настраиваем по своему усмотрению: вид сортировки, количество ссылок, рубрику, к которой будут принадлежать статьи, дата публикации.

У меня получилось так.

Архивы

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

Рубрики

Последние комментарии

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

Облако меток, поиск, календарь, RSS

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

Верхняя панель

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

Навигация по блокам, которые вы использовали в статье.

В правой части панели инструментов:

Все остальные инструменты спрятаны за троеточием:

Настройки Документа

Раздел документ состоит из следующих разделов:

Мои блоки

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

Как отключить редактор Гутенберг

Если вам все-таки нужен старый редактор и мои доводы в пользу Гутенберга вас не убедили, то вернуть Classic Editor очень просто. Скачайте его с официального сайта или перейдите в раздел плагины, добавить новый и введите в строке поиска его название.

Как устанавливать и настраивать плагины, я подробно рассказывал здесь.

Для переключения между редакторами перейдите – “настройки”, “написание”.

Статьи в старом редакторе

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

Основные преимущества

Минусы Gutenberg

Я бы сказал небольшие баги. Недавно (08.06.19) обнаружил следующую ошибку: при просмотре статьи на телефоне (айфон 5) картинка перекрывает блок с текстом.

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

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

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

Вывод

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

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

Чтобы переход не казался таким болезненным, используйте для оформления текста блок “Классический” плюс плагин, который я советовал выше.

Задавайте вопросы и делитесь мнениями в комментариях.

Если статья оказалась полезной, поделитесь ею в социальных сетях.

Видеообзор

Источник