feat: add Content Slider block by Soare-Robert-Daniel · Pull Request #2872 · Codeinwp/otter-blocks

Soare-Robert-Daniel · 2026-06-18T11:24:45Z

Closes https://github.com/Codeinwp/otter-internals/issues/272

Summary

Add a general block that acts as a slider for any type of content.

Screenshots

Test instructions

Check if the basic functionality works
Check if you can create a basic slider image
Check if you can create a slider with mixed content (maps blocks, forms)

Checklist before the final review

Included E2E or unit tests for the changes in this PR.
Visual elements are not affected by independent changes.
It is at least compatible with the minimum WordPress version.
It loads additional script in frontend only if it is required.
Does not impact the Core Web Vitals.
In case of deprecation, old blocks are safely migrated.
It is usable in Widgets and FSE.
Copy/Paste is working if the attributes are modified.
PR is following the best practices

pirate-bot · 2026-06-18T11:26:51Z

Bundle Size Diff

Package	Old Size	New Size	Diff
Animations	178.27 KB	178.27 KB	0 B (0.00%)
Blocks	1.52 MB	1.53 MB	10.99 KB (0.71%)
CSS	7.87 KB	7.87 KB	0 B (0.00%)
Dashboard	111.06 KB	111.06 KB	0 B (0.00%)
Onboarding	68.14 KB	68.14 KB	0 B (0.00%)
Export Import	4.7 KB	4.7 KB	0 B (0.00%)
Pro	328.43 KB	328.43 KB	0 B (0.00%)

pirate-bot · 2026-06-18T11:29:03Z

Plugin build for fea13af is ready 🛎️!

Download Otter – Page Builder Blocks & Extensions for Gutenberg - Production ~ Development
Download Otter Pro - Production ~ Development
Download Blocks Animation - Production ~ Development
Download Blocks CSS - Production ~ Development
Download Blocks Export Import - Production ~ Development

pirate-bot · 2026-06-18T11:38:12Z

E2E Tests

Playwright Test Status: See serial and parallel matrix jobs

Performance Results

serverResponse: {"q25":462.2,"q50":474.95,"q75":492.7,"cnt":10}, firstPaint: {"q25":538.4,"q50":611.2,"q75":669.1,"cnt":10}, domContentLoaded: {"q25":3343.2,"q50":3401.45,"q75":3426.7,"cnt":10}, loaded: {"q25":3345.1,"q50":3403.35,"q75":3428.9,"cnt":10}, firstContentfulPaint: {"q25":3883,"q50":3952.05,"q75":3974.8,"cnt":10}, firstBlock: {"q25":13396,"q50":13484.6,"q75":13554.9,"cnt":10}, type: {"q25":22.57,"q50":23.88,"q75":25.45,"cnt":10}, typeWithoutInspector: {"q25":19.24,"q50":22.4,"q75":31.16,"cnt":10}, typeWithTopToolbar: {"q25":28.37,"q50":29.07,"q75":29.93,"cnt":10}, typeContainer: {"q25":12.21,"q50":12.63,"q75":13.35,"cnt":10}, focus: {"q25":101.63,"q50":103.55,"q75":107.14,"cnt":10}, inserterOpen: {"q25":35.36,"q50":35.86,"q75":36.4,"cnt":10}, inserterSearch: {"q25":11.89,"q50":11.99,"q75":12.47,"cnt":10}, inserterHover: {"q25":4.53,"q50":4.68,"q75":4.97,"cnt":20}, loadPatterns: {"q25":1466.23,"q50":1547.41,"q75":1673.57,"cnt":10}, listViewOpen: {"q25":210.13,"q50":214.21,"q75":218.13,"cnt":10}

Add `themeisle-blocks/content-slider`, an InnerBlocks-based slider where each direct child block is a slide, so slides can hold any content (text, images, buttons, Atomic Wind layouts) rather than just images like the Image Slider. - Static save; raw inner blocks are the slides, sized via CSS scroll-snap. - Thin (~2KB) frontend script for arrows, dots, autoplay (hover/focus pause, reduced-motion aware), keyboard nav and soft-wrap loop — no carousel library. - Editor shows one slide at a time with toolbar prev/next + add-slide; default template demos image+caption group slides. - Chrome (arrows/dots) styled via scoped CSS variables and :where() so it never competes with slide content; structural CSS only on the track. - Conditional frontend enqueue wired through class-registration. - e2e coverage for editor nav, frontend nav, loop, autoplay, reduced-motion, chrome toggles and color variables. - Disable themeisle-sdk survey/tracking scripts in the e2e env to keep the console clean. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Insert advanced-heading, button-group/button and accordion blocks as slides and assert each renders inside the track on the frontend. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Add a slide mixing core blocks (heading, image, list, quote, buttons), a content-heavy slide (10+ paragraphs, an 8-item list, 3 columns, a quote), and a slide combining core and Otter blocks; assert all render inside the track. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Copilot

Pull request overview

This PR introduces a new Content Slider Gutenberg block to Otter Blocks: a lightweight, scroll-snap–based carousel where each inner block becomes a slide, with optional arrows/dots and autoplay.

Changes:

Added the themeisle-blocks/content-slider block (editor UI, inspector controls, save markup, styles, and shared chrome styling).
Added a dedicated frontend script entry to wire navigation (arrows/dots), autoplay, keyboard navigation, and loop behavior.
Added Playwright E2E coverage for editor behavior and frontend rendering/interaction, plus an E2E bootstrap tweak to reduce unrelated console noise.

Reviewed changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
webpack.config.js	Adds a new webpack entrypoint for the content slider frontend script bundle.
blocks.json	Registers build inputs for the new block’s editor and frontend styles.
inc/class-registration.php	Registers the frontend script + localized strings when the block is present.
src/blocks/blocks/index.js	Registers the new block in the editor bundle import list.
src/blocks/blocks/content-slider/block.json	Declares block metadata, attributes, and asset handles.
src/blocks/blocks/content-slider/index.js	Registers the block type (title/description/icon/keywords) and binds edit/save.
src/blocks/blocks/content-slider/edit.js	Implements editor experience (single-slide view, toolbar navigation, add-slide, dots/arrows).
src/blocks/blocks/content-slider/inspector.js	Adds inspector controls for slides-per-view, gap, height, loop, autoplay, and colors.
src/blocks/blocks/content-slider/save.js	Outputs frontend markup, data attributes, CSS variables, and accessibility attributes.
src/blocks/blocks/content-slider/style.scss	Implements scroll-snap track layout for the frontend.
src/blocks/blocks/content-slider/editor.scss	Editor-only styling for the track and slide wrappers.
src/blocks/blocks/content-slider/_chrome.scss	Shared “chrome” styling for arrows/dots with low specificity.
src/blocks/blocks/content-slider/components/icons.js	Adds the shared arrow SVG icon component.
src/blocks/frontend/content-slider/index.js	Frontend initialization: dots creation, arrows, scroll-sync, autoplay, keyboard, loop.
src/blocks/test/e2e/blocks/content-slider.spec.js	Adds E2E tests for block insertion, editor navigation, frontend behavior, and accessibility semantics.
packages/e2e-tests/mu-plugins/otter-e2e-bootstrap.php	Disables ThemeIsle SDK survey/tracking scripts in E2E to avoid unrelated console errors.

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

+			const dot = document.createElement( 'button' );
+			dot.type = 'button';
+			dot.className = 'o-content-dot';
+			dot.setAttribute( 'aria-label', goToSlideLabel.replace( '%d', i + 1 ) );
+			dot.addEventListener( 'click', () => goTo( i ) );
+			dotsContainer.appendChild( dot );


+	slider.addEventListener( 'keydown', ( event ) => {
+		if ( 'ArrowLeft' === event.key ) {
+			event.preventDefault();
+			goTo( current - 1 );
+		} else if ( 'ArrowRight' === event.key ) {
+			event.preventDefault();
+			goTo( current + 1 );
+		}
+	});


poonam279 · 2026-06-19T11:59:15Z

@Soare-Robert-Daniel, The Content Slider block works fine with most of the blocks. However, when a Form block is placed inside it — form submissions do not work.

The slider keydown handler claimed ArrowLeft/ArrowRight unconditionally, breaking caret movement for interactive inner blocks (form inputs, textareas, selects, contenteditable) used as slides. Skip navigation when focus is inside such an element. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Soare-Robert-Daniel · 2026-06-22T09:10:39Z

@Soare-Robert-Daniel, The Content Slider block works fine with most of the blocks. However, when a Form block is placed inside it — form submissions do not work.

I could not replicate this. The 106 error means that the email was not sent because of a failure of the delivery system.

Soare-Robert-Daniel self-assigned this Jun 18, 2026

Soare-Robert-Daniel added the pr-checklist-skip Allow this Pull Request to skip checklist. label Jun 18, 2026

pirate-bot added the pr-checklist-complete The Pull Request checklist is complete. (automatic label) label Jun 18, 2026

Soare-Robert-Daniel and others added 3 commits June 18, 2026 14:43

test: cover Otter blocks rendering as Content Slider slides

6adea71

Insert advanced-heading, button-group/button and accordion blocks as slides and assert each renders inside the track on the frontend. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Soare-Robert-Daniel force-pushed the feat/content-block branch from 4693e5e to 9a69c0b Compare June 18, 2026 12:04

Soare-Robert-Daniel requested a review from Copilot June 18, 2026 12:05

Copilot started reviewing on behalf of Soare-Robert-Daniel June 18, 2026 12:05 View session

Copilot AI reviewed Jun 18, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add Content Slider block#2872

feat: add Content Slider block#2872
Soare-Robert-Daniel wants to merge 4 commits into
developmentfrom
feat/content-block

Soare-Robert-Daniel commented Jun 18, 2026

Uh oh!

pirate-bot commented Jun 18, 2026 •

edited

Loading

Uh oh!

pirate-bot commented Jun 18, 2026 •

edited

Loading

Uh oh!

pirate-bot commented Jun 18, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

poonam279 commented Jun 19, 2026

Uh oh!

Soare-Robert-Daniel commented Jun 22, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

Soare-Robert-Daniel commented Jun 18, 2026

Summary

Screenshots

Test instructions

Checklist before the final review

Uh oh!

pirate-bot commented Jun 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Size Diff

Uh oh!

pirate-bot commented Jun 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pirate-bot commented Jun 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

E2E Tests

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

poonam279 commented Jun 19, 2026

Uh oh!

Soare-Robert-Daniel commented Jun 22, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

pirate-bot commented Jun 18, 2026 •

edited

Loading

pirate-bot commented Jun 18, 2026 •

edited

Loading

pirate-bot commented Jun 18, 2026 •

edited

Loading