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

…part 3)
WordPress · Apr 10, 2019 · d7d9aeb · d7d9aeb
1 parent f792895
commit d7d9aeb
Show file tree

Hide file tree

Showing 38 changed files with 776 additions and 713 deletions.
diff --git 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
@@ -1,155 +1,33 @@
-/**
- * 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;
 
 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
@@ -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
@@ -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
@@ -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,18 +18,13 @@ export const settings = {
 	name,
 	title: __( 'Unrecognized Block' ),
 	description: __( 'Your site doesn’t include support for this block.' ),
-
 	supports: {
 		className: false,
 		customClassName: false,
 		inserter: false,
 		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
@@ -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>;
+}