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

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

Hide file tree

Showing 23 changed files with 744 additions and 674 deletions.
diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { filter, pick, map, get } from 'lodash';
+import { filter, map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -31,6 +31,7 @@ import { __, sprintf } from '@wordpress/i18n';
  */
 import GalleryImage from './gallery-image';
 import icon from './icon';
+import { defaultColumnsNumber, pickRelevantMediaFiles } from './shared';
 
 const MAX_COLUMNS = 8;
 const linkOptions = [
@@ -40,16 +41,6 @@ const linkOptions = [
 ];
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
-export function defaultColumnsNumber( attributes ) {
-	return Math.min( 3, attributes.images.length );
-}
-
-export const pickRelevantMediaFiles = ( image ) => {
-	const imageProps = pick( image, [ 'alt', 'id', 'link', 'caption' ] );
-	imageProps.url = get( image, [ 'sizes', 'large', 'url' ] ) || get( image, [ 'media_details', 'sizes', 'large', 'source_url' ] ) || image.url;
-	return imageProps;
-};
-
 class GalleryEdit extends Component {
 	constructor() {
 		super( ...arguments );

diff --git a/packages/block-library/src/gallery/index.js b/packages/block-library/src/gallery/index.js
@@ -1,38 +1,28 @@
 /**
  * External dependencies
  */
-import { filter, every, map, some } from 'lodash';
+import { map, some } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { createBlock } from '@wordpress/blocks';
 import { RichText } from '@wordpress/block-editor';
-import { mediaUpload } from '@wordpress/editor';
-import { createBlobURL } from '@wordpress/blob';
 
 /**
  * Internal dependencies
  */
-import { default as edit, defaultColumnsNumber, pickRelevantMediaFiles } from './edit';
+import edit from './edit';
 import icon from './icon';
 import metadata from './block.json';
+import save from './save';
+import transforms from './transforms';
+import { defaultColumnsNumber } from './shared';
 
 const { name, attributes: blockAttributes } = metadata;
 
 export { metadata, name };
 
-const parseShortcodeIds = ( ids ) => {
-	if ( ! ids ) {
-		return [];
-	}
-
-	return ids.split( ',' ).map( ( id ) => (
-		parseInt( id, 10 )
-	) );
-};
-
 export const settings = {
 	title: __( 'Gallery' ),
 	description: __( 'Display multiple images in a rich gallery.' ),
@@ -41,138 +31,9 @@ export const settings = {
 	supports: {
 		align: true,
 	},
-
-	transforms: {
-		from: [
-			{
-				type: 'block',
-				isMultiBlock: true,
-				blocks: [ 'core/image' ],
-				transform: ( attributes ) => {
-					// Init the align attribute from the first item which may be either the placeholder or an image.
-					let { align } = attributes[ 0 ];
-					// Loop through all the images and check if they have the same align.
-					align = every( attributes, [ 'align', align ] ) ? align : undefined;
-
-					const validImages = filter( attributes, ( { id, url } ) => id && url );
-
-					return createBlock( 'core/gallery', {
-						images: validImages.map( ( { id, url, alt, caption } ) => ( { id, url, alt, caption } ) ),
-						ids: validImages.map( ( { id } ) => id ),
-						align,
-					} );
-				},
-			},
-			{
-				type: 'shortcode',
-				tag: 'gallery',
-				attributes: {
-					images: {
-						type: 'array',
-						shortcode: ( { named: { ids } } ) => {
-							return parseShortcodeIds( ids ).map( ( id ) => ( {
-								id,
-							} ) );
-						},
-					},
-					ids: {
-						type: 'array',
-						shortcode: ( { named: { ids } } ) => {
-							return parseShortcodeIds( ids );
-						},
-					},
-					columns: {
-						type: 'number',
-						shortcode: ( { named: { columns = '3' } } ) => {
-							return parseInt( columns, 10 );
-						},
-					},
-					linkTo: {
-						type: 'string',
-						shortcode: ( { named: { link = 'attachment' } } ) => {
-							return link === 'file' ? 'media' : link;
-						},
-					},
-				},
-			},
-			{
-				// When created by drag and dropping multiple files on an insertion point
-				type: 'files',
-				isMatch( files ) {
-					return files.length !== 1 && every( files, ( file ) => file.type.indexOf( 'image/' ) === 0 );
-				},
-				transform( files, onChange ) {
-					const block = createBlock( 'core/gallery', {
-						images: files.map( ( file ) => pickRelevantMediaFiles( {
-							url: createBlobURL( file ),
-						} ) ),
-					} );
-					mediaUpload( {
-						filesList: files,
-						onFileChange: ( images ) => {
-							const imagesAttr = images.map(
-								pickRelevantMediaFiles
-							);
-							onChange( block.clientId, {
-								ids: map( imagesAttr, 'id' ),
-								images: imagesAttr,
-							} );
-						},
-						allowedTypes: [ 'image' ],
-					} );
-					return block;
-				},
-			},
-		],
-		to: [
-			{
-				type: 'block',
-				blocks: [ 'core/image' ],
-				transform: ( { images, align } ) => {
-					if ( images.length > 0 ) {
-						return images.map( ( { id, url, alt, caption } ) => createBlock( 'core/image', { id, url, alt, caption, align } ) );
-					}
-					return createBlock( 'core/image', { align } );
-				},
-			},
-		],
-	},
-
+	transforms,
 	edit,
-
-	save( { attributes } ) {
-		const { images, columns = defaultColumnsNumber( attributes ), imageCrop, linkTo } = attributes;
-		return (
-			<ul className={ `columns-${ columns } ${ imageCrop ? 'is-cropped' : '' }` } >
-				{ images.map( ( image ) => {
-					let href;
-
-					switch ( linkTo ) {
-						case 'media':
-							href = image.url;
-							break;
-						case 'attachment':
-							href = image.link;
-							break;
-					}
-
-					const img = <img src={ image.url } alt={ image.alt } data-id={ image.id } data-link={ image.link } className={ image.id ? `wp-image-${ image.id }` : null } />;
-
-					return (
-						<li key={ image.id || image.url } className="blocks-gallery-item">
-							<figure>
-								{ href ? <a href={ href }>{ img }</a> : img }
-								{ image.caption && image.caption.length > 0 && (
-									<RichText.Content tagName="figcaption" value={ image.caption } />
-								) }
-							</figure>
-						</li>
-					);
-				} ) }
-			</ul>
-		);
-	},
-
+	save,
 	deprecated: [
 		{
 			attributes: blockAttributes,

diff --git a/packages/block-library/src/gallery/save.js b/packages/block-library/src/gallery/save.js
@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { RichText } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { defaultColumnsNumber } from './shared';
+
+export default function	save( { attributes } ) {
+	const { images, columns = defaultColumnsNumber( attributes ), imageCrop, linkTo } = attributes;
+	return (
+		<ul className={ `columns-${ columns } ${ imageCrop ? 'is-cropped' : '' }` } >
+			{ images.map( ( image ) => {
+				let href;
+
+				switch ( linkTo ) {
+					case 'media':
+						href = image.url;
+						break;
+					case 'attachment':
+						href = image.link;
+						break;
+				}
+
+				const img = <img src={ image.url } alt={ image.alt } data-id={ image.id } data-link={ image.link } className={ image.id ? `wp-image-${ image.id }` : null } />;
+
+				return (
+					<li key={ image.id || image.url } className="blocks-gallery-item">
+						<figure>
+							{ href ? <a href={ href }>{ img }</a> : img }
+							{ image.caption && image.caption.length > 0 && (
+								<RichText.Content tagName="figcaption" value={ image.caption } />
+							) }
+						</figure>
+					</li>
+				);
+			} ) }
+		</ul>
+	);
+}
diff --git a/packages/block-library/src/gallery/shared.js b/packages/block-library/src/gallery/shared.js
@@ -0,0 +1,14 @@
+/**
+ * External dependencies
+ */
+import { get, pick } from 'lodash';
+
+export function defaultColumnsNumber( attributes ) {
+	return Math.min( 3, attributes.images.length );
+}
+
+export const pickRelevantMediaFiles = ( image ) => {
+	const imageProps = pick( image, [ 'alt', 'id', 'link', 'caption' ] );
+	imageProps.url = get( image, [ 'sizes', 'large', 'url' ] ) || get( image, [ 'media_details', 'sizes', 'large', 'source_url' ] ) || image.url;
+	return imageProps;
+};