feat (icon list): added row gap option. (#2147)

* Add slider for list gap.

* Fix rowGap setting not being persisted.

Author: gumacahin

src/block/icon-list/edit.js

@@ -218,6 +218,14 @@ const Edit = props => {
 						responsive="all"
 					/>
 
+					<AdvancedRangeControl
+						label={ __( 'Row Gap', i18n ) }
+						attribute="rowGap"
+						min="0"
+						sliderMax="50"
+						responsive="all"
+					/>
+
 					<AdvancedRangeControl
 						label={ __( 'Icon Gap', i18n ) }
 						attribute="iconGap"

src/block/icon-list/schema.js

@@ -81,6 +81,11 @@ export const iconListAttributes = {
 		type: 'number',
 		default: '',
 	},
+	rowGap: {
+		stkResponsive: true,
+		type: 'number',
+		default: '',
+	},
 }
 
 export const attributes = ( version = VERSION ) => {

src/block/icon-list/style.js

@@ -114,6 +114,13 @@ const getStyleParams = options => {
 			responsive: 'all',
 			format: '%spx',
 		},
+		{
+			selector: 'li',
+			styleRule: 'marginBottom',
+			attrName: 'rowGap',
+			responsive: 'all',
+			format: '%spx',
+		},
 		{
 			selector: [ 'ul', 'ol' ],
 			styleRule: 'paddingLeft',