Cómo crear patrones de bloques sin saber programar ni una línea de código

El editor de bloques de WordPress, conocido internamente como Gutenberg, tiene el potencial de ser una herramienta para crear webs desde cero tremendamente potente.

Cada nueva actualización del editor lo acerca cada vez más a la edición completa del sitio.

Imagina poder reorganizar tu encabezado, añadir una barra lateral o combinar diferentes diseños dentro de tu pie de página sin necesidad de depender de tu tema para proporcionar múltiples opciones.

Pero esto ya lo sabías ¿no?, que para eso te lo he contado.

Patrones de bloques

Parte de esta nueva visión de WordPress incluye patrones de bloques, que son combinaciones de bloques que puedes crear y compartir para ayudar a otros a diseñar su web.

Las posibilidades son tremendas, y ya hay plugins que proporcionan estas características, así que vete preparando porque pronto lo tendrás en tu WordPress.

De hecho te vas a hartar, pronto no habrá tema sin patrones de bloques.

Y es que con la introducción de la API de patrones de bloques es realmente sencillo crear estos pre-diseños que otros pueden utilizar para crear tus webs.

Solo necesitas un par de cosas de este código:

register_pattern(
    'mi-plugin/mi-precioso-patron',
    array(
        'title'   => __( 'NOMBRE DEL PATRÓN', 'mi-plugin' ),
        'content' => "AQUÍ EL CONTENIDO DE LOS BLOQUES",
    )
);

Las propiedades mínimas para registrar un patrón son estas dos:

  1. title (obligatorio): Un título legible para el patrón.
  2. content (obligatorio): HTML del contenido del patrón.

Y lo mejor de todo es que puedes crear patrones sin saber ni una línea de código, desde el editor de WordPress.

Ahora mismo hay que tener activo el plugin Gutenberg, porque aún no se han incorporado los patrones en el núcleo de WordPress, pero si tienes un sitio de pruebas simplemente instálalo y ya puedes empezar a crear y usar patrones de bloques.

Una vez instalado y activo verás que hay una nueva pestaña en el insertador de bloques, llamada patrones.

Y ahí verás ya unos cuantos de ejemplo.

Pero vaya, que esto es lo que ya hay, ¿te animas a hacer un patrón de bloques?, verás qué fácil.

Creando un patrón de bloques desde cero

Es muy sencillo. Para empezar abre el editor de bloques y añade unos bloques a tu gusto.

Yo, por ejemplo, he elegido crear un bloque con tres columnas y le he hecho lo siguiente…

  • En cada columna hay 3 bloques:
    • Encabezado: Añadido texto de ejemplo y cambiado color de fondo del encabezado.
    • Párrafo: Añadido texto de ejemplo y capitalizada la primera letra.
    • Imagen: Alineada al centro y elegido estilo circular, para que el usuario ponga su imagen favorita.
  • El bloque de columnas lo he puesto en ancho amplio, por enredar.

Y ya está, con eso me vale. Todo son ajustes por defecto del editor de WordPress.

Ha quedado así:

El siguiente paso es cambiar al editor de código, fácil, como ves en la siguiente captura:

Ahora solo tienes que copiar el código

Y «escaparlo» con alguna herramienta como OnlineStringTools o tu editor de código favorito.

Lo que hace la herramienta – imprescindible para que funcionen los patrones de bloques – es añadir barras a una cadena de código para escapar caracteres especiales, como barras invertidas, tabulaciones, nuevas líneas, comillas simples y comillas dobles.

Lo siguiente es copiar el código ya «escapado» y pegarlo a tu función para registrar patrones de bloques.

Yo lo he hecho así:

register_pattern(
    'patrones-de-bloques-de-fernandot/mision-vision-valores-tres-columnas',
    array(
        'title'   => __( 'Misión, visión y valores a 3 columnas', 'patrones-de-bloques-de-fernandot' ),
        'content' => "<!-- wp:columns {\"align\":\"wide\"} -->\n<div class=\"wp-block-columns alignwide\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:heading {\"style\":{\"color\":{\"background\":\"#d4f2ff\"}}} -->\n<h2 class=\"has-background\" style=\"background-color:#d4f2ff\">1. Misión</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"dropCap\":true} -->\n<p class=\"has-drop-cap\">Lorem fistrum te va a hasé pupitaa a peich torpedo qué dise usteer. Papaar papaar de la pradera ese hombree tiene musho peligro papaar papaar se calle ustée diodenoo me cago en tus muelas. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"className\":\"is-style-rounded\"} -->\n<div class=\"wp-block-image is-style-rounded\"><figure class=\"aligncenter\"><img alt=\"\"/></figure></div>\n<!-- /wp:image --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:heading {\"style\":{\"color\":{\"background\":\"#ffe5e4\"}}} -->\n<h2 class=\"has-background\" style=\"background-color:#ffe5e4\">2. Visión</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"dropCap\":true} -->\n<p class=\"has-drop-cap\">Lorem fistrum te va a hasé pupitaa a peich torpedo qué dise usteer. Papaar papaar de la pradera ese hombree tiene musho peligro papaar papaar se calle ustée diodenoo me cago en tus muelas. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"className\":\"is-style-rounded\"} -->\n<div class=\"wp-block-image is-style-rounded\"><figure class=\"aligncenter\"><img alt=\"\"/></figure></div>\n<!-- /wp:image --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:heading {\"style\":{\"color\":{\"background\":\"#ffdca3\"}}} -->\n<h2 class=\"has-background\" style=\"background-color:#ffdca3\">3. Valores</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"dropCap\":true} -->\n<p class=\"has-drop-cap\">Lorem fistrum te va a hasé pupitaa a peich torpedo qué dise usteer. Papaar papaar de la pradera ese hombree tiene musho peligro papaar papaar se calle ustée diodenoo me cago en tus muelas. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"className\":\"is-style-rounded\"} -->\n<div class=\"wp-block-image is-style-rounded\"><figure class=\"aligncenter\"><img alt=\"\"/></figure></div>\n<!-- /wp:image --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->",
    )
);

Y ya casi está, ahora solo queda convertir el patrón en una función que añada el patrón al editor, o incluso en un plugin.

Así quedaría todo el código completo para convertirlo en plugin:

<?php
/**
 * Plugin Name: Patrón de bloques de misión, visión y valores a 3 columnas con imagen.
 * Description: Un plugin básico para aprender a crear patrones de bloques de Gutenberg.
 * Version: 1.0
 * Author: Fernando Tellado
 */

/**
 * Registro de estilos de bloques personalizados
 */

function fernandot_registra_patron_bloque_valores() {
    if ( function_exists( 'register_pattern' ) ) {
    /**
    * Registro del patrón de bloques
    */
register_pattern(
    'patrones-de-bloques-de-fernandot/mision-vision-valores-tres-columnas',
    array(
        'title'   => __( 'Misión, visión y valores a 3 columnas', 'patrones-de-bloques-de-fernandot' ),
        'content' => "<!-- wp:columns {\"align\":\"wide\"} -->\n<div class=\"wp-block-columns alignwide\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:heading {\"style\":{\"color\":{\"background\":\"#d4f2ff\"}}} -->\n<h2 class=\"has-background\" style=\"background-color:#d4f2ff\">1. Misión</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"dropCap\":true} -->\n<p class=\"has-drop-cap\">Lorem fistrum te va a hasé pupitaa a peich torpedo qué dise usteer. Papaar papaar de la pradera ese hombree tiene musho peligro papaar papaar se calle ustée diodenoo me cago en tus muelas. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"className\":\"is-style-rounded\"} -->\n<div class=\"wp-block-image is-style-rounded\"><figure class=\"aligncenter\"><img alt=\"\"/></figure></div>\n<!-- /wp:image --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:heading {\"style\":{\"color\":{\"background\":\"#ffe5e4\"}}} -->\n<h2 class=\"has-background\" style=\"background-color:#ffe5e4\">2. Visión</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"dropCap\":true} -->\n<p class=\"has-drop-cap\">Lorem fistrum te va a hasé pupitaa a peich torpedo qué dise usteer. Papaar papaar de la pradera ese hombree tiene musho peligro papaar papaar se calle ustée diodenoo me cago en tus muelas. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"className\":\"is-style-rounded\"} -->\n<div class=\"wp-block-image is-style-rounded\"><figure class=\"aligncenter\"><img alt=\"\"/></figure></div>\n<!-- /wp:image --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:heading {\"style\":{\"color\":{\"background\":\"#ffdca3\"}}} -->\n<h2 class=\"has-background\" style=\"background-color:#ffdca3\">3. Valores</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"dropCap\":true} -->\n<p class=\"has-drop-cap\">Lorem fistrum te va a hasé pupitaa a peich torpedo qué dise usteer. Papaar papaar de la pradera ese hombree tiene musho peligro papaar papaar se calle ustée diodenoo me cago en tus muelas. </p>\n<!-- /wp:paragraph -->\n\n<!-- wp:image {\"align\":\"center\",\"className\":\"is-style-rounded\"} -->\n<div class=\"wp-block-image is-style-rounded\"><figure class=\"aligncenter\"><img alt=\"\"/></figure></div>\n<!-- /wp:image --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->",
    )
);
add_action( 'init', 'fernandot_registra_patron_bloque_valores' );

Ahora solo quedaría comprimirlo e instalarlo como cualquier otro plugin.

La próxima vez que quieras insertar un patrón de bloques ya estará disponible.

Y cualquier usuario que tenga instalado el plugin podrá usar el patrón, todo bonito él.

¿Qué, te animas a crear tu primer patrón de bloques?

La lista de requisitos es ridícula:

  1. Un sitio WordPress de pruebas con el plugin Gutenberg instalado y activo.
  2. El código para registrar patrones (lo tienes arriba)
  3. Crear tu propio patrón y copiar el código HTML
  4. «Escapar» el HTML
  5. Crear una función para poder empezar a usar el patrón.

Y todos los pasos los hemos visto detallados en esta guía, así que…

¡Te toca!

Si quieres, puedes descargar en este enlace el plugin que he hecho con el patrón de prueba, por si te pica la curiosidad.

O, si lo prefieres, también tienes el código en este Git.

Como has podido ver, en realidad es muy sencillo crear y registrar patrones de bloques, a partir de ahí las posibilidades son infinitas, y te aseguro que vas a empezar a ver dentro de poco tiempo montones de patrones de bloques.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(8 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

3 comentarios en “Cómo crear patrones de bloques sin saber programar ni una línea de código”

  1. La explicación no ha podido ser más clara.

    Pero esos bloques serían estáticos… ¿de qué manera se puede introducir código PHP dentro del código HTML -variable content del array- para que se ejecute cuando se inserta el bloque en una página?. Por ejemplo, código PHP que consulte una base de datos y devuelve los últimos 10 post de una determinada categoría para presentarlos en la forma que uno quiera.

    Gracias de antemano.

Deja un comentario

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

 

Ir arriba Ir al contenido