diff --git a/packages/block-library/src/quote/blockquote.js b/packages/block-library/src/quote/blockquote.js
new file mode 100644
index 0000000000000..ab3348dc71198
--- /dev/null
+++ b/packages/block-library/src/quote/blockquote.js
@@ -0,0 +1,8 @@
+const BlockQuote = ( props ) => (
+	<blockquote
+		{ ...props }
+	>
+		{ props.children }
+	</blockquote>
+);
+export default BlockQuote;
diff --git a/packages/block-library/src/quote/blockquote.native.js b/packages/block-library/src/quote/blockquote.native.js
new file mode 100644
index 0000000000000..ef5a3fb754b53
--- /dev/null
+++ b/packages/block-library/src/quote/blockquote.native.js
@@ -0,0 +1,16 @@
+import React from 'react';
+
+const BlockQuote = ( props ) => {
+	const children = React.Children.toArray( props.children );
+	return (
+		<>
+			{
+				React.cloneElement( children[ 0 ], { tagName: 'blockquote' } )
+			}
+			{ ( children.length > 1 && (
+				React.cloneElement( children[ 1 ], { tagName: 'cite' } )
+			) ) } 
+		</>
+	);
+}
+export default BlockQuote;
diff --git a/packages/block-library/src/quote/edit.js b/packages/block-library/src/quote/edit.js
index 9c01310a3ade0..76bb7c6e0495f 100644
--- a/packages/block-library/src/quote/edit.js
+++ b/packages/block-library/src/quote/edit.js
@@ -4,6 +4,11 @@
 import { __ } from '@wordpress/i18n';
 import { AlignmentToolbar, BlockControls, RichText } from '@wordpress/block-editor';
 
+/**
+ * Internal dependencies
+ */
+import BlockQuote from './blockquote';
+
 export default function QuoteEdit( { attributes, setAttributes, isSelected, mergeBlocks, onReplace, className } ) {
 	const { align, value, citation } = attributes;
 	return (
@@ -16,7 +21,7 @@ export default function QuoteEdit( { attributes, setAttributes, isSelected, merg
 					} }
 				/>
 			</BlockControls>
-			<blockquote className={ className } style={ { textAlign: align } }>
+			<BlockQuote className={ className } style={ { textAlign: align } }>
 				<RichText
 					identifier="value"
 					multiline
@@ -54,7 +59,7 @@ export default function QuoteEdit( { attributes, setAttributes, isSelected, merg
 						className="wp-block-quote__citation"
 					/>
 				) }
-			</blockquote>
+			</BlockQuote>
 		</>
 	);
 }
diff --git a/packages/block-library/src/quote/edit.native.js b/packages/block-library/src/quote/edit.native.js
deleted file mode 100644
index 078ce61c3f787..0000000000000
--- a/packages/block-library/src/quote/edit.native.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Fragment } from '@wordpress/element';
-import { AlignmentToolbar, BlockControls, RichText } from '@wordpress/block-editor';
-
-export default function QuoteEdit( { attributes, setAttributes, isSelected, mergeBlocks, onReplace } ) {
-	const { align, value, citation } = attributes;
-	return (
-		<Fragment>
-			<BlockControls>
-				<AlignmentToolbar
-					value={ align }
-					onChange={ ( nextAlign ) => {
-						setAttributes( { align: nextAlign } );
-					} }
-				/>
-			</BlockControls>
-			<RichText
-				identifier="value"
-				tagName="blockquote"
-				multiline
-				value={ value }
-				onChange={
-					( nextValue ) => setAttributes( {
-						value: nextValue,
-					} )
-				}
-				onMerge={ mergeBlocks }
-				onRemove={ ( forward ) => {
-					const hasEmptyCitation = ! citation || citation.length === 0;
-					if ( ! forward && hasEmptyCitation ) {
-						onReplace( [] );
-					}
-				} }
-				placeholder={
-					// translators: placeholder text used for the quote
-					__( 'Write quote…' )
-				}
-			/>
-			{ ( ! RichText.isEmpty( citation ) || isSelected ) && (
-				<RichText
-					identifier="citation"
-					tagName="cite"
-					value={ citation }
-					onChange={
-						( nextCitation ) => setAttributes( {
-							citation: nextCitation,
-						} )
-					}
-					placeholder={
-						// translators: placeholder text used for the citation
-						__( 'Write citation…' )
-					}
-					className="wp-block-quote__citation"
-				/>
-			) }
-		</Fragment>
-	);
-}