Add native support for the MediaText block (#16305)

* First working version of the MediaText component for native mobile

* Fix adding a block to an innerblock list

* Disable mediaText on production

* MediaText native: improve editor visuals

* Move BlockToolbar from BlockList to Layout

* Remove BlockEditorProvider from BlockList and add native version of EditorProvider to Editor. Plus support InsertionPoint and BlockListAppender

* Update BlockMover for native to hide if locked or if it's the only block

* Make the vertical align button work, add more styling options for toolbar buttons

* Make sure registerCoreBlocks does not break in production

* Copy docblock comment from the web version for registerCoreBlocks

* Fix focusing on the media placeholder

* Only support adding image for now

* Update usage of MediaPlaceholder in MediaContainer

* Enable autoScroll for just the out most block list

* Fix JS Unit tests

* Roll back to IconButton refactor and fix tests

* Fix BlockVerticalAlignmentToolbar buttons style on mobile

* Fix thing for web and ensure ariaPressed is always passed down

* Use AriaPressed directly to style SVG on mobile

* Update snapshots

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

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { get } from 'lodash';
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { Path, Icon, SVG } from '@wordpress/components';
+
+export default function BlockIcon( { icon, showColors = false } ) {
+	if ( get( icon, [ 'src' ] ) === 'block-default' ) {
+		icon = {
+			src: <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><Path d="M19 7h-1V5h-4v2h-4V5H6v2H5c-1.1 0-2 .9-2 2v10h18V9c0-1.1-.9-2-2-2zm0 10H5V9h14v8z" /></SVG>,
+		};
+	}
+
+	const renderedIcon = <Icon icon={ icon && icon.src ? icon.src : icon } />;
+	const style = showColors ? {
+		backgroundColor: icon && icon.background,
+		color: icon && icon.foreground,
+	} : {};
+
+	return (
+		<View style={ style }>
+			{ renderedIcon }
+		</View>
+	);
+}

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

@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import { last } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { withSelect } from '@wordpress/data';
+import { getDefaultBlockName } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import DefaultBlockAppender from '../default-block-appender';
+import styles from './style.scss';
+
+function BlockListAppender( {
+	blockClientIds,
+	rootClientId,
+	canInsertDefaultBlock,
+	isLocked,
+} ) {
+	if ( isLocked ) {
+		return null;
+	}
+
+	if ( canInsertDefaultBlock ) {
+		return (
+			<DefaultBlockAppender
+				rootClientId={ rootClientId }
+				lastBlockClientId={ last( blockClientIds ) }
+				containerStyle={ styles.blockListAppender }
+				placeholder={ blockClientIds.length > 0 ? '' : null }
+			/>
+		);
+	}
+
+	return null;
+}
+
+export default withSelect( ( select, { rootClientId } ) => {
+	const {
+		getBlockOrder,
+		canInsertBlockType,
+		getTemplateLock,
+	} = select( 'core/block-editor' );
+
+	return {
+		isLocked: !! getTemplateLock( rootClientId ),
+		blockClientIds: getBlockOrder( rootClientId ),
+		canInsertDefaultBlock: canInsertBlockType( getDefaultBlockName(), rootClientId ),
+	};
+} )( BlockListAppender );

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

@@ -0,0 +1,9 @@
+
+.blockListAppender {
+	background-color: $white;
+	padding-left: 16;
+	padding-right: 16;
+	padding-top: 12;
+	padding-bottom: 0; // will be flushed into inline toolbar height
+	border-color: transparent;
+}

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

@@ -100,6 +100,7 @@ export class BlockList extends Component {
 				<KeyboardAwareFlatList
 					{ ...( Platform.OS === 'android' ? { removeClippedSubviews: false } : {} ) } // Disable clipping on Android to fix focus losing. See https://github.com/wordpress-mobile/gutenberg-mobile/pull/741#issuecomment-472746541
 					accessibilityLabel="block-list"
+					autoScroll={ this.props.autoScroll }
 					innerRef={ this.scrollViewInnerRef }
 					extraScrollHeight={ innerToolbarHeight + 10 }
 					keyboardShouldPersistTaps="always"

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

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import { Text, View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { withSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+const BlockInsertionPoint = ( { showInsertionPoint } ) => {
+	if ( ! showInsertionPoint ) {
+		return null;
+	}
+
+	return (
+		<View style={ styles.containerStyleAddHere } >
+			<View style={ styles.lineStyleAddHere }></View>
+			<Text style={ styles.labelStyleAddHere } >{ __( 'ADD BLOCK HERE' ) }</Text>
+			<View style={ styles.lineStyleAddHere }></View>
+		</View>
+	);
+};
+
+export default withSelect( ( select, { clientId, rootClientId } ) => {
+	const {
+		getBlockIndex,
+		getBlockInsertionPoint,
+		isBlockInsertionPointVisible,
+	} = select( 'core/block-editor' );
+	const blockIndex = getBlockIndex( clientId, rootClientId );
+	const insertionPoint = getBlockInsertionPoint();
+	const showInsertionPoint = (
+		isBlockInsertionPointVisible() &&
+		insertionPoint.index === blockIndex &&
+		insertionPoint.rootClientId === rootClientId
+	);
+
+	return { showInsertionPoint };
+} )( BlockInsertionPoint );

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

@@ -14,51 +14,59 @@ import { withInstanceId, compose } from '@wordpress/compose';
 const BlockMover = ( {
 	isFirst,
 	isLast,
+	isLocked,
 	onMoveDown,
 	onMoveUp,
 	firstIndex,
-} ) => (
-	<>
-		<ToolbarButton
-			title={ ! isFirst ?
-				sprintf(
-					/* translators: accessibility text. %1: current block position (number). %2: next block position (number) */
-					__( 'Move block up from row %1$s to row %2$s' ),
-					firstIndex + 1,
-					firstIndex
-				) :
-				__( 'Move block up' )
-			}
-			isDisabled={ isFirst }
-			onClick={ onMoveUp }
-			icon="arrow-up-alt"
-			extraProps={ { hint: __( 'Double tap to move the block up' ) } }
-		/>
+	rootClientId,
+} ) => {
+	if ( isLocked || ( isFirst && isLast && ! rootClientId ) ) {
+		return null;
+	}
 
-		<ToolbarButton
-			title={ ! isLast ?
-				sprintf(
-					/* translators: accessibility text. %1: current block position (number). %2: next block position (number) */
-					__( 'Move block down from row %1$s to row %2$s' ),
-					firstIndex + 1,
-					firstIndex + 2
-				) :
-				__( 'Move block down' )
-			}
-			isDisabled={ isLast }
-			onClick={ onMoveDown }
-			icon="arrow-down-alt"
-			extraProps={ { hint: __( 'Double tap to move the block down' ) } }
-		/>
-	</>
-);
+	return (
+		<>
+			<ToolbarButton
+				title={ ! isFirst ?
+					sprintf(
+						/* translators: accessibility text. %1: current block position (number). %2: next block position (number) */
+						__( 'Move block up from row %1$s to row %2$s' ),
+						firstIndex + 1,
+						firstIndex
+					) :
+					__( 'Move block up' )
+				}
+				isDisabled={ isFirst }
+				onClick={ onMoveUp }
+				icon="arrow-up-alt"
+				extraProps={ { hint: __( 'Double tap to move the block up' ) } }
+			/>
+
+			<ToolbarButton
+				title={ ! isLast ?
+					sprintf(
+						/* translators: accessibility text. %1: current block position (number). %2: next block position (number) */
+						__( 'Move block down from row %1$s to row %2$s' ),
+						firstIndex + 1,
+						firstIndex + 2
+					) :
+					__( 'Move block down' )
+				}
+				isDisabled={ isLast }
+				onClick={ onMoveDown }
+				icon="arrow-down-alt"
+				extraProps={ { hint: __( 'Double tap to move the block down' ) } }
+			/>
+		</>
+	);
+};
 
 export default compose(
 	withSelect( ( select, { clientIds } ) => {
-		const { getBlockIndex, getBlockRootClientId, getBlockOrder } = select( 'core/block-editor' );
+		const { getBlockIndex, getTemplateLock, getBlockRootClientId, getBlockOrder } = select( 'core/block-editor' );
 		const normalizedClientIds = castArray( clientIds );
 		const firstClientId = first( normalizedClientIds );
-		const rootClientId = getBlockRootClientId( first( normalizedClientIds ) );
+		const rootClientId = getBlockRootClientId( firstClientId );
 		const blockOrder = getBlockOrder( rootClientId );
 		const firstIndex = getBlockIndex( firstClientId, rootClientId );
 		const lastIndex = getBlockIndex( last( normalizedClientIds ), rootClientId );
@@ -67,6 +75,8 @@ export default compose(
 			firstIndex,
 			isFirst: firstIndex === 0,
 			isLast: lastIndex === blockOrder.length - 1,
+			isLocked: getTemplateLock( rootClientId ) === 'all',
+			rootClientId,
 		};
 	} ),
 	withDispatch( ( dispatch, { clientIds, rootClientId } ) => {

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

@@ -2,9 +2,12 @@
 export { default as BlockControls } from './block-controls';
 export { default as BlockEdit } from './block-edit';
 export { default as BlockFormatControls } from './block-format-controls';
+export { default as BlockIcon } from './block-icon';
+export { default as BlockVerticalAlignmentToolbar } from './block-vertical-alignment-toolbar';
 export * from './colors';
 export * from './font-sizes';
 export { default as AlignmentToolbar } from './alignment-toolbar';
+export { default as InnerBlocks } from './inner-blocks';
 export { default as InspectorControls } from './inspector-controls';
 export { default as PlainText } from './plain-text';
 export {