Tiled gallery: Fix infinite loop left/right block align

[sirreal]

Fixes and infinite loop with the resize observer that causes the block to shrink indefinitely when left or right aligned.

Note: Some alignments do not appear to be implemented correctly. This PR does slightly change the alignment, in particular for the "full" alignment. It's unclear to me what the appropriate styling is for center, full and wide alignments, but these should be revisited in a follow-up.

Changes proposed in this Pull Request

• Use adjacent sibling selectors to add margins between items and rows rather than relying on adding margins around items and subtracting them

Testing instructions

• Insert the block.
• Try left and right alignment. Does it work correctly?
• Is the item and row spacing the same as before?
• Is the vanishing block bug gone?

Screens

Before (from #29016 - what a fast, smooth infinite loop 😍 )

After

[matticbot]

Test live: https://calypso.live/?branch=fix/g7g-tg-layout-renderers

[simison]

Let's loop back later to rename margin to gutter also elsewhere to keep things consistent:

wp-calypso/client/gutenberg/extensions/tiled-gallery/constants.js

Line 34 in f76c144

export const TILE_MARGIN = 2;

[simison]

Core Gallery spacing was improved in WordPress/gutenberg#10027 (and WordPress/gutenberg#10221, also maybe https://github.com/WordPress/gutenberg/commits/master/packages/block-library/src/gallery/style.scss#diff-cf158936847e50c10bf9797499a7247dR127) — should we follow the suit while at it?

Bringing those changes over might fix the issue as well.

[simison]

This does fix the bug 💪

Note: Some alignments do not appear to be implemented correctly. This PR does slightly change the alignment, in particular for the "full" alignment. It's unclear to me what the appropriate styling is for center, full and wide alignments, but these should be revisited in a follow-up.

Yup, these seem to need some work indeed. For the record:

This PR changes slightly how "Full width" behaves on TwentyNineteen theme:

Probably hard to see from screenshots but in master border is cut little bit while in this PR it's fully visible. The left border is hidden in both and that's; I'm not sure if that's how it should actually behave.

In core-gallery borders stay hidden on both sides:

On full width, this PR also pushes the content just a little bit under the menu, as demonstrated by this insert shadow in <figure> element:

master

fix/g7g-tg-layout-renderers

The same seems to happen in core-gallery block:

Tested by applying box-shadow: inset 0 0 0 5px red; to figure and setting opacity:0 in the img and caption.

[simison]

This fixes the bug indeed; seems like we should re-visit margins regardless though.

[sirreal]

All these styles do need to be revisited 👍

A note, the bug occurred because the observer callback set the block width, which changed the block size, which called the observer and set a different width. This appeared to manifest because the width reported to the observer did not match the width that was set on the component. This was due to the way the negative margins impacted the content rects. I'm not sure why this only manifested on the left/right alignments 🤷‍♂️

Nothing in this PR actually prevents this bug from reappearing under the right conditions, we might also look at that in a follow up.