CODEWITHSUNDEEP
phpcsswordpressgutenberg-blocks
jon90
jon90

Reputation: 73

Remove inline styling from gutenberg block gallery

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.

Upvotes: 4

Views: 1818

Answers (4)

Mizuho Ogino
Mizuho Ogino

Reputation: 384

I think @Nick's answer is great. If you want to remove only style but keep the gallery functions, there are more limited methods such as:

add_filter( 'block_type_metadata_settings', function( $args ){
    $args['render_callback'] = '';
    return $args;
});

Upvotes: 2

Nick
Nick

Reputation: 445

I've located the issue in wp-includes/gallery.php in block_core_gallery_render function. Wordpress sets the style in there, the inline notes mention that it should be loaded in the head but that it's loaded in the footer for now. (Sounds like they aren't happy with it either) I didn't want to touch the WP core so I think I found a solution.

Add this to your functions.php:

remove_action('init', 'register_block_core_gallery');

This should remove the style blocks like wp-block-gallery-1, wp-block-gallery-2, etc.

Let me know if that worked for you!

Upvotes: 3

RolandTi
RolandTi

Reputation: 11

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...

Upvotes: 1

Titus
Titus

Reputation: 806

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 );

Upvotes: -1

Related Questions