Fix gallery not displaying correctly when aligning right or left.

[jorgefilipecosta]

This two lines PR aims to address an issue raised in #2690. The problem is that some themes overwrite the display property. The problem happens in right and left alignment, not in center. The technique already being used to increase selector specificity for center alignment was also applied for left and right. With this simple change, it looks like the problem got fixed.
Please that in the editor things look nice the problem only happens when seeing the post. It is possible to see the problem happening in the screen below where the gallery was set to two columns and the setting was not respected.

The container may still take all the space and we may not be able to notice the difference between the center and right/left alignments. But this is common in many other blocks e.g: image block. And for now, it looks like the expected behavior from blocks when the width is big.

Before

After

[jasmussen]

Tested and I see the same result as you show in your screenshots. Which, so far so good!

But the point you bring up makes sense, it is a little weird that the left aligned gallery in the editor is not full width, but the saved version is:

Should we be more opinionated here, and let the width bleed through to the frontend?

[jorgefilipecosta]

Should we be more opinionated here, and let the width bleed through to the frontend?

Hi @jasmussen, my option is that yes we should consider having rules that set the width, so things look similar when published. And given that we expect that a block in the future may be added for example to sidebars where it may not make sense to set the width like in the content area. I would solve the problem by adding a rule that only applies to the content e.g. .content-area .wp-block... {.
Another approach possible may be having a very common slider to set the width in % so we leave that decision to the content creators.

[jasmussen]

@mtias has suggested a add_theme_support clause for Gutenberg styles, for example for the basic blockquote styles, so you can opt in to allowing Gutenberg to override your theme styles (or supply a baseline). In this case I'm suggesting that the baseline for a floated gallery should be the same on the backend as in the frontend.

Perhaps not necessary to address in this PR, but it does bring up the issue of inconsistencies between front and backend.

[jorgefilipecosta]

We can never guarantee that the results will be the same, themes may always have rules with higher specificity that overwrite ours, but for left and right alignment widths we have max-width: 370px; rule on the editor that makes things look at +- 50% width and on the post itself we don't have a rule at all. It's something to consider, but not directly in the scope of this pr, as the width problem is general to most blocks.

[jorgefilipecosta]

Hi @jasmussen, do you think it is ok to merge this small fix?

[jasmussen]

Sure. We need to look at frontend styles in a more cohesive way soon anyway.