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.
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.
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.
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.
Marie Martín
Editor-in-chief
Elizabeth Linden
Style Editor
Janet Smith
Fashion Editor
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.
Ruth Raventós
CEO
Antonio Villegas
Chief Technology Officer
David Aguilera
Chief Product & Quality Officer
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…
⭐️⭐️⭐️⭐️⭐️
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
⭐️⭐️⭐️⭐️⭐️
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
⭐️⭐️⭐️⭐️⭐️
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.
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.
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.
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.
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.
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.
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