@onetrev thanks for reporting this! I'm having a hard time following the exact problem you're describing. I just tested with WP 5.8 and the latest of Gutenberg. I can see that alignment works correctly. Can you share a video or an additional set of screenshots to clarify?

Hey @annezazu thanks for the follow up. I realise now I forgot to include a key detail. This appears as soon as you add layout -> contentSize to your theme.json. But to save you time and make sure you can see exactly what I'm experiencing, I've made a one minute video (otherwise there would be a lot of screenshots!). Hope this helps.

NOTE: in the video I'm now running WP 5.8, with no Gutenberg plugin, as since my original post WP 5.8 has been released.

@annezazu This is a wider issue with how Gutenberg handles alignment styles, and it's not only present in hybrid (PHP themes with theme.json), but also block-based themes.

Traditionally, themes have had a container (div or similar) wrapping the post content. Therefore floated elements did not break out of this container. This is still the case with hybrid themes, as WordPress does not output styles for the content container. If a theme's layout on the frontend was working before, it will stay that way.

If themes want to use the new way of adding controlling the block width, the related dev 5.8 note recommends this approach:

.entry-content > * {
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
}
 
.entry-content > .alignwide {
    max-width: 1000px;
}
 
.entry-content > .alignfull {
    max-width: none;
}
 
.entry-content > .alignleft {
    float: left;
    margin-right: 2em;
}
 
.entry-content > .alignright {
    float: right;
    margin-right: 2em;
}

So the content container doesn't have a fixed width. Instead it is a 100% and the blocks inside are individually restricted in width. And this approach also works. Let's look at why.

This is a floated image on the frontend.

This is the markup:

<div class="wp-block-image">
  <figure class="alignleft">
    <img src="http://example.com/wp-content/uploads/image-alignment-150x150.jpg" alt="Image Alignment 150x150" class="wp-image-904">
  </figure>
</div>

This image stays inside of the content width because the .wp-block-image container is restricted in width, and the .alignleft is floated inside of this container.

However in the editor, the markup is the following:

<div class="wp-block" data-align="left">
  <figure>
    <div>
      <img />
    </div>
  </figure>
</div>

So the float is on the outer container meaning the entire block is floated, and not just the figure inside the block.

Therefore the block floats left to its container, which is the editor. And therefore "sticks out" of the content area.

This is also an issue in block-based themes, as shown with TT1:

This bug is present in the post editor and template editor for hybrid themes, and the site editor for block-based themes. For me this is worth getting into 5.8.1.

Why? Because there is no workaround here.

You can fix the post editor. Assuming a content size of 520 pixels, you can use calculated margins in the editor stylesheet:

.block-editor-block-list__layout.is-root-container > [data-align="left"] {
	margin-left: calc( ( 100% - 520px ) / 2 ) !important;
}

To explain: you take the full width, subtract the content size, and divide by two. That gives the margin to fit the floated element back in.

All in all, this isn't great. However it gets worse. If you open the Template Editor, this is what you see as generated CSS:

.editor-styles-wrapper .wp-container-39 > [data-align="left"] {
    float: left;
    margin-right: 2em;
}
.editor-styles-wrapper .wp-container-39 > * {
    max-width: 520px;
    margin-left: auto !important;
    margin-right: auto !important;
}

The .wp-container-39 is dynamically generated, so no way to target all blocks. The .editor-styles-wrapper is added to all CSS styles added via add_editor_style() and 5.8 deprecated all other CSS enqueuing through enqueue_block_editor_assets.

Therefore you can't really override these styles at all currently, leaving the template editor broken.