Refactor to BlockActionsMenu for all blocks

WordPress · May 7, 2020 · 0e2d868 · 0e2d868
1 parent f41161c
commit 0e2d868
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 48 deletions.
diff --git a/packages/block-editor/src/components/block-list/block.native.js b/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>
 					);
 				} }
@@ -112,9 +127,10 @@ class BlockListBlock extends Component {
 			marginVertical,
 			marginHorizontal,
 			isInnerBlockSelected,
-			allowShrinkToolbar,
 		} = this.props;
 
+		const { blockWidth } = this.state;
+
 		const accessibilityLabel = getAccessibleBlockLabel(
 			blockType,
 			attributes,
@@ -179,7 +195,7 @@ class BlockListBlock extends Component {
 									isStackedHorizontally={
 										isStackedHorizontally
 									}
-									allowShrinkToolbar={ allowShrinkToolbar }
+									blockWidth={ blockWidth }
 								/>
 							) }
 						</View>

diff --git a/...bar/shrink-block-mobile-toolbar.native.js → ...bile-toolbar/block-actions-menu.native.js b/...bar/shrink-block-mobile-toolbar.native.js → ...bile-toolbar/block-actions-menu.native.js
@@ -11,7 +11,7 @@ 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 } from 'lodash';
+import { partial, first, castArray, last, compact } from 'lodash';
 /**
  * Internal dependencies
  */
@@ -20,9 +20,11 @@ import {
 	getArrowIcon,
 } from '../block-mover/mover-description';
 
-const ShrinkBlockMobileToolbar = ( {
+const BlockActionsMenu = ( {
 	onDelete,
 	isStackedHorizontally,
+	shouldWrapBlockSettings,
+	shouldWrapBlockMover,
 	openGeneralSidebar,
 	onMoveDown,
 	onMoveUp,
@@ -59,12 +61,12 @@ const ShrinkBlockMobileToolbar = ( {
 		disabled: isLast,
 	};
 
-	const options = [
-		backwardButtonOption,
-		forwardButtonOption,
-		settingsOption,
+	const options = compact( [
+		shouldWrapBlockMover && backwardButtonOption,
+		shouldWrapBlockMover && forwardButtonOption,
+		shouldWrapBlockSettings && settingsOption,
 		deleteOption,
-	];
+	] );
 
 	function onPickerSelect( value ) {
 		if ( value === 'deleteOption' ) {
@@ -148,4 +150,4 @@ export default compose(
 		};
 	} ),
 	withInstanceId
-)( ShrinkBlockMobileToolbar );
+)( BlockActionsMenu );
diff --git a/packages/block-editor/src/components/block-mobile-toolbar/index.native.js b/packages/block-editor/src/components/block-mobile-toolbar/index.native.js
@@ -6,61 +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 ShrinkBlockMobileToolbar from './shrink-block-mobile-toolbar';
+import BlockActionsMenu from './block-actions-menu';
 import { BlockSettingsButton } from '../block-settings';
 
 const BlockMobileToolbar = ( {
 	clientId,
 	onDelete,
-	order,
 	isStackedHorizontally,
-	allowShrinkToolbar,
-} ) => (
-	<View style={ styles.toolbar }>
-		{ allowShrinkToolbar ? (
-			<ShrinkBlockMobileToolbar
-				clientIds={ [ clientId ] }
-				isStackedHorizontally={ isStackedHorizontally }
-				onDelete={ onDelete }
-			/>
-		) : (
-			<>
+	blockWidth,
+} ) => {
+	const shouldWrapBlockMover = blockWidth <= 104;
+	const shouldWrapBlockSettings = blockWidth < 150;
+
+	return (
+		<View style={ styles.toolbar }>
+			{ ! shouldWrapBlockMover && (
 				<BlockMover
 					clientIds={ [ clientId ] }
 					isStackedHorizontally={ isStackedHorizontally }
 				/>
+			) }
 
-				<View style={ styles.spacer } />
+			<View style={ styles.spacer } />
 
-				<BlockSettingsButton.Slot />
+			{ ! shouldWrapBlockSettings && <BlockSettingsButton.Slot /> }
 
-				<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>
-);
+			<BlockActionsMenu
+				clientIds={ [ clientId ] }
+				shouldWrapBlockMover={ shouldWrapBlockMover }
+				shouldWrapBlockSettings={ shouldWrapBlockSettings }
+				isStackedHorizontally={ isStackedHorizontally }
+				onDelete={ onDelete }
+			/>
+		</View>
+	);
+};
 
 export default compose(
 	withSelect( ( select, { clientId } ) => {

diff --git a/packages/block-editor/src/components/block-mobile-toolbar/style.native.scss b/packages/block-editor/src/components/block-mobile-toolbar/style.native.scss
@@ -2,7 +2,6 @@
 	flex-direction: row;
 	height: $mobile-block-toolbar-height;
 	align-items: flex-start;
-	justify-content: flex-end;
 	margin-left: 2px;
 	margin-right: 2px;
 }

diff --git a/packages/block-editor/src/components/inner-blocks/index.native.js b/packages/block-editor/src/components/inner-blocks/index.native.js
@@ -119,7 +119,6 @@ class InnerBlocks extends Component {
 			marginVertical,
 			marginHorizontal,
 			horizontalAlignment,
-			allowShrinkToolbar,
 		} = this.props;
 		const { templateInProcess } = this.state;
 
@@ -143,7 +142,6 @@ class InnerBlocks extends Component {
 						contentStyle={ contentStyle }
 						onAddBlock={ onAddBlock }
 						onDeleteBlock={ onDeleteBlock }
-						allowShrinkToolbar={ allowShrinkToolbar }
 					/>
 				) }
 			</>

diff --git a/packages/block-library/src/buttons/edit.native.js b/packages/block-library/src/buttons/edit.native.js
@@ -77,7 +77,6 @@ function ButtonsEdit( {
 				parentWidth={ maxWidth }
 				marginHorizontal={ spacing }
 				marginVertical={ spacing }
-				allowShrinkToolbar
 			/>
 		</AlignmentHookSettingsProvider>
 	);