246 | Atomic Blocks y Genesis Blocks [A fondo]

En el episodio 246 de WordPress semanal te cuento en detalle cómo los plugins Genesis Blogs y atomicsblocks potencian las posibilidades del editor de bloques de WordPress, es decir, de Gutenberg. Vamos allá. Hola, hola, soy Gonzalo de gonzalonabarro es y bienvenidos a WordPress Semanal en 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 en este episodio, además de felicitarte el año, que si bien lo estoy grabando el día 23 de diciembre, lo vas a estar escuchando a partir del 30 de diciembre, así que aprovecho para felicitarte el año. Pues además de eso, te voy a hacer una especie de tutorial en formato audio de lo que puedes esperar del plugin Genesis Blocks, que como ahora te comentaré en más detalle, sustituye a Atomic Blocks. Básicamente es uno de esos plugins, hay varios, que te permiten utilizar más bloques de los que ya trae el editor de Gutenberg. Ya sabes que es el nuevo editor, ya no tan nuevo, que se utiliza de forma nativa en WordPress, así que te hablaré de ello, de esto, de por qué hay dos que son iguales, que ya más o menos te lo he dejado entrever. Veremos sus principales fortalezas, porque si bien tiene un montón de bloques que puedes añadir, hay dos, tres cosas que lo hacen especial con respecto a otros plugins que te permiten añadir más bloques al editor de Gutenberg. Y voy a mencionar en general todos agrupados por el tipo de cosas que hacen, pero voy a mencionar todos los bloques extra que te ofrece o que te ofrecen estos dos plugins. Por último, haré mención a qué hacer si estás utilizando Atomic Blocks y quieres migrar a Genesis Blogs. Bien, pero antes, como siempre, novedades. ¿Qué está pasando en Gonzalonabarro es esta semana? Pues pasan dos cosas muy, muy, muy importantes. No son tan importantes. Por un lado, tienes una renovación de uno de los vídeos de la zona código. Normalmente no renuevo los vídeos de la zona código porque no suele hacer falta, porque utilizamos código. Entonces el código, pues salvo que haya un gran cambio en la forma de hacer algo, no necesito renovar estos vídeos. Pero hay uno que además es de los más populares, que es el vídeo 22 de la zona Cód, donde os enseño a utilizar. Stylebot Style Bot es una extensión que está disponible para Google Chrome y que te permite cambiar el diseño a través de CSS pero sin utilizar CSS, con una especie de panel en el que puedes ir marcando opciones y vas cambiando el CSS de una página, pero no se guarda en la página en cuestión, lo puedes cambiar de cualquier página, ya sea de una página tuya que quieras primero hacer pruebas o de páginas de por ahí. Por ejemplo si estás leyendo el periódico y no te gusta el tipo de fuente o la quieres hacer más grande y quieres que siempre que vuelvas a esa página tengas el tamaño de fuente más grande, lo puedes hacer o lo que sea, pero nosotros lo vamos a aplicar pues a eso, a poder hacer cambios en una web, poder hacerlos de prueba sin necesidad de modificar la web en cuestión de forma real, sino que tú haces los cambios a través de esta extensión. Además, como digo, te facilita el hecho de no escribir tú mismo o tú misma el CSS y luego si quieres pues copias ese CSS y te lo llevas a tu web. Pues es un vídeo o una herramienta que suelo recomendar a los que estáis empezando o los que me pedís cambios que no se pueden hacer sin CSS y no sabéis CSS y os enseño, normalmente os mando el enlace a este vídeo y casi todos flipáis, os encanta y os empezáis a animar con el CSS, porque además lo bueno de esto es que al empezar a ver los efectos que tiene te animas a aprenderlo también. Y yo siempre digo que el CSS es algo relativamente sencillo de aprender y que te desata en cuanto a posibilidades de lo que puedes hacer en el diseño de una web. Entonces cambió la interfaz de la herramienta de StyleBot, prácticamente las opciones son las mismas, pero como cambió la interfaz quise renovar el vídeo, entonces he dejado el vídeo antiguo porque es un vídeo relativamente trabajado donde vemos muchas cosas y no quiero que se pierda todo eso que vemos. Y luego debajo he puesto el vídeo actualizado donde hago de nuevo el repaso por la herramienta, esta vez con la interfaz nueva y también vemos otras cosas y creo que va a ser mucho más enriquecedor si tenéis los dos vídeos que si tenéis solo uno. ¿Así que bueno, ya lo Sabéis, el vídeo 22 de la zona código ha sido renovado y os lo dejo en la parte de enlaces, de acuerdo? ¿Qué más novedades tenemos? Pues hay un nuevo curso a final de mes, ya sabéis que siempre saco un curso nuevo en la plataforma o una renovación de uno existente y en este caso es el curso de Genesis Blogs, que es el plugin del que vamos a hablar en este episodio. ¿Y si utilizas Atomic Blocks, el curso te sirve igual porque los dos plugins son iguales, de acuerdo? ¿Entonces es el curso de Genesis Blogs o Atomic Blocks qué vemos? Pues en detalle de principio a fin cómo utilizar todos y cada uno de los bloques extra que te ofrece este plugin, que como digo, extiende lo que puedes hacer con el editor nativo de WordPress con Gutenberg y no solo sus bloques, sino sus funcionalidades especiales de las que te voy a hablar en este episodio. Así que si aún no estás suscrito, Gonzalo Navarro es y ahí tendrás acceso a todo este contenido del que te hablado, todos los vídeos de la zona código más de 195 ya y cursos, 51 cursos si no me equivoco y encima si tienes dudas, pues me tienes a mí para el soporte. Bien, esas son las novedades. Vamos ahora con el plugin de la semana que sirve para proteger tu archivos de WordPress. Esto creo que me lo preguntó, cuando digo tus archivos me refiero a los elementos multimedia, y esto juraría que me lo preguntó alguien en un comentario en Ivoox o si no fue por el soporte, pero bueno, me preguntaron cómo se puede proteger los archivos que uno sube a WordPress, porque muchas veces subimos un PDF a lo mejor, o una imagen o lo que sea, un documento, incluso un vídeo. Ya sabemos que a la librería multimedia tenéis una clase en el curso de WordPress básico, que por otra parte es gratuito y ahí explico en detalle a fondo cómo funciona la librería multimedia de WordPress. Pero como digo, podemos subir todo tipo de archivos y claro, muchas veces no queremos que esos archivos se pueda acceder a través de una URL a ellos, a veces son archivos que damos a nuestros suscriptores o lo que sea, entonces se puede proteger el acceso directo a estos archivos, es decir, que la gente no pueda poner la URL del archivo y ya lo tiene. Y lo puedes hacer pues como digo, con un plugin. Este plugin se llama Prevent Direct Access Barrita Protect WordPress Files, es uno de estos títulos que ponen pensando en el SEO, pero bueno, el plugin se llama básicamente Prevent Direct Access os voy a dejar el enlace. De todas formas recordad que para ir a la parte de los enlaces y poder ver todo el esquema del episodio y tener toda la información a mano, si vais a Gonzalonabarro es 246, que es el número de este episodio. Pues lo veis todo, todos los enlaces y toda la información. Y es eso, es una solución bastante sencilla que permite proteger que no se puedan acceder directamente a estos archivos, que no se indexen en Google tampoco y así pues eso, si subes algún ebook, algún documento, algún vídeo o lo que sea, nadie va a poder tener acceso a él. Y por supuesto puedes ir controlando qué archivos y cuáles no. Esto está pensado para que los que sí, los que inicien sesión en la web sí puedan verlos y los que no, no puedan verlos. ¿De acuerdo? Pues nada, ahí lo tenéis en las notas del episodio. Recordad Gonzalo es 246. Fantástico. Ahora sí, vámonos con el tema central del programa. Repaso a fondo de Atomics Blogs y Genesis Blogs. En primer lugar, ¿Por qué tenemos dos plugins que hacen lo mismo? Bueno, porque el original eran Atomic Blocks y básicamente lo que hacía era añadir bloques extra para Gutenberg y luego opciones especiales para la maquetación de las que te voy a hablar ahora y que están muy chulas y es quizás lo más llamativo de este plugin o lo más útil. Y después, bueno, por todo un sistema de cambio de Estudio Press, de compra de Estudio Press, que es el creador de Genesis Framework y también unos cambios de planes. Esto Nawai Badiola habla de esto mucho y lo tiene mucho más controlado que yo, pero por toda una serie de cambios de planes, pues Genesis se marcó un camino diferente y parte de ese camino es que Atomic Blocks pase a ser Genesis Blocks, ¿De acuerdo? De momento conviven los dos y tienen las mismas opciones, pero desde Atomic Blocks cuando lo estás utilizando te animan a que migres, que después te hablaré de esto, te migres a Genesis Blogs, al otro plugin, ¿De acuerdo? Pero bueno, de momento conviven los dos y Atomic Blocks tiene bastantes más instalaciones o está activo en más webs que Genesis Blogs y a pesar de que se llame Genesis Blogs, se puede utilizar con cualquier tema, aunque no sea de Genesis. Ellos te dicen que bueno, que a lo mejor, que lo ideal es que lo uses con un tema de Genesis, sobre todo para algunos estilos y demás, pero que lo puedes utilizar con cualquier tema. Al final Atomic Blocks se podía utilizar en cualquiera y Genesis Blocks como funciona igual, pues también, pero lo básico es que uses uno o uses otro. Es un plugin que instalas y automáticamente en el editor cuando estás editando una página o una entrada y vas a añadir un bloque nuevo, tienes más bloques todavía y además tienes unas opciones especiales como la del Layout, que es precisamente de lo que te voy a hablar ahora. Una de las fortalezas de este plugin es su funcionalidad de Layout. Es una funcionalidad o también es un bloque, lo tienes como aparte, pero realmente es un bloque. ¿Y qué te permite hacer esto? Cuando tú le das a Layout, que es como digo una opción que te va a aparecer en el editor de cualquier página o cualquier entrada, pues te permite insertar secciones ya prediseñadas, páginas enteras ya prediseñadas. Y lo chulo de esto es que los propios temas de WordPress, sobre todo de Genesis, pueden aprovechar esto para añadir sus propias colecciones. Y esto está muy bien porque te permite rellenar tus páginas con contenido ya prediseñado. Y esto es un poco a lo que está enfocado la funcionalidad nativa del editor de Gutenberg que se llama Patrones, patterns en inglés. El enfoque es un poco ese, que te permite añadir secciones o diseños ya preparados. Cuando Atomic Blog sacó esto no existía todavía esta opción de Gutenberg de añadir patrones. Veremos que hay cosas que se solapan porque también hay algunos bloques que Atomic Block sacó y que o Gutenberg no tenía o en Gutenberg no estaban muy conseguidos. Entonces veremos que algunas cosillas se van solapando. Esto ocurre con casi todos los plugins que extienden las posibilidades de Gutenberg, pero de momento la funcionalidad, como digo, de Layout es bastante más potente que la de Patterns o Patrones que trae el editor nativo de Gutenberg. Bien, ahora te voy a comentar, digamos, lo voy a ir agrupando tal y como lo agrupa el propio Genesis Blogs en su página de documentación, los tipos de bloques que te vas a encontrar gracias a tener instalado o Genesis Blocks o Atomics Blocks. En primer lugar tenemos los bloques de diseño, que junto con algunos de los de contenido de los que te hablaré después, creo que son los más importantes. Primero tenemos el bloque contenedor. Este es un bloque especial que distingue mucho a Genesis Blogs y a atomicsblocks porque es un bloque que yo creo aporta mucho valor y te da control sobre los espacios estructurales de la web, es decir, estás insertando cuando insertas este bloque de contenedor, una forma de controlar la estructura, los márgenes, el padding, el espacio de la web, y lo puedes controlar a medida, por arriba, por los lados, por abajo. Y esto es muy útil sobre todo si quieres por ejemplo tener una parte del contenido más estrecho y otra parte más amplia, por ejemplo más ancha, y por supuesto dentro de este contenedor pues tú ya vas insertando otros bloques. Esto además suele ser algo muy común, la gente a lo mejor tiene un thing que viene su ancho determinado y luego en una página específica quieren que sea más ancho, por ejemplo, y claro, esto pues normalmente hay que modificar por CSS y demás, utilizar un page builder, un constructor visual que te permita escoger una plantilla de página diferente, pues bueno, como es algo que la gente necesita tanto, pues en este plugin te lo ofrecen, el bloque container en inglés y si ya está traducido al español pues sería contenedor. Otro de los bloques de diseño es el de columnas, que sí, en Gutenberg normal ya tenemos un bloque de columnas, que bueno, ha mejorado bastante, pero cuando empezó era un poquito desastre, bastante complejo de configurar, con algunos fallos incluso, sobre todo enfocado a la experiencia del usuario cuando se quiere modificar la columna y demás, aunque ha mejorado muchísimo, las columnas son mucho más robustas, el bloque nativo de columnas del editor de Gutenberg es mucho más robusto ahora, pero el de Atomic Blocks o Genesis Blocks es bastante mejor, mejora el bloque de columnas nativo, yo creo que de calle, y ofrece mucho más control sobre todo en cuanto a disposición de los elementos, en cuanto a los espacios, controlarlos mucho mejor. En cada fila de las columnas tienes control sobre el padding, es decir, sobre el espacio que ocupa internamente lo que ocupa cada columna, es muy muy muy completo y te da muchísimo control en cuanto a la disposición de los elementos. Por supuesto cuando tú insertas una columna o el bloque columnas, después vas metiendo otros bloques dentro de esas columnas. Con estas tres opciones de las que te he hablado, las opciones de layout, layout es disposición, sería como disponer elementos, pero bueno, te trae esas opciones que digo ya de secciones, páginas prediseñadas, incluso colecciones completas, que no son más que una agrupación de secciones y páginas prediseñadas. Pues con esto la funcionalidad de layout, el bloque de contenedor y el bloque de columnas seguramente sean tres de las grandes fortalezas del plugin Genesis Blocks, pero tenemos más bloques. Tenemos por ejemplo los bloques de estilo, que te da la opción de Drop Cap, que esto es en inglés, pero vaya, es lo típico que puedes poner la primera letra mayúscula así como con un efecto especial, pues bueno, te ofrece este bloque te ofrece el bloque de espacio de una barra espaciadora, pero si quieres dar espacio entre un bloque o un elemento de bloques y otro, esto ya viene con el editor nativo de Gutenberg, pero Atomic Blocks también te lo trae con alguna opción más de diseño, pero bueno, tampoco creo que sea demasiado importante este bloque. Eso, los bloques de estilo. Después tenemos los bloques de Call to Action. Tenemos por un lado el bloque de botón. Sí, con el editor de Wootemberg nativo también tienes un bloque de botón y además cada vez está mejor, pero este te da también su propio bloque de botón, seguramente con más opciones en cuanto a diseño de los bloques de Call to Action, tenemos el de Call to Action propiamente dicho, que ya te prepara un bloque con o bien una imagen de fondo o bien un color de fondo con su texto y su botón, es decir, la típica llamada a la acción, y que tú puedes ir editando todas esas partes, por supuesto, desde las opciones de edición del propio bloque. Este también es otro de los bloques importantes y que los plugins que añaden más bloques a Gutenberg suelen traerlo este bloque, el de llamada a la acción propiamente dicho. Después tienes uno para newsletter. El caso de Genesis Blogs y de Atomic Blocks sólo funcionan con MailChimp de momento, es decir, si utilizas este bloque para recoger datos de tus visitantes, por ejemplo, que se apunten a una newsletter o lo que sea, solo se conecta con mailchimp, no tienes opciones de más. No sé si las traerán, pero bueno, desde que salió Atomic Blocks yo siempre he pensado que las iban a incluir y no las incluyen. No sé si lo tienen en su hoja de ruta, la verdad, pero de momento solo funciona con MailChimp, que de hecho es el único ajuste. Cuando tú vas a los ajustes de Genesis Blocks o de Atomic Blocks, lo único que te aparece es la opción de vincular tu cuenta de mailchimp con esto, porque este plugin no tiene ajustes. Como realmente lo que hace es añadirte más bloques al editor, no hay nada que configurar. Sí, esos serían los catalogados como bloques de call to action. ¿Qué más bloques tenemos? Tenemos los bloques de contenido. Aquí sí nos aportan bloques muy chulos, sobre todo por el hecho de que ya nos viene preparado y luego nosotros solo tenemos que ir cambiando. Tenemos el típico bloque de acordeón, este está muy bien, ¿Por qué? Porque es lo típico que puedes hacer de. Pues por ejemplo en tu página de preguntas frecuentes, es este tipo de elemento de diseño que te viene el título en una especie de pestaña y que cuando haces clic en él se despliega y muestra el contenido. En este caso sería una respuesta si estamos hablando de preguntas frecuentes y puedes ir insertando todos los que quieras, puedes decidir si quieres que esté abierto, si quieres que esté cerrado, puedes controlar su diseño, es un bloque muy útil. Tienes un bloque de avisos también, se llama notice en inglés, y básicamente te trae ya la estructura como preparada para que puedas tener distintos diseños. Si quieres poner un aviso de hay un error en la web o ten cuidado con esto o lo que sea, o si quieres poner un destacado, estás haciendo un tutorial y quieres poner un destacado, pues te trae ya diseños o prediseños o te facilita esta cajita ya creada y darle los colores y demás. Yo os enseñé en la zona código a hacer esto mismo, a aprovechar, pero vamos, sin necesidad de añadir un plugin que te traiga este bloque, sino yo os enseñé a crear o a modificar un bloque normal de párrafo, personalizarlo con un poquito de CSS y también las opciones de Gutenberg y dejarlo guardado como bloque reutilizable para que así tuvieseis vuestros propios bloques de avisos sin necesidad de añadir nada extra. Pero bueno, si usáis este plugin, pues ya lo tenéis ahí. Después tenemos otro de sus bloques potentes que es el de grid. ¿Qué te permite el grid? El grid te permite mostrar en formato rejilla, por eso se llama grid, contenidos de páginas o de entradas. Esto se suele utilizar, por ejemplo, imagínate que haces la típica home, la típica página de inicio, en el que en una parte pones post más recientes, además de tener tu página de blog, que podrías también crear si quieres tu página de blog con este grid, en lugar de dejar que se muestre la página por defecto de archivo del blog, pues eso lo puedes colocar en formato rejilla. Puedes elegir cuántas columnas quieres que se muestren, si quieres que se muestre imagen destacada, si no, si va a tener un color, tal, no sé qué. Lo típico de controlar cómo se van a mostrar una relación de contenidos, ya sean como digo, páginas o entradas. Otro de los bloques potentes es el de tabla de precios, que te viene ya preconfigurada una tabla de precios, que lo típico es que lo pongas en tu página de venta o en tu página de pricing si tienes una página específica puedes elegir cuántas columnas quieres que te muestre para esta tabla de precios y vas editando, vas editando el nombre de la columna, el color de fondo, vas editando el precio que vas a mostrar, si quieres ponerlo en dólares, en euros, las características que ofrece ese plan en concreto al que la gente accedería. Y pues eso, te da ya el diseño preparado, que luego si tú lo quieres hacer desde cero puedes utilizar las columnas e ir haciéndolo a tu gusto, pero esto como digo ya te lo trae preparado y tú solo vas sustituyendo y te ahorra mucho trabajo. Después tienes el típico bloque de caja de perfil por si. Bueno, esto es lo típico por si lo quieres poner en la página de Sobre mí o lo quieres poner cuando terminas de escribir un artículo. Un bloque muy chulo que es para compartir en redes sociales, ya no necesitas un plugin extra para poner tus botones de redes sociales, aunque bueno, yo te expliqué en un vídeo de la zona Código cómo hacerlo de forma manual, pero bueno, aquí lo tienes con este bloque extra que te añade Genesis Blogs y que puedes insertar en cualquier página, en cualquier entrada y de esa manera podrán compartir ese contenido específico en las redes sociales que tú elijas. Y el último bloque que te ofrece así para añadir contenido es el bloque de testimonios, que mejora un poco el aspecto, lo que puedes mostrar, porque este es otro bloque que sí que viene ya con el editor nativo de Guttenberg, pero Genesis Blogs te lo ofrece con más opciones. Y estos son todos los bloques. Bueno, hay una versión Pro de Genesis Blogs que te trae algún bloque más, muy poquitos, un par de ellos o no muchos y luego sobre todo que te da más contenido en cuanto a los layouts que puedes añadir, ¿De acuerdo? Es un poco el enfoque que están siguiendo los de Genesis. Aquí sí que sería necesario usar Genesis porque tendrías que tener Genesis Pro, que se llama, ¿No? Y sí que va más enfocado a los que usáis Genesis, pero si no, pues. Pues no hace falta el plugin trae mucho, mucho, mucho y no es necesaria la opción de pago, y menos si no usas Genesis. Todo esto, todos estos bloques, los vemos en detalle, me paro a verlos todos en el curso que acabo de sacar de Genesis Blocks y Atomic Blocks. Y antes de irme quería comentar la migración. Si por ejemplo tú estás utilizando Atomic Blocks, lo tienes instalado y quieres pasarte a Genesis Blocks, tienen un asistente automático, no tienes que hacer realmente nada, salvo una salvedad que te comento ahora, pero tienen un sistema de migración automático, vas siguiendo los pasos y te pasa automáticamente de Atomic Blocks a Genesis Blocks. Lo que sí que tienes que tener en cuenta es que si has modificado el aspecto de algún bloque por CSS, digo, no utilizando las opciones que te traen los propios bloques, sino por CSS, la clase que se utiliza o que utilizan estos plugins a nivel interno para el propio CSS que ellos ponen, si eso lo has modificado, sí que tienes que tener en cuenta que el prefijo de esas clases, que creo que es el de Atomic Blocks, me parece que es AC, y luego al de Genesis Blocks creo que le han puesto GB, pues sería cambiar eso. Si tú lo has modificado, me refiero en tu hoja de estilos, te vas a tu hoja de estilos, buscas esas clases que has puesto y las modificas. En la mayoría de casos esto no lo vas a tener que hacer porque sería ya un poquito más avanzado y gente que se mete en modificar lo que ya viene por defecto a nivel de código. ¿De acuerdo? Si lo has hecho, no creo que tengas ningún problema en hacer esta modificación, porque no es más que cambiar un poquito el código CSS que ya habías puesto, básicamente el prefijo de esas clases y listo. Pero para la mayoría de los mortales, simplemente sigues el asistente de migración automático y lo tienes. ¿De acuerdo? Yo lo he hecho en un par de webs y no he tenido mayor problema. Hombre, haced copias de seguridad, por supuesto, por lo que pueda pasar, pero como digo, yo no he tenido mayor problema. Recordad que tenéis curso nuevo y que si aún no estáis apuntado y queréis acceder a todo este contenido premium, Gonzalo Navarro es, ya sabéis, 10 euros al mes, sin permanencia y con 15 días de garantía, por si te arrepientes o te lo piensas mejor. Nada más por este episodio, nos seguimos escuchando. Adiós.