Como usar o Gutenberg (Editor do WordPress)


como usar blocos de gutenbergEm 2018, o WordPress se afastou de seu editor de longa data para um apelidado de “Gutenberg”.


Ao contrário do antigo editor, os usuários do WordPress agora usam um editor moderno de blocos de arrastar e soltar para criar e personalizar sites, publicar conteúdo e vender seus serviços e produtos on-line.

Se você é um usuário antigo tentando entender o novo editor ou se é novato no WordPress, este guia ensina as regras. Você vai aprender:

  • Como os blocos de Gutenberg diferem do editor clássico.
  • Como usar o construtor de blocos para criar e editar páginas.
  • O que os blocos de Gutenberg fazem.
  • Como desbloquear configurações extras com a barra lateral.
  • Como usar a barra de ferramentas para ser mais produtivo.

Contents

The Classic Editor vs. Gutenberg Blocks

A mudança do editor clássico para os blocos de Gutenberg é um grande salto para o WordPress. Vamos ver como o editor evoluiu.

O editor clássico do WordPress

De 2003 a 2018, o WordPress forneceu aos seus usuários um editor de texto básico.

Editor clássico do WordPress

O editor clássico do WordPress era o seu típico editor WYSIWYG (“o que você vê é o que obtém”).

Em outras palavras, você digitou seu conteúdo no campo aberto, formatou-o usando a barra de ferramentas fornecida e é mais ou menos com a aparência do texto em seu site.

WordPress-WYSIWYG-Editor

É uma interface bastante simples e com a qual muitos usuários do WordPress se acostumaram ao longo dos anos. Mas tinha suas limitações.

Por exemplo:

Exemplo de página do WordPress

É assim que o conteúdo será exibido no site depois de publicado. Mas você só poderá confirmar se tudo traduzido corretamente do editor para a página usando a função “Visualizar”.

Não havia como escrever conteúdo dentro do contexto real da página. Além disso, era necessária certa familiaridade com HTML ou dependência excessiva de plug-ins para poder criar designs e layouts mais avançados.

Em 2018, o WordPress decidiu corrigir essas limitações, lançando o novo editor do WordPress (ou seja, Gutenberg).

O editor de blocos de Gutenberg

O novo editor do WordPress é um editor de blocos de arrastar e soltar.

Gutenberg

Isso significa que o conteúdo não é mais escrito em um editor principal. Blocos individuais são colocados no lugar para criar o conteúdo de uma página.

Gutenberg-Blocks

Quando cada bloco é selecionado, ele vem com uma barra de ferramentas exclusiva. Isso permite uma experiência de edição mais simplificada e personalizada, pois você só mostra os controles editoriais necessários naquele momento.

O editor Gutenberg também tornou muito mais fácil adicionar os tipos de conteúdo e layouts que, de outra forma, seriam muito demorados ou difíceis para um iniciante do WordPress fazer por conta própria.

Mais exemplos de blocos de Gutenberg

Além do mais, não há mais jogo de adivinhação. O que você cria no editor de blocos é como ele aparece no seu site. As fontes, estilo e layouts correspondem:

Exemplo-de-página-WordPress-com-Gutenberg

Um editor WordPress é melhor que o outro?

Quanto ao que é melhor – o editor clássico ou Gutenberg – você precisará descobrir isso por si mesmo.

Embora o WordPress venha instalado automaticamente com o Gutenberg, os usuários podem instalar o plug-in Editor Clássico se ainda não estiverem prontos para ir para o editor de blocos.

Existem outras opções adicionais de editor disponíveis também. Elementor e Beaver Builder são duas das alternativas mais populares do editor de arrastar e soltar, Categorias de bloco
embora sejam mais adequados para designers e desenvolvedores profissionais que precisam desbloquear mais recursos.

Por enquanto, vamos mergulhar mais fundo em Gutenberg e ter uma idéia melhor do que esperar do editor de arrastar e soltar do WordPress.

Como usar o editor de blocos Gutenberg

Vamos revisar o editor de blocos de Gutenberg configurando uma nova página (ou postagem).

Comece com o menu WordPress no lado esquerdo da tela. Se você deseja criar uma nova página da web, passe o mouse sobre “Páginas” e selecione “Adicionar novo”. Se você deseja criar uma nova postagem no blog, passe o mouse sobre “Postagens” e selecione “Adicionar nova”.

WordPress-Adicionar-Nova-Página

Adicione um título

Com sua nova página ou postagem criada, atribua a ela um título no bloco “Adicionar título”:

Gutenberg-Title-Block

Crie seu primeiro bloco

Os parágrafos geralmente compreendem a maior parte do conteúdo que colocamos em uma página da web, e é por isso que o primeiro bloco que Gutenberg nos fornece é sempre um bloco de parágrafos:

Gutenberg-Novo-Parágrafo-Bloco

Se você deseja começar com um parágrafo, adicione seu cursor ao bloco vazio que diz “Comece a escrever ou digite / para escolher um bloco”. Enquanto você digita, seu conteúdo preencherá o bloco.

Personalizar conteúdo em um bloco

Para personalizar o estilo do seu parágrafo, use a barra de ferramentas que aparece logo acima.

Alinhamento

Na maioria dos blocos de Gutenberg, você poderá alterar o alinhamento do conteúdo dentro do bloco:

Alinhamento de Gutenberg

A esquerda é o padrão. Você também pode optar por alinhar ao centro ou alinhar à direita o seu conteúdo.

Formatação

Sempre que houver texto dentro de um bloco, você pode formatá-lo com negrito:

Gutenberg-Paragraph-Bold

Coloque o texto em itálico:

Gutenberg-Paragraph-Italic

Ou adicione um hiperlink:

Gutenberg-Paragraph-Link

Se você deseja abrir seus links em uma nova janela do navegador, clique na seta para baixo na barra de hiperlink. Quando terminar de fazer as alterações, clique na seta “Voltar” para salvar o link.

Opções de estilo adicionais

Se você clicar na seta para baixo na barra de ferramentas, encontrará opções adicionais de estilização de texto:

Gutenberg-More-Text-Options

“Code” estiliza seu texto como se estivesse escrito em um editor de código:

Código de parágrafo de Gutenberg

A “imagem embutida” permite envolver o texto em torno de uma imagem:

Gutenberg-Paragraph-InlineImage

Como você pode ver, essa não é uma maneira eficiente de emparelhar imagens e texto um ao lado do outro em Gutenberg. Analisaremos outra maneira de fazer isso mais tarde.

A última opção aqui permite adicionar uma rasurada através do texto destacado:

Gutenberg-Parágrafo-Tachado

Mais opções de bloqueio

O último botão da barra de ferramentas sempre revela mais opções de bloqueio:

Gutenberg-More-Block-Options

Essas opções serão as mesmas, independentemente do tipo de bloco que você está editando.

Vamos recapitular rapidamente o que eles fazem:

  • Ocultar configurações de bloco: Faz com que a barra lateral desapareça.
  • Duplicado: Cria uma réplica exata desse bloco.
  • Inserir antes: Adiciona um novo bloco vazio acima deste.
  • Inserir depois: Adiciona um novo bloco vazio abaixo deste.
  • Editar como HTML: Transforma o bloco em um editor de código se você deseja escrever em HTML.
  • Adicionar a blocos reutilizáveis: Salva o bloco para que você possa reutilizá-lo em outro local do site.
  • Remover bloco: Exclui o bloco.

Bloco de transformação

Há um outro botão na barra de ferramentas que você precisa conhecer:

Gutenberg-Switch-Blocks

Esse botão nem sempre fica assim, lembre-se de que o primeiro botão permite transformar o bloco atual em um relacionado.

Por exemplo, você pode transformar um bloco baseado em texto como Parágrafo em Título, Lista ou Citação. Você não pode, no entanto, transformar algo como um parágrafo em uma imagem ou em uma linha separadora. Você precisará de um novo bloco para isso.

Adicionar um novo bloco

Para adicionar um novo bloco à sua página, você tem várias opções.

Inserir Antes / Depois

Você já viu as opções Inserir antes / Inserir depois na barra de ferramentas do seu bloco. Essa é uma maneira de fazer isso.

Se você clicar fora do bloco existente e passar o mouse sobre ele, verá um pequeno sinal de adição:

Gutenberg-Adicionar-Block-Cross

Quando você clica, ele revela seus blocos:

Gutenberg-Add-Block-Plus-Sign

Escolha aquele que você deseja adicionar ao novo bloco acima daquele que você já possui.

Se você passar o mouse sobre a parte inferior do bloco, verá o mesmo sinal de mais. A única diferença é que ele adicionará um novo bloco abaixo do que você possui.

Use seu teclado

Outra maneira de adicionar um novo bloco é pressionando a tecla “Return” no teclado:

Gutenberg-Adicionar-Bloquear-Entrar

Isso adicionará imediatamente um novo bloco de parágrafo à página.

Se você quiser alterá-lo para um tipo diferente de bloco, use o sinal de mais à esquerda do novo bloco:

Gutenberg-Change-New-Block

Ou você pode digitar uma barra (/) seguida pelo nome do bloco que deseja usar:

Gutenberg-Change-Block-Slash

Por exemplo, se você deseja adicionar uma imagem, digite “/ image”. A opção de bloqueio será preenchida automaticamente quando você digitar o nome correspondente.

Adicionar um bloco na barra de ferramentas

Você sempre pode usar o recurso básico de adição de blocos na barra de ferramentas:

Gutenberg-Add-Block

Role pelas opções ou digite o nome do bloco que você está procurando.

Mover um bloco

Depois de começar a criar blocos, você pode decidir não gostar da ordem em que eles aparecem. Ou talvez você tenha adicionado um bloco acima quando deveria estar abaixo.

Não é necessário excluir blocos ou copiar e colar conteúdo de um bloco para outro. A solução é simples.

Gutenberg é um editor de blocos de arrastar e soltar. Isso significa que você pode mover seus blocos para onde quiser com facilidade.

Existem duas maneiras de fazer isso.

Use as setas de movimentação

A primeira opção é usar as setas de movimento no lado esquerdo de cada bloco. Passe o mouse sobre o bloco que deseja mover e você encontrará uma seta para cima e para baixo:

Gutenberg-Move-Arrows

Se tudo o que você quer fazer é mover um bloco para cima ou para baixo uma vez, esta opção funciona bem.

Bloco movido por Gutenberg

Use o recurso Arrastar e Soltar

Se você deseja fazer um rearranjo mais drástico de seus blocos, use o recurso de arrastar e soltar.

Está localizado no mesmo local que as setas. Passe o mouse sobre o bloco que você deseja mover e segure os pontos que aparecem no meio. Você verá o cursor mudar para uma mão ao fazê-lo:

Arrastar e soltar Gutenberg

Ao mover o bloco para uma nova parte da página, verifique se uma linha escura aparece antes de soltá-la:

Gutenberg-Move-Block

Isso permite que você saiba que está movendo o bloco para o espaço disponível. Sem essa linha, o arrastar e soltar não funcionará.

Excluir um bloco

Se você decidir remover um bloco completamente, também terá opções com isso.

Você já viu um desses. Está dentro das opções adicionais do seu bloco. Basta clicar em “Remover bloco” e ele será excluído.

Você sempre pode excluí-lo de uma maneira antiquada também. Coloque o cursor dentro do bloco e use o botão “Excluir” do teclado para removê-lo.

Observe, no entanto, que, se for um bloco baseado em texto, você deverá remover o conteúdo primeiro para poder excluí-lo dessa maneira. Para qualquer outra coisa – uma imagem, widget incorporado etc. – você pode simplesmente usar a tecla “Excluir”.

Você também pode destacar o bloco (arrastando o cursor sobre ele) e depois pressionar a tecla “Excluir”. Isso é útil se você deseja destacar e excluir mais de um bloco de cada vez.

Criar um bloco reutilizável

Blocos reutilizáveis ​​são úteis quando você deseja criar um elemento que possa ser usado em todo o site, como um bloco promocional para as postagens do seu blog ou uma frase de chamariz.

Gutenberg-Create-Reusable-Block

Em vez de tentar recriar o bloco nas páginas necessárias, abra as opções do bloco e clique em “Adicionar a blocos reutilizáveis”. Em seguida, dê um nome a ele:

Gutenberg-Name-Reusable

Depois de salvo, você poderá recuperá-lo e usá-lo da mesma maneira que faria com qualquer um dos blocos de Gutenberg. Você o encontrará em uma nova categoria chamada “Reutilizável”:

Categoria Gutenberg reutilizável

Um passeio pelos blocos de Gutenberg

O editor clássico do WordPress deixou muito a desejar em termos de ajudar os usuários a criar conteúdo e layouts complexos. Os blocos de Gutenberg acabam com esse obstáculo.

Vamos nos familiarizar com os blocos:

Categorias de bloco

O WordPress fez um bom trabalho ao organizar seus blocos em categorias.

Blocos comuns

Estes são os seus blocos comuns:

Blocos comuns

O texto básico e os elementos visuais que você usa em uma página estarão aqui.

Blocos de formatação

Estes são os seus blocos de formatação:

Blocos de formatação

A maioria desses blocos são compatíveis com o desenvolvedor, portanto você pode não precisar muito disso. Os blocos de tabela e pull quote podem ser úteis.

Blocos de layout

Estes são os seus blocos de layout:

Blocos de layout

Se você deseja adicionar quebras ao seu conteúdo (como com espaço grande ou linha separadora) ou elementos especiais (como um botão), você encontrará essas coisas aqui.

Blocos de widgets

Estes são os seus widgets:

Widgets-Blocos

Na maioria das vezes, esses são os elementos que devem aparecer na barra lateral do seu blog, e não aparecer nas suas páginas. As únicas exceções que você encontrará são blocos criados por outros plugins, como este exemplo de WPForms.

Incorpora blocos

Estas são as suas incorporações:

Blocos de incorporação

Você os usará para trazer conteúdo de outras plataformas. Isso é bom para incorporar coisas como vídeos do YouTube, clipes do SoundCloud e postagens do Twitter.

Blocos de Gutenberg mais usados

Como você pode ver, existem dezenas de blocos de Gutenberg disponíveis. Dito isto, existem certos elementos que todos usam para criar páginas ou postagens no WordPress, então comece aprendendo o básico:

Bloco de parágrafo

Use o bloco Parágrafo para adicionar texto sem formatação à sua página.

Bloco de parágrafo

Bloco de cabeçalho

Use o bloco Título para adicionar um cabeçalho à sua página.

Bloco de direção

Isso permite que você introduza novos tópicos na página, facilitando a leitura do seu conteúdo. Os botões H2, H3 e H4 permitem também estabelecer uma hierarquia para os títulos das páginas.

Bloco de lista

Use o bloco Lista para adicionar uma lista numerada ou com marcadores à página:

Bloco de Lista

Isso também é útil para melhorar a legibilidade.

Bloco de imagem

Use o bloco Imagem para adicionar uma imagem à sua página.

Bloco de imagem

Você pode fazer upload de uma imagem da sua unidade ou selecionar uma que já exista na sua biblioteca de mídia.

Bloco de vídeo

Use o bloco de vídeo para incorporar uma imagem em sua página.

Bloco de vídeo

Você pode enviar um arquivo de vídeo, escolher um da sua biblioteca ou extraí-lo de um link.

Como os vídeos ocupam muito espaço, a melhor opção é salvar seu arquivo em uma plataforma de compartilhamento de vídeos como o Vimeo ou o YouTube. Em seguida, incorpore-o com um link.

Você não usará o bloco de vídeo para isso. Em vez disso, procure a incorporação correspondente.

O YouTube tem um:

Incorporar YouTube

Como o Vimeo:

Vimeo-Embed

Você deve fazer o mesmo com todos os arquivos de áudio (como podcasts ou trilhas sonoras) que deseja adicionar à página. Use o bloco de áudio ou a incorporação correspondente (como no Spotify) para fazer isso.

Bloco de botão

Use o bloco de botões para direcionar seus visitantes ou leitores a agirem:

Bloco de botão

Isso pode direcioná-los para: “Agende agora”, “Inscreva-se”, “Leia mais” etc..

Bloco de mídia e texto

Como mencionado anteriormente, a opção Imagem embutida no bloco de parágrafos é uma maneira ineficiente de mesclar texto e imagens. Em vez disso, use o bloco Mídia e Texto para fazer isso:

Bloco de mídia e texto

Bloco de colunas

Outra maneira de colocar dois blocos diferentes (do mesmo ou de tipo diferente) um ao lado do outro é usando o bloco Colunas:

Bloco de colunas

Para adicionar colunas adicionais à direita ou à esquerda, passe o mouse sobre os blocos dentro da coluna e pressione o sinal de mais. É o mesmo que adicionar um novo bloco, mas isso os adicionará horizontalmente.

Blocos de incorporação de mídias sociais

Em vez de usar o código de incorporação das mídias sociais para colocar uma postagem em sua página, adicione o link à postagem aqui:

Incorporar mídia social

Existem blocos de incorporação para o Facebook, Twitter e Instagram; portanto, encontre o bloco de incorporação que corresponde à sua postagem nas mídias sociais.

Bloco clássico

O bloco clássico permite continuar a criar conteúdo no WordPress usando o editor clássico:

Bloco clássico de Gutenberg

O bloco clássico também entra em jogo sempre que um site passa do editor clássico para o editor Gutenberg. Gutenberg não tentará converter automaticamente seu texto em seus próprios blocos. Apenas os coloca na interface clássica do editor.

Se você deseja converter seu bloco clássico em blocos de Gutenberg, vá para “Mais opções” e escolha “Converter em blocos”:

Gutenberg-Convert-Blocks

Ele fará o possível para converter cada elemento do seu editor em um bloco correspondente:

Blocos convertidos de Gutenberg

Lembre-se de revisar os blocos gerados quanto a erros antes de salvar suas alterações.

Blocos de plug-in do WordPress

A maioria dos plugins populares usados ​​pelos usuários do WordPress é compatível com Gutenberg. Em alguns casos, esses plugins criaram blocos especiais que aparecem no seu editor.

Por exemplo, se você estiver usando um plug-in de formulário de contato como WPForms, você deve encontrar um bloco correspondente para ele:

WPForms-Block

Basta criar seu formulário no plug-in e localizá-lo no menu suspenso fornecido aqui. Não é mais necessário rastrear e colar os códigos de acesso do formulário.

Yoast, um popular plugin de SEO, é outro que adicionou novos blocos ao Gutenberg:

Yoast-Blocks

WooCommerce, A solução de comércio eletrônico do WordPress, fez o mesmo:

WooCommerce-Blocks

Também existem plugins Gutenberg “avançados” que adicionam vários novos blocos ao seu construtor, como Ultimate Addons para Gutenberg:

Ultimate-Addons-Gutenberg

Esses tipos de plugins ampliam a funcionalidade do seu construtor de blocos. Se você estiver criando um site que precisa de elementos especiais (como Google Maps, blocos de depoimentos ou funcionalidade de comércio eletrônico), pode adicioná-los ao Gutenberg com plug-ins como estes.

Uma visão geral do documento e da barra lateral do bloco

Agora que você baixou o editor de blocos, vamos voltar nossa atenção para o documento e bloquear a barra lateral.

Quando o cursor estiver no bloco de título ou em algum lugar da página onde não existe um bloco, a barra lateral apontará para as configurações do documento:

Barra lateral do documento

Isso permite que você controle itens como o status e a aparência da página.

Aqui estão os principais que você precisa saber:

Status e visibilidade

Status e visibilidadeNesse painel, você pode ajustar quem pode ver a página (pública, privada ou protegida por senha), bem como quando ela é publicada (se não imediatamente). Se você deseja excluir a página completamente. Você pode fazer isso aqui também.

PermalinkUse este painel para alterar a lesma (a parte de identificação da URL). Por exemplo:

https://mywebsite.com/gutenberg-block-builder /

Imagem em destaqueA imagem em destaque é a imagem em miniatura que as pessoas veem quando suas postagens aparecem no seu feed principal. É também o que as plataformas de mídia social usam ao exibir visualizações de seus links.

Categorias

CategoriasIsso está disponível apenas para postagens do blog. Use isso para manter seus tópicos organizados.

Tag

TagEssa é outra configuração disponível apenas para postagens do blog. Use isso para adicionar palavras-chave que aparecem na sua postagem e ajudar os leitores a encontrar conteúdo sobre tópicos relacionados.

Quando o cursor é colocado dentro de qualquer um dos blocos da sua página (exceto o título), a barra lateral muda para um editor de blocos:

Block-Sidebar

Essa barra lateral oferece opções de edição adicionais para seus blocos, se você desejar. A barra lateral do bloco será alterada com base no tipo de bloco em que você está trabalhando.

Por exemplo, a barra lateral do parágrafo mostra opções de edição para:

Barra lateral de bloco de parágrafo

Você pode ajustar o tamanho do seu texto, bem como a cor do texto ou o plano de fundo do bloco. Se você souber usar classes CSS, poderá personalizar ainda mais a aparência do bloco usando “Configurações avançadas”.

A barra lateral da imagem, por outro lado, fornece as seguintes configurações:

Barra lateral da imagem

Você pode adicionar texto alternativo à imagem (importante para SEO), alterar o tamanho da imagem e vincular a imagem a uma página da web.

Alguns blocos não oferecem configurações adicionais na barra lateral, como a incorporação do Twitter:

Barra lateral do bloco do Twitter

A única coisa que você pode fazer é criar uma classe CSS personalizada em “Configurações avançadas”.

Bottom line: se você sentir que não pode editar completamente o seu bloco com a barra de ferramentas, verifique a barra lateral para opções adicionais.

O que fazer com a barra de ferramentas

A última parte do editor com a qual você precisa se familiarizar é a barra de ferramentas localizada na parte superior:

Barra de ferramentas Gutenberg

Pode parecer nada além de um local para armazenar os botões “Visualizar” e “Publicar”, mas há muito mais que você pode e devemos use a barra de ferramentas para.

Vamos revisar o essencial:

Blocos

O primeiro botão na barra de ferramentas é onde você pode acessar novos blocos:

Blocos da barra de ferramentas de Gutenberg

Desfazer refazer

Os próximos dois botões permitem desfazer (a seta apontando para a esquerda) ou refazer (a seta apontando para a direita) a última alteração feita na página:

Desfazer-barra-de-ferramentas-Gutenberg

Informações da página

Para aqueles que desejam criar páginas fáceis de serem escaneadas pelos visitantes, o botão “i” (informações) fornece uma visão geral do seu conteúdo:

Gutenberg-Toolbar-Info

Você vai ver:

  • Quantas palavras você escreveu.
  • Quantos títulos existem, com uma descrição detalhada dos títulos abaixo.
  • Quantos parágrafos existem.
  • Quantos blocos você usou.

São as palavras e a contagem de cabeçalhos que são as informações mais importantes a serem focadas aqui.

Estrutura da página

A próxima parte da barra de ferramentas revela cada um dos blocos que você usou para criar sua página:

Navegação por blocos de Gutenberg

Use isso para rolar instantaneamente para o bloco em que você deseja trabalhar. Isso é útil para editar conteúdo em páginas e postagens mais longas.

Salvar configurações

Você usará esses três primeiros botões em todas as páginas ou postagens criadas:

Configurações de salvamento de Gutenberg

Use “Salvar rascunho” para salvar suas alterações em particular enquanto trabalha em uma página.

Use “Visualizar” para visualizar a página em seu site.

Use “Publicar” para enviar sua página para o site ativo. Depois que a página for publicada, esse botão mudará para “Atualizar”. Use isso para salvar e enviar novas versões de suas páginas para o site.

Definições

Quando o ícone de roda dentada (configurações) é clicado, ele oculta ou mostra a barra lateral do Gutenberg. É assim que fica quando desativado:

Gutenberg-Toolbar-Settings-Disabled

É assim que fica quando ativado:

Configurações da barra de ferramentas Gutenberg ativadas

Mais opções

O último botão na barra de ferramentas revela opções e ferramentas adicionais. Use isso se desejar personalizar seu espaço de trabalho Gutenberg.

Gutenberg-Toolbar-More-Options

Visão

O primeiro conjunto de opções pertencentes à “Visualização”:

Gutenberg-Toolbar-View

“Barra de ferramentas superior” move a barra de ferramentas para fora de seus blocos e a cola na parte superior da tela:

Gutenberg-Top-Toolbar

As opções de edição ainda mudam com base no bloco que você selecionou. A única diferença é que ele está localizado apenas na parte superior da página agora.

O “Modo Spotlight” diminui todos os blocos que não estão em uso:

Modo destaque de Gutenberg

Se você quiser ajuda para focar em um bloco de cada vez, esta é uma ferramenta útil para ativar.

“Modo tela cheia” é o modo de escrita sem distrações de Gutenberg:

Modo de tela cheia de Gutenberg

Ele remove os menus do WordPress na parte superior e esquerda, bem como a barra lateral de Gutenberg à direita.

Modo Editor

O próximo conjunto de opções é para o modo editor.

Gutenberg-Opções-Editor

Por padrão, Gutenberg coloca os usuários no “Editor Visual”.

Se você preferir compor sua página em HTML, pode mudar para “Editor de código”:

Editor de código Gutenberg

No entanto, uma maneira mais eficaz e limpa de editar seus blocos em HTML é manipulá-los individualmente (já que você provavelmente não precisa editar o código da página inteira).

Você pode acessar o editor de código em “Editar como HTML”:

Gutenberg-Edit-HTML

Isso converterá o bloco em HTML:

Bloco HTML de Gutenberg

Edite-o como achar melhor. Se você deseja convertê-lo novamente para o modo visual, abra as opções de bloqueio e escolha “Editar visualmente”:

Gutenberg-Edit-Visually

Ferramentas

O Gutenberg também vem com um conjunto de ferramentas que permitem que você possa otimizar sua experiência no editor:

Gutenberg-Tools

A primeira ferramenta é o “Block Manager”:

Gutenberg-Gerente de Blocos

Ao contrário da ferramenta de navegação de blocos que vimos anteriormente, essa permite desativar os blocos que você não usa. Dessa forma, quando chegar a hora de procurar um novo bloco, você não precisará peneirar os blocos que nunca usará.

“Gerenciar blocos reutilizáveis” o levará ao editor de blocos reutilizáveis:

Blocos reutilizáveis ​​de Gutenberg

É aqui que seus blocos salvos serão armazenados. Para editar a cópia pai do bloco (ou criar uma nova), faça-o aqui.

Embora Gutenberg certamente tenha facilitado a criação de conteúdo no WordPress, algumas das ações podem ser entediantes. Ao usar os “Atalhos” de Gutenberg, você pode fazer coisas como desfazer sua última edição, duplicar um bloco, colocar em itálico o texto destacado e salvar suas alterações apenas com o teclado.

Atalhos de teclado Gutenberg

Toda a opção “Copiar conteúdo” é realçada e copiada todos os blocos da página. Use isso para criar uma nova página com conteúdo e design semelhantes. Vá para Páginas> Adicionar novo e cole seus blocos na página vazia.

A última opção aqui é chamada “Opções”. O que realmente faz, no entanto, é permitir que você desative certas partes das configurações do documento na barra lateral:

Gutenberg-Sidebar-Opções

Novamente, se você achar que há certas partes do editor que não usa (como Atributos da página), desative-as aqui para que não se distraiam dos elementos que você precisa usar.

Embrulhar

Como o WordPress usava o mesmo editor desde o primeiro dia, houve alguma reação quando Gutenberg foi introduzido pela primeira vez..

Mas se você olhar para a competição de arrastar e soltar em torno do WordPress (Wix, Shopify, Squarespace etc.), era hora de mudar.

Essa evolução do editor valeu a pena, permitindo que o WordPress atenda usuários de todos os níveis. Seus usuários agora colhem os seguintes benefícios que vêm com a criação de sites com um editor de blocos:

  • Uma visualização personalizada do editor que o torna mais produtivo.
  • Mais fácil de criar e personalizar conteúdo.
  • Criação de conteúdo mais avançada sem o conhecimento técnico necessário anteriormente.
  • Blocos reutilizáveis ​​aceleram o design e garantem consistência em todo o site.
  • Mais fácil adicionar e configurar elementos de conversão (como botões e formulários de apelo à ação).
  • Plugins e temas populares são compatíveis com Gutenberg.
  • Tempo mais rápido para o lançamento.

A partir de 2022, o editor clássico não estará mais disponível. Então, agora é a hora perfeita para descobrir como você fará o Gutenberg trabalhar para você.

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