[RNMobile] Allow shrink toolbar

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

@@ -29,6 +29,11 @@ class BlockListBlock extends Component {
 
 		this.insertBlocksAfter = this.insertBlocksAfter.bind( this );
 		this.onFocus = this.onFocus.bind( this );
+		this.getBlockWidth = this.getBlockWidth.bind( this );
+
+		this.state = {
+			blockWidth: 0,
+		};
 	}
 
 	onFocus() {
@@ -47,6 +52,15 @@ class BlockListBlock extends Component {
 		}
 	}
 
+	getBlockWidth( { nativeEvent } ) {
+		const { layout } = nativeEvent;
+		const { blockWidth } = this.state;
+
+		if ( blockWidth !== layout.width ) {
+			this.setState( { blockWidth: layout.width } );
+		}
+	}
+
 	getBlockForType() {
 		return (
 			<GlobalStylesContext.Consumer>
@@ -78,6 +92,7 @@ class BlockListBlock extends Component {
 								contentStyle={ this.props.contentStyle }
 								onDeleteBlock={ this.props.onDeleteBlock }
 							/>
+							<View onLayout={ this.getBlockWidth } />
 						</GlobalStylesContext.Provider>
 					);
 				} }
@@ -95,8 +110,8 @@ class BlockListBlock extends Component {
 
 	render() {
 		const {
-			attributes,
-			blockType,
+			attributes = {},
+			blockType = {},
 			clientId,
 			icon,
 			isSelected,
@@ -114,6 +129,8 @@ class BlockListBlock extends Component {
 			isInnerBlockSelected,
 		} = this.props;
 
+		const { blockWidth } = this.state;
+
 		const accessibilityLabel = getAccessibleBlockLabel(
 			blockType,
 			attributes,
@@ -178,6 +195,7 @@ class BlockListBlock extends Component {
 									isStackedHorizontally={
 										isStackedHorizontally
 									}
+									blockWidth={ blockWidth }
 								/>
 							) }
 						</View>

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

@@ -0,0 +1,153 @@
+/**
+ * External dependencies
+ */
+import { Platform } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { ToolbarButton, Picker } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { withDispatch, withSelect } from '@wordpress/data';
+import { withInstanceId, compose } from '@wordpress/compose';
+import { moreVertical, trash, cog } from '@wordpress/icons';
+import { partial, first, castArray, last, compact } from 'lodash';
+/**
+ * Internal dependencies
+ */
+import {
+	getMoverActionTitle,
+	getArrowIcon,
+} from '../block-mover/mover-description';
+
+const BlockActionsMenu = ( {
+	onDelete,
+	isStackedHorizontally,
+	shouldWrapBlockSettings,
+	shouldWrapBlockMover,
+	openGeneralSidebar,
+	onMoveDown,
+	onMoveUp,
+	isFirst,
+	isLast,
+} ) => {
+	const deleteOption = {
+		id: 'deleteOption',
+		label: __( 'Remove Block' ),
+		value: 'deleteOption',
+		icon: trash,
+	};
+
+	const settingsOption = {
+		id: 'settingsOption',
+		label: __( 'Block Settings' ),
+		value: 'settingsOption',
+		icon: cog,
+	};
+
+	const backwardButtonOption = {
+		id: 'backwardButtonOption',
+		label: getMoverActionTitle( true, isStackedHorizontally ),
+		value: 'backwardButtonOption',
+		icon: getArrowIcon( true, isStackedHorizontally ),
+		disabled: isFirst,
+	};
+
+	const forwardButtonOption = {
+		id: 'forwardButtonOption',
+		label: getMoverActionTitle( false, isStackedHorizontally ),
+		value: 'forwardButtonOption',
+		icon: getArrowIcon( false, isStackedHorizontally ),
+		disabled: isLast,
+	};
+
+	const options = compact( [
+		shouldWrapBlockMover && backwardButtonOption,
+		shouldWrapBlockMover && forwardButtonOption,
+		shouldWrapBlockSettings && settingsOption,
+		deleteOption,
+	] );
+
+	function onPickerSelect( value ) {
+		if ( value === 'deleteOption' ) {
+			onDelete();
+		} else if ( value === 'settingsOption' ) {
+			openGeneralSidebar();
+		} else if ( value === 'forwardButtonOption' ) {
+			onMoveDown();
+		} else if ( value === 'backwardButtonOption' ) {
+			onMoveUp();
+		}
+	}
+
+	const disabledButtonIndices = options
+		.map( ( option, index ) => option.disabled && index + 1 )
+		.filter( Boolean );
+
+	const accessibilityHintIOS = __(
+		'Double tap to open Action Sheet with available options'
+	);
+	const accessibilityHintAndroid = __(
+		'Double tap to open Bottom Sheet with available options'
+	);
+
+	return (
+		<>
+			<ToolbarButton
+				title={ __( 'Open Settings' ) }
+				onClick={ () => this.picker.presentPicker() }
+				icon={ moreVertical }
+				extraProps={ {
+					hint:
+						Platform.OS === 'ios'
+							? accessibilityHintIOS
+							: accessibilityHintAndroid,
+				} }
+			/>
+			<Picker
+				ref={ ( instance ) => ( this.picker = instance ) }
+				options={ options }
+				onChange={ onPickerSelect }
+				destructiveButtonIndex={ options.length }
+				disabledButtonIndices={ disabledButtonIndices }
+				hideCancelButton={ Platform !== 'ios' }
+			/>
+		</>
+	);
+};
+
+export default compose(
+	withSelect( ( select, { clientIds } ) => {
+		const { getBlockIndex, getBlockRootClientId, getBlockOrder } = select(
+			'core/block-editor'
+		);
+		const normalizedClientIds = castArray( clientIds );
+		const firstClientId = first( normalizedClientIds );
+		const rootClientId = getBlockRootClientId( firstClientId );
+		const blockOrder = getBlockOrder( rootClientId );
+		const firstIndex = getBlockIndex( firstClientId, rootClientId );
+		const lastIndex = getBlockIndex(
+			last( normalizedClientIds ),
+			rootClientId
+		);
+
+		return {
+			isFirst: firstIndex === 0,
+			isLast: lastIndex === blockOrder.length - 1,
+			rootClientId,
+		};
+	} ),
+	withDispatch( ( dispatch, { clientIds, rootClientId } ) => {
+		const { moveBlocksDown, moveBlocksUp } = dispatch(
+			'core/block-editor'
+		);
+		const { openGeneralSidebar } = dispatch( 'core/edit-post' );
+
+		return {
+			onMoveDown: partial( moveBlocksDown, clientIds, rootClientId ),
+			onMoveUp: partial( moveBlocksUp, clientIds, rootClientId ),
+			openGeneralSidebar: () => openGeneralSidebar( 'edit-post/block' ),
+		};
+	} ),
+	withInstanceId
+)( BlockActionsMenu );

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

@@ -6,47 +6,49 @@ import { Keyboard, View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { ToolbarButton } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
-import { trash } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
 import BlockMover from '../block-mover';
+import BlockActionsMenu from './block-actions-menu';
 import { BlockSettingsButton } from '../block-settings';
 
 const BlockMobileToolbar = ( {
 	clientId,
 	onDelete,
-	order,
 	isStackedHorizontally,
-} ) => (
-	<View style={ styles.toolbar }>
-		<BlockMover
-			clientIds={ [ clientId ] }
-			isStackedHorizontally={ isStackedHorizontally }
-		/>
+	blockWidth,
+} ) => {
+	const shouldWrapBlockMover = blockWidth <= 110;
+	const shouldWrapBlockSettings = blockWidth < 150;
 
-		<View style={ styles.spacer } />
+	return (
+		<View style={ styles.toolbar }>
+			{ ! shouldWrapBlockMover && (
+				<BlockMover
+					clientIds={ [ clientId ] }
+					isStackedHorizontally={ isStackedHorizontally }
+				/>
+			) }
 
-		<BlockSettingsButton.Slot />
+			<View style={ styles.spacer } />
 
-		<ToolbarButton
-			title={ sprintf(
-				/* translators: accessibility text. %s: current block position (number). */
-				__( 'Remove block at row %s' ),
-				order + 1
-			) }
-			onClick={ onDelete }
-			icon={ trash }
-			extraProps={ { hint: __( 'Double tap to remove the block' ) } }
-		/>
-	</View>
-);
+			{ ! shouldWrapBlockSettings && <BlockSettingsButton.Slot /> }
+
+			<BlockActionsMenu
+				clientIds={ [ clientId ] }
+				shouldWrapBlockMover={ shouldWrapBlockMover }
+				shouldWrapBlockSettings={ shouldWrapBlockSettings }
+				isStackedHorizontally={ isStackedHorizontally }
+				onDelete={ onDelete }
+			/>
+		</View>
+	);
+};
 
 export default compose(
 	withSelect( ( select, { clientId } ) => {