[RNMobile] Introduce grouping in the block settings inspector

packages/block-editor/src/components/block-settings/container.native.js

@@ -6,12 +6,18 @@ import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 import { InspectorControls } from '@wordpress/block-editor';
 
+/**
+ * Internal dependencies
+ */
+import styles from './container.native.scss';
+
 function BottomSheetSettings( { editorSidebarOpened, closeGeneralSidebar, ...props } ) {
 	return (
 		<BottomSheet
 			isVisible={ editorSidebarOpened }
 			onClose={ closeGeneralSidebar }
 			hideHeader
+			contentStyle={ styles.content }
 			{ ...props }
 		>
 			<InspectorControls.Slot	/>

packages/block-editor/src/components/block-settings/container.native.scss

@@ -0,0 +1,4 @@
+.content {
+	padding-left: 0;
+	padding-right: 0;
+}

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 padded={ false }>
 					<TextControl
 						label={ __( 'Clear All Settings' ) }
 						labelStyle={ styles.clearSettingsButton }
-						separatorType={ 'none' }
+						separatorType={ 'topFullWidth' }
 						onPress={ this.onClearSettings }
 					/>
 				</PanelBody>

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

@@ -59,6 +59,8 @@ 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 drawTopSeparator = drawSeparator && separatorType === 'topFullWidth';
 
 		const onCellPress = () => {
 			if ( isValueEditable ) {
@@ -87,6 +89,8 @@ class BottomSheetCell extends Component {
 				case 'leftMargin':
 					return leftMarginStyle;
 				case 'fullWidth':
+				case 'doubleFullWidth':
+				case 'topFullWidth':
 					return defaultSeparatorStyle;
 				case 'none':
 					return undefined;
@@ -165,6 +169,9 @@ class BottomSheetCell extends Component {
 				onPress={ onCellPress }
 				style={ { ...styles.clipToBounds, ...style } }
 			>
+				{ ( drawDoubleSeparator || drawTopSeparator ) && (
+					<View style={ separatorStyle() } />
+				) }
 				<View style={ styles.cellContainer }>
 					<View style={ styles.cellRowContainer }>
 						{ icon && (
@@ -180,7 +187,7 @@ class BottomSheetCell extends Component {
 					{ showValue && getValueComponent() }
 					{ children }
 				</View>
-				{ drawSeparator && (
+				{ ! drawTopSeparator && (
 					<View style={ separatorStyle() } />
 				) }
 			</TouchableOpacity>

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

@@ -1,23 +1,42 @@
 /**
  * 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( ) {
 		super( ...arguments );
 		this.state = {};
 	}
 
+	getContainerStyle() {
+		const { title, padded = true } = this.props;
+
+		if ( padded && title ) {
+			return styles.paddedPanelContainer;
+		} else if ( padded && ! title ) {
+			return [ styles.paddedPanelContainer, styles.noTitleContainer ];
+		} else if ( ! padded && title ) {
+			return [ styles.panelContainer ];
+		}
+		return [ styles.panelContainer, styles.noTitleContainer ];
+	}
+
 	render() {
-		const { children } = this.props;
+		const { children, title } = this.props;
+
 		return (
-			<View >
+			<View style={ this.getContainerStyle() }>
+				{ title && <Text style={ styles.sectionHeaderText }>{ title }</Text> }
 				{ children }
 			</View>
 		);

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

@@ -0,0 +1,19 @@
+.paddedPanelContainer {
+	padding: 0 16px;
+}
+
+.panelContainer {
+	padding: 0 0;
+}
+
+.noTitleContainer {
+	padding-top: 24;
+}
+
+.sectionHeaderText {
+	color: #87a6bc;
+	padding-top: 24;
+	padding-bottom: 8;
+	font-size: 14;
+	font-weight: 500;
+}