Patrones de bloques

Crea atractivas páginas, entradas y plantillas fácilmente con los patrones de WordPress.com, diseñados por el equipo de diseño de WordPress.com para aplicar sin esfuerzo los estilos globales de tu tema. Elige entre una amplia colección de patrones y personalízalos a tu gusto; sin necesidad de código ni plugins adicionales. Piensa en estos patrones como una biblioteca de componentes para el editor de bloques.

Uso de los patrones en WordPress.com

Un patrón de WordPress es una colección de bloques organizados juntos para crear una sección diseñada con una intención determinada en una página, entrada o plantilla.

Buscar patrones en el editor de bloques

Los patrones de WordPress.com están disponibles en el editor de bloques siguiendo estas instrucciones:

1. Navega al editor de cualquier entrada, página o plantilla.
2. Haz clic en el botón «+» para abrir el insertador de bloques.
3. Haz clic en la pestaña Patrones para ver una lista de categorías de patrones.
   • Para ver todos los patrones en una vista de cuadrícula, ve hasta el final de la lista y haz clic en «Explorar todos los patrones».
4. Haz clic en el patrón deseado para insertarlo en tu entrada, página o plantilla.
5. Edita el contenido (imágenes, texto, enlaces) del patrón. Los estilos del tema establecidos en el editor del sitio se aplicarán automáticamente al patrón elegido.

Buscar patrones en la biblioteca de patrones

Para previsualizar patrones en diferentes anchos de pantalla y comprobar la adaptabilidad de los diseños, puedes usar la biblioteca de patrones de WordPress.com. La biblioteca no solo te permite explorar, buscar y previsualizar patrones en diferentes anchos de pantalla, sino que también te permite copiar y pegar patrones en el editor de bloques: 

1. Visita la biblioteca de patrones.
2. Usa la navegación por categorías para ver todos los patrones disponibles, o busca un patrón por característica o palabra clave. 
3. Una vez que encuentres un patrón que te gustaría usar, haz clic en el botón Copiar patrón.
   • Si no has iniciado sesión en tu cuenta de WordPress.com, solo podrás copiar los primeros tres patrones en cada categoría. Para cualquier otro patrón, verás un botón que dice Acceder y, al hacer clic, se te pedirá que crees una cuenta gratuita de WordPress.com o inicies sesión en una cuenta existente.
4. Navega al editor de una entrada, página o plantilla en tu sitio de WordPress.com y pega el patrón usando un atajo de teclado (comando + v en Mac o ctrl + v en Windows) o haciendo clic derecho y seleccionando Pegar.
5. Edita el contenido (imágenes, texto, enlaces) del patrón. Los estilos del tema establecidos en el editor del sitio se aplicarán automáticamente al patrón elegido.

Crear con patrones 

Los patrones que se encuentran en la biblioteca de patrones de WordPress.com no utilizan estilos personalizados locales. En su lugar, se adhieren a los estilos globales establecidos en el editor del sitio.

A la hora de crear con patrones, tenemos algunas pautas recomendadas que pueden servir de guía para los desarrolladores:

Pautas para los temas de bloques

Nuestros patrones de bloques están hechos para ser portátiles, pero tu archivo theme.json necesitará seguir algunas pautas para asegurar que nuestros patrones se vean lo mejor posible.

En concreto, asumimos que los siguientes slugs están definidos en spacing.spacingSizes:

“slug”: "20”

“slug”: "30"

“slug”: "40"

“slug”: "50"

“slug”: "60"

“slug”: "70"

“slug”: "80"

Estos son los mismos ajustes de espaciado que WordPress genera por defecto. Si faltan en tu tema, puede que algunos espacios de bloque no queden bien al pegar un patrón. Nuestros patrones pueden seguir funcionando si tu tema utiliza diferentes ajustes de espaciado, pero este es el estándar al que nos adherimos.

Pautas sobre la estructura de los patrones

Además de usar patrones de WordPress.com en tus páginas, entradas y plantillas, también puedes crear los tuyos propios. El equipo de diseño de WordPress.com ha publicado algunos consejos en el blog de developer.wordpress.org, incluyendo algunas de las siguientes pautas recomendadas a la hora de crear patrones:

• Un bloque de grupo de nivel superior que abarca todo el ancho de la página.
  • Esto facilita cambiar el color de fondo de toda una sección de la página y reordenar las secciones de una página, ya que cada patrón está contenido dentro de un bloque de grupo.
  • Estos bloques de grupo suelen tener los valores de relleno izquierdo y derecho según los ajustes de diseño de los estilos globales del sitio para que el patrón se adapte al tema. 
• Un bloque contenedor (Cuadrícula, Columnas, Fila y Pila, etc.) se anida directamente dentro del bloque de nivel superior.
  • Este bloque está configurado al valor de ancho «amplio» del tema, permitiendo que el contenido del patrón tenga un ancho máximo, según lo definido por el tema.
• Dos bloques espaciadores se colocan directamente arriba y abajo del bloque contenedor.
  • Estos bloques espaciadores te permiten seleccionar y manipular el espacio entre patrones sin tener que editar los controles de relleno relevantes del bloque.

Puedes consultar más información sobre cómo funcionan bloques específicos y cómo construir con ellos aquí.

Preguntas frecuentes

¿Cómo puedo ocultar los patrones de WordPress.com y los patrones del núcleo?

Si quieres asegurarte de que tus clientes solo usen los patrones personalizados que has creado, aquí tienes algunos consejos para desactivar los patrones de WordPress.com y otros del editor de bloques.

Próximos pasos y opiniones

¿Te interesaría aprender más sobre los temas de bloques y los patrones? El manual de temas de WordPress.org es el recurso principal para aprender sobre el desarrollo de temas de bloques y contiene muchos consejos útiles.

Asegúrate de revisar nuestras otras herramientas para desarrolladores y las funciones de la plataforma que te proporcionarán la flexibilidad y el control que necesitas para crear en WordPress.com.

Si te gustaría compartir tu opinión sobre nuestra biblioteca de patrones (o sobre cualquier otra cosa de WordPress.com), ponte en contacto con nuestro servicio de soporte aquí y cuéntanos tus ideas y sugerencias.