Los patrones de bloques de WordPress son unos de los elementos más llamativos del editor de WordPress, y a poco que los conozcas se convertirán en una herramienta fenomenal con la que crear páginas web de manera eficiente y profesional.
Pero ¿qué son los patrones de bloques?, es más ¿cómo puedes utilizarlos de manera sencilla además de profesional?
¿Qué son los patrones de bloques?
Los patrones de bloques son grupos de bloques que te ofrecen una manera rápida de crear secciones y partes de una página web, como llamadas a la acción, secciones hero destacadas, columnas de selección de precios y muchísimas más funcionalidades.
Vienen a ser una especie de mini plantillas, creadas con bloques, que se agrupan de manera que sirvan como partes de un diseño mayor.
Aunque hay patrones de bloques que sirven para generar páginas completas, lo que habitualmente conocemos como plantillas desde los tiempos de Visual Composer, lo más habitual, lo que más encontrarás, son patrones de bloques de partes de lo que terminará siendo la página completa.
Podríamos resumir en que los patrones de bloques son agrupaciones de bloques que, en su conjunto, sirven para crear el diseño de una página web.
Los patrones de bloques pueden servirte de muchas maneras, pero fundamentalmente sus usos más habituales son:
- Ideas de diseño para secciones de una nueva página web, a partir de las que diseñar nuestra adaptación del patrón elegido como ejemplo.
- Estructura base por defecto para secciones habituales de páginas web, para automatizar tareas recurrentes y ahorro de tiempo.
- Diseños reutilizables de secciones o tipos de página para la web actual u otras.
¿Cómo se añaden los patrones de bloques en WordPress?
Si quieres añadir un patrón de bloques a un contenido ya existente o nuevo, solo tienes que hacer clic en el botón de + de añadir bloques, y a su lado encontrarás la sección de patrones que puedes añadir a tu página o entrada.
Estos patrones que verás por defecto los incorporan de manera nativa WordPress y el tema que tengas activo, lógicamente pudiendo variar según el tema activo.
Además de esto, cuando añades una nueva página, inicialmente lo primero que ves es un selector de patrones, para que, si lo prefieres, no empieces con una página en blanco.
Da igual desde donde o cuándo añadas un patrón de bloques, una vez insertado en tu contenido comprobarás que un patrón de bloques no es una estructura cerrada, intocable, sino que es una combinación de varios bloques, ya agrupados y combinados, a modo de ejemplo, normalmente de manera armoniosa y visualmente atractiva.
Además de los patrones de bloques por defecto que incluyen tanto WordPress como el tema activo, puedes usar el buscador del insertador de bloques del editor de WordPress para añadir otros patrones, además de los inicialmente disponibles.
Los bloques que aparecerán en los resultados de búsqueda provienen del directorio oficial de patrones de bloques de WordPress, y son totalmente libres y gratuitos para que los uses a tu antojo.
Son patrones de bloques creados por usuarios, y tú también puedes crearlos y publicarlos para que otros los disfruten, solo tienes que registrarte en WordPress.org, si aún no lo habías hecho, y acceder al editor de patrones, totalmente online. Hasta yo, que soy un torpe diseñando, tengo creados y compartidos algunos patrones de bloques, es muy fácil.
¿Cómo se crean los patrones de bloques?
No creas que es difícil, pues si sabes usar los bloques del editor de WordPress puedes crear patrones de bloques, es muy sencillo.
El proceso, resumido, es así de fácil:
- Añade los bloques de los que se vaya a componer el patrón de bloques. Te recomiendo que siempre empieces con un bloque de grupo, que viene a ser la base de diseño más adecuada para maquetar con bloques WordPress.
- Personaliza los bloques a tu gusto, pensando en su uso y diseño final.
- Selecciona los bloques que vas a agrupar en un patrón, desde la vista de esquema, que es más fácil seleccionarlos, normalmente con May+Clic.
- Agrúpalos en un patrón haciendo clic en el menú de ajustes disponible en el icono de 3 puntos Crear patrón. Lo pones un nombre, lo clasificas en alguna categoría para tener tus patrones organizados, y lo creas de modo sincronizado o no (luego vemos esto).
- Publica el patrón, con lo que quedará guardado en el insertador de bloques del editor, en la sección «Mis patrones»
Visualmente aquí tienes la secuencia…
Como vas a poder comprobar es sencillísimo, y te va a encantar, a partir de ahora vas a sacar mucho más partido al editor de bloques de WordPress, pues acabas de empezar a usar el editor de bloques de manera eficiente y profesional, creando patrones de bloques de diseño reutilizables.
Puedes crear tantos patrones de bloques como vayas a necesitar, tanto en la web actual como en otras, simplemente atiende a estos consejos:
- No crees diseños muy específicos, céntrate en que sea una estructura de diseño muy fácilmente reutilizable. Me refiero a que no pierdas tiempo en escribir textos o decisiones de aspecto demasiado elaboradas, como fondos o colores. Concéntrate en que sea un patrón de diseño muy reutilizable, que te vaya a ahorrar mucho tiempo en la parte de la elaboración de la estructura del conjunto de los bloques que agrupes como patrón.
- Organiza los patrones en categorías muy concretas, como por ejemplo: CTAs, secciones Hero, secciones de contacto, secciones de suscripción, tablas de precios, etc.
- Nombra de manera muy específica y detallada los patrones, para que te sea muy fácil buscarlos en el futuro, cuando tengas muchos.
- Exporta tus patrones, seguro que el trabajo extra que has realizado para crear esos diseños te ahorrará muchas horas en futuras webs.
Y es que sí, además puedes exportar los patrones, y es facilísimo.
Cómo exportar patrones de bloques WordPress
Cuando tengas creados patrones de bloques propios, personalizados para tus usos habituales, igual no todos, pero seguro que alguno de los patrones que has creado para la web actual puede que te ahorren horas de trabajo en futuras webs, así que acostúmbrate a exportar tus patrones de bloques a medida y guardarlos a buen recaudo, para uso posterior.
Para exportar los patrones de bloques lo primero que tienes que hacer es acceder al gestor de patrones de WordPress, y puedes hacerlo desde varios sitios:
- Enlace al gestor de patrones desde el editor de WordPress.
- Sección de patrones en el editor del sitio si el tema activo es un tema compatible con la edición completa del sitio (FSE).
- Submenú de patrones en el menú de apariencia si el tema activo es un tema clásico.
Una vez en el gestor de patrones, y aquí ya no hay diferencias, solo tienes que hacer clic en el icono de 3 puntos del patrón que quieras exportar y seleccionar la opción de exportar como JSON.
Guarda el archivo en tu ordenador, en la nube, donde quieras, para tenerlo bien identificado cuando lo necesites en un futuro.
Cómo importar patrones de bloques WordPress
Si has exportado patrones de bloques como hemos explicado antes, el día que quieras usar algún patrón de bloques para un futuro diseño web, solo tienes que ir al gestor de patrones de WordPress (repasa la sección anterior si no te acuerdas cómo acceder) y haz clic en el botón de «Añadir nuevo patrón» de la pantalla de patrones, donde encontrarás la opción de importar patrones desde archivos JSON.
Elige el archivo JSON con el patrón que quieras importar, y aparecerá disponible en el gestor de patrones y para utilizarlo en el editor.
Cómo borrar o eliminar patrones de bloques WordPress
Ya que estamos, si por algún motivo quieres borrar un patrón de bloques del sitio web actual, puedes borrar fácilmente tus patrones personalizados desde la pantalla del gestor de patrones que hemos visto antes.
Simplemente haz clic en el icono de los 3 puntitos y elige la opción de borrar.
Ahora bien, en el caso de los patrones por defecto no es posible, no existe esa opción, solo la de duplicar.
Y claro, puedes duplicar un patrón de bloques por defecto y luego borrar el duplicado, pero para eliminar los patrones de bloques por defecto de WordPress tienes que recurrir al código, a un filtro que los elimina, como ya vimos.
Tipos de patrones de bloques de WordPress
Si recuerdas un poco más arriba, cuando veíamos cómo crear un patrón de bloques, una de las opciones era si el patrón de bloques sería o no sincronizado ¿pero qué es eso de patrones sincronizados?
Vamos a ver de manera muy sencilla qué son los patrones de bloques sincronizados, no sincronizados y parcialmente sincronizados, y te va a encantar, pues tus habilidades en el diseño y maquetación con bloques WordPress va a mejorar una barbaridad una vez los comprendas y empieces a utilizarlos.
Patrones de bloques NO sincronizados
Vamos a empezar con los más básicos, con los patrones de bloques no sincronizados, pues no tienen misterio alguno.
Lo único que tienes que saber al respecto es que un patrón de bloques no sincronizado es un patrón de bloques en el que sus bloques se comportan como cualquier otro bloque independiente, así como el conjunto de los mismos, y que cualquier cambio que hagas en sus bloques solo afectará a la página o entrada en la que esté insertado, no afectando ni al diseño del patrón de bloques guardado ni a su configuración en otros contenidos en los que hayas añadido ese mismo patrón.
Da igual si es un patrón seleccionado desde la biblioteca de patrones o recién creado, cualquier cambio en un patrón de bloques que no esté sincronizado solo le afecta a si mismo.
Cómo crear un patrón de bloques no sincronizado
Lo único que tienes que tener en cuenta para crear un patrón de bloques no sincronizado es desactivar la opción de que se guarde como sincronizado, activa por defecto.
Patrones de bloques sincronizados
En versiones anteriores de WordPress los patrones sincronizados se conocían como bloques reutilizables.
Cuando sincronizas un patrón de bloques puedes realizar cambios en el mismo en un único lugar y ese cambio actualizará todas las instancias del patrón en todo tu sitio web.
Se suelen usar para contenido dinámico, que quizás quieras actualizar periódicamente. Te permite hacer modificaciones que afecten a cada página o entrada en la que hayas añadido el patrón de bloques, en toda la web. Con editar el patrón de bloques sincronizado se actualiza su contenido automáticamente en todo el sitio.
Esto es genial para cuando utilizas un mismo patrón de bloques muy específico en varias páginas, como por ejemplo un patrón de sección de contacto, algo muy típico, para que si quieres cambiar el número de teléfono, el email o cualquier otra parte del patrón, al hacer los cambios estos se apliquen a toda la web.
Cómo crear un patrón de bloques sincronizado
Al guardar un patrón de bloques por defecto siempre está activa la casilla de que sea un patrón sincronizado así que no tienes que hacer nada más que lo de siempre, ponerle un nombre y clasificarlo en categorías, dejando activa la casilla de que sea sincronizado.
¿Se puede editar un patrón de bloques sincronizado y que los cambios afecten a toda la web?
Esa es una de las mayores ventajas de los patrones de bloques sincronizados, y sí, no solo son iguales en todos los sitios donde los añadas, sino que puedes modificar patrones de bloques y que los cambios se reflejen en todas las páginas o entradas en las que hayas añadido también el mismo patrón de bloques.
Así que sí, puedes crear patrones de bloques sincronizados, pero su configuración y diseño no es inamovible, puedes modificar los patrones de bloques sincronizados siempre que lo necesites.
Para modificar un patrón de bloques sincronizado y que los cambios se apliquen sistemáticamente en todas las páginas o entradas en las que esté añadido haz clic el patrón de bloques en cualquiera de ellas, en el botón denominado «Editar original», y se abrirá el editor de patrones.
Una vez en el editor de patrones de bloques haz los cambios que consideres y guarda. Si quieres puedes volver a la página anterior, y comprobar que se han aplicado los cambios en esta, y en el resto en el que tuvieses insertado el patrón sincronizado que has modificado.
¿Se puede convertir un patrón de bloques sincronizado en patrón no sincronizado?
Si añades un patrón de bloques sincronizado a un contenido y quieres modificarlo sin que los cambios afecten al resto de contenidos en los que también se halle incorporado ese patrón de bloques sincronizado lo que tienes hacer es anular la sincronización de ese patrón de bloques en concreto, desvincularlo del patrón sincronizado, y que pase a ser una serie de bloques totalmente independientes, y que cualquier cambio no afecte a otras páginas o entradas.
Para ello, abre el menú de opciones del patrón de bloques sincronizado y haz clic en la opción de «Desvincular», el cambio es inmediato.
Patrones de bloques parcialmente sincronizados o con modificaciones
Pues sí, resulta que hay un tipo de patrones de bloques que no son ni sincronizados ni no sincronizados, y que además son mis favoritos, a pesar de que son la última incorporación en la herramienta de patrones de bloques.
Los patrones con modificaciones activas o que también podríamos llamar como patrones parcialmente sincronizados son – digamos – la perfección de los patrones de bloques, con lo mejor de ambos mundos: sincronizados y no sincronizados.
La idea es que son patrones de bloques en los que la mayoría de su contenido no se puede modificar, es fijo en todas partes, excepto aquellos bloques que decidas que admitirán modificaciones.
Para conseguir un patrón de bloques parcialmente sincronizado tienes que editar un patrón de bloques sincronizado como hemos visto antes, y ya en el editor de patrones seleccionar el bloque que queremos que sea modificable y, en la barra lateral derecha de ajustes del bloque, desplegar la sección de ajustes avanzados y hacer clic en activar las modificaciones.
A continuación le ponemos un nombre al bloque modificable, para identificarlo claramente posteriormente, y guardamos los cambios.
A partir de ahora, cuando añadas este patrón de bloques en cualquier parte, verás que ya no es un único elemento, sino que puedes ver por separado la parte modificable, el bloque o bloques disponible para modificaciones, y podrás cambiar esa parte, sin que afecte al resto de ubicaciones en las que hayas insertado ese patrón de bloques – parcialmente – sincronizado.
Lo único malo de los patrones de bloques parcialmente sincronizados o con bloques modificables es que de momento este ajuste de que acepten modificaciones no está disponible en muchos bloques, solo se ha incorporado esta funcionalidad en algunos bloques, pero esperemos que pronto cualquier bloque pueda admitir modificaciones dentro de un patrón de bloques.
Espero haberte ayudado a conocer y utilizar los patrones de bloques de WordPress, una herramienta fundamental en el diseño y maquetación web con el editor nativo de bloques de WordPress.
Usa patrones de bloques siempre que quieras reutilizar parte de tus contenidos y serás un creador web más efectivo, rápido y profesional.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
