fix (EWWW compatibility): use MO in polyfill and plugins_loaded (#3405)

Author: kaeizen

src/block-components/image/image-optimizer-polyfill.js

@@ -11,29 +11,41 @@ class ImageOptimizerPolyfill {
 	 */
 	init = () => {
 		const imgs = document.querySelectorAll( '.stk-block img' )
-		imgs.forEach( img => {
-			if ( img.hasAttribute( 'srcset' ) ) {
-				let srcset = img.getAttribute( 'srcset' )
-				const pattern = /https?:\/\/[^\s,]+/g
-				const urls = srcset.match( pattern )
-
-				urls.forEach( url => {
-					const index = url.indexOf( '&fit' )
-					if ( index !== -1 ) {
-						const newUrl = url.slice( 0, index )
-						srcset = srcset.replace( url, newUrl )
-					}
-				} )
-
-				img.setAttribute( 'srcset', srcset )
-			}
-
-			if ( img.getAttribute( 'src' ).indexOf( '&fit' ) !== -1 ) {
-				const src = img.getAttribute( 'src' )
-				const index = src.indexOf( '&fit' )
-				const newSrc = src.slice( 0, index )
-				img.setAttribute( 'src', newSrc )
-			}
+
+		// Use Mutation Observer because the src and/or srcset attributes may change if using dynamic content
+		const MO = new MutationObserver( mutations => {
+			mutations.forEach( mutation => {
+				const img = mutation.target
+
+				if ( img.hasAttribute( 'srcset' ) ) {
+					let srcset = img.getAttribute( 'srcset' )
+					const pattern = /https?:\/\/[^\s,]+/g
+					const urls = srcset.match( pattern )
+
+					urls.forEach( url => {
+						const index = url.indexOf( '&fit' )
+						if ( index !== -1 ) {
+							const newUrl = url.slice( 0, index )
+							srcset = srcset.replace( url, newUrl )
+						}
+					} )
+
+					img.setAttribute( 'srcset', srcset )
+				}
+
+				if ( img.getAttribute( 'src' ).indexOf( '&fit' ) !== -1 ) {
+					const src = img.getAttribute( 'src' )
+					const index = src.indexOf( '&fit' )
+					const newSrc = src.slice( 0, index )
+					img.setAttribute( 'src', newSrc )
+				}
+			} )
+		} )
+
+		imgs.forEach( image => {
+			MO.observe( image, {
+				attributeFilter: [ 'src', 'srcset' ],
+			} )
 		} )
 	}
 }

src/block-components/image/index.php

@@ -23,8 +23,15 @@ function stackable_load_image_optimizer_polyfill_frontend_script( $block_content
 		}
 	}
 
-	if ( ! is_admin() && defined( 'EWWW_IMAGE_OPTIMIZER_PLUGIN_FILE' )) {
-		// Load the script in the frontend if EWWW Image Optimizer is active.
-		add_action( 'stackable/enqueue_scripts', 'stackable_load_image_optimizer_polyfill_frontend_script', 10, 2 );
+	function stackable_ewww_image_optimzer_plugin_checker() {
+		if ( ! is_admin() && defined( 'EWWW_IMAGE_OPTIMIZER_PLUGIN_FILE' ) ) {
+			// Load the script in the frontend if EWWW Image Optimizer is active.
+			add_action( 'stackable/enqueue_scripts', 'stackable_load_image_optimizer_polyfill_frontend_script', 10, 2 );
+		}
 	}
+
+	// Run the plugin checker after all plugins are loaded because
+	// the condition defined( 'EWWW_IMAGE_OPTIMIZER_PLUGIN_FILE' ) may return false
+	// even if the plugin is actually activated
+	add_action( 'plugins_loaded', 'stackable_ewww_image_optimzer_plugin_checker' );
 }