PHPackages iamgerwin/nova-reusable-blocks - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [API Development](/categories/api) 4. / 5. iamgerwin/nova-reusable-blocks ActiveLibrary[API Development](/categories/api) iamgerwin/nova-reusable-blocks ============================== A Laravel Nova package for creating reusable section blocks for headless CMS API responses 0.0.3(7mo ago)04[3 PRs](https://github.com/iamgerwin/nova-reusable-blocks/pulls)MITPHPPHP ^8.2CI passing Since Oct 15Pushed 1mo agoCompare [ Source](https://github.com/iamgerwin/nova-reusable-blocks)[ Packagist](https://packagist.org/packages/iamgerwin/nova-reusable-blocks)[ Docs](https://github.com/iamgerwin/nova-reusable-blocks)[ GitHub Sponsors](https://github.com/:vendor_name)[ RSS](/packages/iamgerwin-nova-reusable-blocks/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependencies (13)Versions (7)Used By (0) Nova Reusable Blocks ==================== [](#nova-reusable-blocks) [![Latest Version on Packagist](https://camo.githubusercontent.com/209b6763e0d2a3cb292b5925091ad533ff8983e3abb03b437f4887cf99423e41/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f69616d67657277696e2f6e6f76612d7265757361626c652d626c6f636b732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/iamgerwin/nova-reusable-blocks)[![GitHub Tests Action Status](https://camo.githubusercontent.com/d673a8bbe5e4ff3b9d88e3b46f22d781de0eb5440470d75f503bbf47997fce60/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f69616d67657277696e2f6e6f76612d7265757361626c652d626c6f636b732f72756e2d74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/iamgerwin/nova-reusable-blocks/actions?query=workflow%3Arun-tests+branch%3Amain)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/7d26c558a37cfebc7adbff0f5aaafd8f36f3984f648fc71225ab06c6e2e7340c/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f69616d67657277696e2f6e6f76612d7265757361626c652d626c6f636b732f6669782d7068702d636f64652d7374796c652d6973737565732e796d6c3f6272616e63683d6d61696e266c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/iamgerwin/nova-reusable-blocks/actions?query=workflow%3A%22Fix+PHP+code+style+issues%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/7e1ac32eb87688d4d4ccb3850fc17c726b20d5a9e55f8a2befdb52d53cfc882b/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f69616d67657277696e2f6e6f76612d7265757361626c652d626c6f636b732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/iamgerwin/nova-reusable-blocks) A Laravel Nova package that provides reusable section blocks for building dynamic, headless CMS API responses. Perfect for creating flexible page layouts that can be consumed by frontend applications. > "Because sometimes your CMS needs more blocks than a Minecraft world." ๐ŸŽฎ Features -------- [](#features) - ๐ŸŽ  **Carousel Banner Block** - Fully-featured carousel with customizable slides, transitions, and interactive elements - ๐Ÿฆธ **Hero Block** - Dynamic hero sections with image, video, or carousel options - ๐Ÿ“ **Hero Text Block** - Text-only hero sections for simple headers - ๐Ÿ–ผ๏ธ **Gallery Block** - Image galleries with MediaHub support - ๐ŸŒ† **Image Divider Block** - Content dividers with images and CTAs - ๐Ÿ“„ **WYSIWYG Block** - Rich text content with flexible editor support - ๐Ÿ”ง **Extensible Architecture** - Easy to add your own custom blocks - ๐Ÿ“ฑ **Headless CMS Ready** - Designed for API consumption by frontend frameworks - ๐ŸŽจ **Rich Configuration** - Comprehensive options via enums for type safety - ๐Ÿ–ผ๏ธ **Media Flexible** - Works with Nova MediaHub or standard Image fields - โœจ **PHP 8.2+** - Modern PHP with strict types and enums Installation ------------ [](#installation) You can install the package via composer: ``` composer require iamgerwin/nova-reusable-blocks ``` The package requires: - PHP 8.2 or higher - Laravel 10.0, 11.0, or 12.0 - Laravel Nova 4.0 or higher - `whitecube/nova-flexible-content` package Usage ----- [](#usage) ### Basic Usage [](#basic-usage) In your Nova Resource, use the `Section` class to add flexible content blocks: ``` use Iamgerwin\NovaReusableBlocks\Section; public function fields(NovaRequest $request) { return [ // Other fields... Section::all('content'), // 'content' is the database column name // More fields... ]; } ``` This will add a flexible content field with all available blocks (currently includes the Carousel Banner block). ### Hide Create Button [](#hide-create-button) If you want to hide the "Add Blocks" button until the resource is created: ``` Section::all('content', hideCreate: true) ``` ### Custom Field Name [](#custom-field-name) Use a different field name for your flexible content: ``` Section::all('page_data') // Will store in 'page_data' column ``` Available Blocks ---------------- [](#available-blocks) ### Hero Block [](#hero-block) A flexible hero component supporting image, video, or carousel backgrounds. Uses MediaHub when available or falls back to Image/URL fields. ### Hero Text Block [](#hero-text-block) A simple hero section with title, subtitle, and description. ### Carousel Banner Block [](#carousel-banner-block) The Carousel Banner is a feature-rich content block that creates dynamic image carousels with customizable options. ### Features [](#features-1) - **Multiple Slides** - Add unlimited slides with images, titles, descriptions, and CTAs - **Auto Play** - Configurable auto-play with adjustable speed (1000-10000ms) - **Transition Effects** - Choose from Slide, Fade, Cube, Coverflow, Flip, or Cards - **Navigation Controls** - Optional arrows and pagination dots - **Aspect Ratios** - 16:9 (standard), 21:9 (cinematic), or 3:1 (panoramic) - **Width Options** - Full width or constrained container - **Button Customization** - Size, color palette, variant, and target options - **Content Positioning** - 9-point grid for overlay positioning - **Accessibility** - Alt text support and keyboard navigation ready ### Configuration Options [](#configuration-options) #### Carousel Settings [](#carousel-settings) OptionTypeDefaultRangeDescriptionAuto PlayBoolean`true`-Enable automatic slide progressionAuto Play SpeedNumber`5000ms`1000-10000msTime between transitionsShow NavigationBoolean`true`-Display navigation arrowsShow DotsBoolean`true`-Display pagination dotsTransition EffectSelect`slide`6 optionsAnimation styleTransition SpeedNumber`300ms`100-2000msTransition durationPause on HoverBoolean`true`-Pause on mouse hoverAspect RatioSelect`16:9`3 optionsCarousel dimensionsWidthSelect`normal_width`2 optionsContainer width#### Slide Settings [](#slide-settings) Each slide includes: - **Image** - Background image (MediaHub or standard upload) - **Title** - Optional headline text - **Description** - Optional body text - **Button** - Optional CTA with link - **Button Target** - `_self` or `_blank` - **Button Size** - Small or Large - **Button Color Palette** - Light, Light Text, or Dark - **Button Variant** - Outline or Underline - **Content Position** - 9-point positioning grid - **Alt Text** - Accessibility description ### API Response Structure [](#api-response-structure) The carousel data will be available in your API responses in this format: ``` { "type": "carousel-banner", "attributes": { "slides": [ { "layout": "carousel-slide", "attributes": { "slide_image": "https://example.com/image.jpg", "title": "Welcome", "description": "Discover amazing content", "button_text": "Learn More", "button_link": "https://example.com/learn", "button_target": "_self", "button_size": "lg", "button_color_palette": "light", "button_variant": "outline", "content_position": "center", "alt_text": "Welcome banner" } } ], "banner_title": "Featured Content", "banner_description": "Check out our latest updates", "auto_play": true, "auto_play_speed": 5000, "show_navigation": true, "show_dots": true, "transition_effect": "slide", "transition_speed": 300, "pause_on_hover": true, "aspect_ratio": "16:9", "width": "normal_width" } } ``` ### Gallery Block [](#gallery-block) Display multiple images in a gallery format. Supports MediaHub for advanced media management or falls back to text input for image URLs. ### Image Divider Block [](#image-divider-block) A content divider section with an image, title, subtitle, and optional CTA button. Choose between two layout options (image left or right). ### WYSIWYG Block [](#wysiwyg-block) Rich text content block with flexible editor support. Automatically detects and uses: - TinymceEditor (if installed) - Trix (Nova's default rich text editor) - Textarea (fallback for HTML/Markdown) Includes optional table of contents display. Extending with Custom Blocks ---------------------------- [](#extending-with-custom-blocks) You can easily create your own blocks by extending the `Section` class: ``` use Iamgerwin\NovaReusableBlocks\Section as BaseSection; use Laravel\Nova\Fields\Text; use Laravel\Nova\Fields\Textarea; class CustomSection extends BaseSection { protected static function getDefaultBlocks(): array { return [ ...parent::getDefaultBlocks(), // Include default blocks static::heroBlock(), static::testimonialBlock(), ]; } protected static function heroBlock(): array { return static::registerBlock( 'Hero Section', 'hero-section', [ Text::make('Headline', 'headline')->rules('required'), Textarea::make('Subheadline', 'subheadline'), Text::make('CTA Text', 'cta_text'), Text::make('CTA Link', 'cta_link'), ] ); } } ``` Then use your custom class in your Nova Resource: ``` CustomSection::all('content') ``` Media Field Compatibility ------------------------- [](#media-field-compatibility) The package automatically detects if you have `outl1ne/nova-media-hub` installed: - **With MediaHub**: Uses `MediaHubField` for advanced media management - **Without MediaHub**: Falls back to Laravel Nova's standard `Image` field No configuration neededโ€”it just works! Frontend Implementation ----------------------- [](#frontend-implementation) ### Recommended Libraries [](#recommended-libraries) - **Swiper.js** - Full-featured with all transition effects - **Glide.js** - Lightweight alternative - **Keen Slider** - Performance-focused ### Implementation Tips [](#implementation-tips) 1. **Responsive Design** - Adapt aspect ratios for mobile devices 2. **Accessibility** - Implement keyboard navigation and ARIA labels 3. **Performance** - Lazy load images for Core Web Vitals 4. **Touch Support** - Enable swipe gestures on mobile 5. **Fallbacks** - Provide static image fallback for no-JS scenarios Testing ------- [](#testing) ``` composer test ``` Code Style ---------- [](#code-style) The package uses Laravel Pint for code styling: ``` composer format ``` Static Analysis --------------- [](#static-analysis) Run PHPStan for static analysis: ``` composer analyse ``` Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for recent changes. Contributing ------------ [](#contributing) Contributions are welcome! Please feel free to submit a Pull Request. This project follows [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) for commit messages. Please read our [Contributing Guide](CONTRIBUTING.md) for detailed information about: - Commit message format and examples - Development workflow - Coding standards - Pull request guidelines Security Vulnerabilities ------------------------ [](#security-vulnerabilities) Please review [our security policy](../../security/policy) on how to report security vulnerabilities. Credits ------- [](#credits) - [iamgerwin](https://github.com/iamgerwin) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 34 โ€” LowBetter than 77% of packages Maintenance78 Regular maintenance activity Popularity3 Limited adoption so far Community9 Small or concentrated contributor base Maturity42 Maturing project, gaining track record Bus Factor1 Top contributor holds 86.4% of commits โ€” single point of failure How is this calculated?**Maintenance (25%)** โ€” Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** โ€” Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** โ€” Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** โ€” Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~0 days Total 3 Last Release 215d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/8f6f1736b8e2833ccb6c4098e4ecb5081d9cd5db2af370fde0365d441fbfbf59?d=identicon)[iamgerwin](/maintainers/iamgerwin) --- Top Contributors [![iamgerwin](https://avatars.githubusercontent.com/u/1331683?v=4)](https://github.com/iamgerwin "iamgerwin (19 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (2 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (1 commits)") --- Tags blockslaravelnovasectionslaravelcarouselnovalaravel-novaheadless cmsGerwinnova-blocksreusable-blocksnova-reusable-blocks ### Code Quality TestsPest Static AnalysisPHPStan Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/iamgerwin-nova-reusable-blocks/health.svg) ``` [![Health](https://phpackages.com/badges/iamgerwin-nova-reusable-blocks/health.svg)](https://phpackages.com/packages/iamgerwin-nova-reusable-blocks) ``` ### Alternatives [dedoc/scramble Automatic generation of API documentation for Laravel applications. 2.0k7.8M57](/packages/dedoc-scramble)[scalar/laravel Render your OpenAPI-based API reference 6183.9k2](/packages/scalar-laravel)[ryangjchandler/bearer Minimalistic token-based authentication for Laravel API endpoints. 8129.8k](/packages/ryangjchandler-bearer)[combindma/laravel-facebook-pixel Meta pixel integration for Laravel 4956.9k](/packages/combindma-laravel-facebook-pixel)[stechstudio/laravel-hubspot A Laravel SDK for the HubSpot CRM Api 2971.0k](/packages/stechstudio-laravel-hubspot)[njoguamos/laravel-plausible A laravel package for interacting with plausible analytics api. 208.8k](/packages/njoguamos-laravel-plausible) PHPackages ยฉ 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)