How to remove Button block CSS from HTML

  • rodolfoalexander

    (@rodolfoalexander)


    4 years ago

    On pages where I have used Button blocks, I see this styles added to the HTML:

    <style>.wp-container-623aeac97e09b{display:flex;gap:.5em;flex-wrap:wrap;align-items:center;align-items:center;justify-content:center}.wp-container-623aeac97e09b>*{margin:0}</style>
<style>.wp-container-623aeac97e5e6{display:flex;gap:.5em;flex-wrap:wrap;align-items:center;align-items:center;justify-content:center}.wp-container-623aeac97e5e6>*{margin:0}</style>
<style>.wp-container-623aeac97e990{display:flex;gap:.5em;flex-wrap:wrap;align-items:center;align-items:center;justify-content:center}.wp-container-623aeac97e990>*{margin:0}</style>
<style>.wp-container-623aeac97eeee{display:flex;gap:.5em;flex-wrap:wrap;align-items:center;align-items:center;justify-content:center}.wp-container-623aeac97eeee>*{margin:0}</style>
<style>.wp-container-623aeac97f426{display:flex;gap:.5em;flex-wrap:wrap;align-items:center;align-items:center;justify-content:center}.wp-container-623aeac97f426>*{margin:0}</style>
<style>.wp-container-623aeac97f8fd{display:flex;gap:.5em;flex-wrap:wrap;align-items:center;align-items:center;justify-content:center}.wp-container-623aeac97f8fd>*{margin:0}</style>
<style>.wp-container-623aeac97fd79{display:flex;gap:.5em;flex-wrap:wrap;align-items:center;align-items:center;justify-content:center}.wp-container-623aeac97fd79>*{margin:0}</style>
<style>.wp-container-623aeac9801f9{display:flex;gap:.5em;flex-wrap:wrap;align-items:center;align-items:center;justify-content:center}.wp-container-623aeac9801f9>*{margin:0}</style>
<style>.wp-container-623aeac980626{display:flex;gap:.5em;flex-wrap:wrap;align-items:center;align-items:center;justify-content:center}.wp-container-623aeac980626>*{margin:0}</style>
<style>.wp-container-623aeac98092a{display:flex;gap:.5em;flex-wrap:wrap;align-items:center;align-items:center;justify-content:center}.wp-container-623aeac98092a>*{margin:0}</style>
<style>.wp-container-623aeac980be2{display:flex;gap:.5em;flex-wrap:wrap;align-items:center;align-items:center;justify-content:center}.wp-container-623aeac980be2>*{margin:0}</style>
<style>.wp-container-623aeac980ec2{display:flex;gap:.5em;flex-wrap:wrap;align-items:center;align-items:center;justify-content:center}.wp-container-623aeac980ec2>*{margin:0}</style>
<style>.wp-container-623aeac9811d2{display:flex;gap:.5em;flex-wrap:wrap;align-items:center;align-items:center;justify-content:center}.wp-container-623aeac9811d2>*{margin:0}</style>
<style>.wp-container-623aeac981487{display:flex;gap:.5em;flex-wrap:wrap;align-items:center;align-items:center;justify-content:center}.wp-container-623aeac981487>*{margin:0}</style>
<style>.wp-container-623aeac981710{display:flex;gap:.5em;flex-wrap:wrap;align-items:center;align-items:center;justify-content:center}.wp-container-623aeac981710>*{margin:0}</style>
<style>.wp-container-623aeac981ae8{display:flex;gap:.5em;flex-wrap:wrap;align-items:center;align-items:center;justify-content:center}.wp-container-623aeac981ae8>*{margin:0}</style>
<style>.wp-container-623aeac982007{display:flex;gap:.5em;flex-wrap:wrap;align-items:center;align-items:center;justify-content:center}.wp-container-623aeac982007>*{margin:0}</style>
<style>.wp-container-623aeac9824e5{display:flex;gap:.5em;flex-wrap:wrap;align-items:center;align-items:center;justify-content:center}.wp-container-623aeac9824e5>*{margin:0}</style>

    Is there any way to remove/disable them with a filter or something because this CSS doesn’t really have any style changes. How can we remove it?

    • This topic was modified 4 years ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic
Viewing 4 replies - 1 through 4 (of 4 total)
  • mrtom414

    (@mrtom414)

    4 years ago

    The blocks are created in React most of the styling will probably be inline but the block could use an external style sheet. If your using an FSE theme style could also come from the theme.json file. The theme.json file can be added to any theme but are more likely to be found in fse themes. My guess is it probably coming from the block. Try removing then adding the button block back in.

    Thread Starter rodolfoalexander

    (@rodolfoalexander)

    4 years ago

    I’m using Blocksy theme, I contacted them and it seems it’s the same with other themes as well. I have already tried removing and adding the button blocks back, and it didn’t work.

    About the theme.json file, do you any tweak with which I can disable it?

    Thanks

    mrtom414

    (@mrtom414)

    4 years ago

    Theme.json has some options to disable some styling options. Your theme might not even have one. It is not required its purpose is to fine-tune styles and configurations for the block editor. You can add it to any theme that uses the block editor. You can find the handbook for it here. Where are you seeing the code at? I’ve tried to create this and didn’t see it.

    Thread Starter rodolfoalexander

    (@rodolfoalexander)

    4 years ago

    Hi,

    Sorry I’m not too technical. But I see this in pretty much every theme, even in the Twenty-Twenty One theme.

    In any post, just add a few buttons, not just add them, add some texts too in the button. And then Preview the page, and view-source the page.

    At around the bottom of the page, you’ll the styles with <style></style>

    For me, even this filter isn’t working:

    
//Remove Gutenberg Block Library CSS from loading on frontend

function remove_wp_block_library_css(){
//wp_dequeue_style( 'wp-block-library' );
wp_dequeue_style( 'wp-block-library-theme' );
wp_dequeue_style( 'wc-block-style' ); // Remove WooCommerce Block CSS
wp_dequeue_style( 'global-styles' ); // Remove theme.json
}

add_action( 'wp_enqueue_scripts', 'remove_wp_block_library_css', 100 );
Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘How to remove Button block CSS from HTML’ is closed to new replies.