Merge branch 'develop' of https://github.com/rtCamp/core-carousel into fix/playground

Author: theMasudRana

.gitignore

@@ -36,4 +36,4 @@ phpstan.neon
 # Build
 build/
 tsconfig.tsbuildinfo
-core-carousel.zip
+carousel-kit.zip

DEVELOPMENT.md

@@ -69,7 +69,7 @@ npm run test:actions
 ## Directory Structure
 
 - `src/` - Source code for blocks (React/TypeScript/SCSS).
-- `inc/` - PHP classes and traits (PSR-4 `Core_Carousel`).
+- `inc/` - PHP classes and traits (PSR-4 `Carousel_Kit`).
 - `build/` - Compiled assets (generated by `npm run build`).
 - `docs/` - Documentation files.
 - `examples/` - Block patterns and examples.

Makefile

@@ -1,5 +1,5 @@
 # Configuration
-PLUGIN_SLUG := core-carousel
+PLUGIN_SLUG := carousel-kit
 PLUGIN_VERSION := 1.0.0
 BUILD_DIR := build-dist
 ZIP_NAME := $(PLUGIN_SLUG).zip

README.md

@@ -1,7 +1,7 @@
-# Core Carousel
+# Carousel Kit
 
-![Build Status](https://github.com/rtCamp/core-carousel/actions/workflows/release.yml/badge.svg?branch=main)
-![Latest Release](https://img.shields.io/github/v/release/rtCamp/core-carousel)
+![Build Status](https://github.com/rtCamp/carousel-kit/actions/workflows/release.yml/badge.svg?branch=main)
+![Latest Release](https://img.shields.io/github/v/release/rtCamp/carousel-kit)
 
 **A modular, high-performance carousel block for WordPress, powered by the Interactivity API and Embla Carousel.**
 
@@ -16,6 +16,29 @@ Easily create dynamic, accessible, and customizable carousels for any content ty
 - **Accessibility**: W3C-compliant roles, labels, and keyboard navigation.
 - **RTL Support**: Built-in support for Right-to-Left languages.
 
+## Requirements
+
+| Requirement | Minimum | Recommended |
+|-------------|---------|-------------|
+| WordPress   | 6.5+    | 6.6+        |
+| PHP         | 7.4+    | 8.2+        |
+| Gutenberg   | Not required | — |
+
+> **Note:** The Interactivity API became stable in WordPress 6.5. This plugin works with WordPress core—no Gutenberg plugin required.
+
+## Browser Support
+
+Carousel Kit supports all modern browsers:
+
+| Browser | Minimum Version |
+|---------|-----------------|
+| Chrome  | 80+             |
+| Firefox | 74+             |
+| Safari  | 14+             |
+| Edge    | 80+             |
+
+> **Note:** Internet Explorer is not supported. The plugin requires ES2020+ features (optional chaining, nullish coalescing) and CSS custom properties.
+
 ## Documentation
 
 - **[Installation](docs/INSTALLATION.md)**: How to install via ZIP or Composer.
@@ -35,14 +58,83 @@ The plugin provides a suite of blocks that work together:
 4.  **Carousel Controls**: Previous/Next buttons.
 5.  **Carousel Dots**: Pagination indicators.
 
+## Screenshots
+
+### Editor View
+![Editor View](https://github.com/user-attachments/assets/3117b2d6-33be-49ea-8dee-c4ca3a637ec8)
+*Adding and configuring carousel blocks in the WordPress editor.*
+
+### Frontend View
+![Frontend View](https://github.com/user-attachments/assets/32f719e5-5f20-4243-8967-4eef880519ae)
+*The carousel in action on the frontend.*
+
+### Settings Panel
+![Settings Panel](https://github.com/user-attachments/assets/e0510e0b-44ba-4c56-ab15-d0ce9bd47322)
+
+*Carousel configuration options in the block sidebar.*
+
+## FAQ
+
+### Does it work with Full Site Editing (FSE)?
+
+Yes! Carousel Kit is fully compatible with Full Site Editing. You can use the carousel block in templates, template parts, and anywhere blocks are supported.
+
+### Can I nest other blocks inside slides?
+
+Absolutely. Each slide is a container that accepts any WordPress block—images, paragraphs, groups, columns, and even other third-party blocks.
+
+### Does it support the Query Loop block?
+
+Yes. Simply add a Query Loop block inside the Carousel Viewport, and each post in the loop becomes a slide automatically. No special configuration needed.
+
+### Is it accessible?
+
+Yes. The carousel follows W3C accessibility guidelines with proper ARIA roles, labels, and full keyboard navigation support.
+
+### Can I have multiple carousels on the same page?
+
+Yes. Each carousel instance maintains its own independent state.
+
+## Changelog
+
+### 1.0.0 (2026-02-03)
+
+**Features:**
+- Initial release with compound block architecture
+- Embla Carousel integration with Interactivity API
+- Query Loop support for dynamic content
+- Autoplay with configurable delay and interaction controls
+- Vertical and horizontal axis support
+- Slides to scroll option
+- Example patterns: Hero, Logo Showcase, Testimonials
+
+**Bug Fixes:**
+- Fixed gap issue for carousel items
+
+See [CHANGELOG.md](CHANGELOG.md) for full release history.
+
+## Roadmap
+
+Planned features for upcoming releases:
+
+- [ ] **Parallax transition effect** — Parallax animation effect
+- [ ] **Thumbnail navigation** — Visual slide previews for navigation
+- [ ] **Lazy loading** — Defer off-screen slide content loading
+- [ ] **Loop/infinite scroll** — Seamless continuous scrolling
+- [ ] **Progress bar indicator** — Visual autoplay progress
+- [ ] **Breakpoint-specific settings** — Different slides per view at different screen sizes
+- [ ] **Additional patterns** — More pre-built carousel patterns
+
+Have a feature request? [Open an issue](https://github.com/rtCamp/carousel-kit/issues) on GitHub.
+
 ## Live Demo
 
-[**🚀 Try the Interactive Demo in WordPress Playground**](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/rtCamp/core-carousel/main/blueprint.json)
+[**🚀 Try the Interactive Demo in WordPress Playground**](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/rtCamp/carousel-kit/main/blueprint.json)
 
 ## Contributors
 
 - [Danish Shakeel](https://github.com/danish17)
-- [Masud Rana](https://github.com/mr-masudrana00)
+- [Masud Rana](https://github.com/theMasudRana)
 
 ## License
 GPL-2.0-or-later

blueprint.json

@@ -4,7 +4,7 @@
         "php": "8.2",
         "wp": "latest"
     },
-    "landingPage": "/core-carousel",
+    "landingPage": "/carousel-kit",
     "steps": [
         {
             "step": "installPlugin",
@@ -21,12 +21,12 @@
             "step": "importWxr",
             "file": {
                 "resource": "url",
-                "url": "https://raw.githubusercontent.com/rtCamp/core-carousel/main/examples/data/core-carousel.xml"
+                "url": "https://raw.githubusercontent.com/rtCamp/carousel-kit/main/examples/data/carousel-kit.xml"
             }
         },
         {
             "step": "runPHP",
-            "code": "<?php require_once 'wordpress/wp-load.php'; $posts = get_posts(['post_type'=>'page', 'title'=>'Core Carousel Interactive Demo']); if($posts) { update_option('show_on_front', 'page'); update_option('page_on_front', $posts[0]->ID); }"
+            "code": "<?php require_once 'wordpress/wp-load.php'; $posts = get_posts(['post_type'=>'page', 'title'=>'Carousel Kit Interactive Demo']); if($posts) { update_option('show_on_front', 'page'); update_option('page_on_front', $posts[0]->ID); }"
         }
     ]
 }

carousel-kit.php

@@ -0,0 +1,33 @@
+<?php
+/**
+ * Plugin Name: Carousel Kit
+ * Description: Carousel block using Embla and WordPress Interactivity API.
+ * Plugin URI:  https://github.com/rtCamp/carousel-kit
+ * Requires at least: 6.5
+ * Requires PHP: 7.4
+ * Author:      rtCamp
+ * Author URI:  https://rtcamp.com
+ * Contributors: iamdanih17, immasud
+ * License:     GPL2
+ * License URI: https://www.gnu.org/licenses/gpl-2.0.html
+ * Version:     1.0.0
+ * Text Domain: carousel-kit
+ *
+ * @package carousel-kit
+ */
+
+define( 'CAROUSEL_KIT_PATH', untrailingslashit( plugin_dir_path( __FILE__ ) ) );
+define( 'CAROUSEL_KIT_URL', untrailingslashit( plugin_dir_url( __FILE__ ) ) );
+define( 'CAROUSEL_KIT_BUILD_PATH', CAROUSEL_KIT_PATH . '/build' );
+define( 'CAROUSEL_KIT_BUILD_URL', CAROUSEL_KIT_URL . '/build' );
+
+require_once CAROUSEL_KIT_PATH . '/vendor/autoload.php';
+
+/**
+ * Plugin loader.
+ */
+function carousel_kit_loader() {
+	\Carousel_Kit\Plugin::get_instance();
+}
+
+carousel_kit_loader();

composer.json

@@ -1,5 +1,5 @@
 {
-	"name": "rtcamp/core-carousel",
+	"name": "rtcamp/carousel-kit",
 	"type": "wordpress-plugin",
 	"config": {
 		"allow-plugins": {
@@ -54,12 +54,12 @@
 	},
 	"autoload": {
 		"psr-4": {
-			"Core_Carousel\\": "inc/"
+			"Carousel_Kit\\": "inc/"
 		}
 	},
 	"autoload-dev": {
 		"psr-4": {
-			"Core_Carousel\\Tests\\": "tests/php/"
+			"Carousel_Kit\\Tests\\": "tests/php/"
 		}
 	},
 	"scripts": {

core-carousel.php

@@ -3,7 +3,7 @@
 This block uses the **WordPress Interactivity API** to manage state and logic. You can consume this state in your own custom blocks to build advanced features like progress bars, slide counters, or synchronized sliders.
 
 ## Store Namespace
-`core-carousel/carousel`
+`carousel-kit/carousel`
 
 ## Context (`CarouselContext`)
 
@@ -30,7 +30,7 @@ Create a progress bar that animates while the carousel is auto-playing.
 **save.tsx**
 ```jsx
 <div
-    data-wp-interactive="core-carousel/carousel"
+    data-wp-interactive="carousel-kit/carousel"
     data-wp-bind--key="context.timerIterationId"
     data-wp-bind--style="state.barDuration"
     data-wp-class--is-playing="context.isPlaying"
@@ -40,7 +40,7 @@ Create a progress bar that animates while the carousel is auto-playing.
 
 **view.ts**
 ```js
-store('core-carousel/carousel', {
+store('carousel-kit/carousel', {
     state: {
         get barDuration() {
             const { autoplay } = getContext();
@@ -64,7 +64,7 @@ Highlight slide content when active using the `callbacks.isSlideActive` helper.
 
 ```jsx
 <div
-    data-wp-interactive="core-carousel/carousel"
+    data-wp-interactive="carousel-kit/carousel"
     data-wp-class--is-active="callbacks.isSlideActive"
     className="my-card"
 >
@@ -78,8 +78,8 @@ Highlight slide content when active using the `callbacks.isSlideActive` helper.
 
 ### Editor Interactivity: "Find & Bind"
 Gutenberg's `InnerBlocks` can isolate React Contexts, causing state sync issues between parent and deeply nested children in the editor. To guarantee reliable interactivity:
-1. **Attach**: The Viewport component attaches the vanilla Embla instance directly to its DOM node using a Symbol key: `element[Symbol.for("core-carousel.carousel")] = embla`.
-2. **Find**: Child components (Controls/Dots) attempt to find the API via Context first. If missing, they traverse the DOM up to the common wrapper (`.core-carousel`) and then search for the sibling `.embla` viewport.
+1. **Attach**: The Viewport component attaches the vanilla Embla instance directly to its DOM node using a Symbol key: `element[Symbol.for("carousel-kit.carousel")] = embla`.
+2. **Find**: Child components (Controls/Dots) attempt to find the API via Context first. If missing, they traverse the DOM up to the common wrapper (`.carousel-kit`) and then search for the sibling `.embla` viewport.
 3. **Bind**: A retry mechanism (`setTimeout` + `useEffect`) ensures the Viewport has finished initializing before binding listeners.
 
 ### Dots Implementation

docs/API.md

@@ -1,4 +1,4 @@
-# Contributing to Core Carousel
+# Contributing to Carousel Kit
 
 Thank you for your interest in contributing! We welcome all contributions, from bug reports to feature requests and code changes.
 
@@ -38,4 +38,4 @@ To create a production-ready ZIP file:
 make zip
 ```
 
-This will create `core-carousel.zip` in the project root, optimized for distribution (no dev dependencies).
+This will create `carousel-kit.zip` in the project root, optimized for distribution (no dev dependencies).