<?php // Add this snippet to your `functions.php` fileadd_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.
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 // Add this snippet to your `functions.php` fileadd_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 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 en tu archivo functions.php
.
Deja un comentario