Mi largo viaje hacia un sitio de WordPress Gatsby desacoplado

Como biólogo investigador profesional, mi patio de recreo solía ser laboratorios de ciencias llenos de microscopios, placas de Petri y herramientas de biología. La curiosidad guía a muchos científicos en su viaje hacia los descubrimientos. El mío me llevó al diseño web. Solía ​​​​intentar aprender HTML en el escritorio de mi laboratorio mientras centrifugaba muestras de extracción o esperaba que mis muestras se descongelaran o congelaran. Estos tiempos de espera son valiosos para escribir notas de experimentos e incluso aprender una nueva habilidad. Para mí, esto significó aprender HTML básico a través de editores, como HomeSite y más tarde Dreamweaver, así como muchos otros recursos en línea.

Después de dejar mi escritorio de laboratorio de ciencias hace aproximadamente una década, encontré un nuevo patio de recreo. Un amigo desarrollador web local me presentó WordPress. Esto cambió el curso de mi vida. Aprender diseño web ya no es una actividad de inactividad: se ha convertido en la actividad principal de mi vida diaria.

Mi primer paso: desarrollo del tema de aprendizaje

Me considero un entusiasta de WordPress y un ávido usuario de WordPress. Entré al mundo de WordPress aprendiendo a hackear temas, mi gurú virtual “Construyendo temas desde cero usando guiones bajos” de Morten Rand-Hendriksen. Mientras aprendía a desarrollar temas, debí haber visto este tutorial innumerables veces y rápidamente se convirtió en mi referencia de referencia. Mientras realizaba mis proyectos de aprendizaje, a menudo consultaba el repositorio GitHub de Morten para aprender de sus temas. Para mis sitios personales, utilicé mis propios temas inspirados en los de Morten, como Kuhn, Popper y otros.

También aprenderé a crear complementos y widgets para mi propio sitio, pero principalmente me quedé dentro de la temática. Cree temas para mis sitios personales. Mis sitios personales son como mis carpetas de tres anillas: una para cada área temática. Mis sitios desaconsejan los motores de búsqueda y están diseñados para archivar mis notas personales de aprendizaje y publicación. Este hábito de escribir y documentar cada aspecto de mis proyectos se inspiró en “Just Write” de Sara Soueidan.

Un llamado a aprender JavaScript profundamente

Todo comenzó con el llamado de Matt Mullenweg a los desarrolladores de WordPress para que “aprendan JavaScript profundamente” durante el discurso sobre el estado de la palabra de 2015 y el posterior anuncio del editor de bloques Gutenberg. Hasta entonces, era un usuario feliz de WordPress y un aspirante a desarrollador de WordPress. Se informó que JavaScript y las interfaces basadas en API son el futuro de WordPress. Al igual que otros entusiastas de WordPress, también reconocieron que JavaScript era una habilidad imprescindible para el desarrollo de WordPress.

Así, comencé mi propio viaje de aprendizaje y hoja de ruta de JavaScript. Utilicé el artículo de Zell Liew “Aprendiendo JavaScript: ¿por dónde empezar y qué hacer cuando estás estancado?”

Déjame compartir mi viaje de aprendizaje contigo.

Empecé mirando los temas basados ​​en React y REST API.

Desde la integración oficial de la API REST en el núcleo de WordPress, han comenzado a aparecer algunos temas basados ​​en React.

• Foxhound: este tema fue desarrollado por la ingeniería de Automattic Kelly Dwan y figura en el directorio de temas de WordPress con más de 30 instalaciones activas. Su repositorio GitHub no se ha actualizado en tres años.
• Picard: este tema fue desarrollado por Automattic como un prototipo experimental de tema de WordPress que hace uso de React y la nueva WP-API. Su repositorio GitHub no se ha actualizado en cinco años y se desconoce su uso.
• Celestial: este tema fue tratado en el artículo de la revista Smashing, “Cómo crear un aspecto para su aplicación web con React y WordPress” de Muhammad Mohsin. Su repositorio GitHub revela que se actualizó por última vez hace 13 meses, pero no hay información sobre su uso.

En mi opinión, estos temas parecían ser experimentales. Cuando se lanzó el tema Foxhound, se cubrió en CSS-Tricks y en WordPress Tavern. Lo descargué a mi sitio de prueba y funcionó bien; Sin embargo, no pude hackearlo y aprender de él dada mi limitada familiaridad con JavaScript y React.

Empecé a investigar en React

Utilicé el artículo de Robin Wieruch “Fundamentos de JavaScript antes de aprender React” como mi hoja de ruta de aprendizaje de JavaScript/React. Mientras luchaba por aprender y comprender el enrutamiento de React, descubrí Gatsby, que utiliza @reach/router como función incorporada, lo que hace que el enrutamiento sea muy sencillo. En mi breve exploratoria, descubrí que Gatsby es de hecho un “marco basado en React que ayuda a los desarrolladores a crear sitios web y aplicaciones increíblemente rápidos”. Esto me llevó a aprender Gatsby mientras seguía progresando en React. Después de un tiempo, me sumergí en mis proyectos de Gatsby y solo ocasionalmente volví a aprender JavaScript básico y React.

Reconozco a Gatsby

Dado que ya había realizado varios pequeños proyectos de aprendizaje en React, comprender a Gatsby fue natural. Se dice que Gatsby está dirigido a desarrolladores y no a usuarios. No me resultó tan difícil aprender y ejecutar mis propios sitios de prueba sencillos de Gatsby.

La documentación y los tutoriales de Gatsby están bien escritos, son útiles y fáciles de seguir. Decidí aprender Gatsby usando sus tutoriales y completando las ocho partes como una forma de “aprender haciendo”. Mientras trabajaba en mis proyectos, consultaba otras guías y publicaciones de tutoriales. Las siguientes dos guías me ayudarán a comprender los conceptos de construcción, agregar funcionalidades y crear un sitio de demostración de Gatsby razonable:

• Guía para construir un sitio de Gatsby desde cero por Justin Formentin
• Cree un blog avanzado usando gatsby y reaccionando con Reactgo

Para diseñar componentes de React, hay varias opciones que se tratan en CSS-Trick. Algunas opciones incluyen CSS-in-JS local en línea, componentes con estilo y CSS modular. Los componentes de Gatsby también se pueden diseñar con Sass usando gatsby-plugin-sass, lo que hace que el código sea más legible. Debido a su familiaridad y legibilidad del código, eligió el estilo con Sass; Sin embargo, también reconozco el valor de los módulos CSS.

Recursos para integrar Gatsby y WordPress

Mi aprendizaje sobre Gatsby no terminó ahí. De hecho, Gatsby ha sido la parte más importante de mi curva de aprendizaje más recientemente. Aquí está todo lo que encontré a lo largo de mi viaje de aprendizaje y espero que le sirva a usted también en su propio viaje.

Hay muchos sitios que ya se ejecutan en Gatsby. Aquellos que han migrado a Gatsby parecen estar contentos, especialmente con la velocidad increíblemente rápida y la seguridad mejorada que ofrece.

Comentando en Gatsby

WordPress ha soportado comentarios de forma nativa durante mucho, mucho tiempo. Los sitios de Gatsby no tienen servidor y son estáticos, por lo que publicar comentarios es un problema ya que son dinámicos y requieren un servicio del lado del cliente.

Algunos desarrolladores de Gatsby y React parecen dejar comentarios e interacciones en sus sitios personales en Twitter. Otros parecen recurrir a Disqus. Si está interesado, este tutorial de Northstack describe en detalle cómo llevar comentarios de WordPress a Gatsby.

Temas de WordPress Gatsby

Me enteré por primera vez del tema Tabor for Gatsby adaptado a WordPress de WordPress Tavern. Fue desarrollado por Rich Tabor y está disponible gratuitamente en GitHub (demostración). A partir de ahí, dos temas de Gatsby inspirados en WordPress estuvieron disponibles a través del proyecto Gatsby Theme Jam. Uno fue de Alexandra Spalato llamado Gatsby Theme WordPress Starter (demo) y el otro de Andrey Shalashov llamado WordPress Source Theme (demo).

En 2019, un equipo de desarrolladores de Gatsby y WPGraphQL liderado por Jason Bahl, Muhammad Muhsin, Alexandra Spalato y Zac Gordon anunciaron un proyecto que traslada temas de WordPress a Gatsby. Zac, hablando con WordPress Tavern, dijo que el proyecto ofrecería temas premium gratuitos y de pago. Al momento de escribir este artículo, se enumeraron cinco temas sin descarga gratuita.

Arrancadores de WordPress Gatsby desacoplados

La biblioteca actual de Gatsby starer enumera diez temas iniciales compatibles con WordPress, incluido uno más reciente de Henrik Wirth que traslada el tema WordPress Twenty Twenty (hojas de estilo y fuentes) a Gatsby. Aunque el tema aún es un trabajo en progreso con algunas limitaciones (por ejemplo, no admite etiquetas, archivos mensuales y comentarios). Sin embargo, es un gran proyecto y utiliza un nuevo complemento experimental de Gatsby Source para WordPress .

Otro iniciador popular es gatsby-starter-wordpress de Gatsby Central.

Temas de WordPress de Gatsby de GitHub

Hay otros temas populares de Gatsby que están disponibles en GitHub. El tema Twenty Nineteen WordPress Gatsby es una adaptación del tema Twenty Nineteen WordPress de Zac Gordon y Muhammad Muhsin.

Complementos experimentales

También hay dos nuevos complementos GraphQL para WordPress que están en desarrollo y solo están disponibles en GitHub por el momento. Uno es Gatsby Source WordPress Experimental de Tyler Barnes. Esta es una versión reescrita del complemento actual de WordPress Gatsby Source que utiliza WPGraphQL para el abastecimiento de datos, así como un complemento WPGatsby personalizado que transforma el esquema WPGraphQL en formas específicas de Gatsby.

El otro es Gatsby WordPress Gutenberg, que todavía está siendo desarrollado por Peter Pristas. Su documentación está disponible en el sitio GatsbyWPGutenberg Docs.

Guía paso a paso

A pesar del progreso continuo en el desarrollo del tema Gatsby de WordPress, no pude encontrar ninguna guía detallada escrita para principiantes como yo. Mohammad Mohsin escribió una guía completa en la revista Smashing en 2018, explicando cómo desarrolló su tema Celestial React utilizando la API REST de WordPress. El otro tutorial es otro que escribió sobre la migración del tema Twenty Nineteen WordPress a Gatsby, que utiliza WPGraphQL para el abastecimiento de datos de WordPress.

Más recientemente, ha habido dos guías adicionales de las que me he beneficiado:

• Migre su sitio de WordPress a Jamstack por Jason Longstorf. Este es un tutorial muy útil basado en la entrevista de Jason con Zac Gordon en su podcast Learn With Jason. También está disponible una versión más corta del episodio de 30 minutos en egghead.io.
• Guía de Gatsby WordPress Starter Advanced con vistas previas, i18n y más por Henrik Wirth. Esta es la guía más detallada que he visto, dividida en una serie de siete partes sobre cómo portar un sitio de WordPress a Gatsby usando WPGraphQL. Es adecuado para la mayoría de los principiantes.

Finalmente, mi propio sitio Gatsby parcialmente adaptado

Todo lo cubierto hasta ahora es lo que me impulsó a crear mi propio sitio WordPress Gatsby. Si bien fue una gran tarea técnica, las guías a las que he hecho referencia, además de los complementos experimentales y la documentación existente para Gatsby, lo hicieron mucho más fácil que si hubiera intentado resolverlo por mi cuenta.

Aquí está el resultado. Si bien todavía es un trabajo en progreso, es fantástico verlo funcionar. Escribí un tutorial completo paso a paso sobre cómo lo hice, que se publicará la próxima semana aquí en CSS-Tricks. ¡Así que estás atentos!

¿Qué sigue en el horizonte para Gatsby y WordPress?

Todavía sigo atento a los dos complementos experimentales de WordPress que mencioné anteriormente. Planeo volver a visitar el proyecto una vez que se publiquen oficialmente, con suerte en el directorio de complementos de WordPress. Este reciente hilo de tweets destaca el estado actual de la transferencia de contenido del editor de bloques de WordPress a un tema desacoplado de WordPress Gatsby.

¿Alguien ha utilizado con éxito el editor de bloques con una configuración de #WordPress desacoplada? No lo he probado, pero he oído algunos rumores de que no funciona o no funciona bien. Tengo curiosidad por saber de la gente.

– Rachel Cherry (@bamadesigner) 14 de mayo de 2020

En una sesión reciente de WordCamp España 2020, Matt Mullenweg dijo que la demanda de sitios de WordPress desacoplados está creciendo:

Pero para las personas que están creando aplicaciones más avanzadas o que tienen algún tipo de restricción en su sitio web donde necesitan la interfaz de React, creo que el caso de uso desacoplado de WordPress es más sólido que nunca.

Dan Abramov está de acuerdo:

Esto da en el clavo. Y coinciden al 100% con nuestro pensamiento a largo plazo. Solo el lado del cliente no es sostenible. Necesitamos mover más cosas al servidor, pero sin sacrificar la perfecta composición de piezas interactivas. https://t.co/O4LX8JacRo

– Dan Abramov (@dan_abramov) 10 de mayo de 2020

Junto con Sarah Gooding de WPTavern, los miembros del proyecto Gatsby WP Themes, Zac Gordon y Jason Bahl, también confesaron que “los temas de Gatsby WordPress más actuales están dirigidos a empresas y desarrolladores, no son adecuados para principiantes”. ¡Esperamos que el futuro solucione eso!

Mi opinion personal

Según mi experiencia muy limitada, creo que los temas de Gatsby WordPress disponibles actualmente no están listos para su uso en horario de máxima audiencia para usuarios como yo. Sí, es emocionante probar algo de vanguardia que está claramente en la mente de muchos usuarios y desarrolladores de WordPress. Al mismo tiempo, el trabajo en constante evolución que se realiza en el editor de bloques de WordPress, WPGraphQL y los complementos de WordPress fuente de Gatsby hace que sea difícil predecir hacia dónde van las cosas y cuándo llegará a un estado en el que sea seguro usarlo en otros contextos. Hasta entonces, es una experiencia frustrante trabajar en algo sólo para que la API o la interfaz cambien.

Para mis usos personales, un sitio Gatsby normal es suficiente, podría obtener contenido con archivos Markdown sin los problemas asociados con el desacoplamiento de WordPress. Para sitios de agencias más grandes… puedo ver por qué tener una solución desacoplada tendría mucho sentido para ellos y sus clientes.

Recuerda, compartiré mi tutorial la próxima semana. ¡Nos vemos entonces!