Cómo modificar los estilos de bloques en Gutenberg

Aprende cómo modificar, eliminar, etc. fácilmente los estilos que traen los bloques de Gutenberg, y da un estilo diferente a tus páginas.

CSS, Gutenberg, WordPress

Cada tipo de bloque, en el editor de WordPress, puede tener múltiples opciones de estilo. Algunos bloques ya tienen opciones de estilo, como botones y comillas.

En este artículo vamos a ver cómo agregar y eliminar opciones de estilo de los bloques.

Técnicamente son solo clases CSS agregadas al bloque. Al usar la IU de estilos de bloque para obtener una vista previa, y seleccionar diferentes estilos, las personas que insertan contenidos no necesitarán recordar nombres de clases específicos.

Es posible agregar estilos de bloque a cualquier tipo de bloque en Gutenberg: bloques del core de WordPress y bloques personalizados de plug-ins. Más abajo puedes ver una lista de los bloques disponibles para que puedas añadirle sus estilos personalizados.

Estilos predeterminados de los botones de Gutenberg
Estilos predeterminados de los botones de Gutenberg

Agregar una secuencia de comandos al editor

Necesitaremos crear un archivo JavaScript en el tema o plug-in y cargarlo en el editor de bloques. Puedes usar el Hook enqueue_block_editor_assets para cargar archivos en el editor de bloques. Funciona de la misma manera que se usa wp_enqueue_scripts para cargar archivos en el tema del sitio.

Creamos un archivo vacío llamado editor.js en el directorio /tu-theme/assets/js/ y luego agregamos las siguientes líneas, por ejemplo, en el archivo functions.php de tu tema.

/** 
* Gutenberg scripts and styles
 */
function bk_gutenberg_scripts() {

	wp_enqueue_script(
		'be-editor', 
		get_stylesheet_directory_uri() . '/assets/js/editor.js', 
		array( 'wp-blocks', 'wp-dom' ), 
		filemtime( get_stylesheet_directory() . '/assets/js/editor.js' ),
		true
	);
}
add_action( 'enqueue_block_editor_assets', 'bk_gutenberg_scripts' );

Agregar estilos al bloque

Por ejemplo, si queremos añadir dos estilos nuevos a los títulos en el archivo editor.js agregamos los estilos nuevos: «normal» y «mayúsculas»:

wp.domReady( () => {

	wp.blocks.registerBlockStyle( 'core/heading', [ 
		{
			name: 'default',
			label: 'Default',
			isDefault: true,
		},
		{
			name: 'upper',
			label: 'Uppercase',
		}
	]);
} );

Cuando se selecciona uno de esos estilos en el editor de bloques de Gutenberg, se añadirán en el bloque los estilos .is-style-{name}. Entonces, en la hoja de estilo, tendremos que añadirlos, por ejemplo: h2 { } para el estilo por defecto y h2.is-style-upper { } para el estilo en mayúsculas. Dentro de las llaves pondremos las reglas CSS que necesitemos para dichos estilos.

¿Por qué registrar un estilo predeterminado?

El selector de estilo de bloque te permite seleccionar el estilo que deseas aplicar, pero no te permite deseleccionar uno después de haberlo elegido.

Si registras solo un estilo, y luego lo seleccionas para un bloque, no hay forma de deseleccionar esa opción de estilo de bloque y volver al estilo predeterminado.

Por esa razón es bueno registrar una opción de estilo adicional llamada «Default» o «Regular» sin estilo.  Así, cuando un usuario selecciona el estilo «Default» para un h2, utiliza el h2{} estilo en lugar de uno más específico h2.is-style-default{ }.

Al agregar isDefault: true, este estilo se marcará como activo en los bloques que aún no tienen un estilo asignado.

Eliminar estilos de bloque

Cuando utilizas botones, y sobre todo listas de los bloques de Gutenberg, no necesitas todos los estilos que trae WordPress por defecto.

Para eliminar esos estilos utilizaremos unregisterBlockStyle añadiendo las siguientes líneas en el archivo editor.js creado anteriormente:

wp.domReady( () => {
	wp.blocks.unregisterBlockStyle(
		'core/button',
		[ 'default', 'outline', 'squared', 'fill' ]
	);
} );

Una vez eliminados los estilos que no vas a utilizar, añadiremos los que necesitemos.

wp.domReady( () => {
	wp.blocks.unregisterBlockStyle(
		'core/button',
		[ 'default', 'outline', 'squared', 'fill' ]
	);

	wp.blocks.registerBlockStyle(
		'core/button',
		[
			{
				name: 'default',
				label: 'Default',
				isDefault: true,
			},
			{
				name: 'full',
				label: 'Full Width',
			}
		]
	);
} );

También podemos eliminar bloques de Gutenberg enteros.

wp.domReady( () => {
  wp.blocks.unregisterBlockType( 'core/media-text' );
  wp.blocks.unregisterBlockType( 'core/search' );
} );

Lista de nombres de bloques

Debes de conocer el nombre completo del bloque para adjuntar o eliminar estilos.

Aquí tienes una lista de todos los bloques que trae WordPress a partir de la versión 5.4:

  • core/archives
  • core/audio
  • core/button
  • core/buttons
  • core/calendar
  • core/categories
  • core/classic
  • core/code
  • core/column
  • core/columns
  • core/cover
  • core/file
  • core/latest-comments
  • core/latest-posts
  • core/legacy-widget
  • core/gallery
  • core/group
  • core/heading
  • core/html
  • core/image
  • core/list
  • core/media-text
  • core/more
  • core/navigation
  • core/navigation-link
  • core/nextpage
  • core/paragraph
  • core/preformatted
  • core/pullquote
  • core/quote
  • core/rss
  • core/search
  • core/separator
  • core/shortcode
  • core/social-link
  • core/social-links
  • core/spacer
  • core/subhead
  • core/table
  • core/tag-cloud
  • core/text-columns
  • core/verse
  • core/video
  • core/widget-area

Conclusión

Como veis es muy sencillo añadir, modificar y eliminar estilos en los bloques que trae Gutenberg.

Además, si eliminamos lo que no necesitamos, conseguiremos que los archivos que cargamos en la web sean más pequeños y las páginas carguen antes.