Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tellthemachines merged 6 commits into from
Jul 15, 2025
Merged

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

Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f4b1fcf
feat: Adds max limit to row span and column span.
vipul0425 Aug 29, 2024
a9c8f32
fix: Adds default value for auto mode.
vipul0425 Aug 29, 2024
e11923e
Merge branch 'trunk' of github.com:WordPress/gutenberg into feat/issu…
vipul0425 Jul 10, 2025
3e86284
fix: Adds checks related to experiment mode.
vipul0425 Jul 11, 2025
4d4df6e
feat: Remove default value for columns intially.
vipul0425 Jul 14, 2025
6255f74
Merge branch 'trunk' of github.com:WordPress/gutenberg into feat/issu…
vipul0425 Jul 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 63 additions & 39 deletions packages/block-editor/src/components/child-layout-control/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
__experimentalUnitControl as UnitControl,
__experimentalInputControl as InputControl,
__experimentalHStack as HStack,
__experimentalVStack as VStack,
__experimentalToolsPanelItem as ToolsPanelItem,
__experimentalUseCustomUnits as useCustomUnits,
Expand Down Expand Up @@ -235,53 +234,78 @@ function GridControls( {
} );
};

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

@tellthemachines tellthemachines Jul 14, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)

@vipul0425 vipul0425 Jul 14, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

: undefined;

// Calculate max row span based on current position and grid height
const maxRowSpan =
window.__experimentalEnableGridInteractivity && rowCount
? rowCount - ( rowStart ?? 1 ) + 1
: undefined;

return (
<>
<HStack
<Flex
as={ ToolsPanelItem }
hasValue={ hasSpanValue }
label={ __( 'Grid span' ) }
onDeselect={ resetGridSpans }
isShownByDefault={ isShownByDefault }
panelId={ panelId }
>
<InputControl
size="__unstable-large"
label={ __( 'Column span' ) }
type="number"
onChange={ ( value ) => {
// Don't allow unsetting.
const newColumnSpan =
value === '' ? 1 : parseInt( value, 10 );
onChange( {
columnStart,
rowStart,
rowSpan,
columnSpan: newColumnSpan,
} );
} }
value={ columnSpan ?? 1 }
min={ 1 }
/>
<InputControl
size="__unstable-large"
label={ __( 'Row span' ) }
type="number"
onChange={ ( value ) => {
// Don't allow unsetting.
const newRowSpan =
value === '' ? 1 : parseInt( value, 10 );
onChange( {
columnStart,
rowStart,
columnSpan,
rowSpan: newRowSpan,
} );
} }
value={ rowSpan ?? 1 }
min={ 1 }
/>
</HStack>
<FlexItem style={ { width: '50%' } }>

@tellthemachines tellthemachines Nov 21, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@vipul0425 vipul0425 Jul 11, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

image

<InputControl
size="__unstable-large"
label={ __( 'Column span' ) }
type="number"
onChange={ ( value ) => {
// Don't allow unsetting.
const newColumnSpan =
value === '' ? 1 : parseInt( value, 10 );
const constrainedValue = maxColumnSpan
? Math.min( newColumnSpan, maxColumnSpan )
: newColumnSpan;

onChange( {
columnStart,
rowStart,
rowSpan,
columnSpan: constrainedValue,
} );
} }
value={ columnSpan ?? 1 }
min={ 1 }
max={ maxColumnSpan }
/>
</FlexItem>
<FlexItem style={ { width: '50%' } }>
<InputControl
size="__unstable-large"
label={ __( 'Row span' ) }
type="number"
onChange={ ( value ) => {
const newRowSpan =
value === '' ? 1 : parseInt( value, 10 );
const constrainedValue = maxRowSpan
? Math.min( newRowSpan, maxRowSpan )
: newRowSpan;

onChange( {
columnStart,
rowStart,
columnSpan,
rowSpan: constrainedValue,
} );
} }
value={ rowSpan ?? 1 }
min={ 1 }
max={ maxRowSpan }
/>
</FlexItem>
</Flex>

{ window.__experimentalEnableGridInteractivity && columnCount && (
// Use Flex with an explicit width on the FlexItem instead of HStack to
// work around an issue in webkit where inputs with a max attribute are
Expand Down