281 | El editor de Gutenberg casi 3 años después

En el episodio 281 de WordPress semanal hablamos del editor de Gutenberg casi tres años después. Vamos a repasar su estado actual, su pasado y su futuro. Vamos allá. Hola, Hola. Bienvenidos a WordPress Semanal, el podcast en el que aprendes WordPress de principio a fin. Porque ya lo sabes, no hay mejor inversión que la de aprender a crear y gestionar tus propias webs con WordPress. Y hoy vamos a hablar de un tema muy muy muy importante para WordPress en sí, para su presente y para su futuro. Y no es otra cosa que el editor de Gutenberg. Voy a hacer un repaso un poco general, comenzando por las quejas que hubo tras el lanzamiento de Gutenberg allá por diciembre de 2018. Me voy a adentrar incluso en qué fue mal, según mi opinión y la de muchos, en el lanzamiento de Gutenberg cuando salió la versión de WordPress 5. Después te hablaré de mejoras de Guttenberg en siguientes actualizaciones, separando un poco lo que es el producto de Guttenberg en sí del lanzamiento. Hablaremos, por supuesto, del futuro de este editor, que ya está incorporado desde hace tiempo en WordPress, tanto para los desarrolladores como para los usuarios, el usuario final, el que el que gestiona su web. Y luego le dedicaré una parte al full site editing, que es un poco la parte más ambiciosa, y el futuro de este editor. Si, todo eso en un momentito. Pero antes, como siempre, novedades. ¿Qué está pasando en Gonzalo Navarro es esta semana? Pues bien, como siempre, como cada semana, tenéis un nuevo vídeo de la Zona Código. Es el vídeo 231 y en él te enseño a cambiar el título y la descripción de las pasarelas de pago de WooCommerce. Es decir, que cuando alguien está en el checkout, ya en la página de pago poniendo sus datos y eligiendo una de las pasarelas de pago, un cliente tuyo de tu tienda online con WooCommerce, pues en la relación de formas de pago que tiene, pues a lo mejor contra reembolso con Paypal, con tarjeta, pues eso, aparece un título y una descripción de cada pasarela de pago. Pues te enseño a modificar eso. Es decir, que en la de paypal, pues puedas poner, pues eso, pagar con paypal en el título, y luego a lo mejor en la descripción que puedas poner, con paypal puedes pagar también con tarjeta sin necesidad de registrarte o algo así. Como especificar que lo pueden hacer o si va a ser un pago contra reembolso que puedas especificar. Paga con comodidad cuando llegue el producto a tu puerta, tanto con tarjeta como en efectivo, ese tipo de cosas. Hay mucha gente que necesita modificarlo porque, pues bien, lo quiere hacer más personalizado o porque tiene que explicar algo más de lo que se explica por defecto cuando uno habilita una de esas pasarelas de pago. Pues te enseño a hacer todo esto, como siempre, sin plugins y sin que sepas código. Es decir, usamos código, pero no tienes que saber nada. Simplemente copias y pegas tal y como yo lo hago en el vídeo y lo tienes. Recuerda que es el vídeo 231, pero te lo voy a dejar enlazado en las notas de este episodio. Como también tendrás enlazado la otra novedad de este mes, que es el curso de Gutenberg. Este es un curso que ya saqué justo cuando se incorporó el editor de Guttenberg a WordPress, es decir, cuando salió WordPress 5.0. Pero claro, como ha cambiado tanto desde entonces, pues había muchas partes que se podían actualizar y clases que podía añadir. Y es precisamente lo que he hecho. Un curso totalmente renovado y ampliado en el que vemos primero cómo se utiliza a nivel general, es decir, hacemos un repaso por su interfaz, la configuración de las preferencias y otro tipo de detalles. Después te enseño cómo escribir de forma fluida en Gutenberg, es decir, básicamente repasamos lo que tendrías que hacer para publicar artículos en el blog, en tu día a día. Aquí sobre todo repasamos los bloques de Gutenberg que tienen que ver con el texto y otros detalles interesantes. Os enseño atajos de teclado para escribir de forma más rápida, ese tipo de cosas. Después dedico una clase a cómo usar todos y cada uno de los bloques de Gutenberg. Lo divido en varios vídeos. En uno te enseño los bloques de medios, es decir, de imágenes de vídeos y demás. En otros los de diseño, cómo crear columnas y ese tipo de cosas. En otros los bloques de tema, que son una novedad, por ejemplo, cómo mostrar una relación de artículos, cómo hacer que se muestre automáticamente el título de una categoría determinada. Bloques muy interesantes. Y por último vemos los bloques de widgets y los bloques de incrustados, que es básicamente la posibilidad de incrustar cualquier cosa en la web, un vídeo de YouTube, un podcast de Spotify, una canción, lo que sea. Después hay un par de clases en las que os enseño cómo desactivar Gutenberg si no lo quieres utilizar o cómo utilizarlo de forma selectiva, es decir, que cuando tú quieras utilices el editor clásico de WordPress y cuando no, el editor de Guttenberg. En otra clase te explico cómo puedes añadir opciones extra de edición a Guttenberg, tales como ocultar el título de la página, tener más posibilidades en cuanto a colores, ancho de la página en sí, cositas que seguramente eches de menos en comparación con constructores visuales más estables como Elementor, Divi, etc. Y por último te explico cómo puedes añadir plantillas prediseñadas en base al editor de Gutenberg. Aquí vemos dos plugins hiperpopulares que te van a permitir partir de diseños ya preparados y que después tú lo adaptes a tus necesidades. Este es un curso que estará en constante crecimiento, conforme avance Gutenberg avanzará el curso. Iré añadiendo más clases conforme me lo pidáis. Ya sabéis que desde vuestra cuenta podéis podéis sugerirme contenido si veis que queréis algo relacionado con Gutenberg que no está cubierto, solo tenéis que pedírmelo y más pronto que tarde añadiré esa clase. ¿Sí? Bueno, con esto dejamos las novedades y ahora te voy a hablar del plugin de la semana que se llama Recipe Card Blocks for Gutenberg and Elementor. Esto básicamente lo que hace es añadir bloques nuevos al editor de Gutenberg o incluso a Elementor si tú prefieres diseñar con Elementor pensados para webs de recetas, Por ejemplo, tienes un bloque para poner una tarjeta de recetas, tienes otro bloque para poner detalles de una receta, tienes otro bloque simplemente para hacer un listado de ingredientes, otro para hacer como una especie de lista de nutrientes de un determinado alimento, este tipo de cosas. Y además viene desde el punto de vista del código, del marcado, del esquima preparado para que Google y otros motores de búsqueda entiendan que eso es una receta, de forma que si tiene suerte y a Google le apetece, pues te lo pueda mostrar de una forma especial cuando alguien busque en Google. La gracia de esto es que está muy enfocado a Elementor, es decir, que si tú ya usas el editor, perdón, a Elementor, no a Gutenberg, aunque también a Elementor, como digo, que de forma que si tú usas el editor de Gutenberg te sea muy sencillo en cualquier entrada de tu web añadir ingredientes añadir una tarjeta donde se vea la receta de forma visual. Es un plugin que está activo en más de 9.000 webs con WordPress. Está hecho por la empresa WP Zoom, que es una empresa que lleva muchísimo tiempo en WordPress, que tiene themes, que tiene plugins, que tiene. Que es muy estable, así que en general un muy buen plugin. Para los que queráis crear webs de recetas, ya sabéis que tenéis todos los enlaces que acabo de comentar, el vídeo nuevo de la zona código, el curso nuevo y el plugin de la semana en la parte de enlaces para llegar a ella. Gonzalonabarro es 281, que es el número de este episodio. Y ahora ya sí, nos vamos con el tema central del Hoja de ruta del editor de Gutenberg. Presente, pasado y futuro. Y vamos a comenzar con las quejas que hubo tras el lanzamiento de Gutenberg en diciembre de 2018. Hubo un revuel bastante grande, sobre todo la mayor queja era la falta de accesibilidad. No estaba preparado desde el punto de vista de la accesibilidad de ninguna manera, y la gente se quejó de ello. La comunidad de WordPress, que suelen tener esto muy en cuenta, es algo importante para la comunidad en general, y hubo mucha crítica en este sentido. Otra crítica fue la lentitud del editor. La gente decía que el editor de Gutenberg era lento. Esto estamos hablando En diciembre de 2018, cuando salió WordPress 5.0, que ya integraba Gutenberg, ya estaba de antes en forma de plugin, pero aquí se integró y ya todo el mundo que actualizara WordPress 5.0 pasaba a tener el editor de bloques de Guttenberg en lugar del editor clásico. Y luego, en general, también se veía en el ambiente que gente que utilizaba constructores visuales como Elementor, como Divi, etcétera, se quejaba mucho, no veía el sentido, decía que si ya había constructores visuales aparte, ¿Por qué no seguir con el editor clásico? Y luego si alguien quería, pues podía instalar Gutenberg aparte en un plugin, o podía instalar Elementor o Divi o lo que fuera. Hubo más quejas, pero estas fueron las principales. Bien, ¿Eran quejas con fundamento? ¿No lo eran? Bueno, vamos a ver, desde mi punto de vista, ¿Qué fue mal en el lanzamiento de Gutenberg? Como digo, con WordPress 5. ¿Cero? Bueno, realmente era inutilizable a través de dispositivos de accesibilidad, o sea que la queja de que había una falta de accesibilidad palpable era cierta, es decir, la gente con problemas de accesibilidad, que utilizaba programas o dispositivos para poder usar WordPress, para poder publicar contenido, para poder manejarse con la herramienta directamente no podían o era muy difícil. Y básicamente lo que lleva esto es que se lanzó demasiado pronto. Yo creo que toda la comunidad o casi todo el mundo estuvo de acuerdo en ese momento en que fue muy precipitado. Gutenberg no estaba preparado para salir ya, digamos, con WordPress. Y claro, esto fue súper criticado por la comunidad, generó mucho descontento inicial. Los que estaban en contra desde el principio, que a lo mejor atentaban un poco para su modelo de negocio, pues los que hacían productos alrededor de Elementor, los que hacían productos alrededor de Divi, alrededor de otros constructores visuales. El hecho de que Gutenberg sacara su propia forma de editar contenido de forma visual, aunque no es para mí, no es lo mismo, pues ahí había gente, como digo, que veía su modelo de negocio atentado. Entonces si se genera revuelo, se genera. Se generan comentarios negativos porque se hicieron cosas mal, pues los que de verdad están en contra o no les interesaba, pues ahí entran a saco. Entonces el descontento inicial fue muy grande. Tanto es así que el propio Matt Mullenweb, ya sabéis, uno de los fundadores de WordPress, lo reconoció en una webcam y dijo que aprendería de esos errores del lanzamiento de Gutenberg. Pero bueno, para ahí ya el daño estaba hecho. Vamos a dejar entonces el lanzamiento y los fallos que hubo, digamos, vamos a dejarlos atrás y vamos a hablar de Gutenberg en sí, del producto, del editor. ¿Qué mejoras ha habido en Gutenberg en siguientes actualizaciones, ya con el paso del tiempo, casi tres años después? Bueno, lo primero es que hay una mejor comunicación sobre los avances de Gutenberg. Esto fue otra cosa muy criticada. Había un poco de caos, no se sabía qué venía, no se sabía bien cómo funcionaban las novedades, qué hoja de ruta había, había muy poca información y muy atomizada, no estaba bien recogida. Bueno, ahora esto ha mejorado muchísimo. En la página, por ejemplo, de Make WordPress. Org hay blogs que nos mantienen al tanto todo el tiempo, incluso hay un podcast, hay mucha más información diaria, casi diaria. Hay un calendario de reuniones que se puede ver directamente en esta misma página que te digo, en Make WordPress. Org y tú puedes saber qué reunión va a haber sobre algo relacionado con WordPress y cuándo. Y esto es muy importante. La gente, la comunidad, los que están dentro, sienten que hay mucho más control, que hay mucha más información, que todo está mucho mejor organizado. Además otra gran crítica que había es que no se estaban haciendo caso a los fallos, los bugs que se dice en inglés, que tenía Gutenberg y se formó un equipo para atajar estos fallos reportados. Entonces esto también hizo que fuese todo mejorando mucho, entre otras cosas la accesibilidad. Ahora sin duda el editor de Gutenberg es muchísimo más accesible y en este sentido esa queja inicial ya ha desaparecido o apenas queda y luego al final con las mejoras, con las actualizaciones, la experiencia en general es mucho mejor. Por ejemplo, esa queja de que Gutenberg, el editor de Gutenberg era muy lento, ahora ha mejorado mucho en cuanto a experiencia de velocidad, ya no sientes, o al menos no tanto, esa experiencia un poco trabada cuando se está editando. Ahora va todo muchísimo más fluido. Así que en general el producto Gutenberg ha mejorado mucho y va a mejorar mucho más. Lo que pasa que tiene esa losa del lanzamiento que incluso hay gente que ni lo ha querido probar. Quitó el editor de Gutenberg. ¿Que se puede hacer? Puedes utilizar el editor clásico, siguió utilizando su Elementor, su Divi o lo que sea y no le ha vuelto a dar una oportunidad. Si ese es tu caso, te recomiendo que se la des. Bien, eso en cuanto a el pasado y un poco el presente. Vamos a empezar a hablar del futuro. ¿Cuál es el futuro de Gutenberg en WordPress? Bueno, aquí lo podemos dividir en dos el futuro para los desarrolladores o profesionales, los que se dedican a crear themes, a crear plugins, hacer webs para clientes desde el punto de vista del desarrollo y no tanto desde pues instalar un Thing y modificarlo, sino desde el punto de vista hacer algo más a medida. Bueno, aquí con Guttenberg se abren muchísimas más posibilidades. Por ejemplo, se puede reutilizar código de otros CMS como Drupal u otros para utilizar también en WordPress. Esto antes no se podía por cómo estaba hecho WordPress y esto quiere decir que aplicaciones externas lo van a tener mucho más fácil porque pueden digamos, crear una API, una aplicación y que sin muchos cambios se conecte o se pueda conectar. Imagínate Stripe, por ejemplo, la pasarela de pagos Stripe, pues que para ellos desarrollando una misma aplicación o una aplicación con muy pocas variaciones se pueda conectar, como te decía, por ejemplo, tanto con WordPress como con Drupal, como con otros CMS, de forma que no tienes que hacer programaciones muy diferentes para WordPress que para otro software. ¿Cuál es la pega de esto? Que la barrera de entrada es mucho mayor. Antes alguien con pocos conocimientos podía crear un theme, podría crear un plugin, ahora no, ahora hay que saber, bueno, depende de cómo lo crees, pero si lo vas a querer hacer enfocado a Gutenberg, a que se pueda aprovechar todo lo que ofrece Gutenberg, pues es necesario saber React, por ejemplo, que es una librería de JavaScript, que es con la que están hechos los bloques de Gutenberg, con el que está hecho Gutenberg. Entonces es mucho más complicado crear un theme o un plugin, tienes que saber más. Esto desde el punto de vista de los desarrolladores. El futuro, el presente. Un poco de Gutenberg ¿Qué pasa con los usuarios? ¿Con el que tiene su propia web, instala un thing y quiere utilizar los bloques? ¿Quiere decir llevar su web en el día a día? Bueno, lo obvio, va a poder diseñar de forma visual su web sin necesidad de instalar nada extra, sin necesidad de instalar Elementor u otro constructor visual. Estamos hablando del futuro, porque ahora mismo, dependiendo de tus necesidades, puede que Gutenberg se te quede corto. Pero viene el Full Site Editing, que es lo que nos va a permitir editar toda la web utilizando los bloques de Gutenberg. Y este concepto del Full Site Editing le vamos a dedicar un apartado en el que me voy a adentrar ahora mismo. Está dividido en según los desarrolladores que están encargados de este proyecto dentro de Gutenberg, como digo, está dividido en ocho partes, hay como ocho grandes grupos que se están desarrollando y que tienen todos se engloban dentro del Full Site Editing. Recuerda, diseño de toda la web, básicamente que con los bloques de Gutenberg podamos diseñar todas las partes de la web, que se puedan utilizar esos bloques en cualquier lugar. Y como digo, una de las partes es el editor del sitio, es decir, una zona donde se pueda editar la web en general. Otro gran bloque es la edición de plantillas, es decir, que tú puedas crear directamente una plantilla de página. Esto antiguamente sólo se podía hacer a través de código, creando, entrando por FTP, creando un archivo nuevo, PHP y creando una plantilla de página. Ahora mismo se puede hacer, pero no está incluido de forma nativa, pero pronto lo estará, pues como digo, lo puedes hacer directamente desde WordPress, desde el panel de administración, creas una plantilla nueva, añades bloques y ya la puedes seleccionar desde cualquier página de tu web. Otra gran área del Full Site Editing es la creación de temas de themes en base a bloques. Otra gran área es cómo poder dar estilos a nivel global, cómo se van a poder crear o diseñar webs a nivel global con los bloques. Hay una parte del full site editing de las que están trabajando los desarrolladores, que es a ver cómo se puede hacer para poder dar estilos a nivel global y poder coger y dar estilos a los bloques que pongas en la cabecera, a los bloques que pongas en el footer, a los bloques que pongas en la widget área o las áreas de widget, todo esto, cómo integrar todo esto y poder dar estilos por CSS, bueno con las opciones que te trae Gutenberg y por CSS a todo esto. Otro gran área son los bloques de temas. Estos bloques de temas, lo he mencionado anteriormente, ya está incluido en las versiones más recientes de Gutenberg y es la posibilidad por ejemplo de crear tu propia página de blog pudiendo poner un bloque en el que decir por ejemplo, quiero que se muestren todos los artículos con la categoría, esto antes no se podía hacer, ahora se puede hacer con un bloque de Gutenberg y hay más bloques de temas después. Otra gran área de la que se está trabajando desde WordPress, los desarrolladores que están aportando a WordPress, es una búsqueda global, esto es un poco a nivel interno, que se pueda buscar o llamar a bloques de cualquier parte de la web, no sólo de una página ni nada. Otra gran parte del full site editing son los bloques de navegación, esto es los bloques que tienen que ver, o el bloque, perdón, el bloque de navegación, el bloque que tiene que ver con la edición del menú de navegación de tu web directamente con Gutenberg. Desde el punto de vista de la estructura y del diseño, esto es un área en la que también se está trabajando. Y el último área es Query block, que básicamente es un bloque que te permite editar y utilizar la query de WordPress, y qué es la query de WordPress lo que hace que se muestren por ejemplo los artículos en la página de blog. Entonces al tener un bloque que te permita utilizar y editar esto, pues tienes mucho más control, porque como te decía antes, puedes crear páginas de bloque a medida, puedes crear páginas de categoría medida, puedes mostrar entradas destacadas en tu página de inicio, eso digamos de forma sencilla, sí, a nivel de usuario. Esas son las grandes áreas del full site editing y en las que se está trabajando de forma activa. Hay algunas áreas que están más avanzadas, otras que ni siquiera han llegado y otras que vendrán pronto. Bueno, espero que te haya gustado este repaso del estado actual, un poco también del pasado y del futuro del editor de Guttenberg. Ya sabes que ahora tienes un curso totalmente actualizado del editor de Gutenberg, donde vemos su uso de principio a fin a nivel de usuario, incluso cómo extenderlo. Por cierto, tienes un episodio del podcast que publiqué hace relativamente poco, que es el 271, en el que te hablo de plugins para extender Gutenberg, cómo puedes hacerlo mejor con más bloques, con mejoras de edición o con plantillas prediseñadas. Cosa que por cierto, vemos en el curso y al que puedes acceder directamente yendo a Gonzalo Navarro Es Cursos Gutenberg. Si no, también lo tendrás, Recuerda en las notas de este episodio en GonzaloNabarro es 281. Por último, recordarte que si quieres acceder al curso de Gutenberg y al resto de cursos, hay más de 56 cursos ya publicados, puedes suscribirte en gonzalonabarro es y no sólo tendrás acceso a todo ese contenido, sino que también podrás ver los vídeos de la Zona Código, ya sabes, vídeos más avanzados en los que te enseño a modificar el funcionamiento y el aspecto de tu web sin utilizar plugins y sin que sepas nada de desarrollo. Y si durante tu formación tienes alguna duda, me puedes contactar desde tu cuenta, porque también tienes soporte personalizado conmigo. Todo eso por 10 euros al mes, sin permanencia, con 15 días de garantía, así que no esperes para probarlo. Toda la info en Gonzalo Navarro es. Nada más por este episodio. Nos seguimos escuchando. Adiós.