diff --git a/src/block/carousel/frontend-carousel.js b/src/block/carousel/frontend-carousel.js index f62577bc2..f84bacc5c 100644 --- a/src/block/carousel/frontend-carousel.js +++ b/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() } diff --git a/src/block/carousel/index.php b/src/block/carousel/index.php index 423430ca3..0e310e693 100644 --- a/src/block/carousel/index.php +++ b/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 ); - } -} diff --git a/src/block/horizontal-scroller/frontend-horizontal-scroller.js b/src/block/horizontal-scroller/frontend-horizontal-scroller.js index 28dec41d3..fb2c2994c 100644 --- a/src/block/horizontal-scroller/frontend-horizontal-scroller.js +++ b/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 diff --git a/src/block/horizontal-scroller/index.php b/src/block/horizontal-scroller/index.php index 93466ed38..cba66ca78 100644 --- a/src/block/horizontal-scroller/index.php +++ b/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 ); - } -} diff --git a/src/editor-settings.php b/src/editor-settings.php index 83e86f664..d37c8d380 100644 --- a/src/editor-settings.php +++ b/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' ); diff --git a/src/welcome/admin.js b/src/welcome/admin.js index 3d83ea5ee..2091a76a8 100644 --- a/src/welcome/admin.js +++ b/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 ) } /> - { - 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 ) } - /> }