Merge pull request #385 from cloudinary/uat

Uat

Author: asisayag2

cloudinary.php

@@ -3,7 +3,7 @@
  * Plugin Name: Cloudinary
  * Plugin URI: https://cloudinary.com/documentation/wordpress_integration
  * Description: With the Cloudinary plugin, you can upload and manage your media assets in the cloud, then deliver them to your users through a fast content delivery network, improving your website’s loading speed and overall user experience. Apply multiple transformations and take advantage of a full digital asset management solution without leaving WordPress.
- * Version: 2.6.0
+ * Version: 2.7.0-RC-6
  * Author:  Cloudinary Ltd., XWP
  * Author URI: https://cloudinary.com/
  * License: GPLv2+

js/cloudinary.js

@@ -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' => '2695e94cb7e3a139b92189c7f3552ac8');
+<?php return array('dependencies' => array('react', 'react-dom', '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' => '95635dcdce3468c638dab46e572af7a3');

js/gallery-block.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' => '8208197bd5ef998a03d54b699afa3696');
+<?php return array('dependencies' => array('react', 'react-dom', 'wp-block-editor', 'wp-components', 'wp-components/build-style/style.css', 'wp-data', 'wp-element', 'wp-i18n', 'wp-polyfill'), 'version' => '29099104bb87442e73de687aa973be61');

js/gallery-block.js

@@ -74,5 +74,12 @@
   "selectedImages": {
     "type": "array",
     "default": []
+  },
+  "transformation_crop": {
+    "type": "string",
+    "default": "pad"
+  },
+  "transformation_background": {
+    "type": "string"
   }
 }

js/gallery.asset.php

@@ -1,6 +1,7 @@
 import Dot from 'dot-object';
 import { __ } from '@wordpress/i18n';
 import cloneDeep from 'lodash/cloneDeep';
+import Tippy from '@tippyjs/react';
 
 import '@wordpress/components/build-style/style.css';
 
@@ -31,6 +32,8 @@ import {
 	ZOOM_TRIGGER,
 	ZOOM_TYPE,
 	ZOOM_VIEWER_POSITION,
+	RESIZE_CROP,
+	PAD_STYLES,
 } from './options';
 
 import Radio from './radio';
@@ -57,6 +60,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 +156,58 @@ const Controls = ( { attributes, setAttributes, colors } ) => {
 						setAttributes( { aspectRatio: value } )
 					}
 				/>
+				<p>
+					<Tippy
+						content={
+							<span>
+								{ __(
+									'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'
+								) }
+							</span>
+						}
+						theme={ 'cloudinary' }
+						arrow={ false }
+						placement={ 'bottom-start' }
+					>
+						<div className="cld-ui-title">
+							{ __( 'Resize/Crop Mode', 'cloudinary' ) }
+							<span className="dashicons dashicons-info cld-tooltip"></span>
+						</div>
+					</Tippy>
+					<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/gallery.js

@@ -41,6 +41,11 @@ const Edit = ( { setAttributes, attributes, className, isSelected } ) => {
 	const [ loading, setLoading ] = useState( false );
 
 	const preparedAttributes = useMemo( () => {
+		// Do not override block settings with defaults on existing ones.
+		if ( 0 !== attributes.selectedImages.length ) {
+			return attributes;
+		}
+
 		const defaultAttrs = {};
 
 		// eslint-disable-next-line no-unused-vars

js/src/gallery-block/attributes.json

@@ -97,6 +97,7 @@ export const CAROUSEL_LOCATION = [
 	{ label: __( 'Left', 'cloudinary' ), value: 'left' },
 	{ label: __( 'Right', 'cloudinary' ), value: 'right' },
 	{ label: __( 'Top', 'cloudinary' ), value: 'top' },
+	{ label: __( 'Bottom', 'cloudinary' ), value: 'bottom' },
 ];
 
 export const CAROUSEL_STYLE = [
@@ -189,3 +190,33 @@ export const MEDIA_ICON_SHAPE = [
 		label: __( 'Square', 'cloudinary' ),
 	},
 ];
+
+export const RESIZE_CROP = [
+	{
+		label: __( 'Pad', 'cloudinary' ),
+		value: 'pad',
+	},
+	{
+		label: __( 'Fill', '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',
+	},
+];