Port the core/code block to be used by the ReactNative mobile GB app

blocks/api/index.native.js

@@ -0,0 +1,11 @@
+export {
+	createBlock,
+} from './factory';
+export {
+	default as serialize,
+	getBlockContent,
+} from './serializer';
+export {
+	registerBlockType,
+	getBlockType,
+} from './registration';

blocks/index.native.js

@@ -0,0 +1,12 @@
+// A "block" is the abstract term used to describe units of markup that,
+// when composed together, form the content or layout of a page.
+// The API for blocks is exposed via `wp.blocks`.
+//
+// Supported blocks are registered by calling `registerBlockType`. Once registered,
+// the block is made available as an option to the editor interface.
+//
+// Blocks are inferred from the HTML source of a post through a parsing mechanism
+// and then stored as objects in state, from which it is then rendered for editing.
+export * from './api';
+
+export { default as PlainText } from './plain-text';

blocks/plain-text/index.native.js

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import { TextInput } from 'react-native';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+function PlainText( { onChange, className, ...props } ) {
+	return (
+		<TextInput
+			className={ [ styles[ 'blocks-plain-text' ], className ] }
+			onChangeText={ ( text ) => onChange( text ) }
+			{ ...props }
+		/>
+	);
+}
+
+export default PlainText;

blocks/plain-text/style.native.scss

@@ -0,0 +1,9 @@
+.blocks-plain-text {
+	box-shadow: none;
+
+	border-width: 0;
+
+	padding: 0;
+	margin: 0;
+	width: 100%;
+}

core-blocks/code/edit.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+import { PlainText } from '@wordpress/blocks';
+
+export function edit( { attributes, setAttributes, className } ) {
+	return (
+		<div className={ className }>
+			<PlainText
+				value={ attributes.content }
+				onChange={ ( content ) => setAttributes( { content } ) }
+				placeholder={ __( 'Write code…' ) }
+				aria-label={ __( 'Code' ) }
+			/>
+		</div>
+	);
+}

core-blocks/code/edit.native.js

@@ -0,0 +1,28 @@
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { PlainText } from '../../blocks';
+
+export function edit( { attributes, setAttributes, style } ) {
+	return (
+		<View>
+			<PlainText
+				value={ attributes.content }
+				style={ style }
+				multiline={ true }
+				underlineColorAndroid="transparent"
+				onChange={ ( content ) => setAttributes( { content } ) }
+				placeholder={ __( 'Write code…' ) }
+				aria-label={ __( 'Code' ) }
+			/>
+		</View>
+	);
+}
+

core-blocks/code/index.js

@@ -4,13 +4,12 @@
 import { __ } from '@wordpress/i18n';
 import {
 	createBlock,
-	PlainText,
 } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
-import './editor.scss';
+import { edit } from './edit'; // import the specialized `edit` function. Is is different between the web and native mobile.
 
 export const name = 'core/code';
 
@@ -55,18 +54,7 @@ export const settings = {
 		],
 	},
 
-	edit( { attributes, setAttributes, className } ) {
-		return (
-			<div className={ className }>
-				<PlainText
-					value={ attributes.content }
-					onChange={ ( content ) => setAttributes( { content } ) }
-					placeholder={ __( 'Write code…' ) }
-					aria-label={ __( 'Code' ) }
-				/>
-			</div>
-		);
-	},
+	edit: edit,
 
 	save( { attributes } ) {
 		return <pre><code>{ attributes.content }</code></pre>;

core-blocks/index.native.js

@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	registerBlockType,
+} from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import * as code from './code';
+
+export const registerCoreBlocks = () => {
+	[
+		code,
+	].forEach( ( { name, settings } ) => {
+		registerBlockType( name, settings );
+	} );
+};

element/index.native.js

@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import {
+	createElement,
+	Component,
+} from 'react';
+
+/**
+ * Internal dependencies
+ */
+import serialize from './serialize';
+
+/**
+ * Returns a new element of given type. Type can be either a string tag name or
+ * another function which itself returns an element.
+ *
+ * @param {?(string|Function)} type     Tag name or element creator
+ * @param {Object}             props    Element properties, either attribute
+ *                                       set to apply to DOM node or values to
+ *                                       pass through to element creator
+ * @param {...WPElement}       children Descendant elements
+ *
+ * @return {WPElement} Element.
+ */
+export { createElement };
+
+/**
+ * A base class to create WordPress Components (Refs, state and lifecycle hooks)
+ */
+export { Component };
+
+/**
+ * Renders a given element into a string.
+ *
+ * @param {WPElement} element Element to render
+ *
+ * @return {string} HTML.
+ */
+export { serialize as renderToString };