[Type] Enhancement - Adds max limit to row span and column span in grid. #64895

vipul0425 · 2024-08-29T09:03:11Z

What?

Why?

There was no maximum limit set for row span and column span, allowing users to set values larger than the actual number of rows or columns.

How?

It calculates the max column and row span based on the columns/row count and current position.

Testing Instructions

Adds the grid block.
Insert any block into it example image block.
Try to increase/decrease the row/column span in the style tab of the block. It should not exceed the max columns/rows.

Screenshots or screencast

Screen.Recording.2024-08-29.at.2.31.25.PM.mov

github-actions · 2024-08-29T09:03:26Z

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.

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

Co-authored-by: vipul0425 <vipulgupta003@git.wordpress.org>
Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: noisysocks <noisysocks@git.wordpress.org>

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

jameskoster · 2024-11-20T13:00:39Z

Makes sense to me :)

tellthemachines

Thanks for the PR!

Unfortunately, #63967 is lacking some context in its description 😬 This issue mostly applies to the experimental grid functionality behind the experiment flag.
To enable it, go to "Experiments" under the "Gutenberg" wp-admin menu item.
To see it in the code, look at where we're checking for window.__experimentalEnableGridInteractivity being enabled.

As mentioned in the comments below, I think we could use the column span constraint in stable grid when a columnCount exists, but not otherwise.

The row span constraint doesn't make sense outside of the experiment flag, as we can't currently set row count in stable.

A general purpose tip for submitting PRs in Gutenberg:

Make sure you manually test your changes in your local development environment before submitting the PR. Some of the issues I'm seeing in this PR could have easily been detected by testing the changes in a block with grid layout against its current state in trunk.
If you're implementing something as described in an issue (as I'm guessing was the case here!) and in testing it doesn't seem to work that well, feel free to start a discussion about it on the issue. Sometimes things we think might work don't in practice! And that's OK. It just means we need to think about it some more.

And a small workflow tip 🙂

"Feat" isn't used as a PR descriptor in this repo. We use GitHub labels instead: "[Type] Feature" labels for major features only, "[Type] Enhancement" for small improvements such as this one, or "[Type] Bug" for stuff that's broken.

tellthemachines · 2024-11-21T04:27:08Z

packages/block-editor/src/components/child-layout-control/index.js

-					min={ 1 }
-				/>
-			</HStack>
+				<FlexItem style={ { width: '50%' } }>


Why change from HStack to Flex and FlexItem? HStack uses less markup to the same effect.

I tried, but by using the max attribute it wasn’t applying the size as expected. So, I followed a similar approach to the one Robert used in the Grid Placement section below.

tellthemachines · 2024-11-21T04:38:06Z

packages/block-editor/src/components/child-layout-control/index.js

+									: Math.min(
+											parseInt( value, 10 ),
+											maxColumnSpan
+									  );


We should only set a maxColumnSpan if the columnCount exists. Otherwise, when the grid is in auto mode and can have as many columns as fit on the screen, it won't be possible to increase the column count beyond 3.

tellthemachines · 2024-11-21T04:39:17Z

packages/block-editor/src/components/child-layout-control/index.js

+								value === ''
+									? 1
+									: Math.min(
+											parseInt( value, 10 ),


I don't believe we should set a maxRowSpan unless it's for manual mode under the experimental flag, because in the current stable grid it's not possible to set a row count. This effectively means that items will never be able to span more than one row.

…e-63967

vipul0425 · 2025-07-11T06:05:20Z

Hi @tellthemachines, Thank you so much for the review. 🙇

I’ve updated the PR. I also noticed that when we set the maxColumnSpan based on the columnCount, it restricts the span to 3—since the default columnCount is set to 3 initially and the parent layout doesn’t define this property. However, it works as expected once we switch to manual mode, as shown in the video.

Should we check against the parentLayout's columnCount directly instead? I couldn’t find any other property related to the layout mode. Alternatively, should we consider combining it with rowCount to handle edge cases more accurately?

screencast.mp4

tellthemachines

Thanks for persisting with this! It looks pretty close, but I found a small bug. Details in the comment below.

tellthemachines · 2025-07-14T01:13:57Z

packages/block-editor/src/components/child-layout-control/index.js

@@ -235,53 +234,78 @@ function GridControls( {
 		} );
 	};

+	// Calculate max column span based on current position and grid width
+	const maxColumnSpan = columnCount
+		? columnCount - ( columnStart ?? 1 ) + 1


columnCount is always going to exist here because we're setting a default value of 3 when we get it from parentLayout above. The problem with that is in auto layouts with no columnCount defined, we're now unable to set a columnCount above 3 on child blocks.

I think we'll have to remove that default value in order to fix this, and maybe pass it instead to useGetNumberOfBlocksBeforeCell if columnCount is undefined.
We should also remove columnCount from the condition that allows the grid placement controls to display below (that shouldn't make a difference because columnCount is always true currently).

(Later we might want to consider not displaying the grid placement controls for children of auto grids, but that can be done in another PR)

Since we've now removed the default columnCount, the grid placement controls in Auto mode are no longer visible, after removing the columnCount check for their visibility. So, this change has been included in the same PR.

tellthemachines

Thanks for the update, changes LGTM!

CI failures seem unrelated to the PR so they should go away if you rebase this branch. Are you able to do that?

…e-63967

vipul0425 · 2025-07-15T04:42:34Z

Sure @tellthemachines

vipul0425 added 2 commits August 29, 2024 13:53

feat: Adds max limit to row span and column span.

f4b1fcf

fix: Adds default value for auto mode.

a9c8f32

vipul0425 requested a review from ellatrix as a code owner August 29, 2024 09:03

amitraj2203 added the [Feature] Layout Layout block support, its UI controls, and style output. label Aug 29, 2024

amitraj2203 assigned vipul0425 Aug 29, 2024

amitraj2203 requested review from noisysocks and jameskoster November 20, 2024 08:40

jameskoster requested a review from a team November 20, 2024 12:59

jameskoster requested a review from tellthemachines November 20, 2024 13:00

tellthemachines reviewed Nov 21, 2024

View reviewed changes

vipul0425 added 2 commits July 10, 2025 16:30

Merge branch 'trunk' of github.com:WordPress/gutenberg into feat/issu…

e11923e

…e-63967

fix: Adds checks related to experiment mode.

3e86284

vipul0425 changed the title ~~Feat: Adds max limit to row span and column span in grid.~~ [Type] Enhancement - Adds max limit to row span and column span in grid. Jul 11, 2025

vipul0425 requested a review from tellthemachines July 11, 2025 06:05

tellthemachines added the [Type] Enhancement A suggestion for improvement. label Jul 13, 2025

tellthemachines reviewed Jul 14, 2025

View reviewed changes

feat: Remove default value for columns intially.

4d4df6e

vipul0425 requested a review from tellthemachines July 14, 2025 06:39

tellthemachines approved these changes Jul 15, 2025

View reviewed changes

Merge branch 'trunk' of github.com:WordPress/gutenberg into feat/issu…

6255f74

…e-63967

tellthemachines merged commit 795734c into WordPress:trunk Jul 15, 2025
68 of 69 checks passed

github-actions bot added this to the Gutenberg 21.3 milestone Jul 15, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Type] Enhancement - Adds max limit to row span and column span in grid. #64895

[Type] Enhancement - Adds max limit to row span and column span in grid. #64895

Uh oh!

vipul0425 commented Aug 29, 2024

Uh oh!

github-actions bot commented Aug 29, 2024 •

edited

Loading

Uh oh!

jameskoster commented Nov 20, 2024

Uh oh!

tellthemachines left a comment

Uh oh!

tellthemachines Nov 21, 2024

Uh oh!

vipul0425 Jul 11, 2025

Uh oh!

tellthemachines Nov 21, 2024

Uh oh!

tellthemachines Nov 21, 2024

Uh oh!

vipul0425 commented Jul 11, 2025 •

edited

Loading

Uh oh!

tellthemachines left a comment

Uh oh!

tellthemachines Jul 14, 2025

Uh oh!

vipul0425 Jul 14, 2025

Uh oh!

tellthemachines left a comment

Uh oh!

vipul0425 commented Jul 15, 2025

Uh oh!

Uh oh!

Uh oh!

[Type] Enhancement - Adds max limit to row span and column span in grid. #64895

[Type] Enhancement - Adds max limit to row span and column span in grid. #64895

Uh oh!

Conversation

vipul0425 commented Aug 29, 2024

What?

Why?

How?

Testing Instructions

Screenshots or screencast

Uh oh!

github-actions bot commented Aug 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jameskoster commented Nov 20, 2024

Uh oh!

tellthemachines left a comment

Choose a reason for hiding this comment

Uh oh!

tellthemachines Nov 21, 2024

Choose a reason for hiding this comment

Uh oh!

vipul0425 Jul 11, 2025

Choose a reason for hiding this comment

Uh oh!

tellthemachines Nov 21, 2024

Choose a reason for hiding this comment

Uh oh!

tellthemachines Nov 21, 2024

Choose a reason for hiding this comment

Uh oh!

vipul0425 commented Jul 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tellthemachines left a comment

Choose a reason for hiding this comment

Uh oh!

tellthemachines Jul 14, 2025

Choose a reason for hiding this comment

Uh oh!

vipul0425 Jul 14, 2025

Choose a reason for hiding this comment

Uh oh!

tellthemachines left a comment

Choose a reason for hiding this comment

Uh oh!

vipul0425 commented Jul 15, 2025

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Aug 29, 2024 •

edited

Loading

vipul0425 commented Jul 11, 2025 •

edited

Loading