WIP: Gutenberg Image block rule preventing alignwide, alignfull

Bugs
1

Bricks defines rules for Gutenberg in frontend-layer(.min).css.
One of them is

.wp-block-calendar, 
.wp-block-image:not(.wp-block-gallery .wp-block-image), 
figure[class^="wp-block-"]:not(.wp-block-gallery figure):not([class^="align"]) {
    width: 100%;
}

When inserting an Image block in Gutenberg and setting it to align wide or align full, the above rule limits the image width to 100%, relative to the normal content width, negating the purpose of align-wide and align-full.

There are two issues with this rule.

  1. The image block’s class attribute is usually something like
    class="wp-block-image alignfull ..."
    So the class attribute doesn’t start with “align” but contains it anywhere in the space separated list of classes. The ^= pattern doesn’t catch this correctly.
    Instead, the rule should use something like [class*="align"], or even more specific :not(.alignwide,.alignfull)

  2. The second selector of the rule is missing the align-exclusion completely.
    It should read something like
    .wp-block-image:not(.wp-block-gallery .wp-block-image):not(.alignwide,.alignfull)

Notes aside:
My theme style defines

  • General > Site Layout: Wide
  • Elements > Container > Width: 1100px
1 Like
WIP: Bricks component Blocks - alignwide not working
3

Another issue:
For .alignwide blocks, there’s a rule

.alignwide {
    margin-left: -10%;
    max-width: 120%;
    position: relative;
    width: 120%;
}

For Image blocks, there’s a rule

.wp-block-image, .wp-block-video, figure[class^="wp-block-"] {
    margin: 1em 0;
}

This kills the margin-left:-10% set by the first rule for alignwide blocks, moving the image block to the right.

1 Like
4

Hi matthias,
Thanks so much for your report and sorry for the late reply!

I reproduced the issues and added them to our bug tracker.

Best regards,
timmse

3 Likes