Gallery: Use space-between instead of negative margins

[SofiaSousa]

Description

Using justify-content: space-between in gallery block instead of negative margins. Also removed margins of gallery items.

Added missing alignment rules for galleries.

How has this been tested?

In the browser, adding 3 images to a gallery block for example and checking the width and space between images.

Types of changes

Just style.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.

[jorgefilipecosta]

Hi @SofiaSousa thank you for your contribution 👍
I think one of the reasons for the use of negative margins was to align the gallery with the placeholder and with the content of other blocks, e.g., the paragraph.
And with this changes galleries are a little bit out of the content area.
Before:

After:

One option we have to make the gallery look inside the content area is move the margins to the editor.scss file so they only affect the editor, and on the front end, we avoid the negative margins.

On the front end, the difference I noticed is that the space between the images got a little bit bigger.

@jasmussen, @karmatosed would it be possible to have a look at the design changes.

[jasmussen]

Thanks so much for the PR!

From the branch name, try/avoid-gallery-x-scroll it seems like you were running into trouble with horizontal overflow is that correct? Were there scrollbars in situations there shouldn't be?

Jorge is right, the reason for the negative margins was to ensure the gallery was both spaced evenly between images, but also was only as wide as the main column of text and placeholders.

I'm not opposed to using space-between or more flexiness, but I need to understand the problem this is trying to solve first. I'm notably a little concerned about the new float rules (https://github.com/WordPress/gutenberg/pull/9670/files#diff-9ffb7855d1c617407b369408c6c01fe4R99), given we've had some challenges with floats in the first case.

[SofiaSousa]

Well we are trying to use gutenberg outside of the box, I mean outside of the wordpress and wordpress core style.

The margins in blocks-gallery-item make this 'gap' at the right edge which negative margin of wp-block-gallery doesn't solve, and the result is the horizontal scroll.

So the solution I saw was removing wp-block-gallery and blocks-gallery-item margins and play with flexbox.

[jasmussen]

Hmm that's a good point.

I will think about how this can be done, but a plan B could be to move those margin styles to theme.scss as "opinionated styles" that themes have to opt into.

[gziolo]

@jasmussen @SofiaSousa, should we close this one in favor of #10027?

[SofiaSousa]

@jasmussen yes, thanks!