Add gallery crop option in Inspector (#1545)

* Crop gallery images by default

This is a work in progress. Pushing so as to test in IE.

* Polish inspector controls generally.

This is pending more improvements happening separately in #1440 and #1523.

* Make the crop actually work.

* Enable crop by default. Props @mtias.

* Move to is-cropped classname.

* Fix for IE11.

* Revert back to object-fit.

blocks/library/gallery/index.js

@@ -12,6 +12,7 @@ import { registerBlockType, query as hpq } from '../../api';
 import MediaUploadButton from '../../media-upload-button';
 import InspectorControls from '../../inspector-controls';
 import RangeControl from '../../inspector-controls/range-control';
+import ToggleControl from '../../inspector-controls/toggle-control';
 import BlockControls from '../../block-controls';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 import GalleryImage from './gallery-image';
@@ -75,6 +76,8 @@ registerBlockType( 'core/gallery', {
 		const { images = [], columns = defaultColumnsNumber( attributes ), align = 'none' } = attributes;
 		const setColumnsNumber = ( event ) => setAttributes( { columns: event.target.value } );
 		const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
+		const { imageCrop = true } = attributes;
+		const toggleImageCrop = () => setAttributes( { imageCrop: ! imageCrop } );
 
 		const controls = (
 			focus && (
@@ -124,16 +127,24 @@ registerBlockType( 'core/gallery', {
 			controls,
 			focus && images.length > 1 && (
 				<InspectorControls key="inspector">
+					<p className="editor-block-inspector__description">Image galleries are a great way to share groups of pictures on your site.</p>
+					<hr />
+					<h3>{ __( 'Gallery Settings' ) }</h3>
 					<RangeControl
 						label={ __( 'Columns' ) }
 						value={ columns }
 						onChange={ setColumnsNumber }
 						min="1"
 						max={ Math.min( MAX_COLUMNS, images.length ) }
 					/>
+					<ToggleControl
+						label={ __( 'Crop Images' ) }
+						checked={ !! imageCrop }
+						onChange={ toggleImageCrop }
+					/>
 				</InspectorControls>
 			),
-			<div key="gallery" className={ `${ className } align${ align } columns-${ columns }` }>
+			<div key="gallery" className={ `${ className } align${ align } columns-${ columns } ${ imageCrop ? 'is-cropped' : '' }` }>
 				{ images.map( ( img ) => (
 					<GalleryImage key={ img.url } img={ img } />
 				) ) }

blocks/library/gallery/style.scss

@@ -17,6 +17,21 @@
 		}
 	}
 
+	// Cropped
+	&.is-cropped .blocks-gallery-image {
+		img {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+
+		// Alas, IE11+ doesn't support object-fit
+		_:-ms-lang(x), img {
+			height: auto;
+			width: auto;
+		}
+	}
+
 	&.columns-1 figure {
 		width: calc(100% / 1 - 2 * 8px);
 	}

editor/sidebar/style.scss

@@ -33,6 +33,12 @@
 		font-size: $default-font-size;
 	}
 
+	hr {
+		border-top: none;
+		border-bottom: 1px solid $light-gray-500;
+		margin: 1.5em 0;
+	}
+
 	ul.components-toolbar {
 		box-shadow: none;
 		margin-bottom: $panel-padding;