Régions & Blocs

🗺️ Les régions dans Drupal

Les régions sont des zones définies par le thème où l’on peut placer des blocs. Chaque thème définit ses propres régions.

Régions du thème par défaut (Olivero)

┌─────────────────────────────────────────────────────────────┐
│                    Primary menu                             │
├─────────────────────────────────────────────────────────────┤
│                    Secondary menu                           │
├─────────────────────────────────────────────────────────────┤
│  [Breadcrumb]                                               │
├─────────────────────────────────────────────────────────────┤
│                    Highlighted                              │
├─────────────────────────────────────────────────────────────┤
│             Help (messages système)                         │
├─────────────────────────────────────────────────────────────┤
│                      Content                                │
├───────────────────────────────────┬─────────────────────────┤
│          Content Below            │     Sidebar             │
├───────────────────────────────────┴─────────────────────────┤
│                   Footer Top                                │
├─────────────────────────────────────────────────────────────┤
│      Footer Bottom                                          │
└─────────────────────────────────────────────────────────────┘

Voir les régions

1. Appearance → Settings → [Votre thème]
2. Ou visitez : /admin/structure/block/demo/[theme_name]

🧱 Types de blocs

Type	Source	Exemple
System blocks	Core	Branding, Breadcrumb, Messages
Menu blocks	Core	Main menu, Footer menu
Views blocks	Views	Produits récents, Articles
Custom blocks	Content	Hero, Newsletter, Contact
Module blocks	Contrib	Formulaire, Slider

⚙️ Interface Block Layout

Accéder au Block Layout

1. Structure → Block layout
2. Ou /admin/structure/block

L’interface

┌─────────────────────────────────────────────────────────────┐
│ Block layout                                    [Demonstrate]│
├─────────────────────────────────────────────────────────────┤
│                                                             │
│ ▼ Primary menu                              [+ Place block] │
│   ├── Site branding                    [Configure] [Remove] │
│   └── Main navigation                  [Configure] [Remove] │
│                                                             │
│ ▼ Content                                   [+ Place block] │
│   ├── Page title                       [Configure] [Remove] │
│   └── Main page content                [Configure] [Remove] │
│                                                             │
│ ▼ Sidebar                                   [+ Place block] │
│   └── (empty)                                               │
│                                                             │
│ ▼ Footer Top                                [+ Place block] │
│   └── (empty)                                               │
│                                                             │
└─────────────────────────────────────────────────────────────┘

📌 Placer les blocs de base

1. Site Branding (Logo)

1. Dans la région Primary menu, vérifiez que Site branding est présent

2. Cliquez sur Configure

3. Options :

   • ☑ Site logo
   • ☑ Site name
   • ☐ Site slogan

4. Save block

2. Navigation principale

1. Vérifiez que Main navigation est dans Primary menu
2. Configurez :
   • Initial visibility level : 1
   • Number of levels to display : 2 (pour les sous-menus)

3. Breadcrumb (Fil d’Ariane)

1. Dans Breadcrumb, vérifiez que le bloc existe
2. Configurez la visibilité :
   • Pages : Ne pas afficher sur <front>

4. Messages système

1. Vérifiez que Status messages est dans Help
2. Ce bloc affiche les notifications (succès, erreurs)

5. Menu Footer

1. Dans Footer Top, cliquez Place block
2. Recherchez “Footer”
3. Sélectionnez Footer menu
4. Configurez les niveaux à afficher

🎨 Configurer un bloc

Options communes

Cliquez sur Configure pour accéder aux paramètres :

Paramètres de base

Option	Description
Block title	Titre affiché (ou ☐ pour masquer)
Display title	Afficher/masquer le titre

Visibilité

Par pages

Option	Pattern
Toutes sauf listées	<front>
Seulement listées	/shop\n/shop/*
Pattern	/node/*\n!/node/*/edit

Utilisez * comme wildcard et ! pour exclure.

Par type de contenu

Cochez les types de contenu où le bloc doit apparaître :

• ☑ Product
• ☐ Blog Article
• ☐ Page

Par rôle

Cochez les rôles autorisés :

• ☑ Anonymous user
• ☑ Authenticated user
• ☐ Administrator

Région

Déplacez le bloc vers une autre région si nécessaire.

📍 Placer les blocs Views

Les blocs créés dans Views apparaissent dans la liste des blocs disponibles.

Exemple : Produits récents dans Sidebar

1. Sidebar → Place block
2. Recherchez “Produits récents”
3. Sélectionnez le bloc Views correspondant
4. Configurez :
   • Title : Nouveautés (ou utiliser celui de la vue)
   • Visibility → Pages : /shop\n/shop/*

Exemple : Marques dans Footer

1. Footer Top → Place block
2. Recherchez “Marques” (bloc Views)
3. Configurez :
   • Display title : ☐ (masquer)
   • Visibility : Toutes les pages

🔀 Réorganiser les blocs

Par glisser-déposer

1. Utilisez les croix (✥) pour déplacer
2. Déplacez entre régions ou réordonnez
3. Save blocks

Via le poids (Weight)

Chaque bloc a un poids :

• Valeur basse → Haut de la région
• Valeur haute → Bas de la région

🖥️ Blocs par page spécifique

Page d’accueil

Créez une mise en page spéciale pour la homepage :

Région	Blocs
Highlighted	Hero slider (custom block)
Content	Vue “Produits populaires”
Content Below	Vue “Derniers articles”
Footer Top	Newsletter (custom block)

Pages produit

Région	Blocs
Sidebar	Produits similaires
Content Below	Avis clients (vue)

Pages boutique

Région	Blocs
Sidebar	Filtres (exposed form)
Sidebar	Catégories menu

📱 Responsive

Les blocs peuvent être masqués sur certaines tailles d’écran via CSS :

/* Masquer la sidebar sur mobile */
@media (max-width: 768px) {
  .region-sidebar {
    display: none;
  }
}

/* Ou utiliser des classes sur les blocs */
.block-mobile-hidden {
  display: none;
}

@media (min-width: 769px) {
  .block-mobile-hidden {
    display: block;
  }
}

🔧 Via Drush

# Lister les blocs placés
drush ev "print_r(array_keys(\Drupal::service('block.repository')->getVisibleBlocksPerRegion()));"

# Vider le cache des blocs
drush cc block

📁 Configuration YAML

Exemple de block.block.mainnavigation.yml :

langcode: fr
status: true
dependencies:
  config:
    - system.menu.main
  module:
    - system
  theme:
    - olivero
id: olivero_main_navigation
theme: olivero
region: primary_menu
weight: 0
provider: null
plugin: 'system_menu_block:main'
settings:
  id: 'system_menu_block:main'
  label: 'Navigation principale'
  label_display: '0'
  provider: system
  level: 1
  depth: 2
  expand_all_items: false
visibility:
  request_path:
    id: request_path
    negate: false
    pages: ''

💾 Export

# Exporter la configuration des blocs
drush cex -y

# Fichiers générés
ls config/sync/block.block.*.yml

✅ Checklist

• Site branding placé (logo + nom)
• Navigation principale configurée
• Breadcrumb visible (sauf accueil)
• Messages système en place
• Menu footer placé
• Blocs Views placés (produits, articles)
• Visibilité configurée par page/type
• Configuration exportée

🔜 Prochaine étape

Créons maintenant des Blocs personnalisés.