I’m trying to replicate the LA Times layout, partially, in WordPress’ Gutenberg.
What I’m learning is that the standard GB blocks are lacking in a few ways that make this difficult:
- They don’t have all styling on all blocks.
- There’s no system to make responsive styling.
- There isn’t a standard way to say an article goes into a specific area of the page, so I use Categories.
Aside from that, I don’t know the WP css classes, which would probably help me make better layouts.
Despite this, it’s possible to make complex, high-density aggregation pages that look like a standard news website, using only the standard blocks.
There are just a wide range of things you can’t do, before things get complex.
Tricks
I did layouts with Rows, filled with Columns, filled with Rows.
To get more precise styling, like padding, margins, and sizing, I used Groups.
Each row or column of headlines is a separate Query Loop. Each loop is filtered, to show only one Category. A Category can show up across different lists; the get this effect, multiple Query Loops filter on that category.
Group Tricks
Normally, you put a Group in the layout, and then add blocks to it.
If you have a block, or blocks, and you need to put it into a Group, there’s a special menu item in the 3-dot-menu -> Group, that will wrap the blocks with a Group!
Solutions?
I haven’t really dug into the free block libraries out there. A few look interesting: Content Blocks Builder, Block Enhancements, and Editor Plus.
There’s also the old reliable ACF. That is old tech, but they have some kind of programmed block system may help bridge the gap, and could also be a solution in some situations.