[RNMobile] Support percentage in columns

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

@@ -0,0 +1,134 @@
+/**
+ * External dependencies
+ */
+import {
+	ScrollView,
+	View,
+	Text,
+	TouchableWithoutFeedback,
+	Platform,
+} from 'react-native';
+import { map } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { withSelect, useDispatch } from '@wordpress/data';
+import { compose, usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { createBlock } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+import {
+	PanelBody,
+	BottomSheet,
+	FooterMessageControl,
+} 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 };
+
+function createBlocksFromInnerBlocksTemplate( innerBlocksTemplate ) {
+	return map(
+		innerBlocksTemplate,
+		( [ name, attributes, innerBlocks = [] ] ) =>
+			createBlock(
+				name,
+				attributes,
+				createBlocksFromInnerBlocksTemplate( innerBlocks )
+			)
+	);
+}
+
+function BlockVariationPicker( { isVisible, onClose, clientId, variations } ) {
+	const { replaceInnerBlocks } = useDispatch( 'core/block-editor' );
+	const isIOS = Platform.OS === 'ios';
+
+	const cancelButtonStyle = usePreferredColorSchemeStyle(
+		styles.cancelButton,
+		styles.cancelButtonDark
+	);
+
+	const leftButton = useMemo(
+		() => (
+			<TouchableWithoutFeedback onPress={ onClose } hitSlop={ hitSlop }>
+				<View>
+					{ isIOS ? (
+						<Text
+							style={ cancelButtonStyle }
+							maxFontSizeMultiplier={ 2 }
+						>
+							{ __( 'Cancel' ) }
+						</Text>
+					) : (
+						<Icon
+							icon={ close }
+							size={ 24 }
+							style={ styles.closeIcon }
+						/>
+					) }
+				</View>
+			</TouchableWithoutFeedback>
+		),
+		[ onClose, cancelButtonStyle ]
+	);
+
+	const onVariationSelect = ( variation ) => {
+		replaceInnerBlocks(
+			clientId,
+			createBlocksFromInnerBlocksTemplate( variation.innerBlocks ),
+			false
+		);
+		onClose();
+	};
+
+	return (
+		<BottomSheet
+			isVisible={ isVisible }
+			onClose={ onClose }
+			title={ __( 'Select a layout' ) }
+			contentStyle={ styles.contentStyle }
+			leftButton={ leftButton }
+		>
+			<ScrollView
+				horizontal
+				showsHorizontalScrollIndicator={ false }
+				contentContainerStyle={ styles.contentContainerStyle }
+				style={ styles.containerStyle }
+			>
+				{ variations.map( ( v ) => {
+					return (
+						<MenuItem
+							item={ v }
+							key={ v.name }
+							onSelect={ () => onVariationSelect( v ) }
+						/>
+					);
+				} ) }
+			</ScrollView>
+			<PanelBody>
+				<FooterMessageControl
+					label={ __(
+						'Note: Column layout may vary between themes and screen sizes'
+					) }
+					textAlign="center"
+				/>
+			</PanelBody>
+		</BottomSheet>
+	);
+}
+
+export default compose(
+	withSelect( ( select, {} ) => {
+		const { getBlockVariations } = select( 'core/blocks' );
+
+		return {
+			date: getBlockVariations( 'core/columns', 'block' ),
+		};
+	} )
+)( BlockVariationPicker );

packages/block-editor/src/components/block-variation-picker/style.native.scss

@@ -0,0 +1,28 @@
+.contentContainerStyle {
+	flex-direction: row;
+	padding-bottom: $grid-unit-15;
+	padding-left: $grid-unit-20 / 2;
+	padding-right: $grid-unit-20 / 2;
+}
+
+.containerStyle {
+	padding-top: $grid-unit-15;
+}
+
+.contentStyle {
+	padding-left: 0;
+	padding-right: 0;
+}
+
+.cancelButton {
+	color: $blue-wordpress;
+	font-size: 16px;
+}
+
+.cancelButtonDark {
+	color: $blue-30;
+}
+
+.closeIcon {
+	color: $gray;
+}

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

@@ -46,6 +46,7 @@ export {
 export { default as BlockList } from './block-list';
 export { default as BlockMover } from './block-mover';
 export { default as BlockToolbar } from './block-toolbar';
+export { default as BlockVariationPicker } from './block-variation-picker';
 export { default as DefaultBlockAppender } from './default-block-appender';
 export { default as __unstableEditorStyles } from './editor-styles';
 export { default as Inserter } from './inserter';

packages/block-editor/src/components/inserter/menu-item.native.js

@@ -76,7 +76,7 @@ class MenuItem extends Component {
 					>
 						<View style={ modalIconStyle }>
 							<Icon
-								icon={ item.icon.src }
+								icon={ item.icon.src || item.icon }
 								fill={ modalIconStyle.fill }
 								size={ modalIconStyle.width }
 							/>

packages/block-library/src/column/column-preview.native.js

@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './editor.scss';
+
+function ColumnsPreview( { columnWidths, selectedColumnIndex } ) {
+	const columnsPreviewStyle = usePreferredColorSchemeStyle(
+		styles.columnsPreview,
+		styles.columnsPreviewDark
+	);
+
+	const columnIndicatorStyle = usePreferredColorSchemeStyle(
+		styles.columnIndicator,
+		styles.columnIndicatorDark
+	);
+
+	return (
+		<View style={ columnsPreviewStyle }>
+			{ columnWidths.map( ( width, index ) => {
+				const isSelectedColumn = index === selectedColumnIndex;
+				return (
+					<View
+						style={ [
+							isSelectedColumn && columnIndicatorStyle,
+							{ flex: width },
+						] }
+						key={ index }
+					/>
+				);
+			} ) }
+		</View>
+	);
+}
+
+export default ColumnsPreview;

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

@@ -12,11 +12,20 @@ import {
 	InnerBlocks,
 	BlockControls,
 	BlockVerticalAlignmentToolbar,
+	InspectorControls,
 } from '@wordpress/block-editor';
+import {
+	PanelBody,
+	RangeControl,
+	FooterMessageControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
 import styles from './editor.scss';
+import ColumnsPreview from './column-preview';
+import { getColumnWidths } from '../columns/utils';
 
 function ColumnEdit( {
 	attributes,
@@ -26,13 +35,26 @@ function ColumnEdit( {
 	getStylesFromColorScheme,
 	isParentSelected,
 	contentStyle,
+	columns,
+	columnCount,
+	selectedColumnIndex,
 } ) {
 	const { verticalAlignment } = attributes;
 
 	const updateAlignment = ( alignment ) => {
 		setAttributes( { verticalAlignment: alignment } );
 	};
 
+	const onWidthChange = ( width ) => {
+		setAttributes( {
+			width,
+		} );
+	};
+
+	const columnWidths = Object.values(
+		getColumnWidths( columns, columnCount )
+	);
+
 	if ( ! isSelected && ! hasChildren ) {
 		return (
 			<View
@@ -45,7 +67,7 @@ function ColumnEdit( {
 					contentStyle,
 					styles.columnPlaceholderNotSelected,
 				] }
-			></View>
+			/>
 		);
 	}
 
@@ -57,6 +79,32 @@ function ColumnEdit( {
 					value={ verticalAlignment }
 				/>
 			</BlockControls>
+			<InspectorControls>
+				<PanelBody title={ __( 'Column settings' ) }>
+					<RangeControl
+						label={ __( 'Width' ) }
+						min={ 1 }
+						max={ 100 }
+						value={ columnWidths[ selectedColumnIndex ] }
+						onChange={ onWidthChange }
+						toFixed={ 1 }
+						rangePreview={
+							<ColumnsPreview
+								columnWidths={ columnWidths }
+								selectedColumnIndex={ selectedColumnIndex }
+							/>
+						}
+					/>
+				</PanelBody>
+				<PanelBody>
+					<FooterMessageControl
+						label={ __(
+							'Note: Column layout may vary between themes and screen sizes'
+						) }
+						textAlign="center"
+					/>
+				</PanelBody>
+			</InspectorControls>
 			<View
 				style={ [
 					contentStyle,
@@ -97,21 +145,31 @@ export default compose( [
 			getBlockCount,
 			getBlockRootClientId,
 			getSelectedBlockClientId,
+			getBlocks,
+			getBlockOrder,
 		} = select( 'core/block-editor' );
 
 		const selectedBlockClientId = getSelectedBlockClientId();
 		const isSelected = selectedBlockClientId === clientId;
 
 		const parentId = getBlockRootClientId( clientId );
 		const hasChildren = !! getBlockCount( clientId );
-
 		const isParentSelected =
 			selectedBlockClientId && selectedBlockClientId === parentId;
 
+		const blockOrder = getBlockOrder( parentId );
+
+		const selectedColumnIndex = blockOrder.indexOf( clientId );
+		const columnCount = getBlockCount( parentId );
+		const columns = getBlocks( parentId );
+
 		return {
 			hasChildren,
 			isParentSelected,
 			isSelected,
+			selectedColumnIndex,
+			columns,
+			columnCount,
 		};
 	} ),
 	withPreferredColorScheme,

packages/block-library/src/column/editor.native.scss

@@ -34,3 +34,25 @@
 .flexBase {
 	flex: 1;
 }
+
+.columnsPreview {
+	min-height: 18px;
+	min-width: 24px;
+	border-color: $toolbar-button;
+	flex-direction: row;
+	margin-right: 10px;
+	border-width: $border-width;
+	border-radius: $radius-block-ui;
+}
+
+.columnsPreviewDark {
+	border-color: $gray-20;
+}
+
+.columnIndicator {
+	background-color: $toolbar-button;
+}
+
+.columnIndicatorDark {
+	background-color: $gray-20;
+}