Component block

Component Block

The Component Block module seamlessly extends the Component Field system, allowing you to create reusable custom blocks using your theme's Single Directory Components (SDC). Turn any component from your theme into a flexible, configurable block that can be placed anywhere on your site.

Perfect for site builders who want to leverage their design system components as blocks without writing custom code. Create everything from simple call-to-action buttons to complex multi-component layouts with an intuitive drag-and-drop interface.

Key Features

🎨 Multi-Component Blocks

Create blocks containing one or multiple components from your theme. Build simple single-component blocks or complex multi-component sections with unlimited flexibility.

🔄 Auto-Discovery Integration

Automatically discovers all SDC components in your theme using the same robust system as Component Field. No manual configuration required - just place components in your theme and they're immediately available.

⚙️ Dynamic Configuration Forms

Generates intelligent configuration forms based on each component's YAML schema. Supports rich text (CKEditor5), entity references (media, nodes, taxonomy), and complex data types out of the box.

👀 Live Preview System

See exactly how your blocks will look while editing them. The live preview updates in real-time as you modify component configurations, ensuring perfect results every time.

📊 Advanced Block Management

Comprehensive admin interface with:

• Usage Statistics - Track which components are most popular
• Version Management - Detect when components change and update blocks
• Validation Monitoring - Identify configuration errors before they cause issues
• Bulk Operations - Manage multiple blocks efficiently

Perfect For

🎯 Site Builders

Create rich content layouts without touching code. Use your theme's design system components as building blocks for any page region.

🏗️ Frontend Developers

Bridge the gap between design systems and content management. Your carefully crafted components become instantly available to content creators.

📈 Content Teams

Build consistent, on-brand content sections with confidence. The configuration forms guide you through proper component usage while maintaining design integrity.

Requirements

Component Field module (required dependency)

Drupal 10.4+ or Drupal 11.0+

Theme with SDC components in components/ directory

Quick Start

1. Installation

Install via Composer (recommended):

composer require drupal/component_block
drush en component_block

2. Create Your First Component Block

Navigate to Structure → Custom block library → Add custom block → Component Block

3. Configure & Place

Select components, configure properties using the auto-generated forms, then place your block in any region via the standard block placement interface.

Block Strategies

Single Component Blocks

Perfect for reusable elements like call-to-action buttons, hero images, or contact forms. One component, infinite possibilities.

Multi-Component Sections

Combine related components to create rich content sections. Example: Header + description + image + button for feature highlights.

Component Collections

Build dynamic content areas with multiple similar components. Perfect for testimonials, team members, or product showcases.

Integration & Compatibility

Component Block works seamlessly with:

• Component Field - Shares the same discovery and configuration system
• Layout Builder - Component blocks work perfectly in Layout Builder layouts
• Content Moderation - Full workflow support for block content
• Media Management - Native support for media entity references
• Multilingual Sites - Translatable component configurations

Admin Interface Highlights

Block Overview Dashboard

Centralized management of all component blocks with filtering, search, and status indicators. Quickly identify which blocks need attention.

Component Usage Analytics

Detailed statistics showing component popularity, unused components, and usage patterns. Export reports for stakeholder communication.

Version Tracking

Automatically detects when theme components are updated and flags blocks that may need attention. Bulk update tools keep everything in sync.

Developer-Friendly

Extensible API

Rich hook system for customizing component discovery, validation, and rendering. Service-based architecture makes integration straightforward.

Theme Integration

Multiple template suggestions and CSS classes provide complete theming control. Maintains design system consistency while enabling customization.

Performance Optimized

Intelligent caching, lazy loading, and optimized database queries ensure excellent performance even with complex component configurations.

Example Component Configuration

Transform this theme component:

# themes/your_theme/components/card/card.component.yml
name: Card
props:
  title:
    type: string
    title: Card Title
  content:
    type: text
    format: html
  image:
    type: object
    title: Card Image

Into a powerful, configurable block with rich text editing, media selection, and live preview - all automatically generated from the component schema.

Support & Community

Documentation: Comprehensive README with examples and troubleshooting

Issue Queue: Active support and feature development

Integration: Built on proven Component Field architecture

Testing: Comprehensive test coverage for reliability

Get Started Today

Ready to transform your theme components into powerful custom blocks? Install Component Block and unlock the full potential of your design system. Your components deserve to be more than just theme templates - make them the building blocks of your entire site.