Add controls for image crops on PGW

js/gallery-block.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-components/build-style/style.css', 'wp-data', 'wp-element', 'wp-i18n', 'wp-polyfill'), 'version' => 'cbdaa8474b2bca3a4989663ca5dabb54');
+<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-components/build-style/style.css', 'wp-data', 'wp-element', 'wp-i18n', 'wp-polyfill'), 'version' => '4afe8231d710345cf2df6b10310ddc98');

js/gallery.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-components', 'wp-components/build-style/style.css', 'wp-data', 'wp-element', 'wp-i18n', 'wp-polyfill'), 'version' => '5e65d4e76dfe29950733655e236ced99');
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-components', 'wp-components/build-style/style.css', 'wp-data', 'wp-element', 'wp-i18n', 'wp-polyfill'), 'version' => 'cc627576f6116705ec4bf8af2dc79af2');

js/src/gallery-block/attributes.json

@@ -74,5 +74,9 @@
   "selectedImages": {
     "type": "array",
     "default": []
+  },
+  "transformation": {
+    "type": "object",
+    "default": {}
   }
 }

js/src/gallery-block/controls.js

@@ -31,6 +31,8 @@ import {
 	ZOOM_TRIGGER,
 	ZOOM_TYPE,
 	ZOOM_VIEWER_POSITION,
+	RESIZE_CROP,
+	PAD_STYLES,
 } from './options';
 
 import Radio from './radio';
@@ -57,6 +59,15 @@ const Controls = ( { attributes, setAttributes, colors } ) => {
 			? JSON.stringify( nestedAttrs.customSettings )
 			: nestedAttrs.customSettings;
 
+	if ( ! attributes.transformation_crop ) {
+		attributes.transformation_crop = 'pad';
+		attributes.transformation_background = 'rgb:FFFFFF';
+	}
+
+	if ( 'fill' === attributes.transformation_crop ) {
+		delete attributes.transformation_background;
+	}
+
 	return (
 		<>
 			<PanelBody title={ __( 'Layout', 'cloudinary' ) }>
@@ -144,6 +155,54 @@ const Controls = ( { attributes, setAttributes, colors } ) => {
 						setAttributes( { aspectRatio: value } )
 					}
 				/>
+				<p
+					title={ __(
+						'How to resize or crop images to fit the gallery. Pad adds padding around the image using the specified padding style. Fill crops the image from the center so it fills as much of the available space as possible.',
+						'cloudinary'
+					) }
+				>
+					{ __( 'Resize or Crop Mode', 'cloudinary' ) }
+					<span
+						className="dashicons dashicons-info cld-tooltip"
+						data-tooltip="tooltip_auto_sync"
+					>
+						<span id="tooltip_auto_sync" className="hidden"></span>
+					</span>
+				</p>
+				<p>
+					<ButtonGroup>
+						{ RESIZE_CROP.map( ( type ) => (
+							<Button
+								key={ type.value + '-look-and-feel' }
+								isDefault
+								isPressed={
+									type.value ===
+									attributes.transformation_crop
+								}
+								onClick={ () =>
+									setAttributes( {
+										transformation_crop: type.value,
+										transformation_background: null,
+									} )
+								}
+							>
+								{ type.label }
+							</Button>
+						) ) }
+					</ButtonGroup>
+				</p>
+				{ 'pad' === attributes.transformation_crop && (
+					<SelectControl
+						label={ __( 'Pad style', 'cloudinary' ) }
+						value={ attributes.transformation_background }
+						options={ PAD_STYLES }
+						onChange={ ( value ) => {
+							setAttributes( {
+								transformation_background: value,
+							} );
+						} }
+					/>
+				) }
 				<p>{ __( 'Navigation', 'cloudinary' ) }</p>
 				<p>
 					<ButtonGroup>

js/src/gallery-block/options.js

@@ -190,3 +190,33 @@ export const MEDIA_ICON_SHAPE = [
 		label: __( 'Square', 'cloudinary' ),
 	},
 ];
+
+export const RESIZE_CROP = [
+	{
+		label: __( 'Pad', 'cloudinary' ),
+		value: 'pad',
+	},
+	{
+		label: __( 'Crop', 'cloudinary' ),
+		value: 'fill',
+	},
+];
+
+export const PAD_STYLES = [
+	{
+		label: __( 'White padding', 'cloudinary' ),
+		value: 'rgb:FFFFFF',
+	},
+	{
+		label: __( 'Border color padding', 'cloudinary' ),
+		value: 'auto',
+	},
+	{
+		label: __( 'Predominant color padding', 'cloudinary' ),
+		value: 'auto:predominant',
+	},
+	{
+		label: __( 'Gradient fade padding', 'cloudinary' ),
+		value: 'auto:predominant_gradient',
+	},
+];

php/media/class-gallery.php

@@ -65,9 +65,6 @@ class Gallery {
 			'mode'    => 'classic',
 			'columns' => 1,
 		),
-		'transformation'   => array(
-			'crop' => 'fill',
-		),
 		'indicatorProps'   => array( 'shape' => 'round' ),
 		'themeProps'       => array(
 			'primary'   => '#cf2e2e',