Refactor core blocks to have deprecated extracted to their ownf files…

… (p.1) (#14979)
WordPress · Apr 18, 2019 · 0ccb047 · 0ccb047
1 parent ea6cdb4
commit 0ccb047
Show file tree

Hide file tree

Showing 4 changed files with 342 additions and 274 deletions.
diff --git a/packages/block-library/src/button/deprecated.js b/packages/block-library/src/button/deprecated.js
@@ -0,0 +1,112 @@
+/**
+ * External dependencies
+ */
+import { omit } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { RichText } from '@wordpress/block-editor';
+
+const colorsMigration = ( attributes ) => {
+	return omit( {
+		...attributes,
+		customTextColor: attributes.textColor && '#' === attributes.textColor[ 0 ] ? attributes.textColor : undefined,
+		customBackgroundColor: attributes.color && '#' === attributes.color[ 0 ] ? attributes.color : undefined,
+	}, [ 'color', 'textColor' ] );
+};
+
+const blockAttributes = {
+	url: {
+		type: 'string',
+		source: 'attribute',
+		selector: 'a',
+		attribute: 'href',
+	},
+	title: {
+		type: 'string',
+		source: 'attribute',
+		selector: 'a',
+		attribute: 'title',
+	},
+	text: {
+		type: 'string',
+		source: 'html',
+		selector: 'a',
+	},
+};
+
+const deprecated = [
+	{
+		attributes: {
+			...blockAttributes,
+			color: {
+				type: 'string',
+			},
+			textColor: {
+				type: 'string',
+			},
+			align: {
+				type: 'string',
+				default: 'none',
+			},
+		},
+		save( { attributes } ) {
+			const { url, text, title, align, color, textColor } = attributes;
+
+			const buttonStyle = {
+				backgroundColor: color,
+				color: textColor,
+			};
+
+			const linkClass = 'wp-block-button__link';
+
+			return (
+				<div className={ `align${ align }` }>
+					<RichText.Content
+						tagName="a"
+						className={ linkClass }
+						href={ url }
+						title={ title }
+						style={ buttonStyle }
+						value={ text }
+					/>
+				</div>
+			);
+		},
+		migrate: colorsMigration,
+	},
+	{
+		attributes: {
+			...blockAttributes,
+			color: {
+				type: 'string',
+			},
+			textColor: {
+				type: 'string',
+			},
+			align: {
+				type: 'string',
+				default: 'none',
+			},
+		},
+		save( { attributes } ) {
+			const { url, text, title, align, color, textColor } = attributes;
+
+			return (
+				<div className={ `align${ align }` } style={ { backgroundColor: color } }>
+					<RichText.Content
+						tagName="a"
+						href={ url }
+						title={ title }
+						style={ { color: textColor } }
+						value={ text }
+					/>
+				</div>
+			);
+		},
+		migrate: colorsMigration,
+	},
+];
+
+export default deprecated;
diff --git a/packages/block-library/src/button/index.js b/packages/block-library/src/button/index.js
@@ -1,34 +1,21 @@
-/**
- * External dependencies
- */
-import { omit, pick } 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';
 
-const { name, attributes: blockAttributes } = metadata;
+const { name } = metadata;
 
 export { metadata, name };
 
-const colorsMigration = ( attributes ) => {
-	return omit( {
-		...attributes,
-		customTextColor: attributes.textColor && '#' === attributes.textColor[ 0 ] ? attributes.textColor : undefined,
-		customBackgroundColor: attributes.color && '#' === attributes.color[ 0 ] ? attributes.color : undefined,
-	}, [ 'color', 'textColor' ] );
-};
-
 export const settings = {
 	title: __( 'Button' ),
 	description: __( 'Prompt visitors to take action with a button-style link.' ),
@@ -45,77 +32,5 @@ export const settings = {
 	],
 	edit,
 	save,
-	deprecated: [ {
-		attributes: {
-			...pick( blockAttributes, [ 'url', 'title', 'text' ] ),
-			color: {
-				type: 'string',
-			},
-			textColor: {
-				type: 'string',
-			},
-			align: {
-				type: 'string',
-				default: 'none',
-			},
-		},
-
-		save( { attributes } ) {
-			const { url, text, title, align, color, textColor } = attributes;
-
-			const buttonStyle = {
-				backgroundColor: color,
-				color: textColor,
-			};
-
-			const linkClass = 'wp-block-button__link';
-
-			return (
-				<div className={ `align${ align }` }>
-					<RichText.Content
-						tagName="a"
-						className={ linkClass }
-						href={ url }
-						title={ title }
-						style={ buttonStyle }
-						value={ text }
-					/>
-				</div>
-			);
-		},
-		migrate: colorsMigration,
-	},
-	{
-		attributes: {
-			...pick( blockAttributes, [ 'url', 'title', 'text' ] ),
-			color: {
-				type: 'string',
-			},
-			textColor: {
-				type: 'string',
-			},
-			align: {
-				type: 'string',
-				default: 'none',
-			},
-		},
-
-		save( { attributes } ) {
-			const { url, text, title, align, color, textColor } = attributes;
-
-			return (
-				<div className={ `align${ align }` } style={ { backgroundColor: color } }>
-					<RichText.Content
-						tagName="a"
-						href={ url }
-						title={ title }
-						style={ { color: textColor } }
-						value={ text }
-					/>
-				</div>
-			);
-		},
-		migrate: colorsMigration,
-	},
-	],
+	deprecated,
 };