Se você usa o WordPress há alguns anos, lembra quando o pessoal do WordPress lançou o editor Gutenberg no ^(Gutenberg)WordPress 5.0 em 2018.

Este novo editor padrão foi uma grande reformulação para editar postagens e páginas em seu site. Ele transformou a grande caixa de texto que os proprietários de sites estavam acostumados em uma plataforma de edição baseada em blocos muito diferente.

Alguns proprietários de sites odiaram tanto que evitaram atualizar para o WordPress 5.0 e permaneceram com o editor padrão clássico o maior tempo possível. Outros proprietários de sites abraçaram a mudança por sua simplicidade e facilidade de uso.

Se você está fazendo a transição e está curioso para saber o que esperar, este tutorial do WordPress Gutenberg o guiará pelos principais recursos que você precisa conhecer e entender. Isso deve tornar sua transição o mais fácil possível.

O que esperar do WordPress Gutenberg

A principal coisa a saber sobre o editor Gutenberg é que ele é baseado em blocos. ^(Gutenberg)Isso significa que tudo o que você precisa adicionar é gerenciado por meio de blocos. Os blocos em Gutenberg incluem (mas não estão limitados a):

• Parágrafo
• Cabeçalho
• Imagem
• Lista
• Citar
• Código
• Pré-formatado
• Aspas
• Tabela

Existem também alguns outros blocos avançados que raramente são usados. Você pode ver blocos adicionais se instalar novos plugins^{(new WordPress plugins)} do WordPress no editor.

Adicionar blocos é tão simples quanto selecionar o ícone + à direita sob o bloco mais recente que você adicionou.

A seleção de qualquer um dos blocos na janela pop-up adiciona esse bloco como a próxima seção em sua página ou postagem. 

Antes de chegarmos a esses blocos, vamos começar do início e criar um novo post usando Gutenberg no WordPress .

Criando postagens e adicionando blocos

Adicionar um post permanece inalterado desde a última versão do WordPress . Basta^(Just) selecionar Postagens^(Posts) na barra de navegação esquerda e selecionar Adicionar novo^{(Add New)} abaixo dela. 

Isso abrirá a janela do editor de postagem. É também aqui que tudo é diferente. Você verá o editor  padrão do WordPress do Gutenberg .^{(Gutenberg WordPress)}

Adicionando Itens de Bloco^{(Block Items)} no Editor Gutenberg^{(Gutenberg Editor)}

Você pode digitar o título da sua postagem no campo de título. Em seguida, selecione o ícone +

Blocos de parágrafos^{(Paragraph Blocks)}

O primeiro bloco mais comum que as pessoas adicionam após o título é um bloco de parágrafo. Para fazer isso, selecione Parágrafo^(Paragraph) na janela pop-up. 

Isso inserirá um campo de bloco onde você pode começar a digitar o primeiro parágrafo do seu post. A formatação do bloco de parágrafo^(Paragraph) segue a fonte padrão^{(the default font)} dos blocos de parágrafo do seu site. 

Aqui estão algumas dicas para adicionar blocos de parágrafo no editor Gutenberg .

• Seu parágrafo pode ser tão longo quanto você quiser. O texto será automaticamente quebrado na próxima linha, assim como no editor clássico.
• Se você pressionar Enter , o editor Gutenberg cria automaticamente um novo bloco de parágrafo, mas parece apenas um segundo parágrafo com uma quebra de parágrafo.
• Realçar qualquer texto no parágrafo mostrará uma janela de formatação onde você pode alterar a formatação desse texto ou modificar o bloco em uma lista ou algum outro tipo de bloco.
• Selecione os três pontos e selecione Remover bloco^{(Remove block)} para excluir um bloco de parágrafo e substituí-lo por outra coisa.

Blocos de imagem^{(Image Blocks)}

Se você selecionar o bloco Imagem^(Image) , verá uma caixa Imagem^(Image) onde poderá selecionar um botão Carregar^(Upload) para carregar uma imagem em sua postagem do seu computador. Selecione o link Biblioteca de mídia^{(Media Library)} para usar uma imagem de sua biblioteca de mídia existente ou Inserir do URL^{(Insert from URL)} para vincular a uma imagem de outro site.

Isso inserirá a imagem no artigo onde você adicionou o novo bloco de imagem . ^(Image)Você notará que pode digitar a legenda da imagem diretamente abaixo da própria imagem.

Você pode usar as mesmas opções de formatação no texto da legenda e no texto de parágrafo normal.

Listar blocos^{(List Blocks)}

Quando você adiciona um novo bloco e seleciona Lista^(List) , ele insere o bloco de lista nesse ponto do artigo.

Ele mostrará um marcador, mas conforme você digita e pressiona Enter , cada novo marcador aparecerá conforme você precisar.

A formatação da lista também segue o estilo e o tamanho da fonte conforme definido pelo seu tema^{(your theme)} , portanto, não se surpreenda se a fonte da sua lista for diferente dos blocos de parágrafo.

Você pode destacar o texto no bloco de lista e verá opções de formatação para esse texto se quiser alterá-lo. Você não pode alterar o estilo da fonte aqui, mas pode usar negrito, itálico, adicionar um hiperlink ou alterar completamente o tipo de bloco.

Outros blocos^{(Other Blocks)}

Se você quiser ver todos os blocos disponíveis, selecione + para adicionar um bloco e, em seguida, selecione Procurar todos^{(Browse all)} para ver a lista inteira.

Esta lista é realmente bastante longa. Qualquer coisa que você se lembre de estar disponível no editor clássico por meio de seu sistema de menus será incluída aqui. Estes incluem outros blocos comumente usados, como:

• Tabelas
• Arquivos e mídia
• Vídeos
• A etiqueta "Mais"
• Quebras de página e separadores
• Widgets como ícones sociais, nuvens de tags, calendário^(calendar) e widgets de plug-in do WordPress
• Incorpore^(Embed) código para sites sociais, sites de mídia como YouTube e Spotify e muito mais

Outros recursos do Gutenberg

Você não precisa ficar com os blocos adicionados onde quer que os tenha adicionado. Você pode rolar para cima em sua postagem e selecionar o ícone + entre qualquer um dos blocos existentes. Isso permitirá que você insira novos blocos entre os existentes.

Você também não está preso à colocação de seus blocos. No editor clássico do WordPress , nem sempre era fácil mover coisas como imagens para outras seções do seu post sem, às vezes, atrapalhar a codificação em segundo plano.

No Gutenberg , mover elementos como imagens é tão simples quanto selecionar o bloco e, em seguida, selecionar as setas para cima ou para baixo na barra de menu pop-up para mover o bloco para cima ou para baixo na postagem.

Cada vez que você selecionar a seta, ela deslizará o bloco uma posição em qualquer direção que você selecionou.

Usando o Editor Glutenberg^{(Glutenberg Editor)} no WordPress

A área de postagem não é o único lugar para adicionar novos blocos. Você notará que há um menu de ícones muito simples na parte superior do editor, onde você também pode usar o ícone + para adicionar blocos.

Os outros ícones neste menu oferecem acesso rápido a outros recursos do Gutenberg .

• O ícone de edição^(Edit) da caneta permite alternar para o modo de seleção para selecionar blocos com mais facilidade. Clique duas vezes em^{(Double-click)} um bloco para voltar ao modo de edição^(Edit) .
• Os ícones Desfazer^(Undo) ou Refazer^(Redo) (setas curvas para a esquerda e para a direita) desfazem ou refazem sua última edição.
• O ícone i (Detalhes) mostra o número de caracteres, palavras, títulos, parágrafos e blocos em sua postagem.
• O ícone Esboço^(Outline) permite que você navegue rapidamente para os blocos em sua postagem com base em sua ordem no esquema da postagem.

Para muitas pessoas, o editor Gutenberg no ^(Gutenberg)WordPress leva algum tempo para se acostumar. Mas depois de experimentar como é fácil criar, editar e manipular blocos de elementos em suas postagens, você descobrirá que seu processo de criação de postagens e páginas é mais rápido e produtivo.

WordPress Gutenberg Tutorial: How to Use the New Editor

Іf you’ve bеen using WordPress for quite а few years, then you remember when the folks at WordPress rolled out the Gutenberg editor in WordPress 5.0 back 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 Plugins obrigatórios para novas instalações do WordPress

• Como fazer a transição do editor clássico do WordPress para o Gutenberg

• Como esconder Quick Links em uma página New tab em Edge usando Registry Editor

• Como mover WordPress site de um host para outro

• Como instalar e WordPress configuração no Microsoft Azure

• Como rastrear Broken Links com Google Webmaster Tool

• Como configurar seu próprio site semelhante ao Twitter usando o tema P2 do WordPress

• usuários de redirecionamento de página 404 no WordPress

• Como acelerar um site WordPress em 11 etapas

• Como criar seu próprio pop-up de cupom no WordPress

• Como alterar seu URL de login do WordPress para melhor segurança

• Must Have WordPress Yoast SEO Settings 2021

• 7 dicas do WordPress para um site compatível com dispositivos móveis

• Como proteger páginas com senha em seu site WordPress

• Como fazer backup do seu site WordPress

• Criando Child Theme em WordPress

• Os 3 melhores plugins de SEO para WordPress

• Protect e WordPress website seguras contra hackers

• Mostre o trecho na página inicial de WordPress blog

• 10 plugins essenciais do WordPress para um site de pequenas empresas