Block System Architecture
The heart of Autofocus is our expandable block system - a modular architecture that lets creators build rich, interactive content experiences. Each block type serves a specific purpose while maintaining consistent APIs and rendering patterns.
🧩 How Blocks Work
Universal Structure
Every block follows a consistent data structure with type, content, metadata, and ordering information.
Rendering Pipeline
Blocks are dynamically rendered based on type, with edit/view modes and real-time updates.
📦 Available Block Types
Text/Markdown Block
Rich text content with full markdown support including headers, lists, links, and formatted text.
Key Features
API Structure
{
"type": "markdown",
"content": {
"text": "# My heading\n\nThis is **bold** text with a [link](https://example.com)."
}
}Image Block
Single image display with optional captions, alt text, and click-through links.
Key Features
API Structure
{
"type": "image",
"content": {
"url": "https://example.com/image.jpg",
"alt": "Description",
"caption": "Image caption"
}
}Image Gallery Block
Multiple images in a responsive grid layout with lightbox functionality.
Key Features
API Structure
{
"type": "image_gallery",
"content": {
"images": [
{"url": "image1.jpg", "caption": "Photo 1"},
{"url": "image2.jpg", "caption": "Photo 2"}
]
}
}Link Block
Rich link previews with automatic metadata fetching and custom styling.
Key Features
API Structure
{
"type": "link",
"content": {
"url": "https://example.com",
"title": "Custom Title",
"description": "Custom description"
}
}Kanban Board
Interactive task management with drag-and-drop columns and cards.
Key Features
API Structure
{
"type": "kanban",
"content": {
"columns": [
{
"title": "To Do",
"cards": [{"title": "Task 1", "description": "Details"}]
}
]
}
}Checklist Block
Interactive checklists with persistent state and progress indicators.
Key Features
API Structure
{
"type": "checklist",
"content": {
"items": [
{"text": "Item 1", "completed": false},
{"text": "Item 2", "completed": true}
]
}
}Code Editor Block
Syntax-highlighted code blocks with multiple language support and themes.
Key Features
API Structure
{
"type": "code",
"content": {
"code": "console.log('Hello World');",
"language": "javascript",
"theme": "dark"
}
}Audio Block
Audio player with waveform visualization and podcast-style controls.
Key Features
API Structure
{
"type": "audio",
"content": {
"url": "https://example.com/audio.mp3",
"title": "Audio Title",
"duration": 180
}
}Record/Receipt Block
Structured data for tracking expenses, records, and financial information.
Key Features
API Structure
{
"type": "record",
"content": {
"type": "expense",
"amount": 29.99,
"date": "2024-01-15",
"category": "Software"
}
}Social Media Share Block
Social media profile links with custom icons and engagement metrics.
Key Features
API Structure
{
"type": "social_media",
"content": {
"platform": "twitter",
"username": "example",
"url": "https://twitter.com/example"
}
}3D Model Viewer (STL)
Interactive 3D model viewer supporting STL files with zoom and rotation.
Key Features
API Structure
{
"type": "stl_viewer",
"content": {
"url": "https://example.com/model.stl",
"title": "3D Model",
"description": "Model description"
}
}Shop Block
E-commerce integration with product listings and affiliate links.
Key Features
API Structure
{
"type": "shop",
"content": {
"products": [
{
"title": "Product Name",
"price": "$29.99",
"url": "https://example.com/buy"
}
]
}
}Location Block
Interactive maps with custom markers and location information.
Key Features
API Structure
{
"type": "location",
"content": {
"latitude": 40.7128,
"longitude": -74.0060,
"title": "New York City",
"description": "Location details"
}
}Menu Block
Structured menu system for restaurants, services, or product catalogs.
Key Features
API Structure
{
"type": "menu",
"content": {
"categories": [
{
"name": "Appetizers",
"items": [{"name": "Item", "price": "$9.99"}]
}
]
}
}⚙️ Block Operations
CRUD Operations
Advanced Features
👨💻 Creating Custom Blocks
Block Component Structure
// MyCustomBlock.js
export default function MyCustomBlock({
id,
content,
isEditing,
onEdit,
onDelete,
onReorder
}) {
if (isEditing) {
return <MyCustomBlockEdit {...props} />
}
return (
<div className="custom-block">
{/* Render block content */}
</div>
)
}Registration Process
_blocks/index.js⚡ Performance & Optimization
Rendering Optimization
- • Virtual scrolling for large block lists
- • Lazy loading of heavy block types
- • Memoization of block components
- • Debounced auto-save functionality
- • Progressive image loading
Data Optimization
- • Selective field fetching from database
- • Client-side caching with state management
- • Optimistic updates for instant feedback
- • Batch operations for bulk changes
- • Content compression for large blocks