Image & Cover Block SCSS inconsistent with Media&Text & Embed Block - Forces Theme Acrobatics

[timhibberd]

Image Block (.wp-block-image) & Cover Block (.wp-block-cover, .wp-block-cover-image) SCSS are setting the block width to 100% and the left / right margins to 0 in isolation from .alignfull / .alignwide. This forces the theme to go to unnecessary lengths to get the blocks to fit in containers that have margins due to the standard WordPress loading sequence of theme / plug-in css files since the block width and margins are given priority over the theme styles which are loaded earlier.

The Image Block & Cover Block inconsistently set max-width, width, and left / right margins relative to Media & Text Block and Embed Block. The latter two are a breeze for the theme to style. I'm not sure why the Image Block and Cover Block do not have SCSS configured the same as Media & Text Block and Embed Block w.r.t. Width, Max-Width, left / right margins.

---

Suggested Solution:

Introduce a minor styling convention regarding GB Block base classes...let's call it "The principle of qualified styling". In a nutshell I am suggesting that GB introduce the .alignnone to complement the .alignfull and .alignwide and refrain from styling the block's base class.

This would also require a minor change to the Image Block & Cover Block scss files to be consistent with the Media & Text Block and Embed Block scss files.

See ​https://github.com/WordPress/gutenberg/issues/11234 for a more detailed explanation and screenshots.

---

NOTE:

Making this change now should ease the upgrade path for a lot of legacy themes. If the change is made after the release of v5.0 the benefits of consistency will be overshadowed by the cost to undo theme-specific barnacles.

Just one man's two cents worth :-)

[timhibberd]

I am increasing the severity of this from normal to major because it should be considered and accepted or rejected by core design BEFORE 5.0 release.

If this is accepted it is a reasonably minor change with a minor impact on the CSS overrides of themes that have currently been Gutenized.

After 5.0 is released and there are lots of themes and users then accepting this change would be a lot messier.

[timhibberd]

Gutenberg evolution has rendered the value of this design issue moot. There was one Gutenberg alignfull inconsistency that was highlighted by this issue that was fixed in ​this Gutenberg merge request.