BlocTypes Planning

Define the structure of each BlocType with its fields, identify variants, and plan custom admin templates.

Usage: All pages

Name: 01. Hero (H1) View: bloc_hero

1. lang: Associated content for other language (string)
2. title: H1 title (string, required)
3. breadcrumbTitle: Title for breadcrumb (string, optional)
4. description: WYSIWYG description (string, required)
5. image: Background image (file PNG/JPG, optional)
6. ctaTitle: Primary CTA title (string, optional)
7. ctaTarget: Primary CTA target (string, optional)
8. ctaSecondaryTitle: Secondary CTA title (string, optional)
9. ctaSecondaryTarget: Secondary CTA target (string, optional)

Required fields: title, description

Usage: Documentation pages

Name: 03. Title (H2 - H4) View: bloc_title

1. hn: Title level (dropdown H2/H3/H4, required)
2. title: Title text (string, required)

Required fields: hn, title

Usage: Documentation pages

Name: 04. Content View: bloc_content

1. content: Rich content (WYSIWYG, required)

1. Toolbar: bold, italic, underline, list, link
2. Allowed formats: bold, italic, link, underline, list

Required fields: content

Usage: Documentation pages

Name: 06. Code View: bloc_code

1. language: Language used (dropdown, required)
2. code: Code block (textarea, required)

Available languages: PHP, SQL, JSON, Typescript, HTML, SCSS, Javascript, CSS, Bash, Text, GraphQL

Required fields: language, code

Usage: Documentation pages

Name: 05. Info View: bloc_info

1. type: Alert type (dropdown info/warning/error, required)
2. title: Infobox title (string, required)
3. content: Infobox content (WYSIWYG, required)

1. Toolbar: bold, italic, underline, list
2. Allowed formats: bold, italic, underline, list

Required fields: type, title, content

Usage: Home page

Name: 02. Feature (H3) View: bloc_feature

1. icon: SVG icon (file SVG, required)
2. title: H3 title (string, required)
3. description: Short description (WYSIWYG, required)

1. Toolbar: bold, italic, underline, list
2. Allowed formats: bold, italic, underline, list

Required fields: icon, title, description

Usage: Home and documentation pages

Name: 04. Cta View: bloc_cta

1. title: H2 title (string, required)
2. description: Description (WYSIWYG, required)
3. ctaTitle: Button title (string, required)
4. ctaTarget: Link target (string, required)

1. Toolbar: bold, italic, underline, list
2. Allowed formats: bold, italic, underline, list

Required fields: title, description, ctaTitle, ctaTarget

Usage: Contact page

Name: 04. Card View: bloc_card

1. icon: SVG icon (file SVG, required)
2. title: Title (string, required)
3. description: Description (WYSIWYG, required)
4. link: Link title (string, optional)
5. linkRoute: Link target (string, optional)
6. linkUrl: Raw URL (string, optional)

1. Toolbar: bold, italic, underline
2. Allowed formats: bold, italic, underline

Required fields: icon, title, description

Usage: Contact page only

Name: 07. Contact View: bloc_contact

1. title: Form H2 title (string, required)
2. successTitle: Success H2 title (string, required)
3. success: Success message (WYSIWYG, required)

1. Toolbar: bold, italic, underline
2. Allowed formats: bold, italic, underline

Required fields: title, successTitle, success

The Hero BlocType contains all possible fields. Variants are handled at PHP widget level:

1. Shows: title, description, image, ctaTitle, ctaTarget, ctaSecondaryTitle, ctaSecondaryTarget
2. Hides: breadcrumbTitle
3. Layout: Full-width with background image

1. Shows: title, description, breadcrumbTitle
2. Hides: image, CTA
3. Layout: Simplified without image

1. Shows: title, description
2. Hides: image, CTA, breadcrumbTitle
3. Layout: Simplified without image

lang field: Present in all variants for multilingual linking

Some BlocTypes require custom interfaces in the back-office to improve input experience.

BlocType: Hero (H1)

Need: Dropdowns to select targets

1. lang: Dropdown listing all Nodes/Composites for FR/EN linking
2. ctaTarget: Dropdown listing all Nodes/Composites
3. ctaSecondaryTarget: Dropdown listing all Nodes/Composites

Reason: Avoids manual route entry, displays organized list by type (Sections/Articles) with language indication

BlocType: Cta

Need: Dropdown to select target

1. ctaTarget: Dropdown listing all Nodes/Composites

Reason: Avoids manual route entry, provides all available content

BlocType: Card

Need: Dropdown to select target

1. linkRoute: Dropdown listing all Nodes/Composites

Reason: Avoids manual route entry, allows easy target content selection

Total: 9 BlocTypes

With variants: 1 (Hero) With admin templates: 3 (Hero, Cta, Card)

1. Hero (H1) - bloc_hero - Admin template
2. Title (H2-H4) - bloc_title
3. Content - bloc_content
4. Code - bloc_code
5. Info - bloc_info
6. Feature (H3) - bloc_feature
7. Cta - bloc_cta - Admin template
8. Card - bloc_card - Admin template
9. Contact - bloc_contact

Before continuing, verify:

1. 9 BlocTypes defined with their fields
2. Required fields identified for each BlocType
3. Hero variants planned
4. 3 admin templates to develop identified