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

  • 2
    If your theme doesn't support wide images, why are you telling Gutenberg that it does? – Tom J Nowell Mar 22 at 23:09

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.

  • This isn't quite right. Wide images are for having images wider than the content area, and doesn't say anything about whether the content area is full width or not. If it were then a wide images option wouldn't be necessary. The reason you declare wide images support is to let Gutenberg know that your theme has CSS for the alignwide class on images. An example of how this class can be used is outlined in this article: themehybrid.com/weblog/align-wide-and-full-classes – Jacob Peattie Mar 22 at 23:53
  • my bad, i mixed up alignfull and alignwide. same principle, kinda. – David Sword Mar 23 at 2:26
  • ive edited the answer to reflect. thanks for pointing that out. – David Sword Mar 23 at 15:56

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.