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

A otimização do Gutenberg foi realizado de forma progressiva, 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 nosso usuários. Criando uma real experiencia WYSIWYG.

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 pra cada coluna.

Para manter compatibilidade com versões anteriores armazenamos os blocos no banco de dados dentro da coluna wp_content como o WordPress armazena normalmente, com uma pequena diferença os blocos são representados por comentários em um formato entendido pelo back-end do WP se o site desativar o Gutenberg o conteúdo não será exposto para o usuário final. Um exemplo de bloco de paragrafo:

Por exemplo:

<!– wp:paragraph {“key” : “value”} –>
<p>Este é um bloco do gutenberg.</p>
<! — /wp:paragraph –>

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

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 seus atributos ou configurações, cada elemento pode ser alimentado por HTML puro, meta data ou diferentes origens. Uma feature do Gutenberg é a possibilidade criar blocos e copias 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 fixa-los em uma região específica.

Categorias de blocos

Quando acionamos o Block Inserter, abrimos um pop up com os blocos disponiveis, cada bloco terá um titulo e uma categoria. Podemos ter blocos nativos ou blocos customizados por plugins ou tema.

Blocos Reutilizáveis

Nos da a possibilidade de reutilizar blocos e repetir partes de um determinado conteúdo. Qualquer edição feita em um bloco reutilizável será replicado em todas 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 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 a 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 do página os caracteres eram armazenados para serem utilizados em uma nova página.

fonte: https://infograph.venngage.com/p/148195/renaissance-innovations-project-the-first-printing-press-johannes-gutenberg

Nessa estrutura o conteúdo final não está atrelado a impressora, é só uma ferramenta base criação do conteúdo o resultado final não importa. Por muito tempo no desenvolvimento do 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 dentro da 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 em um 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:

[
{
type: “core/cover-image”,
attributes: {
url: “my-hero.jpg”,
align: “full”,
hasParallax: false,
hasBackgroundDim: true
},
children: [“Gutenberg posts aren’t HTML”]
},
{
type: “core/paragraph”,
children: [“Lately I’ve been hearing plen…”]
}
];

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 finalizando por aqui nos próximos posts irei trazer mais conceitos chaves dentro do Gutenberg.

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

Deixe um comentário

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