Blog fellyph cintra - press gutenberg

Teoria sobre blocos Gutenberg

Gutenberg está transformando o modo de se trabalhar com WordPress, onde você utiliza blocos para compor o seu conteúdo atualmente tem uma série de diferentes elementos para compor o nosso conteúdo: títulos, parágrafos, conteúdo incorporado, HTML, listas, imagens, galeria de imagem entre outros elementos.

A otimização do Gutenberg foi realizado progressivamente, isso significa que temos compatibilidade com o formato de conteúdo anterior com o novo editor. O Gutenberg oferece uma nova forma de se trabalhar com conteúdo distribuído em blocos e com um simples clique e arraste podemos alterar a ordem do conteúdo a qual será apresentado para os nossos usuários. Criando uma real experiência WYSIWYG.

O que são Blocos?

Bloco é a unidade abstrata para organização do conteúdo, com um grupo de blocos montamos o nosso post. Podemos criar hierarquia de blocos, isso significa, podemos ter blocos com blocos filhos. Por exemplo, um bloco de duas colunas possuem um bloco filho para cada coluna.

Para manter compatibilidade com versões anteriores armazenamos os blocos no banco de dados na coluna wp_content como o WordPress armazena normalmente. Com uma pequena diferença os blocos são representados por comentários num formato entendido pelo back-end do WordPress se o site desativar o Gutenberg o conteúdo não será exposto para o usuário final.

Um exemplo de bloco de parágrafo, por exemplo:

<!-- wp:paragraph {"key" : "value"} --><br><p>Este é um bloco do gutenberg.</p><br><! -- /wp:paragraph -->Code language: HTML, XML (xml)

No código acima quando o Gutenberg estiver ativado ele reconhecerá como um bloco, caso não esteja ele será renderizado como um comentário HTML normal.

Como funcionam os blocos gutenberg?

Blocos possuem duas categorias estáticos e dinâmicos, por exemplo, blocos estáticos apenas exibem um markup sem nenhuma edição no editor, apenas conseguimos definir a ordem dos elementos. Já os blocos dinâmicos exigem dados do banco e renderiza os elementos dinamicamente.

Cada Bloco contém os seus atributos ou configurações, cada elemento pode ser alimentado por HTML puro, meta data ou diferentes origens. Um recurso do Gutenberg é a possibilidade criar blocos e cópias dos tais, preservando o conteúdo ou apenas o markup. Mas podemos também limitar a quantidade de blocos que serão utilizados nos posts ou fixá-los numa região específica.

Categorias de blocos

Quando acionamos o Block Inserter, abrimos um pop-up com os blocos disponíveis, cada bloco terá um título e uma categoria. Podemos ter blocos nativos ou blocos customizados por plugins, ou tema.

Blocos Reutilizáveis

Nos dá a possibilidade de reutilizar blocos e repetir partes de um determinado conteúdo. Qualquer edição feita num bloco reutilizável será replicado em todas as suas cópias.

Templates

O Gutenberg tenta abstrair a estrutura HTML e permitir que o usuário foque apenas no conteúdo a nível técnico a sua estrutura abstrai toda estrutura de um template único no formato clássico para uma coleção de elementos reutilizáveis e independentes.

Para entender como os blocos operam em nível de estrutura de dados, precisamos pensar na prensa de impressão de Johannes Gutenberg. A página era montada a partir de caracteres individuais até montar um texto, após a finalização da página os caracteres eram armazenados para serem utilizados numa nova página.

Máquina gutenberg
Máquina gutenberg original – fonte

Nessa estrutura o conteúdo final não está atrelado a impressora, é só uma ferramenta base criação do conteúdo o resultado não importa. Por muito tempo no desenvolvimento dos temas clássico os templates eram páginas completas, agora esse paradigma mudou estamos em estruturas mais unitárias. Podemos recriar um tipo de layout sem precisar rescrever o template do zero.

O ponto principal dos blocos não é definir o resultado final, mas sim agilizar o processo de criação de conteúdo.

Árvore de blocos

Além do conteúdo armazenado na coluna post_content para manter a estrutura de correta dos blocos o WordPress criar uma descrição semântica em JSON chamada Tree of blocks ou árvore de blocos. Durante a execução, os blocos são mantidos na memória. Nesse momento, uma postagem do Gutenberg não é HTML, mas uma árvore de objetos e atributos associados.

O Gutenberg se baseia num modelo de dados que preserva a estrutura, de modo que os editores e visualizações para tipos específicos de blocos possam permanecer independentes do HTML final renderizado.

Exemplo:

[<br>     {<br>         type: "core/cover-image",<br>         attributes: {<br>             url: "my-hero.jpg",<br>             align: "full",<br>             hasParallax: false,<br>             hasBackgroundDim: true<br>         },<br>         children: ["Gutenberg posts aren't HTML"]<br>     },<br>     {<br>         type: "core/paragraph",<br>         children: ["Lately I've been hearing plen…"]<br>     }<br> ];Code language: HTML, XML (xml)

Esse post tomou como referência o Handbook do WordPress leitura extremamente recomendada para você que trabalha com desenvolvimento de temas e plugins na plataforma.

Como podemos ver existe muita coisa por trás do novo editor uma arquitetura complexa, mas que irá trazer um ganho muito grande para a plataforma. Espero detalhar mais pontos sobre o Gutenberg. Para não ficar uma leitura longa vamos a finalizar por aqui nos próximos posts:


Publicado

em

por

Comentários

Deixe um comentário

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