[RNMobile] refactor InspectorControls

packages/block-editor/src/components/block-list/block-mobile-toolbar.native.js

@@ -16,7 +16,7 @@ import { compose } from '@wordpress/compose';
  */
 import styles from './block-mobile-toolbar.scss';
 import BlockMover from '../block-mover';
-import InspectorControls from '../inspector-controls';
+import { BlockSettingsButton } from '../block-settings';
 
 const BlockMobileToolbar = ( {
 	clientId,
@@ -28,7 +28,7 @@ const BlockMobileToolbar = ( {
 
 		<View style={ styles.spacer } />
 
-		<InspectorControls.Slot />
+		<BlockSettingsButton.Slot />
 
 		<ToolbarButton
 			title={

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

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill, ToolbarButton } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { withDispatch } from '@wordpress/data';
+
+const { Fill, Slot } = createSlotFill( 'SettingsToolbarButton' );
+
+const SettingsButton = ( { openGeneralSidebar } ) =>
+	<ToolbarButton
+		title={ __( 'Open Settings' ) }
+		icon="admin-generic"
+		onClick={ openGeneralSidebar }
+	/>;
+
+const SettingsButtonFill = ( props ) => (
+	<Fill>
+		<SettingsButton { ...props } />
+	</Fill>
+);
+
+const SettingsToolbarButton = withDispatch( ( dispatch ) => {
+	const { openGeneralSidebar } = dispatch( 'core/edit-post' );
+
+	return {
+		openGeneralSidebar: () => openGeneralSidebar( 'edit-post/block' ),
+	};
+} )( SettingsButtonFill );
+
+SettingsToolbarButton.Slot = Slot;
+
+export default SettingsToolbarButton;

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

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { BottomSheet } from '@wordpress/components';
+import { withSelect, withDispatch } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
+import { InspectorControls } from '@wordpress/block-editor';
+
+function BottomSheetSettings( { editorSidebarOpened, closeGeneralSidebar, ...props } ) {
+	return (
+		<BottomSheet
+			isVisible={ editorSidebarOpened }
+			onClose={ closeGeneralSidebar }
+			hideHeader
+			{ ...props }
+		>
+			<InspectorControls.Slot	/>
+		</BottomSheet>
+	);
+}
+
+export default compose( [
+	withSelect( ( select ) => {
+		const {
+			isEditorSidebarOpened,
+		} = select( 'core/edit-post' );
+
+		return {
+			editorSidebarOpened: isEditorSidebarOpened(),
+		};
+	} ),
+	withDispatch( ( dispatch ) => {
+		const { closeGeneralSidebar } = dispatch( 'core/edit-post' );
+
+		return {
+			closeGeneralSidebar,
+		};
+	} ),
+]
+)( BottomSheetSettings );

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

@@ -0,0 +1,2 @@
+export { default as BlockSettingsButton } from './button';
+export { default as BottomSheetSettings } from './container';

packages/block-editor/src/components/index.native.js

@@ -22,6 +22,7 @@ export { default as MediaUploadProgress } from './media-upload-progress';
 export { default as URLInput } from './url-input';
 export { default as BlockInvalidWarning } from './block-list/block-invalid-warning';
 export { default as Caption } from './caption';
+export { BottomSheetSettings, BlockSettingsButton } from './block-settings';
 
 // Content Related Components
 export { default as BlockList } from './block-list';

packages/block-editor/src/components/inspector-controls/index.native.js

@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { ifBlockEditSelected } from '../block-edit/context';
+import { BlockSettingsButton } from '../block-settings';
+
+const { Fill, Slot } = createSlotFill( 'InspectorControls' );
+
+const FillWithSettingsButton = ( { children, ...props } ) => {
+	return (
+		<>
+			<Fill { ...props }>{ children }</Fill>
+			{ React.Children.count( children ) > 0 && ( <BlockSettingsButton /> ) }
+		</>
+	);
+};
+
+const InspectorControls = ifBlockEditSelected( FillWithSettingsButton );
+
+InspectorControls.Slot = Slot;
+
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/inspector-controls/README.md
+ */
+export default InspectorControls;
+

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

@@ -19,6 +19,7 @@ import {
 	Icon,
 	Toolbar,
 	ToolbarButton,
+	PanelBody,
 } from '@wordpress/components';
 
 import {
@@ -53,7 +54,6 @@ class ImageEdit extends React.Component {
 		super( props );
 
 		this.state = {
-			showSettings: false,
 			isCaptionSelected: false,
 		};
 
@@ -206,14 +206,6 @@ class ImageEdit extends React.Component {
 		const { attributes, isSelected } = this.props;
 		const { url, height, width, alt, href, id } = attributes;
 
-		const onImageSettingsButtonPressed = () => {
-			this.setState( { showSettings: true } );
-		};
-
-		const onImageSettingsClose = () => {
-			this.setState( { showSettings: false } );
-		};
-
 		const getToolbarEditButton = ( open ) => (
 			<BlockControls>
 				<Toolbar>
@@ -227,36 +219,34 @@ class ImageEdit extends React.Component {
 		);
 
 		const getInspectorControls = () => (
-			<BottomSheet
-				isVisible={ this.state.showSettings }
-				onClose={ onImageSettingsClose }
-				hideHeader
-			>
-				<BottomSheet.Cell
-					icon={ 'admin-links' }
-					label={ __( 'Link To' ) }
-					value={ href || '' }
-					valuePlaceholder={ __( 'Add URL' ) }
-					onChangeValue={ this.onSetLinkDestination }
-					autoCapitalize="none"
-					autoCorrect={ false }
-					keyboardType="url"
-				/>
-				<BottomSheet.Cell
-					icon={ 'editor-textcolor' }
-					label={ __( 'Alt Text' ) }
-					value={ alt || '' }
-					valuePlaceholder={ __( 'None' ) }
-					separatorType={ 'fullWidth' }
-					onChangeValue={ this.updateAlt }
-				/>
-				<BottomSheet.Cell
-					label={ __( 'Clear All Settings' ) }
-					labelStyle={ styles.clearSettingsButton }
-					separatorType={ 'none' }
-					onPress={ this.onClearSettings }
-				/>
-			</BottomSheet>
+			<InspectorControls>
+				<PanelBody title={ __( 'Image Settings' ) } >
+					<BottomSheet.Cell
+						icon={ 'admin-links' }
+						label={ __( 'Link To' ) }
+						value={ href || '' }
+						valuePlaceholder={ __( 'Add URL' ) }
+						onChangeValue={ this.onSetLinkDestination }
+						autoCapitalize="none"
+						autoCorrect={ false }
+						keyboardType="url"
+					/>
+					<BottomSheet.Cell
+						icon={ 'editor-textcolor' }
+						label={ __( 'Alt Text' ) }
+						value={ alt || '' }
+						valuePlaceholder={ __( 'None' ) }
+						separatorType={ 'fullWidth' }
+						onChangeValue={ this.updateAlt }
+					/>
+					<BottomSheet.Cell
+						label={ __( 'Clear All Settings' ) }
+						labelStyle={ styles.clearSettingsButton }
+						separatorType={ 'none' }
+						onPress={ this.onClearSettings }
+					/>
+				</PanelBody>
+			</InspectorControls>
 		);
 
 		if ( ! url ) {
@@ -286,13 +276,6 @@ class ImageEdit extends React.Component {
 					{ ( ! this.state.isCaptionSelected ) &&
 						getToolbarEditButton( openMediaOptions )
 					}
-					<InspectorControls>
-						<ToolbarButton
-							title={ __( 'Image Settings' ) }
-							icon="admin-generic"
-							onClick={ onImageSettingsButtonPressed }
-						/>
-					</InspectorControls>
 					<MediaUploadProgress
 						height={ height }
 						width={ width }

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

@@ -29,7 +29,6 @@ import {
 	MediaUploadProgress,
 	MEDIA_TYPE_VIDEO,
 	BlockControls,
-	InspectorControls,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { isURL } from '@wordpress/url';
@@ -50,7 +49,6 @@ class VideoEdit extends React.Component {
 
 		this.state = {
 			isCaptionSelected: false,
-			showSettings: false,
 			videoContainerHeight: 0,
 		};
 
@@ -199,13 +197,6 @@ class VideoEdit extends React.Component {
 						<BlockControls>
 							{ toolbarEditButton }
 						</BlockControls> }
-					<InspectorControls>
-						{ false && <ToolbarButton //Not rendering settings button until it has an action
-							label={ __( 'Video Settings' ) }
-							icon="admin-generic"
-							onClick={ () => ( null ) }
-						/> }
-					</InspectorControls>
 					<MediaUploadProgress
 						mediaId={ id }
 						onFinishMediaUploadWithSuccess={ this.finishMediaUploadWithSuccess }

packages/components/src/index.native.js

@@ -10,6 +10,7 @@ export { default as Spinner } from './spinner';
 export { createSlotFill, Slot, Fill, Provider as SlotFillProvider } from './slot-fill';
 export { default as BaseControl } from './base-control';
 export { default as TextareaControl } from './textarea-control';
+export { default as PanelBody } from './panel/body';
 export { default as Button } from './button';
 
 // Higher-Order Components

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

@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+
+export class PanelBody extends Component {
+	constructor( ) {
+		super( ...arguments );
+		this.state = {};
+	}
+
+	render() {
+		const { children } = this.props;
+		return (
+			<View >
+				{ children }
+			</View>
+		);
+	}
+}
+
+export default PanelBody;

packages/edit-post/src/components/layout/index.native.js

@@ -10,6 +10,7 @@ import { sendNativeEditorDidLayout } from 'react-native-gutenberg-bridge';
  */
 import { Component } from '@wordpress/element';
 import { withSelect } from '@wordpress/data';
+import { BottomSheetSettings } from '@wordpress/block-editor';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { HTMLTextInput, KeyboardAvoidingView, ReadableContentView } from '@wordpress/components';
 import { AutosaveMonitor } from '@wordpress/editor';
@@ -128,6 +129,7 @@ class Layout extends Component {
 						style={ toolbarKeyboardAvoidingViewStyle }
 					>
 						<Header />
+						<BottomSheetSettings />
 					</KeyboardAvoidingView> ) }
 			</SafeAreaView>
 		);