Skip to content

feat: Add LazyLoadImages toggle to Carousel block with per-slide override option#100

Open
mi5t4n wants to merge 11 commits intodevelopfrom
feat/97
Open

feat: Add LazyLoadImages toggle to Carousel block with per-slide override option#100
mi5t4n wants to merge 11 commits intodevelopfrom
feat/97

Conversation

@mi5t4n
Copy link
Copy Markdown
Member

@mi5t4n mi5t4n commented Mar 31, 2026

Summary

Add LazyLoadImages toggle to Carousel block with per-slide override option

Type of change

  • Bug fix
  • New feature
  • Enhancement/refactor
  • Documentation update
  • Test update
  • Build/CI/tooling

Related issue(s)

Closes #93

What changed

  • Added "Lazy Load Images" toggle to Carousel block (enabled by default)
  • Added "Disable Lazy Load Images" toggle to Slide block (disabled by default)
  • Added render_block filter in Plugin.php using WP_HTML_Tag_Processor to add
    loading="lazy" attribute to images inside carousel slides

Breaking changes

Does this introduce a breaking change? If yes, describe the impact and migration path below.

  • Yes — migration path:
  • No

Testing

  • Unit tests
  • Manual testing
  • Cross-browser testing (if UI changes)

Test details:

Prerequisites

  • WordPress 6.2+ with Gutenberg enabled
  • Carousel Kit plugin installed and activated
    Test Cases
  1. Carousel Block - Lazy Load Images Toggle
  2. Add a Carousel block to a post/page
  3. Open Carousel Settings panel in block inspector
  4. Verify "Lazy Load Images" toggle is present (after "Free Drag")
  5. Toggle OFF and verify images don't get loading="lazy"
  6. Toggle ON and verify images get loading="lazy"
  7. Slide Block - Disable Lazy Load Images Toggle
  8. Select a slide in the carousel
  9. Open Slide Settings panel in block inspector
  10. Verify "Disable Lazy Load Images" toggle is present
  11. Toggle ON - images in that slide should not have loading="lazy"
  12. Toggle OFF - images in that slide should have loading="lazy"
  13. Default Behavior
  • Fresh carousel: lazyLoadImages should be ON by default
  • Fresh slide: disableLazyLoadImages should be OFF by default
  • Images should have loading="lazy" by default
  1. Edge Cases
  • Carousel with lazyLoadImages: OFF - no images should be lazy loaded
  • Slide with disableLazyLoadImages: ON - images in that slide bypass parent setting
  • Images already having loading attribute - should not be overridden
    Verification
    View page source to confirm tags have loading="lazy" attribute when enabled.

Screenshots / recordings

  1. Enable Lazyload Toggle in Carousel Block
2026-03-31_20-0554
  1. Disable Lazyload in Carousel Slide Block
2026-03-31_19-5930
  1. Markup modified
2026-03-31_20-0435

If applicable, add screenshots or short recordings.

Checklist

  • I have self-reviewed this PR
  • I have added/updated tests where needed
  • I have updated docs where needed
  • I have checked for breaking changes

Copilot AI review requested due to automatic review settings March 31, 2026 14:20
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds configurable image lazy-loading to the Carousel Kit blocks by introducing a carousel-level toggle with a per-slide opt-out, and applying the behavior on render via a WordPress block render filter.

Changes:

  • Added lazyLoadImages attribute + inspector toggle to the Carousel block (default: enabled).
  • Added disableLazyLoadImages attribute + inspector toggle to the Slide block (default: disabled).
  • Added a render_block_carousel-kit/carousel-slide filter that uses WP_HTML_Tag_Processor to add loading="lazy" to <img> tags when enabled.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
src/blocks/carousel/types.ts Extends block attribute types to include carousel/slide lazy-load flags.
src/blocks/carousel/edit.tsx Adds the Carousel inspector toggle wiring for lazyLoadImages.
src/blocks/carousel/block.json Persists lazyLoadImages with default true and exposes it via block context.
src/blocks/carousel/slide/edit.tsx Adds Slide inspector toggle for disableLazyLoadImages.
src/blocks/carousel/slide/block.json Persists disableLazyLoadImages and declares the carousel context dependency.
src/blocks/carousel/__tests__/types.test.ts Updates TS type tests to include lazyLoadImages.
inc/Plugin.php Implements server-side HTML mutation to add loading="lazy" based on context + slide attrs.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 8 out of 8 changed files in this pull request and generated 4 comments.

Comments suppressed due to low confidence (1)

src/blocks/carousel/tests/types.test.ts:66

  • In the “should have all required properties” test, lazyLoadImages is now a required attribute but it isn’t included in the requiredKeys list that the test iterates over. This makes the runtime key-presence assertion incomplete; please add lazyLoadImages to that list so the test actually verifies the new required attribute is present.
				lazyLoadImages: false,
			};

			// Verify all keys exist
			const requiredKeys = [

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@mi5t4n mi5t4n added the feature label Mar 31, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Enhancement]: Support lazy loading of images in the Slide block

2 participants