[RNMobile] Pullquote block

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

@@ -30,6 +30,7 @@ export { default as URLInput } from './url-input';
 export { default as BlockInvalidWarning } from './block-list/block-invalid-warning';
 export { default as BlockCaption } from './block-caption';
 export { default as Caption } from './caption';
+export { default as PanelColorSettings } from './panel-color-settings';
 
 export { BottomSheetSettings, BlockSettingsButton } from './block-settings';
 export { default as VideoPlayer, VIDEO_ASPECT_RATIO } from './video-player';

packages/block-editor/src/components/panel-color-settings/index.native.js

@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { PanelBody, UnsupportedFooterControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const PanelColorSettings = () => {
+	return (
+		<PanelBody>
+			<UnsupportedFooterControl
+				label={ __( 'Color settings are coming soon.' ) }
+				separatorType="none"
+			/>
+		</PanelBody>
+	);
+};
+export default PanelColorSettings;

packages/block-library/src/index.native.js

@@ -154,6 +154,7 @@ export const registerCoreBlocks = () => {
 		shortcode,
 		devOnly( verse ),
 		cover,
+		devOnly( pullquote ),
 	].forEach( registerBlock );
 
 	setDefaultBlockName( paragraph.name );

packages/block-library/src/pullquote/blockquote.js

@@ -0,0 +1 @@
+export const BlockQuote = 'blockquote';

packages/block-library/src/pullquote/blockquote.native.js

@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+/**
+ * WordPress dependencies
+ */
+import { Children, cloneElement } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import styles from './blockquote.scss';
+
+export const BlockQuote = ( props ) => {
+	const newChildren = Children.map( props.children, ( child ) => {
+		if ( child && child.props.identifier === 'value' ) {
+			return cloneElement( child, {
+				style: styles.quote,
+			} );
+		}
+		if ( child && child.props.identifier === 'citation' ) {
+			return cloneElement( child, {
+				style: styles.citation,
+			} );
+		}
+		return child;
+	} );
+	return <View>{ newChildren }</View>;
+};

packages/block-library/src/pullquote/blockquote.native.scss

@@ -0,0 +1,8 @@
+.quote {
+	font-size: 18px;
+}
+
+.citation {
+	font-size: 14px;
+	margin-top: 12px;
+}

packages/block-library/src/pullquote/edit.js

@@ -16,6 +16,11 @@ import {
 	withColors,
 	PanelColorSettings,
 } from '@wordpress/block-editor';
+/**
+ * Internal dependencies
+ */
+import { Figure } from './figure';
+import { BlockQuote } from './blockquote';
 
 /**
  * Internal dependencies
@@ -124,12 +129,13 @@ class PullQuoteEdit extends Component {
 
 		return (
 			<>
-				<figure style={ figureStyles } className={ figureClasses }>
-					<blockquote
+				<Figure style={ figureStyles } className={ figureClasses }>
+					<BlockQuote
 						style={ blockquoteStyles }
 						className={ blockquoteClasses }
 					>
 						<RichText
+							identifier="value"
 							multiline
 							value={ value }
 							onChange={ ( nextValue ) =>
@@ -141,9 +147,11 @@ class PullQuoteEdit extends Component {
 								// translators: placeholder text used for the quote
 								__( 'Write quote…' )
 							}
+							textAlign="center"
 						/>
 						{ ( ! RichText.isEmpty( citation ) || isSelected ) && (
 							<RichText
+								identifier="citation"
 								value={ citation }
 								placeholder={
 									// translators: placeholder text used for the citation
@@ -155,10 +163,12 @@ class PullQuoteEdit extends Component {
 									} )
 								}
 								className="wp-block-pullquote__citation"
+								__unstableMobileNoFocusOnMount
+								textAlign="center"
 							/>
 						) }
-					</blockquote>
-				</figure>
+					</BlockQuote>
+				</Figure>
 				<InspectorControls>
 					<PanelColorSettings
 						title={ __( 'Color settings' ) }

packages/block-library/src/pullquote/figure.js

@@ -0,0 +1 @@
+export const Figure = 'figure';

packages/block-library/src/pullquote/figure.native.js

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+/**
+ * WordPress dependencies
+ */
+import { withPreferredColorScheme } from '@wordpress/compose';
+/**
+ * Internal dependencies
+ */
+import styles from './figure.scss';
+
+export const Figure = withPreferredColorScheme( ( props ) => {
+	const { children, getStylesFromColorScheme } = props;
+
+	const wpPullquoteFigure = getStylesFromColorScheme(
+		styles.light,
+		styles.dark
+	);
+
+	return <View style={ wpPullquoteFigure }>{ children }</View>;
+} );

packages/block-library/src/pullquote/figure.native.scss

@@ -0,0 +1,16 @@
+%shared {
+	border-width: 3px 0;
+	padding: 21px 16px;
+}
+
+.light {
+	@extend %shared;
+	border-top-color: $gray-lighten-20;
+	border-bottom-color: $gray-lighten-20;
+}
+
+.dark {
+	@extend %shared;
+	border-top-color: $gray-50;
+	border-bottom-color: $gray-50;
+}