WordPress.org

Make WordPress Core

Opened 12 months ago

Closed 11 days ago

Last modified 5 days ago

#45234 closed defect (bug) (worksforme)

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

Reported by: timhibberd Owned by:
Milestone: Priority: normal
Severity: major Version:
Component: Editor Keywords:
Focuses: Cc:
PR Number:

Description

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 :-)

Change History (4)

#1 @SergeyBiryukov
12 months ago

  • Component changed from General to Editor

#2 @timhibberd
11 months ago

  • Severity changed from normal to major

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.

#3 @timhibberd
11 days ago

  • Resolution set to worksforme
  • Status changed from new to closed

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.

#4 @desrosj
5 days ago

  • Milestone Awaiting Review deleted
Note: See TracTickets for help on using tickets.