Acho que você vai concordar quando eu disser: todo esse negócio de Gutenberg é confuso.
Em primeiro lugar, o novo editor de blocos é difícil de usar ou o quê? Quero dizer, você não sabe para onde foram todas as suas ferramentas favoritas. Agora, você provavelmente demorou mais para criar um post, certo?
Talvez adicionar um link (afiliado ou não) tenha lhe dado uma grande curva e você se sentiu desapontado. Talvez você tenha tido problemas para adicionar uma imagem ao lado do seu texto.
Talvez você tenha tentado adicionar várias colunas e as coisas não funcionaram conforme o esperado. Se esse não for o caso, talvez você não consiga adicionar seus arquivos PDF facilmente ou veja a temida mensagem “Falha na atualização”.
Bem, não se preocupe mais; Eu estava na sua posição exata não muito tempo atrás, mas agora acho Gutenberg uma emoção de usar. Há uma curva de aprendizado, sim, mas no final do post de hoje, você pensará em Gutenberg de maneira diferente.
O que é o Editor Gutenberg?
Você está olhando para o Gutenberg, o editor de blocos padrão do WordPress
Se você estiver usando o WordPress 5.0 e superior, você deve ter se deparado com o novo e brilhante editor do WordPress, conhecido como Gutenberg.
E assim como muitos outros usuários, você quer usar o editor revolucionário, mas está hesitante porque Gutenberg é complicado .
Ou talvez quando você conheceu Gutenberg, várias coisas não funcionaram. Afinal, os desenvolvedores estavam e ainda estão fazendo temas e plugins compatíveis com o editor de blocos.
Então, você rapidamente reverteu para o Editor Clássico , que, aliás, está tudo bem para nós. Lembre-se de que o WordPress não suportará o Editor Clássico após 2022. Além disso, você está perdendo todas as vantagens extras que o Gutenberg oferece.
Em termos de funcionalidade, o Classic Editor e o Gutenberg fazem a mesma coisa; você sabe, ambas as ferramentas ajudam você a criar conteúdo sem codificação.
No entanto, estamos tão acostumados com o antigo editor WYSIWYG que achamos a adaptação à nova interface do usuário do Gutenberg um pouco estranha, se não totalmente confusa. Pelo menos é o que eu acho.
Mas, o que exatamente é Gutenberg?
Gutenberg é o novo editor padrão do WordPress. É diferente do editor visual/texto tradicional; Gutenberg usa blocos de conteúdo como muitos construtores de páginas modernos.
Ele vem com recursos mais intuitivos do que o Classic Editor, o que significa que você pode criar conteúdo de mídia avançada em tempo real. Agora, você pode criar layouts extraordinários rapidamente, esteja trabalhando com postagens ou páginas do WordPress.
E com alguns complementos, o Gutenberg pode competir favoravelmente com os construtores de páginas do WordPress estabelecidos , como Brizy, Elementor e Divi.
A única desvantagem é que os construtores de páginas geralmente oferecem mais recursos porque são principalmente construtores de páginas! Ao mesmo tempo, Gutenberg ainda é bastante jovem, e você só pode esperar que o editor de blocos cresça aos trancos e barrancos.
No post de hoje, vamos nos divertir criando um post WordPress com o editor Gutenberg. Meu objetivo é cobrir todos os pequenos detalhes e recursos para que você possa usar o Gutenberg para criar conteúdo como os profissionais.
Você está pronto? Se sim, vamos criar esse post do WordPress.
Como criar um post WordPress com Gutenberg
Se você administra um site WordPress, provavelmente cria mais posts do que páginas. Na seção a seguir, criamos um post WordPress em Gutenberg do zero. Espero que você se divirta tanto quanto eu ao testar o Gutenberg.
Isso fora do caminho, navegue até Posts> Adicionar novo , conforme destacamos na captura de tela abaixo.
Fazer isso leva você diretamente ao editor Gutenberg mostrado abaixo.
Bem legal, hein? Agora, vamos arregaçar as mangas e começar a trabalhar.
Adicionando um título
Você não pode escrever um post sem um título sólido. O bom é que o Gutenberg torna incrivelmente fácil adicionar um título.
O primeiro bloco que você vê é o Título na parte superior do documento conforme detalhamos na imagem acima. Para criar um título para sua postagem, digite dentro do bloco. Simples como A, B, C.
Precisa editar o link permanente? Você pode fazer isso facilmente no bloco de título clicando no botão Editar , conforme mostrado abaixo.
Depois de adicionar seu título, pressione a tecla ENTER para iniciar uma nova linha. Ah, sim, o Gutenberg preserva a navegação nativa que você adorava no editor clássico do WordPress.
Adicionando um novo parágrafo
Pressionar a tecla ENTER cria um novo bloco de parágrafo , como mostrado acima. Antes de digitar qualquer texto, o bloco apresenta algumas opções. Veja a imagem numerada abaixo para mais detalhes.
Notas. Você pode:
- Converta o novo bloco de parágrafo em qualquer outro bloco, por exemplo, imagem, título, capa, galeria, WooCommerce, formulário, etc.
- Use o atalho para alterar o bloco de parágrafo em um bloco de imagem
- Altere o bloco de parágrafo em um bloco de título, ou seja, H2, H3 e H4
- Transforme o bloco de parágrafo em um bloco de imagem de capa
Para fins de ilustração, vou reservar o primeiro parágrafo para a introdução do post. Depois de adicionar algum texto, uma barra de ferramentas de formatação aparece como mostrado abaixo.
Graças à barra de ferramentas de formatação, você pode:
- Transforme o parágrafo em um versículo, citação, título, lista, código e texto pré-formatado
- Negrito , Itálico ,tachado, e sublinhe o conteúdo
- Alinhar texto à esquerda, direita, centralizar e justificar
- Adicionar um link que também pode ser aberto em uma nova guia
- Insira uma imagem embutida (sim, ela existe!)
- Ocultar configurações de bloqueio
- Duplique o bloco
- Insira um bloco antes ou depois do bloco atual (no nosso caso, esse é o primeiro parágrafo, então não estamos adicionando nada antes, apenas depois.) Você pode adicionar um bloco de imagem de capa antes do primeiro parágrafo, se desejar, porque parece Boa
- Edite o bloco como HTML
- Adicione o bloco atual a blocos reutilizáveis
para poder usá-lo em outras postagens - Remova o bloco completamente
Você pode personalizar ainda mais o bloco de parágrafo com as opções disponíveis na guia Bloco encontrada no menu da barra lateral, conforme mostrado abaixo.
Algumas observações sobre a imagem acima:
- Escolha a guia Bloquear aqui para ver todas as opções e configurações de bloqueio
- Selecione o tamanho da fonte e ative o Drop Cap aqui
- Adicione cor de fundo ao seu parágrafo. Eu configurei para azul para fins de ilustração. Você também pode personalizar a cor do texto. Em ambos os casos, você pode adicionar cores personalizadas ilimitadas
- Você pode adicionar uma classe CSS personalizada aqui, o que significa que você pode adicionar estilos CSS adicionais ao seu bloco
- O fundo azul e o Drop Cap já aplicados no editor Gutenberg
A guia Documento na barra lateral
Há outra guia no menu da barra lateral; guia Documento como mostrado abaixo.
Aqui, as notas para a imagem acima:
- Clique aqui para alternar para a guia Documento
- Aqui você pode agendar uma postagem, definir a visibilidade como Privada ou Pública , definir uma postagem para o status de Revisão Pendente , escolher o formato da postagem e criar uma postagem fixa
- A seção permite que você edite seu link permanente
- Você pode selecionar ou criar novas categorias aqui
- Adicione tags à sua postagem
- Definir imagem em destaque
- Criar um trecho manual
- Permitir comentários, pingbacks e trackbacks
Como você pode ver, você tem muitas opções para criar um bloco de parágrafo (e todo o post) da maneira que desejar. A propósito, blocos diferentes vêm com configurações diferentes, como aprenderemos em um minuto.
Após o primeiro parágrafo, pressione a tecla ENTER novamente para criar uma nova linha (ou bloco de parágrafo). Agora, vamos adicionar uma imagem abaixo do primeiro parágrafo.
Adicionando imagens no Gutenberg
Dizem que uma imagem fala mais que mil palavras, e um post de blog sem imagens é, bem, monótono. Para adicionar uma imagem em sua postagem do WordPress usando o Gutenberg, você tem algumas opções.
Quando você pressionou a tecla ENTER alguns momentos atrás, você acionou um novo bloco de parágrafo. Visto que o Gutenberg é intuitivo, você pode adicionar uma imagem clicando nos ícones de mais (+), imagem ou capa conforme destacamos na imagem abaixo.
Algumas notas:
- Você pode adicionar uma imagem através dos ícones de mais (+)
- Aqui, você pode adicionar uma imagem facilmente
- Esta opção permite que você adicione uma imagem de capa (geralmente são maiores que outras fotos. Além disso, você pode adicionar texto nas imagens de capa, BTW)
Vá em frente e clique em qualquer um dos ícones de mais (+). Em seguida, clique na guia Imagem , conforme mostrado abaixo.
Clicar na guia Imagem carrega o bloco Imagem mostrado na captura de tela abaixo.
O bloco Imagem permite que você carregue uma imagem ou adicione uma de um URL ou da biblioteca de mídia. No processo, você pode adicionar texto alternativo (importante para SEO), legenda e descrição por meio das configurações da tela de mídia ou da barra lateral Bloquear , conforme mostrado nas imagens a seguir.
As configurações de mídia usuais…
…e as configurações do bloco de imagem .
Você está aprendendo algo aqui hoje? Espero que sim. Vamos continuar.
Depois de adicionar sua imagem, Gutenberg adiciona um novo bloco de parágrafo logo abaixo dela. Você pode adicionar o que quiser, mas para fins de ilustração, adicionei um texto e depois um botão abaixo dele.
Como adicionar arquivos para download, por exemplo, PDF, imagens, vídeos, etc.
O Gutenberg torna incrivelmente fácil adicionar arquivos para download ao seu post ou página do WordPress.
Em um novo bloco de parágrafo , clique no ícone de mais (+), navegue até Blocos Comuns e clique na guia Arquivo , conforme destacamos abaixo.
Fazê-lo vai lançar o seguinte bloco:
No bloco Arquivo , você pode carregar um novo arquivo ou adicionar um da sua biblioteca de mídia. Depois de adicionar seu arquivo, o Gutenberg adiciona automaticamente um botão de download fofo , como visto na imagem abaixo.
Você pode brincar com as opções. Por exemplo, você pode editar/excluir o título “ Free Gutenberg PDF Checklist ” bem como o botão Download . Você pode adicionar uma classe CSS ao bloco e estilizá-lo da maneira que desejar.
Adicionando uma cotação em Gutenberg
Em seguida, vamos adicionar uma citação porque eles são charmosos, cativantes e ajudam você a levar o ponto para casa. Em uma nova linha, clique no sinal de mais (+), navegue até Common Blocks e clique na guia Quote , conforme mostrado abaixo.
Fazer isso adiciona o bloco Citação em sua postagem, conforme destacamos na captura de tela abaixo.
Observe as configurações do bloco de cotação na barra lateral direita acima?
Para adicionar sua cotação, digite dentro do bloco. Aqui está o meu resultado.
Parece incrível, certo?
Adicionando Incorporações de Mídia no Gutenberg
O Gutenberg vem com vários blocos para incorporar vídeos e outras mídias de mais de 30 sites, como YouTube, Vimeo, Facebook, SoundCloud, WordPress, Slideshare e assim por diante.
Para incorporar conteúdo, clique no ícone de adição (+), navegue até Incorporações e escolha o site. Por exemplo, eu queria o YouTube, como mostrado abaixo.
Em seguida, copie e cole o URL do vídeo do YouTube e clique no botão Incorporar , conforme mostrado na imagem abaixo.
Assim que você pressiona o botão Incorporar , o Gutenberg converte o link em um vídeo automaticamente, conforme destacamos abaixo.
Navegação suave até o fim. Agora, vamos adicionar um botão autônomo que é perfeito para criar uma chamada para ação (CTA).
Como adicionar um botão em Gutenberg
Você não deve ter dificuldade em adicionar blocos neste momento. Basta clicar no sinal de mais (+) e escolher o seu bloco. Não pode ficar mais fácil do que isso.
Então, como adicionamos um botão?
Em uma nova linha (ou bloco), clique no ícone de adição (+), navegue até Layout Elements e clique na guia Button conforme mostrado abaixo.
Fazer isso leva você ao bloco Button , conforme detalhamos abaixo.
Como você pode ver na imagem acima, você pode editar o texto do botão e adicionar um link. Além disso, você pode personalizar o botão através do menu da barra lateral à direita da tela.
Depois de alguns cliques, aqui está o que eu tenho.
A propósito, se você usar combinações de cores difíceis de ler em seus botões, o Gutenberg informará prontamente . Que legal?
Como adicionar colunas no Gutenberg
Com um lindo botão no lugar, vamos adicionar algumas colunas. Vou adicionar duas colunas, então siga com atenção.
Aqui está o que fazer. Clique no ícone de mais (+), navegue até Layout Elements e clique na guia Columns como visto na imagem abaixo.
Gutenberg adiciona duas colunas por padrão. Veja a imagem abaixo e lembre-se, eu já adicionei conteúdo nas colunas.
O que me pega:
Nada mal para alguns segundos de trabalho. Mas talvez você não queira criar colunas. Talvez você queira exibir uma imagem ao lado de algum texto.
Existe algum bloqueio para isso? Sim existe!
Como adicionar uma imagem ao lado do texto em Gutenberg
Você deseja adicionar uma imagem ao lado de algum texto? Se sim, você vai adorar a seção a seguir.
Como de costume, clique no ícone de adição (+), navegue até Elementos de layout e clique em Mídia e texto conforme mostrado abaixo.
Você deverá ver o bloco Mídia e texto , conforme mostrado abaixo.
Em seguida, carregue sua imagem/vídeo/mídia ou adicione um da biblioteca de mídia. Depois disso, adicione seu texto ao lado da mídia, conforme mostrado na imagem abaixo.
Eu brinquei com o bloco de mídia e texto e cheguei ao seguinte. Lembre-se; Eu consegui apertar um botão lá também
Ah, esse é o back-end! Deixe-me mostrar-lhe o front-end. Aqui:
Parece muito profissional, certo? Você certamente pode imaginar o quanto pode alcançar com o editor Gutenberg.
Blocos Gutenberg de terceiros
Os desenvolvedores do WordPress estão interessados
Por exemplo, você pode adicionar blocos WooCommerce em sua postagem do WordPress. Em primeiro lugar, você deve instalar e ativar o WooCommerce.
Em seguida, em uma nova linha, clique no ícone de mais (+), navegue até WooCommerce e escolha o bloco que desejar, conforme mostrado abaixo.
Você sabe o que isso significa? Isso significa que você pode criar rich media e ótimas postagens e páginas em questão de minutos.
Outros blocos notáveis
Já estamos com mais de 2.000 palavras, e se continuarmos assim, vamos acabar escrevendo um eBook inteiro. Minha oração é que agora você possa usar o Gutenberg sem soluços.
Isso fora do caminho, aqui está uma lista dos outros blocos disponíveis.
- Widgets – Você pode adicionar conteúdo de seus widgets em postagens de blog
- Shortcodes – Você ainda pode usar shortcodes nativos do WordPress
- Clássico – Um ótimo bloco que mantém seu conteúdo antigo
- Mais – O bloco era anteriormente conhecido como a tag Leia mais
- Quebra de página, separadores, espaçadores
- HTML personalizado, pullquote, tabela
- Galeria e áudio/vídeo HTML5
- E muito mais dependendo dos temas e plugins que você usa
A parte: Criar uma página do WordPress é semelhante a criar um post, exceto por algumas diferenças de minutos, então não vamos nos aprofundar nisso hoje.
Hacks rápidos do Gutenberg e atalhos de teclado
Gutenberg vem com alguns hacks e atalhos de teclado que facilitam ainda mais. Por exemplo, se você digitar “/” dentro de um bloco de parágrafo, aparecerá uma lista de blocos.
Você pode até selecionar um bloco específico digitando o título do bloco após a barra invertida (/), por exemplo, digitar “/image” traz o bloco de imagem entre outros blocos relacionados à imagem. Veja a imagem abaixo para mais detalhes.
Atalhos de teclado: Para visualizar todos os atalhos disponíveis, pressione SHIFT + ALT + H no Windows e OPT + CTRL + H no Mac.
Na parte superior do documento, você pode ver a estrutura do documento clicando no ícone (i), conforme mostrado abaixo.
Agradável. Extraordinariamente suave.
Ah, e a propósito, o erro “Falha na atualização” geralmente acontece devido a uma conexão de internet instável
Cá entre nós, Gutenberg é um editor de conteúdo fantástico. Desde que você esteja disposto a aprender as cordas; você pode colher muito do editor WordPress do futuro.
Gutenberg ainda é relativamente jovem, e você pode esperar que cresça em termos de usabilidade e funcionalidade. Será uma força séria a ser enfrentada nos próximos dias. É melhor os criadores de páginas ficarem atentos, ou eles ficarão sem negócios
Esperamos que nosso guia passo a passo para o editor Gutenberg tenha ajudado você a colocar as coisas em perspectiva. Acreditamos que agora você pode usar o editor de blocos para criar conteúdo como um profissional.
Por favor, compartilhe suas preocupações, pensamentos e perguntas na seção de comentários abaixo.