Réflexion sur les BlocTypes

Prérequis : Réflexion sur les Types

Objectif

Définir la structure de chaque BlocType avec ses champs, identifier les variantes et planifier les templates d'administration personnalisés.

Info

Cette étape est une réflexion. La création effective des BlocTypes dans le back-office se fera après le développement du code PHP.

Définir les BlocTypes

Info

Les préfixes numériques (01., 02., etc.) dans les noms des BlocTypes servent uniquement à les ordonner dans les listes du back-office. Ils ne sont pas affichés au contributeur lors de la création de contenu.

BlocType 1 : Hero (H1)

Usage : Toutes les pages

Nom : 01. Hero (H1) Vue : bloc_hero

  1. lang : Contenu associé pour l'autre langue (string)
  2. title : Titre H1 (string, requis)
  3. breadcrumbTitle : Titre pour le fil d'ariane (string, optionnel)
  4. description : Description WYSIWYG (string, requis)
  5. image : Image de fond (file PNG/JPG, optionnel)
  6. ctaTitle : Titre du CTA primaire (string, optionnel)
  7. ctaTarget : Cible du CTA primaire (string, optionnel)
  8. ctaSecondaryTitle : Titre du CTA secondaire (string, optionnel)
  9. ctaSecondaryTarget : Cible du CTA secondaire (string, optionnel)
Champs :

Champs obligatoires : title, description

BlocType 2 : Titre (H2 - H4)

Usage : Pages de documentation

Nom : 03. Titre (H2 - H4) Vue : bloc_title

  1. hn : Niveau du titre (dropdown H2/H3/H4, requis)
  2. title : Texte du titre (string, requis)
Champs :

Champs obligatoires : hn, title

BlocType 3 : Content

Usage : Pages de documentation

Nom : 04. Content Vue : bloc_content

  1. content : Contenu riche (WYSIWYG, requis)
Champs :

  1. Toolbar : bold, italic, underline, list, link
  2. Formats autorisés : bold, italic, link, underline, list
Options WYSIWYG :

Champs obligatoires : content

BlocType 4 : Code

Usage : Pages de documentation

Nom : 06. Code Vue : bloc_code

  1. language : Langage utilisé (dropdown, requis)
  2. code : Bloc de code (textarea, requis)
Champs :

Langages disponibles : PHP, SQL, JSON, Typescript, HTML, SCSS, Javascript, CSS, Bash, Texte, GraphQL

Champs obligatoires : language, code

BlocType 5 : Info

Usage : Pages de documentation

Nom : 05. Info Vue : bloc_info

  1. type : Type d'alerte (dropdown info/warning/error, requis)
  2. title : Titre de l'infobox (string, requis)
  3. content : Contenu de l'infobox (WYSIWYG, requis)
Champs :

  1. Toolbar : bold, italic, underline, list
  2. Formats autorisés : bold, italic, underline, list
Options WYSIWYG :

Champs obligatoires : type, title, content

BlocType 6 : Feature (H3)

Usage : Page d'accueil

Nom : 02. Feature (H3) Vue : bloc_feature

  1. icon : Icône SVG (file SVG, requis)
  2. title : Titre H3 (string, requis)
  3. description : Description courte (WYSIWYG, requis)
Champs :

  1. Toolbar : bold, italic, underline, list
  2. Formats autorisés : bold, italic, underline, list
Options WYSIWYG :

Champs obligatoires : icon, title, description

BlocType 7 : Cta

Usage : Page d'accueil et documentation

Nom : 04. Cta Vue : bloc_cta

  1. title : Titre H2 (string, requis)
  2. description : Description (WYSIWYG, requis)
  3. ctaTitle : Titre du bouton (string, requis)
  4. ctaTarget : Cible du lien (string, requis)
Champs :

  1. Toolbar : bold, italic, underline, list
  2. Formats autorisés : bold, italic, underline, list
Options WYSIWYG :

Champs obligatoires : title, description, ctaTitle, ctaTarget

BlocType 8 : Card

Usage : Page de contact

Nom : 04. Card Vue : bloc_card

  1. icon : Icône SVG (file SVG, requis)
  2. title : Titre (string, requis)
  3. description : Description (WYSIWYG, requis)
  4. link : Titre du lien (string, optionnel)
  5. linkRoute : Cible du lien (string, optionnel)
  6. linkUrl : URL brute (string, optionnel)
Champs :

  1. Toolbar : bold, italic, underline
  2. Formats autorisés : bold, italic, underline
Options WYSIWYG :

Champs obligatoires : icon, title, description

BlocType 9 : Contact

Usage : Page de contact uniquement

Nom : 07. Contact Vue : bloc_contact

  1. title : Titre du formulaire H2 (string, requis)
  2. successTitle : Titre en cas de succès H2 (string, requis)
  3. success : Message de succès (WYSIWYG, requis)
Champs :

  1. Toolbar : bold, italic, underline
  2. Formats autorisés : bold, italic, underline
Options WYSIWYG :

Champs obligatoires : title, successTitle, success

Identifier les Variantes

Hero : Variantes selon le Type de Page

Le BlocType Hero contient tous les champs possibles. Les variantes sont gérées au niveau du widget PHP :

  1. Affiche : title, description, image, ctaTitle, ctaTarget, ctaSecondaryTitle, ctaSecondaryTarget
  2. Masque : breadcrumbTitle
  3. Layout : Pleine largeur avec image de fond
Variante Home :

  1. Affiche : title, description, breadcrumbTitle
  2. Masque : image, CTA
  3. Layout : Simplifié sans image
Variante Documentation :

  1. Affiche : title, description
  2. Masque : image, CTA, breadcrumbTitle
  3. Layout : Simplifié sans image
Variante Contact :

Champ lang : Présent dans toutes les variantes pour la liaison multilingue

Templates d'Administration

Certains BlocTypes nécessitent des interfaces personnalisées dans le back-office pour améliorer l'expérience de saisie.

Template 1 : bloc_hero.php

BlocType : Hero (H1)

Besoin : Dropdowns pour sélectionner les cibles

  1. lang : Dropdown listant tous les Nodes/Composites pour liaison FR/EN
  2. ctaTarget : Dropdown listant tous les Nodes/Composites
  3. ctaSecondaryTarget : Dropdown listant tous les Nodes/Composites
Champs concernés :

Raison : Évite la saisie manuelle de routes, affiche une liste organisée par type (Rubriques/Articles) avec indication de langue

Template 2 : bloc_cta.php

BlocType : Cta

Besoin : Dropdown pour sélectionner la cible

  1. ctaTarget : Dropdown listant tous les Nodes/Composites
Champs concernés :

Raison : Évite la saisie manuelle de routes, propose tous les contenus disponibles

Template 3 : bloc_card.php

BlocType : Card

Besoin : Dropdown pour sélectionner la cible

  1. linkRoute : Dropdown listant tous les Nodes/Composites
Champs concernés :

Raison : Évite la saisie manuelle de routes, permet de choisir facilement le contenu cible

Récapitulatif

BlocTypes Définis

Total : 9 BlocTypes

Avec variantes : 1 (Hero) Avec templates admin : 3 (Hero, Cta, Card)

Liste Complète

  1. Hero (H1) - bloc_hero - Template admin
  2. Titre (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 - Template admin
  8. Card - bloc_card - Template admin
  9. Contact - bloc_contact

Validation

Avant de continuer, vérifier :

  1. 9 BlocTypes définis avec leurs champs
  2. Champs obligatoires identifiés pour chaque BlocType
  3. Variantes du Hero planifiées
  4. 3 templates d'admin à développer identifiés

<< Réflexion sur les Types Fondations Communes >>