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

…part 3)
WordPress · Apr 14, 2019 · ede822c · ede822c
1 parent 3aca80f
commit ede822c
Show file tree

Hide file tree

Showing 38 changed files with 776 additions and 713 deletions.
diff --git a/packages/block-library/src/group/icon.js b/packages/block-library/src/group/icon.js
@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/components';
+
+export default (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><Path d="M19 12h-2v3h-3v2h5v-5zM7 9h3V7H5v5h2V9zm14-6H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02z" /><Path d="M0 0h24v24H0z" fill="none" /></SVG>
+);
diff --git a/packages/block-library/src/group/index.js b/packages/block-library/src/group/index.js
@@ -1,58 +1,30 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { Path, SVG } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { InnerBlocks, getColorClassName } 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: __( 'Group' ),
-
-	icon: <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><Path d="M19 12h-2v3h-3v2h5v-5zM7 9h3V7H5v5h2V9zm14-6H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02z" /><Path d="M0 0h24v24H0z" fill="none" /></SVG>,
-
+	icon,
 	description: __( 'A block that groups other blocks.' ),
-
 	keywords: [ __( 'container' ), __( 'wrapper' ), __( 'row' ), __( 'section' ) ],
-
 	supports: {
 		align: [ 'wide', 'full' ],
 		anchor: true,
 		html: false,
 	},
-
 	edit,
-
-	save( { attributes } ) {
-		const { backgroundColor, customBackgroundColor } = attributes;
-
-		const backgroundClass = getColorClassName( 'background-color', backgroundColor );
-		const className = classnames( backgroundClass, {
-			'has-background': backgroundColor || customBackgroundColor,
-		} );
-
-		const styles = {
-			backgroundColor: backgroundClass ? undefined : customBackgroundColor,
-		};
-
-		return (
-			<div className={ className } style={ styles }>
-				<InnerBlocks.Content />
-			</div>
-		);
-	},
+	save,
 };
diff --git a/packages/block-library/src/group/save.js b/packages/block-library/src/group/save.js
@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks, getColorClassName } from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+	const { backgroundColor, customBackgroundColor } = attributes;
+
+	const backgroundClass = getColorClassName( 'background-color', backgroundColor );
+	const className = classnames( backgroundClass, {
+		'has-background': backgroundColor || customBackgroundColor,
+	} );
+
+	const styles = {
+		backgroundColor: backgroundClass ? undefined : customBackgroundColor,
+	};
+
+	return (
+		<div className={ className } style={ styles }>
+			<InnerBlocks.Content />
+		</div>
+	);
+}
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>
+	);
+}