Foto de un escritorio con un portátil y una libreta

A finales del año pasado escribí una guía completa sobre qué eran los patrones de WordPress, para qué servían, y cómo crearlos y utilizarlos en el editor de bloques de WordPress.En poco más de medio año, gracias al trabajo que hay detrás de toda la comunidad de WordPress, ha habido grandes avances en el desarrollo de patrones de bloques. Vemos como tras la publicación de la versión WordPress 5.8, la disponibilidad y uso de los mismos está creciendo y normalizándose rápidamente. Y por este motivo, creo que es interesante estar al día sobre el Directorio de patrones de WordPress, ya que nos afectará en la forma en que vayamos a rediseñar nuestras páginas y temas en el futuro.

Como ya habíamos comentado anteriormente un patrón de bloques es un conjunto de secciones o fragmentos predefinidos formados por un grupo de bloques que puedes utilizar en la creación de páginas y entradas. Estos diseños pueden ser algo tan simple como una sección en la que se muestran dos botones o un apartado de precios con diseños llamativos y complejos.

Insertar y editar patrones de bloques

Insertar un patrón de bloques desde el editor de bloques es igual de sencillo que añadir cualquier bloque. Tras hacer clic en el icono + que tienes en la esquina superior izquierda del editor, te aparece una ventana con la que puedes añadir bloques, patrones u otros elementos reutilizables.

Inserción de un patrón de bloques en el editor de WordPress
Búsqueda de un patrón de bloques en el editor de WordPress.

En la pestaña Patrones, encontrarás un desplegable en el que puedes seleccionar por categoría los patrones a buscar. Algunos de los patrones que encontrarás vienen ya por defecto con WordPress, otros son específicos del tema que tengas instalado y también puedes encontrar una gran cantidad de plugins que te añadirán todo un conjunto de patrones disponibles para seleccionar.

Una vez seleccionado cualquier patrón, el conjunto de bloques que lo forman se añade automáticamente en tu entrada o página de forma que ya los tienes disponibles para editar como cualquier otro conjunto de bloques que hubieras añadido de forma manual.

Edición de uno de los bloques que forman un patrón
Edición de uno de los bloques que forman un patrón.

Copiar y pegar desde el directorio de patrones de WordPress

A finales de abril del 2021, WordPress publicó el Directorio de patrones en WordPress.org. Curiosamente, en la web en inglés aunque el directorio ya está creado, todavía no tienen disponible esta página a fecha de hoy (23 de agosto del 2021) desde el menú. En cambio, tal y como comentó Fernando Tellado, desde julio ya tienes disponible en el menú la opción de acceder al directorio de patrones en la web en castellano.

Aunque a simple vista este directorio puede parecer igual al directorio de temas o plugins, tiene la funcionalidad para añadir cualquier patrón de forma muy fácil a cualquier entrada o página.

La búsqueda de patrones de bloques en el Directorio de patrones de WordPress.org es muy parecida a la que tienes disponible en tu escritorio de WordPress. Puedes buscar por palabra clave o también dispones de un conjunto de categorías para reducir la búsqueda. Adicionalmente, si estás logueado en WordPress.org, puedes marcar cualquier patrón como favorito.

Al hacer doble clic en el patrón, te lo muestra en detalle y puedes seleccionar entre distintas dimensiones de pantalla para ver su aspecto en cada uno de ellas.

Patrón del directorio de WordPress Team social cards
Patrón del directorio de WordPress Team social cards.

Como puedes ver en la imagen anterior, tienes un botón con el que puedes copiar el patrón y tras hacer pegar en cualquier página o entrada, ya tienes todo el conjunto de bloques para que luego realices las modificaciones necesarias para que se adapten a tu web como más te guste.

Con reemplazar las fotos, textos y enlaces, rápidamente construyes una sección de bloques que se ajusta perfectamente a lo que necesitas en una página.

Fàcil, ¿verdad?

Añadir patrones al directorio de patrones de WordPress

Aunque todavía se está trabajando en cómo debería ser el entorno definitivo de creación y envío de patrones al Directorio de patrones de WordPress, ya está abierta la convocatoria para que puedas subir tus propios patrones para que sean publicados en el directorio. Veamos cómo lo hacemos con un sencillo ejemplo.

Primero debes crear tu propio patrón. Éste lo puedes crear directamente en el editor de bloques, como puede ser el caso del patrón de testimonios que acabo de crear a continuación a partir del que tenemos en nuestra página principal. Recuerda que si incluyes imágenes, éstas deben tener una licencia gratuita para uso comercial.

What Our Customers Say About Us

Our customers love us because…

Imagen de un perfil de mujer

⭐️⭐️⭐️⭐️⭐️
WOW This really works
By far this plugin is the best tool that we have used. All of our clients are delighted working with this plugin. Easy to use and nice UI.

Name Surname – Position

Imagen de un perfil de mujer

⭐️⭐️⭐️⭐️⭐️
WOW This really works
By far this plugin is the best tool that we have used. All of our clients are delighted working with this plugin. Easy to use and nice UI.

Name Surname – Position

Imagen de un perfil de mujer

⭐️⭐️⭐️⭐️⭐️
WOW This really works
By far this plugin is the best tool that we have used. All of our clients are delighted working with this plugin. Easy to use and nice UI.

Name Surname – Position

Luego necesitas tener una cuenta deGithub y rellenar un formulario predefinido en el que debes incluir:

  • Una descripción del patrón,
  • Un título,
  • Una categoría de las que hay disponibles en el directorio,
  • Una captura de pantalla del patrón,
  • Créditos de las imágenes que hayas incluido, y
  • Código del bloque. Para ello sólo debes posicionarte en el grupo que forma el patrón, hacer clic en el botón con el icono de los tres puntos y darle a Copiar. Así ya puedes pegar el código directamente en Github.
Enviando un nuevo patrón al directorio de patrones de WordPress
Editando el envío de un nuevo patrón al directorio de patrones de WordPress.

Y ya está. Puedes ir a la pestaña de Preview para ver cómo ha quedado y finalmente hacer clic en el botón Submit new issue.

Vista del patrón enviado al directorio de patrones de WordPress
Vista del patrón enviado al directorio de patrones de WordPress.

Ahora, sólo queda esperar a que alguién se lo revise para que esté disponible en el directorio de patrones de WordPress.

Nelio A/B Testing

Pruebas A/B nativas en WordPress

Usa tu editor de páginas favorito en WordPress para crear variaciones y lanza pruebas A/B con solo un par de clics. No se necesita saber nada de programación para que funcione.

Novedades sobre el directorio

Como ya te he comentado antes, el proceso para el envío de patrones todavía está en fase de desarrollo. Se está trabajando para que no sea necesario realizar el envío desde GitHub y sólo necesites estar logueado en WordPress.org.

La idea en la que se está trabajando es que desde https://wordpress.org/patterns/new-pattern/ (en estos momentos la página está en blanco), veas una página parecida a la siguiente imagen en la que, una vez logueado en WordPress.org, tendrás un botón de Crear patrón.

Propuesta de página de creación de un nuevo patrón
Propuesta de página de creación de un nuevo patrón (fuente: Block Pattern Directory).

Para crear un patrón, podrás utilizar una instancia alojada en WordPress del editor de bloques. Este editor funcionará (en su mayor parte) como el editor de bloques normal, pero con algunos ajustes. El primer cambio es que tendrás una versión personalizada del popup de bienvenida del editor centrada en la creación y envío de patrones.

Mockup del popup de bienvenida al editor de patrones
Mockup del popup de bienvenida al editor de patrones (fuente: WordPress.org Patterns Directory.

Por otro lado, la barra lateral de edición de un patrón también incluirá información sobre este mismo, como el título, descripción y categorías.

Mockup de la barra lateral del editor de patrones
Mockup de la barra lateral del editor de patrones (fuente: WordPress.org Patterns Directory).

Finalmente, tendrás la opción de hacer el envío del patrón para que sea revisado y puedas compartirlo con el resto del mundo.

Mockup del envío de un patrón para revisar  y publicación en el directorio de patrones
Mockup del envío de un patrón para revisar y publicación en el directorio de patrones(fuente: WordPress.org Patterns Directory).

Resumiendo

Los patrones de bloques de WordPress seguramente acabarán siendo los elementos más utilizados para el diseño de páginas y entradas. Pasará a normalizarse, de la misma forma que actualmente buscas plugins y temas en el directorio, la búsqueda de patrones en el directorio. Son lo suficientemente útiles para añadir secciones que tienen todo el sentido como una unidad y que permiten construir páginas de forma mucho más rápida que si has de añadir cada uno de los bloques que forman dicha sección uno a uno.

Personalmente, ahora cuando miro los patrones disponibles que hay en el directorio todavía me cuesta encontrar los que directamente utilizaría en mi web, pero sé que esto cambie es cuestión de días. Cuando grandes diseñadores empiecen a añadir sus propuestas, tendremos una gran explosión de diseños a nuestro alcance que nos permitirán actualizar nuestras páginas de forma mucho más rápida.

Foto de Nick Morrison en Unsplash

Deja una respuesta

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

He leído y acepto la política de privacidad de Nelio Software

Tus datos personales se almacenarán en SiteGround y serán usados por Nelio Software con el único objetivo de publicar tu comentario aquí. Con el envío de este comentario, nos das el consentimiento expreso para ello. Escríbenos para acceder, rectificar, limitar o eliminar tus datos personales.