Refactor core blocks to have save and transforms in their own files (part 1)

packages/block-library/src/archives/index.js

@@ -13,17 +13,12 @@ export const name = 'core/archives';
 
 export const settings = {
 	title: __( 'Archives' ),
-
 	description: __( 'Display a monthly archive of your posts.' ),
-
 	icon,
-
 	category: 'widgets',
-
 	supports: {
 		align: true,
 		html: false,
 	},
-
 	edit,
 };

packages/block-library/src/audio/index.js

@@ -1,9 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { createBlobURL } from '@wordpress/blob';
-import { createBlock } from '@wordpress/blocks';
-import { RichText } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -12,83 +9,21 @@ import { __ } from '@wordpress/i18n';
 import edit from './edit';
 import icon from './icon';
 import metadata from './block.json';
+import save from './save';
+import transforms from './transforms';
 
 const { name } = metadata;
 
 export { metadata, name };
 
 export const settings = {
 	title: __( 'Audio' ),
-
 	description: __( 'Embed a simple audio player.' ),
-
 	icon,
-
-	transforms: {
-		from: [
-			{
-				type: 'files',
-				isMatch( files ) {
-					return files.length === 1 && files[ 0 ].type.indexOf( 'audio/' ) === 0;
-				},
-				transform( files ) {
-					const file = files[ 0 ];
-					// We don't need to upload the media directly here
-					// It's already done as part of the `componentDidMount`
-					// in the audio block
-					const block = createBlock( 'core/audio', {
-						src: createBlobURL( file ),
-					} );
-
-					return block;
-				},
-			},
-			{
-				type: 'shortcode',
-				tag: 'audio',
-				attributes: {
-					src: {
-						type: 'string',
-						shortcode: ( { named: { src } } ) => {
-							return src;
-						},
-					},
-					loop: {
-						type: 'string',
-						shortcode: ( { named: { loop } } ) => {
-							return loop;
-						},
-					},
-					autoplay: {
-						type: 'srting',
-						shortcode: ( { named: { autoplay } } ) => {
-							return autoplay;
-						},
-					},
-					preload: {
-						type: 'string',
-						shortcode: ( { named: { preload } } ) => {
-							return preload;
-						},
-					},
-				},
-			},
-		],
-	},
-
+	transforms,
 	supports: {
 		align: true,
 	},
-
 	edit,
-
-	save( { attributes } ) {
-		const { autoplay, caption, loop, preload, src } = attributes;
-		return (
-			<figure>
-				<audio controls="controls" src={ src } autoPlay={ autoplay } loop={ loop } preload={ preload } />
-				{ ! RichText.isEmpty( caption ) && <RichText.Content tagName="figcaption" value={ caption } /> }
-			</figure>
-		);
-	},
+	save,
 };

packages/block-library/src/audio/save.js

@@ -0,0 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { RichText } from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+	const { autoplay, caption, loop, preload, src } = attributes;
+
+	return (
+		<figure>
+			<audio controls="controls" src={ src } autoPlay={ autoplay } loop={ loop } preload={ preload } />
+			{ ! RichText.isEmpty( caption ) && <RichText.Content tagName="figcaption" value={ caption } /> }
+		</figure>
+	);
+}

packages/block-library/src/audio/transforms.js

@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlobURL } from '@wordpress/blob';
+import { createBlock } from '@wordpress/blocks';
+
+const transforms = {
+	from: [
+		{
+			type: 'files',
+			isMatch( files ) {
+				return files.length === 1 && files[ 0 ].type.indexOf( 'audio/' ) === 0;
+			},
+			transform( files ) {
+				const file = files[ 0 ];
+				// We don't need to upload the media directly here
+				// It's already done as part of the `componentDidMount`
+				// in the audio block
+				const block = createBlock( 'core/audio', {
+					src: createBlobURL( file ),
+				} );
+
+				return block;
+			},
+		},
+		{
+			type: 'shortcode',
+			tag: 'audio',
+			attributes: {
+				src: {
+					type: 'string',
+					shortcode: ( { named: { src } } ) => {
+						return src;
+					},
+				},
+				loop: {
+					type: 'string',
+					shortcode: ( { named: { loop } } ) => {
+						return loop;
+					},
+				},
+				autoplay: {
+					type: 'srting',
+					shortcode: ( { named: { autoplay } } ) => {
+						return autoplay;
+					},
+				},
+				preload: {
+					type: 'string',
+					shortcode: ( { named: { preload } } ) => {
+						return preload;
+					},
+				},
+			},
+		},
+	],
+};
+
+export default transforms;

packages/block-library/src/block/index.js

@@ -12,16 +12,12 @@ export const name = 'core/block';
 
 export const settings = {
 	title: __( 'Reusable Block' ),
-
 	category: 'reusable',
-
 	description: __( 'Create content, and save it for you and other contributors to reuse across your site. Update the block, and the changes apply everywhere it’s used.' ),
-
 	supports: {
 		customClassName: false,
 		html: false,
 		inserter: false,
 	},
-
 	edit,
 };

packages/block-library/src/button/index.js

@@ -1,24 +1,21 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
 import { omit, pick } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import {
-	RichText,
-	getColorClassName,
-} from '@wordpress/block-editor';
+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';
 
 const { name, attributes: blockAttributes } = metadata;
 
@@ -34,66 +31,20 @@ const colorsMigration = ( attributes ) => {
 
 export const settings = {
 	title: __( 'Button' ),
-
 	description: __( 'Prompt visitors to take action with a button-style link.' ),
-
 	icon,
-
 	keywords: [ __( 'link' ) ],
-
 	supports: {
 		align: true,
 		alignWide: false,
 	},
-
 	styles: [
 		{ name: 'default', label: _x( 'Default', 'block style' ), isDefault: true },
 		{ name: 'outline', label: __( 'Outline' ) },
 		{ name: 'squared', label: _x( 'Squared', 'block style' ) },
 	],
-
 	edit,
-
-	save( { attributes } ) {
-		const {
-			url,
-			text,
-			title,
-			backgroundColor,
-			textColor,
-			customBackgroundColor,
-			customTextColor,
-		} = attributes;
-
-		const textClass = getColorClassName( 'color', textColor );
-		const backgroundClass = getColorClassName( 'background-color', backgroundColor );
-
-		const buttonClasses = classnames( 'wp-block-button__link', {
-			'has-text-color': textColor || customTextColor,
-			[ textClass ]: textClass,
-			'has-background': backgroundColor || customBackgroundColor,
-			[ backgroundClass ]: backgroundClass,
-		} );
-
-		const buttonStyle = {
-			backgroundColor: backgroundClass ? undefined : customBackgroundColor,
-			color: textClass ? undefined : customTextColor,
-		};
-
-		return (
-			<div>
-				<RichText.Content
-					tagName="a"
-					className={ buttonClasses }
-					href={ url }
-					title={ title }
-					style={ buttonStyle }
-					value={ text }
-				/>
-			</div>
-		);
-	},
-
+	save,
 	deprecated: [ {
 		attributes: {
 			...pick( blockAttributes, [ 'url', 'title', 'text' ] ),

packages/block-library/src/button/save.js

@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	RichText,
+	getColorClassName,
+} from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+	const {
+		url,
+		text,
+		title,
+		backgroundColor,
+		textColor,
+		customBackgroundColor,
+		customTextColor,
+	} = attributes;
+
+	const textClass = getColorClassName( 'color', textColor );
+	const backgroundClass = getColorClassName( 'background-color', backgroundColor );
+
+	const buttonClasses = classnames( 'wp-block-button__link', {
+		'has-text-color': textColor || customTextColor,
+		[ textClass ]: textClass,
+		'has-background': backgroundColor || customBackgroundColor,
+		[ backgroundClass ]: backgroundClass,
+	} );
+
+	const buttonStyle = {
+		backgroundColor: backgroundClass ? undefined : customBackgroundColor,
+		color: textClass ? undefined : customTextColor,
+	};
+
+	return (
+		<div>
+			<RichText.Content
+				tagName="a"
+				className={ buttonClasses }
+				href={ url }
+				title={ title }
+				style={ buttonStyle }
+				value={ text }
+			/>
+		</div>
+	);
+}

packages/block-library/src/calendar/index.js

@@ -12,18 +12,12 @@ export const name = 'core/calendar';
 
 export const settings = {
 	title: __( 'Calendar' ),
-
 	description: __( 'A calendar of your site’s posts.' ),
-
 	icon: 'calendar',
-
 	category: 'widgets',
-
 	keywords: [ __( 'posts' ), __( 'archive' ) ],
-
 	supports: {
 		align: true,
 	},
-
 	edit,
 };

packages/block-library/src/categories/index.js

@@ -13,17 +13,12 @@ export const name = 'core/categories';
 
 export const settings = {
 	title: __( 'Categories' ),
-
 	description: __( 'Display a list of all categories.' ),
-
 	icon,
-
 	category: 'widgets',
-
 	supports: {
 		align: true,
 		html: false,
 	},
-
 	edit,
 };