Bloques reutilizables vs Patrones de bloques en WordPress

Con la llegada de WordPress 5.9, el Full Site Editing se ha convertido en una realidad totalmente palpable en el CMS. Poder crear nuestras propias plantillas y, por extensión, prácticamente poder crear un tema completo desde el editor, es ya posible. Todo lo que se ha ido construyendo estos años con el nuevo editor de bloques hace que esto sea posible. Pero lo que también es posible es que entre tantas nuevas opciones y herramientas, muchos tengamos dudas sobre para que aspectos concretos y situalciones sirven cada una de ellas. Siendo una de las más comunes las diferencias entre bloques reutilizables y patrones de bloques.

Hace un tiempo ya hablamos sobre los bloques reutilizables, y como nos servían para construir dentro del editor un conjunto de bloques con ciertos elementos y guardarlos, para poder utilizar dicho bloque reutilizables en cualquier entrada o página más adelante. Cuando más tarde se presentaron los patrones de bloque, a primera vista nos pareció una especie de rework de los bloques reutilizables, pero que tenían un catálogo externo que podíamos usar en nuestra web personal.

Pero claro, también podíamos hacer patrones de bloque para uso interno, que podíamos usar en cualquier entrada y página de nuestra web. Lo que sobre el papel parece un bloque reutilizable. Entonces, ¿cumplen el mismo propósito pero tienen diferente nombre?. ¿Esta WordPress duplicando funcionalidades?. No exactamente. Aunque son bastantes parecidos, estas dos herramientas están diseñadas con diferentes propósitos, que son los que vamos a intentar explicar en este artículo.

Para ello, vamos a explicar como se usan cada uno de ellos y, a partir de ahí, poder comprobar por nosotros mismos en que situaciones es mejor usar un bloque reutilizable, y en cuales patrones de bloques.

Usando bloques reutilizables

Lo primero es abrir nuestro editor (ya sea como una nueva página o entrada), y vamos a diseñar algo sencillo. En nuestro casos, un banner que para acceder a nuestra página de contacto:

Una vez creado esto, para transformarlo en un bloque reutilizable es tan fácil como ir a la barra de herramientas superior del bloque que alberga toda el diseño que hemos hecho, clicar en los tres puntos y seleccionar Añadir a bloques reutilizables, y le damos el nombre que queramos.

Con esto, ya tenemos guardado nuestro bloque reutilizable y podemos usarlo donde queremos. Así que vamos a hacerlo. Abrimos una nueva página, buscamos nuestro bloque reutilizable que acabamos de crear y lo añadimos. hasta ahora, todo correcto. Pongámonos en el caso que tenemos ya nuestro bloque reutilizable añadido, pero que queremos hacer otro con los mismos elementos, pero enlazando a la página de equipo. Es decir, queremos mantener el diseño general y sus bloques, pero modificado: cambiando un poco los textos, el color de fondo y el link. Si editamos el bloque reutilizable, y guardamos la página, veremos este aviso:

Es decir, se va a modificar el bloque reutilizable por completo, y también en el resto de entradas y páginas donde lo hayamos insertado. Esto es un problema, porque solo queríamos cambiarlo en esta. Para solucionarlo, ya vimos que existía una solución: convertir el bloque reutilizable en un bloque normal. Esto hace que nos desliguemos del bloque reutilizable original y podamos hacer cambios sin afectarlo.

Aquí es donde podemos ver el verdadero potencial de los bloques reutilizables. Cualquier cambio en el bloque reutilizable original hará que se actualicen en el resto de la web de forma automática. Con el consiguiente ahorro de tiempo. Y a la vez este es su gran problema. Si usamos WordPress junto con otras personas, existe la posibilidad de que alguien modifique sin querer un bloque reutilizable. Por lo que se va a cambiar allí sea que lo hayamos insertado.

Usando patrones de bloque

Por defecto, WordPress nos va a ofrecer diferentes patrones de bloques que tiene en su repositorio aunque, como hemos dicho antes, podemos crear los nuestros. Esto es algo que veremos en otro artículo, y que explicaremos con más detalle. Por ahora, vamos a usar uno de los patrones de bloque que tenemos ya listos para usar.

Una vez añadido en nuestro editor, podemos hacerle cualquier cambio que queramos: modificar texto, añadir o eliminar bloques, cambiar alineaciones… Y eso vamos a hacer, cambiarlo por completo para crear un bloque a dos columnas para mostrar los miembros del equipo de nuestra web:

Y aquí viene lo bueno. Aunque guardemos, si volvemos a buscar el patrón de bloque que hemos usado dentro del catálogo, estará intacto. Si lo volvemos a añadir, comprobaremos que todo sigue igual. Esto es importante en varios aspectos. Como desarrolladores y diseñadores, nos va a permitir crear diseños que el usuario final (u otros usuarios de la web) no sea capaz de modificar el original y, por lo tanto, de transformar el diseño base. Algo que, como vimos con los bloques reutilizables, siempre teníamos ese peligro.

Conclusiones – ¿Cuando es mejor usar uno u otro?

Una vez explicado en que consiste cada tipo de bloque, podemos resumirlo en:

• Bloques reutilizables – cuando queremos crear un conjunto de bloques que vamos a usar en diferentes partes de nuestra web, pero que no van a tener modificaciones entre cada una de sus copias. Y que queramos que se actualicen automáticamente cada una de las copias cuando cambiemos el bloque reutilizable original. Es muy sencillo de crear, ya que lo hacemos desde el propio editor. Eso sí, tiene un problema: es relativamente sencillo editar el bloque reutilizable original por equivocación, y que se nos cambien todas las copias que hayamos insertado en nuestra web.
• Patrones de bloques – nos va a permitir crear un diseño mediante bloques que podemos añadir y modificar sin problemas, ya que el diseño original va a permanecer siempre inmutable. Ideal cuando queremos darle al usuario final un patrón con todos sus bloques, dimensiones, espaciados, etc., para que él solo tenga que añadir su propio contenido. Para crear un patrón de bloque, necesitaremos manejar código y editar archivos en el servidor donde tengamos alojado WordPress.

Esperamos que tras este texto, hayamos aclarado un poco las dudas existentes entre los bloques reutilizables y los patrones de bloques. Y es que al principio puedan tener varias similitudes, cada una ofrecen opciones diferentes, y usar uno u otro va a depender de lo que queramos conseguir y de la forma en la que trabajemos.

Como siempre, tenéis disponibles los comentarios para hacernos llegar vuestras dudas, sugerencias y experiencias con este tipo de bloques y patrones en WordPress. Seguro que los que sois asiduos al nuevo editor, los habréis usado en más de una ocasión.