271 | Cómo extender las posibilidades del editor de Gutenberg

En el episodio 271 de WordPress Semanal hablamos de cómo mejorar el editor de Gutenberg con más bloques, plantillas prediseñadas, opciones avanzadas de diseño y funcionalidades especiales. Vamos allá. Hola, hola, Soy Gonzalo, de GonzaloNavarro. Es y 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 te voy a hablar del editor de Gutenberg. En el anterior episodio, el 270, hicimos un poco una comparativa entre si merece la pena utilizar un constructor visual más allá del editor de Gutenberg, que es lo que viene por defecto con WordPress. Y en este episodio sigo un poco por la misma línea, o digamos, avanzo en una línea en la que no me pronuncié en el anterior episodio, pero que también es interesante y que también es algo que me preguntáis por el contacto, por el soporte y demás. Y es la posibilidad de hacer que Gutenberg, que el editor de Gutenberg nativo, el que viene con WordPress, permita hacer más cosas, cosas más parecidas a las que estamos acostumbrados o a las que estáis acostumbrados los que utilizáis un constructor visual tipo Elementor, un algún otro. Entonces vamos a hablar de todo ello en un segundito, pero antes, como siempre, novedades. ¿Qué está pasando en Gonzalo Navarro es esta semana? Pues tenemos nuevo vídeo de la Zona Código, es el vídeo 221 y en él te enseño a crear tooltips solo con HTML y CSS. Los tooltips son mensajes de ayuda que aparecen cuando un usuario, un visitante, pasa el ratón por encima de alguna palabra, bueno, de alguna palabra o de algún elemento. Básicamente los tooltips se utilizan para ampliar información o aclarar algún concepto sin necesidad de escribir el texto directamente en el contenido ni de enviar al usuario a otra página. Y se puede hacer de una forma mucho más sencilla de lo que piensas, con un poquito de código. Y es precisamente lo que aprendes en este vídeo nuevo de la Zona código, el vídeo 221. Os voy a dejar un enlace en las notas de este episodio, pero si no, pues podéis ir a la zona Código, a la parte de códigos, que ya sabéis que está incluido en vuestra suscripción. Os que estáis suscritos, tenéis los cursos, los vídeos de la zona código y un montón de cositas. Y en la página de códigos pues si estáis escuchando este episodio, no lo sé, mucho después de que lo haya publicado y queréis ir directamente a la web, ya sabéis que tenéis un buscador, ponéis tooltips y os va a aparecer. Sí, fantástico. Como digo, además de los vídeos de la zona código, tenéis un montón de cursos, más de 55 cursos para gestionar webs, para crearlas desde cero, para mejorarlas, para llevar también la parte del SEO, la parte del email marketing, todo lo necesario para crear y gestionar webs de forma profesional. Toda la info en Gonzalo Navarro es perfecto. Eso en cuanto a las novedades. Vamos ahora con el plugin de la semana que se llama Post Descriptions y es un plugin bastante nuevo, está activo en apenas 200 webs con WordPress y hace una cosa muy interesante que es permitirte a ti como administrador de la web o como editor de una web con WordPress añadir descripciones a los post y a las páginas, pero que te aparezcan en la parte de administración. No que ninguna descripción para añadir en la parte frontal para que vean tus visitantes ni nada, sino algo a nivel interno para que puedas añadir pues una pequeña nota de recordatorio sobre, no sé, algo que tienes que incluir en esa entrada o dejárselo para que otro editor de tu web pueda verlo. Está bastante bien, te permite añadir estas descripciones directamente cuando estás editando una entrada o una página o desde la parte donde se muestran todas las páginas y además puedes consultarlas también desde ahí o también de forma individual a nivel de página. Así que está bastante bien. Es un plugin chiquitito que hace una cosa muy específica pero pero para el que necesite este tipo de cosas le da mucho. De nuevo, se llama Post Descriptions, os dejo el enlace en las notas de este episodio. Recordad, para ir a las notas simplemente tenéis que escribir en vuestro navegador Gonzalo es y el número del episodio, que en este caso es el 271. Perfecto, pues ahora sí vamos con el tema plugins que extienden las posibilidades del editor de Gutenberg. Y vamos a empezar sentando un poquito las bases como siempre y es respondiendo a la pregunta ¿Cuándo hace falta mejorar entre comillas, Gutenberg con extensiones? Bueno, básicamente cuando buscas una experiencia más parecida a los Page Builders o alguna de las opciones que te ofrece otros Page Builders que como hablamos en el episodio 270, traen más cosas, puedes hacer más cosas con ellos que con el editor de Gutenberg. Y más concretamente, pues si por ejemplo necesitas más bloques, más bloques de los que ya trae Gutenberg, pues hay muchos plugins, ahora los comentaremos, que te ofrecen un montón de bloques extra para hacer cosas que de otra manera no podrías hacer. Si buscas plantillas prediseñadas, también es una buena opción que añadas alguna extensión que te las ofrezca, Si necesitas más opciones para controlar el diseño, ya no tanto de cada bloque, sino a nivel general de la página, o tener más opciones también dentro de cada bloque, más opciones para el texto, por ejemplo, o más opciones para dar estructura al diseño general, veremos plugins en este sentido, o si necesitas bloques muy, muy, muy concretos, bloques especiales, por ejemplo bloques para WooCommerce, pues también en este caso necesitarías añadir una extensión. Vamos a comentar todos estos puntos paso a paso, empezando por plugins que te permiten añadir más bloques a Gutenberg. Por cierto, si no necesitas ninguna de estas opciones, quédate con Gutenberg, tal y como estás, no necesitas añadir nada más. Bien, entonces vamos a ver plugins para añadir más bloques a Gutenberg. A ver, aquí te puedes ir a la página de WordPress. Org y buscar Google Gutenberg Blogs y ver todos los que hay, los que ofrecen cada uno y demás. Yo te voy a decir alguno de los más populares, por ejemplo, el primero de ellos es Ultimate Addons for Gutenberg, que es el más popular, está activo en 300.000 webs hechas con WordPress, es de la empresa Brainstorm Force, va muy bien, es muy compatible con Astra, de hecho está pensado para los que utilizáis el theme Astra, porque además de darte muchos más bloques, pues también te permite jugar con plantillas y demás. Y. Y si bien lo he puesto en el apartado de plugins que te permiten añadir más bloques, este es un plugin completísimo, que realmente convierte el editor de Guttenberg en un Page Builder más avanzado, no sólo con bloques, sino también con plantillas prediseñadas. Pero bueno, como estamos hablando un poco de bloques, trae bloques para formularios, para pestañas, para animaciones, gracias a Lotty, que es como un servicio especial que te permite añadir animaciones, te permite poner bloques de reviews, listas, de taxonomía, búsqueda, tiene un bloque de búsqueda, tiene un bloque para poner avisos, tiene bloques para hacer columnas más avanzadas, con más opciones de las que te trae Gutenberg, llamadas a la acción, tienes un bloque que te permite dar estilos a los formularios de Contact Form 7, en fin, te puedes volver loco mirando todos los bloques que hay, como te dejo los enlaces puedes echarle un vistazo, vas directamente y puedes ver todo lo que tienes. Bien, ese es el más popular diría yo, porque también hay mucha gente que utiliza Astra, entonces por eso este plugin tiene tantas instalaciones. Después tenemos Cadence Blogs que trae un poco, no tantos bloques como el anterior, pero trae también muchos bloques y también te da como opciones extra sobre todo a nivel de columnas y de tener mucho más control en dónde pones los contenidos a nivel estructural, es uno de sus grandes fuertes, está activo este plugin en más de 100.000 webs con WordPress, así que súper popular. Su gran fuerza ya digo que es el control extra que te da a nivel estructural de columnas, espaciado, margen, padding, para tener mucho más control a ni de la maquetación. Después tenemos Coblocks que es un plugin que vemos en el curso de creación de webs minimalistas y que te aporta también bastantes bloques de Gutenberg extra. Tenemos Atomic Blocks que es muy similar y que también vemos no sólo en el plugin de no solo en el curso de creación de web minimalista, sino también tengo un curso específico de Atomic Blocks, así que si queréis ver en acción cómo utilizar cada uno de los bloques extra que te trae Atomic Blocks, pues lo cubrimos en el curso. Este lo mismo, trae un montón de opciones para controlar el layout, es decir la maquetación a través de unos bloques especiales y luego los típicos bloques que la gente solicita mucho como bloques para crear tablas de precio, como para mostrar contenidos en formato grid, acordeón, llamadas a la acción, un montón de bloques interesantes. Este plugin está activo en 40.000 webs porque Atomic Blocks ahora se llama Genesis Blocks, que se puede utilizar con cualquier web y están conviviendo ahora mismo los dos y entonces pues tienen algunos usuarios con una versión y otros usuarios con otra, pero ofrecen muchas opciones. Podéis echar si estáis suscritos un vistazo al curso que lo dejaré en la parte de enlaces y luego añadido algún otro como getwit que también es otro que pues muy del estilo, que tiene un montón de más de 40 bloques. De Gutenberg no voy a comentar mucho porque es muy parecido a los anteriores, pero sí que os dejo el enlace dentro de cada sección que vaya comentando. Voy a poner el nombre del plugin enlazado a la página de WordPress. Org donde puedes ver más información acerca del mismo. Pero perfecto, vamos ahora con plugins que extienden Gutenberg desde el punto de vista de las plantillas, es decir, que te permite elegir una plantilla prediseñada como haríamos con la mayoría de constructores visuales que hay por ahí, estilo Elementor, estilo Divi, etc. Bien, os voy a decir alguno de los más populares. Tenemos Starter Templates, que como su nombre indica te pone plantillas de partida y este te sirve para Gutenberg, pero también para Elementor, para Vivel Builder y otros constructores visuales. Está activo en más de un millón de webs con WordPress, también es de la empresa Brainstorm Force y bueno, está muy vinculado también a Astra, está pensado inicialmente para Astra, pero se puede utilizar con más temas, con otros temas, siempre y cuando tengas el editor de Gutenberg que viene por defecto con WordPress o algún otro constructor visual como Elementor, etc. Y básicamente es eso, eliges plantillas y ya las modificas y partes de ellas tiene más de 280 ya prediseñadas, o sea que es muy buen punto de partida. Después tenemos Redux Gutenberg Template Library, que básicamente esto es como un framework, te da un marco de trabajo especial en el que puedes utilizar o puedes mejorar. Ellos dicen Supercharge, como potenciar el editor de Guttenberg con una cantidad enorme de plantillas, no sólo plantillas globales, sino también plantillas de secciones, pues una llamada a la acción o lo que sea. Y también está activo en más de un millón de webs con WordPress. Se puede utilizar con cualquier thing, porque de hecho ellos lo que hacen es que te dan una plantilla de página que te permite empezar en blanco y ya luego tú diseñas todo a medida, por eso está mucho más enfocado, como comentábamos al principio de este episodio, con lo que se puede hacer con los constructores visuales típicos. Luego tenemos otro muy popular que se llama Templately, que tiene más de 1000 diseños gratuitos que puedes utilizar, sirve también además de para Gutenberg, sirve para Elementor y está activo en más de 100.000 webs con WordPress. Y por último quería mencionar Other Blogs, que bueno, aunque el nombre ponga Blogs también es una librería de plantilla o de plantillas, está activo también en 100.000 webs con WordPress y te ofrece plantillas ya prediseñadas o puedes crear tú también tus propias plantillas para después reutilizarlas, y además pues trae un montón de bloques, al igual que la mayoría. La mayoría de las que te ofrecen plantillas prediseñadas también traen sus propios bloques, pero en este caso los que te he comentado están más enfocados a eso, a ofrecerte plantillas prediseñadas y no tanto ofrecerte nada más que bloques extra. Perfecto. Vamos a comentar ahora un par de plugins que te permiten tener más opciones de diseño dentro de Gutenberg. Uno es Editor Plus de Extended Fi y otro es Editor Skit. El primero, Editor Plus, lo he comentado, recomendado en la sección del plugin de la semana, y no sólo trae bloques, que es un poco lo más habitual, lo que hemos estado comentando, sino que te trae opciones avanzadas en cuanto al diseño, la tipografía, iconos, cómo puedes poner divisores dentro de la página web con formas especiales, cómo puedes conseguir añadir animaciones. Está un poco más enfocado a eso, a la parte del diseño, puedes incluso controlar la visibilidad de ciertos bloques, incluso te trae una cajita para que añadas CSS a cada bloque, entonces te añade esa parte habitual en otros constructores visuales que Gutenberg no trae. Y después el otro que te comentaba, Editor Skit, que es de la misma empresa de Extendify, este es más popular, está activo en 20.000 webs con WordPress Microsoft, mientras que el otro está en 5.000 y este te permite por ejemplo, cuando escribes texto, tener muchas más opciones. Puedes elegir si quieres ponerle no follow a los enlaces, si quieres subrayar texto, si quieres quitar las opciones de formato, limpiar el formato, lo típico, copias un texto de otro lado, lo pegas en tu web y se queda con el formato del otro lado, pues tiene una opción para que quites ese formato. Te da un poco como todo lo que, o a todo lo que estamos acostumbrados cuando utilizamos un documento de Google o cuando escribimos en Microsoft Word o algo de eso. Tienes también la posibilidad de añadir caracteres especiales, tiene soporte para el marcado, si sabes marcado y quieres escribir utilizando marcado, que ya sabes que es como una forma especial de crear contenidos, es como con un lenguaje concreto pues lo puedes utilizar. Tienes opciones para controlar la visibilidad de los bloques, tienes un shortcode en el que puedes mostrar el tiempo estimado de lectura de un contenido. Tiene un bloque que te pone líneas para que puedas controlar mucho mejor la maquetación, te pone como una especie de grid con líneas y así puedes tú cuando estés diseñando pues tener mucho más control con dónde pones cada elemento, cada bloque. Te da algunas opciones interesantes, como decir que se muestre o que no se muestre el título. Te permite también añadir CSS, un navegador de bloques más sencillo de utilizar para moverte mejor por el editor de Gutenberg y un montón de opciones más. Básicamente te da opciones para los editores, para los creadores de contenido, por eso se llama Editors Kit. Este plugin se ha ido haciendo cada vez más popular, es de estos que notas que va creciendo y que cada vez está activo en más webs. Así que bueno, ahí tenéis un plugin interesante. Perfecto. Y vamos a terminar este episodio con algunos mini plugins para Gutenberg, es decir, plugins que hacen cosas muy específicas o que te aportan un bloque muy concreto para el editor de Gutenberg. Por un lado tenemos WooCommerce Blogs, que como su nombre indica, pues te va a dar bloques para los que tenéis tiendas online con WooCommerce. Este es de Automátic, es decir, la misma empresa que está detrás de WooCommerce, o sea que sería como el plugin oficial. Está activo en más de 200.000 webs con WordPress y básicamente te permite mostrar productos en cualquier página o o entrada de tu web. Aunque también tiene más bloques, tiene bastantes bloques de hecho. Después tenemos un bloque o un plugin que te ofrece un bloque para crear tablas responsive para nicho. Lo típico que creas una tienda nicho de productos de Amazon, de cafeteras o lo que sea y los quieres mostrar, quieres mostrar todas las cafeteras en una tabla con una descripción, con el nombre, con el precio o el enlace de afiliado o lo que sea. Pues este plugin te ofrece un bloque de Gutenberg para crear esa tabla. Estoy mencionando algunos como un poco así especiales, porque hay mil. Claro, si te pones, te vas a la página de WordPress. Org, la parte de los plugins y pones Gutenberg Blogs o Blog Gutenberg o lo que sea, pues imagínate todo lo que te va a salir. Pero he seleccionado algunos para que veas que también hay cosas muy concretas que antiguamente a lo mejor utilizábamos en un plugin aparte y que ahora también es un plugin, pero que ese plugin lo único que hace es añadirte un bloque de Gutenberg extra. Luego tenemos algunos plugins de constructores de formulario directamente en Gutenberg, uno de los que primero salió y de los que está haciendo más populares es Guttenberg Forms, aunque hay más, y básicamente es eso, te permite crear formularios directamente con el editor de Gutenberg. Después he destacado también Guten Slider, porque te permite poner un slider directamente con un bloque de Gutenberg, así que lo puedes poner en cualquier lugar de tu web sin problemas. Por otro lado he destacado también Flex Posts, que básicamente es un bloque que te permite añadir contenido destacado, pues en formato grid, lo puedes poner como por columnas, como tú quieras, con bastante control. Luego tenemos Conditional Blocks, que este lo recomendé me parece en la sección de plugins de la semana, si no este uno parecido me imagino que sería este, y básicamente te permite mostrar bloques de Gutenberg de forma condicional, es decir, ocultarlo, pues no lo sé, cuando se está en móvil, cuando el usuario está conectado, cuando no, ese tipo de cosas. El otro día leí un tuit de pasada de Fernando Tellado, que creo que publicó algo en su blog de si esto de la opción de poner bloques condicionales debería venir por defecto con editor de Gutenberg. Solo leí el tweet, no sé luego el artículo lo que decía, pero lo mencionaba, así que es una conversación que está por ahí, pero bueno, si queréis añadirlo lo tenéis con este plugin. Y el último que he destacado es Gutenberg Blog Manager, lo he puesto Weinberg, me parece interesante, te permite eliminar todos los bloques que no uses en tu web, lo cual es muy útil sobre todo, normalmente utilizamos siempre los mismos bloques y hay muchos que no vamos a utilizar y a lo mejor para un cliente, si hace una web para un cliente y quieres ponérselo lo más sencillo posible, pues le desactivas todo lo que no vaya a usar y les deja los típicos bloques de texto, imagen y lo que sea. Pues nada, con esto queda cubierto. Hemos visto plugins para añadir más bloques a Guttenberg, para tener plantillas prediseñadas, para disfrutar de más opciones de edición o de diseño y mini plugins concretos que me han parecido interesantes. Recuerda que tienes enlaces al curso de Gutenberg, al curso de webs minimalistas, donde aprovechamos Gutenberg y lo extendemos con con muchos de los plugins que hemos comentado aquí y por supuesto al curso de Atomic Blogs que es uno de los plugins también que he comentado o Genesis Blogs que es como se llama ahora para acceder a estos cursos y a todos los contenidos premium ya sabes gonzalonamarro es ahí te Puedes apuntar simplemente 10 euros al mes sin permanencia y con 15 días de garantía, más de 55 cursos, más de 200 vídeos de la zona, código, soporte personalizado conmigo para que aprendas a crear y gestionar webs de forma profesional o si ya sabes hacerlo para que tengas un lugar de apoyo y que pueda seguir mejorando. Nada más por este episodio, muchas gracias por estar ahí, nos seguimos escuchando, Adiós.