Recursos para dominar as tecnologias por trás do Gutenberg para WordPress

Um dos maiores desafios que os desenvolvedores têm que enfrentar com o WordPress é reciclar nosso conhecimento para se adaptar ao novo paradigma de programação por trás do novo editor de blocos. A principal mudança com Gutenberg é a nova pilha de tecnologias usadas. Normalmente, um desenvolvedor WordPress cria plugins usando principalmente PHP, com partes menores escritas em JavaScript. Agora a ferramenta chave é o JavaScript, deixando o PHP apenas como base para criar a estrutura de plugins e temas.

Você pode pensar que esse não é o caso e que o PHP ainda tem uma longa jornada no WordPress. Não o culpo por isso, pois as mudanças sempre são difíceis de aceitar. No entanto, acho que você está errado. JavaScript não é mais o futuro do WordPress, mas o presente. E se você quiser manter sua posição, precisará se atualizar agora.

Felizmente, embora eles tenham insistido que devemos aprender JavaScript profundamente, acho que não é o caso. Saber alguns mínimos que qualquer tutorial pode te ensinar é mais que suficiente. Você pode aprender tudo o que precisa para começar a desenvolver para o Gutenberg rapidamente, graças aos recursos que descreverei ao longo deste artigo.

Aprenda JavaScript

Quando você aprende uma nova linguagem de programação, a primeira coisa que você precisa saber é entender sua sintaxe. Só assim você pode começar a programar com ele. Depois de fazer isso, você tem tudo pronto para começar a criar.

Se você nunca fez nada com JavaScript antes, estes são alguns tutoriais em diferentes formatos que ajudarão você a começar:

• JavaScript Language Basics: curso gratuito de Zac Gordon em formato de vídeo.
• JavaScript 30: aprenda fazendo com um desafio todos os dias durante 30 dias com Wes Bos neste curso gratuito.
• Uma reintrodução ao JavaScript: breve introdução ao JavaScript pelos caras da Mozilla.
• JavaScript For Cats: outra introdução ao JavaScript com certos toques de humor de gato.
• Exercism.io: web grátis onde você pode fazer exercícios em JavaScript e enviar sua solução para um mentor avaliar.
• JSBooks: se você é daqueles que prefere aprender com livros, aqui você tem muitos deles de graça.

Por outro lado, se você já tem alguma experiência em JavaScript, amplie seus conhecimentos estudando conceitos avançados sobre as funções, execução assíncrona com promessas e async/aguarde, enfim, tudo relacionado ao ESNext.

Com um dia de treinamento em JavaScript deve ser mais que suficiente para adquirir o conhecimento básico para se movimentar com facilidade em tudo relacionado ao que você precisará desenvolver em cima do editor de blocos do WordPress.

Aprenda React e Redux

Além do JavaScript, para desenvolver no editor de blocos do WordPress você precisará ter certas noções de React e Redux.

Isso é o que todo mundo vai te dizer, mas a verdade é que não é assim. Você pode desenvolver para Gutenberg sem ter nenhuma ideia de React ou Redux. Claro, se você souber como eles funcionam e para que são usados, então seria melhor.

React e, acima de tudo, JSX

O que você não pode evitar é saber como funciona a sintaxe do JSX para criar elementos dentro do React, que usaremos para definir a interface dos nossos componentes (sejam eles blocos Gutenberg ou views dentro do editor).

Imagine que você deseja definir a interface para os componentes Product e ShoppingList e, em seguida, usá-los em um bloco Gutenberg. Com a notação padrão, você faria isso da seguinte maneira, usando a função wp.element.createElement() fornecida pelo Gutenberg:

Por outro lado, se você usar JSX dentro do método render() , que nada mais é do que uma notação parecida com HTML, o que você tem é o seguinte:

O uso de JSX simplifica a escrita e a reutilização de componentes, pois o código é muito mais simples e fácil de ler. Como você pode ver, no exemplo anterior estamos criando componentes React sem ter a menor ideia de React, apenas sabendo lidar com JSX e usando-o como se fosse HTML com superpoderes. Além disso, você também pode usar componentes existentes no Gutenberg. Você pode vê-los neste visualizador que também está vinculado à documentação oficial.

Há apenas um problema. Você precisará transpilar o código com o Babel para que a notação JSX acabe se transformando em código normal que qualquer navegador possa interpretar. No entanto, isso não é um drama, pois você pode fazer isso automaticamente usando o WebPack.

Redux para manter o status do seu aplicativo

Por outro lado, você provavelmente já ouviu falar do Redux. É uma ferramenta para salvar e gerenciar o status em aplicativos JavaScript. Novamente, se você estiver interessado em aprender como usá-lo, recomendo esses vídeos do Wes Bos, mas também não é necessário.

Se você tivesse a necessidade de criar seu próprio armazenamento de dados, não faria isso com o Redux, mas usaria o pacote @wordpress/data incluído no Gutenberg. Este pacote usa o Redux internamente, mas isso não importa. Além disso, estamos falando de um caso de uso complexo que você provavelmente não precisa, pelo menos em um estágio inicial. Então, por enquanto, esqueça.

NPM, WebPack, Babel, PostCSS e ESLint

Além de JavaScript e noções básicas de React e JSX, para a nova era que já está aqui no WordPress você precisará conhecer as seguintes tecnologias para que suas tarefas de desenvolvedor sejam muito mais simples e altamente automatizadas:

• NPM: o gerenciador de dependências para JavaScript. Basta definir as dependências que você precisa e instalá-las fazendo npm install .
• WebPack: o empacotador JavaScript. Não é fácil de configurar no início, mas uma vez que você o tenha, facilita o trabalho de gerenciamento de arquivos JavaScript: transpilação, minificação…
• Babel: o compilador JavaScript para poder usar a sintaxe das próximas versões desta linguagem hoje.
• PostCSS: o mesmo que Babel, mas para suas folhas de estilo CSS.
• ESLint: detecta erros de uso e estilo de JavaScript para que você possa evitá-los enquanto escreve o código.

Já falei sobre a maioria dessas tecnologias aqui. No entanto, vou escrever outro artigo em breve, onde explicarei como integrá-los em um projeto de desenvolvimento do WordPress para que você possa usá-los em um caso real.

Como criar novos blocos para Gutenberg

Agora, vamos para a parte mais importante: o que precisamos para começar a criar novos blocos para o editor do WordPress.

A primeira coisa que você precisa para começar a criar seus próprios blocos é dominar a função wp.blocks.registerBlockType() . Você encontrará a documentação mais completa sobre esta função no guia oficial do Gutenberg.

Os argumentos para esta função são uma string com o nome do bloco, que deve ser único, e um objeto com a configuração do bloco, onde as partes mais importantes são as funções save e edit do bloco. Eu já expliquei brevemente isso para você neste artigo.

Se isso parecer muito complicado, você pode começar a usar o kit de ferramentas Ahmad Awais chamado create-guten-block . Isso cria uma estrutura de pastas com todas as dependências necessárias para criar seu primeiro bloco. Você pode ver um tutorial sobre seu uso no vídeo a seguir:

Finalmente, se isso ainda parecer muito complexo, você tem uma última opção disponível. Certamente você conhece o plugin Advanced Custom Fields (também conhecido como ACF, para abreviar). Bem, este plugin permitirá que você crie blocos para Gutenberg sem ter nenhuma ideia de JavaScript.

Mas não vou te explicar, vou deixar o Mauricio Gelves fazer. Vá conferir a apresentação dele sobre este assunto no WordCamp Zaragoza 2019 que você já tem no WordPress.tv (em espanhol):

Como estender o editor de blocos no WordPress

Há muitas outras coisas que você pode fazer com o Gutenberg, além de criar novos blocos. Por exemplo, você pode criar um plugin dentro do Gutenberg para adicionar um painel de opções no lado direito do editor com tudo o que quiser. A melhor coisa sobre isso é que a documentação oficial do WordPress inclui este tutorial completo com exemplos concretos do que você pode fazer lá.

Além disso, você pode estender o editor do WordPress adicionando novos estilos aos blocos existentes, adicionar mais configurações personalizadas aos blocos, remover blocos ou ocultá-los ou filtrar as categorias de blocos que você pode ter no editor.

Eu recomendo que você dê uma olhada na documentação oficial que você tem no manual do Gutenberg para desenvolvedores e designers que você encontrará aqui. Acalme-se porque há muita informação e este é um dos melhores recursos que você tem disponível.

Imagem em destaque por Christian Fregnan em Unsplash .