Crea patrones de bloques WordPress con diferentes niveles de edición

Uno de los elementos más interesantes que nos ha traído el editor de bloques de WordPress son los patrones de bloques. Hace un tiempo hablamos en Silo sobre que la diferencia entre los patrones de bloques y los bloques reutilizables, ya que existen muchas dudas sobre cuando usar unos u otros. Pero en esta ocasión nos vamos a centrar en los patrones y como diseñadores, podemos crear patrones diferentes según el poder de edición que queramos darle al usuario.

Y es que es bastante habitual que, al construir un patrón, ya sea para un tema que hayamos hecho y forme parte de su catálogo, o que hayamos diseñado especialmente para un proyecto, nos encontremos que el usuario modifique sin querer el patrón, o no sepa muy bien donde tiene que entrar para agregar su contenido. Esto último es muy interesante, ya que para una persona que no esté habituada a la interfaz del editor de WordPress, pueden apabullarle ver tantas opciones disponibles que, en realidad, nunca va a utilizar. Por suerte, también podemos hacer patrones especialmente dirigidas a estas personas.

En fin, no tardemos más y empecemos por el principio, que no es más que crear un patrón de bloques en WordPress para, a partir de ahí, que opciones tenemos según el nivel de edición final que queramos que tenga.

Construyendo nuestro patrón WordPress

Crear un patrón de bloques en WordPress es tan sencillo como entrar en el editor, montar nuestro diseño y meter todos los bloques dentro del un bloque grupo. Este es el que hemos hecho nosotros, un diseño sencillo a dos columnas, con una imagen, encabezado, texto y un botón:

diseño previo de patrón creado en el editor de wordpress, con vista de lista abierta para ver todos los bloques que la componen

Una vez lo tengamos, solo tenemos que copiarlo y pegarlo en un archivo php (asignándole un nombre para que sea localizable) en la carpeta patterns de nuestro tema WordPress que tengamos activo.

menú emergente del bloque grupo donde se anidan el resto de grupos, con la opción "copiar el bloque" resaltada

A partir de este momento, ya lo tendremos en el listado de Patrones del editor. Si no os aparece, es recomendable usar el buscador para encontrarlo, de ahí la importancia de darle un nombre al patrón lo suficientemente reconocible. O también podemos subirlo al repositorio de patrones WordPress, para que esté disponible de forma pública para que cualquier persona pueda copiarlo y añadirlo a su proyecto.

Niveles de edición de nuestro patrón

Por simplificar, vamos a designar tres niveles en los que podemos restringir la edición de nuestro patrón por parte de los usuarios. Cuando hablamos de edición, nos referimos a que puedan cambiar de posición, eliminar o añadir cualquier bloque al patrón, además de modificar el contenido del mismo, como pueda ser textos o imágenes. Empezaremos de máximo nivel de edición hasta terminar con el más restrictivo.

1. Patrón con edición libre

Este es el patrón por defecto que vamos a obtener si solo copiamos y pegamos el código tal cual. Aquí, el usuario tiene vía libre, una vez inserte el patrón en el editor, de hacer cualquier cambio en él mismo. Tiene disponible de forma completa tanto la organización de todos los bloques que vemos en la vista de lista, como los ajustes de todos los bloques.

patrón de bloques insertado en el editor de wordpress

Esto tiene una parte positiva, y es que le damos total libertad para cambiar lo que quiera, desde un texto hasta la maquetación completa del bloque. Pero esto mismo puede ser negativo, ya que si el usuario no está acostumbrado a la interfaz del editor de WordPress, o no sabe donde está la opción concreta que quiere modificar, puede tocar más de la cuenta y desajustar el diseño inicial del patrón sin querer.

¿En que situación es mejor usar el patrón libre?

Cuando queramos que nuestro patrón sea simplemente una base con la que el usuario pueda jugar a su gusto hasta encontrar un diseño que se ajuste a su proyecto. Como los cambios en los patrones no son destructivos (siempre se puede volver a insertar el patrón con el diseño por defecto), no hay nada que temer. Así que si sabemos que el usuario final tiene ciertos conocimientos de WordPress y se maneja con el editor, podemos crear patrones de esta forma sin preocupaciones.

2. Patrón con bloqueos

Hace unos meses se introdujo en una actualización de WordPress los bloqueos de bloques. Esto nos permite crear dos restricciones básicas a un bloque: poder moverlo de posición y eliminarlo. Además, podemos decir que dicho bloque también se aplique a los bloques anidados al bloque que tengamos seleccionado.

menú emergente de bloqueo de bloques en wordpress

Por supuesto, estos bloqueos también podemos asignárselos a los bloques que componen nuestro patrón. Eso si, no olvidemos que primero hay que aplicar los bloqueos, y luego copiar y pegar el código. Saber si un patrón tiene bloques bloqueados, es tan sencillo con irse la vista de lista y ver que bloques tienen el icono de un candado.

patrón de bloque en wordpress, con vista de lista abierta donde se ven los bloques con algún tipo de bloque, que llevan un icono de candado

A pesar de esto, es relativamente sencillo quitar los bloqueos de un patrón. Solo hay que hacer clic derecho sobre el bloque, y seleccionar Desbloquear. En la ventana emergente que nos aparece, podemos elegir que restricciones queremos quitar, y así se quedará hasta que volvamos a bloquear, si queremos.

¿En que situación es mejor usar el patrón con bloqueos?

Esta clase de restricción es ideal utilizarla cuando tengamos uno o varios bloques dentro de nuestro patrón que no queramos que puedan moverse o eliminarse, ya que son esenciales para que el diseño funcione de forma correcta. Y para que el usuario tenga que dar más pasos para hacerla, así nos ahorramos que pueda editar lo que no debe por equivocación.

3. Patrón con solo edición de contenido (contentOnly)

Con este tipo de patrón vamos un paso más allá que con los bloqueos. También vamos a restringir que se puedan eliminar o eliminar bloques del patrón, pero además, también vamos hacer que el usuario solo sea capaz de editar el contenido de bloques de de texto, imagen y/o video, y con una interfaz más limpia.

Para hacer este tipo de patrón, copiaremos el código con normalidad desde el editor, pero al crear el archivo del patrón añadiremos el código "templateLock": "contentOnly". En mi caso, voy a agregar este código dentro del bloque Grupo que engloba al resto de bloques del patrón, para aplicarlo a todo el conjunto.

trozo de código php con el inicio del archivo para crear un patrón, donde se puede observar la inclusión del código "templateLock: contentOnly"
Se puede ver como hemos añadido el código «templateLock: contentOnly» en el grupo que aloja todo el patrón de bloques

Con los otros patrones que hemos visto antes, al elegir cualquier bloque, en la barra lateral derecha nos aparecen todas las opciones del bloque, lo cual puede ser un poco abrumador para alguien que use el patrón y solo quiera cambiar un texto o una imagen. En cambio, con contentOnly, solo veremos un listado con los bloques de contenido editable.

vista general del editor con el patron de bloques contentOnly, donde podemos ver las opciones tanto de la barra lateral izquierda como derecha

Así, es mucho más sencillo para el usuario, por un lado, tener más a mano los elementos que quiere editar. Y por otra parte, le libramos de tener a la vista un montón ajustes de bloques que seguramente nunca vaya a usar, porque el diseño y la maquetación del patrón ya es la que quería. Por ejemplo, si selecciona en la barra lateral derecha el bloque Encabezado, o si selecciona ese bloque directamente en el editor, podrá modificar unicamente su contenido. Pero si hace clic en cualquier otro lugar, no podrá hacer nada.

opciones de edición de contenido del bloque encabezado perteneciente al patrón de bloques WordPress contentOnly

Bloques a los vamos a poder modificar su contenido

Eso sí, es importante saber cuales son los bloques que, al añadirlos a nuestro patrón, vamos a poder modificar su contenido al usar la opción contentOnly. Aquí tenéis la lista:

  • Encabezado
  • Párrafo
  • Lista
  • Cita
  • Verso
  • Imagen
  • Video
  • Audio

No he querido incluir el bloque Medios y texto ya que, a pesar de que se le puede editar el texto, no le podremos cambiar la imagen. Así que tiene un soporte parcial, por decirlo de alguna forma.

Pero a pesar de todo, se puede seguir modificando el patrón

Como pasaba con el patrón con bloqueos, existe una forma de poder modificar de forma completa, ya sea moviendo, eliminando o añadiendo nuevos bloques, este con solo edición de contenido. Para ellos, simplemente tenemos que seleccionar el bloque al que le hemos añadido la opción contentOnly (en mi caso es el patrón completo), y en la barra de herramientas hacer clic en Modificar.

menú del bloque grupo del patrón, con la opción Modificar resaltada

A partir de este momento, veremos en el lista de vista todos los bloques, y en los ajustes de bloque todas las opciones disponibles. Ya somos libres de editar a nuestro gusto el patrón y los bloques que lo forman. Una vez terminemos, le damos al botón Hecho con el que guardaremos los cambios, y el patrón volverá a su configuración por defecto.

¿En que situaciones es mejor usar el patrón con solo edición de contenido?

La opción contentOnly está especialmente indicada para tener una interfaz lo más limpia posible, y que nuestros usuarios/clientes puedan centrarse simplemente en editar el contenido de texto, imagen y/o video del patrón. En la barra lateral derecha solo les aparecerán los bloques susceptibles de que su contenido sea editable, y en la vista de lista no tendrán un árbol enorme con todo la estructura de bloques del patrón. En definitiva, es un patrón mucho más user friendly.

Conclusiones

Como hemos visto, no hay una forma única de crear patrones en WordPress, y que todo va a depender de como queremos que se muestren al usuario y lo que queramos que pueda modificar o no. Podemos darles plenos poderes de edición. O que haya ciertos elementos restringidos para que el diseño no se modifique con facilidad. O incluso que las partes modificables sean las justas y necesarias para cambiar solo textos e imágenes, dándole de paso una interfaz de uso en el editor más simplificada. Como diseñadores, todo queda en nuestras manos.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *