Gutenberg E04: Os blocos padrão em detalhes

No último episódio da nossa série de editores Gutenberg, apresentamos o novo paradigma baseado em blocos e como você pode usá-lo para criar conteúdo. Alguns são auto-explicativos e simples de usar, enquanto outros são mais complexos e apresentam várias configurações diferentes.

No momento da escrita, Gutenberg categoriza os blocos da seguinte forma:

• Mais usado
• Blocos Comuns
• Formatação
• Elementos de layout
• Widgets
• Incorporações
• Compartilhado

“Most Used” dependerá da sua instalação, pois exibirá os blocos que você usa com mais frequência. “Compartilhado” também depende da sua instalação. Depois de “Adicionar a Blocos Reutilizáveis” um bloco, ele se torna reutilizável e disponível na seção de menu Compartilhado.

Nota: A aparência dos blocos no front-end do seu site dependerá muito do tema que você está usando.

Antes de prosseguir com a apresentação dos blocos padrão, recomendamos abrir o frontenberg em uma nova guia para que você possa experimentar enquanto lê

Os blocos padrão do Gutenberg

Aqui estão os blocos mais comuns que você usará em suas postagens, incluindo texto e mídia. Esses blocos estão disponíveis na sua instalação padrão do Gutenberg, prontos para uso.

Parágrafo

O resultado final no front-end será diferente e dependerá do estilo do seu tema.

Este é o bloco de construção básico de Gutenberg. Cada vez que você pressiona “Enter” enquanto digita, um novo bloco de parágrafo é criado, dividindo seu texto em blocos de parágrafo separados. Como mencionamos nos episódios anteriores, cada bloco de parágrafo tem seu próprio conjunto de configurações. Uma coisa importante a notar é que o bloco Parágrafo pode ser facilmente convertido em outros blocos de texto.

Cabeçalho

A parte dianteira:

Usando o bloco Headings você pode inserir diferentes Headings, <h1> a <h6>, dentro do seu conteúdo. Depois de inserir vários blocos de título, um Índice fica disponível na barra lateral.

Subtítulo

A parte dianteira:

Um subtítulo é usado para destacar um pedaço de texto, geralmente logo após o título principal. É menor que um título, mas maior que um texto normal. É usado com moderação, sempre que há necessidade de quebrar ainda mais a estrutura do seu conteúdo.

Lista

A parte dianteira:

Este é o bloco List básico. Pode ser recuado, ordenado ou não ordenado.

Imagem

A parte dianteira:

Este bloco permite inserir uma única imagem dentro do seu conteúdo. Há também opções para alinhamento, redimensionamento e vinculação de URL.

Galeria

A parte dianteira:

Usando o bloco Galeria, você pode adicionar várias imagens dentro de uma página de forma semelhante a uma grade. Você também pode personalizar a legenda da imagem e o número de colunas da grade.

Imagem de capa

A parte dianteira:

A Imagem de Capa é um bloco que combina uma Imagem com texto dentro. É comumente usado como banner em uma postagem, mas pode ser colocado em qualquer lugar.

Citar

A parte dianteira:

O bloco Citação é usado quando você deseja reproduzir palavras escritas ou faladas por outra pessoa. Depois de inserir o texto da citação, adicione a referência do autor no espaço reservado na parte inferior.

Áudio

A parte dianteira:

O bloco de áudio fornece um player de áudio HTML nativo simples que pode ser usado para adicionar e reproduzir arquivos de áudio dentro do seu conteúdo. Os arquivos de áudio são armazenados na Biblioteca de mídia.

Vídeo

A parte dianteira:

O bloco Vídeo é usado para fazer upload de vídeos em seu site WordPress e exibi-los dentro do conteúdo do seu post.

Nota : Isso não se destina a exibir vídeos do YouTube ou vídeos hospedados em serviços externos (ex. Vimeo). O WordPress fornece um bloco especial para isso.

Formatação

Esses blocos fornecem algumas opções extras de formatação para seu conteúdo: código, versículo e outros tipos de texto que precisam de formato especial.

Código

A parte dianteira:

O bloco de código é usado para exibir trechos de código de qualquer linguagem de programação. Preserva tabulações e espaços.

Pré-formatado

A parte dianteira:

Este bloco é igual ao bloco Code, ou seja, preserva a formatação. A única diferença é que você pode adicionar sua formatação adicional, como negrito, itálico, etc.

Clássico (minúsculoMCE)

A parte dianteira:

O bloco “Clássico” é o bom e velho editor TinyMCE, para quem ainda quer um gostinho do passado.

HTML personalizado

A parte dianteira:

Este bloco é usado para adicionar código HTML personalizado dentro do seu conteúdo. Você também pode ver uma prévia, no local.

Aspas

A parte dianteira:

Pullquote é semelhante ao bloco “Quote”, mas maior e mais proeminente.

Versículo

A parte dianteira:

O bloco Verso é comumente usado para exibir versos de letras, poesias e outros. As quebras de linha e os espaços são deixados intactos.

Mesa

A parte dianteira:

O bloco Tabela permite inserir tabelas em seu conteúdo. Você pode personalizar o alinhamento da tabela, bem como o número de linhas e colunas.

Esquema

Botão

A parte dianteira:

Com o bloco Button você pode exibir links como botões personalizados.

Colunas (beta)

A parte dianteira:

O bloco Colunas permite dividir o conteúdo em várias colunas, no máx. 6. Você pode adicionar blocos dentro das colunas como faria normalmente.

Colunas de texto

A parte dianteira:

Este bloco é semelhante ao bloco Colunas, exceto que você só pode ter texto dentro das colunas.

Mais

A parte dianteira:

O bloco Leia mais permite que você faça um trecho introdutório do seu texto. O usuário pode ler o restante do artigo clicando no link “Continuar” na parte inferior.

Separador

A parte dianteira:

Este é um separador de linha horizontal simples, útil para diferenciar entre as seções do seu post.

Quebra de página

A parte dianteira:

Um bloco de quebra de página divide seu conteúdo em várias páginas. O usuário terá que clicar em 'Próxima página' para visualizar o restante do post. Isso é útil para histórias longas ou listas Top 100.

Espaçador

A parte dianteira:

Este bloco adiciona um grande espaço retangular em branco entre dois blocos em sua postagem.

Widgets

Suspeitamos que esta categoria terá mais blocos no futuro. Ele permitirá que você use widgets do WordPress dentro do seu conteúdo, e não apenas nas barras laterais como você está acostumado.

Código curto

Este bloco permite que você insira um código de acesso, como faria com o TinyMCE. Os códigos de acesso mantêm sua funcionalidade no Gutenberg, mas não são considerados como uma prática recomendada. Idealmente, os shortcodes devem ser convertidos em blocos personalizados.

Categorias

A parte dianteira:

Este bloco exibe uma lista de suas categorias com links, exatamente como o widget de categorias. Existem configurações para personalizar a aparência, mostrar contagens de postagens e exibir as categorias hierarquicamente ou planas.

últimas postagens

A parte dianteira:

Assim como o widget de postagens recentes, o bloco de postagens mais recentes fornece uma lista de links para as postagens mais recentes em seu site. O número de posts e a forma como são ordenados podem ser alterados nas configurações do bloco.

Incorporações

A parte dianteira:

Embeds são blocos diferentes, cada um correspondendo a conteúdo de um serviço de terceiros, como Youtube, Giphy, etc. Selecione o bloco 'Embed' e insira uma URL; Se houver suporte, o serviço associado a esse URL será exibido.

Conclusão

Neste episódio descrevemos em detalhes todos os blocos que o WordPress Gutenberg fornece por padrão. Se você quiser saber como os blocos personalizados funcionam e se parecem, não deixe de conferir nosso próximo episódio!