Question 30055 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Remove inline styling from gutenberg block gallery – WordPress

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.

Tags:

4

Answers


  1. 0

    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 );
    Login or Signup to reply.
  2. 0

    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…

    Login or Signup to reply.
  3. 0

    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!

    Login or Signup to reply.
  4. 0

    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;
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search