340 | Bloques reutilizables de WordPress: aprovéchalos así

En el episodio 340 de WordPress semanal hablamos de los bloques reutilizables del editor de WordPress, casos de uso y cómo aprovecharlos. Vamos allá. Hola, hola, soy Gonzalo Navarro y Bienvenidos al episodio 340 de WordPress Semanal, el podcast en el que aprendes a crear y gestionar tus propias webs con WordPress y en profundidad. Y hoy hablamos de un elemento muy concreto del editor de WordPress que se conoce como Gutenberg, pero que ya se le podría quitar el nombre porque al final es el editor nativo de WordPress, el que viene cuando lo instalamos y cuando lo utilizamos para crear, editar cualquier página, entrada o contenido de nuestra web. Como digo, vamos a hablar de algo específico que es una característica de uso de este editor y se llaman bloques reutilizables, que como su nombre indica, son bloques que podemos reutilizar. Vamos a ver qué son, qué beneficios y ejemplos útiles de bloques reutilizables hay, cómo puedes crearlos desde el punto de vista técnico, cómo puedes editarlos, porque tiene una peculiaridad. Y por último hablaremos de su uso avanzado y algunos trucos un poquito escondidos para que puedas aprovecharlos lo máximo posible. Todo ello en un momentito, en nada. Pero antes, como siempre, novedades. ¿Que está pasando en Gonzalo Navarro es esta semana? Pues tenemos por un lado nuevo vídeo de la zona código. Ya sabéis, ahí aprendéis a editar vuestra web sin utilizar plugins y sin saber desarrollo ni nada, simplemente veis el vídeo, copiáis el código que os dejo debajo y lo pegáis. Y en este caso os enseño a desactivar la tecla Enter en WordPress. Es decir, que cuando alguien esté visitando vuestra web, imaginad que tenéis un formulario de contacto y no queréis que, pues después de rellenarlo a lo mejor están haciendo Enter y por lo que sea el formulario que utilizáis envía el contenido y no queréis que haga eso porque es una mala experiencia para vuestros usuarios, porque a lo mejor lo que quieren hacer es un Enter, quieren dejar hacer un salto de línea para continuar en un párrafo nuevo. Pues os enseño a hacerlo. Esto lo he sacado porque uno de vosotros, un suscriptor, me preguntó que cómo se hacía. Pues aquí lo tenéis, es el vídeo ya 290. Fijaos la cantidad de contenido que tenéis para poder editar vuestra web de forma avanzada y ya digo, ahorrando plugins. ¿Qué más? Bueno, tenéis el curso más reciente publicado, que es el curso de de gamificación en WordPress. Con este curso aprendes el sistema que puedes implementar en tu web para premiar a los usuarios con recompensas digitales por interactuar con tu web o por hacer cosas que un plugin te permite, como por ejemplo una compra a través de WooCommerce, a través de ADD o el consumo de un curso. Básicamente este sistema de premios y recompensas que nos engancha tanto a todos, pues te explico cómo implementarlo en tu web con WordPress. Además de este curso, ya sabéis que tenéis otros, prácticamente 70, sobre el uso de WordPress desde cero hasta avanzado, el mantenimiento, cómo hacerle marketing, cómo hacer email marketing. Tenéis cursos también sobre SEO, es decir, todo lo que necesitáis para crear y gestionar webs con WordPress profesionales. Perfecto, hasta aquí las novedades. Vamos ahora con el plugin de la semana que se llama Altext Magic. Este es un plugin novísimo, es súper súper nuevo y Y lo que hace es que de forma automática te genera el texto alternativo de todas las imágenes que tú subas a tu web. Su formato es que te permite hacer 10 al mes de forma automática. Ya digo, tú subes una imagen y te genera una descripción única y te la pone en la parte del texto alternativo, que ya sabéis que esto para el SEO, además de para la accesibilidad, pues viene muy bien. Y además tienen 108 idiomas disponibles, así que está en español también lo vi, me pareció interesante, así que ahí lo tenéis. Si alguno lo probáis, pues ya me contaréis. Por cierto, voy dejando todo lo que comento como siempre en las notas del episodio, a las que podéis ir directamente escribiendo en vuestro navegador gonzalonabarro es fantástico. Pues ahora sí, vámonos con el tema central de este Cómo utilizar los bloques reutilizables de Gutenberg. Y vamos a empezar definiéndolos para estar todos en la misma línea. Y los bloques reutilizables no son otra cosa que una colección o disposición de de uno o más bloques que puedes guardar en la biblioteca para utilizar cuando quieras. Pueden ser algo sencillo, con un par de bloques, imagínate una imagen y un texto, o una imagen y un botón, o pueden ser disposiciones muy complejas, como hasta el diseño completo de una zona de tu web, Imagínate la parte de arriba donde tú creas una especie de hero, donde esa sección destacada de una página con un fondo chulo, con dos columnas en un texto, con un botón o con dos botones a la derecha, una imagen o un vídeo, y tú quieres poder reutilizar todo eso, ese diseño que te has currado en otras páginas de tu web de forma sencilla, pues para esto lo utilizarías. Y la gracia de esto es que cada vez que edites un bloque reutilizable, los cambios se van a aplicar en todos los lugares donde los hayas insertado. Así que los creas una vez los insertas, cada vez que los necesites y y si quieres hacer cambios globales, los editas desde un lugar y ya se ven reflejados en todos lados. Pero vamos a ver los beneficios y ejemplos útiles de bloques reutilizables que puedes utilizar. Bueno, los beneficios para mí son claros, ganas en productividad, ganas en tiempo, porque básicamente estás reaprovechando un contenido de forma inteligente sin tener que andar copiando, pegando con varias páginas abiertas. Así que en ese sentido los beneficios están claros. Incluso te facilita replicar diseños dentro de una misma web o como veremos más adelante en otras entre webs distintas. Ejemplos cuando vas a crear tienes tu típico CTA o llamada a la acción, pues para que alguien se apunte a tu newsletter, para que se descarguen algo, para que compren incluso, y pues tú la quieres ir colocando cuando te interese, pues a lo mejor estás publicando en tu blog y justo hablas de algo relacionado, pues lo insertas ahí en mitad del contenido o siempre lo quieres ir poniendo como al final, al final de todas tus entradas, pues lo vas insertando, simplemente insertas el bloque, es reutilizable y ya lo tienes. Y además imagínate que esa llamada a la acción la cambias porque ahora de repente ofreces un ebook porque la gente se apunta tu newsletter, pues en la parte de los bloques reutilizables lo editas y ya en todos los lugares donde lo tuvieses insertado se va a actualizar. Otro ejemplo típico, la típica caja con información del autor, el autor del post, pues lo mismo que hay bloques para esto, pero tú puedes diseñarlo, darle forma, ponerle un fondo chulo, hacer lo que quieras y luego ir reutilizándolo cada vez que lo necesites. Otro caso de uso súper práctico y súper útil cuando tienes banners con patrocinios, con enlaces de afiliados, con anunciantes que van cambiando, pero que tú siempre vas colocando en los mismos lugares. Pues lo mismo, es muy fácil una vez lo has creado por primera vez, colocarlo donde quieras, donde te interese, cuando estás editando una página, una entrada o cualquier contenido que utilice el editor de Gutenberg. Y luego si cambias de patrocinador, solo lo tienes que modificar y se modifica automáticamente en todos los lugares. Otro caso de uso muy típico, los enlaces a redes sociales, salvo que utilices un plugin que te lo ponga automáticamente, pues aquí tú puedes crearlos tú mismo, editarlos como quieras, los creas una vez y luego pues eso, los vas añadiendo donde necesites. Bien, creo que queda clara la idea y los casos de uso. Vamos a ver cómo se crean, cómo lo hago desde el punto de vista técnico. Bueno, aquí un par de peculiaridades. Primero, para crearlos lo haces directamente desde el editor de una página o una entrada. Tú estás editando cualquier página o añades una nueva y añades los bloques que necesites. Si vas a hacer un diseño complejo, pues lo haces normal, como lo harías tú en el editor de Gutenberg. Y luego simplemente los seleccionas todos, todos los que quieras o esa zona que tú quieras hacer reutilizable. Le das a los típicos tres puntitos que te aparecen siempre cuando marcas algún bloque o varios bloques para ver las opciones y ahí eliges la opción de añadir a bloques reutilizables. Te va a aparecer una pantallita donde le puedes dar tu nombre y le das a guardar. Y una vez hagas esto, ahora ya lo vas a tener siempre disponible como un bloque más dentro del editor cada vez que quieras añadir uno nuevo. Incluso puedes utilizar el atajo de teclado. Ya sabes que cuando estás editando en Gutenberg, si estás en la parte central con los contenidos y demás, puedes darle a la barra inclinada y eso te permite escribir el nombre del bloque para ponerlo de forma más rápida. Pues incluso te permite hacer eso con los bloques reutilizables, si es que te acuerdas del nombre que le diste. Y si no, pues como siempre, le das al para que te salgan todos los bloques y al final están los reutilizables. Esto para crearlos. Pero cómo los editores, bueno, no se pueden editar directamente desde una página o una entrada, es decir, no puedes, digamos, estás en una página, añades el bloque y editarlo. Para esto debes irte al gestor de bloques reutilizables al que puedes llegar por ejemplo, si le das a añadir un bloque nuevo y te bajas a la parte de los bloques reutilizables, hay un enlace que pone gestión o algo así o gestor de bloques reutilizables, le das ahí y ya apareces en la página de gestión de los bloques, donde te aparecerán todos y donde tendrás un botón de editar o directamente haces clic sobre el título y ahí ya sí puedes editar ese bloque reutilizable y los cambios que hagas, como comentamos, se verán reflejados en todos los lugares donde lo tengas insertado. Lo que sí podrías hacer desde una página o una entrada es convertir un bloque reutilizable en un bloque normal, entonces digamos que estarías en esa página concreta sacándolo y quitando la parte reutilizable, el bloque reutilizable seguiría existiendo, pero digamos que si tú en una página justo quieres modificarlo, lo conviertes a un bloque normal, le haces los cambios que quieras y ahí sí los cambios solo se van a ver reflejados en ese bloque específico sin que afecten al bloque reutilizable global. Bien, en esta línea y por último vamos a ver el uso avanzado y algún truquito para la gestión o el uso de los bloques reutilizables. Como te decía, desde la parte del gestor de bloques tú puedes editarlos, pero tienes otra funcionalidad súper chula que es exportarlos e importarlos, Es decir, imagínate que tú tienes varias webs o que te dedicas a hacerlas o lo que sea, pues tú puedes hacer un diseño o una disposición de bloques, lo que quieras, y como en todas las webs con WordPress se utiliza el mismo editor, es el editor de Gutenberg, el editor que viene de forma nativa, pues puedes llevártelos de un lado a otro, igual que puedes por ejemplo copiar, que esto no sé si lo sabías, pero tú puedes copiar, imagínate que estoy en mi web, Gonzalo Navarro es estoy editando una página, puedo copiar una serie de bloques y si me voy a otra página que no sea Gonzalo Navarro, es a la parte de administración, por supuesto edito, puedo pegar ese contenido siempre y cuando esos bloques existan en esa página. A veces hay bloques que nos los aportan un plugin y demás, pero siempre y cuando exista, yo puedo copiar y pegar incluso entre páginas distintas, pero bueno, esto es un concepto diferente, aquí puedo exportar y luego en otra web lo puedo importar, incluso si buscas por ahí verás que hay páginas donde te ofrecen, incluso te venden diseños completos gracias a esta opción de importar y exportar. Y luego otro truquito es que hay plugins, incluso hay uno que está muy bien, que te permiten extender las posibilidades de los bloques reutilizables, porque ya sabemos que en WordPress siempre está esto de no pasarse de funcionalidades, entonces te dan lo básico porque luego existen los plugins que para el que lo necesite pues puede extender las posibilidades de algo. Y como para casi todo, en WordPress también hay un plugin para extender las posibilidades de los bloques reutilizables que se llama Reusable Blocks Extended y este te permite gestionarlos de forma mucho más visual. Puedes ver por ejemplo vistas previas, imagínate que tienes un montón de bloques reutilizables, es un poco rollo la gestión o se hace más compleja, sin embargo este plugin te la facilita, además te da información de dónde están colocados. Está muy bien si los usas, digamos, si eres un usuario que aprovecha mucho esto de los bloques reutilizables, échale un vistazo a este plugin de nuevo Reusable Plus Extended, porque ya digo, te permite verlo de forma más visual y además te permite insertarlos en cualquier lugar, no solo en sitios donde se use el editor de Gutenberg, sino por ejemplo en áreas de widget. Incluso lo podrías hacer a través de PHP, es decir, a nivel del código, por si tú haces webs a medida o lo quieres colocar, no lo sé, en un lugar, en la cabecera o lo que sea, podrías llegar a hacerlo a través de PHP. Si os interesa el tema, solo desde hoy o bueno, depende cuando estés escuchando, desde el día de publicación de este episodio, que es el miércoles 19 de octubre, solo desde el miércoles 19 de octubre hasta el domingo 23 de octubre, es decir, lo que queda de semana, que todos los que os apuntéis os suscribáis, en Gonzalo es os voy a enviar un vídeo, un taller, en el que vamos a ver cómo se utilizan los bloques reutilizables de principio a fin, incluso cómo puedes aprovechar el plugin del que te hablo, Reusable Blocks Extended, para llevar el uso de los bloques reutilizables al siguiente nivel. No me olvido de los que estáis ya suscritos, si estás escuchando esto y estás suscrito, contáctame en este margen de tiempo también y te envío acceso al vídeo. Los que os apuntéis, escribidme, ¿Vale? Me contactáis y me dices, Gonzalo, me acabo de apuntar, he escuchado el episodio de los bloques reutilizables y yo os envío el vídeo, ya digo, exclusivo que es, aparte de los contenidos que hay, para que lo podáis ver. Recordad que os podéis suscribir desde cualquier página de gonzalonabarro es y además así aprovecháis y veis a todo lo que tenéis acceso. Nada más por este episodio, muchísimas gracias como siempre por estar ahí, nos seguimos escuchando. Adiós.