Если вы используете WordPress уже несколько лет, то вы помните, как в 2018 году ребята из WordPress выпустили редактор Gutenberg в ^(Gutenberg)WordPress 5.0 .

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

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

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

Чего ожидать от WordPress Gutenberg

Главное, что нужно знать о редакторе Gutenberg , это то, что он основан на блоках. Это означает, что все, что вам нужно добавить, управляется через блоки. Блоки в Гутенберге^(Gutenberg) включают (но не ограничиваются):

• Параграф
• Заголовок
• Изображение
• Список
• Цитировать
• Код
• предварительно отформатировано
• Цитата
• Таблица

Есть также несколько других расширенных блоков, которые редко используются. Вы можете увидеть дополнительные блоки, если установите в редактор новые плагины WordPress .^{(new WordPress plugins)}

Добавить блоки так же просто, как выбрать значок + справа под самым последним добавленным блоком.

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

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

Создание сообщений и добавление блоков

Добавление поста не изменилось по сравнению с последней версией WordPress . Просто^(Just) выберите « Сообщения^(Posts) » на левой панели навигации и выберите « Добавить новый^{(Add New)} » под ним. 

Это откроет окно редактора сообщений. Здесь тоже все по-другому. Вы увидите стандартный редактор  Gutenberg WordPress .

Добавление блочных элементов^{(Block Items)} в редакторе Гутенберга^{(Gutenberg Editor)}

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

Блоки абзацев^{(Paragraph Blocks)}

Наиболее распространенный первый блок, который люди добавляют после заголовка, — это блок абзаца. Для этого выберите « Абзац^(Paragraph) » во всплывающем окне. 

Это вставит поле блока, где вы сможете начать печатать первый абзац вашего сообщения. Форматирование блока абзаца соответствует ^(Paragraph)шрифту^{(the default font)} по умолчанию для блоков абзаца вашего сайта. 

Вот несколько советов по добавлению блоков абзацев в редакторе Гутенберга .^(Gutenberg)

• Ваш абзац может быть сколь угодно длинным. Текст автоматически перенесется на следующую строку, как в классическом редакторе.
• Если вы нажмете Enter , редактор Gutenberg автоматически создаст новый блок абзаца, однако он будет выглядеть как второй абзац с разрывом абзаца.
• Выделение любого текста в абзаце отобразит окно форматирования, в котором вы можете изменить форматирование этого текста или преобразовать блок в список или какой-либо другой тип блока.
• Выберите три точки и выберите « Удалить блок»^{(Remove block)} , чтобы удалить блок абзаца и заменить его чем-то другим.

Блоки изображения^{(Image Blocks)}

Если вы выберете блок « Изображение^(Image) », вы увидите поле « Изображение^(Image) », в котором вы можете нажать кнопку « Загрузить^(Upload) » , чтобы загрузить изображение в сообщение с вашего компьютера. Выберите ссылку « Медиатека^{(Media Library)} », чтобы использовать изображение из существующей медиатеки, или « Вставить из URL^{(Insert from URL)} » , чтобы создать ссылку на изображение с другого сайта.

Это вставит изображение в статью, где вы добавили новый блок изображения . ^(Image)Вы заметите, что можете ввести подпись к изображению непосредственно под самим изображением.

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

Список блоков^{(List Blocks)}

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

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

Форматирование списка также соответствует стилю и размеру шрифта, определенным вашей темой^{(your theme)} , поэтому не удивляйтесь, если шрифт в вашем списке выглядит иначе, чем в блоках абзаца.

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

Другие блоки^{(Other Blocks)}

Если вы хотите просмотреть все доступные блоки, выберите + , чтобы добавить блок, затем выберите Просмотреть все^{(Browse all)} , чтобы просмотреть весь список.

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

• Столы
• Файлы и медиа
• Видео
• Тег «Еще»
• Разрывы страниц и разделители
• Виджеты, такие как значки социальных сетей, облака тегов, календарь^(calendar) и виджеты плагинов WordPress.
• Встраивайте^(Embed) код для социальных сетей, медиа-сайтов, таких как YouTube и Spotify , и т. д.

Другие функции Гутенберга

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

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

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

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

Использование редактора Glutenberg^{(Glutenberg Editor)} в WordPress

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

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

• Значок редактирования^(Edit) пера позволяет переключаться в режим выбора, чтобы упростить выбор блоков. Дважды щелкните^{(Double-click)} блок, чтобы вернуться в режим редактирования .^(Edit)
• Значки отмены^(Undo) или повтора^(Redo) (изогнутые стрелки влево и вправо) отменяют или повторяют последнее редактирование.
• Значок i (Подробности) показывает количество символов, слов, заголовков, абзацев и блоков в вашем сообщении.
• Значок « Структура^(Outline) » позволяет быстро переходить к блокам в публикации в зависимости от их порядка в структуре публикации.

Для многих людей редактор Gutenberg в ^(Gutenberg)WordPress требует некоторого привыкания. Но узнав, как легко создавать, редактировать и манипулировать блоками элементов в своих сообщениях, вы обнаружите, что ваш процесс создания сообщений и страниц стал быстрее и продуктивнее.

WordPress Gutenberg Tutorial: How to Use the New Editor

If you’ve been υsing WordPress for quіte a few years, then you remember when the folks at WordPress rolled out the Gutenberg editor іn WordPress 5.0 baсk in 2018.

This new default editor was a major overhaul for editing both posts and pages on your site. It transformed the large text box that website owners were accustomed to into a very different block-based editing platform.

Some website owners hated it so much that they avoided upgrading to WordPress 5.0 and stayed with the classic default editor as long as possible. Other website owners embraced the change for its simplicity and ease-of-use.

If you’re making the transition and are curious what to expect, this WordPress Gutenberg tutorial will walk you through the main features you need to know and understand. This should make your transition as easy as possible.

What to Expect in WordPress Gutenberg

The main thing to know about the Gutenberg editor is that it’s block based. This means anything you need to add is managed via blocks. Blocks in Gutenberg include (but are not limited to):

• Paragraph
• Header
• Image
• List
• Quote
• Code
• Preformatted
• Pullquote
• Table

There are also a few other advanced blocks that are rarely used. You may see additional blocks if you install new WordPress plugins to the editor.

Adding blocks is as simple as selecting the + icon to the right under the most recent block you’ve added.

Selecting any of the blocks from the pop-up window adds that block as the next section in your page or post. 

Before we get to these blocks, let’s start from the beginning and create a new post using Gutenberg in WordPress.

Creating Posts and Adding Blocks

Adding a post remains unchanged from the last version of WordPress. Just select Posts from the left navigation bar, and select Add New underneath it. 

This will open the post editor window. This is also where everything is different. You’ll see the default Gutenberg WordPress editor. 

Adding Block Items in the Gutenberg Editor

You can type the title for your post in the title field. Then select the + icon on the right to add the first block.

Paragraph Blocks

The most common first block people add after the title is a paragraph block. To do this, select Paragraph from the pop-up window. 

This will insert a block field where you can start typing the first paragraph of your post. Formatting for the Paragraph block follows the default font for your site’s paragraph blocks. 

Here are some tips for adding paragraph blocks in the Gutenberg editor.

• Your paragraph can be as long as you like. The text will automatically wrap into the next line, just like in the classic editor.
• If you press Enter, the Gutenberg editor automatically creates a new paragraph block, however it just looks like a second paragraph with a paragraph break.
• Highlighting any text in the paragraph will show a formatting window where you can alter the formatting for that text, or modify the block into a list or some other block type.
• Select the three dots and select Remove block to delete a paragraph block and replace it with something else.

Image Blocks

If you select the Image block, you’ll see an Image box where you can select an Upload button to upload an image into your post from your computer. Select the Media Library link to use an image from your existing media library, or Insert from URL to link to an image from another site.

This will insert the image into the article where you added the new Image block. You’ll notice that you can type the caption for the image directly under the image itself.

You can use the same formatting options on the caption text as you can on the regular paragraph text.

List Blocks

When you add a new block and select List, it’ll insert the list block at that point in the article.

It’ll show one bullet, but as you type and press Enter, each new bullet will appear as you need them.

List formatting also follows the font style and size as defined by your theme, so don’t be surprised if the font in your list looks different than your paragraph blocks.

You can highlight text in the list block and you’ll see formatting options for this text if you want to change it. You can’t change the font style here, but you can bold, italics, add a hyperlink, or change the block type entirely.

Other Blocks

If you want to see all the blocks that are available, select + to add a block, then select Browse all to see the entire list.

This list is actually quite long. Anything you remember being available in the classic editor via its menu system will be included here. These include other commonly used blocks like:

• Tables
• Files and media
• Videos
• The “More” tag
• Page breaks and separators
• Widgets like social icons, tag clouds, calendar, and WordPress plugin widgets
• Embed code for social sites, media sites like YouTube and Spotify, and more

Other Gutenberg Features

You don’t have to stick with the blocks you’ve added wherever you added them. You can scroll back up in your post and select the + icon between any of the existing blocks. This will let you insert new blocks between existing ones.

You also aren’t stuck with the placement of your blocks either. In the classic WordPress editor, it wasn’t always easy moving things like images to other sections of your post without sometimes messing up the background coding.

In Gutenberg, moving elements like images is as simple as selecting the block and then selecting the up or down arrows in the pop-up menu bar to move the block up or down in the post.

Each time you select the arrow it’ll slide that block one position in whatever direction you’ve selected.

Using the Glutenberg Editor in WordPress

The post area isn’t the only place to add new blocks. You’ll notice there’s a very simple icon menu at the top of the editor where you can use the + icon to add blocks as well.

The other icons in this menu give you quick access to other Gutenberg features.

• The pen Edit icon lets you switch to select mode to more easily select blocks. Double-click a block to go back to Edit mode.
• Undo or Redo icons (left and right curved arrows) will undo or redo your last edit.
• The i (Details) icon shows you the number of characters, words, headings, paragraphs, and blocks in your post.
• The Outline icon lets you quickly navigate to blocks in your post based on their order in your post outline.

For many people, the Gutenberg editor in WordPress does take some getting used to. But after experiencing how easy it is to create, edit, and manipulate blocks of elements in your posts, you’ll find that your process of creating posts and pages is faster and more productive.

Related posts

• 9 обязательных плагинов для новых установок WordPress

• Как перейти от классического редактора WordPress к Gutenberg

• Как скрыть Quick Links на странице New tab в Edge с использованием Registry Editor

• Как переместить WordPress site от одного хоста на другой

• Как установить и настроить WordPress на Microsoft Azure

• Как использовать WP Super Cache в блоге WordPress

• Как установить WordPress на Google Cloud Platform

• Как использовать Lumen5, чтобы превратить сообщение в блоге в видео

• 8 бесплатные темы Premium WordPress для установки

• Как проверить, заблокирован ли веб-сайт из AdSense

• Как установить тестовый сайт WordPress на свой компьютер

• Как сделать WordPress Site Secure

• Лучший формат написания блога, чтобы донести свою точку зрения

• Must Have WordPress Yoast SEO Settings 2021

• Как бегать восколы быстро WordPress на Microsoft Azure

• Как добавить плавающую боковую панель в Wordpress

• Создание Child Theme в WordPress

• Как удалить все следы плагина WordPress

• Как настроить свой собственный веб-сайт, похожий на Twitter, используя тему WordPress P2

• Wix против WordPress: что лучше для создания вашего сайта?