Port blockquote block to RN mobile (#15482)

* Enable quote block in editor.

* Add mobile version of quote edit.

* Stop reading focus from context.

* Make default tag to be div like on the web.

* Implement block quote component in web and RN.

* Simplify native block quote component.

* Implement empty Alignment toolbar.

* Fix style import.

* Remove import

* Rename blockquote to BlockQuotation.

* Move BlockQuotation to be a primate component.

* Add documentation reference for BlockQuotation.

* Add BlockQuotation info to the changeling.

* Update packages/components/CHANGELOG.md

Co-Authored-By: Grzegorz (Greg) Ziółkowski <[email protected]>

* Restore style file.

docs/manifest-devhub.json

@@ -833,6 +833,12 @@
 		"markdown_source": "../packages/components/src/popover/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "BlockQuotation",
+		"slug": "block-quotation",
+		"markdown_source": "../packages/components/src/primitives/block-quotation/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "HorizontalRule",
 		"slug": "horizontal-rule",

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

@@ -0,0 +1,5 @@
+const AlignmentToolbar = () => {
+	return null;
+};
+
+export default AlignmentToolbar;

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

@@ -4,6 +4,7 @@ export { default as BlockEdit } from './block-edit';
 export { default as BlockFormatControls } from './block-format-controls';
 export * from './colors';
 export * from './font-sizes';
+export { default as AlignmentToolbar } from './alignment-toolbar';
 export { default as InspectorControls } from './inspector-controls';
 export { default as PlainText } from './plain-text';
 export {

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

@@ -883,6 +883,7 @@ export class RichText extends Component {
 RichText.defaultProps = {
 	formattingControls: [ 'bold', 'italic', 'link', 'strikethrough' ],
 	format: 'string',
+	tagName: 'div',
 };
 
 const RichTextContainer = compose( [
@@ -922,6 +923,11 @@ const RichTextContainer = compose( [
 				selectionStart.clientId === clientId &&
 				selectionStart.attributeKey === identifier
 			);
+		} else {
+			isSelected = isSelected && (
+				selectionStart.clientId === clientId &&
+				selectionStart.attributeKey === identifier
+			);
 		}
 
 		return {

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

@@ -113,6 +113,7 @@ export const registerCoreBlocks = () => {
 		nextpage,
 		separator,
 		list,
+		quote,
 	].forEach( ( { metadata, name, settings } ) => {
 		registerBlockType( name, {
 			...metadata,

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

@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { AlignmentToolbar, BlockControls, RichText } from '@wordpress/block-editor';
+import { BlockQuotation } from '@wordpress/components';
 
 export default function QuoteEdit( { attributes, setAttributes, isSelected, mergeBlocks, onReplace, className } ) {
 	const { align, value, citation } = attributes;
@@ -16,7 +17,7 @@ export default function QuoteEdit( { attributes, setAttributes, isSelected, merg
 					} }
 				/>
 			</BlockControls>
-			<blockquote className={ className } style={ { textAlign: align } }>
+			<BlockQuotation className={ className } style={ { textAlign: align } }>
 				<RichText
 					identifier="value"
 					multiline
@@ -54,7 +55,7 @@ export default function QuoteEdit( { attributes, setAttributes, isSelected, merg
 						className="wp-block-quote__citation"
 					/>
 				) }
-			</blockquote>
+			</BlockQuotation>
 		</>
 	);
 }

packages/components/CHANGELOG.md

@@ -1,3 +1,9 @@
+## Master
+
+### New Feature
+
+- Add new `BlockQuotation` block to the primitives folder to support blockquote in a multiplatform way. [#15482](https://github.com/WordPress/gutenberg/pull/15482).
+
 ## 7.4.0 (2019-05-21)
 
 ### New Feature

packages/components/src/primitives/block-quotation/README.md

@@ -0,0 +1,15 @@
+# HorizontalRule
+
+A drop-in replacement for the HTML [blockquote](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote) element that works both on the web and in the mobile apps. It indicates that the enclosed text is an extended quotation.
+
+## Usage
+
+```jsx
+import { BlockQuotation } from '@wordpress/components';
+
+const MyBlockQuotation = () => (
+	<BlockQuotation>
+	   ...Quote content
+	</BlockQuotation>
+);
+```

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

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

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

@@ -0,0 +1,16 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+export const BlockQuotation = ( props ) => {
+	return (
+		<View style={ styles.wpBlockQuote } >
+			{ props.children }
+		</View>
+	);
+};

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

@@ -0,0 +1,7 @@
+.wpBlockQuote {
+	border-left-width: 4px;
+	border-left-color: $black;
+	border-left-style: solid;
+	padding-left: 8px;
+	margin-left: 8px;
+}

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

@@ -0,0 +1,19 @@
+.wp-block-quote {
+	&.is-style-large,
+	&.is-large {
+		margin: 0 0 16px;
+		padding: 0 1em;
+
+		p {
+			font-size: 24px;
+			font-style: italic;
+			line-height: 1.6;
+		}
+
+		cite,
+		footer {
+			font-size: 18px;
+			text-align: right;
+		}
+	}
+}

packages/components/src/primitives/index.js

@@ -1,2 +1,3 @@
 export * from './svg';
 export * from './horizontal-rule';
+export * from './block-quotation';

packages/viewport/src/index.native.js

@@ -0,0 +1 @@
+