From c414e589f759ccdc267f3c593fd993c66f339aca Mon Sep 17 00:00:00 2001 From: Sagar Tamang Date: Tue, 31 Mar 2026 17:03:34 +0545 Subject: [PATCH 01/14] feat: add lazy load images attribute and control to carousel block --- src/blocks/carousel/block.json | 4 ++++ src/blocks/carousel/edit.tsx | 10 ++++++++++ src/blocks/carousel/types.ts | 1 + 3 files changed, 15 insertions(+) diff --git a/src/blocks/carousel/block.json b/src/blocks/carousel/block.json index e0df7ca..6e35024 100644 --- a/src/blocks/carousel/block.json +++ b/src/blocks/carousel/block.json @@ -85,6 +85,10 @@ "slidesToScroll": { "type": "string", "default": "1" + }, + "lazyLoadImages": { + "type": "boolean", + "default": true } }, "editorScript": "file:./index.js", diff --git a/src/blocks/carousel/edit.tsx b/src/blocks/carousel/edit.tsx index 9edf641..a85a010 100644 --- a/src/blocks/carousel/edit.tsx +++ b/src/blocks/carousel/edit.tsx @@ -50,6 +50,7 @@ export default function Edit( { autoplayStopOnMouseEnter, ariaLabel, slidesToScroll = '1', + lazyLoadImages, } = attributes; const [ emblaApi, setEmblaApi ] = useState(); @@ -241,6 +242,15 @@ export default function Edit( { onChange={ ( value ) => setAttributes( { dragFree: value } ) } help={ __( 'Enables momentum scrolling.', 'rt-carousel' ) } /> + setAttributes( { lazyLoadImages: value } ) } + help={ __( + 'Load images only when they enter the viewport.', + 'carousel-kit', + ) } + /> ; From 23b7eaee69fc005c5ea26b3cca60386f9b8077ff Mon Sep 17 00:00:00 2001 From: Sagar Tamang Date: Tue, 31 Mar 2026 17:03:47 +0545 Subject: [PATCH 02/14] feat: add disable lazy load images attribute to carousel slide --- src/blocks/carousel/slide/block.json | 4 ++++ src/blocks/carousel/slide/edit.tsx | 18 +++++++++++++++++- src/blocks/carousel/types.ts | 1 + 3 files changed, 22 insertions(+), 1 deletion(-) diff --git a/src/blocks/carousel/slide/block.json b/src/blocks/carousel/slide/block.json index fd07d6a..afde5e1 100644 --- a/src/blocks/carousel/slide/block.json +++ b/src/blocks/carousel/slide/block.json @@ -14,6 +14,10 @@ "attributes": { "verticalAlignment": { "type": "string" + }, + "disableLazyLoadImages": { + "type": "boolean", + "default": false } }, "usesContext": [ diff --git a/src/blocks/carousel/slide/edit.tsx b/src/blocks/carousel/slide/edit.tsx index dd1a0dc..be5ea21 100644 --- a/src/blocks/carousel/slide/edit.tsx +++ b/src/blocks/carousel/slide/edit.tsx @@ -3,7 +3,10 @@ import { useInnerBlocksProps, BlockControls, BlockVerticalAlignmentToolbar, + InspectorControls, } from '@wordpress/block-editor'; +import { PanelBody, ToggleControl } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; import type { CarouselSlideAttributes } from '../types'; export default function Edit( { @@ -17,7 +20,7 @@ export default function Edit( { } ) { const allowedBlocks = context[ 'rt-carousel/carousel/allowedSlideBlocks' ]; - const { verticalAlignment } = attributes; + const { verticalAlignment, disableLazyLoadImages = false } = attributes; const blockProps = useBlockProps( { className: `embla__slide${ @@ -41,6 +44,19 @@ export default function Edit( { } /> + + + setAttributes( { disableLazyLoadImages: value } ) } + help={ __( + 'Override carousel lazy loading for this slide.', + 'carousel-kit', + ) } + /> + +
); diff --git a/src/blocks/carousel/types.ts b/src/blocks/carousel/types.ts index f1576e6..c9e9a4c 100644 --- a/src/blocks/carousel/types.ts +++ b/src/blocks/carousel/types.ts @@ -24,6 +24,7 @@ export type CarouselAttributes = { export type CarouselViewportAttributes = Record; export type CarouselSlideAttributes = { verticalAlignment?: BlockVerticalAlignmentToolbar.Value; + disableLazyLoadImages?: boolean; }; export type CarouselControlsAttributes = Record; export type CarouselDotsAttributes = Record; From 5d5626818ed39999e1fbce683bae06eed101c336 Mon Sep 17 00:00:00 2001 From: Sagar Tamang Date: Tue, 31 Mar 2026 17:03:56 +0545 Subject: [PATCH 03/14] feat: add lazy load images attribute to carousel attributes tests --- src/blocks/carousel/__tests__/types.test.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/blocks/carousel/__tests__/types.test.ts b/src/blocks/carousel/__tests__/types.test.ts index aed1c05..6a063d7 100644 --- a/src/blocks/carousel/__tests__/types.test.ts +++ b/src/blocks/carousel/__tests__/types.test.ts @@ -33,6 +33,7 @@ describe( 'CarouselAttributes Type', () => { ariaLabel: 'Image carousel', slideGap: 16, slidesToScroll: '1', + lazyLoadImages: true, }; expect( attributes ).toBeDefined(); @@ -58,6 +59,7 @@ describe( 'CarouselAttributes Type', () => { ariaLabel: '', slideGap: 0, slidesToScroll: 'auto', + lazyLoadImages: false, }; // Verify all keys exist From c8ebe4e470d05ee8d4aaf0e1a3c7eed3fa6087eb Mon Sep 17 00:00:00 2001 From: Sagar Tamang Date: Tue, 31 Mar 2026 19:50:00 +0545 Subject: [PATCH 04/14] feat: add lazy load images context to carousel and slide blocks --- src/blocks/carousel/block.json | 5 +++-- src/blocks/carousel/slide/block.json | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/blocks/carousel/block.json b/src/blocks/carousel/block.json index 6e35024..e26fff5 100644 --- a/src/blocks/carousel/block.json +++ b/src/blocks/carousel/block.json @@ -9,7 +9,8 @@ "description": "Carousel container using Embla and Interactivity API.", "textdomain": "rt-carousel", "providesContext": { - "rt-carousel/carousel/allowedSlideBlocks": "allowedSlideBlocks" + "rt-carousel/carousel/allowedSlideBlocks": "allowedSlideBlocks", + "rt-carousel/carousel/lazyLoadImages": "lazyLoadImages" }, "supports": { "interactivity": true, @@ -95,4 +96,4 @@ "editorStyle": "file:./index.css", "style": "file:./style-index.css", "viewScriptModule": "file:./view.js" -} \ No newline at end of file +} diff --git a/src/blocks/carousel/slide/block.json b/src/blocks/carousel/slide/block.json index afde5e1..b655c23 100644 --- a/src/blocks/carousel/slide/block.json +++ b/src/blocks/carousel/slide/block.json @@ -21,7 +21,8 @@ } }, "usesContext": [ - "rt-carousel/carousel/allowedSlideBlocks" + "rt-carousel/carousel/allowedSlideBlocks", + "rt-carousel/carousel/lazyLoadImages" ], "editorScript": "file:./index.js" -} \ No newline at end of file +} From f42c33b90dba387504e16eb49c675a5351440208 Mon Sep 17 00:00:00 2001 From: Sagar Tamang Date: Tue, 31 Mar 2026 19:52:25 +0545 Subject: [PATCH 05/14] feat: implement lazy loading for images in carousel slides --- inc/Plugin.php | 46 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/inc/Plugin.php b/inc/Plugin.php index a296e70..27f2a9a 100644 --- a/inc/Plugin.php +++ b/inc/Plugin.php @@ -10,6 +10,8 @@ namespace Rt_Carousel; use Rt_Carousel\Traits\Singleton; +use WP_Block; +use WP_HTML_Tag_Processor; // Exit if accessed directly. if ( ! defined( 'ABSPATH' ) ) { @@ -41,6 +43,7 @@ protected function setup_hooks(): void { add_action( 'init', [ $this, 'register_block_patterns' ] ); add_action( 'admin_notices', [ $this, 'legacy_plugin_notice' ] ); add_action( 'network_admin_notices', [ $this, 'legacy_plugin_notice' ] ); + add_filter( 'render_block_carousel-kit/carousel-slide', [ $this, 'handle_lazy_load_images' ], 10, 3 ); } /** @@ -260,4 +263,47 @@ private function load_patterns_from_disk(): array { return $data; } + + /** + * Add loading="lazy" to images in carousel slides. + * + * @param string $block_content The block content. + * @param array $parsed_block The parsed block. + * @param WP_Block $instance The block instance. + * + * @return string Modified block content. + */ + public function handle_lazy_load_images( string $block_content, array $parsed_block, ?WP_Block $instance ): string { + // Bail early if the parent block to check lazyLoadImages setting is not set. + if ( ! isset( $instance->context["carousel-kit/carousel/lazyLoadImages"] ) ) { + return $block_content; + } + + $lazy_load = $instance->context["carousel-kit/carousel/lazyLoadImages"]; + + // If lazy loading is disabled, return as-is. + if ( ! $lazy_load ) { + return $block_content; + } + + // Check if this slide has disableLazyLoadImages set. + $slide_attrs = $parsed_block['attrs'] ?? array(); + $disable_lazy = isset( $slide_attrs['disableLazyLoadImages'] ) ? $slide_attrs['disableLazyLoadImages'] : false; + + if ( $disable_lazy ) { + return $block_content; + } + + // Use WP_HTML_Tag_Processor to add loading="lazy" to tags. + $processor = new WP_HTML_Tag_Processor( $block_content ); + + while ( $processor->next_tag( 'img' ) ) { + // Only add if loading attribute is not already set. + if ( null === $processor->get_attribute( 'loading' ) ) { + $processor->set_attribute( 'loading', 'lazy' ); + } + } + + return $processor->get_updated_html(); + } } From 69a0ac6b3ccb1415513924ff992bcaf660eaafb6 Mon Sep 17 00:00:00 2001 From: Sagar Tamang Date: Tue, 31 Mar 2026 20:12:00 +0545 Subject: [PATCH 06/14] docs: add lazyLoadImages attribute to carousel block configuration --- docs/USAGE.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/USAGE.md b/docs/USAGE.md index dce47df..36fa771 100644 --- a/docs/USAGE.md +++ b/docs/USAGE.md @@ -23,6 +23,7 @@ The parent block acts as the controller and wrapper. It handles configuration, s | `axis` | string | `'x'` | Carousel axis direction (`'x'` for horizontal, `'y'` for vertical). | | `direction` | string | `'ltr'` | Carousel item direction: `'ltr'` (left-to-right) or `'rtl'` (right-to-left). | | `slidesToScroll` | number | `1` | Number of slides to scroll per navigation action. | +| `lazyLoadImages` | boolean | `true` | Lazy load images in the slides. | --- From 2cc106d35bfe114fe77dddf01fc197d2d629765e Mon Sep 17 00:00:00 2001 From: Sagar Tamang Date: Tue, 31 Mar 2026 20:19:02 +0545 Subject: [PATCH 07/14] docs: enhance lazyLoadImages attribute description and add disableLazyLoadImages for slides --- docs/USAGE.md | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/docs/USAGE.md b/docs/USAGE.md index 36fa771..d89fe4b 100644 --- a/docs/USAGE.md +++ b/docs/USAGE.md @@ -23,7 +23,18 @@ The parent block acts as the controller and wrapper. It handles configuration, s | `axis` | string | `'x'` | Carousel axis direction (`'x'` for horizontal, `'y'` for vertical). | | `direction` | string | `'ltr'` | Carousel item direction: `'ltr'` (left-to-right) or `'rtl'` (right-to-left). | | `slidesToScroll` | number | `1` | Number of slides to scroll per navigation action. | -| `lazyLoadImages` | boolean | `true` | Lazy load images in the slides. | +| `lazyLoadImages` | boolean | `true` | Enable lazy loading for slide images. Individual slides can override this setting. | + +--- + +### Child Block: `carousel-kit/carousel-slide` +The child block that serves as a container for individual slide content. Each slide can display custom blocks as defined by the parent's `allowedSlideBlocks` configuration. + +#### Attributes + +| Attribute | Type | Default | Description | +| :-------------------------- | :------ | :------------ | :------------------------------------------ | +| `disableLazyLoadImages` | boolean | `false` | Override parent's `lazyLoadImages` setting for this slide only. | --- From 95c1f8f1a3434303d47f7c8d1e34dddb5156a0eb Mon Sep 17 00:00:00 2001 From: Sagar Tamang Date: Tue, 31 Mar 2026 20:35:45 +0545 Subject: [PATCH 08/14] docs: update lazyLoadImages and disableLazyLoadImages descriptions in usage guide and edit component --- docs/USAGE.md | 4 ++-- src/blocks/carousel/slide/edit.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/USAGE.md b/docs/USAGE.md index d89fe4b..a0327a7 100644 --- a/docs/USAGE.md +++ b/docs/USAGE.md @@ -23,7 +23,7 @@ The parent block acts as the controller and wrapper. It handles configuration, s | `axis` | string | `'x'` | Carousel axis direction (`'x'` for horizontal, `'y'` for vertical). | | `direction` | string | `'ltr'` | Carousel item direction: `'ltr'` (left-to-right) or `'rtl'` (right-to-left). | | `slidesToScroll` | number | `1` | Number of slides to scroll per navigation action. | -| `lazyLoadImages` | boolean | `true` | Enable lazy loading for slide images. Individual slides can override this setting. | +| `lazyLoadImages` | boolean | `true` | Add `loading="lazy"` to images in slides. Slides can opt out via `disableLazyLoadImages`. | --- @@ -34,7 +34,7 @@ The child block that serves as a container for individual slide content. Each sl | Attribute | Type | Default | Description | | :-------------------------- | :------ | :------------ | :------------------------------------------ | -| `disableLazyLoadImages` | boolean | `false` | Override parent's `lazyLoadImages` setting for this slide only. | +| `disableLazyLoadImages` | boolean | `false` | Disable lazy loading for images in this slide (when carousel lazy loading is enabled). | --- diff --git a/src/blocks/carousel/slide/edit.tsx b/src/blocks/carousel/slide/edit.tsx index be5ea21..53158dd 100644 --- a/src/blocks/carousel/slide/edit.tsx +++ b/src/blocks/carousel/slide/edit.tsx @@ -51,7 +51,7 @@ export default function Edit( { checked={ disableLazyLoadImages } onChange={ ( value ) => setAttributes( { disableLazyLoadImages: value } ) } help={ __( - 'Override carousel lazy loading for this slide.', + 'Disable lazy loading for images in this slide (when carousel lazy loading is enabled).', 'carousel-kit', ) } /> From ed1ffcfc9fafb6a4f14a714ebc73bdd3a3362f01 Mon Sep 17 00:00:00 2001 From: Sagar Tamang Date: Tue, 31 Mar 2026 20:36:19 +0545 Subject: [PATCH 09/14] fix: update handle_lazy_load_images method to require WP_Block instance --- inc/Plugin.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/inc/Plugin.php b/inc/Plugin.php index 27f2a9a..4f28ed3 100644 --- a/inc/Plugin.php +++ b/inc/Plugin.php @@ -273,7 +273,7 @@ private function load_patterns_from_disk(): array { * * @return string Modified block content. */ - public function handle_lazy_load_images( string $block_content, array $parsed_block, ?WP_Block $instance ): string { + public function handle_lazy_load_images( string $block_content, array $parsed_block, WP_Block $instance ): string { // Bail early if the parent block to check lazyLoadImages setting is not set. if ( ! isset( $instance->context["carousel-kit/carousel/lazyLoadImages"] ) ) { return $block_content; From a9e94840db6842c57520ec31b69140731ce9fd7a Mon Sep 17 00:00:00 2001 From: Sagar Tamang Date: Tue, 31 Mar 2026 20:44:18 +0545 Subject: [PATCH 10/14] refactor: improve handle_lazy_load_images method and fix attribute handling --- inc/Plugin.php | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/inc/Plugin.php b/inc/Plugin.php index 4f28ed3..2591913 100644 --- a/inc/Plugin.php +++ b/inc/Plugin.php @@ -267,19 +267,19 @@ private function load_patterns_from_disk(): array { /** * Add loading="lazy" to images in carousel slides. * - * @param string $block_content The block content. - * @param array $parsed_block The parsed block. - * @param WP_Block $instance The block instance. + * @param string $block_content The block content. + * @param array $parsed_block The parsed block. + * @param \WP_Block $instance The block instance. * * @return string Modified block content. */ public function handle_lazy_load_images( string $block_content, array $parsed_block, WP_Block $instance ): string { // Bail early if the parent block to check lazyLoadImages setting is not set. - if ( ! isset( $instance->context["carousel-kit/carousel/lazyLoadImages"] ) ) { + if ( ! isset( $instance->context['carousel-kit/carousel/lazyLoadImages'] ) ) { return $block_content; } - $lazy_load = $instance->context["carousel-kit/carousel/lazyLoadImages"]; + $lazy_load = $instance->context['carousel-kit/carousel/lazyLoadImages']; // If lazy loading is disabled, return as-is. if ( ! $lazy_load ) { @@ -287,7 +287,7 @@ public function handle_lazy_load_images( string $block_content, array $parsed_bl } // Check if this slide has disableLazyLoadImages set. - $slide_attrs = $parsed_block['attrs'] ?? array(); + $slide_attrs = $parsed_block['attrs'] ?? []; $disable_lazy = isset( $slide_attrs['disableLazyLoadImages'] ) ? $slide_attrs['disableLazyLoadImages'] : false; if ( $disable_lazy ) { @@ -299,9 +299,11 @@ public function handle_lazy_load_images( string $block_content, array $parsed_bl while ( $processor->next_tag( 'img' ) ) { // Only add if loading attribute is not already set. - if ( null === $processor->get_attribute( 'loading' ) ) { - $processor->set_attribute( 'loading', 'lazy' ); + if ( null !== $processor->get_attribute( 'loading' ) ) { + continue; } + + $processor->set_attribute( 'loading', 'lazy' ); } return $processor->get_updated_html(); From 6412c163c93c2c9e7e51255b2729172597da42be Mon Sep 17 00:00:00 2001 From: Sagar Tamang Date: Tue, 31 Mar 2026 21:41:21 +0545 Subject: [PATCH 11/14] fix: correct lazy loading attribute handling in handle_lazy_load_images method --- inc/Plugin.php | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/inc/Plugin.php b/inc/Plugin.php index 2591913..c0fb5ae 100644 --- a/inc/Plugin.php +++ b/inc/Plugin.php @@ -299,11 +299,10 @@ public function handle_lazy_load_images( string $block_content, array $parsed_bl while ( $processor->next_tag( 'img' ) ) { // Only add if loading attribute is not already set. - if ( null !== $processor->get_attribute( 'loading' ) ) { - continue; + if ( null === $processor->get_attribute( 'loading' ) ) { + $processor->set_attribute( 'loading', 'lazy' ); } - $processor->set_attribute( 'loading', 'lazy' ); } return $processor->get_updated_html(); From 1e4944db9583d762635908a10875b051b04ffef0 Mon Sep 17 00:00:00 2001 From: Sagar Tamang Date: Wed, 6 May 2026 13:18:13 +0545 Subject: [PATCH 12/14] refactor: remove InspectorControls and disableLazyLoadImages attribute from Edit component from slide block --- src/blocks/carousel/block.json | 3 +-- src/blocks/carousel/slide/block.json | 3 +-- src/blocks/carousel/slide/edit.tsx | 18 +----------------- 3 files changed, 3 insertions(+), 21 deletions(-) diff --git a/src/blocks/carousel/block.json b/src/blocks/carousel/block.json index e26fff5..3fd53c1 100644 --- a/src/blocks/carousel/block.json +++ b/src/blocks/carousel/block.json @@ -9,8 +9,7 @@ "description": "Carousel container using Embla and Interactivity API.", "textdomain": "rt-carousel", "providesContext": { - "rt-carousel/carousel/allowedSlideBlocks": "allowedSlideBlocks", - "rt-carousel/carousel/lazyLoadImages": "lazyLoadImages" + "rt-carousel/carousel/allowedSlideBlocks": "allowedSlideBlocks" }, "supports": { "interactivity": true, diff --git a/src/blocks/carousel/slide/block.json b/src/blocks/carousel/slide/block.json index b655c23..5a25f77 100644 --- a/src/blocks/carousel/slide/block.json +++ b/src/blocks/carousel/slide/block.json @@ -21,8 +21,7 @@ } }, "usesContext": [ - "rt-carousel/carousel/allowedSlideBlocks", - "rt-carousel/carousel/lazyLoadImages" + "rt-carousel/carousel/allowedSlideBlocks" ], "editorScript": "file:./index.js" } diff --git a/src/blocks/carousel/slide/edit.tsx b/src/blocks/carousel/slide/edit.tsx index 53158dd..dd1a0dc 100644 --- a/src/blocks/carousel/slide/edit.tsx +++ b/src/blocks/carousel/slide/edit.tsx @@ -3,10 +3,7 @@ import { useInnerBlocksProps, BlockControls, BlockVerticalAlignmentToolbar, - InspectorControls, } from '@wordpress/block-editor'; -import { PanelBody, ToggleControl } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; import type { CarouselSlideAttributes } from '../types'; export default function Edit( { @@ -20,7 +17,7 @@ export default function Edit( { } ) { const allowedBlocks = context[ 'rt-carousel/carousel/allowedSlideBlocks' ]; - const { verticalAlignment, disableLazyLoadImages = false } = attributes; + const { verticalAlignment } = attributes; const blockProps = useBlockProps( { className: `embla__slide${ @@ -44,19 +41,6 @@ export default function Edit( { } /> - - - setAttributes( { disableLazyLoadImages: value } ) } - help={ __( - 'Disable lazy loading for images in this slide (when carousel lazy loading is enabled).', - 'carousel-kit', - ) } - /> - -
); From a24a33d55e1d3e0d5303f6b2f3de35b6bbcc86d0 Mon Sep 17 00:00:00 2001 From: Sagar Tamang Date: Wed, 6 May 2026 14:09:44 +0545 Subject: [PATCH 13/14] fix: update lazy loading logic in handle_lazy_load_images method for improved performance --- inc/Plugin.php | 36 ++++++++++++++++++++---------------- 1 file changed, 20 insertions(+), 16 deletions(-) diff --git a/inc/Plugin.php b/inc/Plugin.php index c0fb5ae..3ebdc03 100644 --- a/inc/Plugin.php +++ b/inc/Plugin.php @@ -43,7 +43,7 @@ protected function setup_hooks(): void { add_action( 'init', [ $this, 'register_block_patterns' ] ); add_action( 'admin_notices', [ $this, 'legacy_plugin_notice' ] ); add_action( 'network_admin_notices', [ $this, 'legacy_plugin_notice' ] ); - add_filter( 'render_block_carousel-kit/carousel-slide', [ $this, 'handle_lazy_load_images' ], 10, 3 ); + add_filter( 'render_block_rt-carousel/carousel', [ $this, 'handle_lazy_load_images' ], 10, 3 ); } /** @@ -274,35 +274,39 @@ private function load_patterns_from_disk(): array { * @return string Modified block content. */ public function handle_lazy_load_images( string $block_content, array $parsed_block, WP_Block $instance ): string { - // Bail early if the parent block to check lazyLoadImages setting is not set. - if ( ! isset( $instance->context['carousel-kit/carousel/lazyLoadImages'] ) ) { + // Bail early if the lazyLoadImages setting is not set. + if ( ! isset( $instance->attributes['lazyLoadImages'] ) ) { return $block_content; } - $lazy_load = $instance->context['carousel-kit/carousel/lazyLoadImages']; + $lazy_load = (bool) $instance->attributes['lazyLoadImages']; // If lazy loading is disabled, return as-is. if ( ! $lazy_load ) { return $block_content; } - // Check if this slide has disableLazyLoadImages set. - $slide_attrs = $parsed_block['attrs'] ?? []; - $disable_lazy = isset( $slide_attrs['disableLazyLoadImages'] ) ? $slide_attrs['disableLazyLoadImages'] : false; - - if ( $disable_lazy ) { - return $block_content; - } - // Use WP_HTML_Tag_Processor to add loading="lazy" to tags. $processor = new WP_HTML_Tag_Processor( $block_content ); + $slide_index = 0; + + while ( $processor->next_tag( ) ) { + $tag = $processor->get_tag(); - while ( $processor->next_tag( 'img' ) ) { - // Only add if loading attribute is not already set. - if ( null === $processor->get_attribute( 'loading' ) ) { - $processor->set_attribute( 'loading', 'lazy' ); + // Keep a track of the slide index to determine if an image is in the first slide or subsequent slides. + if ( 'DIV' === $tag && $processor->has_class( 'embla__slide' ) ) { + $slide_index++; } + // If it's the first slide, set loading="lazy". For subsequent slides, set loading="eager" and fetchpriority="high". + if ( 'IMG' === $tag && null === $processor->get_attribute( 'loading' ) ) { + if ( 1 === $slide_index ) { + $processor->set_attribute( 'loading', 'eager' ); + $processor->set_attribute( 'fetchpriority', 'high' ); + } else { + $processor->set_attribute( 'loading', 'lazy' ); + } + } } return $processor->get_updated_html(); From 01d683a7aa555458ac70c90d162753ddbc16ede8 Mon Sep 17 00:00:00 2001 From: Sagar Tamang Date: Wed, 6 May 2026 14:17:29 +0545 Subject: [PATCH 14/14] fix: update priority for lazy loading filter in handle_lazy_load_images method --- inc/Plugin.php | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/inc/Plugin.php b/inc/Plugin.php index 3ebdc03..5a3880a 100644 --- a/inc/Plugin.php +++ b/inc/Plugin.php @@ -43,7 +43,7 @@ protected function setup_hooks(): void { add_action( 'init', [ $this, 'register_block_patterns' ] ); add_action( 'admin_notices', [ $this, 'legacy_plugin_notice' ] ); add_action( 'network_admin_notices', [ $this, 'legacy_plugin_notice' ] ); - add_filter( 'render_block_rt-carousel/carousel', [ $this, 'handle_lazy_load_images' ], 10, 3 ); + add_filter( 'render_block_rt-carousel/carousel', [ $this, 'handle_lazy_load_images' ], 16, 3 ); } /** @@ -274,6 +274,11 @@ private function load_patterns_from_disk(): array { * @return string Modified block content. */ public function handle_lazy_load_images( string $block_content, array $parsed_block, WP_Block $instance ): string { + // $instance was added in WP 5.9.0, if it's not available, return the block content unmodified. + if ( ! $instance ) { + return $block_content; + } + // Bail early if the lazyLoadImages setting is not set. if ( ! isset( $instance->attributes['lazyLoadImages'] ) ) { return $block_content;