Mejores prácticas sobre Gutenberg para desarrolladores WordPress que no tuvieron tiempo de aprender JavaScript en profundidad

Publicada en WordPress.

El nuevo editor de bloques de WordPress (también conocido como Gutenberg) es un cambio radical para los desarrolladores acostumbrados a trabajar con PHP.

Si necesitaste aprender JavaScript en profundidad de forma rápida para así actualizar tus plugins y mantener todo funcionando, es posible que te sintieras un poco abrumado.

El desarrollo de bloques representa un gran reto para todos los que no dominamos JavaScript. En esta charla que di en la pasada WordCamp Nordic pude enseñar una serie de buenas prácticas a seguir en el desarrollo con Gutenberg, así como alguno de los errores típicos que debes evitar para que tu código no rompa nada.

Puntos clave

Los argumentos más importantes tratados en la presentación son los siguientes:

  • En 2015 a los desarrolladores de WordPress se les encomienda la misión de aprender JavaScript en profundidad. Se avecinan cambios que harán necesario tener este tipo de conocimientos.
  • En Diciembre de 2018, con el anuncio definitivo de la fecha de salida de WordPress 5.0 y el nuevo editor de bloques (también conocido como Gutenberg), los desarrolladores de plugins han de adaptar sus plugins al nuevo editor. Es en este momento cuando aprender JavaScript en profundidad se convierte en una prioridad.
  • Aprender JavaScript en profundidad implica dominar toda una serie de tecnologías además del propio lenguaje. Transpiladores, compiladores, empaquetadores… Todo esto es complejo y puede asustar al desarrollador más purista de PHP.
  • Hemos desarrollado un boilerplate para facilitar el proceso de adaptación a los desarrolladores WordPress. Este plugin sienta las bases de la programación sobre el editor de bloques incluyendo una configuración inicial completa sobre la que ir avanzando.
  • Lo primero que choca al abrir archivos JavaScript de Gutenberg para intentar entenderlos es su sintaxis moderna. Si no entendemos las construcciones modernas de ESNext, se hace complicado poder entender el código de Gutenberg. Por esto, la recomendación es entender la sintaxis de las construcciones ESNext de JavaScript.
  • Una vez entiendes la sintaxis de JavaScript, el siguiente paso debería ser aprender React. No obstante, WordPress encapsula y oculta React bajo sus propias funciones. Por tanto, en vez de aprender React es mucho más interesante aprender la sintaxis JSX para creación de interfaces de usuario.
  • Gutenberg proporciona un montón de componentes reutilizables para crear interfaces de usuario en JSX. Una buena práctica es utilizar componentes ya existentes, en vez de programar desde cero o reinventar la rueda.
  • La función registerBlockType es la más conocida de Gutenberg. Proporciona la posibilidad de crear nuevos bloques en el editor. Pero hay muchas más funciones que vale la pena investigar.
  • La función registerPlugin te permite añadir un plugin que extiende el editor con una barra lateral en la que añadir los componentes que desees.
  • La función subscribe te permite escuchar los cambios que suceden en el editor de bloques y añadir tus propias funciones que se ejecutan cada vez que ocurre un cambio. Has de ir con cuidado y evitar el código incondicional con esta función para evitar afectar al rendimiento final del editor.
  • Ten cuidado al escribir tu código JavaScript. No estás solo. Tu código puede romper cosas si eres descuidado.
  • En vez de aprender JavaScript en profundidad, aprende Gutenberg superficialmente y empieza a desarrollar más rápido. Luego ya te centrarás en ampliar y profundizar tus conocimientos en aquellas áreas que necesites.
  • No tengas miedo al nuevo editor de bloques ni a JavaScript. Con lo que se explica en esta presentación puedes empezar a desarrollar poco a poco.

Recursos

Los siguientes recursos fueron mencionados durante la presentación o son información adicional útil.

Impacto y feedback

Esto es lo que se dijo en redes sociales sobre la presentación:

Imagen destacada de Jaakko Kemppainen en Unsplash.

FlojaNo está malBienMuy bien¡Impecable! (Ninguna valoración todavía)
Cargando…

Deja un comentario

No publicaremos tu correo electrónico. Los campos obligatorios están marcados con: •

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

Al marcar la casilla de aceptación estás dando tu legítimo consentimiento para que tu información personal se almacene en SiteGround y sea usada por Nelio Software con el propósito único de publicar aquí este comentario. Contáctanos para corregir, limitar, eliminar o acceder a tu información.