Improvements & string adjustments

.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

@@ -992,7 +992,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

@@ -260,12 +260,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>
 	);

inc/admin.php

@@ -635,22 +635,17 @@ public function add_notice_upgrade() {
 		}
 		?>
 		<div class="notice optml-notice-optin"
-			style="background-color: #577BF9; color:white; border: none !important; display: flex;">
+			style="background-color: #577BF9; color:white; border: none !important; display: flex; align-items: center;">
 			<div style="margin: 1% 2%;">
-				<img src='<?php echo OPTML_URL . 'assets/img/upgrade_icon.png'; ?>'>
+				<img style="max-width: 100px;" src='<?php echo OPTML_URL . 'assets/img/upgrade_icon.png'; ?>'>
 			</div>
-			<div style="margin-top: 0.7%;">
+			<div style="display: grid; gap: 10px;">
 				<p style="font-size: 16px !important;">
 					<?php
 					printf(
-					/* translators: 1 - opening strong tag, 2 - visits limit, 3 - closing strong tag, 4 - opening strong tag, 5 - closing strong tag, 6 -  br tag */
-						__( '%1$sIt seems you are close to the %2$s visits limit with %3$sOptimole%4$s for this month.%5$s %6$s For a larger quota you may want to check the upgrade plans. If you exceed the quota we will need to deliver back your original, un-optimized images, which might decrease your site speed performance.', 'optimole-wp' ),
-						'<strong>',
-						number_format_i18n( 2000 ),
-						'</strong>',
-						'<strong>',
-						'</strong>',
-						'<br/><br/>'
+					/* translators: 1 - visits limit */
+						__( 'You\'re nearing your %1$s-visit monthly cap on Optimole. If you exceed it, we\'ll serve original (unoptimized) images - expect slower pages.', 'optimole-wp' ),
+						'<strong>' . number_format_i18n( 2000 ) . '</strong>'
 					);
 					?>
 				</p>
@@ -864,7 +859,7 @@ public function add_notice() {
 					</p>
 					<div class="actions">
 						<a href="<?php echo esc_url( admin_url( 'admin.php?page=optimole' ) ); ?>"
-							class="button button-primary button-hero"><?php _e( 'Connect to OptiMole', 'optimole-wp' ); ?>
+							class="button button-primary button-hero"><?php _e( 'Connect to Optimole', 'optimole-wp' ); ?>
 						</a>
 						<a class="button button-secondary button-hero"
 							href="<?php echo wp_nonce_url( add_query_arg( [ 'optml_hide_optin' => 'yes' ] ), 'hide_nonce', 'optml_nonce' ); ?>"><?php _e( 'I will do it later', 'optimole-wp' ); ?>
@@ -2286,10 +2281,11 @@ private function get_dashboard_strings() {
 				'no_images_found'       => sprintf( /* translators: 1 is the starting anchor tag, 2 is the ending anchor tag */ __( 'We are currently optimizing your images. Meanwhile you can visit your %1$shomepage%2$s and check how our plugin performs.', 'optimole-wp' ), '<a href="' . esc_url( home_url() ) . '" target="_blank" >', '</a>' ),
 				'compression'           => __( 'Optimization', 'optimole-wp' ),
 				'loading_latest_images' => __( 'Loading your optimized images...', 'optimole-wp' ),
-				'last'                  => __( 'Last', 'optimole-wp' ),
-				'saved'                 => __( 'Saved', 'optimole-wp' ),
-				'smaller'               => __( 'smaller', 'optimole-wp' ),
-				'optimized_images'      => __( 'optimized images', 'optimole-wp' ),
+				'last_optimized_images' => __( 'Last optimized images', 'optimole-wp' ),
+				// translators: %s is the percentage (e.g. 10%).
+				'percentage_saved'      => sprintf( __( '%s Saved', 'optimole-wp' ), '{ratio}%' ),
+				// translators: %s is the percentage (e.g. 10%).
+				'percentage_smaller'    => sprintf( __( '%s smaller', 'optimole-wp' ), '{ratio}%' ),
 				'same_size'             => __( '🙉 We couldn\'t do better, this image is already optimized at maximum.', 'optimole-wp' ),
 				'small_optimization'    => __( '😬 Not that much, just <strong>{ratio}</strong> smaller.', 'optimole-wp' ),
 				'medium_optimization'   => __( '🤓 We are on the right track, <strong>{ratio}</strong> squeezed.', 'optimole-wp' ),

inc/cli/cli_setting.php

@@ -32,12 +32,11 @@ public function connect( $args ) {
 		if ( $data === false || is_wp_error( $data ) ) {
 			$extra = '';
 			if ( is_wp_error( $data ) ) {
-				/**
-				 * Error from api.
-				 *
-				 * @var WP_Error $data Error object.
-				 */
-				$extra = sprintf( /* translators: errors details */ __( '. ERROR details: %s', 'optimole-wp' ), $data->get_error_message() );
+				$extra = sprintf(
+					/* translators: Error details */
+					__( '. ERROR details: %s', 'optimole-wp' ),
+					$data->get_error_message()
+				);
 			}
 
 			return \WP_CLI::error( __( 'Can not connect to Optimole service', 'optimole-wp' ) . $extra );

inc/dashboard_widget.php

@@ -114,7 +114,7 @@ private function get_script_localization() {
 			'billingURL' => tsdk_translate_link( 'https://dashboard.optimole.com/settings/billing', 'query' ),
 			'serviceData' => $this->get_service_data(),
 			'assetsURL' => OPTML_URL . 'assets/',
-			'adminPageURL' => esc_url( admin_url( 'admin.php?page=optimole' ) ),
+			'dashboardMetricsURL' => esc_url( 'https://dashboard.optimole.com/metrics' ),
 			'dashboardURL' => esc_url( tsdk_translate_link( 'https://dashboard.optimole.com' ) ),
 		];
 	}

optimole-wp.php

@@ -58,14 +58,12 @@ function optml_php_notice() {
 		<?php
 
 		echo sprintf(
-		/* translators: 1 - opening paragraph tag, 2 - PHP Version, 3 - opening bold tag, 4 - closing bold tag, 5 - opening bold tag, 6 - closing bold tag, 7 - opening anchor tag, 8 - closing anchor tag, 9 - closing paragraph tag */
-			__( '%1$s You\'re using a PHP version lower than %2$s! %3$sOptimole%4$s requires at least %5$sPHP %2$s%6$s to function properly. Plugin has been deactivated. %7$sLearn more here%8$s. %9$s', 'optimole-wp' ),
+		/* translators: 1 - opening paragraph tag, 2 - PHP Version, 3 - opening bold tag, 4 - closing bold tag, 5 - opening anchor tag, 6 - closing anchor tag, 7 - closing paragraph tag */
+			__( '%1$sYou\'re using a PHP version lower than %2$s! %3$sOptimole%4$s requires at least %3$sPHP %2$s%4$s to function properly. Plugin has been deactivated. %5$sLearn more here%6$s. %7$s', 'optimole-wp' ),
 			'<p>',
 			'7.4',
 			'<b>',
 			'</b>',
-			'<b>',
-			'</b>',
 			'<a href="https://themeisle.com/blog/upgrade-wordpress-to-php-7/" target="_blank">',
 			'</a>',
 			'</p>'

package.json

@@ -45,7 +45,8 @@
     "release": "semantic-release --debug",
     "e2e:open": "playwright test --ui",
     "e2e:run": "playwright test",
-    "dist": "./bin/dist.sh"
+    "dist": "./bin/dist.sh",
+    "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'"
   },
   "devDependencies": {
     "@playwright/test": "^1.50.1",

readme.txt

@@ -70,8 +70,7 @@ Optimize your entire media library with a single click. Optimole processes your
 
 #### 🚀 One-Click Image Offloading [PRO]
 
-Free up valuable server space by offloading your entire media library to Optimole's secure cloud storage. All your images are safely stored and delivered from our optimized CDN, reducing your hosting costs and server load. Need your images back on your server? Our seamless one-click restoration process makes it easy to transfer everything back 
-whenever you want, giving you complete flexibility and control over your media assets.
+Free up valuable server space by offloading your entire media library to Optimole's secure cloud storage. All your images are safely stored and delivered from our optimized CDN, reducing your hosting costs and server load. Need your images back on your server? Our seamless one-click restoration process makes it easy to transfer everything back whenever you want, giving you complete flexibility and control over your media assets.
 
 #### 🌎 CDN
 
@@ -260,12 +259,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.
+1. In your WordPress Dashboard, 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, 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 ==
 
@@ -305,7 +304,7 @@ We use your original images as sources when deliver the optimized images. Unless
 
 A higher compression might result in a small loss of image quality. Selecting the auto level will let Optimole choose the minimum size with no loss in the quality of your picture.
 
-= I used Kraken, Shortpixel, Optimus, EWWW or WP Smush, Imagify will Optimole further optimize my images? =
+= I used Kraken, Shortpixel, Optimus, EWWW or WP Smush, Imagify. Will Optimole further optimize my images? =
 
 Yes, Optimole will also take care of serving your image at the RIGHT size for your visitors and optimize them to the best possible format for their browser.