Modular Carousel Component with Custom Gutenberg Blocks

Overview

Role

Web Developer

Company

TechnologyAdvice

Tech Stack

JavaScript, React, PHP, Splide.js, SCSS

At TechnologyAdvice, I led the development of a modular, accessible carousel component as a custom Gutenberg block for deployment across a large portfolio of full-site editing (FSE) WordPress properties with distinct brands. Designed to be theme-agnostic and highly configurable, it empowered content creators to add and customize carousels without developer support—while ensuring code maintainability, optimal performance, and a consistent user experience.

Key Features

• Modular architecture: The carousel block was built as a reusable, extensible Gutenberg component, compatible across all FSE-enabled themes in the company web portfolio.
• Custom controls: Set pagination, slides per page, spacing, breakpoints, and custom styling directly in the block editor.
• Accessibility first: Leveraged Splide.js for ARIA support and keyboard nav, aligned to WCAG 2.1.
• Performance conscious: Conditionally enqueued scripts and styles, keeping bundle size minimal.
• Flexible content: Slides support images, text, buttons, or nested custom blocks.

Challenges & Solutions

• Cross-theme consistency: Used scoped styles, CSS variables, and a config-driven approach to respect each theme’s design system.
• Plugin bloat: Built custom controls in React to negate multiple third-party carousel plugins.

Impact

• Streamlined editorial workflow: Content teams can build interactive carousels without developer help.
• Reduced maintenance overhead: Consolidated several site-specific implementations into one unified block suite.
• Improved UX metrics: Enhanced load times and accessibility scores on key landing pages.

Sample Screenshots

• 
• 
• 
• 
• 
• 

This project reflects work I contributed to while employed at TechnologyAdvice. Screenshots shown are of publicly available content and are shared solely for demonstration purposes.