8 tutoriales de Gutenberg para desarrolladores

Gutenberg es el nuevo editor de WordPress, introducido en WP 5.0. Si bien esta inclusión ciertamente cambia las cosas para los usuarios cotidianos y abre muchas posibilidades para la creación de contenido, también abre una gran cantidad de oportunidades para los desarrolladores. El editor está diseñado para ser lo más extensible posible y puede agregar cualquier cosa que se le ocurra al constructor. Hemos reunido algunos de los mejores tutoriales de Gutenberg para desarrolladores que pudimos encontrar para que pueda comenzar a agregar sus propias florituras a la nueva experiencia de WordPress.

Una nota rápida

Un par de cosas antes de sumergirnos: Gutenberg está escrito con una biblioteca de JavaScript llamada React. Es la misma biblioteca en la que está escrito Instagram, así como nuestro querido Divi Builder. Así que podemos dar fe de que son buenas cosas que quieres aprender.

Porque si realmente quieres profundizar en el desarrollo de Gutenberg, también te adentrarás en JavaScript. Como dijo Matt Mullenweg hace unos años, vas a “aprender JavaScript. Profundamente." Tenemos algunos buenos artículos que puede revisar para ver qué tipo de cosas funcionarán para usted.

Tómese su tiempo, mire a través de ellos y vea qué les gusta. Y cuando los haya marcado o guardado en Pocket, acomódese y eche un vistazo a algunos de los mejores tutoriales de Gutenberg en la web.

1. La página oficial de Gutenberg

Debes comenzar con el sitio oficial de WordPress Gutenberg. Quiero decir, si no conoce la documentación base, nada de lo anterior tendrá sentido. Recientemente, han hecho de la página principal una demostración completamente interactiva del constructor, además de proporcionar enlaces a las preguntas frecuentes de su manual y un tutorial llamado El lenguaje de Gutenberg, que es bastante necesario leer antes de seguir adelante con el desarrollo.

2. Gutenberg.News

Si bien técnicamente no es un tutorial, Gutenberg.news agrupa algunos de los tutoriales de mayor calidad / perfil de la web en un solo lugar. De vez en cuando corro por allí para ver qué hay de nuevo y termino cayendo por el clickhole cada vez. Tienen una combinación de tutoriales para desarrolladores y usuarios, pero encontrará trucos como Creación de Gutenblocks personalizados con el componente de texto enriquecido y tweets con enlaces a repositorios de Github que pueden enseñarle cómo convertir sus códigos cortos existentes en bloques de Gutenberg.

3. La guía de desarrollo de Gutenberg

Supongo que está ahí en el nombre, ¿eh? La Guía de desarrollo de Gutenberg es una serie de tutoriales que abarcan desde desarrolladores principiantes hasta veteranos experimentados en WP. El Gutenberg Hub se parece mucho a Gutenberg.news, pero el contenido no siempre se superpone (a veces lo hace). Nuevamente, este es un agujero de clic si está buscando tutoriales de Gutenberg para desarrolladores (o para cualquiera, en realidad). Considérese advertido.

4. Curso de desarrollo Gutenberg de Zac Gordon

No todas las mejores cosas de la vida son gratis, y el increíble curso de desarrollo de Gutenberg de Zac Gordon es testimonio de ello. Uno de los primeros cursos AZ importantes (si no el primero) sobre la nueva experiencia de edición de WP. El curso se actualiza con nueva información a medida que se actualiza Gutenberg, así que no temas pagar los $ 79 por algo que estará desactualizado. Zac es bien conocido en la comunidad de WordPress, y este curso le mostrará absolutamente por qué. Incluso hay videos tutoriales de ejemplo que puede usar. De esa manera, sabrá en qué se está metiendo con anticipación.

5. Blog de Zac Gordon

Probablemente entiendas que Zac Gordon es un gurú de Gutenberg. Pero no está limitado solo a su curso pagado. En su blog, tiene un montón de tutoriales de Gutenberg para desarrolladores que también querrás consultar.

6. Cómo preparar sus complementos para Gutenberg

TutsPlus tiene un tutorial realmente sólido de todas las diversas formas que necesitará saber para asegurarse de que sus complementos no se rompan cuando un usuario tiene Gutenberg activo. Desde cómo funcionan los metaboxes ahora hasta la API REST y el registro de diferentes tipos de bloques, esta es su ventanilla única para ver todas las formas en que puede integrar sus complementos con el nuevo editor de Gutenberg para WordPress.

7. Reacción de pila completa

Cualquier desarrollador de Gutenberg debería estar familiarizado con React, como mencioné antes. Fullstack React es uno de mis programas favoritos para familiarizarse con la biblioteca. Es un programa de 30 días, y revisa los diversos fundamentos que necesitará para utilizar la biblioteca. Si bien probablemente sea mejor estar familiarizado con JavaScript, entré sin poder escribir una función y entendí lo que estaba sucediendo. Si bien hay un curso pago involucrado, puede descargar el libro completo de forma gratuita como PDF (más de 300 páginas), para que pueda ver si es lo que desea usar para sumergirse en el entorno de Gutenberg.

8. Modern React con Redux

Gutenberg también usa el contenedor JavaScript Redux. En Udemy, Stephen Grider tiene un curso que le enseñará cómo usar el contenedor favorito de Gutenberg con su biblioteca favorita. Es cierto que el precio estándar de $ 179,99 es un poco desagradable; sin embargo, Udemy ofrece regularmente importantes descuentos en cursos (mientras escribo esto, hay una venta loca por $ 10,99, por ejemplo). Si el precio es más alto de lo que desea pagar en este momento, si puede esperar un poco, probablemente obtendrá un trato. Dicho esto, personalmente he tomado el curso React y React Native de Grider, por lo que puedo dar fe de lo bueno que debería ser este.

Vamos a "destripar"

Eso es un Gutenpun, ¿ves? En serio, sin embargo, Gutenberg es el futuro de WordPress. Ya sea que le guste la nueva forma de crear contenido o haya instalado el complemento Classic Editor para mantenerlo a la vieja usanza, está aquí. Y si eres un desarrollador de WordPress, tendrás que lidiar con eso. Realmente no es tan difícil continuar su educación y ver la dirección que está tomando Gutenberg. Cualquiera de los tutoriales anteriores realmente debería ayudarlo (o destriparlo ) en su camino para comprender completamente el poder y la extensibilidad del editor.

¿Qué tutoriales o recursos de Gutenberg ha utilizado para prepararse para la nueva era del desarrollo de WordPress?

Imagen destacada del artículo por 32 Pixels / shutterstock.com