From 8fa1405b27213e585005e2843c83f4eb6db7fe76 Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Fri, 19 Apr 2019 15:10:11 +0200
Subject: [PATCH] Block library: Extract `deprecated` field to their own files
 (p.2)

---
 .../block-library/src/paragraph/deprecated.js | 168 ++++++++++++++++++
 packages/block-library/src/paragraph/index.js | 129 +-------------
 .../block-library/src/pullquote/deprecated.js |  74 ++++++++
 packages/block-library/src/pullquote/index.js |  43 +----
 .../block-library/src/quote/deprecated.js     |  96 ++++++++++
 packages/block-library/src/quote/index.js     |  75 +-------
 6 files changed, 350 insertions(+), 235 deletions(-)
 create mode 100644 packages/block-library/src/paragraph/deprecated.js
 create mode 100644 packages/block-library/src/pullquote/deprecated.js
 create mode 100644 packages/block-library/src/quote/deprecated.js

diff --git a/packages/block-library/src/paragraph/deprecated.js b/packages/block-library/src/paragraph/deprecated.js
new file mode 100644
index 0000000000000..c3f18db62d62c
--- /dev/null
+++ b/packages/block-library/src/paragraph/deprecated.js
@@ -0,0 +1,168 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { isFinite, omit } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	RawHTML,
+} from '@wordpress/element';
+import {
+	getColorClassName,
+	RichText,
+} from '@wordpress/block-editor';
+
+const supports = {
+	className: false,
+};
+
+const blockAttributes = {
+	align: {
+		type: 'string',
+	},
+	content: {
+		type: 'string',
+		source: 'html',
+		selector: 'p',
+		default: '',
+	},
+	dropCap: {
+		type: 'boolean',
+		default: false,
+	},
+	placeholder: {
+		type: 'string',
+	},
+	textColor: {
+		type: 'string',
+	},
+	customTextColor: {
+		type: 'string',
+	},
+	backgroundColor: {
+		type: 'string',
+	},
+	customBackgroundColor: {
+		type: 'string',
+	},
+	fontSize: {
+		type: 'string',
+	},
+	customFontSize: {
+		type: 'number',
+	},
+	direction: {
+		type: 'string',
+		enum: [ 'ltr', 'rtl' ],
+	},
+};
+
+const deprecated = [
+	{
+		supports,
+		attributes: {
+			...blockAttributes,
+			width: {
+				type: 'string',
+			},
+		},
+		save( { attributes } ) {
+			const {
+				width,
+				align,
+				content,
+				dropCap,
+				backgroundColor,
+				textColor,
+				customBackgroundColor,
+				customTextColor,
+				fontSize,
+				customFontSize,
+			} = attributes;
+
+			const textClass = getColorClassName( 'color', textColor );
+			const backgroundClass = getColorClassName( 'background-color', backgroundColor );
+			const fontSizeClass = fontSize && `is-${ fontSize }-text`;
+
+			const className = classnames( {
+				[ `align${ width }` ]: width,
+				'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 }
+				/>
+			);
+		},
+	},
+	{
+		supports,
+		attributes: omit( {
+			...blockAttributes,
+			fontSize: {
+				type: 'number',
+			},
+		}, 'customFontSize', 'customTextColor', 'customBackgroundColor' ),
+		save( { attributes } ) {
+			const { width, align, content, dropCap, backgroundColor, textColor, fontSize } = attributes;
+			const className = classnames( {
+				[ `align${ width }` ]: width,
+				'has-background': backgroundColor,
+				'has-drop-cap': dropCap,
+			} );
+			const styles = {
+				backgroundColor,
+				color: textColor,
+				fontSize,
+				textAlign: align,
+			};
+
+			return <p style={ styles } className={ className ? className : undefined }>{ content }</p>;
+		},
+		migrate( attributes ) {
+			return omit( {
+				...attributes,
+				customFontSize: isFinite( attributes.fontSize ) ? attributes.fontSize : undefined,
+				customTextColor: attributes.textColor && '#' === attributes.textColor[ 0 ] ? attributes.textColor : undefined,
+				customBackgroundColor: attributes.backgroundColor && '#' === attributes.backgroundColor[ 0 ] ? attributes.backgroundColor : undefined,
+			}, [ 'fontSize', 'textColor', 'backgroundColor' ] );
+		},
+	},
+	{
+		supports,
+		attributes: {
+			...blockAttributes,
+			content: {
+				type: 'string',
+				source: 'html',
+				default: '',
+			},
+		},
+		save( { attributes } ) {
+			return <RawHTML>{ attributes.content }</RawHTML>;
+		},
+		migrate( attributes ) {
+			return attributes;
+		},
+	},
+];
+
+export default deprecated;
diff --git a/packages/block-library/src/paragraph/index.js b/packages/block-library/src/paragraph/index.js
index a5578252f8fee..5ef563ce55bf3 100644
--- a/packages/block-library/src/paragraph/index.js
+++ b/packages/block-library/src/paragraph/index.js
@@ -1,149 +1,32 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import { isFinite, omit } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	RawHTML,
-} from '@wordpress/element';
-import {
-	getColorClassName,
-	RichText,
-} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
+import deprecated from './deprecated';
 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;
+const { name } = metadata;
 
 export { metadata, name };
 
-const supports = {
-	className: false,
-};
-
 export const settings = {
 	title: __( 'Paragraph' ),
 	description: __( 'Start with the building block of all narrative.' ),
 	icon,
 	keywords: [ __( 'text' ) ],
-	supports,
+	supports: {
+		className: false,
+	},
 	transforms,
-	deprecated: [
-		{
-			supports,
-			attributes: {
-				...schema,
-				width: {
-					type: 'string',
-				},
-			},
-			save( { attributes } ) {
-				const {
-					width,
-					align,
-					content,
-					dropCap,
-					backgroundColor,
-					textColor,
-					customBackgroundColor,
-					customTextColor,
-					fontSize,
-					customFontSize,
-				} = attributes;
-
-				const textClass = getColorClassName( 'color', textColor );
-				const backgroundClass = getColorClassName( 'background-color', backgroundColor );
-				const fontSizeClass = fontSize && `is-${ fontSize }-text`;
-
-				const className = classnames( {
-					[ `align${ width }` ]: width,
-					'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 }
-					/>
-				);
-			},
-		},
-		{
-			supports,
-			attributes: omit( {
-				...schema,
-				fontSize: {
-					type: 'number',
-				},
-			}, 'customFontSize', 'customTextColor', 'customBackgroundColor' ),
-			save( { attributes } ) {
-				const { width, align, content, dropCap, backgroundColor, textColor, fontSize } = attributes;
-				const className = classnames( {
-					[ `align${ width }` ]: width,
-					'has-background': backgroundColor,
-					'has-drop-cap': dropCap,
-				} );
-				const styles = {
-					backgroundColor,
-					color: textColor,
-					fontSize,
-					textAlign: align,
-				};
-
-				return <p style={ styles } className={ className ? className : undefined }>{ content }</p>;
-			},
-			migrate( attributes ) {
-				return omit( {
-					...attributes,
-					customFontSize: isFinite( attributes.fontSize ) ? attributes.fontSize : undefined,
-					customTextColor: attributes.textColor && '#' === attributes.textColor[ 0 ] ? attributes.textColor : undefined,
-					customBackgroundColor: attributes.backgroundColor && '#' === attributes.backgroundColor[ 0 ] ? attributes.backgroundColor : undefined,
-				}, [ 'fontSize', 'textColor', 'backgroundColor' ] );
-			},
-		},
-		{
-			supports,
-			attributes: {
-				...schema,
-				content: {
-					type: 'string',
-					source: 'html',
-					default: '',
-				},
-			},
-			save( { attributes } ) {
-				return <RawHTML>{ attributes.content }</RawHTML>;
-			},
-			migrate( attributes ) {
-				return attributes;
-			},
-		},
-	],
+	deprecated,
 	merge( attributes, attributesToMerge ) {
 		return {
 			content: ( attributes.content || '' ) + ( attributesToMerge.content || '' ),
diff --git a/packages/block-library/src/pullquote/deprecated.js b/packages/block-library/src/pullquote/deprecated.js
new file mode 100644
index 0000000000000..8598fd0296dc3
--- /dev/null
+++ b/packages/block-library/src/pullquote/deprecated.js
@@ -0,0 +1,74 @@
+/**
+ * WordPress dependencies
+ */
+import { RichText } from '@wordpress/block-editor';
+
+const blockAttributes = {
+	value: {
+		type: 'string',
+		source: 'html',
+		selector: 'blockquote',
+		multiline: 'p',
+	},
+	citation: {
+		type: 'string',
+		source: 'html',
+		selector: 'cite',
+		default: '',
+	},
+	mainColor: {
+		type: 'string',
+	},
+	customMainColor: {
+		type: 'string',
+	},
+	textColor: {
+		type: 'string',
+	},
+	customTextColor: {
+		type: 'string',
+	},
+};
+
+const deprecated = [
+	{
+		attributes: {
+			...blockAttributes,
+		},
+		save( { attributes } ) {
+			const { value, citation } = attributes;
+			return (
+				<blockquote>
+					<RichText.Content value={ value } multiline />
+					{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="cite" value={ citation } /> }
+				</blockquote>
+			);
+		},
+	}, {
+		attributes: {
+			...blockAttributes,
+			citation: {
+				type: 'string',
+				source: 'html',
+				selector: 'footer',
+			},
+			align: {
+				type: 'string',
+				default: 'none',
+			},
+		},
+
+		save( { attributes } ) {
+			const { value, citation, align } = attributes;
+
+			return (
+				<blockquote className={ `align${ align }` }>
+					<RichText.Content value={ value } multiline />
+					{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="footer" value={ citation } /> }
+				</blockquote>
+			);
+		},
+	},
+];
+
+export default deprecated;
diff --git a/packages/block-library/src/pullquote/index.js b/packages/block-library/src/pullquote/index.js
index 0c7c29b38ac67..944f7562385b5 100644
--- a/packages/block-library/src/pullquote/index.js
+++ b/packages/block-library/src/pullquote/index.js
@@ -2,18 +2,18 @@
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { RichText } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { SOLID_COLOR_STYLE_NAME } from './shared';
+import deprecated from './deprecated';
 import edit from './edit';
 import icon from './icon';
 import metadata from './block.json';
 import save from './save';
 
-const { name, attributes: blockAttributes } = metadata;
+const { name } = metadata;
 
 export { metadata, name };
 
@@ -30,42 +30,5 @@ export const settings = {
 	},
 	edit,
 	save,
-	deprecated: [ {
-		attributes: {
-			...blockAttributes,
-		},
-		save( { attributes } ) {
-			const { value, citation } = attributes;
-			return (
-				<blockquote>
-					<RichText.Content value={ value } multiline />
-					{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="cite" value={ citation } /> }
-				</blockquote>
-			);
-		},
-	}, {
-		attributes: {
-			...blockAttributes,
-			citation: {
-				type: 'string',
-				source: 'html',
-				selector: 'footer',
-			},
-			align: {
-				type: 'string',
-				default: 'none',
-			},
-		},
-
-		save( { attributes } ) {
-			const { value, citation, align } = attributes;
-
-			return (
-				<blockquote className={ `align${ align }` }>
-					<RichText.Content value={ value } multiline />
-					{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="footer" value={ citation } /> }
-				</blockquote>
-			);
-		},
-	} ],
+	deprecated,
 };
diff --git a/packages/block-library/src/quote/deprecated.js b/packages/block-library/src/quote/deprecated.js
new file mode 100644
index 0000000000000..61024ff336aed
--- /dev/null
+++ b/packages/block-library/src/quote/deprecated.js
@@ -0,0 +1,96 @@
+/**
+ * External dependencies
+ */
+import { omit } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { RichText } from '@wordpress/block-editor';
+
+const blockAttributes = {
+	value: {
+		type: 'string',
+		source: 'html',
+		selector: 'blockquote',
+		multiline: 'p',
+		default: '',
+	},
+	citation: {
+		type: 'string',
+		source: 'html',
+		selector: 'cite',
+		default: '',
+	},
+	align: {
+		type: 'string',
+	},
+};
+
+const deprecated = [
+	{
+		attributes: {
+			...blockAttributes,
+			style: {
+				type: 'number',
+				default: 1,
+			},
+		},
+
+		migrate( attributes ) {
+			if ( attributes.style === 2 ) {
+				return {
+					...omit( attributes, [ 'style' ] ),
+					className: attributes.className ? attributes.className + ' is-style-large' : 'is-style-large',
+				};
+			}
+
+			return attributes;
+		},
+
+		save( { attributes } ) {
+			const { align, value, citation, style } = attributes;
+
+			return (
+				<blockquote
+					className={ style === 2 ? 'is-large' : '' }
+					style={ { textAlign: align ? align : null } }
+				>
+					<RichText.Content multiline value={ value } />
+					{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="cite" value={ citation } /> }
+				</blockquote>
+			);
+		},
+	},
+	{
+		attributes: {
+			...blockAttributes,
+			citation: {
+				type: 'string',
+				source: 'html',
+				selector: 'footer',
+				default: '',
+			},
+			style: {
+				type: 'number',
+				default: 1,
+			},
+		},
+
+		save( { attributes } ) {
+			const { align, value, citation, style } = attributes;
+
+			return (
+				<blockquote
+					className={ `blocks-quote-style-${ style }` }
+					style={ { textAlign: align ? align : null } }
+				>
+					<RichText.Content multiline value={ value } />
+					{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="footer" value={ citation } /> }
+				</blockquote>
+			);
+		},
+	},
+];
+
+export default deprecated;
diff --git a/packages/block-library/src/quote/index.js b/packages/block-library/src/quote/index.js
index 105bde9dde68b..806b8597411cc 100644
--- a/packages/block-library/src/quote/index.js
+++ b/packages/block-library/src/quote/index.js
@@ -1,24 +1,19 @@
-/**
- * External dependencies
- */
-import { omit } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { RichText } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
+import deprecated from './deprecated';
 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;
+const { name } = metadata;
 
 export { metadata, name };
 
@@ -48,69 +43,5 @@ export const settings = {
 			citation: attributes.citation + citation,
 		};
 	},
-	deprecated: [
-		{
-			attributes: {
-				...blockAttributes,
-				style: {
-					type: 'number',
-					default: 1,
-				},
-			},
-
-			migrate( attributes ) {
-				if ( attributes.style === 2 ) {
-					return {
-						...omit( attributes, [ 'style' ] ),
-						className: attributes.className ? attributes.className + ' is-style-large' : 'is-style-large',
-					};
-				}
-
-				return attributes;
-			},
-
-			save( { attributes } ) {
-				const { align, value, citation, style } = attributes;
-
-				return (
-					<blockquote
-						className={ style === 2 ? 'is-large' : '' }
-						style={ { textAlign: align ? align : null } }
-					>
-						<RichText.Content multiline value={ value } />
-						{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="cite" value={ citation } /> }
-					</blockquote>
-				);
-			},
-		},
-		{
-			attributes: {
-				...blockAttributes,
-				citation: {
-					type: 'string',
-					source: 'html',
-					selector: 'footer',
-					default: '',
-				},
-				style: {
-					type: 'number',
-					default: 1,
-				},
-			},
-
-			save( { attributes } ) {
-				const { align, value, citation, style } = attributes;
-
-				return (
-					<blockquote
-						className={ `blocks-quote-style-${ style }` }
-						style={ { textAlign: align ? align : null } }
-					>
-						<RichText.Content multiline value={ value } />
-						{ ! RichText.isEmpty( citation ) && <RichText.Content tagName="footer" value={ citation } /> }
-					</blockquote>
-				);
-			},
-		},
-	],
+	deprecated,
 };