[RNMobile] Introduce grouping in the block settings inspector

packages/block-library/src/image/edit.native.js

@@ -236,13 +236,15 @@ class ImageEdit extends React.Component {
 						label={ __( 'Alt Text' ) }
 						value={ alt || '' }
 						valuePlaceholder={ __( 'None' ) }
-						separatorType={ 'fullWidth' }
-						onChange={ this.updateAlt }
+						separatorType={ 'none' }
+						onChangeValue={ this.updateAlt }
 					/>
+				</PanelBody>
+				<PanelBody>
 					<TextControl
 						label={ __( 'Clear All Settings' ) }
 						labelStyle={ styles.clearSettingsButton }
-						separatorType={ 'none' }
+						separatorType={ 'doubleFullWidth' }
 						onPress={ this.onClearSettings }
 					/>
 				</PanelBody>

packages/components/src/mobile/bottom-sheet/cell.native.js

@@ -59,6 +59,7 @@ class BottomSheetCell extends Component {
 		const cellLabelCenteredStyle = getStylesFromColorScheme( styles.cellLabelCentered, styles.cellTextDark );
 		const defaultLabelStyle = showValue || icon !== undefined ? cellLabelStyle : cellLabelCenteredStyle;
 		const drawSeparator = ( separatorType && separatorType !== 'none' ) || separatorStyle === undefined;
+		const drawDoubleSeparator = drawSeparator && separatorType === 'doubleFullWidth';
 
 		const onCellPress = () => {
 			if ( isValueEditable ) {
@@ -87,6 +88,7 @@ class BottomSheetCell extends Component {
 				case 'leftMargin':
 					return leftMarginStyle;
 				case 'fullWidth':
+				case 'doubleFullWidth':
 					return defaultSeparatorStyle;
 				case 'none':
 					return undefined;
@@ -165,6 +167,9 @@ class BottomSheetCell extends Component {
 				onPress={ onCellPress }
 				style={ { ...styles.clipToBounds, ...style } }
 			>
+				{ drawDoubleSeparator && (
+					<View style={ separatorStyle() } />
+				) }
 				<View style={ styles.cellContainer }>
 					<View style={ styles.cellRowContainer }>
 						{ icon && (

packages/components/src/panel/body.native.js

@@ -1,12 +1,16 @@
 /**
  * External dependencies
  */
-import { View } from 'react-native';
+import { Text, View } from 'react-native';
 
 /**
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import styles from './body.scss';
 
 export class PanelBody extends Component {
 	constructor( ) {
@@ -15,9 +19,10 @@ export class PanelBody extends Component {
 	}
 
 	render() {
-		const { children } = this.props;
+		const { children, title } = this.props;
 		return (
-			<View >
+			<View style={ styles.section }>
+				{ title && <Text style={ styles.sectionHeader }>{ title.toUpperCase() }</Text> }
 				{ children }
 			</View>
 		);

packages/components/src/panel/body.native.scss

@@ -0,0 +1,8 @@
+.sectionHeader {
+	color: $dark-gray-500;
+	padding-bottom: 8px;
+}
+
+.section {
+	padding: 8px 0;
+}