Home > Software design >  Remove inline styling from gutenberg block gallery
Remove inline styling from gutenberg block gallery

Time:05-31

I have updated my wordpress and it now displays the following CSS on my page:

<style> .wp-block-gallery-1{ --wp--style--unstable-gallery-gap: var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) ); gap: var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )}</style><style> .wp-block-gallery-2{ --wp--style--unstable-gallery-gap: var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) ); gap: var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )}</style><style> .wp-block-gallery-3{ --wp--style--unstable-gallery-gap: var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) ); gap: var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )}</style><style> .wp-block-gallery-4{ --wp--style--unstable-gallery-gap: var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) ); gap: var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )}</style>

I did some research and got to the wp-includes/blocks/gallery.php file and added it here:

add_action(
    'wp_footer',
    function () use ( $style ) {
        echo '<style> ' . $style . '</style>';
    }
);

But I don't know how to remove it from the functions.php of my theme.

How can I remove it? I have searched everywhere and found no solution.

CodePudding user response:

you can remove it with these lines of code:

function stof_wp_remove_wp_block_library_css(){
    wp_dequeue_style( 'wp-block-library' );
    wp_dequeue_style( 'wp-block-library-theme' );
    wp_dequeue_style( 'wc-blocks-style' );
} 
add_action( 'wp_enqueue_scripts', 'stof_wp_remove_wp_block_library_css', 100 );

CodePudding user response:

I've removed the block gap part by adding

    "version": 2,
    "settings": {
        "spacing": {
            "blockGap": null
        }
    }
}

to theme.json, but still having the issue with block gutter...

  • Related