Quita el CSS de Gutenberg de WordPress

<?php
 
// Add this snippet to your `functions.php` file
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' ); // WooCommerce
}

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.

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
 
// Add this snippet to your `functions.php` file
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' ); // WooCommerce
}

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 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 en tu archivo functions.php.

0

Escrito por Roel Magdaleno

Desarrollador Backend y Performance Engineer.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *