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

…5816)

* Android specific files for the Code block

* CSS related imports are suppressed
* classnames are left in only to minimize diff among the files but do not play a role, nor style the elements

* Breaking change: Don't override the default JSX translation

So far, that's the only way I found to have the android-specific jest tests succeed.

* Add the platform specific files for iOS as well

* Set TextInput to multiline for Code block

* Hide the default TextInput underline on Android

* Expose registerBlockType, getBlockType to the RN app

* Use .native.js for common native code

* Correct configuration for the babel plugins settings

* transform-react-jsx for the production env as well

* No need for pragma override

Will define a `wp` global via RN and reuse the `createElement()` from `@gutenberg/component`.

* Ignore mobile native files when linting

* Revert "Ignore mobile native files when linting"

This reverts commit a3d5ab4.

* Comment out ununsed imports

* Fix codestyle

* Import is compatible anyway, uncomment it

* Remove the React import. The RN project auto-imports it.

* Limit native code to the edit function alone

* Expose getBlockContent to RN

* RN app tests need createElement exported

* Export serialize from serializer

* Load native version of plain-text's CSS module

* Make it clear that RN uses styles, not classnames

* Use the i18n package from @WordPress

* Remove some commented out code

* Utils are not currently used on native

* 'Border' property not supported in shorthand form

* Use hypens in css class names as traditionally

* remove unused code

* No need for platform-specific factory.js

* Move native files after update from master

* Codestyle fix

* GB isn't using Prettier so, no need for the pragma

* Comment on the need to import the `edit` function

* Export the edit function as default

* Remove reduntant line comment

* Import block using the new pattern

* Add a comment about styling

* Use object property shorthand for `edit`

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 default 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,30 @@
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { PlainText } from '@wordpress/blocks';
+
+// Note: styling is applied directly to the (nested) PlainText component. Web-side components
+// apply it to the container 'div' but we don't have a proper proposal for cascading styling yet.
+export default 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';
 
 export const name = 'core/code';
 
@@ -66,18 +65,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,
 
 	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 };