Port quote block to native app

WordPress · Oct 31, 2018 · c989bce · c989bce
1 parent 9d46596
commit c989bce
Show file tree

Hide file tree

Showing 4 changed files with 172 additions and 55 deletions.
diff --git a/packages/block-library/src/index.native.js b/packages/block-library/src/index.native.js
@@ -14,6 +14,7 @@ import * as more from './more';
 import * as paragraph from './paragraph';
 import * as image from './image';
 import * as nextpage from './nextpage';
+import * as quote from './quote';
 
 export const registerCoreBlocks = () => {
 	[
@@ -23,6 +24,7 @@ export const registerCoreBlocks = () => {
 		more,
 		image,
 		nextpage,
+		quote,
 	].forEach( ( { name, settings } ) => {
 		registerBlockType( name, settings );
 	} );

diff --git a/packages/block-library/src/quote/edit.js b/packages/block-library/src/quote/edit.js
@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Fragment } from '@wordpress/element';
+import {
+	BlockControls,
+	AlignmentToolbar,
+	RichText,
+} from '@wordpress/editor';
+
+export default function edit( { attributes, setAttributes, isSelected, mergeBlocks, onReplace, className } ) {
+	const { align, value, citation } = attributes;
+	return (
+		<Fragment>
+			<BlockControls>
+				<AlignmentToolbar
+					value={ align }
+					onChange={ ( nextAlign ) => {
+						setAttributes( { align: nextAlign } );
+					} }
+				/>
+			</BlockControls>
+			<blockquote className={ className } style={ { textAlign: align } }>
+				<RichText
+					multiline
+					value={ value }
+					onChange={
+						( nextValue ) => setAttributes( {
+							value: nextValue,
+						} )
+					}
+					onMerge={ mergeBlocks }
+					onRemove={ ( forward ) => {
+						const hasEmptyCitation = ! citation || citation.length === 0;
+						if ( ! forward && hasEmptyCitation ) {
+							onReplace( [] );
+						}
+					} }
+					/* translators: the text of the quotation */
+					placeholder={ __( 'Write quote…' ) }
+				/>
+				{ ( ! RichText.isEmpty( citation ) || isSelected ) && (
+					<RichText
+						value={ citation }
+						onChange={
+							( nextCitation ) => setAttributes( {
+								citation: nextCitation,
+							} )
+						}
+						/* translators: the individual or entity quoted */
+						placeholder={ __( 'Write citation…' ) }
+						className="wp-block-quote__citation"
+					/>
+				) }
+			</blockquote>
+		</Fragment>
+	);
+}
diff --git a/packages/block-library/src/quote/edit.native.js b/packages/block-library/src/quote/edit.native.js
@@ -0,0 +1,108 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Component } from '@wordpress/element';
+import { parse } from '@wordpress/blocks';
+import { RichText } from '@wordpress/editor';
+
+const minHeight = 50;
+
+class QuoteEdit extends Component {
+	render() {
+		const {
+			attributes,
+			setAttributes,
+			style,
+			mergeBlocks,
+			onReplace,
+			isSelected,
+		} = this.props;
+
+		const {
+			placeholder,
+			align,
+			value,
+			citation,
+		} = attributes;
+
+		return (
+			<View style={ { textAlign: align } }>
+				<RichText
+					tagName="blockquote"
+					multiline
+					value={ value }
+					style={ {
+						...style,
+						minHeight: Math.max( minHeight, typeof attributes.aztecHeight === 'undefined' ? 0 : attributes.aztecHeight ),
+					} }
+					onChange={ ( event ) => {
+						// Create a React Tree from the new HTML
+						const newQuoteBlock = parse( '<!-- wp:quote --><blockquote class="wp-block-quote">' + event.content + '</blockquote><!-- /wp:quote -->' )[ 0 ];
+						setAttributes( {
+							...this.props.attributes,
+							value: newQuoteBlock.attributes.value,
+						} );
+					}
+					}
+					onContentSizeChange={ ( event ) => {
+						setAttributes( {
+							...this.props.attributes,
+							aztecHeight: event.aztecHeight,
+						} );
+					}
+					}
+					onMerge={ mergeBlocks }
+					onRemove={ ( forward ) => {
+						const hasEmptyCitation = ! citation || citation.length === 0;
+						if ( ! forward && hasEmptyCitation ) {
+							onReplace( [] );
+						}
+					} }
+					/* translators: the text of the quotation */
+					placeholder={ placeholder || __( 'Write quote…' ) }
+				/>
+				{ ( ! RichText.isEmpty( citation ) || isSelected ) && (
+					<RichText
+						tagName="cite"
+						style={ {
+							...style,
+							minHeight: Math.max( minHeight, typeof attributes.aztecHeight === 'undefined' ? 0 : attributes.aztecHeight ),
+						} }
+						value={ citation }
+						onChange={
+							( event ) => {
+								// TODO: remove this fix
+								const openingTagRegexp = RegExp( '<cite>', 'gim' );
+								const closingTagRegexp = RegExp( '</cite>', 'gim' );
+								let newCiteVaule = event.content;
+								newCiteVaule = newCiteVaule.replace( openingTagRegexp, '' ).replace( closingTagRegexp, '' );
+								setAttributes( {
+									...this.props.attributes,
+									citation: newCiteVaule,
+								} );
+							}
+						}
+						onContentSizeChange={ ( event ) => {
+							setAttributes( {
+								...this.props.attributes,
+								aztecHeight: event.aztecHeight,
+							} );
+						}
+						}
+						/* translators: the individual or entity quoted */
+						placeholder={ placeholder || __( 'Write citation…' ) }
+						className="wp-block-quote__citation"
+					/>
+				) }
+			</View>
+		);
+	}
+}
+
+export default QuoteEdit;
diff --git a/packages/block-library/src/quote/index.js b/packages/block-library/src/quote/index.js
@@ -7,15 +7,11 @@ import { omit } from 'lodash';
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { Fragment } from '@wordpress/element';
 import { createBlock, getPhrasingContentSchema } from '@wordpress/blocks';
-import {
-	BlockControls,
-	AlignmentToolbar,
-	RichText,
-} from '@wordpress/editor';
+import { RichText } from '@wordpress/editor';
 import { join, split, create, toHTMLString } from '@wordpress/rich-text';
 import { G, Path, SVG } from '@wordpress/components';
+import edit from './edit';
 
 const blockAttributes = {
 	value: {
@@ -187,55 +183,7 @@ export const settings = {
 		],
 	},
 
-	edit( { attributes, setAttributes, isSelected, mergeBlocks, onReplace, className } ) {
-		const { align, value, citation } = attributes;
-
-		return (
-			<Fragment>
-				<BlockControls>
-					<AlignmentToolbar
-						value={ align }
-						onChange={ ( nextAlign ) => {
-							setAttributes( { align: nextAlign } );
-						} }
-					/>
-				</BlockControls>
-				<blockquote className={ className } style={ { textAlign: align } }>
-					<RichText
-						multiline
-						value={ value }
-						onChange={
-							( nextValue ) => setAttributes( {
-								value: nextValue,
-							} )
-						}
-						onMerge={ mergeBlocks }
-						onRemove={ ( forward ) => {
-							const hasEmptyCitation = ! citation || citation.length === 0;
-							if ( ! forward && hasEmptyCitation ) {
-								onReplace( [] );
-							}
-						} }
-						/* translators: the text of the quotation */
-						placeholder={ __( 'Write quote…' ) }
-					/>
-					{ ( ! RichText.isEmpty( citation ) || isSelected ) && (
-						<RichText
-							value={ citation }
-							onChange={
-								( nextCitation ) => setAttributes( {
-									citation: nextCitation,
-								} )
-							}
-							/* translators: the individual or entity quoted */
-							placeholder={ __( 'Write citation…' ) }
-							className="wp-block-quote__citation"
-						/>
-					) }
-				</blockquote>
-			</Fragment>
-		);
-	},
+	edit,
 
 	save( { attributes } ) {
 		const { align, value, citation } = attributes;