Merge pull request #529 from Codeinwp/fix/issue-755

Add Otter lazy-load selectors

Author: selul

cypress/e2e/test_otter_background_lazyload.js

@@ -0,0 +1,69 @@
+describe("Check Otter Background Lazyload", function () {
+    it("successfully loads", function () {
+      cy.visit("/otter/background-lazyload/");
+    });
+
+    it("Otter Flip block front should have background lazyloaded", function () {
+      cy.get(".wp-block-themeisle-blocks-flip")
+        .find(".o-flip-front")
+        .eq(0)
+        .should("have.attr", "class")
+        .and("include", "optml-bg-lazyloaded");
+    });
+
+    it("Otter Flip block front should have background image url optimized (ie. external css is processed)", function () {
+        cy.get(".wp-block-themeisle-blocks-flip")
+        .find(".o-flip-front")
+        .eq(0)
+        .should("have.css", "background-image")
+        .and("match", /url\(.*\.i\.optimole\.com.*\)/);
+    });
+
+    it("Otter Flip block back should have background lazyloaded", function () {
+      cy.get(".wp-block-themeisle-blocks-flip")
+        .find(".o-flip-back")
+        .eq(0)
+        .should("have.attr", "class")
+        .and("include", "optml-bg-lazyloaded");
+    });
+
+    it("Otter Flip block back should have background image url optimized (ie. external css is processed)", function () {
+        cy.get(".wp-block-themeisle-blocks-flip")
+        .find(".o-flip-back")
+        .eq(0)
+        .should("have.css", "background-image")
+        .and("match", /url\(.*\.i\.optimole\.com.*\)/);
+    });
+
+    it("Otter Section Block should have background lazyloaded", function () {
+      cy.scrollTo( 0, 500 );
+      cy.get("#wp-block-themeisle-blocks-advanced-columns-e62611eb")
+        .eq(0)
+        .should("have.attr", "class")
+        .and("include", "optml-bg-lazyloaded");
+    });
+
+    it("Otter Section Block should have background image url optimized (ie. external css is processed)", function () {
+        cy.get("#wp-block-themeisle-blocks-advanced-columns-e62611eb")
+        .eq(0)
+        .should("have.css", "background-image")
+        .and("match", /url\(.*\.i\.optimole\.com.*\)/);
+    });
+
+    it("Otter Section Block's Overlay should have background lazyloaded", function () {
+        cy.get("#wp-block-themeisle-blocks-advanced-columns-e62611eb")
+        .find(".wp-block-themeisle-blocks-advanced-columns-overlay")
+        .eq(0)
+        .should("have.attr", "class")
+        .and("include", "optml-bg-lazyloaded");
+    });
+
+    it("Otter Section Block's Overlay should have background image url optimized (ie. external css is processed)", function () {
+        cy.get("#wp-block-themeisle-blocks-advanced-columns-e62611eb")
+        .find(".wp-block-themeisle-blocks-advanced-columns-overlay")
+        .eq(0)
+        .should("have.css", "background-image")
+        .and("match", /url\(.*\.i\.optimole\.com.*\)/);
+    });
+  });
+  

inc/compatibilities/otter_blocks.php

@@ -0,0 +1,44 @@
+<?php
+
+/**
+ * Class Optml_otter_blocks.
+ *
+ * @reason Adding selectors for background lazyload
+ */
+class Optml_otter_blocks extends Optml_compatibility {
+
+
+	/**
+	 * Should we load the integration logic.
+	 *
+	 * @return bool Should we load.
+	 */
+	function should_load() {
+		include_once( ABSPATH . 'wp-admin/includes/plugin.php' );
+
+		return is_plugin_active( 'otter-blocks/otter-blocks.php' );
+	}
+
+	/**
+	 * Register integration details.
+	 */
+	public function register() {
+		add_filter(
+			'optml_lazyload_bg_selectors',
+			function ( $all_watchers ) {
+				$all_watchers[] = '.o-flip-front';
+				$all_watchers[] = '.o-flip-back';
+				$all_watchers[] = '.wp-block-themeisle-blocks-advanced-columns';
+				$all_watchers[] = '.wp-block-themeisle-blocks-advanced-columns-overlay';
+				$all_watchers[] = '.wp-block-themeisle-blocks-advanced-column';
+				$all_watchers[] = '.wp-block-themeisle-blocks-advanced-column-overlay';
+
+				return $all_watchers;
+			}
+		);
+
+		// Replace the image URL with the optimized one in Otter-generated CSS.
+		add_filter( 'otter_apply_dynamic_image', [ Optml_Main::instance()->manager->url_replacer, 'build_url' ], 99 );
+	}
+
+}

inc/manager.php

@@ -83,6 +83,7 @@ final class Optml_Manager {
 		'wp_bakery',
 		'elementor_builder_late',
 		'wpml',
+		'otter_blocks',
 	];
 	/**
 	 * The current state of the buffer.