Add freeform support to the react native editor (#22609)

* Add freeform support to the react native editor

* Remove duplicate video def

* Use a hook to hide the Classic block in the inserter

* Improve display of Classic block from visual editor

* Fix tab indent

* Try getting the HTML from the component state instead of syncing to the store

* Fix lint errors

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

@@ -0,0 +1,13 @@
+/**
+ * Internal dependencies
+ */
+import MissingEdit from '../missing/edit';
+
+const ClassicEdit = ( props ) => (
+	<MissingEdit
+		{ ...props }
+		attributes={ { ...props.attributes, originalName: props.name } }
+	/>
+);
+
+export default ClassicEdit;

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

@@ -2,11 +2,14 @@
  * WordPress dependencies
  */
 import {
+	hasBlockSupport,
 	registerBlockType,
 	setDefaultBlockName,
+	setFreeformContentHandlerName,
 	setUnregisteredTypeHandlerName,
 	setGroupingBlockName,
 } from '@wordpress/blocks';
+import { addFilter } from '@wordpress/hooks';
 
 /**
  * Internal dependencies
@@ -49,6 +52,7 @@ import * as textColumns from './text-columns';
 import * as verse from './verse';
 import * as video from './video';
 import * as tagCloud from './tag-cloud';
+import * as classic from './classic';
 import * as group from './group';
 import * as buttons from './buttons';
 
@@ -97,6 +101,7 @@ export const coreBlocks = [
 	textColumns,
 	verse,
 	video,
+	classic,
 	buttons,
 ].reduce( ( accumulator, block ) => {
 	accumulator[ block.name ] = block;
@@ -124,6 +129,25 @@ const registerBlock = ( block ) => {
 // eslint-disable-next-line no-undef
 const devOnly = ( block ) => ( !! __DEV__ ? block : null );
 
+// Hide the Classic block
+addFilter(
+	'blocks.registerBlockType',
+	'core/react-native-editor',
+	( settings, name ) => {
+		if (
+			name === 'core/freeform' &&
+			hasBlockSupport( settings, 'inserter', true )
+		) {
+			settings.supports = {
+				...settings.supports,
+				inserter: false,
+			};
+		}
+
+		return settings;
+	}
+);
+
 /**
  * Function to register core blocks provided by the block editor.
  *
@@ -153,6 +177,7 @@ export const registerCoreBlocks = () => {
 		columns,
 		column,
 		group,
+		classic,
 		button,
 		spacer,
 		shortcode,
@@ -164,6 +189,7 @@ export const registerCoreBlocks = () => {
 	].forEach( registerBlock );
 
 	setDefaultBlockName( paragraph.name );
+	setFreeformContentHandlerName( classic.name );
 	setUnregisteredTypeHandlerName( missing.name );
 	if ( group ) {
 		setGroupingBlockName( group.name );

packages/components/src/mobile/html-text-input/index.native.js

@@ -10,7 +10,7 @@ import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { parse } from '@wordpress/blocks';
 import { withDispatch, withSelect } from '@wordpress/data';
-import { addAction, removeAction } from '@wordpress/hooks';
+import { addFilter, removeFilter } from '@wordpress/hooks';
 import {
 	withInstanceId,
 	compose,
@@ -29,10 +29,11 @@ export class HTMLTextInput extends Component {
 
 		this.edit = this.edit.bind( this );
 		this.stopEditing = this.stopEditing.bind( this );
-		addAction(
-			'native-editor.persist-html',
-			'core/editor',
-			this.stopEditing
+		this.getHTMLForParent = this.getHTMLForParent.bind( this );
+		addFilter(
+			'native.persist-html',
+			'html-text-input',
+			this.getHTMLForParent
 		);
 
 		this.state = {};
@@ -50,7 +51,7 @@ export class HTMLTextInput extends Component {
 	}
 
 	componentWillUnmount() {
-		removeAction( 'native-editor.persist-html', 'core/editor' );
+		removeFilter( 'native.persist-html', 'html-text-input' );
 		//TODO: Blocking main thread
 		this.stopEditing();
 	}
@@ -60,6 +61,10 @@ export class HTMLTextInput extends Component {
 		this.setState( { value: html, isDirty: true } );
 	}
 
+	getHTMLForParent() {
+		return this.state.value;
+	}
+
 	stopEditing() {
 		if ( this.state.isDirty ) {
 			this.props.onPersist( this.state.value );

packages/editor/src/components/provider/index.native.js

@@ -21,7 +21,7 @@ import {
 } from '@wordpress/blocks';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
-import { doAction } from '@wordpress/hooks';
+import { applyFilters } from '@wordpress/hooks';
 
 const postTypeEntities = [
 	{ name: 'post', baseURL: '/wp/v2/posts' },
@@ -137,15 +137,17 @@ class NativeEditorProvider extends Component {
 	}
 
 	serializeToNativeAction() {
+		const title = this.props.title;
+		let html;
+
 		if ( this.props.mode === 'text' ) {
 			// The HTMLTextInput component does not update the store when user is doing changes
-			// Let's request a store update when parent is asking for it
-			doAction( 'native-editor.persist-html', 'core/editor' );
+			// Let's request the HTML from the component's state directly
+			html = applyFilters( 'native.persist-html' );
+		} else {
+			html = serialize( this.props.blocks );
 		}
 
-		const html = serialize( this.props.blocks );
-		const title = this.props.title;
-
 		const hasChanges =
 			title !== this.post.title.raw || html !== this.post.content.raw;