Add native support for BlockListBlock (Ported from Gutenberg mobile)

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

@@ -0,0 +1,221 @@
+/**
+ * External dependencies
+ */
+import {
+	View,
+	Text,
+	TouchableWithoutFeedback,
+} from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { withDispatch, withSelect } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
+import { getBlockType } from '@wordpress/blocks';
+import { BlockEdit, BlockInvalidWarning, BlockMobileToolbar } from '@wordpress/block-editor';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import styles from './block.scss';
+
+class BlockListBlock extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.insertBlocksAfter = this.insertBlocksAfter.bind( this );
+		this.onFocus = this.onFocus.bind( this );
+
+		this.state = {
+			isFullyBordered: false,
+		};
+	}
+
+	onFocus() {
+		if ( ! this.props.isSelected ) {
+			this.props.onSelect();
+		}
+	}
+
+	insertBlocksAfter( blocks ) {
+		this.props.onInsertBlocks( blocks, this.props.order + 1 );
+
+		if ( blocks[ 0 ] ) {
+			// focus on the first block inserted
+			this.props.onSelect( blocks[ 0 ].clientId );
+		}
+	}
+
+	getBlockForType() {
+		return (
+			<BlockEdit
+				name={ this.props.name }
+				isSelected={ this.props.isSelected }
+				attributes={ this.props.attributes }
+				setAttributes={ this.props.onChange }
+				onFocus={ this.onFocus }
+				onReplace={ this.props.onReplace }
+				insertBlocksAfter={ this.insertBlocksAfter }
+				mergeBlocks={ this.props.mergeBlocks }
+				onCaretVerticalPositionChange={ this.props.onCaretVerticalPositionChange }
+				clientId={ this.props.clientId }
+			/>
+		);
+	}
+
+	renderBlockTitle() {
+		return (
+			<View style={ styles.blockTitle }>
+				<Text>BlockType: { this.props.name }</Text>
+			</View>
+		);
+	}
+
+	getAccessibilityLabel() {
+		const { attributes, name, order, title, getAccessibilityLabelExtra } = this.props;
+
+		let blockName = '';
+
+		if ( name === 'core/missing' ) { // is the block unrecognized?
+			blockName = title;
+		} else {
+			blockName = sprintf(
+				/* translators: accessibility text. %s: block name. */
+				__( '%s Block' ),
+				title, //already localized
+			);
+		}
+
+		blockName += '. ' + sprintf( __( 'Row %d.' ), order + 1 );
+
+		if ( getAccessibilityLabelExtra ) {
+			const blockAccessibilityLabel = getAccessibilityLabelExtra( attributes );
+			blockName += blockAccessibilityLabel ? ' ' + blockAccessibilityLabel : '';
+		}
+
+		return blockName;
+	}
+
+	render() {
+		const {
+			borderStyle,
+			clientId,
+			focusedBorderColor,
+			icon,
+			isSelected,
+			isValid,
+			showTitle,
+			title,
+		} = this.props;
+
+		const borderColor = isSelected ? focusedBorderColor : 'transparent';
+
+		const accessibilityLabel = this.getAccessibilityLabel();
+
+		return (
+			// accessible prop needs to be false to access children
+			// https://facebook.github.io/react-native/docs/accessibility#accessible-ios-android
+			<TouchableWithoutFeedback
+				onPress={ this.onFocus }
+				accessible={ ! isSelected }
+				accessibilityRole={ 'button' }
+			>
+				<View style={ [ styles.blockHolder, borderStyle, { borderColor } ] }>
+					{ showTitle && this.renderBlockTitle() }
+					<View
+						accessibilityLabel={ accessibilityLabel }
+						style={ [ ! isSelected && styles.blockContainer, isSelected && styles.blockContainerFocused ] }
+					>
+						{ isValid && this.getBlockForType() }
+						{ ! isValid &&
+						<BlockInvalidWarning blockTitle={ title } icon={ icon } />
+						}
+					</View>
+					{ isSelected && <BlockMobileToolbar clientId={ clientId } /> }
+				</View>
+
+			</TouchableWithoutFeedback>
+		);
+	}
+}
+
+export default compose( [
+	withSelect( ( select, { clientId, rootClientId } ) => {
+		const {
+			getBlockIndex,
+			getBlocks,
+			isBlockSelected,
+			__unstableGetBlockWithoutInnerBlocks,
+		} = select( 'core/block-editor' );
+		const order = getBlockIndex( clientId, rootClientId );
+		const isSelected = isBlockSelected( clientId );
+		const isFirstBlock = order === 0;
+		const isLastBlock = order === getBlocks().length - 1;
+		const block = __unstableGetBlockWithoutInnerBlocks( clientId );
+		const { name, attributes, isValid } = block || {};
+		const blockType = getBlockType( name || 'core/missing' );
+		const title = blockType.title;
+		const icon = blockType.icon;
+		const getAccessibilityLabelExtra = blockType.__experimentalGetAccessibilityLabel;
+
+		return {
+			icon,
+			name: name || 'core/missing',
+			order,
+			title,
+			attributes,
+			blockType,
+			isFirstBlock,
+			isLastBlock,
+			isSelected,
+			isValid,
+			getAccessibilityLabelExtra,
+		};
+	} ),
+	withDispatch( ( dispatch, ownProps, { select } ) => {
+		const {
+			insertBlocks,
+			mergeBlocks,
+			replaceBlocks,
+			selectBlock,
+			updateBlockAttributes,
+		} = dispatch( 'core/block-editor' );
+
+		return {
+			mergeBlocks( forward ) {
+				const { clientId } = ownProps;
+				const {
+					getPreviousBlockClientId,
+					getNextBlockClientId,
+				} = select( 'core/block-editor' );
+
+				if ( forward ) {
+					const nextBlockClientId = getNextBlockClientId( clientId );
+					if ( nextBlockClientId ) {
+						mergeBlocks( clientId, nextBlockClientId );
+					}
+				} else {
+					const previousBlockClientId = getPreviousBlockClientId( clientId );
+					if ( previousBlockClientId ) {
+						mergeBlocks( previousBlockClientId, clientId );
+					}
+				}
+			},
+			onInsertBlocks( blocks, index ) {
+				insertBlocks( blocks, index, ownProps.rootClientId );
+			},
+			onSelect( clientId = ownProps.clientId, initialPosition ) {
+				selectBlock( clientId, initialPosition );
+			},
+			onChange: ( attributes ) => {
+				updateBlockAttributes( ownProps.clientId, attributes );
+			},
+			onReplace( blocks, indexToSelect ) {
+				replaceBlocks( [ ownProps.clientId ], blocks, indexToSelect );
+			},
+		};
+	} ),
+] )( BlockListBlock );

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

@@ -0,0 +1,38 @@
+.blockHolder {
+	flex: 1 1 auto;
+}
+
+.blockContainer {
+	background-color: $white;
+	padding-left: 16px;
+	padding-right: 16px;
+	padding-top: 12px;
+	padding-bottom: 12px;
+}
+
+.blockContainerFocused {
+	background-color: $white;
+	padding-left: 16px;
+	padding-right: 16px;
+	padding-top: 12px;
+	padding-bottom: 0; // will be flushed into inline toolbar height
+}
+
+.blockTitle {
+	background-color: $gray;
+	padding-left: 8px;
+	padding-top: 4px;
+	padding-bottom: 4px;
+}
+
+.aztec_container {
+	flex: 1;
+}
+
+.blockCode {
+	font-family: $default-monospace-font;
+}
+
+.blockText {
+	min-height: 50px;
+}

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

@@ -19,6 +19,7 @@ export { default as URLInput } from './url-input';
 export { default as BlockInvalidWarning } from './block-list/block-invalid-warning';
 
 // Content Related Components
+export { default as BlockListBlock } from './block-list/block';
 export { default as BlockMobileToolbar } from './block-list/block-mobile-toolbar';
 export { default as BlockMover } from './block-mover';
 export { default as BlockToolbar } from './block-toolbar';

packages/block-library/src/missing/index.native.js

@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { coreBlocks } from '@wordpress/block-library';
+
+/**
+ * Internal dependencies
+ */
+import { settings as webSettings } from './index.js';
+
+export { metadata, name } from './index.js';
+
+export const settings = {
+	...webSettings,
+	__experimentalGetAccessibilityLabel( attributes ) {
+		const { originalName } = attributes;
+
+		const originalBlockType = originalName && coreBlocks[ originalName ];
+
+		if ( originalBlockType ) {
+			return originalBlockType.settings.title || originalName;
+		}
+
+		return '';
+	},
+};