Créer un sous thème Drupal 9 Olivero

Mise à jour: Cet article est obsolète depuis Drupal 10, voir mon article à jour de création de sous thème Drupal 10 Olivero

Drupal 9 expérimentale Olivero

Le nouveau thème Olivero introduit dans Drupal 9.1 est une belle nouveauté. Il est beaucoup plus moderne que le bon vieux thème Bartik, car mềme si celui-ci à été mis à jour avec Drupal 8, il garde un visuel assez ancien. Après tout il a été créé en 2010 !

Mais pour l'instant Olivero n'est toujours pas stable, mais on s'en rapproche comme l'indique ce ticket : issue: [META] Make Olivero stable     
Mais le problème principal problème est le manque de support pour créer un sous thème.

L'intérêt de créer un sous thème est de pouvoir appliquer de petites modifications en pouvant profiter des mises à jour du thème parent.

Créer un sous thème Drupal 9 Olivero

En mettant à jour mon site personnel, je souhaitais passer le moins de temps possible sur l'apparence et Olivero est un point de départ plus intéressant que Bootstrap ou d'autres framework front.

De fait je pense que Bootstrap ou d'autres framework frontend sont d'excellentes solutions pour démarrer un projet, mais quand je suis mon propre client, mon temps devient beaucoup plus précieux.

Solutions existantes pour créer un sous thème Olivero avec Drupal 9

Même avec un temps limité pour développer mon propre thème pour mon site, je souhaitais faire des ajustements avec un effort minimum.

Voici quelques solutions sur internet :

• How to customize Drupal's Olivero colors on deploy
  • Bonne solution, mais uniquement pour de petits ajustements css.
• How to sub-theme Olivero
  • C'est une copie complète du thème, ce qui rends l'intégration des mise à jour problématique.

Malheureusement aucune de ces solutions ne réponds à mes besoins :

• Faire un ajustement du css, avoir un peu de JavaScript et remplacer quelques templates
• Facile à maintenir et mettre à jour (d'où le sous thème)

J'ai donc décidé une solution intermédiaire, faire un sous thème sans copier le thème Olivero, ou tout du moins partiellement.

Ma solution pour un sous thème Olivero

En créant un sous thème, il est possible d'avoir du css, js et remplacer quelques templates.

Pour les couleurs et la taille, on peut utiliser le fichier variables.pcss.css pour ajuster Olivero. Olivero utilisant PostCSS c'est donc un moyen efficace pour ajuster.

Le processus est donc de modifier ce fichier, lancer le build des css et copier le résultat dans notre thème. Le code doit ensuite utiliser les fichiers css de notre thème, ce qui est fait dans le fichier olivero_sub_theme.theme

Sous thème pour Drupal 9

Voici la structure de notre thème :

    web/themes/custom/olivero_sub_theme
                            ├── css
                            |   ├── theme.css
                            |   └── variables.pcss.css
                            ├── js
                            |   └── theme.js
                            ├── scripts
                            |   └── build.sh
                            ├── templates
                            |   └── ... your templates override
                            ├── olivero_sub_theme.info.yml
                            ├── olivero_sub_theme.libraries.yml
                            ├── olivero_sub_theme.theme
                            ├── favicon.ico
                            └── logo.svg
                            

Pour utiliser ce thème il suffit de télécharger mon projet d'exemple ici. 
Il faut ensuite remplacer les occurrences de olivero_sub_theme dans olivero_sub_theme.theme et olivero_sub_theme.info.yml, ensuite renommer les fichiers olivero_sub_theme avec le nom de votre thème.

La seconde étape pour css est d'éditer variables.pcss.css avec nos changement et construire le css. Le meilleur moyen est de le faire directement depuis le dossier Olivero, on aura besoin de Yarn pour installer et construire le css (ou avec Docker). Le thème inclut un script pour faciliter cette tâche :

 #!/usr/bin/env bash
#
# Generate and copy Olivero css and fonts to our theme for override.

_my_sub_theme=${1:-"olivero_sub_theme"}

if [[ ! -d web/core/themes/olivero ]];
then
  echo -e "[ERROR] Can not find Olivero theme, are you at the root of Drupal?"
  exit 1
fi

if [[ ! -d web/core/node_modules ]];
then
  yarn --cwd web/core install
fi

cp -r web/core/themes/olivero/css/ web/core/themes/olivero/css.orig/
cp -f web/themes/custom/$_my_sub_theme/css/variables.pcss.css web/core/themes/olivero/css/base/variables.pcss.css

# Build the theme
yarn --cwd web/core build:css

rm -rf web/themes/custom/$_my_sub_theme/css/base/*.css web/themes/custom/$_my_sub_theme/css/components web/themes/custom/$_my_sub_theme/css/layout
cp -r web/core/themes/olivero/css web/themes/custom/$_my_sub_theme/
cp -r web/core/themes/olivero/fonts web/themes/custom/$_my_sub_theme/fonts
rm -rf web/themes/custom/$_my_sub_theme/css/theme && rm -f web/themes/custom/$_my_sub_theme/css/**/*.pcss.css

# Set back Olivero variable file.
rm -rf web/core/themes/olivero/css/
mv web/core/themes/olivero/css.orig/ web/core/themes/olivero/css/

Depuis la racine du projet il suffit de lancer ce script avec le nom machine du thème comme argument :

web/olivero_sub_theme/scripts/build.sh olivero_sub_theme

Le script va installer les dépendances, construire le css et copier les fichiers générés dans le sous thème.

Bien sûr ce script doit être lancé après chaque ajustement au fichier variables.pcss.css. Mais il n'est pas utile de le lancer pour d'autres changements dans notre sous thème.

Détails des fichiers à minima

Fichier info minimale olivero_sub_theme.info.yml:

 name: My Olivero sub theme
type: theme
base theme: olivero
description: Olivero sub theme with minimal overrides, custom js and templates.
package: Custom
core: 8.x
core_version_requirement: ^8 || ^9
libraries:
  - olivero_sub_theme/global-styling
# Keep main Olivero regions to ease update.
regions:
  header: Header
  primary_menu: 'Primary menu'
  secondary_menu: 'Secondary menu'
  hero: 'Hero (full width)'
  highlighted: Highlighted
  breadcrumb: Breadcrumb
  social: Social Bar
  content_above: Content Above
  content: Content
  sidebar: 'Sidebar'
  content_below: 'Content Below'
  footer_top: 'Footer Top'
  footer_bottom: 'Footer Bottom'

Fichier libraries minimale olivero_sub_theme.libraries.yml:

 # Drupal dev Olivero sub theme library.
global-styling:
  js:
    js/theme.js: {}
  css:
    base:
      css/theme.css: {}

Le code dans le fichier olivero_sub_theme.theme va être utilisé pour remplacer les fichiers css utilisés par notre thème.

                            <?php
                            /**
                              * @file
                              * Functions to support theming for My Sub Theme.
                              */
                            use \Drupal\Core\Asset\AttachedAssetsInterface;
                            /**
                              * Implements hook_css_alter().
                              *
                              * Replace all css from Olivero by this theme css.
                              */
                            function olivero_sub_theme_css_alter(&$css, AttachedAssetsInterface $assets) {
                              $oliveroThemePath = drupal_get_path('theme', 'olivero');
                              $mySubThemePath = drupal_get_path('theme', 'olivero_sub_theme');
                              foreach ($css as $cssFile => $value) {
                                if (strpos($cssFile, $oliveroThemePath) !== FALSE) {
                                  $css[$cssFile]['data'] = str_replace($oliveroThemePath, $mySubThemePath, $css[$cssFile]['data']);
                                }
                              }
                            }