Quita el CSS de Gutenberg de WordPress

<?php

// Agrega este snippet en tu archivo functions.php
add_action( 'wp_enqueue_scripts', 'rmr_remove_wp_block_library_css', 100 );

function rmr_remove_wp_block_library_css() {
	wp_dequeue_style( 'wp-block-library' );
	wp_dequeue_style( 'wp-block-library-theme' );
	wp_dequeue_style( 'wc-blocks-style' );
}

Contexto

El editor nuevo de WordPress, Gutenberg, ha sido muy odiado y querido por los usuarios. Desde la versión 5.0, este editor viene instalado por default; aunque si quieres seguir usando el editor clásico, solo tienes que instalar el plugin Classic Editor.

Pero, si tu sitio web usa Gutenberg y ves que se está cargando este archivo, entonces ten cuidado con él.

/wp-includes/css/dist/block-library/style.min.css

Este archivo se utiliza para darle los estilos a los bloques de Gutenberg utilizados en la página actual. Por ejemplo, botones, gradientes, galerías, etc.

Sin embargo, la lógica de WordPress no es tan inteligente. Es decir, no sabe si cargar el archivo o no, siempre lo carga a pesar de que tu página actual usa Gutenberg pero no utiliza los bloques.

Aquí es donde debemos ser inteligentes y ejecutar código solo donde sea necesario en WordPress.

Explicación

La carga del archivo mencionado viene consigo dos tipos de problemas.

El primer problema es que si no utilizas bloques en tu página, éste archivo se cargará y le agregará, aproximadamente, 77.3 KB extras al peso de tu sitio web.

El segundo problema es que si solo utilizas, digamos, los bloques de botones, el archivo CSS se cargará pero no utilizará todo su código; a esto se le llama "unused code".

Ahora, para quitar el archivo CSS totalmente de tu sitio web, tienes que agregar el siguiente snippet en tu archivo functions.php:

<?php

// Agrega este snippet en tu archivo functions.php
add_action( 'wp_enqueue_scripts', 'rmr_remove_wp_block_library_css', 100 );

function rmr_remove_wp_block_library_css() {
	wp_dequeue_style( 'wp-block-library' );
	wp_dequeue_style( 'wp-block-library-theme' );
	wp_dequeue_style( 'wc-blocks-style' );
}

Dentro de la acción wp_enqueue_scripts, llamamos a la función rmr_remove_wp_block_library_css. Esta función se encargará de llamar a las funciones wp_dequeue_style().

La función wp_dequeue_style() acepta un parámetro, el cual debe ser el nombre del estilo registrado en WordPress.

Los archivos JavaScript y CSS se deben registrar y cargar usando la función wp_enqueue_script() y wp_enqueue_style().

Los nombres registrados de los estilos que nos interesa desactivar son:

  • wp-block-library
  • wp-block-library-theme
  • wc-blocks-style (solo si utilizas WooCoomerce)

Después de que hayas agregado el snippet en tu sitio web, abre los DevTools de tu navegador y en los recursos cargados, asegúrate que el archivo CSS de los bloques de Gutenberg no aparezca más.

Si después de agregar el snippet, decides utilizar los bloques de Gutenberg, recuerda quitar o comentar el snippet de tu archivo functions.php.

Roel Magdaleno
Escrito por Roel Magdaleno

Roel Magdaleno es un ingeniero informático especializado en desarrollo web desde hace más de 5 años. Desarrolla sitios web, aplicaciones web, plugins para WordPress y scripts con PHP y JavaScript. Además, comparte su conocimiento en su blog personal.

Deja un comentario