Cómo Personalizar Bloques de Gutenberg en WordPress: Configuración Extra y Estilos

Este artículo surgió a raíz de la conversación que mantuve con Iván Casasempere a través de Twitter sobre esta funcionalidad de los bloques nativos de Gutenberg.

En esta ocasión vamos a añadir una nueva opción de estilo, o diseño, al bloque nativo de imágenes de Gutenberg para que el usuario pueda asignar, de una forma sencilla, un icono Play encima de la imagen.

Aquí se puede ver el resultado final de lo que vamos a hacer.

Vamos al lío…

Como crear nueva opción en el bloque de Imágenes en el editor de WordPress

Para registrar la nueva opción tenemos que crear un fichero JavaScript en nuestro tema, y que lo cargue solo en la parte de administración debido a que en la parte visible de la web no hace falta, y no queremos cargar código innecesario.

Crearemos, por ejemplo, el fichero «editor.js» para identificarlo fácilmente y añadiremos el siguiente código en JavaScript.

wp.domReady( () => {
	wp.blocks.registerBlockStyle(
		'core/image',
		[
			{
				name: 'js-video',
				label: 'Play video'
			}
		]
	);
}

La función de este código es registrar un nuevo estilo al bloque de imágenes de Gutenberg ( core/image ) en el editor de WordPress. El nuevo estilo que le asignaremos a la nueva opción del editor se llama «js-video», y el nombre que mostrará será «Play video».

Cuando la página esté completamente cargada con «wp.domReady» ejecutamos el código que contiene dentro, siendo «wp.blocks.registerBlockStyle» la función que registra el bloque.

Personalizar con CSS el bloque de imágenes de Gutenberg

Cuando el usuario seleccione esa configuración extra que hemos añadido al bloque imagen, se añadirá al estilo de bloque que viene por defecto «wp-block-image». El estilo que hemos creado «js-video», le añade el prefijo «is-style-», siendo el resultado un nuevo estilo llamad «is-style-js-video». De esta manera podremos darle el estilo que necesitemos en la parte web.

Por ejemplo, en este caso le he dado el estilo que puedes ver en el siguiente código:

.is-style-js-video{
	position: relative;
    display: block;
    cursor:pointer;
}

.is-style-js-video::before{
	content: "";
    position: absolute;
    inset: 0;
    z-index:1;
    background: radial-gradient(ellipse at center, #e9e9e9 40%,#000000 100%);
    opacity: 0;
    transition: opacity 0.5s ease-in-out 0s;
}

.is-style-js-video:hover::before{
	opacity: .2;
}

.is-style-js-video::after{
	content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNTIiIGhlaWdodD0iMzUyIiBmaWxsPSJub25lIj48Y2lyY2xlIGN4PSIxNzYiIGN5PSIxNzYiIHI9IjE3NiIgZmlsbD0iI0VDRUFFQSIvPjxwYXRoIGZpbGw9IiM3Njk2QzkiIGQ9Im0yNDguNzA5IDE3Ni4zNDItMTA5LjMyIDYyLjQ2NS41NjMtMTI1LjkwNiAxMDguNzU3IDYzLjQ0MVoiLz48L3N2Zz4=");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100px;
    opacity: 0.8;
    transition: opacity 0.3s ease-in-out 0s , transform 0.3s ease-in-out 0s;; 
}

.is-style-js-video:hover::after{
	opacity: 1;
    transform: scale(1.1);
}

Lo que conseguimos con el estilo que le hemos aplicado al Block image con el CSS anterior sería con el pseudoelemento «before» ponerle una capa encima en la posición 1 con un fondo degradado radial negro con una opacidad de 0. Al situarte encima de la imagen pasamos la opacidad a 0.2, que sería un 20% de ese degradado.

Con el pseudoelemento «after» ponemos encima de la imagen otra capa en la posición 2. Cuanto mayor sea el número, más encima está la capa.

Si el SVG no tiene mucho texto, prefiero añadirlo con «data:image» al CSS para que no se detenga la carga del fichero CSS, para traerse el archivo SVG, de esta forma optimizamos la carga de WordPress y mejoramos su velocidad.

Os dejo una url donde puedes convertir un SVG a Base-64 encode.

Para terminar…

La personalización que hemos añadido al bloque de imágenes se puede realizar a otros bloques de Gutenberg. Aquí os dejo también otro artículo de como crear una nueva opción a una lista de Gutenberg.

Espero que os resulte útil y os animéis a crear vuestros propios estilos según las necesidades del proyecto.