Tutorial Gutenberg do WordPress para utilizadores/as

Maddy Osman Última atualização em 05.01.2021
11 min.
Gutenberg-Guide
Última atualização em 05.01.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 editor de blocos do WordPress - 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 de WordPress foca no layout e design: um novíssimo Theme, opções adicionais de layout para posts e páginas e padrões de blocos para todo o seu site. Você pode encontrar todos os detalhes na nota de lançamento oficial e no guia de campoWordPress .

O que há de novo no editor de blocos Gutenberg?

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

Gutenberg substitui o editor TinyMCE e permite que você use blocos de conteúdo para adicionar texto, imagens e outros meios de comunicação aos seus posts e páginas. O clássico editor TinyMCE era baseado em texto - e limitava os novos usuários que não tinham habilidades 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 editor de blocos Gutenberg 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 você está construindo websites, não custa nada simplificar o seu fluxo de trabalho. Gutenberg pode poupar-lhe muito tempo. Então está na hora de darmos uma olhada mais de perto no editor do bloco WordPress . Primeiro, vamos rever o básico de Gutenberg juntos.  

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 editor de blocos Gutenberg 

Agora que entendemos o básico, vamos mergulhar nas particulardades do editor de blocos 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

Você pode navegar pelos tipos de bloco ou usar a barra de pesquisa para encontrar o tipo de bloco que você deseja. Depois adicione um bloco digitando "/" e o tipo de bloco. Por exemplo, se você quiser inserir uma imagem, você digitaria "/imagem".

Há muitos blocos disponíveis, incluindo

  • parágrafos
  • imagens
  • cabeçalhos
  • listas
  • tabelas
  • separadores
  • galeria
  • butõ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 editor de blocos 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 editor de blocos Gutenberg. 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ã. Clique no separador"Settings" (Definiçõ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 você escreve resenhas de filmes, e tem uma planilha que mostra a sua classificação para cada filme. Quer que tenha sempre o mesmo aspecto, com um estilo específico e o mesmo número de colunas e filas. Se você criar um bloco reutilizável, você pode economizar um tempo considerável recriando-o para cada postagem. 

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 clique nos três pontos do menu de blocos e selecione 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 quiser reutilizar este bloco, vá ao menu"Blocos regulares", mude para o separador"Reutilizável" e seleccione o bloco guardado. 

Tutorial Gutenberg do WordPress para utilizadores/as

Você também pode exportar blocos reutilizáveis para uso em outros sites. Basta clicar nos três pontos ao lado do bloco, selecionar Exportar como JSON e fazer o download do arquivo. 

Tutorial Gutenberg do WordPress para utilizadores/as

Depois, para adicionar um bloco reutilizável exportado a outro site WordPress , vá para a aba Reutilizáveis no menu Blocos e selecione Gerenciar Todos os Blocos Reutilizáveis

Tutorial Gutenberg do WordPress para utilizadores/as

Isto abre uma secção de aspecto mais tradicional no WordPress Painel onde você pode gerenciar todos os blocos reutilizáveis que você criou. 

Se você salvou blocos reutilizáveis de outros sites, você pode carregá-los clicando em Importar do JSON. Uma vez feito isso, você deve ser capaz de acessá-los como de costume a partir da aba Reutilizável 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, você pode agrupar um bloco de chamada para ação da mídia social com um bloco que contenha ícones de compartilhamento social. Você também pode agrupar um bloco de parágrafos com um bloco de botões para criar uma CTA padrão que você pode inserir no final dos seus posts. 

Para criar um grupo de blocos usando o Editor de BlocosGutenberg , selecione todos os blocos que você deseja agrupar. Em seguida, clique no ícone em camadas no lado esquerdo da pequena sobreposição do menu:

Tutorial Gutenberg do WordPress para utilizadores/as

Um novo menu aparece com a inscrição"Transformar para", clique em Grupo. É isso mesmo. Agora você pode 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 você quiser desacoplar blocos, selecione o grupo e depois clique nos três pontos do menu de sobreposição. Role para baixo e clique em Ungroup (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 WordPress Block Patterns você pode criar e compartilhar layouts de blocos pré-definidos. Com os Block Patterns você pode criar layouts complexos com alguns cliques do mouse.

Para acessar os Padrões de Bloco, clique no mesmo sinal de mais que você usou para acessar o menu do Bloco . Selecione a guia Padrões

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 o mais próximo. 

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 editor de blocos 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 você troque mais facilmente entre os Themes alternar entre eles. Como a sua formatação é encadernada nos próprios blocos, ela não é afetada por outra Theme . 

Se você quiser criar seus próprios padrões de blocos manualmente, isso requer algumas habilidades de programação. No manual de desenvolvimento, eles são chamados de layouts de blocos pré-definidos

A criação de Padrões de Bloco a partir do zero requer o uso da Interface de Programação de Aplicação de Bloco (API). No entanto, oConstrutor de Padrões de Bloco Plugin 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 você pode encontrar e adicionar blocos adicionais para Gutenberg . 

Tutorial Gutenberg do WordPress para utilizadores/as

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

Edição completa do site em Gutenberg

Neste momento, Gutenberg ainda não permite a edição completa do site. No entanto, a equipe de desenvolvimento WordPress está fazendo grandes progressos em direção a esse objetivo, incluindo a adição de padrões de blocos. 

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

Com o editor de blocos 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 Editor de Blocos Gutenberg ainda não seja um construtor de páginaWordPress s completo , ele está no caminho certo para se tornar um. Entretanto, os Block Patterns, como explicado acima no WordPress Gutenberg Block Tutorial, fornecem um conjunto de recursos muito próximo ao de um editor de website 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 para a mesa é o fato de não oferecer a mesma flexibilidade que o editor clássico. Claro, Gutenberg elimina alguns dos problemas de formatação idiossincráticos que ocorrem com o editor clássico - mas infelizmente você está limitado nos tipos de páginas que você pode 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 pelo editor de blocos do WordPress 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 você acha do editor do WordPress Gutenberg ? Que perguntas você tem para Maddy? Esteja à vontade para usar a função de comentários. Você quer mais dicas sobre WordPress ? Depois siga-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 *.