Cómo se crearon los patrones de bloques de Blogpocket Nineteen (notas relacionadas)

Jugaremos, básicamente con el bloque nativo “Columnas” y combinándolo con otros bloques nativos como, por ejemplo, el fondo, los botones, imagen, medios y texto, etc.

Empezaremos creando una página nueva denominada por ejemplo “Patrones de bloques” que no publicaremos y que nos servirá de taller para la creación de patrones de bloques.

Como ejemplo, vamos a crear el siguiente patrón de bloques:

El proceso es muy sencillo pero requiere cocinar un poquito de CSS. El código CSS se puede probar directamente en Apariencia>Personalizar>CSS Adicional. Pero mejor puedes utilizar el archivo style.css de tu theme activo.

Nosotros, para Blogpocket Nineteen, usamos Genesis DevKit como motor por lo que modificaremos el archivo /devkit/devkit-custom.css.

El patrón de bloques que queremos crear consta de una imagen de fondo, así que lo primero que haremos es insertar el bloque “Fondo”, aplicándole el ancho completo.

Después, dentro del bloque “Fondo” y en el espacio preparado para añadir texto, insertaremos el bloque “Columnas”, eligiendo la estructura de dos columnas.

En la de la izquierda, a su vez, añadiremos un texto Lore Ipsum y, debajo, insertaremos el bloque “Botones”, asegurándonos de configurar el color de fondo del botón correspondiente a nuestro brand color (en este caso #127db8).

En la columna de la derecha, escribiremos otro texto Lore Ipsum.

En este momento, veremos algo parecido a la imagen siquiente.

Eso podría valer pero vamos a aprovechar el CSS para aplicar estilo a este patrón de bloques que estamos creando. Esta es una parte interesante del proceso.

Para llegar a lo que se muestra en la Figura 1, deberíamos escribir por ejemplo el siguiente código CSS:

.tiene-color {
	background: #127db8;
	-webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
	padding-top: 30px;
	padding-left: 20px;
	padding-right: 20px;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
  } 

Las instrucciones concretas no merece la pena explicarlas ahora. Lo importante es saber que se aplica un color de fondo (el del brand color #127db8), se redondean las esquinas (border-radius) y se fijan los márgenes para que el texto quede más o menos centrado en el interior de la columna con color. Hemos creado una clase denominada “.tiene-color” que debe ir en el archivo style.css de tu theme o, como se indicó anteriormente, en nuestro caso en /devkit/devkit-custom.css.

Pero para que finalmente podamos crear el patrón de bloques tal y como se ve en el editor, falta aplicar la clase “.tiene-color” a la columna. ¿Cómo se hace eso?

Hay que abrir la columna de configuraciones generales del editor, haciendo clic en los tres puntos suspensivos verticales. En el apartado “Editor” elige la opción “Editor de código” y busca el código correspondiente a la columna de la derecha. Es muy fácil si te guías por los comentarios (ver figura 3).

Los “<!–” indican comentarios. Justo debajo del segundo “<!– wp:column –>” (la segunda columna, la de la derecha) hay un código HTML: una etiqueta div a la que se le aplica la clase “wp-block-column”. Una manera de añadir otra clase a esa etiqueta div es la siguiente:

<div class="wp-block-column tiene-color">

Y eso servirá para que la columna de la derecha se muestre con el estilo que diseñamos mediante las instrucciones CSS. El código lo puedes ver en la siguiente imagen:

Todo se reduce, entonces, a saber un poco de CSS para diseñar estilos. Por ejemplo, a continuación puedes ver la definición de la clase “.tiene-recuadro” que serviría para recuadrar columnas pero sin un fondo coloreado.

.tiene-recuadro {
	border: 2px solid #000000;
	padding-top: 30px;
	padding-left: 20px;
	padding-right: 20px;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
}

Observa que simplemente se ha cambiado la instrucción background por border.

Salva los cambios hechos en la página “Patrones de bloques”, vuelve al Editor visual y selecciona el bloque contenedor (Fondo).

Haz clic en los tres puntos suspensivos verticales, a la derecha de la botonadura de la parte superior del bloque, y elige “Añadir a bloques reutilizables” (ver Figura 5).

Dale un nombre al bloque reutilizable y guárdalo.

Si tenemos instalado el plugin Reusable Blocks Extended, vete a la sección de bloques reutilizables del Administrador de WordPress. En caso contrario, haz clic en los tres puntos suspensivos verticales de la barra de herramientas superior del editor y elige la opción “Gestionar todos los bloques reutilizables”.

En la lista de los bloques reutilizables, localiza el bloque reutilizable correspondiente al patrón de bloques que acabas de guardar (ver figura 6).

Y ahora haz clic en “Exportar como JSON”. Esto descargará un archivo en tu ordenador que vamos a abrir con un editor de código para ver lo siguiente:

Lo que nos interesa copiar al portapapeles es lo que está señalado con la flecha y que va dentro de las comillas asignado a la variable “Content”. Eso es el código de nuestro patrón de bloques con las dobles comillas escapadas, algo fundamental para que todo funcione bien. Si abres el archivo JSON no es necesario escapar las comillas pero por si lo necesitas, existe la herramienta onlinestringtools.com/escape-string.

Pero ¿dónde debe ir este código? Pues dentro del archivo functions.php del theme activo con las instrucciones para declarar el patrón de bloques. Esas instrucciones permitirán que se vea, cuando abras el insertador de bloques y accedas a la pestaña de patrones.

Vamos por partes. A continuación, el código para declarar un patrón de bloques. Eso irá en functions.php.

register_block_pattern(
	'URL',
	[
		'title'   => __( 'NOMBRE' ),
		'categories' => array( 'Blogpocket Nineteen' ), 
	        "content" => "CODIGO DEL PATRÓN DE BLOQUES",
	]
);

Sustituye CODIGO DEL PATRÓN DE BLOQUES por el código correspondiente al patrón de bloques obtenido exportando el archivo JSON (revisar figura 7).

Sustituye URL por la URL del patrón. Si la URL del theme esblogpocket-nineteen, escribe blogpocket-nineteen/fondo-con-columnas.

Sustituye NOMBRE por el nombre de la categoría en la que se mostrará el patrón dentro de la pestaña Patrones del insertador de bloques.

Solo un pequeño detalle para terminar: si vas a sacar a la luz tus patrones de bloques, sustituye la URL de las imágenes, que hayas utilizado para diseñar y crearlos, si no son visibles en Internet; por ejemplo porque estés utilizando Local como sistema de pruebas.

Salva el archivo functions.php y entra en la pestaña de patrones del insertador de bloques para comprobar que está el nuevo patrón de bloques (ver figura 8).