O básico do desenvolvimento para WordPress Gutenberg para iniciantes

Este post tem como objetivo ajudá-lo a entender os principais conceitos de desenvolvimento para o novo editor no WordPress; Gutenberg. Gutenberg ainda é bastante novo no momento em que escrevo isso. E, como acontece com todas as novas tecnologias em sua fase de nascimento, a documentação e os padrões infelizmente estão um pouco ausentes.

O site de documentação do WordPress tem uma grande seção dedicada ao Gutenberg para desenvolvedores; chamado de manual do editor de Gutenberg. Já contém bastante informação. Mas pode ser um pouco confuso ou intimidante para alguém que é novo em tecnologias baseadas em Javascript. Para desenvolvedores focados em PHP que podem ter apenas conhecimento básico de Javascript/jQuery, as novas tecnologias do WordPress podem parecer intimidantes. Mas confie em mim, depois de aprender os conceitos-chave, você verá que novas possibilidades você tem agora como desenvolvedor do WordPress.

Vamos começar com o básico absoluto. Quais linguagens de programação e ferramentas você precisaria usar ou aprender para desenvolver melhor para o Gutenberg?

A linguagem e as bibliotecas que você precisa conhecer

A resposta curta para qual linguagem você precisa usar para desenvolver para Gutenberg é: Javascript. No entanto, no mundo do Javascript, existem alguns conceitos, extensões e ferramentas que você deve conhecer.

Em primeiro lugar, há uma questão de versão Javascript. Existe uma padronização oficial do Javascript; ECMAScript. O ECMAScript 5 (muitas vezes abreviado para ES5) foi lançado há cerca de 10 anos e é a versão Javascript com a qual a maioria dos desenvolvedores está familiarizada. Depois temos o ECMAScript 6 (muitas vezes abreviado para ES6) que saiu em 2015. Algumas pessoas se referem a esta versão como ES2015. E finalmente há ESNext, que é um nome dinâmico que cobre a próxima versão, contendo propostas que esperamos que sejam incluídas em qualquer próxima versão padronizada do Javascript.

Você pode estar pensando como “então tudo bem e tudo mais, versões mais recentes do Javascript significam apenas mais recursos. Então, vou usar apenas o mais novo." Mas há uma coisa muito importante que você precisa saber sobre as versões de Javascript e é isso: a maioria dos navegadores hoje só pode entender ES5.

Isso significa que se você deseja escrever Javascript em ES6 ou ESNext, você precisa configurar ferramentas que transformem seu código em ES5 para que os navegadores possam entendê-lo. Mas antes de começar a pensar em pular o aprendizado do ES6 e do ESNext, lembre-se de que o ES5 tem 10 anos. E isso exigirá que você escreva muito mais código. Também será muito menos legível e mais complexo do que se você o escrevesse em ES6 ou ESNext.

Além disso, para os conceitos de Gutenberg, você também deseja usar JSX – uma extensão de sintaxe para Javascript. JSX também é uma linguagem que os navegadores não podem entender sem transformá-la.

Então, por que se preocupar com ES6, ESNext ou JSX?

Se você ainda não está convencido de que o ES6/ESNext vale o passo extra para transformá-lo, deixe-me mostrar uma comparação de código. Com ES6 e JSX você pode escrever isso para retornar um parágrafo simples; com uma classe e saída dinâmica de uma variável;

Para aqueles de vocês que são novos nisso e acham que esqueci as citações – não, não esqueci. Esta é a simplicidade do JSX. Vamos comparar o acima com como você escreveria com as bibliotecas Javascript do ES5 e do WordPress:

return wp.element.createElement(
    'p',
    { className: 'example' },
    'Hello, my name is ' + name
);

Todo o código acima é necessário para produzir o que o ES6 e o ​​JSX podem fazer em uma linha singular muito fácil de ler! Imagine construir uma interface do usuário mais complexa com eventos e condicionais, quando apenas um parágrafo simples requer esse pedaço de código complicado.

Convencido? Bom!

Ferramentas de transformação e React JS

A ferramenta mais comum, e a que o WordPress usa, para transformar o ES6/ESNext é o Babel. Normalmente você usaria o Babel como um plugin para o Webpack, que é uma ferramenta que agrupa e reduz seus arquivos Javascript. Ambas as ferramentas estão usando Node.js, que fornece algumas ferramentas para executar scripts para Webpack e Babel na linha de comando. Se isso parece confuso, tenho um post que explica em profundidade como configurar todas essas ferramentas para o desenvolvimento do Gutenberg.

A segunda coisa que você precisa saber sobre tecnologias é que o Gutenberg é baseado em uma camada de abstração em cima do React JS. O React JS é uma biblioteca Javascript de código aberto mantida pelo Facebook e foi lançada por volta do ano de 2013. Como o React já existe há algum tempo, há muitos tutoriais, guias e documentação para essa biblioteca. O site oficial do React tem um tutorial bom e detalhado para você que é novo no React. Você definitivamente não precisa ser um especialista em React para desenvolver para Gutenberg, mas o básico de como ele funciona com componentes e estados o ajudará muito a entender o Gutenberg.

Concluir:

• Aprender o React JS ajudará bastante a entender como desenvolver para o Gutenberg. Especialmente se você deseja criar seus próprios blocos personalizados ou personalizar os existentes.
• Você pode fazer usando apenas ES5 Javascript, mas definitivamente é recomendado aprender ES6, ESNext e JSX.
• Familiarize-se com as ferramentas necessárias para transformar seu código ES6/ESNext/JSX. Essas ferramentas são npm, Webpack e Babel.

A nova maneira de armazenar conteúdo de postagem e por que

Um dos maiores benefícios do Gutenberg é se afastar do HTML fixo no conteúdo do post. O WordPress, antes do Gutenberg, e a maioria dos CMSs baseados na web armazenam o conteúdo do artigo em HTML puro. Isso geralmente não é um problema com conteúdo simples (títulos e parágrafos). Mas pode ser um problema maior com conteúdo rico mais complexo e dinâmico.

Qualquer CMS que permita conteúdo dinâmico no conteúdo do artigo encontrará problemas em como salvá-lo como HTML válido. Pode ser qualquer coisa, desde uma imagem que se refira ao seu ID no sistema, em vez do URL completo. Ou um widget que exibe dinamicamente as postagens mais recentes em uma determinada categoria. Normalmente, isso será resolvido com a saída de HTML enigmático personalizado que não faz sentido ser gerado normalmente. E então deixe o analisador CMS lidar com a transformação dessas partes HTML em algo significativo ou dinâmico. A desvantagem disso é que, se você transferir seu conteúdo para outro CMS, muitas vezes resultará em HTML feio. O conteúdo seria preenchido com HTML não analisado que você precisa limpar manualmente. Esta questão é o que Gutenberg pretende resolver.

Com o Gutenberg, o WordPress optou por salvar informações adicionais e dinâmicas como comentários HTML. Os comentários em HTML nunca são visíveis para os usuários no site e basicamente tudo é permitido dentro do bloco de comentários. Um comentário HTML começa <!--e termina com -->, e o Gutenberg armazena dados em uma determinada estrutura com o formato JSON. Cada bloco no Gutenberg é envolvido por um comentário HTML inicial e um comentário HTML final depois dele.

A nova maneira como o conteúdo da postagem é armazenado

Não vou entrar em detalhes sobre como os blocos de comentários são estruturados – você encontrará um guia detalhado sobre isso no WordPress Editor Handbook. Mas como exemplo, um parágrafo simples no conteúdo do post do Gutenberg será salvo no banco de dados como:

Quanto ao conteúdo dinâmico, geralmente nenhum HTML será gerado. Todas as informações que o WordPress precisa para entender o que esse bloco está fazendo, são encontradas nos comentários HTML. É assim que o Gutenberg armazena um bloco de “Últimos posts":

Como tudo é um comentário HTML, transferir suas postagens para outro WordPress sem Gutenberg ou outro CMS garantirá que nenhum HTML feio não analisado seja cuspido. Ele será simplesmente ignorado e ignorado.

Como você provavelmente já percebeu é que os blocos de comentários começam com o nome do bloco, prefixado com ‘ wp‘. Se houver alguma configuração personalizada, ela será exibida após o nome em JSON, como você pode ver no exemplo do bloco de postagens mais recentes. Gutenberg refere-se a isso como atributos, e esse conceito é algo com o qual você se familiarizará quando começar a aprender a desenvolver para Gutenberg.

Útil saber:
Se você quiser uma visão mais profunda de como o novo conteúdo do post é salvo, você pode procurar em sua wp_poststabela em seu banco de dados. Há outro método mais fácil de espiar o valor completo do banco de dados, de dentro dos modelos do WordPress. Em seu único modelo dentro do loop, simplesmente use ” echo get_the_content()“. Usar o ” the_content()” normal produzirá o conteúdo do post analisado, mas ecoar o valor do conteúdo produzirá exatamente o que está armazenado no banco de dados. Você pode usar a ferramenta Inspecionar ou visualizar a fonte no Chrome ou Firefox para ver os blocos de comentários.

O que você como desenvolvedor pode fazer em Gutenberg

Você tem algumas opções para personalizar seus temas ou plugins para o Gutenberg. Abaixo estão listadas as personalizações mais comuns que você provavelmente faria como desenvolvedor.

Estenda e personalize blocos existentes

O WordPress Gutenberg vem com um grande pacote de tipos de blocos e você pode estender qualquer um deles. Você também pode remover alguns deles ou decidir, em determinados casos, permitir ou remover apenas alguns deles.

O método mais comum de estender um bloco é adicionar estilos de bloco personalizados – que são variações de estilo de um bloco. Estilos de bloco não são tão comuns no WordPress padrão, mas existem alguns. Dê uma olhada no bloco Citação. No editor Gutenberg, você terá uma caixa na barra lateral direita chamada “Estilos”.

Outra maneira de personalizar os blocos existentes é usando filtros. Você provavelmente está familiarizado com filtros usando PHP no WordPress, mas com Gutenberg agora existem filtros baseados em Javascript em blocos. Por exemplo, você pode adicionar seus próprios atributos personalizados (configurações) a todos ou tipos específicos de blocos ou filtrar como eles são salvos ou emitidos.

Você também pode manipular as categorias de blocos, além de remover ou permitir determinados blocos em determinadas situações. Ou você pode, por exemplo, garantir que apenas alguns tipos de bloco sejam permitidos para um tipo de postagem personalizado.

Crie seus próprios blocos personalizados

Criar blocos personalizados é talvez o primeiro pensamento que a maioria dos desenvolvedores do WordPress tem. Os blocos padrão no WordPress podem percorrer um longo caminho, mas se você estiver criando um tema ou plugin mais complexo, provavelmente terá necessidades específicas. Por exemplo, usando Gutenberg para criar uma página inicial bonita com atalhos para conteúdo e conteúdo dinâmico. É possível obter a maior personalização usando a opção de classe CSS que existe para todos os blocos. Mas isso não é particularmente amigável.

Escrever seus próprios blocos personalizados é provavelmente o mais difícil de personalizar seu tema ou plugin para o Gutenberg. Mas também pode ser o mais gratificante! Você não apenas será capaz de criar blocos que tenham a aparência exatamente como deseja – mas também é uma ótima maneira de aprender rapidamente sobre a nova tecnologia baseada em Javascript.

Certificando-se de que seu tema está pronto para Gutenberg

Se você é um desenvolvedor de temas do WordPress, deve estar ciente de que há uma boa quantidade de configuração que seu tema pode precisar para o Gutenberg, especialmente na forma de arquivos add_theme_support(). O manual do WordPress tem uma boa visão geral de todos os suportes de temas que você precisa considerar para tornar seu tema pronto para Gutenberg.

Como o WordPress padrão lidará com a maioria dos estilos dos blocos padrão, você não precisa se preocupar muito em estilizá-los em seu tema. Mas os desenvolvedores de temas geralmente são mais exigentes quanto ao design e estilo. Portanto, você provavelmente precisará ajustar ou adicionar estilo de bloco. Você pode adicionar estilos de editor somente ao frontend, somente ao editor ou ambos. O Manual do WordPress Gutenberg fornece uma visão geral dos estilos do editor e dos estilos de bloco padrão.

Há também um conceito de modelos de blocos onde você pode predefinir quais blocos devem aparecer nas postagens. Os modelos de bloco podem ser usados ​​como um espaço reservado para ajudar o editor a preencher os blocos. Mas também pode ser usado para definir um conjunto fixo de blocos e posições.

E, finalmente, existem funções disponíveis para trabalhar com o analisador Gutenberg e como extrair blocos de postagens. Como todo o conteúdo é salvo com informações completas sobre o tipo de conteúdo, você pode extrair facilmente partes específicas do conteúdo da postagem. Um bom exemplo é extrair o primeiro parágrafo das postagens para mostrar como trecho. Uma função PHP muito útil para este conceito é [parse_blocks](https://developer.wordpress.org/reference/functions/parse_blocks/)(), que usa o analisador de Gutenberg no conteúdo do post fornecido e, em troca, você obterá um array PHP com todas as informações e conteúdo do bloco.

Conclusão

Espero que este post não apenas tenha ensinado algo sobre desenvolvimento para Gutenberg, mas também tenha deixado você curioso e interessado em aprender mais! Como um desenvolvedor WordPress focado em PHP que inicialmente resistiu à ideia de mudar para a tecnologia baseada em Javascript, posso dizer que uma vez que você tenha dado o passo para aprender sobre o “novo caminho”, você ficará feliz por ter feito isso. Gutenberg se abre para novas maneiras de personalizar, projetar e mostrar conteúdo do WordPress sem a necessidade de construtores de páginas ou temas com bibliotecas pesadas para permitir conteúdo de postagem flexível e de boa aparência. Nós só precisamos aprender a trabalhar com isso de forma otimizada!