Mosaic work

client/gutenberg/extensions/tiled-gallery/layout/index.js

@@ -65,7 +65,7 @@ export default class Layout extends Component {
 	}
 
 	render() {
-		const { children, className, layoutStyle } = this.props;
+		const { children, className, layoutStyle, images } = this.props;
 
 		// eslint-disable-next-line no-nested-ternary
 		const LayoutRenderer = isSquareishLayout( layoutStyle )
@@ -78,7 +78,11 @@ export default class Layout extends Component {
 
 		return (
 			<div className={ className }>
-				<LayoutRenderer columns={ this.props.columns } renderedImages={ renderedImages } />
+				<LayoutRenderer
+					columns={ this.props.columns }
+					images={ images }
+					renderedImages={ renderedImages }
+				/>
 				{ children }
 			</div>
 		);

client/gutenberg/extensions/tiled-gallery/layout/mosaic.js

@@ -1,28 +1,34 @@
 /**
  * External dependencies
  */
-import { chunk, drop, take } from 'lodash';
+import { repeat } from 'lodash';
 
 /**
  * Internal dependencies
  */
 import Row from './row';
 import Column from './column';
-import { MAX_COLUMNS } from '../constants';
 
-export default function Mosaic( { columns, renderedImages } ) {
-	const columnCount = Math.min( MAX_COLUMNS, columns );
+export default function Mosaic( { images, renderedImages } ) {
+	const ratios = images.map( ( { height, width } ) => ( height && width ? width / height : 1 ) );
+	const rows = ratiosToShapes( ratios );
 
-	const remainder = renderedImages.length % columnCount;
+	let cursor = 0;
 
-	return [
-		...( remainder ? [ take( renderedImages, remainder ) ] : [] ),
-		...chunk( drop( renderedImages, remainder ), columnCount ),
-	].map( ( imagesInRow, rowIndex ) => (
-		<Row key={ rowIndex } className={ `columns-${ imagesInRow.length }` }>
-			{ imagesInRow.map( ( image, colIndex ) => (
-				<Column key={ colIndex }>{ image }</Column>
-			) ) }
+	return rows.map( ( columns, rowIndex ) => (
+		<Row key={ rowIndex }>
+			{ columns.map( ( imageCount, colIndex ) => {
+				const column = renderedImages
+					.slice( cursor, imageCount )
+					.map( image => <Column key={ colIndex }>{ image }</Column> );
+				cursor += imageCount;
+
+				return column;
+			} ) }
 		</Row>
 	) );
 }
+
+function ratiosToShapes( ratios ) {
+	return [ repeat( 1, ratios.length ) ];
+}