Would love see equal height when Query loop grid layout

[lwangdu]

Currently we can't control equal height of the query loop grid layout.

What is your proposed solution?

WordPress version 6. we can't control equal height of the query loop grid layout.

[justintadlock]

Related: #39599

Each post in the grid is already equal height. The problem is that there are no design tools for the Post Template block or a way to style it via theme.json. If you could add a custom background to Post Template, for example, it would fill the entire space for each post.

What you're seeing in the above screenshot is the border around the Group block nested inside of Post Template. Of course, an option for a 100% height on Group would achieve the same effect.

---

For a quick workaround on the Group block, you could register a full-height block style for it:

add_action( 'init', function() {
	register_block_style( 'core/group', [
		'name'         => 'full-height',
		'label'        => __( 'Full Height' ),
		'inline_style' => '.wp-block-group.is-style-full-height { height: 100%; }'
	] );
} );

Here's a screenshot of that style in action:

[lwangdu]

Thanks @justintadlock for the code. This works great for me. I am already missing your great articles on the wptavern.

[paaljoachim]

This issue explores different ways to manage image sizes:
Image Block: Surface aspect-ratio tool for custom image dimensions
#38990

[carolinan]

The group block now has an option for minimum height in the Dimensions panel in the block settings sidebar,
would you say this solves the issue?

[caseymilne]

@carolinan That's a good setting option (min-height on group block) for users to be aware of, and it partially works for this use case. I found this thread after doing some experiments today and min-height option for Group was pretty much the best solution I could find. But it's not a "solid solution".

Let's say we have 5 rows of 3 columns and all the heights are different not only across rows but also cols, setting a min-height on the group for each item will fix most of it, 80-90% if you choose a height you can expect will contain everything. However, what if there is a big text title for example, and most of the time that title fits on one line... but then you have a few longer titles, well they wrap and the container is exceeded. We're only achieving half the constraints with min-height.

I think we'd need to use actual "height" or "max-height" the same as min-height to really ensure consistency. The excerpt block is another example of where you can usually predict the height needed based on whatever words limit, but different words have different lengths so one box has 5 lines of excerpt, another can have 6-8 and this again could go over min-height.

If somebody is relying on min-height alone, they would need to set a large amount of extra space to account for possible overflows. It still wouldn't be a guarantee of no overflow, because we don't have any ways to specify that contained blocks have a "set height and no overflow".

Looking at the problem more broadly, height control alone while helpful/important isn't the full solution either. Overflow control is often used in combination in custom CSS. Another property commonly used in custom CSS, and we see this in Tailwind UI templates (which tend to be pixel perfect) is the use of no-wrap on text. This helps for example when you not only want the height of a box to be consistent in a grid, but you also have things setup where you really want a large title to stay on 1-line. You can use overflow: hidden, text-overflow: ellipsis, white-space: nowrap which combined result in a guarantee that this text will stay on 1-line, and any longer text won't break the layout, and it even shows an ellipse for any extra long text.

Some ideas to consider summarized:

1. Expand height controls so that all blocks have a height control set including "height", min-height, max-height.
2. Provide an overflow selector with the common overflow property options.
3. Provide a nowrap/ellipsis/overflow-none toggle switch on title, paragraph and other text that is sometimes designed for 1-line output. I suggest a toggle here because I think it would be too complex to provide all those options and very few users would have any idea how to effectively use them... but a single toggle that just does "1-line, overflow hidden" would be simple to understand and visually the user would see how it works right away.