Experiment a new way to setup the native editor that can be customize…

…d with hooks
WordPress · Apr 1, 2020 · ef169ed · ef169ed
1 parent a7b7abf
commit ef169ed
Show file tree

Hide file tree

Showing 5 changed files with 127 additions and 68 deletions.
diff --git a/packages/edit-post/src/index.native.js b/packages/edit-post/src/index.native.js
@@ -3,30 +3,44 @@
  */
 import '@wordpress/core-data';
 import '@wordpress/block-editor';
-import '@wordpress/editor';
 import '@wordpress/viewport';
 import '@wordpress/notices';
 import { registerCoreBlocks } from '@wordpress/block-library';
 import '@wordpress/format-library';
+import { render } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import './store';
+import Editor from './editor';
 
 let blocksRegistered = false;
 
 /**
- * Initializes the Editor.
+ * Initializes the Editor and returns a componentProvider
+ * that can be registered with `AppRegistry.registerComponent`
  */
-export function initializeEditor() {
+export function initializeEditor( {
+	initialHtml,
+	initialTitle,
+	initialHtmlModeEnabled,
+	postType,
+} ) {
 	if ( blocksRegistered ) {
 		return;
 	}
 
 	// register and setup blocks
 	registerCoreBlocks();
 	blocksRegistered = true;
-}
 
-export { default as Editor } from './editor';
+	return render(
+		<Editor
+			initialHtml={ initialHtml }
+			initialHtmlModeEnabled={ initialHtmlModeEnabled }
+			initialTitle={ initialTitle }
+			postType={ postType }
+		/>
+	);
+}
diff --git a/packages/element/src/react-platform.native.js b/packages/element/src/react-platform.native.js
@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import { isEmpty, omit } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { applyFilters, doAction } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import { cloneElement, useEffect } from './react';
+
+const render = ( element ) => ( propsFromNative ) => {
+	useEffect( () => {
+		doAction( 'native.init', propsFromNative );
+	}, [] );
+
+	useEffect( () => {
+		doAction( 'native.render', propsFromNative );
+	} );
+
+	// if we have not received props from a parent native app
+	// just render the element as it is
+	if ( isEmpty( omit( propsFromNative, [ 'rootTag' ] ) ) ) {
+		return element;
+	}
+
+	// Otherwise overwrite the existing props using a filter hook
+	let filteredProps = null;
+
+	useEffect( () => {
+		filteredProps = applyFilters(
+			'native.block_editor_props',
+			propsFromNative
+		);
+	}, [] );
+
+	if ( ! filteredProps ) {
+		return null;
+	}
+
+	return cloneElement( element, filteredProps );
+};
+
+/**
+ * Renders a given element into the target DOM node.
+ *
+ * @param {WPElement}   element Element to render.
+ * @param {HTMLElement} target  DOM node into which element should be rendered.
+ */
+export { render };
diff --git a/packages/react-native-editor/index.js b/packages/react-native-editor/index.js
@@ -4,6 +4,4 @@
 /**
  * Internal dependencies
  */
-import { registerApp } from './src';
-
-registerApp();
+import './src';
diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json
@@ -26,6 +26,8 @@
     "node": ">=10",
     "npm": ">=6.9"
   },
+  "main": "src/index.js",
+  "react-native": "src/index",
   "dependencies": {
     "@babel/runtime": "^7.7.7",
     "@react-native-community/slider": "git+https://github.com/wordpress-mobile/react-native-slider.git#5ad284d92b8d886e366445bf215be741ed53ddc6",

diff --git a/packages/react-native-editor/src/index.js b/packages/react-native-editor/src/index.js
@@ -1,19 +1,7 @@
 /**
  * External dependencies
- *
- * @format
  */
-
-/**
- * External dependencies
- */
-import { AppRegistry, I18nManager } from 'react-native';
-import { Component } from '@wordpress/element';
-
-/**
- * WordPress dependencies
- */
-import { setLocaleData } from '@wordpress/i18n';
+import {AppRegistry, I18nManager} from 'react-native';
 
 /**
  * Internal dependencies
@@ -23,16 +11,64 @@ import { getTranslation } from '../i18n-cache';
 import initialHtml from './initial-html';
 import setupApiFetch from './api-fetch-setup';
 
+const reactNativeSetup  = () => {
+	// Disable warnings as they disrupt the user experience in dev mode
+	// eslint-disable-next-line no-console
+	console.disableYellowBox = true;
+
+	I18nManager.forceRTL( false ); // Change to `true` to debug RTL layout easily.
+};
+
 const gutenbergSetup = () => {
 	const wpData = require( '@wordpress/data' );
 
 	// wp-data
 	const userId = 1;
 	const storageKey = 'WP_DATA_USER_' + userId;
 	wpData.use( wpData.plugins.persistence, { storageKey } );
+
+	setupInitHooks();
+
+	const initializeEditor = require( '@wordpress/edit-post' ).initializeEditor;
+	return initializeEditor( {
+		initialHtml,
+		initialHtmlModeEnabled: false,
+		initialTitle: 'Welcome to Gutenberg!',
+		postType: 'post'
+	} );
+};
+
+const setupInitHooks = () => {
+	const wpHooks = require( '@wordpress/hooks' );
+
+	wpHooks.doAction( 'native.setup-init-hooks' );
+
+	wpHooks.addAction( 'native.init', 'core/react-native-editor', ( props ) => {
+		setupLocale( 'fr', props.translations );
+		setupApiFetch();
+
+		const isHermes = () => global.HermesInternal !== null;
+		// eslint-disable-next-line no-console
+		console.log( 'Hermes is: ' + isHermes() );
+	} );
+
+	// Map native props to Editor props
+	wpHooks.addFilter(  'native.block_editor_props', 'core/react-native-editor', ( {
+		initialData,
+		initialTitle,
+		initialHtmlModeEnabled,
+		postType,
+	} ) => ( {
+		initialHtml: initialData,
+		initialHtmlModeEnabled,
+		initialTitle,
+		postType,
+	} ) );
 };
 
 const setupLocale = ( locale, extraTranslations ) => {
+	const setLocaleData = require( '@wordpress/i18n' ).setLocaleData;
+
 	I18nManager.forceRTL( false ); // Change to `true` to debug RTL layout easily.
 
 	let gutenbergTranslations = getTranslation( locale );
@@ -50,51 +86,6 @@ const setupLocale = ( locale, extraTranslations ) => {
 	}
 };
 
-export class RootComponent extends Component {
-	constructor( props ) {
-		super( props );
-		setupLocale( props.locale, props.translations );
-		setupApiFetch();
-		require( '@wordpress/edit-post' ).initializeEditor();
-
-		const isHermes = () => global.HermesInternal !== null;
-		// eslint-disable-next-line no-console
-		console.log( 'Hermes is: ' + isHermes() );
-	}
-
-	render() {
-		const { initialHtmlModeEnabled } = this.props;
-		let initialData = this.props.initialData;
-		let initialTitle = this.props.initialTitle;
-		let postType = this.props.postType;
-
-		if ( initialData === undefined && __DEV__ ) {
-			initialData = initialHtml;
-		}
-		if ( initialTitle === undefined ) {
-			initialTitle = 'Welcome to Gutenberg!';
-		}
-		if ( postType === undefined ) {
-			postType = 'post';
-		}
-		const Editor = require( '@wordpress/edit-post' ).Editor;
-		return (
-			<Editor
-				initialHtml={ initialData }
-				initialHtmlModeEnabled={ initialHtmlModeEnabled }
-				initialTitle={ initialTitle }
-				postType={ postType }
-			/>
-		);
-	}
-}
-
-export function registerApp() {
-	// Disable warnings as they disrupt the user experience in dev mode
-	// eslint-disable-next-line no-console
-	console.disableYellowBox = true;
-
-	gutenbergSetup();
+reactNativeSetup();
 
-	AppRegistry.registerComponent( 'gutenberg', () => RootComponent );
-}
+AppRegistry.registerComponent( 'gutenberg', gutenbergSetup );