Override image maximum width in theme (Using Gutenberg editor)

add_theme_support('gutenberg', ['wide-images' => true ]) is telling gutenberg, hey this sites content area’s CSS is setup to handle wide images. The theme_support wide-images code isn’t a magic fix – instead it’s an aknowledgment from the theme developer to gutenberg, that the themes CSS’s ready for gutenberg wide content.

If you’re just experimenting, and only want that CSS change done to pages that use gutenberg, you can use a snippet like this to check if the page is gutenberg:

add_action('body_class', function($classes){
    if (function_exists('the_gutenberg_project') && gutenberg_post_has_blocks( get_the_ID() ) )
        $classes[] = 'using-gutenberg';
    return $classes;
});

The you can better select your elements for gutenberg only, making your CSS like

body.using-gutenberg #container.container {
    /* ..wtv full width css */
}

If you’re curious about the how the content CSS is done, is in relation to Gutenberg, checkout the gutenberg-starter-theme on GitHub for reference.

Leave a Comment