Post Template: Implement Stack on mobile toggle within the Grid View

[yogeshbhutkar]

What?

Closes #34145
Part of #41405

This PR adds a "Stack on mobile" toggle to Grid View, allowing users to display the specified number of columns on mobile devices, instead of defaulting to a single-column layout.

Why?

Currently, items are always stacked on mobile devices, which limits design flexibility and layout options on mobile devices.

How?

A corresponding control has been introduced, and the grid-template-columns: 1fr; rule is now conditionally applied based on the corresponding attribute.

Testing Instructions

1. Create a new post.
2. Add a Query Loop block with Photo blog posts (available in TT5) pattern.
3. Select the Post Template block and ensure that it's in Grid View.
4. Choose the Grid Item Position as Manual and choose 3 columns.
5. Disable Stack on mobile.
6. On mobile layout, confirm that the individual elements are displayed in a column of 3.

Testing Instructions for Keyboard

Same.

Screencast

pr-demo.mov

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @DHWP, @Paldom, @osirismqz, @palmsout, @chuckpearson.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: DHWP, Paldom, osirismqz, palmsout, chuckpearson.

Co-authored-by: yogeshbhutkar <[email protected]>
Co-authored-by: Infinite-Null <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: tellthemachines <[email protected]>
Co-authored-by: beafialho <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[Infinite-Null]

Hey @yogeshbhutkar,
Thanks for the PR — I tested it and everything seems to be working perfectly. However, while testing, I noticed that the placeholder svg are overflowing, which causes some inconsistency in the UI.

Although this isn’t in the scope of your PR, it would be good to address it in a follow-up.

[t-hamano]

I think the "Stack on mobile" setting was necessary when the layout support was still insufficient, so I think it's best to avoid newly adding such a setting. Furthermore, the current block breakpoint is fixed, which I don't think is ideal.

I'm not very familiar with the layout support, but can we introduce the "Minimum column width" setting, like in the Grid block? Maybe there might be some technical barrier.

cc @tellthemachines, @andrewserong

[yogeshbhutkar]

Can we introduce the "Minimum column width" setting, like in the Grid block?

I'm not sure if I follow, but "Minimum column width" is already a part of the Post Template block.

See:

To summarise the problem, users have requested an option to prevent elements within the Post Template block from stacking in Grid View on mobile devices. This control addresses that need, as elements are currently forced to stack due to the following rule:

gutenberg/packages/block-library/src/post-template/style.scss

Lines 34 to 36 in 53b643c

	.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid {
	grid-template-columns: 1fr;
	}

Example: If I want to display two images in a single row (left and right column) on both Desktop and Mobile, it's currently not possible.

Removing the rule would prevent us from supporting scenarios where a user specifies a certain number of columns (e.g., 7) but still expects them to stack on mobile devices.

As you mentioned, the "Minimum column width" setting can be used, but it doesn't offer precise control over the number of columns, something that may be necessary for certain design requirements. (Moreover, it still wouldn’t affect the layout on mobile devices due to the enforced stacking behaviour.)

The current block breakpoint is fixed, which I don't think is ideal.

Maybe, but a similar logic is implemented within the Columns block for a very similar functionality.

gutenberg/packages/block-library/src/columns/style.scss

Lines 31 to 33 in fabce65

	&:not(.is-not-stacked-on-mobile) > .wp-block-column {
	@media (max-width: #{ ($break-medium - 1) }) {
	// Responsiveness: Show at most one columns on mobile. This must be

cc: @t-hamano

[tellthemachines]

As you mentioned, the "Minimum column width" setting can be used, but it doesn't offer precise control over the number of columns, something that may be necessary for certain design requirements.

Yeah, "Minimum column width" should be used when you want things to stack on mobile. But if you want precise control over the column number instead, you can use the "Manual" option that allows you to specify column count:

There are further improvements to grid that will allow for more fine-grained control over responsive behaviour, but for now I think the current controls answer the basic need the issue describes. That issue should probably have been closed when #49050 was merged, but I'm afraid I missed it at the time!

[yogeshbhutkar]

If you want precise control over the column number instead, you can use the "Manual" option that allows you to specify the column count

@tellthemachines, I'm aware of this. The whole point of the issue is that the column number still doesn't take effect on mobile devices, they always stack up.

See (from Trunk):

Screen.Recording.2025-08-07.at.9.44.06.AM.mov

The control introduced in this PR lets the user disable this default stacking behaviour to display the contents within Grids even on mobile devices for the Post Template block.

[tellthemachines]

@tellthemachines, I'm aware of this. The whole point of the issue is that the column number still doesn't take effect on mobile devices, they always stack up.

Ohhh you're right, there was a CSS override added for back compat 🤦 so layouts on existing websites wouldn't suddenly change their behaviour.

Hmm the experimental grid controls can solve this problem when they ship, because at that point we can remove the override and assign responsive behaviour that can be switched off to existing websites.

[yogeshbhutkar]

Hmm the experimental grid controls can solve this problem when they ship, because at that point we can remove the override and assign responsive behaviour that can be switched off to existing websites.

I believe we need to decide whether to provide this control now (through this PR), based on several user requests in the issue, or wait for the experimental Grid controls to be shipped.

Since I'm not aware of the timeline for those experimental controls, would you recommend closing this PR in favour of it?

Edit: We could also choose to support this use case using the proposed control as an interim solution until the experimental controls become available. What do you think?

[tellthemachines]

Edit: We could also choose to support this use case using the proposed control as an interim solution until the experimental controls become available. What do you think?

The problem is we'd then have to support layouts using the settings defined by that control forever 😅 or we'd have to do a complicated migration.

I understand the current status is not optimal for theme developers, but it is possible to work around it by adding some CSS to the theme stylesheet. Because of the back compat issue, I recommend closing this PR.

Sorry about this and thanks in any case for your contribution @yogeshbhutkar!