Criar bloco personalizado do Gutenberg – 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. É possível escrever blocos personalizados do Gutenberg usando a sintaxe ES5 sem configurar o Webpack e o Babel. Mas o código será realmente complicado de ler e escrever. Se você não tiver certeza de por que precisamos fazer tudo isso, ou qual é a diferença, leia meu post explicando isso. Posso garantir que, quando você voltar, será convencido a dar esse passo extra para escrever um código melhor.

Suponho que você já tenha um WordPress local rodando em uma pilha LAMP ou similar. E que você está escrevendo um tema ou um plugin. Quanto a mim, estou colocando meu código em um tema que desenvolvi, awp-starter-theme, localizado na minha pasta de temas do WordPress. Eu quero separar meu desenvolvimento do Gutenberg de todos os outros arquivos de tema, então eu crio um subdiretório gutenberg-devdentro da minha pasta raiz do tema. Essa será a pasta do meu projeto e a pasta à qual me referirei para o restante da série de tutoriais.

Eu já escrevi um guia detalhado sobre como configurar um ambiente de desenvolvimento para o Gutenberg, então vou passar rapidamente pelos passos aqui. Se você nunca fez isso antes, recomendo a leitura do post do link abaixo, pois contém mais informações do que você encontrará aqui!

Configurar o projeto com webpack

Usando o terminal (terminal iOS ou Windows cmd ambos funcionam bem), navegue até a pasta do seu projeto (no meu caso awp-starter-theme/gutenberg-dev). Iniciamos um novo projeto pedindo ao npm para gerar um package.jsoncom conteúdo genérico.

Criando pacote.json

npm init -y

Em seguida, instalarei os scripts do WordPress que nos ajudarão muito na configuração com este comando (que adicionará a subpasta node_modulese package-lock.jsontambém):

npm install --save-dev --save-exact @wordpress/scripts

Abra o package.jsonarquivo na pasta do seu projeto em um editor e encontre a scriptspropriedade. Nós o substituímos por dois scripts do pacote WordPress que acabamos de instalar:

"scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
},

O script “build" compilará meus arquivos. Mas como ele deve ser executado manualmente toda vez que uma alteração for feita, usaremos o script “start” enquanto desenvolvemos. Ele então iniciará um “modo de observação” onde ele escuta às alterações feitas em qualquer um de seus arquivos de script e os recompila sempre que você salva as alterações.

Configuração do Webpack

A próxima etapa é criar um arquivo de configuração do webpack. Faço isso porque não quero usar as pastas e nomes de arquivos de origem e saída padrão. Quero decidir por mim mesmo onde estão meus arquivos de origem e onde os arquivos compilados devem terminar.

Com a ajuda do @wordpress/scriptspacote que instalamos, podemos herdar a configuração do webpack do WordPress e substituir apenas as partes que queremos alterar.

Em nossa pasta de projeto, crie um novo arquivo chamado webpack.config.jse abra-o em um editor. Adicione este conteúdo:

const defaultConfig = require("@wordpress/scripts/config/webpack.config");
const path = require('path');
module.exports = {
    ...defaultConfig,
    entry: {
        'block-awhitepixel-myfirstblock': './src/block-awhitepixel-myfirstblock.js'
    },
    output: {
        path: path.join(__dirname, '../assets/js'),
        filename: '[name].js'
    }
}

O que isso faz é definir meu arquivo de entrada (atualmente apenas um) na entrypropriedade, localizada em uma subpasta srcna pasta do meu projeto, chamada block-awhitepixel-myfirstblock.js. Obviamente, nomeie seus arquivos como quiser, mas lembre-se de alterar a chave e o valor. Porque na outputpropriedade estou pedindo ao webpack para compilar meus arquivos de entrada com a chave de entrada como nome do arquivo. Na pathpropriedade peço para colocar todos os arquivos compilados um passo fora da pasta do meu projeto, e dentro da assets/jspasta do tema. Ajuste os nomes dos arquivos e o local para se adequar ao seu projeto. Consulte o meu guia detalhado se estiver confuso.

Crie uma subpasta src/na pasta do projeto e é aqui que colocaremos todos os arquivos de origem. (Ajuste se você alterou o entrylocal em webpack.config.js). Crie um arquivo block-awhitepixel-myfirstblock.jsaqui e deixe-o vazio por enquanto.

Há mais um passo – e isso vale para nós que queremos usar os recursos mais recentes do ESNext. Infelizmente, a configuração padrão do WordPress Babel está ausente. E porque eu quero usar funcionalidades como funções de seta, preciso configurar o Babel também.

Configurando o Babel

Primeiro precisamos instalar alguns pacotes para nossa configuração do Babel digitando este comando:

npm install --save-dev @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties

Feito isso, crie um novo arquivo .babelrcna pasta do nosso projeto. Aqui é onde colocaremos nossa configuração do Babel:

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": [
        [
            "@babel/plugin-proposal-class-properties"
        ]
    ]
}

E é isso para a configuração do nosso ambiente de desenvolvimento!

Comandos de compilação

Durante todo o desenvolvimento, você precisará compilar seus arquivos Javascript. Em nosso package.jsonadicionamos dois scripts apenas para isso.

Sempre que queremos desenvolver em nossos arquivos Javascript, executamos isso no terminal:

npm run build

Este comando executará a compilação sempre que você executar isso no terminal. Experimente e você deve ver que ele gera o arquivo block-awhitepixel-myfirstblock.js(junto com um ou dois outros arquivos “asset”) em sua pasta de saída definida que você definiu em webpack.config.js. No meu caso aparece em awp-starter-theme/assets/js/.

Usar o comando acima funciona bem, mas é irritante repetir toda vez que você faz alterações em seus arquivos. Você provavelmente preferiria executar este comando:

npm run start

Isso definirá seu terminal no “modo de observação”, detectando quaisquer alterações salvas em seus arquivos Javascript e compilando-os à medida que avança. Sempre que seus arquivos contiverem erros, o terminal emitirá as mensagens de erro. Pressione CTRL + C para parar o processo de observação.

Como referência, minha pasta do projeto agora se parece com a imagem. Prefiro separar todos os arquivos de configuração e especialmente a subpasta node_modules/(que contém literalmente dezenas de milhares de arquivos) do restante do código do meu tema. Facilita a configuração de regras para ignorar – por exemplo, compiladores SCSS ou git ignore. Já configuramos a configuração do webpack para compilar os arquivos finais diretamente awp-starter-theme/assets/js/junto com outros arquivos Javascript para o meu tema.

Agora estamos prontos para a próxima parte, onde começaremos registrando nosso primeiro bloco personalizado.