wordpress gutenberg alignwide and alignfull problem

Question

i am playing with the new gutenberg editor of wordpress. i have enabled alignwide and alignfull on my theme (which is using materialize), and i use these css rules for them, but it doesn't work properly.

this is how the alignwide looks.

and this is how the align full looks.

these are the alignfull and wide rules in the css:

and this is how the align full css goes:

these are the css rules for the wrapping content div:

any idea why i am not getting the right visual results?

Answer 1

To start, simply use the add_theme_support( 'align-wide' ) function to the theme’s functions.php file, attached to the after_setup_theme hook, which is fired after the theme is loaded:

<?php
/**
 * Registers support for Gutenberg wide images in Writy.
 */
function writy_setup() {
  add_theme_support( 'align-wide' );
}
add_action( 'after_setup_theme', 'writy_setup' );

Note that theme support for wide images was changed from being within the Gutenberg theme support array, with a wide-images bool, to the above.