Conceptos básicos del constructor: exploración de patrones de bloques

La última versión de WordPress llegará a fin de mes el 25 de enero. Tal vez para cuando estés leyendo esto, la versión 5.9 ya se haya lanzado al mundo. No podría estar más emocionado. Hay innumerables mejoras y nuevas funciones, muchas de las cuales cubriremos en futuros artículos, pero el tema de hoy son los "patrones" de bloques.

Si bien no son nuevos en WordPress, los patrones están recibiendo mucha atención debido a la funcionalidad habilitada por la versión 5.9, en particular, los temas basados ​​en bloques. Los patrones se están convirtiendo rápidamente en un componente fundamental de WordPress y parecen estar preparados para remodelar la forma en que diseñamos y creamos sitios web. Entonces, ¿qué mejor momento para explorar qué son realmente los patrones de bloques y cómo puedes usarlos?

Los basicos

Antes de sumergirnos en los patrones de bloques, comencemos con lo básico y establezcamos algo de terminología. WordPress ha cambiado bastante en los últimos años. Es bueno asegurarse de que todos estamos en la misma página.

Cuadra

Un bloque es la “unidad” fundamental de contenido en WordPress. Desde un párrafo de texto hasta una galería de imágenes, un bloque puede tomar casi cualquier forma. Me gusta imaginar una sola pieza de LEGO . Si bien cada bloque puede verse diferente o cumplir una función única, todos encajan muy bien juntos creando el contenido de una página web.

Patrón

Un patrón de bloque es simplemente una colección predefinida de bloques que forma un diseño específico. Un patrón puede ser un solo bloque o estar compuesto por varios. Como veremos más adelante, los patrones hacen que la creación de diseños de página complejos sea fácil y divertida.

Editor

El Editor es la interfaz de usuario que usamos para crear páginas y publicaciones a partir de bloques. Desde su introducción en WordPress 5.0 en 2018, el Editor ha recibido muchos nombres. Estos incluyen Gutenberg, Gutenberg Editor, Block Editor y otros. A los efectos de este artículo, simplemente utilizaremos el término "Editor".

insertador

Dentro del Editor, el Insertador se usa para agregar bloques y patrones a la página. Puede acceder al Insertador haciendo clic en el signo azul (+) en la esquina superior izquierda del Editor.

La siguiente captura de pantalla ilustra nuestros términos definidos.

¿Por qué patrones de bloques?

El Editor nos permite crear prácticamente cualquier diseño a partir de bloques, ya sea una simple publicación de blog o una página de destino elaborada. Usemos este mismo artículo como ejemplo. Lo que estás leyendo ahora mismo es un bloque de párrafo. El encabezado de arriba es un bloque de encabezado y la captura de pantalla es solo un bloque de imagen. Agregar estos elementos de contenido a la página fue fácil. Abrí el insertador, encontré el bloque apropiado e hice clic para insertar.

Sugerencia rápida: ¿Sabía que los bloques también se pueden insertar con el comando de barra inclinada? Comience un nuevo párrafo con la tecla "/" y aparecerá una lista de bloques disponibles. Escribir letras adicionales ajustará los resultados de la búsqueda. ¡Darle una oportunidad!

¿Qué tal algo un poco más complicado? Considere la siguiente tabla de precios, un diseño comúnmente utilizado para exhibir productos o servicios en un sitio web.

Mire de cerca y es posible que pueda reconocer los bloques individuales que se usaron para crear este diseño. La base es un bloque de Columnas con tres columnas igualmente espaciadas. Dentro de cada bloque de columna hay un bloque de separador, encabezado, párrafo, botones y espaciador. ¿Cuántos pudiste detectar?

De hecho, esta tabla de precios se compone de 25 bloques individuales. Independientemente de su nivel de habilidad con WordPress, replicar este diseño desde cero sería tedioso y un poco desafiante.

Ahora imagina si este grupo de 25 bloques ya estuviera configurado para ti. Con un solo clic, puede insertar la tabla de precios completa y modificarla para que se adapte a sus necesidades individuales. Aún mejor, ¿qué pasaría si tuviera una gran colección de diseños a su alcance, cada uno de los cuales coincide con la estética de su tema? Piense en diseños creativos de imágenes y texto, llamadas a la acción, encabezados, pies de página e incluso diseños de página completa. Tener este tipo de "contenido inicial" ahorraría mucho tiempo e incluso haría que el Editor fuera más accesible para los nuevos usuarios de WordPress.

Aquí es donde entran los patrones de bloques. La tabla de precios de arriba es en realidad un patrón que se incluye en el próximo tema Twenty Twenty-Two, que se lanzará junto con WordPress 5.9.

Espero que este pequeño ejercicio haya ilustrado por qué estoy tan entusiasmado con el potencial de los patrones de bloques, pero ¿cómo los usamos realmente?

Cómo usar patrones

Al igual que los bloques, los patrones se pueden agregar a una página usando el insertador. Con el insertador abierto, navegue a la pestaña "Patrones" que revela todos los patrones disponibles segmentados por categorías. Seleccione el diseño adecuado para usted y haga clic para insertar. Luego puede editar los bloques individuales que componen el patrón, como lo haría con cualquier otro bloque. No hay límite para el número de patrones que puede insertar. Mezcla y combina para crear diseños de página únicos.

Si bien el insertador brinda fácil acceso a los patrones de bloques, notará que la vista previa de cada patrón es bastante pequeña y todos están apilados en una sola columna. Puede ser difícil visualizar y comparar diseños, lo que dificulta elegir el correcto.

Para solucionar este problema, WordPress 5.9 incluye Pattern Explorer. Se puede acceder a esta nueva y emocionante función haciendo clic en el botón "Explorar" junto al menú desplegable de categorías en la pestaña "Patrones".

El Explorador abre una ventana modal que brinda una experiencia de navegación mejorada con los patrones que se muestran en una cuadrícula. También se pueden buscar o filtrar fácilmente por categoría.

La captura de pantalla anterior es la primera iteración del Explorador de patrones. Se espera que las futuras versiones de WordPress amplíen la funcionalidad del Explorador. Los experimentos actuales agregan vistas previas para dispositivos móviles/tabletas y la opción de demostrar patrones individualmente en lugar del diseño de cuadrícula. Si bien no hay nada confirmado, esté atento a las mejoras adicionales en WordPress 6.0 hacia mediados de 2022.

Con toda esta discusión sobre patrones, es posible que se pregunte, ¿de dónde vienen realmente?

Dónde encontrarlos

Los patrones se registran de una de tres maneras, ya sea a través de su tema actual, un complemento de terceros o el mismo WordPress a través del Directorio de patrones. Exploremos cada método.

Temática

Es probable que su tema sea la forma más directa en que los patrones estén disponibles en su sitio web. Como vimos en la tabla de precios anterior, muchos temas basados ​​en bloques incluyen sus propias colecciones de patrones a medida. Esta es solo otra forma en que los temas se diferencian y un conjunto sólido de opciones de diseño será un gran beneficio para los usuarios. En el momento de escribir este artículo, ¡el tema Twenty Twenty-Two se enviará con más de 60!

Directorio de patrones (WordPress)

A partir del lanzamiento de WordPress 5.9, WordPress proporcionará sus propios patrones a través del Directorio de patrones.

El Directorio de patrones es un repositorio de patrones impulsado por la comunidad, muy parecido a los repositorios de plugins y temas de WordPress, y estará abierto para envíos públicos en la versión 5.9. Todos los patrones enviados y aprobados estarán disponibles para que los explore e inserte directamente desde Pattern Explorer. Esto significa que los usuarios de WordPress tendrán acceso a cientos, si no miles, de patrones de bloques.

Sugerencia rápida: algunos temas pueden deshabilitar los patrones incluidos por WordPress desde el Directorio de patrones. Esto se hace a menudo cuando los desarrolladores de temas incluyen sus propias colecciones de patrones y desean brindar una experiencia de usuario más cuidada.

Complementos de terceros

Finalmente tenemos complementos. Dado que los patrones existen desde hace varios años, muchos complementos de terceros, como Genesis Blocks y Redux, han creado extensas bibliotecas de patrones. A menudo, estas bibliotecas no están directamente integradas con funciones como Pattern Explorer y cuentan con bloques personalizados que no se encuentran en el núcleo de WordPress. También tienden a usar sus propios métodos para insertar patrones, pero con el tiempo espero que muchos comiencen a adaptarse al nuevo enfoque estandarizado de WordPress.

Si está buscando bloques y diseños de nicho mientras el Directorio de patrones continúa madurando, o no está utilizando un tema con sus propios patrones, definitivamente recomiendo explorar lo que los complementos de terceros tienen para ofrecer.

El futuro de los patrones

WordPress 5.9 traerá muchas mejoras para bloquear patrones. Como hemos discutido, Pattern Explorer facilitará la elección del diseño adecuado para su sitio web. El Directorio de patrones le dará acceso a una amplia colección de patrones creados por la comunidad que se integrarán a la perfección en su tema.

Si bien siempre podrá crear diseños únicos a partir de bloques individuales, creo que la mayoría de nosotros se dirigirá directamente al Explorador de patrones. Elegiremos un diseño, ya sea uno provisto por nuestro tema o del Directorio, y luego modificaremos según sea necesario. Sé que lo haré.

Además, podemos esperar que los nuevos temas basados ​​en bloques sean juzgados por la extensión de su colección de patrones de bloques incorporados. Los temas con más de cien patrones, todos claramente categorizados y que cubren una amplia gama de casos de uso, probablemente se convertirán en la norma. Si bien la estética de un tema es importante, es fundamental proporcionar a los usuarios las herramientas que necesitan para crear hermosas páginas web sin esfuerzo.

Los patrones son el futuro de WordPress, y el futuro es brillante.

Terminando

En este artículo, revisamos qué son los patrones de bloque, cómo puede usarlos y por qué cambiarán fundamentalmente la forma en que construimos sitios web de WordPress. ¡En el próximo artículo de Conceptos básicos del constructor, profundizaremos un poco más y le enseñaremos cómo crear sus propios patrones!

Entonces, ¿qué piensas de los patrones? ¿Los estás usando en tu sitio web? ¿Tiene alguna pregunta que no haya sido cubierta en este artículo? Háganos saber en los comentarios.