Está confirmado que o editor Gutenberg será de fato o editor de artigos padrão do WordPress. EUai Consegui testar este último e rapidamente percebi que muitos usuários ficarão perdidos com este novo editor, daí o motivo deste tutorial. Então, juntos, percorreremos os fundamentos do editor Gutenberg e cobriremos alguns pontos avançados.

Antes de começar

Se você não tem a capacidade de instalar o WordPress versão 5.0 (que ainda está em desenvolvimento), agora você pode download grátis Gutenberg e teste em sua versão do WordPress (estou começando um ambiente experimental novamente). No entanto, admito ter ficado um pouco surpreso ao olhar para as classificações dadas a este novo editor, mais da metade dos meus usuários deram uma classificação de 1/5.

preview gutenberg rating wordpress.jpeg

Não vou parar nisso e testar para ter uma ideia.

Apresentação da interface

Para usar o Gutenberg, você deve esboço um artigo (obviamente), como você fez no passado, ou seja, " Artigos> Adicionar"

Gutenberg presentation.jpeg

O que percebi desde o início é que o editor se concentrou muito na ausência de distração e explorou toda a largura da página.

versão antiga wordpress.jpeg

Mesmo que tenhamos que reconhecer que há muitas margens em Gutenberg, o fundo branco eu acho que é uma cor que causa menos distração. Você notará que Gutenberg se parece muito com o editor de postagem do Calypso (WordPress.com).

editor de calypso wordpress.jpeg

Localização dos elementos

Seção de backup

O layout mudou enormemente. A área de salvar itens agora está localizada na parte superior. Em vez disso, é uma seção de acesso rápido ao botão Salvar.

seção de backup gutenberg.jpeg

O botão com o ícone de configuração permite fechar a aba abaixo. Os botões que nos permitiam alternar entre o editor visual e o editor de texto agora estão localizados no mesmo painel na extremidade direita. Para visualizar o artigo, você deve clicar no olho localizado antes do botão “Publicar…”.

controle avançado gutenberg.jpeg

A seção para selecionar a imagem em destaque para categorias e visibilidade do artigo está à direita, como de costume. Você precisa ter certeza de que o " ISO Está selecionado.

categoria de seção de gutenberg e imagem no primeiro.jpeg

Seção de bloco

Essa é a inovação que Gutenberg traz. Você deve saber que agora qualquer parágrafo sobre Gutenberg deve ser considerado um bloco. Os blocos têm a possibilidade de serem ajustáveis ​​de forma única, mas também podem ser facilmente movidos por todo o documento.

Depois de colocar o cursor sobre o seu parágrafo, para acessar as funcionalidades do bloco selecionado, você deve clicar na guia do bloco à direita.

bloqueie gutenberg wordpress.jpeg

Com essas configurações, você pode, por exemplo, definir uma cor de fundo que se aplica apenas ao bloco, bem como alterar o tamanho da fonte do bloco. Acho bastante conveniente.

Opções de formatação

A formatação aparecerá acima de cada bloco.

opção formatting.jpeg

Você também exibirá as opções de layout na parte superior clicando na opção Editor e clicando em "Definir a barra de ferramentas na parte superior".

exibir opções de formatação no top.jpeg

Como adicionar blocos personalizados

Você não está limitado a usar o bloco de parágrafo. Para adicionar mais blocos, você deve clicar no ícone + localizado no canto superior esquerdo.

bloco diferente gutenberg.jpeg

Isso permite que você acesse os diferentes blocos disponíveis. Também é neste local que você pode acessar os diferentes blocos oferecidos pelo temas e plug-ins. Você ainda terá a opção de salvar seus próprios blocos personalizados. Acho que facilitará a edição de artigos semelhantes.

Isso é tudo por este tutorial, continuaremos em um próximo colocando em prática tudo o que observamos neste tutorial.