Latest News block: Add support for cards style and popular categories

[adamwoodnz]

Closes #448

Adds a Cards style variation and 'showCategories' attribute to the block to support the design for Developer.

Screenshots

Editor

Frontend

Desktop	Tablet	Mobile

Developer

Testing

1. Ensure you have posts and categories saved
2. Add a latest news block, set style to 'Cards' and enable 'Show Categories'
3. Block should display like design in editor and frontend
4. Regression test the default styles
5. Ensure most used categories are displayed in the popular categories list

[jasmussen]

Looks good!

• Just to confirm, the text inside the boxes is 16px and the text below, "Popular categories" is 14 correct? (That's what they should be)
• Desktop looks good, and the way items wrap, especially the title, is correct, i.e. top-aligned vs. center aligned. The way the date stacks on mobile is also fine. But in your block editor screenshot, and in the tablet screenshot, the date (September 14, 2023) wraps on two lines, which is not ideal. There's probably a site-wide separate issue we can look into, in terms of changing the date format. I.e. maybe Sep. 14, 2023 might help a lot, but unless we can do that in this PR it would be good to think about other solutions.
• Can we add white-space: nowrap; to the date, so that it never wraps and instead expands the column?
• Or can we increase the breakpoint so it stacks sooner?
• Ideally we can make a consistent rule for displaying date/time-stamps to document for every section across the site. But in lieu of that, perhaps we can make an exception to do it just for this one site, then establish the rule here, and apply it elsewhere as we go?

Let me know your thoughts.

[adamwoodnz]

• the text inside the boxes is 16px and the text below, "Popular categories" is 14 correct?

Correct!

• But in your block editor screenshot, and in the tablet screenshot, the date (September 14, 2023) wraps on two lines, which is not ideal

I'll experiment with no-wrap and column size, I think the full text is probably fine unless we like the shorter format.

• perhaps we can make an exception to do it just for this one site, then establish the rule here, and apply it elsewhere as we go?

👍 Works for me

[adamwoodnz]

Updated to use white-space: nowrap and also increased the breakpoint where we switch to a 2 row layout (599px -> 767px), works well I think:

Screenshots

Tablet (768px)	< Tablet (767px shown)

[adamwoodnz]

Merging this, but we can further refine the responsive behaviour if necessary.