Tiled gallery: rounded corners (#14704)

Automattic · Feb 17, 2020 · a3f477b · a3f477b
1 parent 0b5fab9
commit a3f477b
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 6 deletions.
diff --git a/extensions/blocks/tiled-gallery/constants.js b/extensions/blocks/tiled-gallery/constants.js
@@ -2,6 +2,7 @@ export const ALLOWED_MEDIA_TYPES = [ 'image' ];
 export const DEFAULT_GALLERY_WIDTH = 580;
 export const GUTTER_WIDTH = 4;
 export const MAX_COLUMNS = 20;
+export const MAX_ROUNDED_CORNERS = 20;
 export const PHOTON_MAX_RESIZE = 2000;
 
 /**

diff --git a/extensions/blocks/tiled-gallery/edit.js b/extensions/blocks/tiled-gallery/edit.js
@@ -27,7 +27,13 @@ import {
  */
 import FilterToolbar from './filter-toolbar';
 import Layout from './layout';
-import { ALLOWED_MEDIA_TYPES, LAYOUT_STYLES, MAX_COLUMNS } from './constants';
+import {
+	ALLOWED_MEDIA_TYPES,
+	LAYOUT_CIRCLE,
+	LAYOUT_STYLES,
+	MAX_COLUMNS,
+	MAX_ROUNDED_CORNERS,
+} from './constants';
 import { getActiveStyleName } from '../../shared/block-styles';
 import { icon } from '.';
 import EditButton from '../../shared/edit-button';
@@ -156,6 +162,8 @@ class TiledGalleryEdit extends Component {
 
 	setColumnsNumber = value => this.setAttributes( { columns: value } );
 
+	setRoundedCorners = value => this.setAttributes( { roundedCorners: value } );
+
 	setImageAttributes = index => attributes => {
 		const {
 			attributes: { images },
@@ -192,6 +200,7 @@ class TiledGalleryEdit extends Component {
 			imageFilter,
 			images,
 			linkTo,
+			roundedCorners,
 		} = attributes;
 
 		const dropZone = <DropZone onFilesDrop={ this.addFiles } />;
@@ -262,6 +271,15 @@ class TiledGalleryEdit extends Component {
 								max={ Math.min( MAX_COLUMNS, images.length ) }
 							/>
 						) }
+						{ layoutStyle !== LAYOUT_CIRCLE && (
+							<RangeControl
+								label={ __( 'Rounded corners', 'jetpack' ) }
+								value={ roundedCorners }
+								onChange={ this.setRoundedCorners }
+								min={ 0 }
+								max={ MAX_ROUNDED_CORNERS }
+							/>
+						) }
 						<SelectControl
 							label={ __( 'Link To', 'jetpack' ) }
 							value={ linkTo }
@@ -285,6 +303,7 @@ class TiledGalleryEdit extends Component {
 					onMoveForward={ this.onMoveForward }
 					onRemoveImage={ this.onRemoveImage }
 					onSelectImage={ this.onSelectImage }
+					roundedCorners={ roundedCorners }
 					selectedImage={ isSelected ? selectedImage : null }
 					setImageAttributes={ this.setImageAttributes }
 				>

diff --git a/extensions/blocks/tiled-gallery/index.js b/extensions/blocks/tiled-gallery/index.js
@@ -128,6 +128,10 @@ const blockAttributes = {
 		default: 'none',
 		type: 'string',
 	},
+	roundedCorners: {
+		type: 'integer',
+		default: 0,
+	},
 };
 
 const exampleAttributes = {

diff --git a/extensions/blocks/tiled-gallery/layout/index.js b/extensions/blocks/tiled-gallery/layout/index.js
@@ -3,6 +3,7 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
+import classnames from 'classnames';
 
 /**
  * Internal dependencies
@@ -12,6 +13,7 @@ import GalleryImageSave from '../gallery-image/save';
 import Mosaic from './mosaic';
 import Square from './square';
 import { isSquareishLayout, photonizedImgProps } from '../utils';
+import { LAYOUT_CIRCLE, MAX_ROUNDED_CORNERS } from '../constants';
 
 export default class Layout extends Component {
 	// This is tricky:
@@ -73,14 +75,18 @@ export default class Layout extends Component {
 	}
 
 	render() {
-		const { align, children, className, columns, images, layoutStyle } = this.props;
-
+		const { align, children, className, columns, images, layoutStyle, roundedCorners } = this.props;
 		const LayoutRenderer = isSquareishLayout( layoutStyle ) ? Square : Mosaic;
-
 		const renderedImages = this.props.images.map( this.renderImage, this );
+		const roundedCornersValue =
+			layoutStyle !== LAYOUT_CIRCLE ? Math.min( roundedCorners, MAX_ROUNDED_CORNERS ) : 0;
 
 		return (
-			<div className={ className }>
+			<div
+				className={ classnames( className, {
+					[ `has-rounded-corners-${ roundedCornersValue }` ]: roundedCornersValue > 0,
+				} ) }
+			>
 				<LayoutRenderer
 					align={ align }
 					columns={ columns }

diff --git a/extensions/blocks/tiled-gallery/save.js b/extensions/blocks/tiled-gallery/save.js
@@ -13,7 +13,13 @@ export default function TiledGallerySave( { attributes } ) {
 		return null;
 	}
 
-	const { align, className, columns = defaultColumnsNumber( attributes ), linkTo } = attributes;
+	const {
+		align,
+		className,
+		columns = defaultColumnsNumber( attributes ),
+		linkTo,
+		roundedCorners,
+	} = attributes;
 
 	return (
 		<Layout
@@ -25,6 +31,7 @@ export default function TiledGallerySave( { attributes } ) {
 			isSave
 			layoutStyle={ getActiveStyleName( LAYOUT_STYLES, className ) }
 			linkTo={ linkTo }
+			roundedCorners={ roundedCorners }
 		/>
 	);
 }
diff --git a/extensions/blocks/tiled-gallery/view.scss b/extensions/blocks/tiled-gallery/view.scss
@@ -3,6 +3,7 @@
 @import './css-gram.scss';
 
 $tiled-gallery-max-column-count: 20;
+$tiled-gallery-max-rounded-corners: 20; // See constants.js for JS counterpart
 
 .wp-block-jetpack-tiled-gallery {
 	margin: 0 auto $jetpack-block-margin-bottom;
@@ -33,6 +34,12 @@ $tiled-gallery-max-column-count: 20;
 			display: flex;
 		}
 	}
+
+	@for $i from 1 through $tiled-gallery-max-rounded-corners {
+		&.has-rounded-corners-#{$i} .tiled-gallery__item img {
+			border-radius: #{$i}px;
+		}
+	}
 }
 
 .tiled-gallery__gallery {