Tutorial Gutenberg do WordPress para utilizadores/as

Maddy Osman Última atualização 14.07.2021
11 min.
Gutenberg-Guide
Última atualização 14.07.2021

Se está a pensarr em construir um site com WordPress, provavelmente já ouviste falar de Gutenberg . Gutenberg é o editor para WordPress, que foi lançado com a versão 5.0. 

Desde o primeiro lançamento, muitas funcionalidades foram adicionadas ao WordPress Block Editor - incluindo agrupamento de blocos e padrões de blocos. Mas a razão pela qual Gutenberg é tão popular deve-se principalmente ao facto das publicações e páginas poderem ser editadas de forma muito mais visual do que com o editor padrão do WordPress.

Tutorial Gutenberg do WordPress para utilizadores/as

Este guia inclui:

  • O que é o Gutenberg
  • um guia completo sobre Gutenberg para desenvolvedores/as
  • uma pequena lista das diferentes funcionalidaes no Gutenberg

E posso prometer-te uma coisa agora mesmo: Depois deste guia, saberás como criar layouts profissionais para os teus sites com a ajuda do Gutenberg .

WordPress 5.6 chegou finalmente!

A última versão do WordPress foca-se no layout e design: um tema novo em folha, opções adicionais de layout para posts e páginas e padrões de blocos para todo o teu site. Podes encontrar todos os detalhes na Release Note oficial e no WordPress Field Guide.

O que há de novo no Gutenberg Block Editor?

Antes de mergulharmos no tutorial Gutenberg do WordPress, vamos primeiro perceber realmente o que é o Gutenberg . 

Gutenberg substitui o editor TinyMCE e permite que use sblocos de conteúdo para adicionar texto, imagens e outros media aos teus artigos e páginas. O clássico editor TinyMCE era baseado no texto - e limitava os/as novos/as utilizadores/as que não tinham conhecimentos de codificação. 

Embora o conhecimento de HTML não fosse absolutamente necessário para usar o editor clássico, muitas vezes tinhas de entrar na visualização HTML para fazer qualquer mudança. Caso contrário, tinhas de instalar um plugin separado para adicionar funcionalidades simples como tabelas ou galerias de imagens ao teu site.

Tutorial Gutenberg do WordPress para utilizadores/as

Com Gutenberg podes criar o teu site com imagens em vez de texto. Com o Gutenberg Block Editor do WordPress podes facilmente adicionar blocos de conteúdo às tuas páginas e publicaões. Há blocos para imagens, para parágrafos - e para quase todos os elementos que queiras ter no teu site.

Tutorial Gutenberg do WordPress para utilizadores/as

Gutenberg é agora o editor de blocos padrão do WordPress e vem com muitos blocos prontos para uso. Podes também adicionar plugins de WordPress que te fornecem ainda mais blocos para facilmente incorporares várias funcionalidades nas tuas publicações e páginas. 

Tutorial Gutenberg do WordPress

Quando estás a construir sites, não custa nada simplificar o teu fluxo de trabalho. Gutenberg pode poupar-te muito tempo. Por isso está na hora de darmos uma olhada mais de perto no WordPress Block Editor. Primeiro, vamos rever o básico de Gutenberg.  

Como usar Gutenberg

  1. Cria uma nova entrada no blogue como de costume em WordPress. 
  2. Clica no sinal de mais azul no canto superior esquerdo. 
  3. Seleciona o bloco que pretendes inserir na tua publicação. 
  4. Ajusta as configurações do bloco dentro da publicação de rascunho. 
  5. Reorganiza os teus blocos, arrastando-os e soltando-os.

É tudo! Só para entenderes como funcionam os blocos individuais, como ajustá-los e como agrupá-los, precisas de um pouco mais de explicação. É exatamente isso que vamos fazer no resto do nosso tutorial Gutenberg do WordPress . 

Manual detalhado para o Gutenberg Block Editor 

Agora que entendemos o básico, vamos mergulhar nas particulardades do  Block Editor do WordPress. Quando carregas pela primeira vez o ecrã do editor de uma página ou publicação com o Gutenberg, o editor parece bastante vazio - ainda mais do que o editor clássico, porque faltam as opções de menu tradicionais. Isso é bom. O primeiro passo é adicionar alguns blocos. 

1. Adiciona blocos à tua publicação

Para adicionares um bloco à tua publicação, pressiona o sinal de mais no canto superior esquerdo da publicação de rascunho. Um novo bloco será sobreposto com um pequeno conjunto de opções de menu. 

Vamo-nos concentrar primeiro no menu principal e depois discutir como podes fazer mais ajustes usando o menu secundário.

Tutorial Gutenberg do WordPress para utilizadores/as

Podes navegar pelos tipos de bloco ou usar a barra de pesquisa para encontrar o tipo de bloco que desejas. Depois adiciona um bloco digitando "/" e o tipo de bloco. Por exemplo, se quiseres inserir uma imagem, digitas “/image”.

Há muitos blocos disponíveis, incluindo

  • parágrafos
  • imagens
  • cabeçalhos
  • listas
  • tabelas
  • separadores
  • galeria
  • botões
  • vídeos
  • ficheiros de áudio 

Se instalaste plugins com blocos personalizados, eles também aparecerão nesta lista. 

Alternativamente, podes adicionar um bloco clicando no sinal de mais preto: Isto aparece quando clicas no rascunho onde diz "Escreve algo ou digita para selecionar bloco". 

Tutorial Gutenberg do WordPress para utilizadores/as

Ou podes seguir as instruções no texto e digitar "/" para escolher a partir de uma lista vertical de opções.  

Tutorial Gutenberg do WordPress para utilizadores/as

2. Reorganiza os teus blocos

Podes mover os blocos para onde queres que eles apareçam usando as setas no próprio bloco ou pressionando os pontos entre as setas para arrastar e largar os blocos.

Tutorial Gutenberg do WordPress para utilizadores/as

Com o Block Editor do WordPress é muito mais fácil reorganizares o teu conteúdo do que com o editor clássico. Não precisas de te preocupar em partir o código, pois todas as informações sobre o conteúdo do bloco (incluindo a fonte, cor e tamanho) movem-se com o bloco. 

A facilidade com que podes organizar os teus blocos é uma das melhores características do Gutenberg Block Editor. Economizas tempo ao reparar códigos partidos e não precisas de depender do "copiar-colar" para fazer o trabalho.

3. Ajusta as configurações de estilo do teu bloco.

O próximo passo do nosso tutorial Gutenberg WordPress é conhecer o menu Style Settings (configurações de estilo). Em alguns casos, algumas opções aparecem perto do bloco, quando clicas nelas. Por exemplo, se estiveres a editar um bloco de parágrafos, algumas opções conhecidas aparecerão logo acima do bloco. 

Tutorial Gutenberg do WordPress para utilizadores/as

No entanto, um menu secundário também aparecerá no lado direito do ecrã. Clica no separador Configurações.  

Tutorial Gutenberg do WordPress para utilizadores/as

As opções para as configurações de estilo que podes personalizar dependem do bloco. Por exemplo, as configurações do bloco de parágrafos parecem diferentes das configurações do bloco de imagens.

Tutorial Gutenberg do WordPress para utilizadores/as

Com o menu Style Settings podes facilmente personalizar os blocos nas tuas publicações. Mais uma vez, ao contrário do editor clássico, não precisas de te preocupar em fazer alterações na legenda de uma imagem e estragar a formatação do texto subjacente. 

Criar blocos reutilizáveis ​​do editor Gutenberg

Agora chegamos às dicas avançadas do tutorial Gutenberg do WordPress. Podes economizar muito tempo e esforço guardando blocos que podes reutilizar em futuras publicações, páginas e outros sites WordPress.

Tutorial Gutenberg do WordPress para utilizadores/as

Os blocos reutilizáveis são úteis se tiveres elementos que precisem de ser adicionados regularmente a uma determinada página ou tipo de publicação. 

Digamos que escreves críticas de filmes, e tens uma tabela que mostra a tua classificação para cada filme. Queres que tenha sempre o mesmo aspeto, com um estilo específico e o mesmo número de colunas e filas. Se criares um bloco reutilizável, podes economizar um tempo considerável recriando-o para cada publicação. 

Gravar o estilo e vários atributos de elemento também pode economizar tempo real nas teclas de função. 

Suponhamos que precisas da mesma CTA (call to action) em cada post que escreves. Para criar um botão reutilizável, começa por passar pelo processo típico de adicionar um bloco de botões. Ajusta o estilo e o texto até que fique da forma como desejas.  

Tutorial Gutenberg do WordPress para utilizadores/as

Depois clica nos três pontos do menu de blocos e seleciona Adicionar a blocos reutilizáveis

Tutorial Gutenberg do WordPress para utilizadores/as

Aqui podes dar um nome ao teu novo bloco. 

Tutorial Gutenberg do WordPress para utilizadores/as

Se quiseres reutilizar este bloco, vai ao menu"Blocos regulares", muda para o separador "Reutilizável" e seleciona o bloco guardado. 

Tutorial Gutenberg do WordPress para utilizadores/as

Podes também exportar blocos reutilizáveis para uso em outros sites. Basta clicares nos três pontos ao lado do bloco, selecionares Exportar como JSON e fazer o download do ficheiro. 

Tutorial Gutenberg do WordPress para utilizadores/as

Depois, para adicionares um bloco reutilizável exportado a outro site WordPress, vai ao separador Reutilizáveis no menu Blocos e seleciona Gerir todos os blocos reutilizáveis

Tutorial Gutenberg do WordPress para utilizadores/as

Isto abre uma secção de aspeto mais tradicional no painel de controle WordPress, onde podes gerir todos os blocos reutilizáveis que criaste. 

Se guardaste blocos reutilizáveis de outros sites, podes carregá-los clicando em Importar do JSON. Uma vez feito isto, deves ser capaz de acessá-los como de costume a partir do separador Reutilizáveis no menu Blocos

Coloca os teus blocos em grupos

A próxima dica profissional do nosso tutorial Gutenberg do WordPress é sobre agrupar blocos. Se colocares dois ou mais blocos num grupo, podes personalizá-los e manipulá-los como se eles fossem um único bloco.  

Por exemplo, podes agrupar um bloco de call to action (CTA) da rede social com um bloco que contenha ícones de partilha social. Podes também agrupar um bloco de parágrafos com um bloco de botões para criar uma CTA padrão que podes inserir no final das tuas publicações. 

Para criar um grupo de blocos usando o Gutenberg Block Editor , seleciona todos os blocos que deseja agrupar. Em seguida, clica no ícone em camadas no lado esquerdo do pequeno menu sobreposição:

Tutorial Gutenberg do WordPress para utilizadores/as

Um novo menu aparece com a inscrição "Transformar para", clica em Grupo. É isso mesmo. Agora podes mover e ajustar esses blocos como se fossem um só. 

Ainda é possível fazeres modificações nas opções para cada bloco individual. Por exemplo, podes adicionar texto a um bloco de parágrafos e alterar a sua aparência. 

Se quiseres desagrupar blocos, seleciona o grupo e depois clica nos três pontos do menu de sobreposição. Desce e clica em Desagrupar.

Tutorial Gutenberg do WordPress para utilizadores/as

Esta funcionalidade também funciona com blocos reutilizáveis. Após agrupares os blocos, podes guardá-los como blocos reutilizáveis, seguindo o mesmo procedimento descrito acima. 

Usar padrões de bloco no editor de bloco do WordPress

Com padrões de bloco do WordPress podes criar e partilhar layouts de blocos predefinidos. Com os padrões dee blocos podes criar layouts complexos com alguns cliques do rato.

Para acessar os padrões de bloco, clica no mesmo sinal de mais que usaste para acessar o menu do bloco . Seleciona o separador Padrão

Tutorial Gutenberg do WordPress para utilizadores/as

À primeira vista, os padrões de blocos são semelhantes aos blocos reutilizáveis. No entanto, padrões de blocos são o que mais se aproxima da capacidade de criar páginas inteiras em Gutenberg

Com os padrões de bloco podes adicionar seções completas de layout às tuas publicações ou páginas com um único clique. São ideais se quiseres criar e gravar um layout para uso em várias publicações. 

O Block Editor do WordPress é fornecido com vários modelos prontos, incluindo

  • várias colunas de texto
  • botões adjacentes
  • cabeçalhos personalizados
  • citações com fotos
Tutorial Gutenberg do WordPress para utilizadores/as

Outra vantagem dos padrões de bloco é que eles permitem que troques mais facilmente de temas. Como a tua formatação está ligada aos próprios blocos, ela não é afetada por outra tema. 

Se quiseres criar os teus próprios padrões de blocos manualmente, isso requer alguns conhecimentos de programação. No manual de desenvolvimento, eles são chamados de layouts de blocos predefinidos

A criação de padrões de blocos a partir do zero requer o uso da Block Application Programming Interface (API). No entanto, o plugin Block Pattern Builder pode ajudar. 

Tutorial Gutenberg do WordPress para utilizadores/as

Acrescentar blocos adicionais a Gutenberg

Antes de continuarmos com este tutorial Gutenberg do WordPress, deves saber que existem vários plugins que permitem adicionar mais tipos de blocos ao editor, incluindo

  • Índice
  • Listas de preços
  • Google Maps
  • Formulários de contacto

Há um diretório oficial de blocos WordPress onde podes encontrar e adicionar outros blocos para Gutenberg. 

Tutorial Gutenberg do WordPress para utilizadores/as

O plano original era criar um subdiretório para plugins de bloco único. Em vez disso, o diretório atual é uma subsecção do diretório de plugins padrão do WordPress com uma lista pesquisável de plugins baseada em blocos. 

Full Website Editing (edição completa do site) em Gutenberg

Neste momento, Gutenberg ainda não permite a edição completa do site. No entanto, a equipa de desenvolvimento do WordPress está a fazer grandes progressos nesse sentido, incluindo a adição de padrões de blocos. 

Existe atualmente uma versão experimental do Twenty Twenty Themes, que utiliza a edição completa do site e abraça a ideia de um tema baseado em blocos

Com o Block Editor do WordPress podes agora criar layouts totalmente personalizados baseados em blocos - mas apenas para posts e páginas. Assim que a edição completa do site chega a Gutenberg, os widgets tornam-se supérfluos. Isto dá aos utilizadores/aso um controlo total sobre cada elemento de layout, incluindo cabeçalhos, páginas e rodapés. 

Embora o Gutenberg Block Editor ainda não seja um construtor de página WordPress s completo , ele está no caminho certo para se tornar um. Entretanto, os padrões de blocos, como explicado acima no Tutorial sobre blocos Gutenberg do WordPress, fornecem um conjunto de funcionalidades muito próximo ao de um editor de site completo. 

Desvantagens do editor Gutenberg 

Embora Gutenberg seja uma ferramenta útil que mudou a forma como muitos utilizadores e utilizadoras interagem com o WordPress e criam conteúdo, o editor tem, naturalmente, as suas desvantagens. 

Por exemplo, quando o Gutenberg foi introduzido pela primeira vez, era bastante propenso a erros. Entretanto, a maior parte destes problemas foi resolvida. 

Uma coisa que não é um bug, contudo, é o facto de Gutenberg ainda ser incompatível com muitos temas. Assim, se quiseres usar um tema em particular e gostares do design, é provável que não consigas personalizá-lo ou usar Gutenberg no mesmo. Se tentares, o resultado será provavelmente uma grande confusão. 

Bem, Gutenberg é compatível com alguns temas, mas não o suficiente para se orgulhar de uma compatibilidade generalizada. 

Outro problema que Gutenberg traz é o facto de não oferecer a mesma flexibilidade que do editor clássico. Claro, Gutenberg elimina alguns dos problemas "caprichosos" de formatação que ocorrem com o editor clássico - mas infelizmente está limitados nos tipos de páginas que podes criar. 

Como ainda não estão disponíveis opções mais amplas para a personalização de temas em Gutenberg, terás de te contentar com os temas compatíveis com Gutenberg que estão disponíveis bem como os blocos e plugins de bloco disponíveis. 

Os recursos disponíveis para a utilização de Gutenberg estão a crescer a um ritmo constante - mas isso não faz de Gutenberg um construtor de temas. Ainda não. 

Por fim, Gutenberg é a escolha ideal para aqueles que já estão acostumados a construtores de páginas ou editores puramente visuais e querem manter essa experiência, ou que querem se concentrar apenas no conteúdo e fazer o design através de arrastar e soltar. 

Pensamentos finais: Guia para Gutenberg do WordPress  

O editor Gutenberg pertence agora ao núcleo WordPress. A equipa de desenvolvimento por trás do WordPress tem grandes planos para isso. Eventualmente serás capaz de criar menus de navegação com Gutenberg, criar layouts completos do site, e Gutenberg será compatível com ainda mais temas. 

Até lá, podes aproveitar ao máximo as funcionalidades atualmente oferecidas WordPress Block Editor e criar posts e páginas visualmente apelativas - sem perceber uma única linha de código. Um bom negócio, na nossa opinião. 

Então vá em frente: use as dicas do nosso tutorial WordPress Gutenberg e comece a customizar o conteúdo do seu site. E certifique-se de que seu site está funcionando na velocidade ideal com um plano de hospedagem do siteWordPress RAIDBOXES com a velocidade ideal. 

Editor Gutenberg do WordPress: As tuas perguntas

O que achas do editor Gutenberg do WordPress? Que perguntas tens para a Maddy? Dá-nos o teu feedback nos comentários. Queres mais dicas sobre WordPress? Então segue-nos no Twitter, Facebook ou através da nossa newsletter.

Maddy Osman é uma estratega de conteúdo SEO. Trabalha com clientes selecionados na área WordPress e alojamento web. Com formação em web design e WordPress, tem um profundo conhecimento de SEO - e sabe exatamente como ligar marcas com conteúdos relevantes de SEO.

Artigos relacionados

Comentários sobre este artigo

Escreve um comentário

O teu endereço de e-mail não será publicado. Os campos obrigatórios estão marcados com *.