Как использовать Гутенберг (редактор WordPress)


как использовать блоки ГутенбергаВ 2018 году WordPress перешел от своего давнего редактора к тому, который он назвал «Гутенберг».


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

Являетесь ли вы давним пользователем, пытающимся разобраться в новом редакторе, или вы новичок в WordPress, это руководство научит вас веревкам. Вы узнаете:

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

Contents

Классический редактор против блоков Гутенберга

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

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

С 2003 по 2018 год WordPress предоставлял своим пользователям базовый текстовый редактор..

WordPress-Classic-редактор

Классическим редактором WordPress был ваш типичный редактор WYSIWYG («что видишь, то и получаешь»).

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

WordPress-WYSIWYG-редактор

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

Например:

WordPress-страница-пример

Вот как контент будет отображаться на веб-сайте после публикации. Но вы сможете подтвердить, что все переведено нормально с редактора на страницу, с помощью функции «Предварительный просмотр»..

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

В 2018 году WordPress решил исправить эти ограничения, выпустив новый редактор WordPress (то есть Гутенберг)..

Редактор блоков Гутенберга

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

Гутенберг

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

Gutenberg-блоки

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

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

Больше-Gutenberg-Block-Примеры

Более того, больше нет игры в догадки. То, что вы создаете в редакторе блоков, это то, как оно выглядит на вашем сайте. Все шрифты, стили и макеты совпадают:

WordPress-страница-пример-с-Гутенберг

Один редактор WordPress лучше другого?

Что касается того, что лучше – классический редактор или Гутенберг – вы должны выяснить это для себя.

Хотя WordPress автоматически устанавливается вместе с Gutenberg, пользователи могут устанавливать плагин Classic Editor если они еще не готовы перейти в редактор блоков.

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

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

Как использовать редактор блоков Gutenberg

Давайте рассмотрим редактор блоков Gutenberg, настроив новую страницу (или пост).

Начните с меню WordPress в левой части экрана. Если вы хотите создать новую веб-страницу, наведите курсор на «Страницы» и выберите «Добавить новую». Если вы хотите создать новый пост в блоге, наведите курсор на «Посты» и выберите «Добавить новый».

WordPress-Add-New-Page

Добавить заголовок

Создав новую страницу или сообщение, присвойте ему заголовок в блоке «Добавить заголовок»:

Гутенберг-Title-Block

Создайте свой первый блок

Параграфы, как правило, составляют основную часть контента, который мы размещаем на веб-странице, поэтому первый блок, который нам дает Гутенберг, всегда является блоком абзаца:

Гутенберг-Нью-Пункт-Block

Если вы хотите начать с абзаца, добавьте курсор к пустому блоку с надписью «Начните писать или введите /, чтобы выбрать блок». По мере ввода, ваш контент будет заполнять блок.

Настройте содержимое в блоке

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

центровка

С большинством блоков Гутенберга у вас будет возможность изменить выравнивание содержимого внутри блока:

Гутенберг-Alignment

Слева по умолчанию. Вы также можете выбрать выравнивание по центру или выравнивание по правому краю..

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

Каждый раз, когда в блоке есть текст, вы можете отформатировать его жирным шрифтом:

Гутенберг-Пункт-Bold

Сделайте текст курсивом:

Гутенберг-Пункт-Italic

Или добавьте гиперссылку:

Гутенберг-Пункт-Link

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

Дополнительные параметры стиля

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

Гутенберг-More-Text-Options

«Код» стилизует ваш текст так, как если бы он был написан в редакторе кода:

Гутенберг-Пункт-код

«Встроенное изображение» позволяет обернуть текст вокруг изображения:

Гутенберг-Пункт-InlineImage

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

Последний вариант здесь позволяет вам добавить зачеркнутый текст:

Гутенберг-Пункт-Зачеркнутый

Дополнительные параметры блока

Последняя кнопка на панели инструментов всегда показывает больше параметров блока:

Gutenberg-Больше-Block-Options

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

Давайте быстро вспомним, что они делают:

  • Скрыть настройки блока: Заставляет боковую панель справа исчезать.
  • Дублированный: Делает точную копию этого блока.
  • Вставить перед: Добавляет новый пустой блок выше этого.
  • Вставить после: Добавляет новый пустой блок ниже этого.
  • Редактировать как HTML: Превращает блок в редактор кода, если вы хотите писать в HTML.
  • Добавить в многоразовые блоки: Сохраняет блок, чтобы вы могли использовать его в другом месте на сайте.
  • Удалить блок: Удаляет блок.

Блок преобразования

На панели инструментов есть еще одна кнопка, о которой вам нужно знать:

Гутенберг-коммутатор-блоки

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

Например, вы можете превратить текстовый блок, такой как «Абзац», в «Заголовок», «Список» или «Цитировать». Вы не можете, однако, превратить что-то вроде абзаца в изображение или разделительную линию. Вам понадобится новый блок для этого.

Добавить новый блок

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

Вставить до / после

Вы уже видели параметры «Вставить до / Вставить после» на панели инструментов вашего блока. Это один из способов сделать это.

Если вы щелкнете по своему существующему блоку и наведете курсор на него сверху, вы увидите небольшой плюсик:

Гутенберг-Add-Block-Cross

Когда вы щелкнете по нему, он покажет ваши блоки:

Гутенберг-Add-Block-Plus-Sign

Выберите тот, который вы хотите добавить новый блок выше того, который у вас уже есть.

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

Используйте свою клавиатуру

Еще один способ добавить новый блок – нажать клавишу «Возврат» на клавиатуре:

Гутенберг-Add-Block-Enter

Это немедленно добавит новый блок абзаца на страницу.

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

Гутенберг-Change-New-Block

Или вы можете ввести косую черту (/), за которой следует имя блока, который вы хотите использовать:

Гутенберг-Change-Block-Slash

Например, если вы хотите добавить изображение, введите «/ image». Опция блокировки будет автоматически заполняться при вводе соответствующего имени.

Добавить блок с панели инструментов

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

Гутенберг-Add-Block

Прокрутите варианты или введите название блока, который вы ищете.

Переместить блок

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

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

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

Есть два способа сделать это.

Используйте стрелки перемещения

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

Gutenberg-Move-Стрелка

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

Гутенберг-Перевезу-Блок

Используйте Drag-and-Drop

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

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

Гутенберг-Grab-Drag-и-Drop

При перемещении блока в новую часть страницы убедитесь, что вы видите темную линию перед тем, как ее опустить:

Гутенберг-Move-Блок

Это позволяет вам знать, что вы перемещаете блок в доступное пространство. Без этой линии перетаскивание не сработает.

Удалить блок

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

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

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

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

Вы также можете выделить блок (перетаскивая курсор над ним), а затем нажать клавишу «Удалить». Это полезно, если вы хотите выделить и удалить более одного блока одновременно.

Создать многоразовый блок

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

Гутенберг-Create-многоразовый-Block

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

Гутенберг-Name-многоразовый

После сохранения вы сможете извлечь и использовать его так же, как и любой из блоков Гутенберга. Вы найдете его в новой категории под названием «Многоразовые»:

Гутенберг-многоразовая Категория

Тур по блокам Гутенберга

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

Давайте познакомимся с блоками:

Блокировать Категории

WordPress отлично справился с организацией своих блоков по категориям..

Общие блоки

Это ваши общие блоки:

Общие-блоки

Основные текстовые и визуальные элементы, которые вы используете на странице, будут здесь.

Блоки форматирования

Это ваши блоки форматирования:

Форматирование блоков

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

Макетные блоки

Это ваши макеты блоков:

Компоновка-блоки

Если вы хотите добавить разрывы к своему контенту (например, с большим пробелом или разделительной линией) или к специальным элементам (например, к кнопкам), вы найдете эти вещи здесь.

Блоки виджетов

Это ваши виджеты:

Виджеты-блоки

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

Вставить блоки

Это ваши встраивания:

Встраивает-блоки

Вы будете использовать их для доставки контента с других платформ. Это хорошо для встраивания таких вещей, как видео на YouTube, клипы SoundCloud и посты в Twitter.

Наиболее часто используемые блоки Гутенберга

Как видите, есть десятки доступных блоков Гутенберга. Тем не менее, есть определенные элементы, которые все используют для создания страниц или постов в WordPress, поэтому начните с изучения основ:

Блок абзаца

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

Пункт-Блок

Блок заголовка

Используйте блок «Заголовок», чтобы добавить заголовок на свою страницу..

Заголовок-Блок

Это позволяет вам вводить новые темы на странице, облегчая чтение вашего контента. Кнопки H2, H3 и H4 позволяют установить иерархию и для заголовков страниц..

Блок списка

Используйте блок Список, чтобы добавить маркированный или нумерованный список на страницу:

Список-Block

Это также полезно для улучшения читабельности.

Блок изображения

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

Изображение-Блок

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

Видеоблок

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

Видео-Block

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

Поскольку видео занимают много места, лучший вариант – сохранить файл на платформе обмена видео, такой как Vimeo или YouTube. Затем вставьте ссылку.

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

У YouTube есть один:

YouTube-Код

Как делает Vimeo:

Vimeo-Код

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

Блок кнопок

Используйте блок кнопок, чтобы направить посетителей или читателей на действия:

Кнопка-Block

Это может указывать им: «Расписание сейчас», «Зарегистрироваться», «Читать дальше» и т. Д..

Медиа и текстовый блок

Как упоминалось ранее, опция «Встроенное изображение» в блоке абзаца является неэффективным способом объединения текста и изображений. Вместо этого используйте блок Media and Text, чтобы сделать это:

Медиа-и-Text-Block

Блок столбцов

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

Колонна-Блок

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

Блоки для встраивания в социальные сети

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

Социально-Медиа-Код

Есть блоки для встраивания для Facebook, Twitter и Instagram, поэтому найдите блок для встраивания, который соответствует вашей публикации в социальных сетях.

Классический Блок

Классический блок позволяет вам продолжать создавать контент в WordPress с помощью классического редактора:

Гутенберг-Classic-Block

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

Если вы хотите преобразовать свой классический блок в блоки Гутенберга, перейдите в «Дополнительные параметры» и выберите «Преобразовать в блоки»:

Gutenberg-Convert-блоки

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

Гутенберг-преобразованные-блоки

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

Блоки плагинов WordPress

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

Например, если вы используете плагин контактной формы, например WPForms, Вы должны найти соответствующий блок для этого:

WPForms-Блок

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

Yoast, популярный плагин SEO, еще один, который добавил новые блоки для Гутенберга:

Йоаст-блоки

WooCommerce, Решение WordPress для электронной коммерции сделало то же самое:

WooCommerce-блоки

Есть также «совершенные» плагины Gutenberg, которые добавляют кучу новых блоков вашему сборщику, например Ultimate Аддоны для Гутенберга:

Окончательный-Addons Гутенберга

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

Обзор документа и боковой панели блока

Теперь, когда у вас есть редактор блоков, давайте обратим наше внимание на документ и боковую панель блока..

Когда курсор находится в блоке заголовка или где-то на странице, где блок не существует, боковая панель будет указывать на параметры документа:

Боковая панель документа

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

Вот основные из них, которые вам нужно знать:

Статус и видимость

Статус-и-ВидимостьНа этой панели вы можете настроить, кто может видеть страницу (публичную, частную или защищенную паролем), а также когда она будет опубликована (если не сразу). Если вы хотите полностью удалить страницу. Вы можете сделать это и здесь.

Постоянная ссылкаИспользуйте эту панель, чтобы изменить слаг (идентифицирующая часть URL). Например:

https://mywebsite.com/Гутенберг-блок-строитель /

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

категории

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

Теги

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

Когда курсор находится внутри любого из блоков на вашей странице (кроме заголовка), боковая панель переключится на редактор блоков:

Блок-Боковая панель

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

Например, боковая панель абзаца показывает параметры редактирования для:

Пункт-блок-боковая панель

Вы можете настроить размер вашего текста, а также цвет текста или фона блока. Если вы знаете, как использовать классы CSS, вы можете дополнительно настроить внешний вид блока, используя «Расширенные настройки».

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

Изображение-блок-боковая панель

Вы можете добавить alt-текст к изображению (важно для SEO), изменить размер изображения и связать изображение с веб-страницей..

Некоторые блоки не предлагают никаких дополнительных настроек на боковой панели, например, встраивание в Twitter:

Twitter-Block-Sidebar

Единственное, что вы можете сделать, это создать собственный класс CSS в разделе «Дополнительные настройки».

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

Что делать с панелью инструментов

Последняя часть редактора, с которой вам нужно ознакомиться, – это панель инструментов, расположенная вдоль нее:

Гутенберг-панель

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

Давайте рассмотрим основы:

Блоки

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

Gutenberg-Toolbar-блоки

Отменить повторить

Следующие две кнопки позволяют отменить (стрелка, указывающая влево) или повторить (стрелка, указывающая вправо) последнее изменение, внесенное на страницу:

Гутенберг-панель-Undo

Информация о странице

Для тех из вас, кто хочет создавать страницы, которые легко просматривают посетители, кнопка «i» (информация) дает вам обзор вашего контента:

Гутенберг-панель-Info

Ты увидишь:

  • Сколько слов вы написали.
  • Сколько существует заголовков с разбивкой названий под ним.
  • Сколько есть параграфов.
  • Сколько блоков вы использовали.

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

Структура страницы

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

Гутенберг-Block-навигация

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

Сохранить настройки

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

Gutenberg-Save-Настройка

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

Используйте «Предварительный просмотр» для просмотра страницы на вашем сайте.

Используйте «Опубликовать», чтобы перенести вашу страницу на живой сайт. После публикации страницы эта кнопка изменится на «Обновить». Используйте это, чтобы сохранить и отправить новые версии ваших страниц на сайт.

настройки

При щелчке значка шестеренки (настроек) он скрывает или показывает боковую панель Гутенберга. Вот как это выглядит при отключении:

Gutenberg-Toolbar-Настройка-инвалиды

Вот как это выглядит при включении:

Gutenberg-Toolbar-Настройка-Enabled

Больше вариантов

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

Gutenberg-Toolbar-More-Options

Посмотреть

Первый набор параметров, относящихся к «Виду»:

Гутенберг-панель-View

«Top Toolbar» перемещает панель инструментов из ваших блоков и прикрепляет ее к верхней части экрана:

Гутенберг-Top-панель инструментов

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

«Spotlight Mode» затухает любые блоки, которые не используются:

Гутенберг-Spotlight-Mode

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

«Полноэкранный режим» – это режим письма без отвлечений Гутенберга:

Гутенберг-Fullscreen-режим

Он удаляет меню WordPress сверху и слева, а также боковую панель Гутенберга справа..

Режим редактора

Следующий набор параметров для режима редактора.

Гутенберг-Options-редактор

По умолчанию Гутенберг помещает пользователей в «Визуальный редактор».

Если вы предпочитаете создавать свою страницу в HTML, вы можете переключиться на «Редактор кода»:

Гутенберг-Code-редактор

Однако более эффективный и чистый способ редактирования ваших блоков в HTML – это обрабатывать их индивидуально (поскольку вам, вероятно, не нужно редактировать весь код страницы).

Вы можете получить доступ к редактору кода в разделе «Редактировать как HTML»:

Гутенберг-Edit-HTML

Это преобразует блок в HTML:

Гутенберг-HTML-Block

Отредактируйте его так, как считаете нужным. Если вы хотите преобразовать его обратно в визуальный режим, откройте параметры блока и выберите «Редактировать визуально»:

Гутенберг-Edit-Визуально

инструменты

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

Gutenberg-Tools

Первым инструментом является «Менеджер блоков»:

Гутенберг-Block-Manager

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

«Управление повторно используемыми блоками» приведет вас к редактору многоразовых блоков:

Gutenberg-Многоразовые-блоки

Здесь ваши сохраненные блоки будут храниться. Чтобы отредактировать родительскую копию блока (или создать новую), сделайте это здесь.

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

Гутенберг-клавиатура-Shortcuts

Все, что делает опция «Копировать содержимое» – выделяет и копирует все блоки на странице. Используйте это, чтобы создать новую страницу, которая похожа по содержанию и дизайну. Просто зайдите в Pages> Add New и вставьте ваши блоки в пустую страницу.

Последний вариант здесь называется «Опции». Что он действительно делает, так это позволяет вам деактивировать определенные части настроек документа на боковой панели:

Gutenberg-Sidebar-Options

Опять же, если вы обнаружите, что есть определенные части редактора, которые вы не используете (например, атрибуты страницы), отключите их здесь, чтобы они не отвлекали от элементов, которые вы должны использовать.

Заворачивать

Поскольку WordPress использовал один и тот же редактор со дня 1, была некоторая негативная реакция, когда Гутенберг был впервые представлен.

Но если вы посмотрите на соревнование по перетаскиванию, накапливающееся вокруг WordPress (Wix, Shopify, Squarespace и т. Д.), Пришло время перемен.

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

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map