Merge pull request #81 from wordpress-mobile/feature/introduce-para-block

Introduce paragraph block and RichText component for mobile

Author: hypest

.babelrc

@@ -8,9 +8,7 @@
       "module-resolver",
       {
         "cwd": "babelrc",
-        "alias": {
-          "react-native-aztec": "./react-native-aztec",
-          "@wordpress/editor": "./editor",
+        "alias": {          
           "@gutenberg": "./gutenberg"
         },
         "extensions": [

gutenberg

@@ -30,8 +30,7 @@ module.exports = {
 		'node',
 	],
 	moduleNameMapper: {
-		'@wordpress\\/(editor)$': '<rootDir>/gutenberg/$1',
-		'@wordpress\\/(blocks|data|element|deprecated)$': '<rootDir>/gutenberg/packages/$1/src/index',
+		'@wordpress\\/(blocks|data|element|deprecated|editor)$': '<rootDir>/gutenberg/packages/$1/src/index',
 		'@gutenberg': '<rootDir>/gutenberg',
 
 		// Mock the CSS modules. See https://facebook.github.io/jest/docs/en/webpack.html#handling-static-assets

jest.config.js

@@ -5,7 +5,6 @@
 
 import React from 'react';
 import { View, Text, TouchableWithoutFeedback } from 'react-native';
-import RCTAztecView from 'react-native-aztec';
 import Toolbar from './toolbar';
 
 import type { BlockType } from '../store/';
@@ -23,19 +22,14 @@ type PropsType = BlockType & {
 type StateType = {
 	selected: boolean,
 	focused: boolean,
-	aztecHeight: number,
-	eventCount?: number,
 };
 
-const _minHeight = 50;
-
 export default class BlockHolder extends React.Component<PropsType, StateType> {
 	constructor( props: PropsType ) {
 		super( props );
 		this.state = {
 			selected: false,
 			focused: false,
-			aztecHeight: _minHeight,
 		};
 	}
 
@@ -58,6 +52,8 @@ export default class BlockHolder extends React.Component<PropsType, StateType> {
 			let style;
 			if ( blockType.name === 'core/code' ) {
 				style = styles.block_code;
+			} else if ( blockType.name === 'core/paragraph' ) {
+				style = styles[ 'aztec_editor' ];
 			}
 
 			// TODO: setAttributes needs to change the state/attributes
@@ -70,30 +66,6 @@ export default class BlockHolder extends React.Component<PropsType, StateType> {
 					style={ style }
 				/>
 			);
-		} else if ( this.props.name === 'aztec' ) {
-			return (
-				<RCTAztecView
-					accessibilityLabel="aztec-view"
-					style={ [
-						styles[ 'aztec-editor' ],
-						{ minHeight: Math.max( _minHeight, this.state.aztecHeight ) },
-					] }
-					text={ { text: this.props.attributes.content, eventCount: this.state.eventCount } }
-					onContentSizeChange={ ( event ) => {
-						this.setState( { ...this.state, aztecHeight: event.nativeEvent.contentSize.height } );
-					} }
-					onChange={ ( event ) => {
-						this.setState( { ...this.state, eventCount: event.nativeEvent.eventCount } );
-
-						this.props.onChange( this.props.uid, {
-							...this.props.attributes,
-							content: event.nativeEvent.text,
-						} );
-					} }
-					color={ 'black' }
-					maxImagesWidth={ 200 }
-				/>
-			);
 		}
 
 		// Default block placeholder

react-native-aztec

@@ -0,0 +1,37 @@
+/** @format */
+
+import '../globals';
+
+import { registerCoreBlocks } from '@gutenberg/core-blocks';
+import { parse } from '@wordpress/blocks';
+
+registerCoreBlocks();
+
+describe( 'Parser', () => {
+	const innerContent = `
+		if name == "World":
+			return "Hello World"
+		else:
+			return "Hello Pony"`;
+
+	const originalBlockHtml = `<p>${ innerContent }</p>`;
+
+	const gbBlockHtml = `
+		<!-- wp:paragraph -->
+		${ originalBlockHtml }
+		<!-- /wp:code -->`;
+
+	it( 'parses the paragraph block ok', () => {
+		const blockInstance = parse( gbBlockHtml )[ 0 ];
+		expect( blockInstance ).toBeTruthy();
+	} );
+
+	it( 'parses the paragraph block content ok', () => {
+		const blockInstance = parse( gbBlockHtml )[ 0 ];
+
+		expect( blockInstance.isValid ).toEqual( true );
+		expect( blockInstance.name ).toEqual( 'core/paragraph' );
+		expect( blockInstance.innerBlocks ).toHaveLength( 0 );
+		expect( blockInstance.originalContent ).toEqual( originalBlockHtml );
+	} );
+} );

src/block-management/block-holder.js

@@ -41,23 +41,20 @@ const initialMoreBlockHtml = `
 <!-- /wp:more -->
 `;
 
+const initialParagraphBlockHtml = '<!-- wp:paragraph --><p><b>Hello</b> World!</p><!-- /wp:paragraph -->';
+const initialParagraphBlockHtml2 = `<!-- wp:paragraph {"dropCap":true,"backgroundColor":"vivid-red","fontSize":"large","className":"custom-class-1 custom-class-2"} -->
+<p class="has-background has-drop-cap is-large-text has-vivid-red-background-color custom-class-1 custom-class-2">
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor tincidunt sapien, quis dictum orci sollicitudin quis. Proin sed elit id est pulvinar feugiat vitae eget dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><!-- /wp:paragraph -->`;
+
 const codeBlockInstance = parse( initialCodeBlockHtml )[ 0 ];
 const moreBlockInstance = parse( initialMoreBlockHtml )[ 0 ];
+const paragraphBlockInstance = parse( initialParagraphBlockHtml )[ 0 ];
+const paragraphBlockInstance2 = parse( initialParagraphBlockHtml2 )[ 0 ];
 
 const initialState: StateType = {
 	// TODO: get blocks list block state should be externalized (shared with Gutenberg at some point?).
 	// If not it should be created from a string parsing (commented HTML to json).
 	blocks: [
-		{
-			uid: '0',
-			name: 'aztec',
-			isValid: true,
-			attributes: {
-				content: 'This is text rendered <b>in Aztec!</b>',
-			},
-			innerBlocks: [],
-			focused: false,
-		},
 		{
 			uid: '1',
 			name: 'title',
@@ -68,28 +65,8 @@ const initialState: StateType = {
 			innerBlocks: [],
 			focused: false,
 		},
-		{
-			uid: '2',
-			name: 'paragraph',
-			isValid: true,
-			attributes: {
-				content:
-					'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor tincidunt sapien, quis dictum orci sollicitudin quis. Proin sed elit id est pulvinar feugiat vitae eget dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-			},
-			innerBlocks: [],
-			focused: false,
-		},
-		{
-			uid: '3',
-			name: 'paragraph',
-			isValid: true,
-			attributes: {
-				content:
-					'書籍やウェブページや広告などのデザインのプロトタイプを制作したり顧客にプレゼンテーションしたりする際に、まだ正式な文章の出来上がっていないテキスト部分の書体（フォント）、タイポグラフィ、レイアウトなどといった視覚的なデザインを調整したりわかりやすく見せるために用いられる。',
-			},
-			innerBlocks: [],
-			focused: false,
-		},
+		{ ...paragraphBlockInstance, focused: false },
+		{ ...paragraphBlockInstance2, focused: false },
 		{ ...codeBlockInstance, focused: false },
 		{ ...moreBlockInstance, focused: false },
 		{