Como contribuir para o Gutenberg como desenvolvedor do WordPress

Publicados: 2019-03-01

Você vai gostar mais ou menos, mas Gutenberg, o editor de blocos do WordPress, veio para ficar. O bom é que sendo open source você pode modificá-lo como quiser (se você souber como).

Ainda mais, se você encontrar um erro no editor que você acha que deve ser resolvido, você pode denunciá-lo ou tentar resolvê-lo você mesmo e enviar as alterações para que todos nos beneficiemos delas. Com isso você estará contribuindo para melhorar o projeto bem como seu bom carma .

Escrevendo conteúdo em Gutenberg
Escrever conteúdo em Gutenberg parece muito natural.

Você conhece os passos a seguir para contribuir com o código base do Gutenberg? Provavelmente sua resposta é não. Aconteceu a mesma coisa comigo e tive que investigar. Então vou explicar como proceder para facilitar e agilizar o entendimento de todo o processo e então contribuir para melhorar o Gutenberg (se desejar) com seu próprio código como desenvolvedor.

Há muito o que fazer e melhorar, mas está ao seu alcance ajudar a resolver esses problemas que você encontra com o editor de blocos do WordPress.

Passos para contribuir para o desenvolvimento de Gutenberg

Antes de começar, vou supor que você tenha um conhecimento mínimo do Git e que tenha uma conta no GitHub. Se este não for o caso, basta criar uma conta e dar uma olhada neste tutorial para aprender o básico.

Crie um Fork de Gutenberg

A primeira coisa que você precisa saber é que o código-fonte do Gutenberg está hospedado no GitHub neste repositório de código. A evolução do projeto é feita lá.

Repositório GitHub do Gutenberg para WordPress.
Repositório GitHub do Gutenberg para WordPress.

É aqui que você tem o código do Gutenberg como um plugin do WordPress. Para cada nova versão do plugin, a versão estável da base de código é transferida para a próxima versão do núcleo do WordPress. E esse é o caminho a seguir.

Para contribuir com código para o repositório Gutenberg, a primeira coisa que precisamos fazer é criar um fork em nossa conta do GitHub. Para isso, clicamos no botão Fork que aparece no canto superior direito, que você pode ver na imagem anterior.

Isso criará um repositório em sua conta do GitHub com os mesmos recursos e código que o oficial do WordPress. Mas como está em uma conta que você controla, você terá acesso para modificar o código e fazer o que quiser com ele. Basicamente, você tem uma cópia.

Clonar o repositório

Agora você tem seu próprio repositório Gutenberg conectado ao original. É hora de baixá-lo para o seu computador e trabalhar nele. Para isso, abra um terminal e execute o seguinte comando:

 git clone https://github.com/your-user/gutenberg.git

Lembre-se de substituir your-user pelo nome de usuário que você está usando no GitHub. Isso criará a pasta gutenberg no seu computador, baixando todo o conteúdo do seu repositório GitHub localmente.

Criar uma nova filial

Se você acessar a nova pasta verá que ela contém tudo o que aparece no branch master do repositório (ou branch principal). Você não deve tocar neste branch com modificações, então antes de modificar o código do Gutenberg, vamos ver como criar um novo branch.

Se você não sabe o que é um branch no Git, recomendo que leia este artigo. De qualquer forma, para o que vamos fazer, basta saber que branches no Git são a forma de separar as modificações que fazemos no código de um repositório, para manter uma certa ordem.

Se eu quiser adicionar uma nova funcionalidade, vou criar uma nova ramificação cujo nome identifica o que vou fazer, e então desenvolverei a funcionalidade lá. Uma vez terminado e quando todo o meu código modificado estiver estável, posso mesclar esse branch com o branch principal ( master , lembre-se) e pronto.

Os comandos do Git para criar um novo branch e carregá-lo no repositório são os seguintes:

 git checkout -b fix/clone-block git push -u origin fix/clone-block

Isso criará a ramificação fix/clone-block . Lembre-se de mudar o nome de acordo com o que você vai fazer. De acordo com o guia do contribuidor de Gutenberg, você deve usar um nome para sua ramificação com prefixo e descrição, como: [type]/[change] .

Um bom prefixo geralmente é:

  • add/ adicionar uma nova funcionalidade
  • funcionalidade try/ experimental, para fins de teste
  • update/ atualizar uma funcionalidade existente
  • fix/ corrigir um problema

Por exemplo, fix/clone-block indica que vamos propor uma correção ao clonar blocos.

Aplicar alterações ao código

Agora, você tem tudo pronto para abrir os arquivos com o editor que mais gosta e começar a programar. Mas antes de fazer isso você deve saber algumas coisas…

Primeiro, todo o código do Gutenberg segue um guia de estilo específico que você também deve respeitar. Os detalhes específicos de como você escreve o código são descritos aqui.

Exemplo de regras para escrever strings JavaScript definidas no guia de estilo do Gutenberg.
Exemplo de regras para escrever strings JavaScript definidas no guia de estilo do Gutenberg.

Existem regras para CSS, JavaScript e PHP. Adira a essas regras ou certamente terá problemas ao conseguir que seu código seja aceito no repositório oficial.

Para sua informação, no meu caso a modificação que fiz foi usar a função lodash.cloneDeep() nos atributos de um bloco ao clonar um bloco com wp.blocks.cloneBlock() para que a cópia seja feita em profundidade, para evitar ter uma cópia superficial do bloco que clonamos. Você pode ver as alterações que fiz aqui.

Carregar as alterações para a nova ramificação

Depois de terminar, você deve confirmar as alterações e enviá-las para o repositório. Se você criou novos arquivos, deve primeiro adicioná-los ao controle de versão com o seguinte comando:

 git add your-file

E, agora, é hora de confirmar as alterações com este comando:

 git commit -am "Use cloneDeep when cloning a block"

Finalmente, para fazer o upload das alterações para o repositório, temos que usar o seguinte comando:

 git push

Depois disso, se você for ao repositório no GitHub, verá suas alterações carregadas no branch que você criou. Perfeito! Estamos quase lá…

Criar uma solicitação pull no repositório Gutenberg

Já fizemos as alterações e as carregamos em nosso repositório. Agora o que temos a fazer é alertar sobre a existência de nossas alterações propostas aos desenvolvedores responsáveis ​​pela gestão do projeto Gutenberg.

Para que nossas alterações sejam discutidas e aprovadas para fazer parte (ou não) da base de código do Gutenberg, precisamos fazer um pull request . Um pull request é um pedido que o dono de um fork de um repositório faz ao dono do repositório original para que este incorpore os commits que estão no fork.

Para fazer isso, vamos ao nosso repositório de fork Gutenberg e clicamos no botão New pull request . Isso nos leva a uma visão na qual selecionar a ramificação que acabamos de enviar com nossas alterações. Isso fará a comparação com o branch principal do repositório original do Gutenberg:

Comparação do branch master do repositório oficial com o branch que inclui nossas mudanças em nosso repositório bifurcado.
Comparação do branch master do repositório oficial com o branch que inclui nossas mudanças em nosso repositório bifurcado.

Quando selecionamos nossa ramificação no seletor suspenso à direita, como você vê na imagem anterior, o GitHub nos mostra um resumo das alterações feitas nesta ramificação em relação ao repositório original do Gutenberg.

Em seguida, clicamos no botão Criar solicitação de pull . Isso nos levará a outra visualização na qual teremos que preencher um texto com as informações descritivas do motivo pelo qual queremos fazer essas alterações no repositório.

Como você vê na imagem a seguir, já temos um modelo de conteúdo que nos é solicitado o preenchimento:

Tela na qual preenchemos as informações necessárias para criar nosso pull request no repositório Gutenberg.
Tela na qual preenchemos as informações necessárias para criar nosso pull request no repositório Gutenberg.

Basicamente, você deve incluir uma descrição de suas alterações explicando o que você fez e seus motivos. Você também deve indicar se testou o código e como o fez. Você pode até adicionar capturas de tela, se necessário.

Não se preocupe se você não souber muito bem como preenchê-lo. As pessoas que cuidam do repositório Gutenberg irão ajudá-lo.

Quando terminar, clique no botão Create pull request para que sua pull request seja finalmente pública. Agora você só precisa esperar que outros revisores dêem uma olhada e, eventualmente, aprovem e mesclem seu código no repositório oficial.

Tenha em mente que esta revisão pode levar mais ou menos tempo dependendo de muitos fatores. No meu caso, finalmente, minha solicitação de pull foi fechada e não prosperou. Mas aprendi muito em todo o processo. E os comentários dos revisores foram sempre positivos e construtivos. Você pode vê-lo aqui. Mas continuei trabalhando e finalmente consegui um pull request aprovado!

Se você acha que há algo em Gutenberg que deve mudar e está ansioso para mudá-lo no código, agora você sabe como é o processo. Além disso, tudo o que expliquei aqui não é válido apenas para Gutenberg. A maioria dos projetos de software de código aberto funciona de forma idêntica (ou muito semelhante).

Não hesite em contribuir. Certamente você aprenderá muito ao longo do caminho.

Imagem em destaque de Mike Erskine em Unsplash .