fix: force all the image in the horizontal scroller to load immediate… (#3672)

* fix: force all the image in the horizontal scroller to load immediately for height calculation

* fix: also remove lazy loading on carousel images

* fix: remove stackable_enable_carousel_lazy_loading setting

Author: Arukuen

src/block/carousel/frontend-carousel.js

@@ -44,6 +44,13 @@ class _StackableCarousel {
 		this.liveregion.setAttribute( 'class', 'liveregion stk--hidden' )
 		this.wrapper.appendChild( this.liveregion )
 
+		// Get all images and set loading to eager to make the browser
+		// calculate the grid height correctly
+		const images = this.el.querySelectorAll( 'img' )
+		images.forEach( image => {
+			image.loading = 'eager'
+		} )
+
 		this.fixChildrenAccessibility() // This needs to be first before infinte scrolling clones slides.
 		this.initProperties()
 	}

src/block/carousel/index.php

@@ -19,53 +19,3 @@ function stackable_load_carousel_frontend_script() {
 	}
 	add_action( 'stackable/carousel/enqueue_scripts', 'stackable_load_carousel_frontend_script' );
 }
-
-if ( ! get_option( 'stackable_enable_carousel_lazy_loading' ) && get_option( 'stackable_enable_carousel_lazy_loading' ) !== false ) {
-	// Lazy loaded images inside carousels make the carousel height buggy and show extra
-	// spaces because the height isn't available in lazy loaded images. Prevent images from
-	// hidden slides from lazy loading to prevent this.
-	if ( ! function_exists( 'stackable_carousel_add_class_images' ) ) {
-		function stackable_carousel_add_class_images( $block_content, $block ) {
-			if ( ! class_exists( 'WP_HTML_Tag_Processor' ) ) {
-				return $block_content;
-			}
-
-			$index = 1;
-			$slides_to_show = 1;
-
-			if ( ! empty( $block ) && isset( $block['attrs'] ) && is_array( $block['attrs'] ) ) {
-				if ( isset( $block['attrs']['slidesToShow'] ) ) {
-					$slides_to_show = $block['attrs']['slidesToShow'];
-				}
-			}
-
-			$html_tag = new WP_HTML_Tag_Processor( $block_content );
-
-			while ( $html_tag->next_tag( 'img' ) ) {
-				$img_classname = $html_tag->get_attribute( 'class' );
-
-				// add for images that are not immediately shown
-				if ( strpos( $img_classname, 'stk-img') !== false && $index > $slides_to_show ) {
-					$html_tag->add_class( 'stk-img-carousel' );
-				}
-				$index++;
-			}
-
-			return $html_tag->get_updated_html();
-		}
-
-		add_filter( 'render_block_stackable/carousel', 'stackable_carousel_add_class_images', 1, 2 );
-	}
-
-	if ( ! function_exists( 'stackable_skip_loading_lazy_carousel_image' ) ) {
-		function stackable_skip_loading_lazy_carousel_image( $value, $image ) {
-			if ( ! strpos( $image, 'stk-img-carousel' ) === false ) {
-				return false;
-			}
-
-			return $value;
-		}
-
-		add_filter( 'wp_img_tag_add_loading_attr', 'stackable_skip_loading_lazy_carousel_image', 10, 2 );
-	}
-}

src/block/horizontal-scroller/frontend-horizontal-scroller.js

@@ -17,10 +17,12 @@ class StackableHorizontalScroller {
 			// get all links, because we will need to disable them during drag
 			const children = el.querySelectorAll( '.stk-block-link, a' )
 
-			// Get all images and set draggable to false
+			// Get all images, set draggable to false
+			// and loading to eager to make the browser calculate the grid height correctly
 			const images = el.querySelectorAll( 'img' )
 			images.forEach( image => {
 				image.draggable = false
+				image.loading = 'eager'
 			} )
 
 			// prevents redirecting to the inner column link

src/block/horizontal-scroller/index.php

@@ -20,41 +20,3 @@ function stackable_load_horizontalscroller_frontend_script() {
 	add_action( 'stackable/horizontal-scroller/enqueue_scripts', 'stackable_load_horizontalscroller_frontend_script' );
 }
 
-if ( ! get_option( 'stackable_enable_carousel_lazy_loading' ) && get_option( 'stackable_enable_carousel_lazy_loading' ) !== false ) {
-	// Lazy loaded images inside horizontal scroller make the horizontal scroller height buggy and show extra
-	// spaces because the height isn't available in lazy loaded images. Prevent images from
-	// hidden slides from lazy loading to prevent this.
-	if ( ! function_exists( 'stackable_horizontal_scroller_add_class_images' ) ) {
-		function stackable_horizontal_scroller_add_class_images( $block_content, $block ) {
-			if ( ! class_exists( 'WP_HTML_Tag_Processor' ) ) {
-				return $block_content;
-			}
-
-			$html_tag = new WP_HTML_Tag_Processor( $block_content );
-
-			while ( $html_tag->next_tag( 'img' ) ) {
-				$img_classname = $html_tag->get_attribute( 'class' );
-
-				if ( strpos( $img_classname, 'stk-img') !== false ) {
-					$html_tag->add_class( 'stk-img-horizontal-scroller' );
-				}
-			}
-
-			return $html_tag->get_updated_html();
-		}
-
-		add_filter( 'render_block_stackable/horizontal-scroller', 'stackable_horizontal_scroller_add_class_images', 1, 2 );
-	}
-
-	if ( ! function_exists( 'stackable_skip_loading_lazy_horizontal_scroller_image' ) ) {
-		function stackable_skip_loading_lazy_horizontal_scroller_image( $value, $image ) {
-			if ( ! strpos( $image, 'stk-img-horizontal-scroller' ) === false ) {
-				return false;
-			}
-
-			return $value;
-		}
-
-		add_filter( 'wp_img_tag_add_loading_attr', 'stackable_skip_loading_lazy_horizontal_scroller_image', 10, 2 );
-	}
-}

src/editor-settings.php

@@ -170,18 +170,6 @@ public function register_settings() {
 				)
 			);
 
-			register_setting(
-				'stackable_editor_settings',
-				'stackable_enable_carousel_lazy_loading',
-				array(
-					'type' => 'boolean',
-					'description' => __( 'Disables image lazy loading when using images inside carousel-type blocks to prevent space or layout issues .', STACKABLE_I18N ),
-					'sanitize_callback' => 'sanitize_text_field',
-					'show_in_rest' => true,
-					'default' => true,
-				)
-			);
-
 			register_setting(
 				'stackable_editor_settings',
 				'stackable_enable_text_highlight',
@@ -273,7 +261,6 @@ public function add_settings( $settings ) {
 			$settings['stackable_auto_collapse_panels'] = get_option( 'stackable_auto_collapse_panels' );
 			$settings['stackable_enable_global_settings'] = get_option( 'stackable_enable_global_settings' );
 			$settings['stackable_enable_block_linking'] = get_option( 'stackable_enable_block_linking' );
-			$settings['stackable_enable_carousel_lazy_loading'] = get_option( 'stackable_enable_carousel_lazy_loading' );
 			$settings['stackable_enable_text_highlight'] = get_option( 'stackable_enable_text_highlight' );
 			$settings['stackable_enable_dynamic_content'] = get_option( 'stackable_enable_dynamic_content' );
 			$settings['stackable_enable_copy_paste_styles'] = get_option( 'stackable_enable_copy_paste_styles' );

src/welcome/admin.js

@@ -145,7 +145,6 @@ const SEARCH_TREE = [
 				id: 'optimizations',
 				children: [
 					__( 'Optimize Inline CSS', i18n ),
-					__( 'Lazy Load Images within Carousels', i18n ),
 				],
 			},
 		],
@@ -1178,15 +1177,6 @@ const Optimizations = props => {
 								} }
 								help={ __( 'Optimize inlined CSS styles. If this is enabled, similar selectors will be combined together, helpful if you changed Block Defaults.', i18n ) }
 							/>
-							<AdminToggleSetting
-								label={ __( 'Lazy Load Images within Carousels', i18n ) }
-								searchedSettings={ optimizations.children }
-								value={ settings.stackable_enable_carousel_lazy_loading }
-								onChange={ value => {
-									handleSettingsChange( { stackable_enable_carousel_lazy_loading: value } ) // eslint-disable-line camelcase
-								} }
-								help={ __( 'Disable this if you encounter layout or spacing issues when using images inside carousel-type blocks because of image lazy loading.', i18n ) }
-							/>
 						</div>
 					}
 				</>