Merge pull request #521 from Codeinwp/fixes

Fixes

Author: GrigoreMihai

assets/vue/components/lazyload.vue

@@ -11,12 +11,12 @@
 								<toggle-button :class="'has-text-dark'"
 															 v-model="lazyloadPlaceholder"
 															 :disabled="this.$store.state.loading"
-                               :width="37"
-                               :height="20"
-                               color="#577BF9"></toggle-button>
+															 :width="37"
+															 :height="20"
+															 color="#577BF9"></toggle-button>
 						</div>
 				</div>
-        <hr/>
+				<hr/>
 
 				<div class="field  columns optml-flex-column" >
 					<label class="label column optml-custom-label-margin">
@@ -35,7 +35,7 @@
 					</div>
 
 			</div>
-      <hr/>
+			<hr/>
 				<!--Native lazy toggle-->
 				<div class="field  is-fullwidth columns">
 						<label class="label column has-text-grey-dark optml-custom-label-margin">
@@ -50,12 +50,12 @@
 								<toggle-button :class="'has-text-dark'"
 															 v-model="nativeLazyStatus"
 															 :disabled="this.$store.state.loading"
-                               :width="37"
-                               :height="20"
-                               color="#577BF9"></toggle-button>
+															 :width="37"
+															 :height="20"
+															 color="#577BF9"></toggle-button>
 						</div>
 				</div>
-      <hr/>
+			<hr/>
 				<div class="field  is-fullwidth columns">
 						<label class="label column has-text-grey-dark optml-custom-label-margin">
 								{{strings.toggle_scale}}
@@ -69,12 +69,12 @@
 								<toggle-button :class="'has-text-dark'"
 															 v-model="scaleStatus"
 															 :disabled="this.$store.state.loading"
-                               :width="37"
-                               :height="20"
-                               color="#577BF9"></toggle-button>
+															 :width="37"
+															 :height="20"
+															 color="#577BF9"></toggle-button>
 						</div>
 				</div>
-      <hr/>
+			<hr/>
 				<div class="field columns">
 						<label class="label column has-text-grey-dark optml-custom-label-margin">
 								{{strings.enable_bg_lazyload_title}}
@@ -86,12 +86,12 @@
 								<toggle-button :class="'has-text-dark'"
 															 v-model="lazyloadBgImages"
 															 :disabled="this.$store.state.loading"
-                               :width="37"
-                               :height="20"
-                               color="#577BF9"></toggle-button>
+															 :width="37"
+															 :height="20"
+															 color="#577BF9"></toggle-button>
 						</div>
 				</div>
-      <hr/>
+			<hr/>
 				<!--Video lazyload toggle-->
 				<div class="field columns">
 						<label class="label column has-text-grey-dark optml-custom-label-margin">
@@ -104,12 +104,30 @@
 								<toggle-button :class="'has-text-dark'"
 															 v-model="lazyloadVideo"
 															 :disabled="this.$store.state.loading"
-                               :width="37"
-                               :height="20"
-                               color="#577BF9"></toggle-button>
+															 :width="37"
+															 :height="20"
+															 color="#577BF9"></toggle-button>
 						</div>
 				</div>
-      <hr/>
+			<hr/>
+			<!--Noscript toggle-->
+			<div class="field columns">
+				<label class="label column has-text-grey-dark optml-custom-label-margin">
+					{{strings.enable_noscript_title}}
+					<p class="optml-settings-desc-margin has-text-weight-normal">
+						{{strings.enable_noscript_desc}}
+					</p>
+				</label>
+				<div class="column is-1">
+					<toggle-button :class="'has-text-dark'"
+												 v-model="noscriptToggle"
+												 :disabled="this.$store.state.loading"
+												 :width="37"
+												 :height="20"
+												 color="#577BF9"></toggle-button>
+				</div>
+			</div>
+			<hr/>
 				<div class="field columns" v-if="showBgSelectors">
 						<div class="column">
 								<label class="label has-text-grey-dark optml-custom-label-margin">
@@ -200,6 +218,15 @@
 					return !(this.site_settings.video_lazyload === 'disabled');
 				}
 			},
+			noscriptToggle: {
+				set: function (value) {
+					this.showSave = true;
+					this.new_data.no_script = value ? 'enabled' : 'disabled';
+				},
+				get: function () {
+					return !(this.site_settings.no_script === 'disabled');
+				}
+			},
 			lazyloadSelectors: {
 				set: function ( value ) {
 							this.showSave = true;

inc/admin.php

@@ -38,6 +38,7 @@ public function __construct() {
 			add_action( 'init', [$this, 'check_domain_change'] );
 		}
 		add_action( 'admin_init', [ $this, 'maybe_redirect' ] );
+		add_action( 'admin_init', [ $this, 'init_no_script' ] );
 		if ( ! is_admin() && $this->settings->is_connected() && ! wp_next_scheduled( 'optml_daily_sync' ) ) {
 			wp_schedule_event( time() + 10, 'daily', 'optml_daily_sync', [] );
 		}
@@ -48,6 +49,17 @@ public function __construct() {
 		}
 	}
 
+	/**
+	 * Init no_script setup value based on whether the user is connected or not.
+	 */
+	public function init_no_script() {
+		if ( $this->settings->is_connected() ) {
+			$raw_settings = $this->settings->get_raw_settings();
+			if ( ! isset( $raw_settings['no_script'] ) ) {
+				$this->settings->update( 'no_script', 'enabled' );
+			}
+		}
+	}
 	/**
 	 * Checks if domain has changed
 	 */
@@ -890,6 +902,8 @@ private function get_dashboard_strings() {
 				'enable_bg_lazyload_title'          => __( 'Enable lazyload for background images', 'optimole-wp' ),
 				'enable_video_lazyload_desc'        => __( 'Lazyload iframes/videos', 'optimole-wp' ),
 				'enable_video_lazyload_title'       => __( 'Enable lazyload for embedded videos and iframes.', 'optimole-wp' ),
+				'enable_noscript_desc'              => __( 'The noscript tag offers fallback images for browsers that can\'t handle JavaScript-based lazy loading or related features. Disabling it may resolve conflicts with other plugins or configurations and decrease HTML page size.', 'optimole-wp' ),
+				'enable_noscript_title'             => __( 'Enable noscript tag', 'optimole-wp' ),
 				'enable_gif_replace_title'          => __( 'Enable Gif to Video conversion', 'optimole-wp' ),
 				'enable_report_title'               => __( 'Enable error diagnosis tool', 'optimole-wp' ),
 				'enable_report_desc'                => __( 'Provides a troubleshooting mechanism which should help you identify any possible issues with your site using Optimole.', 'optimole-wp' ),

inc/lazyload_replacer.php

@@ -467,6 +467,9 @@ public function get_svg_for( $width, $height, $url = null ) {
 	 * @return bool Should add?
 	 */
 	public function should_add_noscript( $tag ) {
+		if ( $this->settings->get( 'no_script' ) === 'disabled' ) {
+			return false;
+		}
 		foreach ( self::get_ignore_noscript_flags() as $banned_string ) {
 			if ( strpos( $tag, $banned_string ) !== false ) {
 				return false;

inc/main.php

@@ -23,6 +23,15 @@ final class Optml_Main {
 	 */
 	public $manager;
 
+	/**
+	 * Holds the media_offload class.
+	 *
+	 * @access  public
+	 * @since   1.0.0
+	 * @var  Optml_Media_Offload instance.
+	 */
+	public $media_offload;
+
 	/**
 	 * Holds the rest class.
 	 *

inc/settings.php

@@ -41,6 +41,7 @@ class Optml_Settings {
 	 * @var boolean Whether or not the auto connect action is hooked.
 	 */
 	private static $auto_connect_hooked = false;
+
 	/**
 	 * Default settings schema.
 	 *
@@ -61,9 +62,10 @@ class Optml_Settings {
 		'network_optimization' => 'disabled',
 		'lazyload_placeholder' => 'disabled',
 		'bg_replacer'          => 'enabled',
-		'video_lazyload'       => 'disabled',
+		'video_lazyload'       => 'enabled',
 		'retina_images'        => 'disabled',
 		'resize_smart'         => 'disabled',
+		'no_script'            => 'disabled',
 		'filters'              => [],
 		'cloud_sites'          => [ 'all' => 'true' ],
 		'watchers'             => '',
@@ -105,6 +107,7 @@ class Optml_Settings {
 	 * Optml_Settings constructor.
 	 */
 	public function __construct() {
+
 		$this->namespace      = OPTML_NAMESPACE . '_settings';
 		$this->default_schema = apply_filters( 'optml_default_settings', $this->default_schema );
 		$this->options        = wp_parse_args( get_option( $this->namespace, $this->default_schema ), $this->default_schema );
@@ -240,6 +243,7 @@ public function parse_settings( $new_settings ) {
 				case 'css_minify':
 				case 'js_minify':
 				case 'native_lazyload':
+				case 'no_script':
 					$sanitized_value = $this->to_map_values( $value, [ 'enabled', 'disabled' ], 'enabled' );
 					break;
 				case 'max_width':
@@ -419,6 +423,7 @@ public function get_site_settings() {
 			'bg_replacer'          => $this->get( 'bg_replacer' ),
 			'video_lazyload'       => $this->get( 'video_lazyload' ),
 			'resize_smart'         => $this->get( 'resize_smart' ),
+			'no_script'            => $this->get( 'no_script' ),
 			'image_replacer'       => $this->get( 'image_replacer' ),
 			'cdn'                  => $this->get( 'cdn' ),
 			'max_width'            => $this->get( 'max_width' ),
@@ -596,5 +601,13 @@ public function reset() {
 
 		return $update;
 	}
+	/**
+	 * Get raw settings value.
+	 *
+	 * @return  array
+	 */
+	public function get_raw_settings() {
+		return get_option( $this->namespace, false );
+	}
 
 }

phpcs.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0"?>
 <ruleset name="Optimole">
     <description>Optimole rules for PHP_CodeSnifferr</description>
-
+    <ini name="error_reporting" value="E_ALL &#38; ~E_DEPRECATED" />
     <file>.</file>
 
     <exclude-pattern>node_modules/*</exclude-pattern>

tests/test-lazyload-class-exclusion.php

@@ -27,6 +27,7 @@ public function setUp() : void
 		]);
 
 		$settings->update('lazyload', 'enabled');
+		$settings->update('no_script', 'enabled');
 		$settings->update('filters', array(
 			Optml_Settings::FILTER_TYPE_LAZYLOAD => array (
 			 Optml_Settings::FILTER_CLASS => array (

tests/test-lazyload.php

@@ -36,6 +36,7 @@ public function setUp() : void {
 		$settings->update( 'lazyload', 'enabled' );
 		$settings->update( 'native_lazyload', 'enabled' );
 		$settings->update( 'video_lazyload', 'enabled' );
+		$settings->update( 'no_script', 'enabled' );
 		Optml_Url_Replacer::instance()->init();
 		Optml_Tag_Replacer::instance()->init();
 		Optml_Lazyload_Replacer::instance()->init();

tests/test-media.php

@@ -139,6 +139,7 @@ public function setUp() : void {
 			'whitelist'  => [ 'example.com', 'example.org' ],
 
 		] );
+		$settings->update( 'no_script', 'enabled' );
 		$settings->update( 'lazyload', 'enabled' );
 		$settings->update( 'offload_media', 'enabled' );
 		$settings->update( 'quality', 90 );

tests/test-no-script-disabled.php

@@ -0,0 +1,47 @@
+<?php
+/**
+ * WordPress unit test plugin.
+ *
+ * @package     Optimole-WP
+ * @subpackage  Tests
+ * @copyright   Copyright (c) 2017, ThemeIsle
+ * @license     http://opensource.org/licenses/gpl-2.0.php GNU Public License
+ */
+
+/**
+ * Class Test_Generic.
+ */
+class Test_Lazyload_No_Script extends WP_UnitTestCase
+{
+
+	public function setUp(): void
+	{
+		parent::setUp();
+		$settings = new Optml_Settings();
+		$settings->update('service_data', [
+			'cdn_key' => 'test123',
+			'cdn_secret' => '12345',
+			'whitelist' => ['example.com'],
+
+		]);
+		$settings->update('lazyload', 'enabled');
+		$settings->update('native_lazyload', 'enabled');
+		$settings->update('video_lazyload', 'enabled');
+		$settings->update('no_script', 'disabled');
+		Optml_Url_Replacer::instance()->init();
+		Optml_Tag_Replacer::instance()->init();
+		Optml_Lazyload_Replacer::instance()->init();
+		Optml_Manager::instance()->init();
+	}
+
+	//changing the setting to disabled in a test inside the lazyload class will not work due to test concurrency
+	//moved this to a different test
+	public function test_no_script_disabled()
+	{
+		$text = ' <a href="http://example.org/wp-content/uploads/2018/06/start-a-blog-1-5.png"><img class="alignnone wp-image-36442 size-full" src="http://example.org/wp-content/uploads/2018/06/start-a-blog-1-5.png"  srcset="testsrcset" data-srcset="another" data-plugin-src="http://example.org/wp-content/uploads/2018/06/start-a-blog-1-5.png" alt="How to monetize a blog" width="490" height="256"></a>';
+
+		$replaced_content = Optml_Manager::instance()->replace_content($text);
+
+		$this->assertStringNotContainsString('noscript', $replaced_content);
+	}
+}