Curso de patrones de bloques (VI) – Crear un patrón de bloques con código CSS

Primero, crea el diseño utilizando solo bloques nativos, ajustando cada uno de ellos mediante las configuraciones permitidas o añadiendo estilo CSS mediante la inclusión de clases en el modo de edición visual. No uses, para ello ninguno de los plugins tipo Editor Plus.

Por ejemplo, añade en Apariencia > Personalizar > CSS Adicional una clase para recuadrar un texto. Una alternativa a eso es utilizar un plugin como Editor Plus pero queremos crear patrones de bloques solo con configuraciones nativas.

.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;
}

Luego, entra en el modo «Edición de código» y aplica esa clase al bloque en cuestión (ver figura 1)

El resultado en la figura 2.

Si estás construyendo un theme, el código CSS debe ir en el archivo style.css u otro archivo encolado en functions.php. Apariencia > Personalizar > CSS Adicional solo te servirá para probar.

El siguiente código se utilizó para encolar un archivo CSS personalizado dentro de functions.php

// Enqueue block editor style
function sustie_editor_styles() {
	// Editor styles.
	wp_enqueue_style( 'sustie-editor-styles', get_theme_file_uri( '/css/custom.css' ), false, '1.0', 'all' );
}

add_action( 'enqueue_block_editor_assets', 'sustie_editor_styles' );

El archivo custom.css lleva todos los estilos personalizados de los patrones de bloques.

Algo que tienes que hacer, sobre todo si vas a distribuir el theme que estás desarrollando o, incluso si vas a exportar el bloque reutilizable correspondiente, es modificar las URLs de las imágenes a nivel del código de los bloques que las incluyan. El motivo es que apuntan a una ubicación dentro de tu hosting o servidor donde estás desarrollando. Si es un entorno local, eso provocará una imagen not found; y si estás en Internet, es probable que la imagen se vea pero tendrás peticiones desde otros sitios, lo cual no es recomendable.

Entra en el modo «Edición de código», busca las URLs de todas las imágenes que se usen en el diseño y cámbialas por URLs de un sitio en el que no tengas problemas para servirlas. Por ejemplo, convendría utilizar un CDN o sitios como Cloudinary.

Cuando tengas todo el diseño finalizado, conviértelo a bloque reutilizable.

Ve a la lista de bloques reutilizables y descarga el archivo JSON.

Ábre el archivo JSON y copia el valor del parámetro “content” (lo que hay dentro de las comilllas)

Ingresa en el archivo functions.php de tu theme activo y añade las instrucciones para registrar un patrón de bloques, pegando el valor que tienes en el portapapeles como valor del parámetro “content” en la función “register_block_pattern”. Comprueba que tienes también la función para definir una categoría.

Índice curso

1. ¿Qué es un patrón de bloques y para qué sirve?
2. Ejemplo de uso de patrones de bloques: confección de un sitio web de una sola página
3. Importar y exportar diseños realizados en el editor de bloques
4. Código para registrar un patrón de bloques
5. Creación de un patrón de bloques a partir de bloques nativos, sin código CSS
6. Crear un patrón de bloques con código CSS