3.3.0 Feedback (from develop to UAT)

languages/cloudinary.pot

@@ -4,7 +4,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Cloudinary STABLETAG\n"
 "Report-Msgid-Bugs-To: https://github.com/cloudinary/cloudinary_wordpress\n"
-"POT-Creation-Date: 2026-01-09 13:06:24+00:00\n"
+"POT-Creation-Date: 2026-01-14 08:33:58+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -559,7 +559,7 @@ msgstr ""
 
 #: php/class-media.php:3219 php/ui/component/class-plan-details.php:119
 #: php/ui/component/class-plan-status.php:128
-#: ui-definitions/settings-pages.php:567 ui-definitions/settings-sidebar.php:44
+#: ui-definitions/settings-pages.php:568 ui-definitions/settings-sidebar.php:44
 msgid "Transformations"
 msgstr ""
 
@@ -573,7 +573,7 @@ msgid ""
 msgstr ""
 
 #: php/class-media.php:3225 ui-definitions/settings-image.php:174
-#: ui-definitions/settings-pages.php:593 ui-definitions/settings-video.php:260
+#: ui-definitions/settings-pages.php:594 ui-definitions/settings-video.php:260
 msgid "See examples"
 msgstr ""
 
@@ -855,7 +855,7 @@ msgstr ""
 #: php/delivery/class-lazy-load.php:424 php/delivery/class-lazy-load.php:534
 #: ui-definitions/settings-image.php:27 ui-definitions/settings-image.php:244
 #: ui-definitions/settings-pages.php:105 ui-definitions/settings-pages.php:198
-#: ui-definitions/settings-pages.php:953 ui-definitions/settings-video.php:27
+#: ui-definitions/settings-pages.php:958 ui-definitions/settings-video.php:27
 msgid "Preview"
 msgstr ""
 
@@ -1339,8 +1339,8 @@ msgid "Apply Changes"
 msgstr ""
 
 #: php/ui/component/class-button.php:36 php/ui/component/class-panel.php:58
-#: ui-definitions/settings-pages.php:603 ui-definitions/settings-pages.php:738
-#: ui-definitions/settings-pages.php:917
+#: ui-definitions/settings-pages.php:604 ui-definitions/settings-pages.php:739
+#: ui-definitions/settings-pages.php:922
 msgid "Save Changes"
 msgstr ""
 
@@ -1893,12 +1893,12 @@ msgid ""
 "Media Library%4$s."
 msgstr ""
 
-#: ui-definitions/settings-image.php:189 ui-definitions/settings-pages.php:571
+#: ui-definitions/settings-image.php:189 ui-definitions/settings-pages.php:572
 #: ui-definitions/settings-video.php:275
 msgid "What are transformations?"
 msgstr ""
 
-#: ui-definitions/settings-image.php:190 ui-definitions/settings-pages.php:572
+#: ui-definitions/settings-image.php:190 ui-definitions/settings-pages.php:573
 #: ui-definitions/settings-video.php:276
 msgid ""
 "A set of parameters included in a Cloudinary URL to programmatically "
@@ -2248,104 +2248,104 @@ msgstr ""
 msgid "Edit asset"
 msgstr ""
 
-#: ui-definitions/settings-pages.php:579
+#: ui-definitions/settings-pages.php:580
 msgid "Asset transformations"
 msgstr ""
 
-#: ui-definitions/settings-pages.php:585
+#: ui-definitions/settings-pages.php:586
 #. translators: The link to transformation reference.
 msgid ""
 "Specify the asset transformations using Cloudinary URL transformation "
 "syntax. See %1$sreference%2$s for all available transformations and syntax."
 msgstr ""
 
-#: ui-definitions/settings-pages.php:618
-msgid "Text Overlay"
+#: ui-definitions/settings-pages.php:619
+msgid "Text overlay"
 msgstr ""
 
-#: ui-definitions/settings-pages.php:626
+#: ui-definitions/settings-pages.php:627
 #. Translators: The HTML for opening and closing link tags.
 msgid ""
 "The text overlay feature allows you to place text on top of an asset. Learn "
 "more about %1$stext overlays%2$s and how to use them effectively."
 msgstr ""
 
-#: ui-definitions/settings-pages.php:641
+#: ui-definitions/settings-pages.php:642
 msgid "Color"
 msgstr ""
 
-#: ui-definitions/settings-pages.php:651
+#: ui-definitions/settings-pages.php:652
 msgid "Font Face"
 msgstr ""
 
-#: ui-definitions/settings-pages.php:654
+#: ui-definitions/settings-pages.php:655
 msgid "Arial (sans-serif)"
 msgstr ""
 
-#: ui-definitions/settings-pages.php:655
+#: ui-definitions/settings-pages.php:656
 msgid "Verdana (sans-serif)"
 msgstr ""
 
-#: ui-definitions/settings-pages.php:656
+#: ui-definitions/settings-pages.php:657
 msgid "Times New Roman (serif)"
 msgstr ""
 
-#: ui-definitions/settings-pages.php:657
+#: ui-definitions/settings-pages.php:658
 msgid "Courier New (monospace)"
 msgstr ""
 
-#: ui-definitions/settings-pages.php:658
+#: ui-definitions/settings-pages.php:659
 msgid "Georgia (serif)"
 msgstr ""
 
-#: ui-definitions/settings-pages.php:666
+#: ui-definitions/settings-pages.php:667
 msgid "Font Size"
 msgstr ""
 
-#: ui-definitions/settings-pages.php:682
+#: ui-definitions/settings-pages.php:683
 msgid "Text"
 msgstr ""
 
-#: ui-definitions/settings-pages.php:694 ui-definitions/settings-pages.php:873
+#: ui-definitions/settings-pages.php:695 ui-definitions/settings-pages.php:878
 msgid "Position"
 msgstr ""
 
-#: ui-definitions/settings-pages.php:719 ui-definitions/settings-pages.php:898
+#: ui-definitions/settings-pages.php:720 ui-definitions/settings-pages.php:903
 msgid "X Offset"
 msgstr ""
 
-#: ui-definitions/settings-pages.php:726 ui-definitions/settings-pages.php:905
+#: ui-definitions/settings-pages.php:727 ui-definitions/settings-pages.php:910
 msgid "Y Offset"
 msgstr ""
 
-#: ui-definitions/settings-pages.php:752 ui-definitions/settings-pages.php:931
+#: ui-definitions/settings-pages.php:753 ui-definitions/settings-pages.php:936
 msgid "Reset All"
 msgstr ""
 
-#: ui-definitions/settings-pages.php:767
-msgid "Image Overlay"
+#: ui-definitions/settings-pages.php:768
+msgid "Image overlay"
 msgstr ""
 
-#: ui-definitions/settings-pages.php:775
+#: ui-definitions/settings-pages.php:776
 #. Translators: The HTML for opening and closing link tags.
 msgid ""
 "The image overlay feature allows you to place an image on top of an asset. "
 "Learn more about %1$simage overlays%2$s and how to use them effectively."
 msgstr ""
 
-#: ui-definitions/settings-pages.php:794
+#: ui-definitions/settings-pages.php:795
 msgid "Select Image"
 msgstr ""
 
-#: ui-definitions/settings-pages.php:839
+#: ui-definitions/settings-pages.php:840
 msgid "Size"
 msgstr ""
 
-#: ui-definitions/settings-pages.php:853
+#: ui-definitions/settings-pages.php:856
 msgid "Opacity"
 msgstr ""
 
-#: ui-definitions/settings-pages.php:994
+#: ui-definitions/settings-pages.php:999
 msgid "Effects applied successfully!"
 msgstr ""
 

php/class-admin.php

@@ -298,7 +298,7 @@ public function render() {
 			$page = $this->get_param( 'current_section' );
 		}
 
-		$this->set_param( 'active_slug', $page['slug'] );
+		$this->set_param( 'active_slug', isset( $page['slug'] ) ? $page['slug'] : '' );
 		$setting         = $this->init_components( $page, $screen->id );
 		$this->component = $setting->get_component();
 		$template        = $this->section;

src/css/components/_edit_overlay.scss

@@ -51,6 +51,12 @@
 	&-offset {
 		margin-bottom: 20px;
 
+		.suffixed {
+			width: 70%;
+			position: relative;
+			top: 5px;
+		}
+
 		.cld-input-text {
 			margin-bottom: 10px;
 		}

src/js/asset-edit.js

@@ -18,25 +18,25 @@ const AssetEdit = {
 	currentURL: null,
 
 	// Transformations Input
-	transformationsInput: document.getElementById( 'edit_asset.transformations' ),
+	transformationsInput: document.getElementById( 'edit_asset.edit_affects.transformations' ),
 
 	// Text Overlay Inputs
-	textOverlayColorInput: document.getElementById( 'edit_asset.text_overlay_color' ),
-	textOverlayFontFaceInput: document.getElementById( 'edit_asset.text_overlay_font_face' ),
-	textOverlayFontSizeInput: document.getElementById( 'edit_asset.text_overlay_font_size' ),
-	textOverlayTextInput: document.getElementById( 'edit_asset.text_overlay_text' ),
-	textOverlayPositionInput: document.getElementById( 'edit_asset.text_overlay_position' ),
-	textOverlayXOffsetInput: document.getElementById( 'edit_asset.text_overlay_x_offset' ),
-	textOverlayYOffsetInput: document.getElementById( 'edit_asset.text_overlay_y_offset' ),
+	textOverlayColorInput: document.getElementById( 'edit_asset.edit_affects.text_overlay_color' ),
+	textOverlayFontFaceInput: document.getElementById( 'edit_asset.edit_affects.text_overlay_font_face' ),
+	textOverlayFontSizeInput: document.getElementById( 'edit_asset.edit_affects.text_overlay_font_size' ),
+	textOverlayTextInput: document.getElementById( 'edit_asset.edit_affects.text_overlay_text' ),
+	textOverlayPositionInput: document.getElementById( 'edit_asset.edit_affects.text_overlay_position' ),
+	textOverlayXOffsetInput: document.getElementById( 'edit_asset.edit_affects.text_overlay_x_offset' ),
+	textOverlayYOffsetInput: document.getElementById( 'edit_asset.edit_affects.text_overlay_y_offset' ),
 
 	// Image Overlay Inputs
-	imageOverlayImageIdInput: document.getElementById( 'edit_asset.image_overlay_image_id' ),
-	imageOverlayPublicIdInput: document.getElementById( 'edit_asset.image_overlay_public_id' ),
-	imageOverlaySizeInput: document.getElementById( 'edit_asset.image_overlay_size' ),
-	imageOverlayOpacityInput: document.getElementById( 'edit_asset.image_overlay_opacity' ),
-	imageOverlayPositionInput: document.getElementById( 'edit_asset.image_overlay_position' ),
-	imageOverlayXOffsetInput: document.getElementById( 'edit_asset.image_overlay_x_offset' ),
-	imageOverlayYOffsetInput: document.getElementById( 'edit_asset.image_overlay_y_offset' ),
+	imageOverlayImageIdInput: document.getElementById( 'edit_asset.edit_affects.image_overlay_image_id' ),
+	imageOverlayPublicIdInput: document.getElementById( 'edit_asset.edit_affects.image_overlay_public_id' ),
+	imageOverlaySizeInput: document.getElementById( 'edit_asset.edit_affects.image_overlay_size' ),
+	imageOverlayOpacityInput: document.getElementById( 'edit_asset.edit_affects.image_overlay_opacity' ),
+	imageOverlayPositionInput: document.getElementById( 'edit_asset.edit_affects.image_overlay_position' ),
+	imageOverlayXOffsetInput: document.getElementById( 'edit_asset.edit_affects.image_overlay_x_offset' ),
+	imageOverlayYOffsetInput: document.getElementById( 'edit_asset.edit_affects.image_overlay_y_offset' ),
 
 	// Buttons
 	saveButton: document.getElementById( 'cld-asset-edit-save' ),
@@ -376,6 +376,7 @@ const AssetEdit = {
 		this.textOverlayMap.forEach(({ input, defaultValue }) => {
 			if (input) {
 				input.value = defaultValue;
+				input.dispatchEvent(new Event('change'));
 			}
 		});
 
@@ -393,6 +394,7 @@ const AssetEdit = {
 		this.imageOverlayMap.forEach(({ input, defaultValue }) => {
 			if (input) {
 				input.value = defaultValue;
+				input.dispatchEvent(new Event('change'));
 			}
 		});
 
@@ -411,6 +413,10 @@ const AssetEdit = {
 		// Update preview to remove image overlay
 		this.preview.setSrc(this.buildSrc());
 	},
+	getFormattedPercentageValue( value ) {
+		const val = value / 100;
+		return val % 1 === 0 ? val.toFixed(1) : val;
+	},
 	buildPlacementQualifiers(positionInput, xOffsetInput, yOffsetInput) {
 		let placementQualifiers = [];
 
@@ -457,7 +463,7 @@ const AssetEdit = {
 			this.imageOverlayYOffsetInput
 		);
 
-		return `${imageLayerDefinition}/fl_layer_apply${placementString}`;
+		return `${imageLayerDefinition}/c_limit,w_1.0,fl_relative/fl_layer_apply${placementString}`;
 	},
 	buildTextOverlay() {
 		if (!this.textOverlayTextInput || !this.textOverlayTextInput.value.trim()) {
@@ -505,7 +511,7 @@ const AssetEdit = {
 			this.textOverlayYOffsetInput
 		);
 
-		return `${textLayerDefinition}/fl_layer_apply${placementString}`;
+		return `${textLayerDefinition}/c_limit,w_0.9,fl_relative/fl_layer_apply${placementString}`;
 	},
 	buildSrc() {
 		const transformations = this.transformationsInput.value;
@@ -591,11 +597,13 @@ const AssetEdit = {
 		map.forEach(({ key, input, defaultValue }) => {
 			if (input) {
 				input.value = (data && data[key] !== undefined) ? data[key] : defaultValue;
+				input.dispatchEvent(new Event('change'));
 
 				// Special handling for color input to initialize color picker
 				if (key === 'color' && input.value) {
 					jQuery(this.textOverlayColorInput).iris({ color: input.value });
 				}
+
 				if (key === 'imageId' && input.value) {
 					this.fetchImageById(input.value).then(attachment => {
 						AssetEdit.renderImageOverlay(attachment);

ui-definitions/settings-pages.php

@@ -535,6 +535,7 @@
 	'edit_asset'     => array(
 		'page_title'          => __( 'Edit asset', 'cloudinary' ),
 		'section'             => 'edit-asset',
+		'slug'                => 'edit_affects',
 		'requires_connection' => true,
 		array(
 			'type'       => 'row',
@@ -615,7 +616,7 @@
 				array(
 					'type'        => 'panel',
 					'collapsible' => 'open',
-					'title'       => __( 'Text Overlay', 'cloudinary' ),
+					'title'       => __( 'Text overlay', 'cloudinary' ),
 					array(
 						'type' => 'row',
 						array(
@@ -764,7 +765,7 @@
 				array(
 					'type'        => 'panel',
 					'collapsible' => 'open',
-					'title'       => __( 'Image Overlay', 'cloudinary' ),
+					'title'       => __( 'Image overlay', 'cloudinary' ),
 					array(
 						'type' => 'row',
 						array(
@@ -839,9 +840,11 @@
 								'title'      => __( 'Size', 'cloudinary' ),
 								'default'    => 100,
 								'slug'       => 'image_overlay_size',
+								'suffix'     => '@value px',
 								'attributes' => array(
-									'min'   => 0,
+									'min'   => 1,
 									'max'   => 1000,
+									'step'  => 1,
 									'type'  => 'range',
 									'class' => array(
 										'edit-overlay-range-input',
@@ -853,9 +856,11 @@
 								'title'      => __( 'Opacity', 'cloudinary' ),
 								'default'    => 20,
 								'slug'       => 'image_overlay_opacity',
+								'suffix'     => '@value %',
 								'attributes' => array(
-									'min'   => 0,
+									'min'   => 1,
 									'max'   => 100,
+									'step'  => 1,
 									'type'  => 'range',
 									'class' => array(
 										'edit-overlay-range-input',