SOLVED: 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
2 Likes
SOLVED: 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.

2 Likes
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

4 Likes
5

Hello Sir,

I’m following the state of this issue since October. Do you have an update planned about that ?Best regards,

6

Unfortunately, no news yet—we’re still working on it.

7

Dear team,
this issue still exists in Bricks 2.3.6.
I wonder why this takes so long to fix even though I’ve provided the necessary changes.
It’s quite unfortunate that I have to override those rules in all my Bricks projects to restore basic Gutenberg functionality.

8

We’ve addressed this in Bricks 2.3.7, now available as a one-click update in your WordPress Dashboard.

Please read the changelog entry before updating, and let us know if you experience any issues.

1 Like