WAIT: Bricks scripts can call disable CSS style sheet

Browser: Chrome 110
OS: Windows
URL: My Blog – My WordPress Blog
Video: ScreenRecorderProject11 2 - YouTube

For better optimization and performance, I rewrote the styles of Bricks widgets to fit my own design system. Using PHP functions, I blocked the loading of Bricks CSS files, but I found that third-party plugins and even Bricks scripts could override the blocking function and call the files that I blocked. There is a link above with an interesting demonstration.

My function

add_filter(‘use_block_editor_for_post_type’, ‘__return_false’, 9999);
add_action( ‘wp_enqueue_scripts’, ‘remove_block_css’, 9999 );

function remove_block_css() {

wp_dequeue_style( 'wp-block-library' );
wp_dequeue_style( 'wp-block-library-theme' );
wp_dequeue_style( 'wc-block-style' );
wp_dequeue_style( 'jet-engine-frontend' );
wp_dequeue_style( 'rank-math' );
wp_dequeue_style( 'bricks-frontend' );
wp_dequeue_style( 'bricks-404' );

}

I tried to place my custom CSS from the header to the footer and that partially fixed the display problem (but everything looks the same as in the last demo in the video where the grid works, but some styles are broken and can be fixed through the important. But the main issue, loading a more single CSS file, is not resolved. I would also like to optimize other files for myself and prohibit their download. For example tooltips.min.css. I only use it to display the tooltip on top, I don’t need styles on the sides and bottom… In general, I would like it not to be displayed at all, that is, it would be nice for the share widget to have the option to enable the tooltip or not. Over 70% of traffic comes from Mobile devices, there is no hover state, this tooltip is meaningless in general, it only increases the code.

Hi @davidovmihail ,

Please try deregister the style instead of dequeuing it.

wp_deregister_style( 'wp-block-library' );

Let me know if it works.

Regards,
Jenn

with chat GPT i found solution.

add_filter(‘use_block_editor_for_post_type’, ‘__return_false’, 99999);
add_action( ‘wp_enqueue_scripts’, ‘remove_block_css’, 99999 );

function remove_block_css() {
wp_dequeue_style( ‘wp-block-library’ );
wp_dequeue_style( ‘wp-block-library-theme’ );
wp_dequeue_style( ‘wc-block-style’ );
wp_dequeue_style( ‘jet-engine-frontend’ );
wp_dequeue_style( ‘rank-math’ );
wp_dequeue_style( ‘bricks-404’ );
wp_dequeue_style( ‘bricks-admin’ );
}

function remove_bricks_frontend_style() {
wp_deregister_style( ‘bricks-frontend’ );
wp_dequeue_style( ‘bricks-frontend’ );
}
add_action( ‘wp_enqueue_scripts’, ‘remove_bricks_frontend_style’, 999 );

I with this code i disable all Bricks CSS file they don’t load without enabling the WooCommerce plugin (even the bricks WooCommerce file won’t load).

With your stroke of code

add_filter(‘use_block_editor_for_post_type’, ‘__return_false’, 99999);
add_action( ‘wp_enqueue_scripts’, ‘remove_block_css’, 99999 );

function remove_block_css() {
wp_deregister_style( ‘wp-block-library’ );
wp_dequeue_style( ‘wp-block-library’ );
wp_dequeue_style( ‘wp-block-library-theme’ );
wp_dequeue_style( ‘wc-block-style’ );
wp_dequeue_style( ‘jet-engine-frontend’ );
wp_dequeue_style( ‘rank-math’ );
wp_dequeue_style( ‘bricks-404’ );
wp_dequeue_style( ‘bricks-admin’ );

}

Bricks file continue to upload. With GPT solution, all bricks CSS file not uploaded what I ideally want in the future, when I rewrite all the files for my design system. But this solution may not suit someone, and they want to limit only some brick files. For me personally, GPT has already given a solution for CSS files, but this may be a problem for others. I also want to note that this did not break the work of JS bricks files, and it turned into half of the option that I would like to see in the builder, this is to disable file uploads + remove default CSS brick selectors (with the latter, I understand that this can cause problems with js)

1 Like