diff --git a/.config/webpack.config.dev.js b/.config/webpack.config.dev.js index df5aec2f1..ce82a4977 100644 --- a/.config/webpack.config.dev.js +++ b/.config/webpack.config.dev.js @@ -181,6 +181,7 @@ module.exports = [ 'frontend_block_progress_bar': path.resolve( __dirname, '../src/block/progress-bar/frontend-progress-bar.js' ), 'frontend_block_horizontal_scroller': path.resolve( __dirname, '../src/block/horizontal-scroller/frontend-horizontal-scroller.js' ), 'frontend_block_tabs': path.resolve( __dirname, '../src/block/tabs/frontend-tabs.js' ), + 'frontend_image_optimizer_polyfill': path.resolve( __dirname, '../src/block-components/image/image-optimizer-polyfill.js' ), }, output: { diff --git a/.config/webpack.config.prod.js b/.config/webpack.config.prod.js index b21ea2f0f..c558abd25 100644 --- a/.config/webpack.config.prod.js +++ b/.config/webpack.config.prod.js @@ -166,6 +166,7 @@ module.exports = [ 'frontend_block_progress_bar': path.resolve( __dirname, '../src/block/progress-bar/frontend-progress-bar.js' ), 'frontend_block_horizontal_scroller': path.resolve( __dirname, '../src/block/horizontal-scroller/frontend-horizontal-scroller.js' ), 'frontend_block_tabs': path.resolve( __dirname, '../src/block/tabs/frontend-tabs.js' ), + 'frontend_image_optimizer_polyfill': path.resolve( __dirname, '../src/block-components/image/image-optimizer-polyfill.js' ), }, output: { diff --git a/plugin.php b/plugin.php index 3e8cae54c..50e49cf9e 100644 --- a/plugin.php +++ b/plugin.php @@ -252,6 +252,7 @@ function is_frontend() { require_once( plugin_dir_path( __FILE__ ) . 'src/block/columns/index.php' ); require_once( plugin_dir_path( __FILE__ ) . 'src/block/timeline/index.php' ); require_once( plugin_dir_path( __FILE__ ) . 'src/block/icon-label/deprecated.php' ); + require_once( plugin_dir_path( __FILE__ ) . 'src/block-components/image/index.php' ); } /** diff --git a/src/block-components/image/image-optimizer-polyfill.js b/src/block-components/image/image-optimizer-polyfill.js new file mode 100644 index 000000000..2c6862bb0 --- /dev/null +++ b/src/block-components/image/image-optimizer-polyfill.js @@ -0,0 +1,42 @@ +/** + * WordPress dependencies + */ +import domReady from '@wordpress/dom-ready' + +class ImageOptimizerPolyfill { + /** + * This script is loaded when EWWW Image Optimizer plugin is activated + * If Easy IO setting is activated for EWWW Image Optimizer plugin, dynamic images becomes blurry. + * This script fixes the issue by removing the &fit parameter from the srcset and src attributes + */ + 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 ) + } + } ) + } +} + +window.ImageOptimizerPolyfill = new ImageOptimizerPolyfill() +domReady( window.ImageOptimizerPolyfill.init ) diff --git a/src/block-components/image/index.php b/src/block-components/image/index.php new file mode 100644 index 000000000..05a02f705 --- /dev/null +++ b/src/block-components/image/index.php @@ -0,0 +1,30 @@ +