From f4b1fcf767a4aaa30caa245d0158ca80297a9563 Mon Sep 17 00:00:00 2001 From: Vipul Gupta Date: Thu, 29 Aug 2024 13:53:47 +0530 Subject: [PATCH 1/4] feat: Adds max limit to row span and column span. --- .../components/child-layout-control/index.js | 99 +++++++++++-------- 1 file changed, 60 insertions(+), 39 deletions(-) diff --git a/packages/block-editor/src/components/child-layout-control/index.js b/packages/block-editor/src/components/child-layout-control/index.js index 022acf2e1074a4..ff4f099a54f70d 100644 --- a/packages/block-editor/src/components/child-layout-control/index.js +++ b/packages/block-editor/src/components/child-layout-control/index.js @@ -6,7 +6,6 @@ import { __experimentalToggleGroupControlOption as ToggleGroupControlOption, __experimentalUnitControl as UnitControl, __experimentalInputControl as InputControl, - __experimentalHStack as HStack, __experimentalVStack as VStack, __experimentalToolsPanelItem as ToolsPanelItem, Flex, @@ -220,9 +219,15 @@ function GridControls( { } ); }; + // Calculate max column span based on current position and grid width + const maxColumnSpan = columnCount - ( columnStart ?? 1 ) + 1; + + // Calculate max row span based on current position and grid height + const maxRowSpan = rowCount - ( rowStart ?? 1 ) + 1; + return ( <> - - { - // Don't allow unsetting. - const newColumnSpan = - value === '' ? 1 : parseInt( value, 10 ); - onChange( { - columnStart, - rowStart, - rowSpan, - columnSpan: newColumnSpan, - } ); - } } - value={ columnSpan ?? 1 } - min={ 1 } - /> - { - // Don't allow unsetting. - const newRowSpan = - value === '' ? 1 : parseInt( value, 10 ); - onChange( { - columnStart, - rowStart, - columnSpan, - rowSpan: newRowSpan, - } ); - } } - value={ rowSpan ?? 1 } - min={ 1 } - /> - + + { + // Don't allow unsetting. + const newColumnSpan = + value === '' + ? 1 + : Math.min( + parseInt( value, 10 ), + maxColumnSpan + ); + onChange( { + columnStart, + rowStart, + rowSpan, + columnSpan: newColumnSpan, + } ); + } } + value={ columnSpan ?? 1 } + min={ 1 } + max={ maxColumnSpan } + /> + + + { + // Don't allow unsetting. + const newRowSpan = + value === '' + ? 1 + : Math.min( + parseInt( value, 10 ), + maxRowSpan + ); + onChange( { + columnStart, + rowStart, + columnSpan, + rowSpan: newRowSpan, + } ); + } } + value={ rowSpan ?? 1 } + min={ 1 } + max={ maxRowSpan } + /> + + { 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 From a9c8f3227234576b8f5eab7db6c66289a3c3be3c Mon Sep 17 00:00:00 2001 From: Vipul Gupta Date: Thu, 29 Aug 2024 14:26:23 +0530 Subject: [PATCH 2/4] fix: Adds default value for auto mode. --- .../block-editor/src/components/child-layout-control/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/child-layout-control/index.js b/packages/block-editor/src/components/child-layout-control/index.js index ff4f099a54f70d..51ec92ef69ca3d 100644 --- a/packages/block-editor/src/components/child-layout-control/index.js +++ b/packages/block-editor/src/components/child-layout-control/index.js @@ -220,10 +220,10 @@ function GridControls( { }; // Calculate max column span based on current position and grid width - const maxColumnSpan = columnCount - ( columnStart ?? 1 ) + 1; + const maxColumnSpan = ( columnCount ?? 3 ) - ( columnStart ?? 1 ) + 1; // Calculate max row span based on current position and grid height - const maxRowSpan = rowCount - ( rowStart ?? 1 ) + 1; + const maxRowSpan = ( rowCount ?? 1 ) - ( rowStart ?? 1 ) + 1; return ( <> From 3e86284a5160149b512a4476f0399c43449883cb Mon Sep 17 00:00:00 2001 From: Vipul Gupta Date: Fri, 11 Jul 2025 11:26:39 +0530 Subject: [PATCH 3/4] fix: Adds checks related to experiment mode. --- .../components/child-layout-control/index.js | 37 ++++++++++--------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/packages/block-editor/src/components/child-layout-control/index.js b/packages/block-editor/src/components/child-layout-control/index.js index 218e2617f8f64d..771a4279592cfa 100644 --- a/packages/block-editor/src/components/child-layout-control/index.js +++ b/packages/block-editor/src/components/child-layout-control/index.js @@ -235,10 +235,15 @@ function GridControls( { }; // Calculate max column span based on current position and grid width - const maxColumnSpan = ( columnCount ?? 3 ) - ( columnStart ?? 1 ) + 1; + const maxColumnSpan = columnCount + ? columnCount - ( columnStart ?? 1 ) + 1 + : undefined; // Calculate max row span based on current position and grid height - const maxRowSpan = ( rowCount ?? 1 ) - ( rowStart ?? 1 ) + 1; + const maxRowSpan = + window.__experimentalEnableGridInteractivity && rowCount + ? rowCount - ( rowStart ?? 1 ) + 1 + : undefined; return ( <> @@ -258,17 +263,16 @@ function GridControls( { onChange={ ( value ) => { // Don't allow unsetting. const newColumnSpan = - value === '' - ? 1 - : Math.min( - parseInt( value, 10 ), - maxColumnSpan - ); + value === '' ? 1 : parseInt( value, 10 ); + const constrainedValue = maxColumnSpan + ? Math.min( newColumnSpan, maxColumnSpan ) + : newColumnSpan; + onChange( { columnStart, rowStart, rowSpan, - columnSpan: newColumnSpan, + columnSpan: constrainedValue, } ); } } value={ columnSpan ?? 1 } @@ -282,19 +286,17 @@ function GridControls( { label={ __( 'Row span' ) } type="number" onChange={ ( value ) => { - // Don't allow unsetting. const newRowSpan = - value === '' - ? 1 - : Math.min( - parseInt( value, 10 ), - maxRowSpan - ); + value === '' ? 1 : parseInt( value, 10 ); + const constrainedValue = maxRowSpan + ? Math.min( newRowSpan, maxRowSpan ) + : newRowSpan; + onChange( { columnStart, rowStart, columnSpan, - rowSpan: newRowSpan, + rowSpan: constrainedValue, } ); } } value={ rowSpan ?? 1 } @@ -303,6 +305,7 @@ function GridControls( { /> + { 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 From 4d4df6e83365ea49ffc00db6c8ddf21ddb2870c7 Mon Sep 17 00:00:00 2001 From: Vipul Gupta Date: Mon, 14 Jul 2025 12:03:39 +0530 Subject: [PATCH 4/4] feat: Remove default value for columns intially. --- .../src/components/child-layout-control/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/child-layout-control/index.js b/packages/block-editor/src/components/child-layout-control/index.js index 771a4279592cfa..27a9bbfd1e9617 100644 --- a/packages/block-editor/src/components/child-layout-control/index.js +++ b/packages/block-editor/src/components/child-layout-control/index.js @@ -209,7 +209,7 @@ function GridControls( { panelId, } ) { const { columnStart, rowStart, columnSpan, rowSpan } = childLayout; - const { columnCount = 3, rowCount } = parentLayout ?? {}; + const { columnCount, rowCount } = parentLayout ?? {}; const rootClientId = useSelect( ( select ) => select( blockEditorStore ).getBlockRootClientId( panelId ) ); @@ -217,7 +217,7 @@ function GridControls( { useDispatch( blockEditorStore ); const getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell( rootClientId, - columnCount + columnCount || 3 ); const hasStartValue = () => !! columnStart || !! rowStart; const hasSpanValue = () => !! columnSpan || !! rowSpan; @@ -306,7 +306,7 @@ function GridControls( { - { window.__experimentalEnableGridInteractivity && columnCount && ( + { window.__experimentalEnableGridInteractivity && ( // 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 // sized incorrectly.