RN: Add Insert Button Mobile Component. (#25204)

* RN: Add Icon Button Block Editor component. * Add the missing styles * Add readme descriptions Co-authored-by: Gerardo Pacheco <[email protected]>
WordPress · Sep 28, 2020 · b9ff7ea · b9ff7ea
1 parent ed848a0
commit b9ff7ea
Show file tree

Hide file tree

Showing 7 changed files with 141 additions and 77 deletions.
diff --git a/packages/block-editor/src/components/block-variation-picker/index.native.js b/packages/block-editor/src/components/block-variation-picker/index.native.js
@@ -21,14 +21,14 @@ import {
 	PanelBody,
 	BottomSheet,
 	FooterMessageControl,
+	InserterButton,
 } from '@wordpress/components';
 import { Icon, close } from '@wordpress/icons';
 import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import MenuItem from '../inserter/menu-item';
 import styles from './style.scss';
 
 const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };
@@ -103,7 +103,7 @@ function BlockVariationPicker( { isVisible, onClose, clientId, variations } ) {
 			>
 				{ variations.map( ( v ) => {
 					return (
-						<MenuItem
+						<InserterButton
 							item={ v }
 							key={ v.name }
 							onSelect={ () => onVariationSelect( v ) }

diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js
@@ -17,13 +17,16 @@ import { Component } from '@wordpress/element';
 import { createBlock, rawHandler } from '@wordpress/blocks';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { withInstanceId, compose } from '@wordpress/compose';
-import { BottomSheet, BottomSheetConsumer } from '@wordpress/components';
+import {
+	BottomSheet,
+	BottomSheetConsumer,
+	InserterButton,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
-import MenuItem from './menu-item.native';
 
 const MIN_COL_NUM = 3;
 
@@ -62,8 +65,8 @@ export class InserterMenu extends Component {
 		const {
 			paddingLeft: itemPaddingLeft,
 			paddingRight: itemPaddingRight,
-		} = styles.modalItem;
-		const { width: itemWidth } = styles.modalIconWrapper;
+		} = InserterButton.Styles.modalItem;
+		const { width: itemWidth } = InserterButton.Styles.modalIconWrapper;
 		return itemWidth + itemPaddingLeft + itemPaddingRight;
 	}
 
@@ -112,7 +115,7 @@ export class InserterMenu extends Component {
 		const { itemWidth, maxWidth } = this.state;
 		const { onSelect } = this.props;
 		return (
-			<MenuItem
+			<InserterButton
 				item={ item }
 				itemWidth={ itemWidth }
 				maxWidth={ maxWidth }

diff --git a/packages/block-editor/src/components/inserter/style.native.scss b/packages/block-editor/src/components/inserter/style.native.scss
@@ -1,63 +1,9 @@
 /** @format */
 
-.touchableArea {
-	border-radius: 8px 8px 8px 8px;
-}
-
 .rowSeparator {
 	height: 12px;
 }
 
-.modalItem {
-	flex-direction: column;
-	justify-content: flex-start;
-	align-items: center;
-	padding-left: $grid-unit-20 / 2;
-	padding-right: $grid-unit-20 / 2;
-	padding-top: 0;
-	padding-bottom: 0;
-}
-
-.modalIconWrapper {
-	width: 104px;
-	height: 64px;
-	background-color: $gray-light; //#f3f6f8
-	border-radius: 8px 8px 8px 8px;
-	justify-content: center;
-	align-items: center;
-}
-
-.modalIconWrapperDark {
-	background-color: rgba($white, 0.07);
-}
-
-.modalIcon {
-	width: 32px;
-	height: 32px;
-	justify-content: center;
-	align-items: center;
-	fill: $gray-dark;
-}
-
-.modalIconDark {
-	fill: $white;
-}
-
-.modalItemLabel {
-	background-color: transparent;
-	padding-left: 2;
-	padding-right: 2;
-	padding-top: 4;
-	padding-bottom: 0;
-	justify-content: center;
-	font-size: 12;
-	color: $gray-dark;
-}
-
-.modalItemLabelDark {
-	color: $white;
-}
-
 .addBlockButton {
 	color: $blue-wordpress;
 }
@@ -69,13 +15,3 @@
 .columnPadding {
 	padding: $grid-unit-20;
 }
-
-.clipboardBlock {
-	background-color: transparent;
-	border-width: 1px;
-	border-color: $light-gray-400;
-}
-
-.clipboardBlockDark {
-	border-color: $gray-70;
-}
diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js
@@ -20,7 +20,6 @@ export { default as __experimentalToolbarContext } from './toolbar-context';
 export { default as ToolbarGroup } from './toolbar-group';
 export { default as ToolbarItem } from './toolbar-item';
 export { default as Icon } from './icon';
-export { default as IconButton } from './button/deprecated';
 export { default as Spinner } from './spinner';
 export {
 	createSlotFill,
@@ -77,6 +76,7 @@ export { LinkPicker } from './mobile/link-picker';
 export { default as LinkSettings } from './mobile/link-settings';
 export { default as Image, IMAGE_DEFAULT_FOCAL_POINT } from './mobile/image';
 export { default as ImageEditingButton } from './mobile/image/image-editing-button';
+export { default as InserterButton } from './mobile/inserter-button';
 
 // Utils
 export { colorsUtils } from './mobile/color-settings/utils';

diff --git a/packages/components/src/mobile/inserter-button/README.md b/packages/components/src/mobile/inserter-button/README.md
@@ -0,0 +1,55 @@
+InserterButton
+=============================
+
+InserterButton is a type of button component. 
+
+## Usage
+
+
+```jsx
+function render() {
+	return (
+		<View>
+			<Text>Some rendered content here</Text>
+			<InserterButton item={ { title: "Short Text", icon: <SVG></SVG> } } onSelect={ function( item ) { console.log( 'selected' ); } } />
+		</View>
+	);
+}
+```
+
+_Note:_ 
+
+## Props
+
+### `maxWidth`
+* **Type:** `String`
+* **Default:** `undefined`
+
+The max-width of the button. 
+
+### `itemWidth`
+* **Type:** `String`
+* **Default:** `undefined`
+
+The button width. 
+
+### `onSelect`
+* **Type:** `Function`
+* **Required** `true`
+
+The function that is called once the InserterButton has been selected.
+
+### `item`
+* **Type:** `Object`
+* **Required** `true`
+
+The object that gets selected. 
+
+## Examples
+
+<InserterButton
+    item={ item }
+    itemWidth={ itemWidth }
+    maxWidth={ maxWidth }
+    onSelect={ onSelect }
+/>
diff --git a/...c/components/inserter/menu-item.native.js → ...rc/mobile/inserter-button/index.native.js b/...c/components/inserter/menu-item.native.js → ...rc/mobile/inserter-button/index.native.js
@@ -55,13 +55,14 @@ class MenuItem extends Component {
 		);
 
 		const isClipboardBlock = item.id === 'clipboard';
+		const blockTitle = isClipboardBlock ? __( 'Copied block' ) : item.title;
 
 		return (
 			<TouchableHighlight
 				style={ styles.touchableArea }
 				underlayColor="transparent"
 				activeOpacity={ 0.5 }
-				accessibilityLabel={ item.title }
+				accessibilityLabel={ blockTitle }
 				onPress={ this.onPress }
 			>
 				<View style={ [ styles.modalItem, { width: maxWidth } ] }>
@@ -82,13 +83,18 @@ class MenuItem extends Component {
 							/>
 						</View>
 					</View>
-					<Text style={ modalItemLabelStyle }>
-						{ isClipboardBlock ? __( 'Copied block' ) : item.title }
-					</Text>
+					<Text style={ modalItemLabelStyle }>{ blockTitle }</Text>
 				</View>
 			</TouchableHighlight>
 		);
 	}
 }
 
-export default withPreferredColorScheme( MenuItem );
+const InserterButton = withPreferredColorScheme( MenuItem );
+
+InserterButton.Styles = {
+	modalItem: styles.modalItem,
+	modalIconWrapper: styles.modalIconWrapper,
+};
+
+export default InserterButton;
diff --git a/packages/components/src/mobile/inserter-button/style.native.scss b/packages/components/src/mobile/inserter-button/style.native.scss
@@ -0,0 +1,64 @@
+/** @format */
+.touchableArea {
+	border-radius: 8px 8px 8px 8px;
+}
+
+.modalIconWrapper {
+	width: 104px;
+	height: 64px;
+	background-color: $gray-light; //#f3f6f8
+	border-radius: 8px 8px 8px 8px;
+	justify-content: center;
+	align-items: center;
+}
+
+.modalIconWrapperDark {
+	background-color: rgba($white, 0.07);
+}
+
+.modalIcon {
+	width: 32px;
+	height: 32px;
+	justify-content: center;
+	align-items: center;
+	fill: $gray-dark;
+}
+
+.modalIconDark {
+	fill: $white;
+}
+
+.modalItemLabel {
+	background-color: transparent;
+	padding-left: 2;
+	padding-right: 2;
+	padding-top: 4;
+	padding-bottom: 0;
+	justify-content: center;
+	font-size: 12;
+	color: $gray-dark;
+}
+
+.modalItemLabelDark {
+	color: $white;
+}
+
+.clipboardBlock {
+	background-color: transparent;
+	border-width: 1px;
+	border-color: $light-gray-400;
+}
+
+.clipboardBlockDark {
+	border-color: $gray-70;
+}
+
+.modalItem {
+	flex-direction: column;
+	justify-content: flex-start;
+	align-items: center;
+	padding-left: $grid-unit-20 / 2;
+	padding-right: $grid-unit-20 / 2;
+	padding-top: 0;
+	padding-bottom: 0;
+}