Use constants for layout names

Automattic · Feb 17, 2020 · 3b39465 · 3b39465
1 parent 500bc77
commit 3b39465
Showing 1 changed file with 7 additions and 3 deletions.
diff --git a/extensions/blocks/tiled-gallery/layout/mosaic/index.js b/extensions/blocks/tiled-gallery/layout/mosaic/index.js
@@ -12,6 +12,7 @@ import Gallery from '../gallery';
 import Row from '../row';
 import { getGalleryRows, handleRowResize } from './resize';
 import { imagesToRatios, ratiosToColumns, ratiosToMosaicRows } from './ratios';
+import { LAYOUT_COLUMN, LAYOUT_STACKED } from '../../constants';
 
 export default class Mosaic extends Component {
 	gallery = createRef();
@@ -29,7 +30,10 @@ export default class Mosaic extends Component {
 	componentDidUpdate( prevProps ) {
 		if ( prevProps.images !== this.props.images || prevProps.align !== this.props.align ) {
 			this.triggerResize();
-		} else if ( 'columns' === this.props.layoutStyle && prevProps.columns !== this.props.columns ) {
+		} else if (
+			LAYOUT_COLUMN === this.props.layoutStyle &&
+			prevProps.columns !== this.props.columns
+		) {
 			this.triggerResize();
 		}
 	}
@@ -80,9 +84,9 @@ export default class Mosaic extends Component {
 	render() {
 		const { align, columns, images, layoutStyle, renderedImages } = this.props;
 
-		const columnsToRender = 'stacked' === layoutStyle ? 1 : columns;
+		const columnsToRender = LAYOUT_STACKED === layoutStyle ? 1 : columns;
 		const ratios = imagesToRatios( images );
-		const rows = [ 'columns', 'stacked' ].includes( layoutStyle )
+		const rows = [ LAYOUT_COLUMN, LAYOUT_STACKED ].includes( layoutStyle )
 			? ratiosToColumns( ratios, columnsToRender )
 			: ratiosToMosaicRows( ratios, { isWide: [ 'full', 'wide' ].includes( align ) } );