Override image maximum width in theme (Using Gutenberg editor)

by

I recently installed Gutenberg plugin to my WordPress installation.
The theme I am using is not full width for posts.
There’s a “Wide” option for images in a post but the theme won’t allow the image to go beyond the theme’s rules.

I tried this solution (add theme support) offered by Gutenberg’s team. But no luck.

add_theme_support( 'gutenberg', array(

// Theme supports wide images, galleries and videos.
'wide-images' => true,

// Make specific theme colors available in the editor.
'colors' => array(
    '#ffffff',
    '#000000',
    '#cccccc',
),

What should I search for in the code to start finding a solution for this?

Thank you

1 Answer
1

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