Pular para o conteúdo

Gutenberg: Artigos WordPress em Bloquinhos

  • Blogs

Este post não é um post, mas um mosaico dos elementos que o editor Gutenberg permite você inserir em seus artigos WordPress. Preste mais atenção nos blocos do que nas palavras deste artigo.

O objetivo do editor Gutenberg é tornar a inclusão de conteúdo rico no WordPress simples e agradável para nós, blogueiros WordPress.

Este post é um exemplo, oferecido pelo próprio Gutenberg, todo composto de pedaços de conteúdo — algo parecido com os blocos LEGO — que você pode movimentar e com eles, interagir.

ARRASTE E SOLTE OS BLOQUINHOS À VONTADE

No Gutenberg, você pode movimentar o cursor pelos blocos e você nota que eles são ressaltados por linhas e setas.

Você pode simplesmente arrastar e compor os vários blocos, para reposicioná-los rapidamente, sem receio de perder alguma coisa no processo de copiar e colar.

O que você está lendo agora é um bloco de texto, o bloco mais básico de todos. O bloco de texto tem seus próprios controles para que seja movimentado livremente pelo post…

…como este aqui, que é alinhado à direita.

Os títulos também são blocos separados, o que ajuda no esboço e organização do seu conteúdo.

UMA IMAGEM VALE POR MIL PALAVRAS

Lidar com imagens e mídias com todo o cuidado é um dos focos básicos do editor Gutenberg. Está bem mais fácil do que antes a maneira de adicionar legendas ou exibir as imagens em tela cheia.

Linda paisagem
Se o seu tema permitir, você verá um botão “largo” na barra de ferramentas da imagem. Experimente.

Tente selecionar e remover ou editar a legenda. Agora você não precisa se preocupar com selecionar por engano a imagem ou outro texto e com isso estragar a apresentação.

A FERRAMENTA DE ADIÇÃO

Imagine tudo o que o WordPress pode fazer, está disponível para você rapidamente e no mesmo lugar na interface. Sem necessidade de lembrar sobre tags de HTML, classes ou lembrar da sintaxe complicada de shortcodes.

Esse é o espírito por trás do adicionador, o botão (+) que você verá pelo editor, que permite navegar em todos os blocos de conteúdo disponíveis e adicioná-los ao seu post.

Experimente, você pode descobrir coisas que o WordPress já é capaz de adicionar nos seus posts e que você nem sabia. Eis uma lista do que você já pode encontrar e adicionar facilmente:

  • Textos & títulos
  • Imagens & vídeos
  • Galerias
  • Incorporados, como YouTube, Tweets ou outros posts do WordPress.
  • Blocos de layout, botões de curtir, imagens em destaque, separadores etc.
  • E listas como esta aqui, é claro :)

USE A EDIÇÃO VISUAL

Uma enorme vantagem dos blocos é que você consegue editá-los no lugar e manipular o conteúdo deles diretamente. Em vez de ter campos para editar, por exemplo, o código de uma citação ou o texto de um botão, você pode alterar o conteúdo diretamente.

No Gutenberg, por exemplo, você pode editar facilmente a citação abaixo:

O editor se propõe a criar uma nova experiência de construção de posts e páginas, facilitando a criação conteúdos mais elaborados. Ele tem “blocos” para facilitar aquilo que atualmente envolveria shortcodes, HTML personalizados ou uma confusão de elementos incorporados.

Matt Mullenweg, 2017

A informação que corresponde à origem da citação é um campo separado, similar às legendas sob as imagens, de forma que a estrutura da citação esteja sempre certa, mesmo que você selecione, modifique ou remova essa origem. Também fica fácil adicioná-la de volta.

VERSATILIDADE E FORMATAÇÃO

Os blocos podem ser qualquer coisa que você precisar. Por exemplo, você pode querer adicionar uma citação tímida como parte da composição do texto, ou talvez prefira exibir uma em estilo gigante.

Todas essas opções estão disponíveis no adicionador.

COLUNAS PERSONALIZÁVEIS

Você pode mudar a quantidade de colunas em suas galerias mexendo no controle deslizante do inspetor de bloco da barra lateral.

RIQUEZA DE MÍDIAS

Se você combinar os novos alinhamentos largura ampla e largura total com galerias, você pode criar uma boa apresentação visual muito rapidamente:

A acessibilidade é importante — não se esqueça dos atributos alt de imagem

É claro que uma imagem ocupando a largura total pode ficar muito grande. Mas às vezes a imagem vale a pena.

A galeria acima tem somente duas imagens. É uma maneira mais fácil de ter um visual atraente, sem ter que lidar com floats, um código CSS que pode ser bem complicado.

Você também pode facilmente converter a galeria de volta a imagens individuais, usando o botão de transformação de blocos.

Qualquer bloco pode usar estes alinhamentos, até o bloco de mídias incorporadas, que já é responsivo por padrão:

Você consegue montar o bloco que quiser, estático ou dinâmico, decorativo ou simples. Aqui vai um bloco com citação em destaque:

Código é poesia

A comunidade WordPress

Se você quiser saber mais sobre como criar blocos adicionais ou se estiver interessado em ajudar no projeto, acesse o repositório do GitHub.


Obrigado por testar o Gutenberg!

👋

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.