Style quotes in the mobile app (#15990)

* Add spacer between BlockQuotation elements.

* Use citation identifier to style rich-text

* Remove margin on quote bar.

packages/block-editor/src/components/rich-text/index.native.js

@@ -862,7 +862,7 @@ export class RichText extends Component {
 					color={ 'black' }
 					maxImagesWidth={ 200 }
 					fontFamily={ this.props.fontFamily || styles[ 'block-editor-rich-text' ].fontFamily }
-					fontSize={ this.props.fontSize }
+					fontSize={ this.props.fontSize || ( style && style.fontSize ) }
 					fontWeight={ this.props.fontWeight }
 					fontStyle={ this.props.fontStyle }
 					disableEditingMenu={ this.props.disableEditingMenu }

packages/components/src/primitives/block-quotation/index.native.js

@@ -2,15 +2,25 @@
  * External dependencies
  */
 import { View } from 'react-native';
+/**
+ * WordPress dependencies
+ */
+import { Children, cloneElement } from '@wordpress/element';
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
 
 export const BlockQuotation = ( props ) => {
+	const newChildren = Children.map( props.children, ( child ) => {
+		if ( child && child.props.identifier === 'citation' ) {
+			return cloneElement( child, { style: styles.wpBlockQuoteCitation } );
+		}
+		return child;
+	} );
 	return (
 		<View style={ styles.wpBlockQuote } >
-			{ props.children }
+			{ newChildren }
 		</View>
 	);
 };

packages/components/src/primitives/block-quotation/style.native.scss

@@ -3,5 +3,10 @@
 	border-left-color: $black;
 	border-left-style: solid;
 	padding-left: 8px;
-	margin-left: 8px;
+	margin-left: 0;
+}
+
+.wpBlockQuoteCitation {
+	margin-top: 16px;
+	font-size: 14px;
 }