Add gridGap unit control to native mobile

WordPress · Jun 2, 2021 · 18fd3d2 · 18fd3d2
1 parent 33333e0
commit 18fd3d2
Showing 1 changed file with 26 additions and 1 deletion.
diff --git a/packages/block-library/src/columns/edit.native.js b/packages/block-library/src/columns/edit.native.js
@@ -95,6 +95,7 @@ function ColumnsEditContainer( {
 	isSelected,
 	onDeleteBlock,
 	innerWidths,
+	setAttributes,
 	updateInnerColumnWidth,
 	editorSidebarOpened,
 } ) {
@@ -103,7 +104,12 @@ function ColumnsEditContainer( {
 	const screenWidth = Math.floor( Dimensions.get( 'window' ).width );
 	const globalStyles = useContext( GlobalStylesContext );
 
-	const { verticalAlignment, align } = attributes;
+	const {
+		verticalAlignment,
+		align,
+		gridGap,
+		gridGapUnit = 'em',
+	} = attributes;
 	const { width } = sizes || {};
 
 	const units = useCustomUnits( {
@@ -189,6 +195,14 @@ function ColumnsEditContainer( {
 		onChangeWidth( nextWidth, valueUnit, columnId );
 	};
 
+	const onGridGapChange = ( value ) => {
+		setAttributes( { gridGap: value } );
+	};
+
+	const onGridGapUnitChange = ( value ) => {
+		setAttributes( { gridGapUnit: value } );
+	};
+
 	const getColumnsSliders = useMemo( () => {
 		if ( ! editorSidebarOpened || ! isSelected ) {
 			return null;
@@ -257,6 +271,17 @@ function ColumnsEditContainer( {
 								type="stepper"
 							/>
 							{ getColumnsSliders }
+							<UnitControl
+								label={ __( 'Gap' ) }
+								min={ 0 }
+								max={ 30 }
+								unit={ gridGapUnit }
+								value={ gridGap }
+								onChange={ onGridGapChange }
+								onUnitChange={ onGridGapUnitChange }
+								units={ units }
+								key={ gridGapUnit }
+							/>
 						</PanelBody>
 						<PanelBody>
 							<FooterMessageControl