README

Elayne Blocks

Custom WordPress blocks that work with any theme.

Description

Elayne Blocks is a WordPress plugin that provides custom Gutenberg blocks. While originally developed as a companion plugin for the Elayne theme, these blocks work with any WordPress theme - FSE (Full Site Editing) themes, block themes, or classic themes.

This plugin was created to align with WordPress.org Theme Review requirements, which prohibit custom block registration in themes. The blocks are theme-agnostic and can be used in any WordPress site.

Included Blocks

• Mega Menu Block (elayne/mega-menu) - Advanced navigation menu with mega menu functionality (works best with FSE/block themes)
• Carousel Block (elayne/carousel) - Responsive image/content carousel with Slick Carousel integration, thumbnails, and arrow customization
• Slide Block (elayne/slide) - Individual carousel slides with InnerBlocks support
• FAQ Tabs Block (elayne/faq-tabs) - Interactive FAQ with vertical tab navigation and dynamic content display
• Search Overlay Trigger Block (elayne/search-overlay-trigger) - Search icon that opens a full-screen search overlay

Requirements

• WordPress 6.7 or higher
• PHP 7.3 or higher
• Works with any WordPress theme (FSE, block, or classic)

Installation

1. Upload the elayne-blocks folder to the /wp-content/plugins/ directory
2. Activate the plugin through the 'Plugins' menu in WordPress
3. The blocks will be available in the block editor

Contributing

See CONTRIBUTING.md for development workflow and build instructions.

Block Details

Mega Menu Block

Advanced navigation block with template part integration for creating dynamic mega menus.

Features:

• WordPress Interactivity API integration
• Template part support
• Responsive design
• Keyboard navigation support

Carousel Block

Create responsive image/content carousels using Slick Carousel.

Features:

• Slick Carousel integration
• Thumbnail navigation (above/below/left/right)
• Center mode with configurable peek
• Variable width slides
• Lazy loading options
• Adaptive height support
• Arrow customization (SVG styles, backgrounds, sizes, custom SVG)
• Block patterns for common use cases
• Responsive breakpoints
• Touch/swipe support

Slide Block

Companion block for the Carousel block.

Features:

• InnerBlocks support for flexible content
• Works seamlessly with Carousel parent block

FAQ Tabs Block

Interactive FAQ block with vertical tab navigation and dynamic content display.

Features:

• Vertical tab navigation with questions
• Dynamic content area showing answers
• Customizable button with configurable text and URL
• WordPress Interactivity API integration
• Editable questions, titles, and descriptions via block inspector
• Responsive design with flexible layout

Search Overlay Trigger Block

A clickable search icon that opens a full-screen search overlay with smooth animations.

Features:

• Full-screen search overlay with backdrop blur
• Smooth fade-in/scale animations
• Auto-focus on search input when opened
• Multiple close methods (X button, backdrop click, Escape key)
• Body scroll lock when overlay active
• Responsive design optimized for mobile
• Vanilla JavaScript (no dependencies)
• ARIA labels and keyboard accessibility

License

GPL v3 or later - https://www.gnu.org/licenses/gpl-3.0.html

Credits

• Based on blocks originally developed for the Elayne theme
• Icon: IconPark Block One from Blade UI Kit
• Mega Menu block originally inspired by Human Made's HM Mega Menu Block and substantially enhanced with multiple layout modes, advanced positioning, focus management, and accessibility features
• Carousel block originally inspired by the Carousel Block Plugin by Virgiliu Diaconu, but completely reimplemented using Slick Carousel with a different feature set, extensive customization options, and distinct functionality
• Built with @wordpress/scripts
• Uses Slick Carousel library for carousel functionality

Support

For issues and feature requests, please visit: https://github.com/imagewize/elayne-blocks

Author

Jasper Frumau - https://github.com/imagewize