Contribuir a Gutenberg

Te gustará más o menos, pero Gutenberg, el editor de bloques de WordPress está aquí para quedarse. Lo bueno que tiene es que al ser código abierto puedes modificarlo como te plazca (si sabes cómo).

Es más, si encuentras un error en el editor que crees que debería solucionarse puedes, o bien reportarlo, o bien intentar solucionarlo tú mismo y subir los cambios para que todos nos beneficiemos de éstos. Con esto estarás contribuyendo a mejorar el proyecto y a que tu buen karma gane enteros.

Bloques más comunes en Gutenberg
Gutenberg maqueta las páginas ofreciendo una colección de bloques. Tenemos párrafos, encabezados, imágenes, galerías…

¿Conoces los pasos a seguir para hacer una contribución al código de Gutenberg? Seguramente la respuesta sea que no. A mí me pasó lo mismo y tuve que investigarlo. Así que te voy a explicar cómo se hace para que te resulte más fácil y rápido entender todo el proceso y puedas contribuir a mejorar Gutenberg (si así lo deseas) con tus aportes como desarrollador.

Hay mucho por hacer y por mejorar, pero está en tu mano poner un granito de arena y ayudar a subsanar aquellos problemas que vayas encontrando con el editor de bloques de Gutenberg.

Pasos para contribuir al desarrollo de Gutenberg

Antes de empezar, voy a suponer que tienes unos mínimos conocimientos de Git y que dispones de una cuenta de GitHub. Si no es el caso, ve a crearte una y mírate este tutorial para que te sea más fácil entender lo que te voy a ir explicando.

Hacer un fork de Gutenberg

Lo primero que has de saber es que el código fuente de Gutenberg se encuentra alojado en GitHub. Concretamente en este repositorio de código. La evolución del proyecto se hace ahí.

Repositorio de GitHub de Gutenberg para WordPress.
Repositorio de GitHub de Gutenberg para WordPress.

En este lugar es donde tienes el código de Gutenberg como plugin para WordPress. Para cada nueva versión del plugin, una vez el código es estable se transfiere a la siguiente versión del core de WordPress. Y así se va avanzando.

De cara a contribuir con código en el repositorio de Gutenberg, lo primero que tenemos que hacer es crear un fork en nuestra cuenta de GitHub. Para ello hacemos clic en el botón Fork que aparece en la parte superior derecha, que puedes ver en la imagen anterior.

Esto creará un repositorio en tu cuenta de GitHub con las mismas características y código que el oficial de la cuenta de WordPress. Pero como está en una cuenta que controlas tú, tendrás acceso para modificar el código y hacer lo que quieras con él. Básicamente, tienes una copia (un fork, vaya).

Nelio Unlocker

Pásate a WordPress manteniendo tus diseños y contenidos

Mejora hoy mismo el SEO de tu web y acelera su velocidad de carga convirtiendo tus páginas a estándares HTML, CSS y WordPress. No necesitas conocimientos técnicos y solo pagarás por aquello que necesites.

Clonar el repositorio

Ahora ya tienes tu propio repositorio de Gutenberg conectado con el original. Y necesitas descargarlo en tu ordenador para tener el código disponible en el editor que uses. Para ello ve a un terminal y ejecuta el siguiente comando:

git clone https://github.com/tu-usuario/gutenberg.git

Recuerda sustituir tu-usuario por el nombre de usuario que estés usando en GitHub. Esto creará la carpeta gutenberg en tu ordenador, descargando todo el contenido de tu repositorio de GitHub en local para que puedas empezar a trabajar con él.

Crear una nueva rama

Si entras en el nuevo directorio verás que contiene todo lo que aparece en la rama master del repositorio (o rama principal). No debes tocar esta rama con modificaciones, así que antes de que te lances de cabeza a modificar el código de Gutenberg, veamos cómo crear una rama nueva.

Si no sabes lo que es una rama en Git, te animo a que te leas este artículo. De todos modos, para lo que vamos a hacer sólo necesitas saber que las ramas son la manera de separar las modificaciones que hacemos en el código de un repositorio, para mantener cierto orden.

Si quiero añadir una nueva funcionalidad, crearé una rama nueva cuyo nombre identifique lo que voy a hacer, y entonces desarrollaré la funcionalidad allí. Una vez termine y todo mi código modificado sea estable, puedo fusionar esa rama con la rama principal (master, recuerda) y listo.

Los comandos Git para crear una nueva rama y subirla al repositorio son los siguientes:

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

Esto creará la rama fix/clone-block. Recuerda cambiar el nombre de acuerdo a lo que vayas a hacer. Según la guía de Gutenberg, debes utilizar un nombre para tu rama con prefijo y descripción, como: [tipo]/[cambio].

Un buen prefijo suele ser:

  • add/ añadir una nueva funcionalidad
  • try/ funcionalidad experimental, para pruebas
  • update/ actualiza una funcionalidad existente
  • fix/ arregla un problema

Por ejemplo, fix/clone-block indica que vamos a proponer un arreglo en el clonado de bloques.

Añadir los cambios en el código

Ahora sí, ya tienes todo listo para abrir los archivos del repositorio con el editor que más te guste y ponerte a programar. Aunque antes deberías conocer algún detalle más…

Lo primero es que todo el código de Gutenberg sigue una guía de estilo concreta que tú también deberás respetar. Los detalles específicos de cómo se espera que escribas el código los tienes aquí.

Ejemplo de reglas para escribir strings en JavaScript definidas en la guía de estilo de Gutenberg.
Ejemplo de reglas para escribir strings en JavaScript definidas en la guía de estilo de Gutenberg.

Hay reglas para CSS, JavaScript y PHP. No te saltes estas normas o seguramente tendrás problemas para que tu código sea aceptado.

Por si te interesa, en mi caso concreto la modificación que realicé fue utilizar la función lodash.cloneDeep() en los atributos de un bloque cuando lo clonas con wp.blocks.cloneBlock() para que la copia se haga en profundidad y así evitar tener una copia superficial (shallow copy) del bloque que clonamos. Puedes ver los cambios que hice aquí.

Subir los cambios a la nueva rama

Una vez hayas terminado, debes hacer commit de los cambios y subirlos al repositorio. Si has creado archivos nuevos, antes debes añadirlos al control de versiones con el siguiente comando:

git add mi-archivo

Y, ahora sí, toca hacer commit de los cambios con este comando:

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

Finalmente, para subir los cambios al repositorio tenemos que hacer uso del siguiente comando:

git push

Con esto si vas al repositorio en GitHub verás tus cambios subidos en la rama que has creado. ¡Perfecto! Ya casi estamos…

Hacer un pull request en el repositorio de Gutenberg

Ya tenemos los cambios hechos y subidos a nuestro repositorio. Ahora lo que tenemos que hacer es avisar de la existencia de nuestra propuesta de cambios a los desarrolladores que se encargan de gestionar el proyecto Gutenberg.

Para que nuestros cambios se discutan y se aprueben (o no) para formar parte de la base de código de Gutenberg necesitamos hacer un pull request.

Un pull request es una petición que el propietario de un fork de un repositorio hace al propietario del repositorio original para que este último incorpore los commits que están en el fork.

Para ello nos vamos a nuestro repositorio fork de Gutenberg y hacemos clic en el botón New pull request. Esto nos lleva a una vista en la que seleccionar la rama que acabamos de subir con nuestros cambios. Así se hará la comparación con la rama principal del repositorio Gutenberg original:

Comparación de la rama master del repositorio oficial con la rama que incluye nuestros cambios en nuestro repositorio fork.
Comparación de la rama master del repositorio oficial con la rama que incluye nuestros cambios en nuestro repositorio fork.

Cuando seleccionamos nuestra rama en el desplegable de la derecha, como ves en la imagen anterior, GitHub nos muestra un resumen de los cambios efectuados en esta rama respecto al repositorio Gutenberg original.

Después de esto tenemos que darle al botón Create pull request. Esto nos llevará a otra vista en la que tendremos que rellenar un texto con la información descriptiva de porqué queremos hacer estos cambios en el repositorio.

Como ves en la siguiente imagen, ya tenemos una plantilla del contenido que nos piden rellenar:

Pantalla en la que rellenamos la información necesaria para crear nuestra pull request en el repositorio de Gutenberg.
Pantalla en la que rellenamos la información necesaria para crear nuestra pull request en el repositorio de Gutenberg.

Básicamente, has de incluir una descripción de tus cambios explicando qué has hecho y el motivo. Indica también si has testeado el código y cómo lo has hecho. Incluso puedes añadir capturas de pantalla si fuera necesario.

No te preocupes si alguna parte de la plantilla no sabes muy bien cómo rellenarla. Las personas que se encargan del repositorio de Gutenberg te ayudarán siempre que seas respetuoso y tu pull request tenga un mínimo de sentido.

Cuando termines, haz clic en el botón Create pull request para que tu pull request se acabe creando oficialmente. Ahora ya sólo te queda esperar a que otros revisores le echen un ojo y eventualmente la aprueben y se fusione tu código en el repositorio oficial.

Ten en cuenta que toda esta revisión puede tardar más o menos tiempo dependiendo de muchos factores. En mi caso finalmente mi pull request se cerró y no prosperó. Pero aprendí un montón en todo el proceso. Y los comentario de los revisores fueron siempre en tono positivo y constructivo. Puedes verlo aquí. Y lo mejor es que persistí con otro tema y finalmente mi código fue aceptado.

Si crees que hay algo en Gutenberg que debe cambiar y te ves con ganas de cambiarlo en el código, ahora ya sabes cómo es el proceso a seguir. Además, todo esto que te he explicado aquí no solo vale para Gutenberg. La mayoría de proyectos de software libre funcionan de forma idéntica (o muy similar).

Atrévete a contribuir. Seguro que aprendes un montón por el camino.

Imagen destacada de Mike Erskine en Unsplash.

2 respuestas a «Cómo contribuir a Gutenberg como desarrollador WordPress»

  1. Avatar de Jose Cortesia
    Jose Cortesia

    Hola Antonio Villegas, me gusta mucho WordPress llevo años trabajándolo y siempre he querido contribuir.

    Buen artículo.

    1. Avatar de Antonio Villegas

      Ánimo y gracias por el comentario.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de Nelio Software

Tus datos personales se almacenarán en SiteGround y serán usados por Nelio Software con el único objetivo de publicar tu comentario aquí. Con el envío de este comentario, nos das el consentimiento expreso para ello. Escríbenos para acceder, rectificar, limitar o eliminar tus datos personales.