From ede822c2f89c5d5da95ce96261abf38abf160d55 Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Wed, 10 Apr 2019 12:52:55 +0200
Subject: [PATCH] Refactor core blocks to have save and transforms in their own
 files (part 3)

---
 packages/block-library/src/group/icon.js      |   8 +
 packages/block-library/src/group/index.js     |  36 +---
 packages/block-library/src/group/save.js      |  28 +++
 .../src/media-text/deprecated.js              |   5 +-
 .../block-library/src/media-text/index.js     | 132 +-----------
 packages/block-library/src/media-text/save.js |  69 +++++++
 .../src/media-text/transforms.js              |  63 ++++++
 packages/block-library/src/missing/index.js   |   9 +-
 packages/block-library/src/missing/save.js    |   9 +
 packages/block-library/src/more/index.js      |  58 +-----
 packages/block-library/src/more/save.js       |  27 +++
 packages/block-library/src/more/transforms.js |  31 +++
 packages/block-library/src/nextpage/index.js  |  34 +---
 packages/block-library/src/nextpage/save.js   |  12 ++
 .../block-library/src/nextpage/transforms.js  |  21 ++
 packages/block-library/src/paragraph/index.js |  75 +------
 packages/block-library/src/paragraph/save.js  |  58 ++++++
 .../block-library/src/paragraph/transforms.js |  22 ++
 .../block-library/src/preformatted/index.js   |  52 +----
 .../block-library/src/preformatted/save.js    |  10 +
 .../src/preformatted/transforms.js            |  42 ++++
 packages/block-library/src/pullquote/edit.js  |   6 +-
 packages/block-library/src/pullquote/index.js |  74 +------
 packages/block-library/src/pullquote/save.js  |  65 ++++++
 .../block-library/src/pullquote/shared.js     |   2 +
 packages/block-library/src/quote/index.js     | 191 +-----------------
 packages/block-library/src/quote/save.js      |  15 ++
 .../block-library/src/quote/transforms.js     | 175 ++++++++++++++++
 packages/block-library/src/rss/index.js       |   6 -
 packages/block-library/src/search/index.js    |   6 -
 packages/block-library/src/separator/index.js |  31 +--
 packages/block-library/src/separator/save.js  |   3 +
 .../block-library/src/separator/transforms.js |  23 +++
 packages/block-library/src/shortcode/index.js |  40 +---
 packages/block-library/src/shortcode/save.js  |   8 +
 .../block-library/src/shortcode/transforms.js |  31 +++
 packages/block-library/src/spacer/index.js    |   9 +-
 packages/block-library/src/spacer/save.js     |   3 +
 38 files changed, 776 insertions(+), 713 deletions(-)
 create mode 100644 packages/block-library/src/group/icon.js
 create mode 100644 packages/block-library/src/group/save.js
 create mode 100644 packages/block-library/src/media-text/save.js
 create mode 100644 packages/block-library/src/media-text/transforms.js
 create mode 100644 packages/block-library/src/missing/save.js
 create mode 100644 packages/block-library/src/more/save.js
 create mode 100644 packages/block-library/src/more/transforms.js
 create mode 100644 packages/block-library/src/nextpage/save.js
 create mode 100644 packages/block-library/src/nextpage/transforms.js
 create mode 100644 packages/block-library/src/paragraph/save.js
 create mode 100644 packages/block-library/src/paragraph/transforms.js
 create mode 100644 packages/block-library/src/preformatted/save.js
 create mode 100644 packages/block-library/src/preformatted/transforms.js
 create mode 100644 packages/block-library/src/pullquote/save.js
 create mode 100644 packages/block-library/src/pullquote/shared.js
 create mode 100644 packages/block-library/src/quote/save.js
 create mode 100644 packages/block-library/src/quote/transforms.js
 create mode 100644 packages/block-library/src/separator/save.js
 create mode 100644 packages/block-library/src/separator/transforms.js
 create mode 100644 packages/block-library/src/shortcode/save.js
 create mode 100644 packages/block-library/src/shortcode/transforms.js
 create mode 100644 packages/block-library/src/spacer/save.js

diff --git a/packages/block-library/src/group/icon.js b/packages/block-library/src/group/icon.js
new file mode 100644
index 00000000000000..959b844350615f
--- /dev/null
+++ b/packages/block-library/src/group/icon.js
@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/components';
+
+export default (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><Path d="M19 12h-2v3h-3v2h5v-5zM7 9h3V7H5v5h2V9zm14-6H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02z" /><Path d="M0 0h24v24H0z" fill="none" /></SVG>
+);
diff --git a/packages/block-library/src/group/index.js b/packages/block-library/src/group/index.js
index 13c02c9c955c72..9bab779f5863b5 100644
--- a/packages/block-library/src/group/index.js
+++ b/packages/block-library/src/group/index.js
@@ -1,20 +1,15 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { Path, SVG } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { InnerBlocks, getColorClassName } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import edit from './edit';
+import icon from './icon';
 import metadata from './block.json';
+import save from './save';
 
 const { name } = metadata;
 
@@ -22,37 +17,14 @@ export { metadata, name };
 
 export const settings = {
 	title: __( 'Group' ),
-
-	icon: <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><Path d="M19 12h-2v3h-3v2h5v-5zM7 9h3V7H5v5h2V9zm14-6H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02z" /><Path d="M0 0h24v24H0z" fill="none" /></SVG>,
-
+	icon,
 	description: __( 'A block that groups other blocks.' ),
-
 	keywords: [ __( 'container' ), __( 'wrapper' ), __( 'row' ), __( 'section' ) ],
-
 	supports: {
 		align: [ 'wide', 'full' ],
 		anchor: true,
 		html: false,
 	},
-
 	edit,
-
-	save( { attributes } ) {
-		const { backgroundColor, customBackgroundColor } = attributes;
-
-		const backgroundClass = getColorClassName( 'background-color', backgroundColor );
-		const className = classnames( backgroundClass, {
-			'has-background': backgroundColor || customBackgroundColor,
-		} );
-
-		const styles = {
-			backgroundColor: backgroundClass ? undefined : customBackgroundColor,
-		};
-
-		return (
-			<div className={ className } style={ styles }>
-				<InnerBlocks.Content />
-			</div>
-		);
-	},
+	save,
 };
diff --git a/packages/block-library/src/group/save.js b/packages/block-library/src/group/save.js
new file mode 100644
index 00000000000000..a0ee8246c69a8d
--- /dev/null
+++ b/packages/block-library/src/group/save.js
@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks, getColorClassName } from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+	const { backgroundColor, customBackgroundColor } = attributes;
+
+	const backgroundClass = getColorClassName( 'background-color', backgroundColor );
+	const className = classnames( backgroundClass, {
+		'has-background': backgroundColor || customBackgroundColor,
+	} );
+
+	const styles = {
+		backgroundColor: backgroundClass ? undefined : customBackgroundColor,
+	};
+
+	return (
+		<div className={ className } style={ styles }>
+			<InnerBlocks.Content />
+		</div>
+	);
+}
diff --git a/packages/block-library/src/media-text/deprecated.js b/packages/block-library/src/media-text/deprecated.js
index ab36e6859b3e84..2123e259a97faf 100644
--- a/packages/block-library/src/media-text/deprecated.js
+++ b/packages/block-library/src/media-text/deprecated.js
@@ -12,10 +12,7 @@ import {
 	getColorClassName,
 } from '@wordpress/block-editor';
 
-/**
- * Internal dependencies
- */
-import { DEFAULT_MEDIA_WIDTH } from './index';
+const DEFAULT_MEDIA_WIDTH = 50;
 
 export default [
 	{
diff --git a/packages/block-library/src/media-text/index.js b/packages/block-library/src/media-text/index.js
index 781b7e60b52cf9..b20dc9693bafa8 100644
--- a/packages/block-library/src/media-text/index.js
+++ b/packages/block-library/src/media-text/index.js
@@ -1,29 +1,17 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
-import { createBlock } from '@wordpress/blocks';
-import {
-	InnerBlocks,
-	getColorClassName,
-} from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
+import deprecated from './deprecated';
 import edit from './edit';
 import icon from './icon';
-import deprecated from './deprecated';
-import { imageFillStyles } from './media-container';
 import metadata from './block.json';
-
-export const DEFAULT_MEDIA_WIDTH = 50;
+import save from './save';
+import transforms from './transforms';
 
 const { name } = metadata;
 
@@ -31,125 +19,15 @@ export { metadata, name };
 
 export const settings = {
 	title: __( 'Media & Text' ),
-
 	description: __( 'Set media and words side-by-side for a richer layout.' ),
-
 	icon,
-
 	keywords: [ __( 'image' ), __( 'video' ) ],
-
 	supports: {
 		align: [ 'wide', 'full' ],
 		html: false,
 	},
-
-	transforms: {
-		from: [
-			{
-				type: 'block',
-				blocks: [ 'core/image' ],
-				transform: ( { alt, url, id } ) => (
-					createBlock( 'core/media-text', {
-						mediaAlt: alt,
-						mediaId: id,
-						mediaUrl: url,
-						mediaType: 'image',
-					} )
-				),
-			},
-			{
-				type: 'block',
-				blocks: [ 'core/video' ],
-				transform: ( { src, id } ) => (
-					createBlock( 'core/media-text', {
-						mediaId: id,
-						mediaUrl: src,
-						mediaType: 'video',
-					} )
-				),
-			},
-		],
-		to: [
-			{
-				type: 'block',
-				blocks: [ 'core/image' ],
-				isMatch: ( { mediaType, mediaUrl } ) => {
-					return ! mediaUrl || mediaType === 'image';
-				},
-				transform: ( { mediaAlt, mediaId, mediaUrl } ) => {
-					return createBlock( 'core/image', {
-						alt: mediaAlt,
-						id: mediaId,
-						url: mediaUrl,
-					} );
-				},
-			},
-			{
-				type: 'block',
-				blocks: [ 'core/video' ],
-				isMatch: ( { mediaType, mediaUrl } ) => {
-					return ! mediaUrl || mediaType === 'video';
-				},
-				transform: ( { mediaId, mediaUrl } ) => {
-					return createBlock( 'core/video', {
-						id: mediaId,
-						src: mediaUrl,
-					} );
-				},
-			},
-		],
-	},
-
+	transforms,
 	edit,
-
-	save( { attributes } ) {
-		const {
-			backgroundColor,
-			customBackgroundColor,
-			isStackedOnMobile,
-			mediaAlt,
-			mediaPosition,
-			mediaType,
-			mediaUrl,
-			mediaWidth,
-			mediaId,
-			verticalAlignment,
-			imageFill,
-			focalPoint,
-		} = attributes;
-		const mediaTypeRenders = {
-			image: () => <img src={ mediaUrl } alt={ mediaAlt } className={ ( mediaId && mediaType === 'image' ) ? `wp-image-${ mediaId }` : null } />,
-			video: () => <video controls src={ mediaUrl } />,
-		};
-		const backgroundClass = getColorClassName( 'background-color', backgroundColor );
-		const className = classnames( {
-			'has-media-on-the-right': 'right' === mediaPosition,
-			[ backgroundClass ]: backgroundClass,
-			'is-stacked-on-mobile': isStackedOnMobile,
-			[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
-			'is-image-fill': imageFill,
-		} );
-		const backgroundStyles = imageFill ? imageFillStyles( mediaUrl, focalPoint ) : {};
-
-		let gridTemplateColumns;
-		if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) {
-			gridTemplateColumns = 'right' === mediaPosition ? `auto ${ mediaWidth }%` : `${ mediaWidth }% auto`;
-		}
-		const style = {
-			backgroundColor: backgroundClass ? undefined : customBackgroundColor,
-			gridTemplateColumns,
-		};
-		return (
-			<div className={ className } style={ style }>
-				<figure className="wp-block-media-text__media" style={ backgroundStyles }>
-					{ ( mediaTypeRenders[ mediaType ] || noop )() }
-				</figure>
-				<div className="wp-block-media-text__content">
-					<InnerBlocks.Content />
-				</div>
-			</div>
-		);
-	},
-
+	save,
 	deprecated,
 };
diff --git a/packages/block-library/src/media-text/save.js b/packages/block-library/src/media-text/save.js
new file mode 100644
index 00000000000000..ad00e4c76b19cc
--- /dev/null
+++ b/packages/block-library/src/media-text/save.js
@@ -0,0 +1,69 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { noop } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	InnerBlocks,
+	getColorClassName,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { imageFillStyles } from './media-container';
+
+const DEFAULT_MEDIA_WIDTH = 50;
+
+export default function save( { attributes } ) {
+	const {
+		backgroundColor,
+		customBackgroundColor,
+		isStackedOnMobile,
+		mediaAlt,
+		mediaPosition,
+		mediaType,
+		mediaUrl,
+		mediaWidth,
+		mediaId,
+		verticalAlignment,
+		imageFill,
+		focalPoint,
+	} = attributes;
+	const mediaTypeRenders = {
+		image: () => <img src={ mediaUrl } alt={ mediaAlt } className={ ( mediaId && mediaType === 'image' ) ? `wp-image-${ mediaId }` : null } />,
+		video: () => <video controls src={ mediaUrl } />,
+	};
+	const backgroundClass = getColorClassName( 'background-color', backgroundColor );
+	const className = classnames( {
+		'has-media-on-the-right': 'right' === mediaPosition,
+		[ backgroundClass ]: backgroundClass,
+		'is-stacked-on-mobile': isStackedOnMobile,
+		[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
+		'is-image-fill': imageFill,
+	} );
+	const backgroundStyles = imageFill ? imageFillStyles( mediaUrl, focalPoint ) : {};
+
+	let gridTemplateColumns;
+	if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) {
+		gridTemplateColumns = 'right' === mediaPosition ? `auto ${ mediaWidth }%` : `${ mediaWidth }% auto`;
+	}
+	const style = {
+		backgroundColor: backgroundClass ? undefined : customBackgroundColor,
+		gridTemplateColumns,
+	};
+	return (
+		<div className={ className } style={ style }>
+			<figure className="wp-block-media-text__media" style={ backgroundStyles }>
+				{ ( mediaTypeRenders[ mediaType ] || noop )() }
+			</figure>
+			<div className="wp-block-media-text__content">
+				<InnerBlocks.Content />
+			</div>
+		</div>
+	);
+}
diff --git a/packages/block-library/src/media-text/transforms.js b/packages/block-library/src/media-text/transforms.js
new file mode 100644
index 00000000000000..f14246bed01b6e
--- /dev/null
+++ b/packages/block-library/src/media-text/transforms.js
@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+const transforms = {
+	from: [
+		{
+			type: 'block',
+			blocks: [ 'core/image' ],
+			transform: ( { alt, url, id } ) => (
+				createBlock( 'core/media-text', {
+					mediaAlt: alt,
+					mediaId: id,
+					mediaUrl: url,
+					mediaType: 'image',
+				} )
+			),
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/video' ],
+			transform: ( { src, id } ) => (
+				createBlock( 'core/media-text', {
+					mediaId: id,
+					mediaUrl: src,
+					mediaType: 'video',
+				} )
+			),
+		},
+	],
+	to: [
+		{
+			type: 'block',
+			blocks: [ 'core/image' ],
+			isMatch: ( { mediaType, mediaUrl } ) => {
+				return ! mediaUrl || mediaType === 'image';
+			},
+			transform: ( { mediaAlt, mediaId, mediaUrl } ) => {
+				return createBlock( 'core/image', {
+					alt: mediaAlt,
+					id: mediaId,
+					url: mediaUrl,
+				} );
+			},
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/video' ],
+			isMatch: ( { mediaType, mediaUrl } ) => {
+				return ! mediaUrl || mediaType === 'video';
+			},
+			transform: ( { mediaId, mediaUrl } ) => {
+				return createBlock( 'core/video', {
+					id: mediaId,
+					src: mediaUrl,
+				} );
+			},
+		},
+	],
+};
+
+export default transforms;
diff --git a/packages/block-library/src/missing/index.js b/packages/block-library/src/missing/index.js
index b57e48309c9e9a..301efedc3b8265 100644
--- a/packages/block-library/src/missing/index.js
+++ b/packages/block-library/src/missing/index.js
@@ -2,13 +2,13 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { RawHTML } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import edit from './edit';
 import metadata from './block.json';
+import save from './save';
 
 const { name } = metadata;
 
@@ -18,7 +18,6 @@ export const settings = {
 	name,
 	title: __( 'Unrecognized Block' ),
 	description: __( 'Your site doesn’t include support for this block.' ),
-
 	supports: {
 		className: false,
 		customClassName: false,
@@ -26,10 +25,6 @@ export const settings = {
 		html: false,
 		reusable: false,
 	},
-
 	edit,
-	save( { attributes } ) {
-		// Preserve the missing block's content.
-		return <RawHTML>{ attributes.originalContent }</RawHTML>;
-	},
+	save,
 };
diff --git a/packages/block-library/src/missing/save.js b/packages/block-library/src/missing/save.js
new file mode 100644
index 00000000000000..eb2c26d318236b
--- /dev/null
+++ b/packages/block-library/src/missing/save.js
@@ -0,0 +1,9 @@
+/**
+ * WordPress dependencies
+ */
+import { RawHTML } from '@wordpress/element';
+
+export default function save( { attributes } ) {
+	// Preserve the missing block's content.
+	return <RawHTML>{ attributes.originalContent }</RawHTML>;
+}
diff --git a/packages/block-library/src/more/index.js b/packages/block-library/src/more/index.js
index a9893832876ade..9e73bdccb405b6 100644
--- a/packages/block-library/src/more/index.js
+++ b/packages/block-library/src/more/index.js
@@ -1,14 +1,7 @@
-/**
- * External dependencies
- */
-import { compact } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { RawHTML } from '@wordpress/element';
-import { createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -16,6 +9,8 @@ import { createBlock } from '@wordpress/blocks';
 import edit from './edit';
 import icon from './icon';
 import metadata from './block.json';
+import save from './save';
+import transforms from './transforms';
 
 const { name } = metadata;
 
@@ -23,60 +18,15 @@ export { metadata, name };
 
 export const settings = {
 	title: _x( 'More', 'block name' ),
-
 	description: __( 'Content before this block will be shown in the excerpt on your archives page.' ),
-
 	icon,
-
 	supports: {
 		customClassName: false,
 		className: false,
 		html: false,
 		multiple: false,
 	},
-
-	transforms: {
-		from: [
-			{
-				type: 'raw',
-				schema: {
-					'wp-block': { attributes: [ 'data-block' ] },
-				},
-				isMatch: ( node ) => node.dataset && node.dataset.block === 'core/more',
-				transform( node ) {
-					const { customText, noTeaser } = node.dataset;
-					const attrs = {};
-					// Don't copy unless defined and not an empty string
-					if ( customText ) {
-						attrs.customText = customText;
-					}
-					// Special handling for boolean
-					if ( noTeaser === '' ) {
-						attrs.noTeaser = true;
-					}
-					return createBlock( 'core/more', attrs );
-				},
-			},
-		],
-	},
-
+	transforms,
 	edit,
-
-	save( { attributes } ) {
-		const { customText, noTeaser } = attributes;
-
-		const moreTag = customText ?
-			`<!--more ${ customText }-->` :
-			'<!--more-->';
-
-		const noTeaserTag = noTeaser ?
-			'<!--noteaser-->' :
-			'';
-
-		return (
-			<RawHTML>
-				{ compact( [ moreTag, noTeaserTag ] ).join( '\n' ) }
-			</RawHTML>
-		);
-	},
+	save,
 };
diff --git a/packages/block-library/src/more/save.js b/packages/block-library/src/more/save.js
new file mode 100644
index 00000000000000..f3483924d85ffb
--- /dev/null
+++ b/packages/block-library/src/more/save.js
@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import { compact } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { RawHTML } from '@wordpress/element';
+
+export default function save( { attributes } ) {
+	const { customText, noTeaser } = attributes;
+
+	const moreTag = customText ?
+		`<!--more ${ customText }-->` :
+		'<!--more-->';
+
+	const noTeaserTag = noTeaser ?
+		'<!--noteaser-->' :
+		'';
+
+	return (
+		<RawHTML>
+			{ compact( [ moreTag, noTeaserTag ] ).join( '\n' ) }
+		</RawHTML>
+	);
+}
diff --git a/packages/block-library/src/more/transforms.js b/packages/block-library/src/more/transforms.js
new file mode 100644
index 00000000000000..41cabf5183affa
--- /dev/null
+++ b/packages/block-library/src/more/transforms.js
@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+const transforms = {
+	from: [
+		{
+			type: 'raw',
+			schema: {
+				'wp-block': { attributes: [ 'data-block' ] },
+			},
+			isMatch: ( node ) => node.dataset && node.dataset.block === 'core/more',
+			transform( node ) {
+				const { customText, noTeaser } = node.dataset;
+				const attrs = {};
+				// Don't copy unless defined and not an empty string
+				if ( customText ) {
+					attrs.customText = customText;
+				}
+				// Special handling for boolean
+				if ( noTeaser === '' ) {
+					attrs.noTeaser = true;
+				}
+				return createBlock( 'core/more', attrs );
+			},
+		},
+	],
+};
+
+export default transforms;
diff --git a/packages/block-library/src/nextpage/index.js b/packages/block-library/src/nextpage/index.js
index e565f003eb5223..99524951cecd3d 100644
--- a/packages/block-library/src/nextpage/index.js
+++ b/packages/block-library/src/nextpage/index.js
@@ -2,8 +2,6 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { RawHTML } from '@wordpress/element';
-import { createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -11,6 +9,8 @@ import { createBlock } from '@wordpress/blocks';
 import edit from './edit';
 import icon from './icon';
 import metadata from './block.json';
+import save from './save';
+import transforms from './transforms';
 
 const { name } = metadata;
 
@@ -18,41 +18,15 @@ export { metadata, name };
 
 export const settings = {
 	title: __( 'Page Break' ),
-
 	description: __( 'Separate your content into a multi-page experience.' ),
-
 	icon,
-
 	keywords: [ __( 'next page' ), __( 'pagination' ) ],
-
 	supports: {
 		customClassName: false,
 		className: false,
 		html: false,
 	},
-
-	transforms: {
-		from: [
-			{
-				type: 'raw',
-				schema: {
-					'wp-block': { attributes: [ 'data-block' ] },
-				},
-				isMatch: ( node ) => node.dataset && node.dataset.block === 'core/nextpage',
-				transform() {
-					return createBlock( 'core/nextpage', {} );
-				},
-			},
-		],
-	},
-
+	transforms,
 	edit,
-
-	save() {
-		return (
-			<RawHTML>
-				{ '<!--nextpage-->' }
-			</RawHTML>
-		);
-	},
+	save,
 };
diff --git a/packages/block-library/src/nextpage/save.js b/packages/block-library/src/nextpage/save.js
new file mode 100644
index 00000000000000..f86dd0dc6b4be4
--- /dev/null
+++ b/packages/block-library/src/nextpage/save.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { RawHTML } from '@wordpress/element';
+
+export default function save() {
+	return (
+		<RawHTML>
+			{ '<!--nextpage-->' }
+		</RawHTML>
+	);
+}
diff --git a/packages/block-library/src/nextpage/transforms.js b/packages/block-library/src/nextpage/transforms.js
new file mode 100644
index 00000000000000..e9aa6d2d9b1992
--- /dev/null
+++ b/packages/block-library/src/nextpage/transforms.js
@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+const transforms = {
+	from: [
+		{
+			type: 'raw',
+			schema: {
+				'wp-block': { attributes: [ 'data-block' ] },
+			},
+			isMatch: ( node ) => node.dataset && node.dataset.block === 'core/nextpage',
+			transform() {
+				return createBlock( 'core/nextpage', {} );
+			},
+		},
+	],
+};
+
+export default transforms;
diff --git a/packages/block-library/src/paragraph/index.js b/packages/block-library/src/paragraph/index.js
index 5da558c07d4ff0..a5578252f8fee4 100644
--- a/packages/block-library/src/paragraph/index.js
+++ b/packages/block-library/src/paragraph/index.js
@@ -13,10 +13,8 @@ import {
 } from '@wordpress/element';
 import {
 	getColorClassName,
-	getFontSizeClass,
 	RichText,
 } from '@wordpress/block-editor';
-import { getPhrasingContentSchema } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -24,6 +22,8 @@ import { getPhrasingContentSchema } from '@wordpress/blocks';
 import edit from './edit';
 import icon from './icon';
 import metadata from './block.json';
+import save from './save';
+import transforms from './transforms';
 
 const { name, attributes: schema } = metadata;
 
@@ -35,31 +35,11 @@ const supports = {
 
 export const settings = {
 	title: __( 'Paragraph' ),
-
 	description: __( 'Start with the building block of all narrative.' ),
-
 	icon,
-
 	keywords: [ __( 'text' ) ],
-
 	supports,
-
-	transforms: {
-		from: [
-			{
-				type: 'raw',
-				// Paragraph is a fallback and should be matched last.
-				priority: 20,
-				selector: 'p',
-				schema: {
-					p: {
-						children: getPhrasingContentSchema(),
-					},
-				},
-			},
-		],
-	},
-
+	transforms,
 	deprecated: [
 		{
 			supports,
@@ -164,64 +144,17 @@ export const settings = {
 			},
 		},
 	],
-
 	merge( attributes, attributesToMerge ) {
 		return {
 			content: ( attributes.content || '' ) + ( attributesToMerge.content || '' ),
 		};
 	},
-
 	getEditWrapperProps( attributes ) {
 		const { width } = attributes;
 		if ( [ 'wide', 'full', 'left', 'right' ].indexOf( width ) !== -1 ) {
 			return { 'data-align': width };
 		}
 	},
-
 	edit,
-
-	save( { attributes } ) {
-		const {
-			align,
-			content,
-			dropCap,
-			backgroundColor,
-			textColor,
-			customBackgroundColor,
-			customTextColor,
-			fontSize,
-			customFontSize,
-			direction,
-		} = attributes;
-
-		const textClass = getColorClassName( 'color', textColor );
-		const backgroundClass = getColorClassName( 'background-color', backgroundColor );
-		const fontSizeClass = getFontSizeClass( fontSize );
-
-		const className = classnames( {
-			'has-text-color': textColor || customTextColor,
-			'has-background': backgroundColor || customBackgroundColor,
-			'has-drop-cap': dropCap,
-			[ fontSizeClass ]: fontSizeClass,
-			[ textClass ]: textClass,
-			[ backgroundClass ]: backgroundClass,
-		} );
-
-		const styles = {
-			backgroundColor: backgroundClass ? undefined : customBackgroundColor,
-			color: textClass ? undefined : customTextColor,
-			fontSize: fontSizeClass ? undefined : customFontSize,
-			textAlign: align,
-		};
-
-		return (
-			<RichText.Content
-				tagName="p"
-				style={ styles }
-				className={ className ? className : undefined }
-				value={ content }
-				dir={ direction }
-			/>
-		);
-	},
+	save,
 };
diff --git a/packages/block-library/src/paragraph/save.js b/packages/block-library/src/paragraph/save.js
new file mode 100644
index 00000000000000..b4c3b7c02d0831
--- /dev/null
+++ b/packages/block-library/src/paragraph/save.js
@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	getColorClassName,
+	getFontSizeClass,
+	RichText,
+} from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+	const {
+		align,
+		content,
+		dropCap,
+		backgroundColor,
+		textColor,
+		customBackgroundColor,
+		customTextColor,
+		fontSize,
+		customFontSize,
+		direction,
+	} = attributes;
+
+	const textClass = getColorClassName( 'color', textColor );
+	const backgroundClass = getColorClassName( 'background-color', backgroundColor );
+	const fontSizeClass = getFontSizeClass( fontSize );
+
+	const className = classnames( {
+		'has-text-color': textColor || customTextColor,
+		'has-background': backgroundColor || customBackgroundColor,
+		'has-drop-cap': dropCap,
+		[ fontSizeClass ]: fontSizeClass,
+		[ textClass ]: textClass,
+		[ backgroundClass ]: backgroundClass,
+	} );
+
+	const styles = {
+		backgroundColor: backgroundClass ? undefined : customBackgroundColor,
+		color: textClass ? undefined : customTextColor,
+		fontSize: fontSizeClass ? undefined : customFontSize,
+		textAlign: align,
+	};
+
+	return (
+		<RichText.Content
+			tagName="p"
+			style={ styles }
+			className={ className ? className : undefined }
+			value={ content }
+			dir={ direction }
+		/>
+	);
+}
diff --git a/packages/block-library/src/paragraph/transforms.js b/packages/block-library/src/paragraph/transforms.js
new file mode 100644
index 00000000000000..51aa06292ef861
--- /dev/null
+++ b/packages/block-library/src/paragraph/transforms.js
@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { getPhrasingContentSchema } from '@wordpress/blocks';
+
+const transforms = {
+	from: [
+		{
+			type: 'raw',
+			// Paragraph is a fallback and should be matched last.
+			priority: 20,
+			selector: 'p',
+			schema: {
+				p: {
+					children: getPhrasingContentSchema(),
+				},
+			},
+		},
+	],
+};
+
+export default transforms;
diff --git a/packages/block-library/src/preformatted/index.js b/packages/block-library/src/preformatted/index.js
index cbc3d0190b0b59..eee13ab37f6f7c 100644
--- a/packages/block-library/src/preformatted/index.js
+++ b/packages/block-library/src/preformatted/index.js
@@ -2,8 +2,6 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { createBlock, getPhrasingContentSchema } from '@wordpress/blocks';
-import { RichText } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -11,6 +9,8 @@ import { RichText } from '@wordpress/block-editor';
 import edit from './edit';
 import icon from './icon';
 import metadata from './block.json';
+import save from './save';
+import transforms from './transforms';
 
 const { name } = metadata;
 
@@ -18,55 +18,11 @@ export { metadata, name };
 
 export const settings = {
 	title: __( 'Preformatted' ),
-
 	description: __( 'Add text that respects your spacing and tabs, and also allows styling.' ),
-
 	icon,
-
-	transforms: {
-		from: [
-			{
-				type: 'block',
-				blocks: [ 'core/code', 'core/paragraph' ],
-				transform: ( { content } ) =>
-					createBlock( 'core/preformatted', {
-						content,
-					} ),
-			},
-			{
-				type: 'raw',
-				isMatch: ( node ) => (
-					node.nodeName === 'PRE' &&
-					! (
-						node.children.length === 1 &&
-						node.firstChild.nodeName === 'CODE'
-					)
-				),
-				schema: {
-					pre: {
-						children: getPhrasingContentSchema(),
-					},
-				},
-			},
-		],
-		to: [
-			{
-				type: 'block',
-				blocks: [ 'core/paragraph' ],
-				transform: ( attributes ) =>
-					createBlock( 'core/paragraph', attributes ),
-			},
-		],
-	},
-
+	transforms,
 	edit,
-
-	save( { attributes } ) {
-		const { content } = attributes;
-
-		return <RichText.Content tagName="pre" value={ content } />;
-	},
-
+	save,
 	merge( attributes, attributesToMerge ) {
 		return {
 			content: attributes.content + attributesToMerge.content,
diff --git a/packages/block-library/src/preformatted/save.js b/packages/block-library/src/preformatted/save.js
new file mode 100644
index 00000000000000..f11dabb3f93e6f
--- /dev/null
+++ b/packages/block-library/src/preformatted/save.js
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { RichText } from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+	const { content } = attributes;
+
+	return <RichText.Content tagName="pre" value={ content } />;
+}
diff --git a/packages/block-library/src/preformatted/transforms.js b/packages/block-library/src/preformatted/transforms.js
new file mode 100644
index 00000000000000..f7d736ef5770a7
--- /dev/null
+++ b/packages/block-library/src/preformatted/transforms.js
@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock, getPhrasingContentSchema } from '@wordpress/blocks';
+
+const transforms = {
+	from: [
+		{
+			type: 'block',
+			blocks: [ 'core/code', 'core/paragraph' ],
+			transform: ( { content } ) =>
+				createBlock( 'core/preformatted', {
+					content,
+				} ),
+		},
+		{
+			type: 'raw',
+			isMatch: ( node ) => (
+				node.nodeName === 'PRE' &&
+				! (
+					node.children.length === 1 &&
+					node.firstChild.nodeName === 'CODE'
+				)
+			),
+			schema: {
+				pre: {
+					children: getPhrasingContentSchema(),
+				},
+			},
+		},
+	],
+	to: [
+		{
+			type: 'block',
+			blocks: [ 'core/paragraph' ],
+			transform: ( attributes ) =>
+				createBlock( 'core/paragraph', attributes ),
+		},
+	],
+};
+
+export default transforms;
diff --git a/packages/block-library/src/pullquote/edit.js b/packages/block-library/src/pullquote/edit.js
index 45acc1f67463d2..7875d6e7e5fbbc 100644
--- a/packages/block-library/src/pullquote/edit.js
+++ b/packages/block-library/src/pullquote/edit.js
@@ -20,8 +20,10 @@ import {
 	PanelColorSettings,
 } from '@wordpress/block-editor';
 
-export const SOLID_COLOR_STYLE_NAME = 'solid-color';
-export const SOLID_COLOR_CLASS = `is-style-${ SOLID_COLOR_STYLE_NAME }`;
+/**
+ * Internal dependencies
+ */
+import { SOLID_COLOR_CLASS } from './shared';
 
 class PullQuoteEdit extends Component {
 	constructor( props ) {
diff --git a/packages/block-library/src/pullquote/index.js b/packages/block-library/src/pullquote/index.js
index dca6f603b70b55..0c7c29b38ac670 100644
--- a/packages/block-library/src/pullquote/index.js
+++ b/packages/block-library/src/pullquote/index.js
@@ -1,99 +1,35 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import { get, includes } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import {
-	getColorClassName,
-	RichText,
-	getColorObjectByAttributeValues,
-} from '@wordpress/block-editor';
-import {
-	select,
-} from '@wordpress/data';
+import { RichText } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import {
-	default as edit,
-	SOLID_COLOR_STYLE_NAME,
-	SOLID_COLOR_CLASS,
-} from './edit';
+import { SOLID_COLOR_STYLE_NAME } from './shared';
+import edit from './edit';
 import icon from './icon';
 import metadata from './block.json';
+import save from './save';
 
 const { name, attributes: blockAttributes } = metadata;
 
 export { metadata, name };
 
 export const settings = {
-
 	title: __( 'Pullquote' ),
-
 	description: __( 'Give special visual emphasis to a quote from your text.' ),
-
 	icon,
-
 	styles: [
 		{ name: 'default', label: _x( 'Default', 'block style' ), isDefault: true },
 		{ name: SOLID_COLOR_STYLE_NAME, label: __( 'Solid Color' ) },
 	],
-
 	supports: {
 		align: [ 'left', 'right', 'wide', 'full' ],
 	},
-
 	edit,
-
-	save( { attributes } ) {
-		const { mainColor, customMainColor, textColor, customTextColor, value, citation, className } = attributes;
-		const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
-
-		let figureClass, figureStyles;
-		// Is solid color style
-		if ( isSolidColorStyle ) {
-			figureClass = getColorClassName( 'background-color', mainColor );
-			if ( ! figureClass ) {
-				figureStyles = {
-					backgroundColor: customMainColor,
-				};
-			}
-		// Is normal style and a custom color is being used ( we can set a style directly with its value)
-		} else if ( customMainColor ) {
-			figureStyles = {
-				borderColor: customMainColor,
-			};
-		// Is normal style and a named color is being used, we need to retrieve the color value to set the style,
-		// as there is no expectation that themes create classes that set border colors.
-		} else if ( mainColor ) {
-			const colors = get( select( 'core/block-editor' ).getSettings(), [ 'colors' ], [] );
-			const colorObject = getColorObjectByAttributeValues( colors, mainColor );
-			figureStyles = {
-				borderColor: colorObject.color,
-			};
-		}
-
-		const blockquoteTextColorClass = getColorClassName( 'color', textColor );
-		const blockquoteClasses = textColor || customTextColor ? classnames( 'has-text-color', {
-			[ blockquoteTextColorClass ]: blockquoteTextColorClass,
-		} ) : undefined;
-		const blockquoteStyle = blockquoteTextColorClass ? undefined : { color: customTextColor };
-		return (
-			<figure className={ figureClass } style={ figureStyles }>
-				<blockquote className={ blockquoteClasses } style={ blockquoteStyle } >
-					<RichText.Content value={ value } multiline />
-					{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="cite" value={ citation } /> }
-				</blockquote>
-			</figure>
-		);
-	},
-
+	save,
 	deprecated: [ {
 		attributes: {
 			...blockAttributes,
diff --git a/packages/block-library/src/pullquote/save.js b/packages/block-library/src/pullquote/save.js
new file mode 100644
index 00000000000000..67c53fafd28e3c
--- /dev/null
+++ b/packages/block-library/src/pullquote/save.js
@@ -0,0 +1,65 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { get, includes } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	getColorClassName,
+	RichText,
+	getColorObjectByAttributeValues,
+} from '@wordpress/block-editor';
+import {
+	select,
+} from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { SOLID_COLOR_CLASS } from './edit';
+
+export default function save( { attributes } ) {
+	const { mainColor, customMainColor, textColor, customTextColor, value, citation, className } = attributes;
+	const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
+
+	let figureClass, figureStyles;
+	// Is solid color style
+	if ( isSolidColorStyle ) {
+		figureClass = getColorClassName( 'background-color', mainColor );
+		if ( ! figureClass ) {
+			figureStyles = {
+				backgroundColor: customMainColor,
+			};
+		}
+		// Is normal style and a custom color is being used ( we can set a style directly with its value)
+	} else if ( customMainColor ) {
+		figureStyles = {
+			borderColor: customMainColor,
+		};
+		// Is normal style and a named color is being used, we need to retrieve the color value to set the style,
+		// as there is no expectation that themes create classes that set border colors.
+	} else if ( mainColor ) {
+		const colors = get( select( 'core/block-editor' ).getSettings(), [ 'colors' ], [] );
+		const colorObject = getColorObjectByAttributeValues( colors, mainColor );
+		figureStyles = {
+			borderColor: colorObject.color,
+		};
+	}
+
+	const blockquoteTextColorClass = getColorClassName( 'color', textColor );
+	const blockquoteClasses = textColor || customTextColor ? classnames( 'has-text-color', {
+		[ blockquoteTextColorClass ]: blockquoteTextColorClass,
+	} ) : undefined;
+	const blockquoteStyle = blockquoteTextColorClass ? undefined : { color: customTextColor };
+	return (
+		<figure className={ figureClass } style={ figureStyles }>
+			<blockquote className={ blockquoteClasses } style={ blockquoteStyle } >
+				<RichText.Content value={ value } multiline />
+				{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="cite" value={ citation } /> }
+			</blockquote>
+		</figure>
+	);
+}
diff --git a/packages/block-library/src/pullquote/shared.js b/packages/block-library/src/pullquote/shared.js
new file mode 100644
index 00000000000000..f4a58bc2baed22
--- /dev/null
+++ b/packages/block-library/src/pullquote/shared.js
@@ -0,0 +1,2 @@
+export const SOLID_COLOR_STYLE_NAME = 'solid-color';
+export const SOLID_COLOR_CLASS = `is-style-${ SOLID_COLOR_STYLE_NAME }`;
diff --git a/packages/block-library/src/quote/index.js b/packages/block-library/src/quote/index.js
index c40f929eca496d..105bde9dde68bc 100644
--- a/packages/block-library/src/quote/index.js
+++ b/packages/block-library/src/quote/index.js
@@ -7,9 +7,7 @@ import { omit } from 'lodash';
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { createBlock, getPhrasingContentSchema } from '@wordpress/blocks';
 import { RichText } from '@wordpress/block-editor';
-import { create, join, split, toHTMLString } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
@@ -17,6 +15,8 @@ import { create, join, split, toHTMLString } from '@wordpress/rich-text';
 import edit from './edit';
 import icon from './icon';
 import metadata from './block.json';
+import save from './save';
+import transforms from './transforms';
 
 const { name, attributes: blockAttributes } = metadata;
 
@@ -27,195 +27,13 @@ export const settings = {
 	description: __( 'Give quoted text visual emphasis. "In quoting others, we cite ourselves." — Julio Cortázar' ),
 	icon,
 	keywords: [ __( 'blockquote' ) ],
-
-	attributes: blockAttributes,
-
 	styles: [
 		{ name: 'default', label: _x( 'Default', 'block style' ), isDefault: true },
 		{ name: 'large', label: _x( 'Large', 'block style' ) },
 	],
-
-	transforms: {
-		from: [
-			{
-				type: 'block',
-				isMultiBlock: true,
-				blocks: [ 'core/paragraph' ],
-				transform: ( attributes ) => {
-					return createBlock( 'core/quote', {
-						value: toHTMLString( {
-							value: join( attributes.map( ( { content } ) =>
-								create( { html: content } )
-							), '\u2028' ),
-							multilineTag: 'p',
-						} ),
-					} );
-				},
-			},
-			{
-				type: 'block',
-				blocks: [ 'core/heading' ],
-				transform: ( { content } ) => {
-					return createBlock( 'core/quote', {
-						value: `<p>${ content }</p>`,
-					} );
-				},
-			},
-			{
-				type: 'block',
-				blocks: [ 'core/pullquote' ],
-				transform: ( { value, citation } ) => createBlock( 'core/quote', {
-					value,
-					citation,
-				} ),
-			},
-			{
-				type: 'prefix',
-				prefix: '>',
-				transform: ( content ) => {
-					return createBlock( 'core/quote', {
-						value: `<p>${ content }</p>`,
-					} );
-				},
-			},
-			{
-				type: 'raw',
-				isMatch: ( node ) => {
-					const isParagraphOrSingleCite = ( () => {
-						let hasCitation = false;
-						return ( child ) => {
-							// Child is a paragraph.
-							if ( child.nodeName === 'P' ) {
-								return true;
-							}
-							// Child is a cite and no other cite child exists before it.
-							if (
-								! hasCitation &&
-								child.nodeName === 'CITE'
-							) {
-								hasCitation = true;
-								return true;
-							}
-						};
-					} )();
-					return node.nodeName === 'BLOCKQUOTE' &&
-					// The quote block can only handle multiline paragraph
-					// content with an optional cite child.
-					Array.from( node.childNodes ).every(
-						isParagraphOrSingleCite
-					);
-				},
-				schema: {
-					blockquote: {
-						children: {
-							p: {
-								children: getPhrasingContentSchema(),
-							},
-							cite: {
-								children: getPhrasingContentSchema(),
-							},
-						},
-					},
-				},
-			},
-		],
-		to: [
-			{
-				type: 'block',
-				blocks: [ 'core/paragraph' ],
-				transform: ( { value, citation } ) => {
-					const paragraphs = [];
-					if ( value && value !== '<p></p>' ) {
-						paragraphs.push(
-							...split( create( { html: value, multilineTag: 'p' } ), '\u2028' )
-								.map( ( piece ) =>
-									createBlock( 'core/paragraph', {
-										content: toHTMLString( { value: piece } ),
-									} )
-								)
-						);
-					}
-					if ( citation && citation !== '<p></p>' ) {
-						paragraphs.push(
-							createBlock( 'core/paragraph', {
-								content: citation,
-							} )
-						);
-					}
-
-					if ( paragraphs.length === 0 ) {
-						return createBlock( 'core/paragraph', {
-							content: '',
-						} );
-					}
-					return paragraphs;
-				},
-			},
-
-			{
-				type: 'block',
-				blocks: [ 'core/heading' ],
-				transform: ( { value, citation, ...attrs } ) => {
-					// If there is no quote content, use the citation as the
-					// content of the resulting heading. A nonexistent citation
-					// will result in an empty heading.
-					if ( value === '<p></p>' ) {
-						return createBlock( 'core/heading', {
-							content: citation,
-						} );
-					}
-
-					const pieces = split( create( { html: value, multilineTag: 'p' } ), '\u2028' );
-
-					const headingBlock = createBlock( 'core/heading', {
-						content: toHTMLString( { value: pieces[ 0 ] } ),
-					} );
-
-					if ( ! citation && pieces.length === 1 ) {
-						return headingBlock;
-					}
-
-					const quotePieces = pieces.slice( 1 );
-
-					const quoteBlock = createBlock( 'core/quote', {
-						...attrs,
-						citation,
-						value: toHTMLString( {
-							value: quotePieces.length ? join( pieces.slice( 1 ), '\u2028' ) : create(),
-							multilineTag: 'p',
-						} ),
-					} );
-
-					return [ headingBlock, quoteBlock ];
-				},
-			},
-
-			{
-				type: 'block',
-				blocks: [ 'core/pullquote' ],
-				transform: ( { value, citation } ) => {
-					return createBlock( 'core/pullquote', {
-						value,
-						citation,
-					} );
-				},
-			},
-		],
-	},
-
+	transforms,
 	edit,
-
-	save( { attributes } ) {
-		const { align, value, citation } = attributes;
-
-		return (
-			<blockquote style={ { textAlign: align ? align : null } }>
-				<RichText.Content multiline value={ value } />
-				{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="cite" value={ citation } /> }
-			</blockquote>
-		);
-	},
-
+	save,
 	merge( attributes, { value, citation } ) {
 		if ( ! value || value === '<p></p>' ) {
 			return {
@@ -230,7 +48,6 @@ export const settings = {
 			citation: attributes.citation + citation,
 		};
 	},
-
 	deprecated: [
 		{
 			attributes: {
diff --git a/packages/block-library/src/quote/save.js b/packages/block-library/src/quote/save.js
new file mode 100644
index 00000000000000..be0fe834fd7647
--- /dev/null
+++ b/packages/block-library/src/quote/save.js
@@ -0,0 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { RichText } from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+	const { align, value, citation } = attributes;
+
+	return (
+		<blockquote style={ { textAlign: align ? align : null } }>
+			<RichText.Content multiline value={ value } />
+			{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="cite" value={ citation } /> }
+		</blockquote>
+	);
+}
diff --git a/packages/block-library/src/quote/transforms.js b/packages/block-library/src/quote/transforms.js
new file mode 100644
index 00000000000000..c05c8b4b50a799
--- /dev/null
+++ b/packages/block-library/src/quote/transforms.js
@@ -0,0 +1,175 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock, getPhrasingContentSchema } from '@wordpress/blocks';
+import { create, join, split, toHTMLString } from '@wordpress/rich-text';
+
+const transforms = {
+	from: [
+		{
+			type: 'block',
+			isMultiBlock: true,
+			blocks: [ 'core/paragraph' ],
+			transform: ( attributes ) => {
+				return createBlock( 'core/quote', {
+					value: toHTMLString( {
+						value: join( attributes.map( ( { content } ) =>
+							create( { html: content } )
+						), '\u2028' ),
+						multilineTag: 'p',
+					} ),
+				} );
+			},
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/heading' ],
+			transform: ( { content } ) => {
+				return createBlock( 'core/quote', {
+					value: `<p>${ content }</p>`,
+				} );
+			},
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/pullquote' ],
+			transform: ( { value, citation } ) => createBlock( 'core/quote', {
+				value,
+				citation,
+			} ),
+		},
+		{
+			type: 'prefix',
+			prefix: '>',
+			transform: ( content ) => {
+				return createBlock( 'core/quote', {
+					value: `<p>${ content }</p>`,
+				} );
+			},
+		},
+		{
+			type: 'raw',
+			isMatch: ( node ) => {
+				const isParagraphOrSingleCite = ( () => {
+					let hasCitation = false;
+					return ( child ) => {
+						// Child is a paragraph.
+						if ( child.nodeName === 'P' ) {
+							return true;
+						}
+						// Child is a cite and no other cite child exists before it.
+						if (
+							! hasCitation &&
+							child.nodeName === 'CITE'
+						) {
+							hasCitation = true;
+							return true;
+						}
+					};
+				} )();
+				return node.nodeName === 'BLOCKQUOTE' &&
+					// The quote block can only handle multiline paragraph
+					// content with an optional cite child.
+					Array.from( node.childNodes ).every(
+						isParagraphOrSingleCite
+					);
+			},
+			schema: {
+				blockquote: {
+					children: {
+						p: {
+							children: getPhrasingContentSchema(),
+						},
+						cite: {
+							children: getPhrasingContentSchema(),
+						},
+					},
+				},
+			},
+		},
+	],
+	to: [
+		{
+			type: 'block',
+			blocks: [ 'core/paragraph' ],
+			transform: ( { value, citation } ) => {
+				const paragraphs = [];
+				if ( value && value !== '<p></p>' ) {
+					paragraphs.push(
+						...split( create( { html: value, multilineTag: 'p' } ), '\u2028' )
+							.map( ( piece ) =>
+								createBlock( 'core/paragraph', {
+									content: toHTMLString( { value: piece } ),
+								} )
+							)
+					);
+				}
+				if ( citation && citation !== '<p></p>' ) {
+					paragraphs.push(
+						createBlock( 'core/paragraph', {
+							content: citation,
+						} )
+					);
+				}
+
+				if ( paragraphs.length === 0 ) {
+					return createBlock( 'core/paragraph', {
+						content: '',
+					} );
+				}
+				return paragraphs;
+			},
+		},
+
+		{
+			type: 'block',
+			blocks: [ 'core/heading' ],
+			transform: ( { value, citation, ...attrs } ) => {
+				// If there is no quote content, use the citation as the
+				// content of the resulting heading. A nonexistent citation
+				// will result in an empty heading.
+				if ( value === '<p></p>' ) {
+					return createBlock( 'core/heading', {
+						content: citation,
+					} );
+				}
+
+				const pieces = split( create( { html: value, multilineTag: 'p' } ), '\u2028' );
+
+				const headingBlock = createBlock( 'core/heading', {
+					content: toHTMLString( { value: pieces[ 0 ] } ),
+				} );
+
+				if ( ! citation && pieces.length === 1 ) {
+					return headingBlock;
+				}
+
+				const quotePieces = pieces.slice( 1 );
+
+				const quoteBlock = createBlock( 'core/quote', {
+					...attrs,
+					citation,
+					value: toHTMLString( {
+						value: quotePieces.length ? join( pieces.slice( 1 ), '\u2028' ) : create(),
+						multilineTag: 'p',
+					} ),
+				} );
+
+				return [ headingBlock, quoteBlock ];
+			},
+		},
+
+		{
+			type: 'block',
+			blocks: [ 'core/pullquote' ],
+			transform: ( { value, citation } ) => {
+				return createBlock( 'core/pullquote', {
+					value,
+					citation,
+				} );
+			},
+		},
+	],
+};
+
+export default transforms;
diff --git a/packages/block-library/src/rss/index.js b/packages/block-library/src/rss/index.js
index 649b974a956902..46260d7751d02c 100644
--- a/packages/block-library/src/rss/index.js
+++ b/packages/block-library/src/rss/index.js
@@ -12,19 +12,13 @@ export const name = 'core/rss';
 
 export const settings = {
 	title: __( 'RSS' ),
-
 	description: __( 'Display entries from any RSS or Atom feed.' ),
-
 	icon: 'rss',
-
 	category: 'widgets',
-
 	keywords: [ __( 'atom' ), __( 'feed' ) ],
-
 	supports: {
 		align: true,
 		html: false,
 	},
-
 	edit,
 };
diff --git a/packages/block-library/src/search/index.js b/packages/block-library/src/search/index.js
index 2860e359314ad6..9023ccde6979e1 100644
--- a/packages/block-library/src/search/index.js
+++ b/packages/block-library/src/search/index.js
@@ -12,18 +12,12 @@ export const name = 'core/search';
 
 export const settings = {
 	title: __( 'Search' ),
-
 	description: __( 'Help visitors find your content.' ),
-
 	icon: 'search',
-
 	category: 'widgets',
-
 	keywords: [ __( 'find' ) ],
-
 	supports: {
 		align: true,
 	},
-
 	edit,
 };
diff --git a/packages/block-library/src/separator/index.js b/packages/block-library/src/separator/index.js
index 3a7dae05ea3579..a1d7eb8bd08e58 100644
--- a/packages/block-library/src/separator/index.js
+++ b/packages/block-library/src/separator/index.js
@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -10,6 +9,8 @@ import { createBlock } from '@wordpress/blocks';
 import edit from './edit';
 import icon from './icon';
 import metadata from './block.json';
+import save from './save';
+import transforms from './transforms';
 
 const { name } = metadata;
 
@@ -17,39 +18,15 @@ export { metadata, name };
 
 export const settings = {
 	title: __( 'Separator' ),
-
 	description: __( 'Create a break between ideas or sections with a horizontal separator.' ),
-
 	icon,
-
 	keywords: [ __( 'horizontal-line' ), 'hr', __( 'divider' ) ],
-
 	styles: [
 		{ name: 'default', label: __( 'Default' ), isDefault: true },
 		{ name: 'wide', label: __( 'Wide Line' ) },
 		{ name: 'dots', label: __( 'Dots' ) },
 	],
-
-	transforms: {
-		from: [
-			{
-				type: 'enter',
-				regExp: /^-{3,}$/,
-				transform: () => createBlock( 'core/separator' ),
-			},
-			{
-				type: 'raw',
-				selector: 'hr',
-				schema: {
-					hr: {},
-				},
-			},
-		],
-	},
-
+	transforms,
 	edit,
-
-	save() {
-		return <hr />;
-	},
+	save,
 };
diff --git a/packages/block-library/src/separator/save.js b/packages/block-library/src/separator/save.js
new file mode 100644
index 00000000000000..72ddec8db51cee
--- /dev/null
+++ b/packages/block-library/src/separator/save.js
@@ -0,0 +1,3 @@
+export default function save() {
+	return <hr />;
+}
diff --git a/packages/block-library/src/separator/transforms.js b/packages/block-library/src/separator/transforms.js
new file mode 100644
index 00000000000000..06d9d667caf63d
--- /dev/null
+++ b/packages/block-library/src/separator/transforms.js
@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+const transforms = {
+	from: [
+		{
+			type: 'enter',
+			regExp: /^-{3,}$/,
+			transform: () => createBlock( 'core/separator' ),
+		},
+		{
+			type: 'raw',
+			selector: 'hr',
+			schema: {
+				hr: {},
+			},
+		},
+	],
+};
+
+export default transforms;
diff --git a/packages/block-library/src/shortcode/index.js b/packages/block-library/src/shortcode/index.js
index 351151065e1079..d1ccb00e17d9bc 100644
--- a/packages/block-library/src/shortcode/index.js
+++ b/packages/block-library/src/shortcode/index.js
@@ -1,8 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { removep, autop } from '@wordpress/autop';
-import { RawHTML } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -10,52 +8,22 @@ import { __ } from '@wordpress/i18n';
  */
 import edit from './edit';
 import icon from './icon';
+import save from './save';
+import transforms from './transforms';
 
 export const name = 'core/shortcode';
 
 export const settings = {
 	title: __( 'Shortcode' ),
-
 	description: __( 'Insert additional custom elements with a WordPress shortcode.' ),
-
 	icon,
-
 	category: 'widgets',
-
-	transforms: {
-		from: [
-			{
-				type: 'shortcode',
-				// Per "Shortcode names should be all lowercase and use all
-				// letters, but numbers and underscores should work fine too.
-				// Be wary of using hyphens (dashes), you'll be better off not
-				// using them." in https://codex.wordpress.org/Shortcode_API
-				// Require that the first character be a letter. This notably
-				// prevents footnote markings ([1]) from being caught as
-				// shortcodes.
-				tag: '[a-z][a-z0-9_-]*',
-				attributes: {
-					text: {
-						type: 'string',
-						shortcode: ( attrs, { content } ) => {
-							return removep( autop( content ) );
-						},
-					},
-				},
-				priority: 20,
-			},
-		],
-	},
-
+	transforms,
 	supports: {
 		customClassName: false,
 		className: false,
 		html: false,
 	},
-
 	edit,
-
-	save( { attributes } ) {
-		return <RawHTML>{ attributes.text }</RawHTML>;
-	},
+	save,
 };
diff --git a/packages/block-library/src/shortcode/save.js b/packages/block-library/src/shortcode/save.js
new file mode 100644
index 00000000000000..a745788b1e6c0e
--- /dev/null
+++ b/packages/block-library/src/shortcode/save.js
@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { RawHTML } from '@wordpress/element';
+
+export default function save( { attributes } ) {
+	return <RawHTML>{ attributes.text }</RawHTML>;
+}
diff --git a/packages/block-library/src/shortcode/transforms.js b/packages/block-library/src/shortcode/transforms.js
new file mode 100644
index 00000000000000..eb0f7a0538dfee
--- /dev/null
+++ b/packages/block-library/src/shortcode/transforms.js
@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { removep, autop } from '@wordpress/autop';
+
+const transforms = {
+	from: [
+		{
+			type: 'shortcode',
+			// Per "Shortcode names should be all lowercase and use all
+			// letters, but numbers and underscores should work fine too.
+			// Be wary of using hyphens (dashes), you'll be better off not
+			// using them." in https://codex.wordpress.org/Shortcode_API
+			// Require that the first character be a letter. This notably
+			// prevents footnote markings ([1]) from being caught as
+			// shortcodes.
+			tag: '[a-z][a-z0-9_-]*',
+			attributes: {
+				text: {
+					type: 'string',
+					shortcode: ( attrs, { content } ) => {
+						return removep( autop( content ) );
+					},
+				},
+			},
+			priority: 20,
+		},
+	],
+};
+
+export default transforms;
diff --git a/packages/block-library/src/spacer/index.js b/packages/block-library/src/spacer/index.js
index 44a151168fb7a4..09eb2e40c5c907 100644
--- a/packages/block-library/src/spacer/index.js
+++ b/packages/block-library/src/spacer/index.js
@@ -9,6 +9,7 @@ import { __ } from '@wordpress/i18n';
 import edit from './edit';
 import icon from './icon';
 import metadata from './block.json';
+import save from './save';
 
 const { name } = metadata;
 
@@ -16,14 +17,8 @@ export { metadata, name };
 
 export const settings = {
 	title: __( 'Spacer' ),
-
 	description: __( 'Add white space between blocks and customize its height.' ),
-
 	icon,
-
 	edit,
-
-	save( { attributes } ) {
-		return <div style={ { height: attributes.height } } aria-hidden />;
-	},
+	save,
 };
diff --git a/packages/block-library/src/spacer/save.js b/packages/block-library/src/spacer/save.js
new file mode 100644
index 00000000000000..4e8067627c3062
--- /dev/null
+++ b/packages/block-library/src/spacer/save.js
@@ -0,0 +1,3 @@
+export default function save( { attributes } ) {
+	return <div style={ { height: attributes.height } } aria-hidden />;
+}