[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

@@ -22,6 +22,7 @@ import {
 	Toolbar,
 	ToolbarButton,
 	PanelBody,
+	PanelActions,
 } from '@wordpress/components';
 
 import {
@@ -240,6 +241,8 @@ export class ImageEdit extends React.Component {
 		const { attributes, isSelected } = this.props;
 		const { url, height, width, alt, href, id, linkTarget, sizeSlug } = attributes;
 
+		const actions = [ { label: __( 'Clear All Settings' ), onPress: this.onClearSettings } ];
+
 		const getToolbarEditButton = ( open ) => (
 			<BlockControls>
 				<Toolbar>
@@ -286,16 +289,11 @@ export class ImageEdit extends React.Component {
 						label={ __( 'Alt Text' ) }
 						value={ alt || '' }
 						valuePlaceholder={ __( 'None' ) }
-						separatorType={ 'fullWidth' }
-						onChange={ this.updateAlt }
-					/>
-					<TextControl
-						label={ __( 'Clear All Settings' ) }
-						labelStyle={ styles.clearSettingsButton }
 						separatorType={ 'none' }
-						onPress={ this.onClearSettings }
+						onChangeValue={ this.updateAlt }
 					/>
 				</PanelBody>
+				<PanelActions actions={ actions } />
 			</InspectorControls>
 		);
 

packages/block-library/src/image/styles.native.scss

@@ -18,10 +18,6 @@
 	align-items: center;
 }
 
-.clearSettingsButton {
-	color: $alert-red;
-}
-
 .modalIcon {
 	width: 80px;
 	height: 80px;

packages/components/src/index.native.js

@@ -11,6 +11,7 @@ export { createSlotFill, Slot, Fill, Provider as SlotFillProvider } from './slot
 export { default as BaseControl } from './base-control';
 export { default as TextareaControl } from './textarea-control';
 export { default as PanelBody } from './panel/body';
+export { default as PanelActions } from './panel/actions';
 export { default as Button } from './button';
 export { default as TextControl } from './text-control';
 export { default as ToggleControl } from './toggle-control';

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

@@ -63,6 +63,7 @@ class BottomSheetCell extends Component {
 		const defaultLabelStyle = showValue || icon !== undefined ? cellLabelStyle : defaultMissingIconAndValue;
 
 		const drawSeparator = ( separatorType && separatorType !== 'none' ) || separatorStyle === undefined;
+		const drawTopSeparator = drawSeparator && separatorType === 'topFullWidth';
 
 		const onCellPress = () => {
 			if ( isValueEditable ) {
@@ -91,6 +92,7 @@ class BottomSheetCell extends Component {
 				case 'leftMargin':
 					return leftMarginStyle;
 				case 'fullWidth':
+				case 'topFullWidth':
 					return defaultSeparatorStyle;
 				case 'none':
 					return undefined;
@@ -169,6 +171,9 @@ class BottomSheetCell extends Component {
 				onPress={ onCellPress }
 				style={ { ...styles.clipToBounds, ...style } }
 			>
+				{ drawTopSeparator && (
+					<View style={ separatorStyle() } />
+				) }
 				<View style={ styles.cellContainer }>
 					<View style={ styles.cellRowContainer }>
 						{ icon && (
@@ -177,14 +182,14 @@ class BottomSheetCell extends Component {
 								<View style={ platformStyles.labelIconSeparator } />
 							</View>
 						) }
-						<Text numberOfLines={ 1 } style={ { ...defaultLabelStyle, ...labelStyle } }>
+						<Text numberOfLines={ 1 } style={ [ defaultLabelStyle, labelStyle ] }>
 							{ label }
 						</Text>
 					</View>
 					{ showValue && getValueComponent() }
 					{ children }
 				</View>
-				{ drawSeparator && (
+				{ ! drawTopSeparator && (
 					<View style={ separatorStyle() } />
 				) }
 			</TouchableOpacity>

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

@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	TextControl,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import styles from './actions.scss';
+
+function PanelActions( { actions } ) {
+	return (
+		<View style={ styles.panelActionsContainer }>
+			{ actions.map( ( { label, onPress } ) => {
+				return (
+					<TextControl
+						label={ label }
+						separatorType="topFullWidth"
+						onPress={ onPress }
+						labelStyle={ styles.defaultLabelStyle }
+						key={ label }
+					/>
+				);
+			} ) }
+		</View>
+	);
+}
+
+export default PanelActions;

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

@@ -0,0 +1,7 @@
+.panelActionsContainer {
+	padding-top: 24;
+}
+
+.defaultLabelStyle {
+	color: $alert-red;
+}

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,11 @@ export class PanelBody extends Component {
 	}
 
 	render() {
-		const { children } = this.props;
+		const { children, title } = this.props;
+
 		return (
-			<View >
+			<View style={ styles.panelContainer }>
+				{ title && <Text style={ styles.sectionHeaderText }>{ title }</Text> }
 				{ children }
 			</View>
 		);

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

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