fix: small tweaks for Lazy Load tab (#986)

Author: Soare-Robert-Daniel

assets/src/dashboard/parts/components/GroupSettingsContainer.js

@@ -18,7 +18,7 @@ export const GroupSettingsTitle = ({ children, className = '' }) => {
 
 export const GroupSettingsOption = ({ children, className = '' }) => {
 	return (
-		<div className={classNames( 'text-sm text-gray-600 px-4 py-2 bg-white flex items-center rounded', className )}>
+		<div className={classNames( 'text-sm text-gray-600 px-4 py-2 bg-white flex flex-wrap items-center rounded', className )}>
 			{ children }
 		</div>
 	);

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

@@ -15,7 +15,8 @@ import {
 	ColorIndicator,
 	Button,
 	Popover,
-	CheckboxControl
+	CheckboxControl,
+	Tooltip
 } from '@wordpress/components';
 import { sprintf } from '@wordpress/i18n';
 
@@ -39,6 +40,7 @@ import {
 	DescriptionWithTags,
 	TextWithWarningBadge
 } from '../../components/Miscellaneous';
+import { Icon, help } from '@wordpress/icons';
 
 const { options_strings } = optimoleDashboardApp.strings;
 
@@ -150,19 +152,20 @@ const Lazyload = ({ settings, setSettings, setCanSave }) => {
 
 	const toggleLoadingBehavior = useCallback(
 		( value, slug ) => {
-			const setting = new Set(
+			const lazyLoadValue = new Set(
 				( settings?.lazyload_type ?? '' )
 					?.split( '|' )
 					.filter( ( i ) => 'viewport' === i || 'fixed' === i ) ?? []
 			);
 			if ( value ) {
-				setting.add( slug );
+				lazyLoadValue.add( slug );
 			} else {
-				setting.delete( slug );
+				lazyLoadValue.delete( slug );
 			}
-			updateValue( 'lazyload_type', Array.from( setting ).toSorted().join( '|' ) );
+			const updatedValue = Array.from( lazyLoadValue ).toSorted().join( '|' ) || 'all';
+			updateValue( 'lazyload_type', updatedValue );
 		},
-		[ settings?.lazyload_type ]
+		[ settings?.lazyload_type, updateValue ]
 	);
 
 	if ( ! isLazyLoadEnabled ) {
@@ -325,6 +328,7 @@ const Lazyload = ({ settings, setSettings, setCanSave }) => {
 									onChange={( value ) =>
 										updateValue( 'skip_lazyload_images', value )
 									}
+									disabled={! isFixedSkipLazyEnabled}
 									__nextHasNoMarginBottom={true}
 								/>
 							</div>
@@ -354,7 +358,8 @@ const Lazyload = ({ settings, setSettings, setCanSave }) => {
 							{options_strings.visual_settings}
 						</GroupSettingsTitle>
 						<GroupSettingsOption>
-							<div className="grow" htmlFor="optml-lazyload-placeholder">
+
+							<div className="grow flex flex-row gap-1" htmlFor="optml-lazyload-placeholder">
 								<CheckboxControl
 									label={options_strings.enable_lazyload_placeholder_title}
 									checked={isLazyLoadPlaceholderEnabled}
@@ -364,8 +369,21 @@ const Lazyload = ({ settings, setSettings, setCanSave }) => {
 									disabled={isLoading}
 									__nextHasNoMarginBottom={true}
 								/>
+								<Tooltip
+									text={<p
+										className=""
+										dangerouslySetInnerHTML={{
+											__html: options_strings.enable_lazyload_placeholder_desc
+										}}
+									/>}
+								>
+									<Icon
+										icon={ help }
+										size={ 18 }
+										className="text-gray-400 hover:text-gray-600"
+									/>
+								</Tooltip>
 							</div>
-
 							{isLazyLoadPlaceholderEnabled && (
 								<div className="relative inline-block">
 									<Button

inc/admin.php

@@ -1354,11 +1354,6 @@ private function localize_dashboard_app() {
 		$lang_code = isset( $available_languages[ $language ] ) ? 'de' : 'en';
 
 		$site_settings = $this->settings->get_site_settings();
-		// Migrate settings if needed.
-		if ( isset( $site_settings['lazyload_type'] ) && 'all' === $site_settings['lazyload_type'] ) {
-			$site_settings['lazyload_type']        = 'fixed';
-			$site_settings['skip_lazyload_images'] = 0;
-		}
 
 		return [
 			'strings'                    => $this->get_dashboard_strings(),
@@ -1827,7 +1822,12 @@ private function get_dashboard_strings() {
 					'<a class="inline-block text-purple-gray underline" target=”_blank” href="https://docs.optimole.com/article/1943-avif-conversion">',
 					'</a>'
 				),
-				'enable_bg_lazyload_desc'             => __( 'Apply lazy loading to CSS background images. The toggle below enables it globally. The selector list is optional and only needed to extend coverage if certain elements are missed.', 'optimole-wp' ),
+				'enable_bg_lazyload_desc'             => sprintf(
+				/* translators: 1 is the starting anchor tag, 2 is the ending anchor tag */
+					__( 'Apply lazy loading to CSS background images. The toggle below enables it globally. The selector list is optional and only needed to extend coverage if certain elements are missed. %1$sLearn more%2$s', 'optimole-wp' ),
+					'<a class="inline-block text-purple-gray underline" target="_blank" href="https://docs.optimole.com/article/1169-how-to-enable-the-background-lazyload-feature-for-certain-background-images">',
+					'</a>'
+				),
 				'enable_bg_lazyload_title'            => __( 'CSS Background Lazy Load', 'optimole-wp' ),
 				'enable_video_lazyload_desc'          => __( 'Lazy load embedded videos and iframe content', 'optimole-wp' ),
 				'enable_video_lazyload_title'         => __( 'Video & iframes', 'optimole-wp' ),
@@ -1852,8 +1852,8 @@ private function get_dashboard_strings() {
 				'enable_image_replace'                => __( 'Enable Optimole Image Handling', 'optimole-wp' ),
 				'enable_lazyload_placeholder_desc'    => sprintf(
 				/* translators: 1 is the starting anchor tag, 2 is the ending anchor tag */
-					__( 'Enable this to use a generic transparent placeholder instead of the blurry images during lazy loading. Enhance the visual experience by selecting a custom color for the placeholder. %1$sLearn more%2$s', 'optimole-wp' ),
-					'<a class="inline-block text-purple-gray underline" target=”_blank” href="https://docs.optimole.com/article/1192-lazy-load-generic-placeholder">',
+					__( 'Enable this to use a generic transparent placeholder instead of the blurry images during lazy loading. %1$sLearn more%2$s', 'optimole-wp' ),
+					'<a class="inline-block underline text-white" target=”_blank” href="https://docs.optimole.com/article/1192-lazy-load-generic-placeholder">',
 					'</a>'
 				),
 
@@ -1866,7 +1866,7 @@ private function get_dashboard_strings() {
 				),
 				'lazyload_behaviour_all'             => __( 'Lazy Load All Images', 'optimole-wp' ),
 				'lazyload_behaviour_all_desc'        => __( 'All images will use lazy loading regardless of position.', 'optimole-wp' ),
-				'lazyload_behaviour_viewport'          => __( 'Enable viewport-based loading', 'optimole-wp' ),
+				'lazyload_behaviour_viewport'          => __( 'Skip images above the fold', 'optimole-wp' ),
 				'lazyload_behaviour_viewport_desc'   => __( 'Automatically detects and immediately loads images visible in the initial viewport. Detection is done with a lightweight client-side script that identifies what\'s visible on each user\'s screen. All other images will lazy load.', 'optimole-wp' ),
 				'lazyload_behaviour_fixed'           => __( 'Skip lazy loading for first images', 'optimole-wp' ),
 				'lazyload_behaviour_fixed_desc'      => __( 'Indicate how many images at the top of each page should bypass lazy loading, ensuring they\'re instantly visible.', 'optimole-wp' ),
@@ -1988,7 +1988,7 @@ private function get_dashboard_strings() {
 				'low_q_title'                         => __( 'Low', 'optimole-wp' ),
 				'medium_q_title'                      => __( 'Medium', 'optimole-wp' ),
 				'no_images_found'                     => __( 'You dont have any images in your Media Library. Add one and check how the Optimole will perform.', 'optimole-wp' ),
-				'native_desc'                         => __( 'Uses the browser\'s build-in "lazy" behavior', 'optimole-wp' ),
+				'native_desc'                         => __( 'Uses the browser\'s built-in lazy loading feature. Enabling this will disable the auto scale.', 'optimole-wp' ),
 				'option_saved'                        => __( 'Option saved.', 'optimole-wp' ),
 				'ml_quality_desc'                     => sprintf( /* translators: 1 is the starting anchor tag, 2 is the ending anchor tag */ __( 'Optimole ML algorithms will predict the optimal image quality to get the smallest possible size with minimum perceived quality losses. When disabled, you can control the quality manually. %1$sLearn more%2$s', 'optimole-wp' ), '<a class="inline-block text-purple-gray underline" target=”_blank” href="https://docs.optimole.com/article/1016-what-is-the-difference-between-the-auto-high-medium-low-compression-levels">', '</a>' ),
 				'quality_desc'                        => __( 'Lower image quality might boost your loading speed by lowering the size. However, the low image quality may negatively impact the visual appearance of the images. Try experimenting with the setting, then click the View sample image link to see what option works best for you.', 'optimole-wp' ),
@@ -2115,7 +2115,7 @@ private function get_dashboard_strings() {
 				// translators: This option is discouraged from being used.
 				'not_recommended'                           => __( 'Not recommended', 'optimole-wp' ),
 				// translators: %1$s is the starting bold tag, %2$s is the ending bold tag.
-				'viewport_skip_images_notice'               => sprintf( __( 'When %1$sviewport-based loading%2$s and %1$sskip first images%2$s are both enabled: the skip rule applies on a user\'s first page view. On subsequent views, once viewport data exists, the skip rule is ignored in favor of the viewport data.', 'optimole-wp' ), '<strong>', '</strong>' ),
+				'viewport_skip_images_notice'               => sprintf( __( 'When %1$sskip above the fold%2$s and %1$sskip first images%2$s are both enabled: the skip rule applies on a user\'s first page view. On subsequent views, once viewport data exists, the skip rule is ignored in favor of the viewport data.', 'optimole-wp' ), '<strong>', '</strong>' ),
 				// translators: %1$s is the starting bold tag, %2$s is the ending bold tag.
 				'native_lazy_load_warning'                  => sprintf( __( 'Native browser loading works with viewport detection, but it does not support smart image scaling. It can offer better cross-browser compatibility. Still, we do %1$snot recommend%2$s it for most sites due to fewer controls and features compared to Smart Loading.', 'optimole-wp' ), '<strong>', '</strong>' ),
 				'performance_impact_alert_title'            => __( 'Performance Impact Alert', 'optimole-wp' ),

inc/lazyload_replacer.php

@@ -171,6 +171,7 @@ public static function get_skip_lazyload_limit() {
 		if ( self::$skip_lazyload_images !== null ) {
 			return self::$skip_lazyload_images;
 		}
+
 		self::$skip_lazyload_images = apply_filters( 'optml_lazyload_images_skip', self::instance()->settings->get( 'skip_lazyload_images' ) );
 		return self::$skip_lazyload_images;
 	}