Gutenberg - Classes wp-block-image alignfull not respected

[Bowriverstudio]

The css classes wp-block-image alignfull are not aligning full.

For example the image: This link (for now) is just an empty default child theme of getbeans - with the gutenberg plugin http://beanssandbox.devbrs.com/

The section "Media Rich" the full width images are not being respected.

I'd expect it to look like: https://weavertheme.com/welcome-to-the-gutenberg-editor/

[Tsquare17]

I've started looking into this, and added what I thought would fix the issue:

.wp-block-cover-image.alignfull,
.wp-block-gallery.alignfull,
.wp-block-image.alignfull img {
    clear: both;
    left: 50%;
    margin-left: ~"calc(50% - 50vw)";
    margin-right: ~"calc(50% - 50vw)";
    right: 50%;
    width: 100vw;
}

But it doesn't seem to be pulling the correct distance on margin-left.

@christophherr Any idea what might be causing this?

[christophherr]

@Tsquare17 We're not declaring any of the "Gutenberg theme supports". For wide and full images we have to add add_theme_support( 'align-wide' );

[christophherr]

More details in the GB handbook: https://wordpress.org/gutenberg/handbook/designers-developers/developers/themes/theme-support/

[Tsquare17]

I've added add_theme_support( 'align-wide' ); As well as add_theme_support( 'wp-block-styles' );

[Tsquare17]

I was trying to pull halfway left from a point that wasn't center screen due to the sidebar layout.

[Bowriverstudio]

I've got it working, but only at the child theme level. Thank you Christophherr and Tsquare.

add_theme_support( 'align-wide' );
add_theme_support( 'wp-block-styles' );

And css

wp-block-image.alignfull  {
  margin-left: ~"calc(50% - 50vw)";
  margin-right: ~"calc(50% - 50vw)";
  width: 100vw;
  max-width: 100vw;
 }

.wp-block-image.alignwide {
  margin-left: -25px;
  margin-right: -25px;
  max-width: calc(100% + 50px);
}