Style the Latest Posts block to match the comps

[kjellr]

Closes #76.

Implements the three Latest Posts block styles as described in #76 (comment).

The screenshots below really showcase how border doesn't work for multi-line links at the moment, but that's a separate issue. 😄

Still to do:

• Try the masonry-style layout of boxes in @melchoyce's comps.
• Remove the right margin on the right-most items in the border version.

Default

Dividers

Borders

[aristath]

Overall this looks good to me. I only have 1 reservation... What happens if the post-author selects a dark background color? Would it not be simpler if the border-color was set to currentColor instead of #28303d? From what I can tell that is the color of the text anyway, so visually it wouldn't be any different, and would also account for dark backrounds with light text.

[carolinan]

It is the color of the text by default, but isn't the purpose of using a CSS variable that these two can be set to two different colors?

[aristath]

It is the color of the text by default, but isn't the purpose of using a CSS variable that these two can be set to two different colors?

Yes, I was just referring to some hardcoded instances of the #28303d color (without using css-variables) for borders in this PR 😄

[kjellr]

Yes, I was just referring to some hardcoded instances of the #28303d color (without using css-variables) for borders in this PR

I think that's just in the IE stylesheet. All the variables are converted to static values there.

[aristath]

I think that's just in the IE stylesheet.

Ah you're absolutely right! I somehow missed that 👍

[kjellr]

• Remove the right margin on the right-most items in the border version.

I've migrated this item over to be a Gutenberg fix, since it's something that happens by default everywhere: WordPress/gutenberg#25688

[melchoyce]

Looking great so far 👍 Can we figure out a css masonry solution for tiling the Grid + Borders style, or use a flex property so each row of items is the same height?

[melchoyce]

Actually it might just be that the last row's last item has extra padding or something? Anyone else seeing this?

[kjellr]

Can we figure out a css masonry solution for tiling the Grid + Borders style, or use a flex property so each row of items is the same height?

Yeah, I'm taking a look at that. I figured a simple flex-flow: column wrap; should take care of a masonry-like layout, but I forgot that'll only work with a height applied to the container. 🤔 Open to any ideas?

[kjellr]

Actually it might just be that the last row's last item has extra padding or something? Anyone else seeing this?

@melchoyce should be fixed in that last commit. If this fixes the issue for now and makes each row the same height, I'm happy pushing this for now and following up on the masonry layout later if we can figure it out.

[melchoyce]

Working on my end, too! Let's merge & iterate.