Merge pull request #383 from cloudinary/feature/pgw-look-feel

Updates

Author: pereirinha

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' => 'b2f7ff6487417f414e26d41973005453');
+<?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' => '1eb11fc0b636111ccc4876191f5e87c7');

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' => 'cd0e9af78dcc0b1cee52b98e8dbe93ac');
+<?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

@@ -75,8 +75,11 @@
     "type": "array",
     "default": []
   },
-  "transformation": {
-    "type": "object",
-    "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';
 
@@ -155,21 +156,25 @@ 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>
+					<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

js/gallery.js

@@ -197,7 +197,7 @@ export const RESIZE_CROP = [
 		value: 'pad',
 	},
 	{
-		label: __( 'Crop', 'cloudinary' ),
+		label: __( 'Fill', 'cloudinary' ),
 		value: 'fill',
 	},
 ];

js/src/gallery-block/attributes.json

@@ -71,6 +71,14 @@ export const setupAttributesForRendering = ( attributes ) => {
 		delete config.displayProps.columns;
 	}
 
+	if ( 'pad' !== config?.transformation_crop ) {
+		delete config.transformation_background;
+	}
+
+	if ( 'pad' !== config?.transformation?.crop ) {
+		delete config.transformation.background;
+	}
+
 	if ( config.customSettings ) {
 		try {
 			const customSettings = JSON.parse( config.customSettings );