Fix : Pattern validation and context encoding

[milindmore22]

This pull request enhances accessibility and adds new configuration options to all carousel pattern examples, as well as improves how context data is encoded in the block's deprecated save functions.

Accessibility improvements:

• Added a visually hidden <span> with role="status" and aria-live="polite" to announce carousel changes for screen readers in all carousel pattern files (hero-carousel.php, logo-showcase.php, query-loop.php, terms-query.php, testimonial-carousel.php). [1] [2] [3] [4] [5]

Configuration and context enhancements:

• Updated the data-wp-context attribute in all carousel pattern files to include new fields such as transition, countLabelPattern, announcement, shouldAnnounce, announcementPattern, autoScroll, useTabs, and carouselId, improving flexibility and accessibility feedback. [1] [2] [3] [4] [5]

Code improvements:

• Updated the deprecated block save functions in src/blocks/carousel/deprecated.tsx to use the new encodeContext function for encoding the data-wp-context attribute, ensuring consistent and safe context serialization. [1] [2] [3]

Summary

Describe the change and why it is needed.

Type of change

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

Related issue(s)

N/A

What changed

• Updates all patterns with newly added attributes

Breaking changes

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

• Yes — migration path:
• No

Testing

Describe how this was tested.

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

Test details:

🧪 QA Test Plan: rtCarousel Pattern Validation Fixes

📋 Prerequisites & Setup

1. Build Plugin Assets:
   Run the build script to ensure all compiled JS/CSS files are up-to-date:

   cd wp-content/plugins/rt-carousel
   npm run build

2. Clear WordPress Cache:
   • Enable define( 'WP_DEBUG', true ); in your wp-config.php, OR
   • Run WP-CLI to flush transients:

     wp transient delete rt_carousel_patterns_cache

3. Ensure Plugin Active: Ensure rtCarousel is active in Plugins > Installed Plugins.

---

Test Case 1: Inserting Patterns from Block Inserter (New Content)

Objective:

Verify that all 5 rtCarousel block patterns insert into the Block Editor cleanly without triggering "Attempt Block Recovery".

Steps:

1. Go to Posts > Add New Post (or Pages > Add New Page).
2. Click the + (Toggle block inserter) button at the top left of the editor.
3. Switch to the Patterns tab.
4. Select the rtCarousel category from the patterns list.
5. Click to insert each of the following 5 patterns into the post:
   • rtCarousel: Hero Carousel
   • rtCarousel: Testimonial Carousel
   • rtCarousel: Logo Showcase
   • rtCarousel: Query Loop Carousel
   • rtCarousel: Terms Query Carousel

Expected Result:

• ✅ Each pattern inserts immediately without any error dialogs.
• ❌ Pass Condition: NO red error banners or "This block contains unexpected or invalid content. [Attempt Block Recovery]" buttons appear.

---

Test Case 2: Post Save & Editor Reload (Persistence Check)

Objective:

Verify that saving a post containing rtCarousel patterns retains valid block structure upon reload.

Steps:

1. Insert one or more rtCarousel patterns into the post (e.g., Hero Carousel & Logo Showcase).
2. Click Save Draft or Publish.
3. Refresh the browser page (Cmd + R or Ctrl + F5) to reload the block editor.

Expected Result:

• ✅ The editor reloads cleanly.
• ✅ All carousel blocks render in their active editor preview state.
• ❌ Pass Condition: NO block recovery notices appear after re-opening the post.

---

Test Case 3: Frontend Interactivity Verification

Objective:

Verify that pattern blocks render and operate correctly on the public frontend site.

Steps:

1. Click View Post or open the permalink of the published page in a new tab.
2. Verify visual rendering and controls for each pattern:
   • Hero Carousel: Slides render full-width with background cover images and overlaid buttons/text.
   • Testimonial Carousel: Centered cards with quote text render properly.
   • Logo Showcase: Logos align horizontally; auto-scroll/autoplay starts after 3 seconds.
   • Controls & Dots: Click Next (>) and Prev (<) buttons as well as navigation dots.

Expected Result:

• ✅ Slides transition smoothly.
• ✅ Autoplay & loop behaviors function as configured.
• ✅ No JavaScript errors present in Browser Console (F12 > Console).

---

Test Case 4: Backward Compatibility & Migration Check (Deprecations)

Objective:

Verify that posts created with older versions of rt-carousel (prior to countLabelPattern and live-region additions) load smoothly without block errors.

Steps:

1. In the Block Editor, switch to Code Editor mode (Ctrl + Shift + Alt + M or top right 3 dots menu > Code Editor).
2. Paste the following legacy v2.0.0 markup into the Code Editor:

   <!-- wp:rt-carousel/carousel {"loop":true,"carouselAlign":"center","ariaLabel":"Legacy Test"} -->
   <div class="wp-block-rt-carousel-carousel rt-carousel" role="region" aria-roledescription="carousel" aria-label="Legacy Test" dir="ltr" data-axis="x" data-loop="true" data-wp-interactive="rt-carousel/carousel" data-wp-context="{&quot;options&quot;:{&quot;loop&quot;:true,&quot;dragFree&quot;:false,&quot;align&quot;:&quot;center&quot;,&quot;containScroll&quot;:&quot;trimSnaps&quot;,&quot;direction&quot;:&quot;ltr&quot;,&quot;axis&quot;:&quot;x&quot;,&quot;slidesToScroll&quot;:1},&quot;autoplay&quot;:false,&quot;isPlaying&quot;:false,&quot;timerIterationId&quot;:0,&quot;selectedIndex&quot;:-1,&quot;scrollSnaps&quot;:[],&quot;canScrollPrev&quot;:false,&quot;canScrollNext&quot;:false,&quot;scrollProgress&quot;:0,&quot;slideCount&quot;:0,&quot;ariaLabelPattern&quot;:&quot;Go to slide %d&quot;}" data-wp-init="callbacks.initCarousel" style="--rt-carousel-gap:0px">
     <!-- wp:rt-carousel/carousel-viewport -->
     <div class="wp-block-rt-carousel-carousel-viewport embla">
       <div class="embla__container">
         <!-- wp:rt-carousel/carousel-slide -->
         <div class="wp-block-rt-carousel-carousel-slide embla__slide" role="group" aria-roledescription="slide" data-wp-interactive="rt-carousel/carousel" data-wp-class--is-active="callbacks.isSlideActive" data-wp-bind--aria-current="callbacks.isSlideActive">
           <!-- wp:paragraph -->
           <p>Legacy Slide Content</p>
           <!-- /wp:paragraph -->
         </div>
         <!-- /wp:rt-carousel/carousel-slide -->
       </div>
     </div>
     <!-- /wp:rt-carousel/carousel-viewport -->
   </div>
   <!-- /wp:rt-carousel/carousel -->

3. Switch back to Visual Editor mode.

Expected Result:

• ✅ Gutenberg deprecation parser (SaveV200 / SaveV203) matches the legacy markup.
• ✅ Block converts silently to current version without showing "Attempt Block Recovery".

---

Test Case 5: Automated Test Suite

Objective:

Verify all automated JS unit tests pass.

Steps:

Run unit tests from the plugin directory:

cd wp-content/plugins/rt-carousel
npm run test:js

Expected Result:

• ✅ All test suites pass with 0 failures.

Screenshots / recordings

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]

Pull request overview

Warning

Copilot couldn't run its full agentic review because it didn't start before the timeout. Make sure your repository has a runner available, or add a copilot-code-review.yml file specifying one with the runs-on attribute. See the docs for more details.

Enhances the rtCarousel examples and deprecated saves to support accessible live announcements and additional carousel context fields, while standardizing how data-wp-context is encoded.

Changes:

• Added a screen-reader live region (role="status", aria-live="polite") to announce slide changes in all carousel patterns.
• Expanded data-wp-context in patterns with new configuration fields (e.g., transition, countLabelPattern, announcementPattern, carouselId).
• Updated deprecated save implementations to encode data-wp-context using the new encodeContext helper.

Reviewed changes

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

Show a summary per file

File	Description
src/blocks/carousel/deprecated.tsx	Switches deprecated saves to encodeContext for data-wp-context serialization.
examples/patterns/hero-carousel.php	Adds new context fields and a live-region announcer span.
examples/patterns/logo-showcase.php	Adds new context fields, enables autoplay in pattern attrs, and adds live-region span.
examples/patterns/query-loop.php	Adds new context fields and a live-region announcer span.
examples/patterns/terms-query.php	Adds new context fields and a live-region announcer span.
examples/patterns/testimonial-carousel.php	Adds new context fields and a live-region announcer span.

---

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

[Copilot]

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated no new comments.

Suppressed comments (2)

examples/patterns/hero-carousel.php:21

• New user-facing strings (countLabelPattern / announcementPattern) are hard-coded in English inside data-wp-context. Since these patterns are PHP-based, consider generating those strings via WordPress i18n functions (and then injecting them into the encoded context) so the announcement/labels are localizable. This same issue appears in the other updated pattern files as well.

<div class="wp-block-rt-carousel-carousel alignwide rt-carousel wp-block-carousel-carousel" role="region" aria-roledescription="carousel" aria-label="Hero Carousel" dir="ltr" data-axis="x" data-loop="true" data-wp-interactive="rt-carousel/carousel" data-wp-context="{&quot;transition&quot;:&quot;slide&quot;,&quot;options&quot;:{&quot;loop&quot;:true,&quot;dragFree&quot;:false,&quot;align&quot;:&quot;start&quot;,&quot;containScroll&quot;:&quot;trimSnaps&quot;,&quot;direction&quot;:&quot;ltr&quot;,&quot;axis&quot;:&quot;x&quot;,&quot;slidesToScroll&quot;:1},&quot;autoplay&quot;:{&quot;delay&quot;:5000,&quot;stopOnInteraction&quot;:true,&quot;stopOnMouseEnter&quot;:false},&quot;isPlaying&quot;:true,&quot;timerIterationId&quot;:0,&quot;selectedIndex&quot;:-1,&quot;scrollSnaps&quot;:[],&quot;canScrollPrev&quot;:false,&quot;canScrollNext&quot;:false,&quot;scrollProgress&quot;:0,&quot;slideCount&quot;:0,&quot;ariaLabelPattern&quot;:&quot;Go to slide %d&quot;,&quot;countLabelPattern&quot;:&quot;Slide {{currentSlide}} of {{totalSlides}}&quot;,&quot;announcement&quot;:&quot;&quot;,&quot;shouldAnnounce&quot;:false,&quot;announcementPattern&quot;:&quot;Slide {{currentSlide}} of {{totalSlides}}&quot;,&quot;autoScroll&quot;:false,&quot;useTabs&quot;:false,&quot;carouselId&quot;:&quot;&quot;}" data-wp-init="callbacks.initCarousel" style="--rt-carousel-gap:0px"><!-- wp:rt-carousel/carousel-viewport {"className":"wp-block-carousel-carousel-viewport"} -->

examples/patterns/testimonial-carousel.php:16

• The data-wp-context JSON is manually embedded as a very large HTML-entity-escaped string. This is fairly brittle to edit (easy to break quoting/escaping) and makes future context changes harder. Since these are PHP pattern files, consider constructing the context as a PHP array and serializing it with wp_json_encode(), then escaping the attribute (e.g., esc_attr()) to avoid maintaining "-encoded JSON by hand. (Same applies to the other pattern files updated in this PR.)

<div class="wp-block-rt-carousel-carousel rt-carousel wp-block-carousel-carousel" role="region" aria-roledescription="carousel" aria-label="Customer Testimonials" dir="ltr" data-axis="x" data-loop="true" data-wp-interactive="rt-carousel/carousel" data-wp-context="{&quot;transition&quot;:&quot;slide&quot;,&quot;options&quot;:{&quot;loop&quot;:true,&quot;dragFree&quot;:false,&quot;align&quot;:&quot;center&quot;,&quot;containScroll&quot;:&quot;trimSnaps&quot;,&quot;direction&quot;:&quot;ltr&quot;,&quot;axis&quot;:&quot;x&quot;,&quot;slidesToScroll&quot;:1},&quot;autoplay&quot;:{&quot;delay&quot;:4000,&quot;stopOnInteraction&quot;:true,&quot;stopOnMouseEnter&quot;:false},&quot;isPlaying&quot;:true,&quot;timerIterationId&quot;:0,&quot;selectedIndex&quot;:-1,&quot;scrollSnaps&quot;:[],&quot;canScrollPrev&quot;:false,&quot;canScrollNext&quot;:false,&quot;scrollProgress&quot;:0,&quot;slideCount&quot;:0,&quot;ariaLabelPattern&quot;:&quot;Go to slide %d&quot;,&quot;countLabelPattern&quot;:&quot;Slide {{currentSlide}} of {{totalSlides}}&quot;,&quot;announcement&quot;:&quot;&quot;,&quot;shouldAnnounce&quot;:false,&quot;announcementPattern&quot;:&quot;Slide {{currentSlide}} of {{totalSlides}}&quot;,&quot;autoScroll&quot;:false,&quot;useTabs&quot;:false,&quot;carouselId&quot;:&quot;&quot;}" data-wp-init="callbacks.initCarousel" style="--rt-carousel-gap:32px"><!-- wp:heading {"textAlign":"center","className":"is-style-default","fontSize":"x-large"} -->