release(minor): new features

- Better lazy loading for background images from page building plugins (Elementor, Otter Blocks, Kadence Blocks, Beaver Builder, Spectra Blocks, Essential Blocks)
- Fixes issue with lazy-loading images using "object-size: cover" in CSS, not having the proper position
- Added automatic cache clearing support for 4 popular caching plugins (Super Page Cache, Hummingbird, Aruba Hispeed Cache, Cache Enabler)
- Updated "View all stats" link from the dashboard widget to go directly to the Optimole dashboard 
- Clearer messaging for visit limit notifications
- Better translation support and consistent casing of "Optimole" throughout
- Updated dependencies

Author: abaicus

.github/workflows/diff-translations.yml

@@ -0,0 +1,53 @@
+name: Translations Diff
+
+on:
+  pull_request_review:
+  pull_request:
+    types: [opened, edited, synchronize, ready_for_review]
+    branches:
+      - development
+      - master
+
+jobs:
+  translation:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Base Branch
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.base_ref }}
+          path: optimole-base
+      - name: Setup node 16
+        uses: actions/setup-node@v4
+        with:
+          node-version: 16.x
+      - name: Build POT for Base Branch
+        run: |
+          cd optimole-base
+          composer install --no-dev --prefer-dist --no-progress --no-suggest
+          npm ci
+          npm run build
+          # TODO: when is merged to master, switch to npm run make-pot
+          docker run --user root --rm --volume $(pwd):/var/www/html/optimole-wp wordpress:cli bash -c 'php -d memory_limit=512M $(which wp) --version --allow-root && wp i18n make-pot optimole-wp ./optimole-wp/languages/optimole-wp.pot --include=inc,assets/src --allow-root --domain=optimole-wp'
+          ls languages/
+      - name: Checkout PR Branch (Head)
+        uses: actions/checkout@v4
+        with:
+          path: optimole-head
+      - name: Build POT for PR Branch
+        run: |
+          cd optimole-head
+          composer install --no-dev --prefer-dist --no-progress --no-suggest
+          npm ci
+          npm run build
+          npm run make-pot
+          ls languages/
+      - name: Compare POT files
+        uses: Codeinwp/action-i18n-string-reviewer@main
+        with:
+          fail-on-changes: 'true'
+          openrouter-key: ${{ secrets.OPEN_ROUTER_API_KEY }}
+          openrouter-model: 'google/gemini-2.5-flash'
+          base-pot-file: 'optimole-base/languages/optimole-wp.pot'
+          target-pot-file: 'optimole-head/languages/optimole-wp.pot'
+          github-token: ${{ secrets.BOT_TOKEN }}

.gitignore

@@ -13,3 +13,4 @@ assets/build
 test-results
 tests/assets/filestash
 coverage
+languages

CHANGELOG.md

@@ -998,7 +998,7 @@ Fix edge cases for auto allowing domain on site migration.
 
 **Documentation**
 
-* improve readme description of the OptiMole service ([e020300](https://github.com/Codeinwp/optimole-wp/commit/e020300))
+* improve readme description of the Optimole service ([e020300](https://github.com/Codeinwp/optimole-wp/commit/e020300))
 
 
 

README.md

@@ -262,12 +262,12 @@ Discover how to make the most of Optimole with our detailed and user-friendly [d
 
 
 ## Installation ##
-The following are the steps to install the OptiMole plugin
+The following are the steps to install the Optimole plugin
 
 1. In your WordPress Administration Panels, click on Add New option under Plugins from the menu.
 Click on upload at the top.
-2. Browse the location and select the OptiMole Plugin and click install now.
-3. Go to Media -> OptiMole and follow in the instructions on how to enable the service.
+2. Browse the location and select the Optimole Plugin and click install now.
+3. Go to Media -> Optimole and follow in the instructions on how to enable the service.
 
 ## Frequently Asked Questions ##
 

assets/src/dashboard/parts/connected/dashboard/LastImages.js

@@ -55,7 +55,7 @@ const Image = ({
 				} }
 				ref={ squareRef }
 			/>
-			<p className="optml__bullet w-full h-4">{ getSize() }% { optimoleDashboardApp.strings.latest_images.saved } </p>
+			<p className="optml__bullet w-full h-4">{ optimoleDashboardApp.strings.latest_images.percentage_saved.replace( '{ratio}', getSize() ) } </p>
 		</div>
 	);
 };
@@ -136,7 +136,7 @@ const LastImages = () => {
 
 	return (
 		<div>
-			<h3 className="text-gray-800 text-xl font-semibold mb-5 m-0">{ optimoleDashboardApp.strings.latest_images.last } { optimoleDashboardApp.strings.latest_images.optimized_images }</h3>
+			<h3 className="text-gray-800 text-xl font-semibold mb-5 m-0">{ optimoleDashboardApp.strings.latest_images.last_optimized_images }</h3>
 
 			{ ( isInitialLoading && ! isLoaded ) && (
 				<div className="flex items-center flex-col py-2">

assets/src/dashboard/parts/connected/settings/Compression.js

@@ -352,7 +352,7 @@ const Compression = ({
 											{ ( sampleImages.id && 0 < sampleImages.original_size ) && (
 												<div>
 													{ 0 < getCompressionRatio() ? (
-														<p className="text-base">{ 100 - getCompressionRatio() }% { optimoleDashboardApp.strings.latest_images.smaller }</p>
+														<p className="text-base">{ optimoleDashboardApp.strings.latest_images.percentage_smaller.replace( '{ratio}', 100 - getCompressionRatio() ) }</p>
 													) : (
 														<p className="text-base">{ optimoleDashboardApp.strings.latest_images.same_size }</p>
 													) }

assets/src/dashboard/utils/api.js

@@ -153,7 +153,7 @@ export const connectAccount = ( data, callback = () => {}) => {
 				sendOnboardingImages();
 				toggleDashboardSidebarSubmenu( true );
 
-				console.log( '%c OptiMole API connection successful.', 'color: #59B278' );
+				console.log( '%c Optimole API connection successful.', 'color: #59B278' );
 
 			} else {
 				setHasValidKey( false );
@@ -195,7 +195,7 @@ export const disconnectAccount = () => {
 				sethasDashboardLoaded( false );
 				setShowDisconnect( false );
 				toggleDashboardSidebarSubmenu( false );
-				console.log( '%c Disconnected from OptiMole API.', 'color: #59B278' );
+				console.log( '%c Disconnected from Optimole API.', 'color: #59B278' );
 			} else {
 				console.error( response );
 			}
@@ -221,7 +221,7 @@ export const selectDomain = ( data, callback = () => {}) => {
 				setAPIKey( response.data.api_key );
 				setUserData( response.data );
 				setAvailableApps( response.data );
-				console.log( '%c OptiMole API connection successful.', 'color: #59B278' );
+				console.log( '%c Optimole API connection successful.', 'color: #59B278' );
 			} else {
 				setHasValidKey( false );
 				console.log( '%c Invalid API Key.', 'color: #E7602A' );
@@ -271,7 +271,7 @@ export const requestStatsUpdate = () => {
 			if ( 'disconnected' === response.code ) {
 				setIsConnected( false );
 				sethasDashboardLoaded( false );
-				console.log( '%c Disconnected from OptiMole API.', 'color: #59B278' );
+				console.log( '%c Disconnected from Optimole API.', 'color: #59B278' );
 			}
 		});
 };

assets/src/global.d.ts

@@ -481,10 +481,9 @@ export interface LatestImages {
   no_images_found: string
   compression: string
   loading_latest_images: string
-  last: string
-  saved: string
-  smaller: string
-  optimized_images: string
+  last_optimized_images: string
+  percentage_saved: string
+  percentage_smaller: string
   same_size: string
   small_optimization: string
   medium_optimization: string

assets/src/widget/components/WidgetFooter.js

@@ -1,7 +1,7 @@
 import { Icon, external } from '@wordpress/icons';
 
 export default function WidgetFooter() {
-	const { i18n, dashboardURL, adminPageURL } = optimoleDashboardWidget;
+	const { i18n, dashboardURL, dashboardMetricsURL } = optimoleDashboardWidget;
 
 	return (
 		<div className="flex justify-between gap-4 items-center px-4 py-2 bg-gray-50">
@@ -10,8 +10,9 @@ export default function WidgetFooter() {
 				<span className="text-base font-bold text-gray-800 group-hover:text-dark-blue transition-colors duration-300">Optimole</span>
 			</a>
 
-			<a href={ adminPageURL } className="text-sm text-info font-medium cursor-pointer hover:text-dark-blue no-underline transition-colors duration-300">
+			<a href={ dashboardMetricsURL } className="text-sm text-info font-medium cursor-pointer hover:text-dark-blue no-underline transition-colors duration-300 flex items-center gap-1">
 				{ i18n.viewAllStats }
+				<Icon icon={ external } className="w-5 h-5 fill-current transition-colors duration-300"/>
 			</a>
 		</div>
 	);