Refactor core blocks to have save and transforms in their own files (…

…part 4) (#14903)
WordPress · Apr 18, 2019 · ddf0cd7 · ddf0cd7
1 parent 64de3c1
commit ddf0cd7
Show file tree

Hide file tree

Showing 16 changed files with 255 additions and 222 deletions.
diff --git a/packages/block-library/src/subhead/index.js b/packages/block-library/src/subhead/index.js
@@ -2,55 +2,30 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { createBlock } from '@wordpress/blocks';
-import { RichText } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import edit from './edit';
 import icon from './icon';
 import metadata from './block.json';
+import save from './save';
+import transforms from './tranforms';
 
 const { name } = metadata;
 
 export { metadata, name };
 
 export const settings = {
 	title: __( 'Subheading (deprecated)' ),
-
 	description: __( 'This block is deprecated. Please use the Paragraph block instead.' ),
-
 	icon,
-
 	supports: {
 		// Hide from inserter as this block is deprecated.
 		inserter: false,
 		multiple: false,
 	},
-
-	transforms: {
-		to: [
-			{
-				type: 'block',
-				blocks: [ 'core/paragraph' ],
-				transform: ( attributes ) =>
-					createBlock( 'core/paragraph', attributes ),
-			},
-		],
-	},
-
+	transforms,
 	edit,
-
-	save( { attributes } ) {
-		const { align, content } = attributes;
-
-		return (
-			<RichText.Content
-				tagName="p"
-				style={ { textAlign: align } }
-				value={ content }
-			/>
-		);
-	},
+	save,
 };
diff --git a/packages/block-library/src/subhead/save.js b/packages/block-library/src/subhead/save.js
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { RichText } from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+	const { align, content } = attributes;
+
+	return (
+		<RichText.Content
+			tagName="p"
+			style={ { textAlign: align } }
+			value={ content }
+		/>
+	);
+}
diff --git a/packages/block-library/src/subhead/tranforms.js b/packages/block-library/src/subhead/tranforms.js
@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+const transforms = {
+	to: [
+		{
+			type: 'block',
+			blocks: [ 'core/paragraph' ],
+			transform: ( attributes ) =>
+				createBlock( 'core/paragraph', attributes ),
+		},
+	],
+};
+
+export default transforms;
diff --git a/packages/block-library/src/tag-cloud/index.js b/packages/block-library/src/tag-cloud/index.js
@@ -12,17 +12,12 @@ export const name = 'core/tag-cloud';
 
 export const settings = {
 	title: __( 'Tag Cloud' ),
-
 	description: __( 'A cloud of your most used tags.' ),
-
 	icon: 'tag',
-
 	category: 'widgets',
-
 	supports: {
 		html: false,
 		align: true,
 	},
-
 	edit,
 };
diff --git a/packages/block-library/src/template/edit.js b/packages/block-library/src/template/edit.js
@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks } from '@wordpress/block-editor';
+
+export default function TemplateEdit() {
+	return <InnerBlocks />;
+}
diff --git a/packages/block-library/src/template/index.js b/packages/block-library/src/template/index.js
@@ -2,36 +2,28 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { InnerBlocks } 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;
 
 export { metadata, name };
 
 export const settings = {
 	title: __( 'Reusable Template' ),
-
 	description: __( 'Template block used as a container.' ),
-
 	icon,
-
 	supports: {
 		customClassName: false,
 		html: false,
 		inserter: false,
 	},
-
-	edit() {
-		return <InnerBlocks />;
-	},
-
-	save() {
-		return <InnerBlocks.Content />;
-	},
+	edit,
+	save,
 };
diff --git a/packages/block-library/src/template/save.js b/packages/block-library/src/template/save.js
@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks } from '@wordpress/block-editor';
+
+export default function save() {
+	return <InnerBlocks.Content />;
+}
diff --git a/packages/block-library/src/text-columns/index.js b/packages/block-library/src/text-columns/index.js
@@ -1,20 +1,15 @@
-/**
- * External dependencies
- */
-import { get, times } from 'lodash';
-
 /**
  * WordPress dependencies
  */
-import { createBlock } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
-import { RichText } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import edit from './edit';
 import metadata from './block.json';
+import save from './save';
+import transforms from './tranforms';
 
 const { name } = metadata;
 
@@ -25,56 +20,15 @@ export const settings = {
 	supports: {
 		inserter: false,
 	},
-
 	title: __( 'Text Columns (deprecated)' ),
-
 	description: __( 'This block is deprecated. Please use the Columns block instead.' ),
-
-	transforms: {
-		to: [
-			{
-				type: 'block',
-				blocks: [ 'core/columns' ],
-				transform: ( { className, columns, content, width } ) => (
-					createBlock(
-						'core/columns',
-						{
-							align: ( 'wide' === width || 'full' === width ) ? width : undefined,
-							className,
-							columns,
-						},
-						content.map( ( { children } ) =>
-							createBlock(
-								'core/column',
-								{},
-								[ createBlock( 'core/paragraph', { content: children } ) ]
-							)
-						)
-					)
-				),
-			},
-		],
-	},
-
+	transforms,
 	getEditWrapperProps( attributes ) {
 		const { width } = attributes;
 		if ( 'wide' === width || 'full' === width ) {
 			return { 'data-align': width };
 		}
 	},
-
 	edit,
-
-	save( { attributes } ) {
-		const { width, content, columns } = attributes;
-		return (
-			<div className={ `align${ width } columns-${ columns }` }>
-				{ times( columns, ( index ) =>
-					<div className="wp-block-column" key={ `column-${ index }` }>
-						<RichText.Content tagName="p" value={ get( content, [ index, 'children' ] ) } />
-					</div>
-				) }
-			</div>
-		);
-	},
+	save,
 };
diff --git a/packages/block-library/src/text-columns/save.js b/packages/block-library/src/text-columns/save.js
@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import { get, times } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { RichText } from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+	const { width, content, columns } = attributes;
+	return (
+		<div className={ `align${ width } columns-${ columns }` }>
+			{ times( columns, ( index ) =>
+				<div className="wp-block-column" key={ `column-${ index }` }>
+					<RichText.Content tagName="p" value={ get( content, [ index, 'children' ] ) } />
+				</div>
+			) }
+		</div>
+	);
+}
diff --git a/packages/block-library/src/text-columns/tranforms.js b/packages/block-library/src/text-columns/tranforms.js
@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+const transforms = {
+	to: [
+		{
+			type: 'block',
+			blocks: [ 'core/columns' ],
+			transform: ( { className, columns, content, width } ) => (
+				createBlock(
+					'core/columns',
+					{
+						align: ( 'wide' === width || 'full' === width ) ? width : undefined,
+						className,
+						columns,
+					},
+					content.map( ( { children } ) =>
+						createBlock(
+							'core/column',
+							{},
+							[ createBlock( 'core/paragraph', { content: children } ) ]
+						)
+					)
+				)
+			),
+		},
+	],
+};
+
+export default transforms;
diff --git a/packages/block-library/src/verse/index.js b/packages/block-library/src/verse/index.js
@@ -2,62 +2,28 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { createBlock } from '@wordpress/blocks';
-import { RichText } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import edit from './edit';
 import icon from './icon';
 import metadata from './block.json';
+import save from './save';
+import transforms from './tranforms';
 
 const { name } = metadata;
 
 export { metadata, name };
 
 export const settings = {
 	title: __( 'Verse' ),
-
 	description: __( 'Insert poetry. Use special spacing formats. Or quote song lyrics.' ),
-
 	icon,
-
 	keywords: [ __( 'poetry' ) ],
-
-	transforms: {
-		from: [
-			{
-				type: 'block',
-				blocks: [ 'core/paragraph' ],
-				transform: ( attributes ) =>
-					createBlock( 'core/verse', attributes ),
-			},
-		],
-		to: [
-			{
-				type: 'block',
-				blocks: [ 'core/paragraph' ],
-				transform: ( attributes ) =>
-					createBlock( 'core/paragraph', attributes ),
-			},
-		],
-	},
-
+	transforms,
 	edit,
-
-	save( { attributes } ) {
-		const { textAlign, content } = attributes;
-
-		return (
-			<RichText.Content
-				tagName="pre"
-				style={ { textAlign } }
-				value={ content }
-			/>
-		);
-	},
-
+	save,
 	merge( attributes, attributesToMerge ) {
 		return {
 			content: attributes.content + attributesToMerge.content,

diff --git a/packages/block-library/src/verse/save.js b/packages/block-library/src/verse/save.js
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { RichText } from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+	const { textAlign, content } = attributes;
+
+	return (
+		<RichText.Content
+			tagName="pre"
+			style={ { textAlign } }
+			value={ content }
+		/>
+	);
+}