diff --git a/memory-bank/activeContext.md b/memory-bank/activeContext.md
index a6e1aee5d..af622d061 100644
--- a/memory-bank/activeContext.md
+++ b/memory-bank/activeContext.md
@@ -13,13 +13,18 @@ The Page Constructor library is currently focused on providing a comprehensive s
Recent development has focused on:
-1. **Text Size Enhancement**: Updated `textSize` constant in `src/schema/validators/common.ts`:
-
- - **Previous values**: `['s', 'm', 'l']`
- - **Current values**: `['xs', 's', 'sm', 'm', 'l']`
- - Added new smaller sizes: `'xs'` (extra small) and `'sm'` (small-medium)
- - This affects all components that use text sizing: Links, FileLinkProps, TitleProps, and various blocks
- - Updated TypeScript type `TextSize` to include new values
+1. **HeaderBlock Enhancements**: Significant updates to HeaderBlock with new functionality:
+
+ - **New Content Properties**: Added `additionalInfo`, `overtitle`, and `status` for richer content structure
+ - **Custom Rendering**: Added `renderTitle` function prop for custom title rendering
+ - **Enhanced Background Support**: New `fullWidthMedia` property for full-width media backgrounds
+ - **Improved Media Control**: Added `mediaView` and `mediaClassName` for better media customization
+ - **Layout Customization**: Added `contentWrapperClassName` for custom styling of the content-wrapper element
+ - **Content Inner Customization**: Added `contentInnerClassName` for custom styling of the content-inner element
+ - **Accessibility Improvements**: Enhanced ARIA support with `useUniqId()` and proper labeling
+ - **Context Integration**: Better integration with `useWindowWidth` and responsive breakpoints
+ - **Component Architecture**: Refactored background rendering into separate `Background` and `FullWidthBackground` components
+ - **Props Refactoring**: Renamed `containerFluidClassName` to `contentWrapperClassName` for better clarity
2. **Card Component Standardization**: Updated BasicCard, LayoutItem, BackgroundCard, and ImageCard with consistent patterns:
@@ -41,6 +46,8 @@ Recent development has focused on:
- **Component Structure**: The library follows a hierarchical component structure with blocks, sub-blocks, and base components
- **Context Providers**: Multiple context providers manage different aspects of the application (theme, mobile detection, analytics, etc.)
- **Type System**: A comprehensive TypeScript type system ensures type safety and developer experience
+- **Responsive Design**: Enhanced integration with window width context and breakpoint constants for better mobile adaptation
+- **Component Composition**: Complex blocks like HeaderBlock use internal component composition (Background, FullWidthBackground) for better maintainability
### Block System
@@ -102,10 +109,15 @@ The following areas are being considered for future development:
### Recent Achievements
-1. **Accessibility Enhancement**: Improved ARIA support across card components with proper ID management
-2. **Control Positioning Flexibility**: New `controlPosition` prop provides better layout control
-3. **Theme Integration**: Consistent theme support using `getThemedValue` utility
-4. **Component Consistency**: Standardized patterns across card components improve maintainability
+1. **HeaderBlock Enhancement**: Significant improvements to HeaderBlock functionality:
+
+ - Improved media control with `mediaClassName` props
+ - Added layout customization with `contentWrapperClassName` prop
+
+2. **Accessibility Enhancement**: Improved ARIA support across components with proper ID management
+3. **Control Positioning Flexibility**: New `controlPosition` prop provides better layout control
+4. **Theme Integration**: Consistent theme support using `getThemedValue` utility
+5. **Component Consistency**: Standardized patterns across card components improve maintainability
### Documentation Updates
diff --git a/memory-bank/progress.md b/memory-bank/progress.md
index 86260fa37..5c66831bb 100644
--- a/memory-bank/progress.md
+++ b/memory-bank/progress.md
@@ -2,7 +2,7 @@
## Current Status
-The Page Constructor library is a mature and stable project that provides a comprehensive solution for building web pages using a component-based approach. It is currently at version 6.8.1 and follows semantic versioning for releases.
+The Page Constructor library is a mature and stable project that provides a comprehensive solution for building web pages using a component-based approach. It is currently at version 7.6.2 and follows semantic versioning for releases.
## What Works
@@ -19,12 +19,24 @@ The Page Constructor library is a mature and stable project that provides a comp
The library includes a comprehensive set of blocks for various use cases:
-- **Layout Blocks**: Header, ContentLayout, CardLayout
+- **Layout Blocks**: Header (with enhanced features), ContentLayout, CardLayout
- **Content Blocks**: Media, Banner, Info, Table, Tabs
- **Interactive Blocks**: Slider, Questions, FoldableList, Form
- **Feature Blocks**: PromoFeatures, ExtendedFeatures, Icons
- **Integration Blocks**: Map, Share, Companies
+#### HeaderBlock Enhanced Features
+
+The HeaderBlock has been significantly enhanced with new capabilities:
+
+- **Media Customization**: `mediaView` and `mediaClassName` props for better media control
+- **Layout Customization**: Multiple className props for fine-grained styling control:
+ - `gridClassName` for Grid component styling
+ - `contentWrapperClassName` for content wrapper styling
+ - `contentInnerClassName` for content inner element styling
+ - `mediaClassName` for media element styling
+- **Props Evolution**: Renamed `containerFluidClassName` to `contentWrapperClassName` for better clarity
+
### Sub-block Components
Recently updated sub-block components with enhanced consistency:
diff --git a/memory-bank/systemPatterns.md b/memory-bank/systemPatterns.md
index 8ad1eaa37..7217cfa80 100644
--- a/memory-bank/systemPatterns.md
+++ b/memory-bank/systemPatterns.md
@@ -74,6 +74,47 @@ Blocks are composed of smaller components and sub-blocks:
└───────────────────────────────┘
```
+### HeaderBlock Architecture
+
+HeaderBlock follows an enhanced architectural pattern with component composition:
+
+```
+┌─────────────────────────────────────┐
+│ HeaderBlock │
+├─────────────────────────────────────┤
+│ • useUniqId() for accessibility │
+│ • useWindowWidth() for responsive │
+│ • Theme support via getThemedValue │
+│ • Component composition pattern │
+├─────────────────────────────────────┤
+│ Background Components │
+│ • Background (media backgrounds) │
+│ • FullWidthBackground (full width) │
+├─────────────────────────────────────┤
+│ Content Structure │
+│ • overtitle (above title) │
+│ • title with custom rendering │
+│ • description and additionalInfo │
+│ • status element support │
+│ • buttons with ARIA labeling │
+├─────────────────────────────────────┤
+│ Layout Customization │
+│ • gridClassName for Grid styling │
+│ • contentWrapperClassName │
+│ • contentInnerClassName │
+│ • mediaClassName for media styling │
+└─────────────────────────────────────┘
+```
+
+Key HeaderBlock patterns:
+
+- **Component Composition**: Separate Background and FullWidthBackground components
+- **Enhanced Content**: Support for overtitle, additionalInfo, status, and custom title rendering
+- **Responsive Integration**: useWindowWidth hook and BREAKPOINTS constants
+- **Media Flexibility**: mediaView and mediaClassName for customization
+- **Layout Customization**: Multiple className props for fine-grained styling control
+- **Accessibility**: Proper ARIA labeling with titleId for button descriptions
+
### Card Component Architecture
Card components follow a consistent architectural pattern:
diff --git a/memory-bank/techContext.md b/memory-bank/techContext.md
index 596f84bdb..fde0d8f0f 100644
--- a/memory-bank/techContext.md
+++ b/memory-bank/techContext.md
@@ -60,8 +60,8 @@
- **Sub-blocks**: Components used within blocks (Cards, Quotes, etc.)
- **Components**: Basic UI elements (Button, Link, Image, etc.)
- **Grid**: Responsive layout system
-- **Context**: React context providers for various features
-- **Utils**: Utility functions and helpers
+- **Context**: React context providers for various features (including WindowWidthContext for responsive design)
+- **Utils**: Utility functions and helpers (including responsive breakpoint constants)
### Server-Side
@@ -81,6 +81,18 @@
- **iframe**: Isolated environment for rendering pages
- **Messaging**: Communication between editor and preview
+## Recent Technical Enhancements
+
+### HeaderBlock Technical Improvements
+
+- **Type Safety**: Extended TypeScript interfaces with new properties:
+ - `mediaClassName` for media element styling
+ - `gridClassName` for Grid component styling
+ - `contentWrapperClassName` for content wrapper styling
+ - `contentInnerClassName` for content inner element styling
+- **Props Refactoring**: Renamed `containerFluidClassName` to `contentWrapperClassName` for better semantic clarity
+- **Enhanced Layout Control**: Multiple className props provide fine-grained styling control over different HeaderBlock elements
+
## Technical Constraints
1. **Browser Compatibility**:
diff --git a/memory-bank/usage/headerBlock.md b/memory-bank/usage/headerBlock.md
new file mode 100644
index 000000000..5ec01a22e
--- /dev/null
+++ b/memory-bank/usage/headerBlock.md
@@ -0,0 +1,332 @@
+# HeaderBlock Usage
+
+This document outlines how the HeaderBlock is used and its recent enhancements in the page-constructor project.
+
+## Overview
+
+The HeaderBlock is a versatile block component that serves as a page header with support for titles, descriptions, media, backgrounds, and call-to-action buttons. It provides extensive customization options for layout, styling, and content presentation.
+
+## Recent Enhancements
+
+The HeaderBlock has been significantly enhanced with new functionality:
+
+### Layout Customization Props
+
+The HeaderBlock now supports multiple className props for fine-grained styling control:
+
+- **`gridClassName`**: Custom styling for the Grid component
+- **`contentWrapperClassName`**: Custom styling for the content wrapper element
+- **`contentInnerClassName`**: Custom styling for the content inner element
+- **`mediaClassName`**: Custom styling for media elements
+
+### Props Evolution
+
+- **Props Refactoring**: Renamed `containerFluidClassName` to `contentWrapperClassName` for better semantic clarity
+
+### Enhanced Content Structure
+
+- **`overtitle`**: Content displayed above the main title
+- **`additionalInfo`**: Additional information displayed after the description
+- **`status`**: Status element support within the title area
+- **`renderTitle`**: Custom function for rendering the title
+
+### Background and Media Features
+
+- **`fullWidthMedia`**: Support for full-width media backgrounds
+- **`mediaView`**: Control over media display mode ('full' by default)
+- **Component Composition**: Separate `Background` and `FullWidthBackground` components for better maintainability
+
+## Component Architecture
+
+```tsx
+type ElementsClassName = {
+ gridClassName?: string;
+ mediaClassName?: string;
+ contentWrapperClassName?: string;
+ contentInnerClassName?: string;
+};
+
+export type HeaderBlockFullProps = HeaderBlockProps & ClassNameProps & ElementsClassName;
+```
+
+### Internal Structure
+
+The HeaderBlock uses a sophisticated layout structure:
+
+```tsx
+
+ {/* Full width background */}
+ {backgroundThemed && fullWidth && }
+
+ {/* Media background */}
+ {backgroundThemed && }
+
+
+ {/* Breadcrumbs */}
+ {breadcrumbs && (
+
+
+
+
+
+ )}
+
+
+
+
+
+
+ {/* Content: overtitle, title, description, additionalInfo, buttons */}
+
+
+
+
+ {/* Right-side media */}
+ {hasRightSideImage && (
+
+ )}
+
+
+
+
+```
+
+## Key Features
+
+### Responsive Design Integration
+
+- **`useWindowWidth()`**: Hook for responsive behavior
+- **`BREAKPOINTS`**: Constants for consistent breakpoint handling
+- **Mobile Detection**: Automatic mobile detection for media rendering
+
+### Accessibility
+
+- **`useUniqId()`**: Generates unique IDs for accessibility
+- **ARIA Labeling**: Proper ARIA attributes for buttons with `titleId`
+- **Semantic HTML**: Uses proper `` element
+
+### Theme Support
+
+- **`getThemedValue()`**: Utility for theme-aware properties
+- **Theme Context**: Integration with the global theme system
+- **Themed Properties**: Support for light/dark theme variations
+
+## Usage Examples
+
+### Basic HeaderBlock
+
+```tsx
+
+```
+
+### With Custom Layout Styling
+
+```tsx
+
+```
+
+### With Enhanced Content
+
+```tsx
+Beta}
+ renderTitle={(title) => }
+/>
+```
+
+### With Full-Width Background
+
+```tsx
+
+```
+
+### With Media and Custom View
+
+```tsx
+
+```
+
+## Background Components
+
+### Background Component
+
+Handles media backgrounds with responsive behavior:
+
+```tsx
+const Background = ({background, isMobile}: BackgroundProps) => {
+ const {url, image, fullWidthMedia, video, color} = background;
+ const imageObject = url ? getMediaImage(url) : image;
+ const renderMedia = !isMobile || (typeof image === 'object' && 'mobile' in image);
+
+ return (
+
+ {renderMedia && (
+
+ )}
+
+ );
+};
+```
+
+### FullWidthBackground Component
+
+Handles full-width background colors:
+
+```tsx
+const FullWidthBackground = ({background}: FullWidthBackgroundProps) => (
+
+);
+```
+
+## Integration Patterns
+
+### With Breadcrumbs
+
+```tsx
+
+```
+
+### With Custom Buttons
+
+```tsx
+
+```
+
+## Best Practices
+
+### Layout Customization
+
+1. **Use Semantic Class Names**: When providing custom className props, use semantic names that describe the purpose
+2. **Maintain Consistency**: Keep styling consistent with the overall design system
+3. **Responsive Considerations**: Ensure custom styles work across different screen sizes
+
+### Content Structure
+
+1. **Hierarchy**: Use overtitle for context, title for main message, description for details
+2. **Accessibility**: Ensure proper heading hierarchy and ARIA labeling
+3. **Content Length**: Keep titles concise and descriptions informative but not overwhelming
+
+### Media Usage
+
+1. **Image Optimization**: Use appropriately sized and optimized images
+2. **Theme Support**: Provide both light and dark theme variants when needed
+3. **Mobile Adaptation**: Consider how media displays on mobile devices
+
+### Background Implementation
+
+1. **Performance**: Use appropriate image formats and sizes for backgrounds
+2. **Contrast**: Ensure sufficient contrast between background and text
+3. **Fallbacks**: Provide fallback colors for when images fail to load
+
+## Technical Implementation
+
+### Type Safety
+
+The HeaderBlock uses comprehensive TypeScript types:
+
+```tsx
+interface BackgroundProps {
+ background: HeaderBlockBackground;
+ isMobile: boolean;
+}
+
+interface FullWidthBackgroundProps {
+ background: HeaderBlockBackground;
+}
+
+type ElementsClassName = {
+ gridClassName?: string;
+ mediaClassName?: string;
+ contentWrapperClassName?: string;
+ contentInnerClassName?: string;
+};
+```
+
+### Context Integration
+
+- **Theme Context**: `useTheme()` for theme-aware rendering
+- **Window Width Context**: `useWindowWidth()` for responsive behavior
+- **Breakpoints**: `BREAKPOINTS` constants for consistent responsive design
+
+### Utility Functions
+
+- **`getThemedValue()`**: Resolves themed properties
+- **`getMediaImage()`**: Processes media URLs
+- **`mergeVideoMicrodata()`**: Adds structured data for videos
+- **`useUniqId()`**: Generates unique IDs for accessibility
+
+This enhanced HeaderBlock provides a powerful and flexible foundation for creating compelling page headers with extensive customization options while maintaining accessibility and performance standards.
diff --git a/src/blocks/Header/Header.tsx b/src/blocks/Header/Header.tsx
index d2b5fd225..12980e3ec 100644
--- a/src/blocks/Header/Header.tsx
+++ b/src/blocks/Header/Header.tsx
@@ -19,7 +19,14 @@ import {BREAKPOINTS} from '../../constants';
const b = block('header-block');
-export type HeaderBlockFullProps = HeaderBlockProps & ClassNameProps;
+type ElementsClassName = {
+ gridClassName?: string;
+ mediaClassName?: string;
+ contentWrapperClassName?: string;
+ contentInnerClassName?: string;
+};
+
+export type HeaderBlockFullProps = HeaderBlockProps & ClassNameProps & ElementsClassName;
interface BackgroundProps {
background: HeaderBlockBackground;
@@ -78,6 +85,7 @@ export const HeaderBlock = (props: React.PropsWithChildren
theme: textTheme = 'light',
verticalOffset = 'm',
className,
+ gridClassName,
breadcrumbs,
status,
renderTitle,
@@ -85,6 +93,9 @@ export const HeaderBlock = (props: React.PropsWithChildren
mediaView = 'full',
centered,
additionalInfo,
+ mediaClassName,
+ contentWrapperClassName,
+ contentInnerClassName,
} = props;
const windowWidth = useWindowWidth();
const isMobile = windowWidth <= BREAKPOINTS.sm;
@@ -122,7 +133,7 @@ export const HeaderBlock = (props: React.PropsWithChildren
>
{backgroundThemed && fullWidth && }
{backgroundThemed && }
-
+
{breadcrumbs && (