• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Mostrar patrones de bloques de forma contextual en un tema clásico de WordPress

Aprende en este tutorial cómo crear patrones de bloques (block patterns) con el editor de WordPress y añadirlos a un plugin o tema.

WordPress 5.9 introdujo bastantes funcionalidades nuevas, entre ellas, la opción de mostrar los patrones de bloques en el editor de forma contextual. Es decir, que el usuario se encuentre con el patrón de bloques solo cuando está usando un bloque.

En un tutorial anterior te expliqué como puedes crear tus propios patrones de forma sencilla.

En el mismo te explico como toda la parte de diseño la puedes hacer en el editor de bloques, luego copiar ese HTML y registrarlo como patrón usando la función register_block_pattern.

Ejemplo de patrón de bloques para una sección de cabecera (o hero).

En este tutorial vas a ver cómo una vez creado ese patrón de bloques puedes controlar dónde aparece sugerido en el editor de bloques.

mostrar patrón bloques contextual WordPress
Mostrar un patrón de bloques de forma contextual en el editor de bloques

Es decir, el patrón de bloques además de mostrarse en la sección de patrones de bloques se mostrará cuando el usuario inspeccione las opciones de transformación del bloque.

Vamos a ver cómo puedes conseguir esto.

Pasos para mostrar patrones de bloques de forma contextual en WordPress

1. Crea el patrón de bloques

Sigue las instrucciones del tutorial sobre cómo crear un patrón de bloques para obtener el patrón que quieras.

2. Añade una nueva propiedad al registro del patrón de bloques

En el tutorial sobre la creación de patrones de bloques se usa la función register_block_pattern y defines cuatro parámetros en su array:

  • title: el título que mostrará en la sección de «Patrones».
  • description: una descripción lo más específica posible sobre los elementos que forman el patrón.
  • categories: la categoría en la que se mostrará el patrón.
  • content: donde se añadirá el HTML del patrón.

Para añadir la opción de que se muestre de forma contextual solo tienes que añadir una nueva propiedad:

Para ver este código y los otros 1837 snippets de esta web,
identifícate o suscríbete aquí.

Así quedaría el ejemplo del tutorial anterior añadiendo la propiedad:

Para ver este código y los otros 1837 snippets de esta web,
identifícate o suscríbete aquí.

En este caso, le estás indicando que el patrón se muestre cuando el usuario revise las opciones de transformación del bloque de encabezado (core/heading).

mostrar patrón bloques contextual WordPress
Mostrar un patrón de bloques de forma contextual en el editor de bloques

Puedes añadir otros bloques donde quieras que se muestre, por ejemplo, para mostrarlo en el bloque de imagen tendrías que añadir core/image.

Nota: Los bloques que contienen bloques internos (inner blocks) por ahora no soportan los patrones contextuales. Por lo tanto, por lo que aunque en este ejemplo iría bien poder añadir también este patrón contextual al bloque de «fondo», por el momento no se puede hacer. En cuanto esta limitación se solucione actualizaré el tutorial para reflejarlo.

Conclusiones

Los patrones de bloques son un herramienta fantástica para facilitarle el diseño al usuario final y ahora ya sabes, no solo cómo crear uno, sino también mostrarlo donde sea más relevante para el usuario.

Si tienes alguna duda te leo en los comentarios. Y si quieres dejarme una sugerencia para futuros tutoriales, envíamela a través del formulario de contacto.

Todo ventajas de ser suscriptor. 😉


Editor de bloques HTML PHP WordPress

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes identificarte o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?