diff --git a/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts index 00429caaba56..ffaebb2d3f6b 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts +++ b/editor/src/components/canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy.ts @@ -126,7 +126,7 @@ export const rearrangeGridSwapStrategy: CanvasStrategyFactory = ( } } -const GridPositioningProps: Array = [ +export const GridPositioningProps: Array = [ 'gridColumn', 'gridRow', 'gridColumnStart', diff --git a/editor/src/components/inspector/sections/style-section/container-subsection/grid-cell-subsection.tsx b/editor/src/components/inspector/sections/style-section/container-subsection/grid-cell-subsection.tsx index 6cfcc258cb5e..3f206d40aab6 100644 --- a/editor/src/components/inspector/sections/style-section/container-subsection/grid-cell-subsection.tsx +++ b/editor/src/components/inspector/sections/style-section/container-subsection/grid-cell-subsection.tsx @@ -38,6 +38,9 @@ import { isEmptyInputValue, } from '../../../common/css-utils' import { UIGridRow } from '../../../widgets/ui-grid-row' +import { deleteProperties } from '../../../../canvas/commands/delete-properties-command' +import { GridPositioningProps } from '../../../../canvas/canvas-strategies/strategies/rearrange-grid-swap-strategy' +import { styleP } from '../../../inspector-common' type CellAdjustMode = 'dimensions' | 'boundaries' @@ -100,6 +103,18 @@ export const GridPlacementSubsection = React.memo(() => { dispatch([applyCommandsAction(commands)]) }, [dispatch, cell, gridTemplate]) + const removePlacementProps = React.useCallback(() => { + if (cell == null) { + return + } + + dispatch([ + applyCommandsAction([ + deleteProperties('always', cell.elementPath, GridPositioningProps.map(styleP)), + ]), + ]) + }, [dispatch, cell]) + if (cell == null || gridTemplate == null) { return null } @@ -122,6 +137,12 @@ export const GridPlacementSubsection = React.memo(() => { , )} + {unless( + isAllDefaults, + + + , + )} {unless( isAllDefaults,