O editor de blocos

Módulo 4: Criar conteúdo · Tempo de leitura: 8 minutos

Objetivo de aprendizagem: Após esta lição, saberá construir uma página com blocos e padrões, e saberá como funcionam os rascunhos, o agendamento e as revisões.

Conceitos-chave: bloco, definições do bloco, barra de ferramentas, vista de lista, grupo, colunas, padrão, padrão sincronizado, rascunho, privado, agendamento, revisões, pré-visualização

Tudo é um bloco

Desde o WordPress 5.0 (final de 2018) que cria conteúdo no editor de blocos (também chamado Gutenberg, nome do projeto). Uma página é composta por blocos individuais: um título, um parágrafo, uma imagem, um botão, uma lista, uma tabela, um vídeo incorporado. Cada bloco tem as suas próprias definições. Pode colocar blocos uns abaixo dos outros, lado a lado (em colunas) ou uns dentro dos outros (num grupo).

Porquê blocos? No editor antigo, uma página era uma única caixa de texto grande. Se quisesse duas colunas ou um botão, precisava de um criador de páginas, shortcodes ou HTML. Com blocos, isso é possível diretamente no WordPress, e o resultado é HTML limpo que o tema formata.

Nos bastidores, o WordPress guarda os blocos como HTML com marcas de comentário antes e depois:

<!-- wp:heading -->
<h2 class="wp-block-heading">Horário de funcionamento</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Estamos abertos de terça-feira a sábado.</p>
<!-- /wp:paragraph -->

Isto é útil saber: o conteúdo mantém-se como HTML legível, mesmo que mude de tema mais tarde ou que um bloco deixe de existir. Pode ver isto se, num bloco, escolher "Editar como HTML", ou no editor de código (Ctrl+Shift+Alt+M).

O editor em três partes

1. A tela (canvas) ao centro: a sua página tal como ficará aproximadamente.
2. A barra de ferramentas acima de um bloco selecionado: negrito, itálico, link, alinhamento, e converter o bloco para outro tipo (um parágrafo torna-se uma lista, uma imagem torna-se uma galeria).
3. A barra lateral à direita com dois separadores: Página (ou Artigo) com definições para a página inteira, e Bloco com as definições do bloco selecionado, como cor, espaçamento e tamanho de letra.

Duas ferramentas que facilitam muito o seu trabalho:

• Vista de lista (o ícone com três traços no canto superior esquerdo): a estrutura da sua página em forma de árvore. Com ela seleciona exatamente o bloco que pretende, mesmo que esteja dentro de um grupo numa coluna.
• Comandos de barra: numa linha vazia, digite / seguido do nome de um bloco (/título, /botão, /imagem) e prima Aceder.

Construir com grupos e colunas

Uma boa página tem uma estrutura clara. Para isso utiliza três elementos de construção:

• Grupo: uma moldura à volta de alguns blocos, com o seu próprio fundo ou espaçamento. Por exemplo, um bloco colorido com um título, uma frase e um botão.
• Colunas: blocos lado a lado. Num telemóvel, ficam uns por baixo dos outros.
• Linha e Pilha: variantes de um grupo que organizam blocos horizontal ou verticalmente.

Utilize os títulos da forma correta: um H1 (o título da página, geralmente criado pelo próprio tema), e abaixo H2 para os capítulos e H3 para as secções dentro destes. Não escolha um nível de título pelo tamanho da letra; isso ajusta-se nas definições do bloco. Os leitores de ecrã e os motores de pesquisa utilizam os títulos para compreender a página (lição 9.2).

Padrões: não comece sempre do zero

Um padrão é um grupo de blocos pronto a utilizar: um título com texto e imagem, uma tabela de preços, três colunas com ícones. Insere-os através do botão de inserção (o sinal de mais), separador Padrões. O seu tema costuma incluir alguns, e a biblioteca de padrões do wordpress.org tem centenas.

Também pode criar os seus próprios padrões: selecione alguns blocos, escolha os três pontos na barra de ferramentas e Criar padrão. Aí escolhe se o padrão fica sincronizado:

• Não sincronizado: de cada vez que o insere, obtém uma cópia independente. Se a alterar, só essa cópia muda. Útil como modelo.
• Sincronizado: em todos os lugares onde está, é igual. Se o alterar num local, muda em todo o lado. Útil para um bloco "Contacto e horário de funcionamento" presente em dez páginas. (Antigamente chamavam-se "blocos reutilizáveis".)

Uma armadilha: um padrão sincronizado que altere "só um pouco" numa página também muda em todas as outras páginas. Se quiser algo diferente apenas num local, transforme essa cópia num grupo normal (desvincular).

Guardar, publicar e agendar

Uma página tem um estado:

Utilize Pré-visualização para ver a página tal como um visitante a vê, também em telemóvel e tablet, antes de publicar.

Revisões: recuar no tempo

Sempre que guarda, o WordPress conserva uma revisão: a versão desse momento. Na barra lateral, junto à página, vê quantas revisões existem. Clique nelas para ver, com um cursor deslizante, as diferenças entre duas versões e poder restaurar uma versão anterior.

As revisões são a sua primeira rede de segurança em caso de engano ("apaguei metade da página sem querer"). No entanto, ficam todas guardadas na base de dados. Uma site com milhares de revisões fica maior e, por vezes, mais lenta. Pode limitar o número no wp-config.php:

define( 'WP_POST_REVISIONS', 20 );

A lição 6.3 aborda a limpeza de revisões antigas.

Onde termina o editor

O editor de blocos cria o conteúdo de uma página. O que está à volta do conteúdo (o cabeçalho da site, o menu, o rodapé) pertence ao tema. Num tema de blocos, edita isso no Editor do site (Aparência > Editor) com os mesmos blocos; num tema clássico, no Personalizador e em Widgets (lição 5.1). Se utilizar um criador de páginas como o Elementor ou o Divi, trabalha nesse programa em vez do editor de blocos; as desvantagens disso são discutidas na lição 5.1.

Resumo

• Uma página é composta por blocos que coloca por baixo, ao lado e dentro uns dos outros; o WordPress guarda-os como HTML com marcas de comentário.
• A vista de lista e os comandos de barra tornam a construção rápida e precisa.
• Utilize títulos para a estrutura (H2, H3), não para o tamanho da letra.
• Os padrões poupam trabalho; um padrão sincronizado muda em todo o lado ao mesmo tempo.
• Rascunho, agendado, privado e revisões dão-lhe controlo sobre o que é visível e quando, e uma forma de recuar.

Questionário

Exercício

Exercício D4.1: Construa uma página com blocos. Crie uma página de rascunho "Sobre nós" com: um H2 e um H3, pelo menos dois parágrafos, uma imagem com texto alternativo, um bloco de colunas com duas colunas, um botão com um link, e um padrão da biblioteca. Transforme um grupo num padrão sincronizado próprio e insira-o numa segunda página de rascunho. Depois, altere-o num local e veja o que acontece na outra página. Por fim, restaure uma revisão anterior. Assinale cada passo e descreva em duas frases quando utilizaria, e quando não utilizaria, um padrão sincronizado.

Leitura adicional

Para trabalhar diretamente no WordPress ainda não temos artigos próprios; a documentação oficial do WordPress é bastante completa.

• O editor de blocos (wordpress.org, em inglês): https://wordpress.org/documentation/article/wordpress-block-editor/
• Padrões (wordpress.org, em inglês): https://wordpress.org/documentation/article/block-pattern/
• Revisões (wordpress.org, em inglês): https://wordpress.org/documentation/article/revisions/