Como criar um bloco personalizado do WordPress Gutenberg: série de tutoriais

Esta é uma série de tutoriais detalhados sobre como criar seus próprios blocos personalizados do WordPress Gutenberg. É para você que é desenvolvedor de temas ou plugins e está, assim como eu, frustrado com a falta de documentação. A maior parte do que aprendi quando se trata de desenvolver no novo mundo Javascript do WordPress é por tentativa e erro, experimentando vigorosamente e lendo tudo relacionado que encontrei. E então pensei que poderia reunir tudo o que aprendi até agora em um grande tutorial.

Através de 10 partes este tutorial tem como objetivo ensiná-lo a escrever seus próprios blocos personalizados. Não importa para que servem, começando no básico e trabalhando em recursos mais complexos. Eu recomendo que você escreva tudo sozinho em vez de copiar e colar o código. Essa é a melhor maneira de aprender! Siga a série da etapa 1 a 10, pois construiremos no topo do bloco à medida que avançamos.

O que você precisa saber antes de começarmos

Antes de mergulharmos nas etapas; uma renúncia. Há algumas coisas que você já deve saber de antemão sobre o que esta série é e o que não é.

As linguagens de programação

Você precisa saber Javascript – isso é um dado adquirido. Não há necessidade de ser um especialista, mas este não é um tutorial de Javascript. Quanto à versão Javascript ECMAScript; você pode escrever em ES5 e não se preocupar em compilar seu código com Babel e outras coisas. No entanto, esta série é escrita com código ES6 e ESNext. Não se preocupe – a etapa 1 é dedicada a guiá-lo na configuração de um ambiente de desenvolvimento pronto para codificar no ESNext com todas as suas novas sintaxes.

Como você provavelmente sabe, o Gutenberg é baseado no React JS. Esta série também não é um tutorial do React, e pressupõe o conhecimento básico do React e como ele funciona. Novamente, não há necessidade de ser um especialista. Como o React já existe há algum tempo, existem muitos bons tutoriais, documentação e recursos dedicados a ensinar o React. Então, eu recomendo pesquisar estes primeiro.

Esta série é focada em aprender as partes Javascript, React e JSX e não se preocupa com estilo / CSS. Como o objetivo do seu bloco pode ser drasticamente diferente, optei por não focar no estilo e fornecer apenas HTML muito básico. Cabe a você adicionar seu estilo e a saída HTML necessária para fazer seu bloco renderizar exatamente como você precisa.

A idade deste tutorial

E, finalmente, considere a época em que esta série foi escrita. Gutenberg ainda é muito novo, mas está mudando drasticamente e sendo aprimorado.

Se você encontrar isso em um futuro distante, algum código pode ser preterido ou substituído por métodos melhores. Este guia foi escrito e finalizado no WordPress versão 5.2.3 (final do ano de 2019).

O que você vai aprender

Nas primeiras partes nos concentramos no básico. Configuramos um ambiente de desenvolvimento com a compilação em execução do nosso código. E o básico de como registrar um bloco e as partes PHP necessárias dele também. Aprenderemos sobre a enorme biblioteca de componentes e métodos disponíveis para nós no WordPress Gutenberg.

Continuando, aprenderemos como adicionar seções e configurações para nosso bloco na barra lateral do editor (Inspetor), bem como personalizar a barra de ferramentas. Ao longo do caminho, abordaremos muitos tipos de entrada diferentes e como usar o componente de Gutenberg para eles. E é claro que aprenderemos como salvar, atualizar e enviar as informações salvas para o nosso bloco – e como isso funciona nos bastidores.

No final, veremos coisas mais avançadas, como blocos dinâmicos e como usar o PHP para renderizar a saída do bloco. E, finalmente, como fazer consultas de postagem dentro do editor – permitindo que o usuário selecione uma postagem de uma lista para renderização.

Índice

Abaixo você encontrará links diretos para cada parte da série.

• Parte 1: Configurando o Ambiente de Desenvolvimento
  Na primeira parte desta série de tutoriais sobre como criar blocos personalizados do Gutenberg, precisamos configurar nosso ambiente de desenvolvimento. Precisamos de um lugar onde possamos escrever nosso código em sintaxes ES6/ESNext e compilá-lo em qualquer lugar.

• Parte 2: Registrando um Bloco
  Nesta parte vamos escrever Javascript para registrar e configurar nosso bloco personalizado. Ao final vamos registrar o script com PHP e fazer o código PHP necessário para que o WordPress o reconheça como um novo bloco.

• Parte 3: Props e Componentes do WordPress
  No passo anterior aprendemos como registrar um bloco customizado, tanto em Javascript quanto em PHP. Nesta etapa, aprenderemos como usar os componentes do WordPress para adicionar diferentes tipos de campos e configurações.

• Parte 4: Atributos
  Nesta parte veremos como definir atributos, buscar seus valores e atualizá-los. Com os atributos, podemos aceitar a entrada do editor, salvá-la e produzi-la da maneira que escolhermos.

• Parte 5: Adicionando Configurações do Inspetor
  Nesta etapa, focaremos no que o WordPress (pelo menos em código) chama de Inspetor – a barra lateral do lado direito do editor. Abordaremos alguns novos componentes que fazem sentido colocar na barra lateral e como lidar com eles.

• Parte 6: Adicionando Barras de Ferramentas
  Neste post vamos aprender como adicionar as barras de ferramentas do WordPress ao nosso bloco, ou seja, para alinhamento e alinhamento de blocos. Também aprenderemos a adicionar nossas próprias barras de ferramentas com nossos próprios botões para fazer ações personalizadas.

• Parte 7: Criando seus próprios componentes
  Até agora, nesta série de tutoriais, escrevemos todo o código dentroregisterBlockType()daeditfunção do. É totalmente possível e geralmente recomendado atribuir a edição a um componente separado. Ao fazer isso, podemos utilizar funcionalidades como o estado do componente e os métodos do ciclo de vida.

• Parte 8: Tradução do seu Bloco
  Nesta parte vamos focar em como traduzir os textos e valores do nosso bloco. Usamos o WP-CLI para gerar os arquivos necessários para que o Gutenberg possa carregar nossas traduções ao alternar o idioma do WordPress.

• Parte 9: Blocos Dinâmicos
  Até agora renderizamos a saída do bloco em Javascript. No entanto, com conteúdo dinâmico, como postagens recentes ou exibir uma postagem, pode exigir que renderizemos a saída do bloco em PHP.

• Parte 10: Buscando postagens e componentes de ordem superior
  Na parte final, aprenderemos como usar componentes de ordem superior e, portanto, como realizar uma consulta de postagem de dentro do editor e fornecer um método para selecionar postagens.