Skip to content

Gin Navigation Title Component Fix voor Commerce Invoice

Datum: 12 januari 2026
Omgeving: Live (voedingsgeneeskunde.nl / prev)

Doel

  • Commerce Invoice admin pagina's toegankelijk maken (InvalidComponentDataException oplossen)
  • Colorbox en DOMPurify library errors oplossen

Probleem 1: Navigation:title Component Crash op Invoice Pagina's

Symptoom

  • /admin/commerce/invoices/{id} crasht met: 
    Drupal\Core\Render\Component\Exception\InvalidComponentDataException: 
Unable to render component "navigation:title". 
A render array or a scalar is expected for the slot "content"
  • Geen Gin toolbar/navigation zichtbaar op invoice pagina's
  • Andere admin pagina's werken wel

Oorzaak

Drupal 11 introduceert SDC (Single Directory Components) waaronder navigation:title component: - Navigation module's PageContext plugin roept $entity->label() aan - Commerce Invoice::label() retourneert TranslatableMarkup object - navigation:title component accepteert alleen scalars of render arrays in slots - Dit is een bekend core issue: https://www.drupal.org/project/drupal/issues/3504477

Analyse

  1. Drupal 11.3.1 heeft nog geen MarkupInterface support in ComponentElement
  2. Gin 5.0.10 + Drupal 11 Navigation module gebruiken navigation:title voor page context
  3. PageContext::build() op regel 97: 'content' => $entity->label()
  4. Voor commerce_invoice entities geeft dit TranslatableMarkup → crash

Oplossing: Custom Invoice Entity Class

Meest directe oplossing: override Invoice entity class om label() als string te retourneren.

Implementatie: 

// web/modules/custom/vg_commerce/src/Entity/Invoice.php
namespace Drupal\vg_commerce\Entity;

use Drupal\commerce_invoice\Entity\Invoice as CommerceInvoice;

class Invoice extends CommerceInvoice {
  public function label() {
    return (string) parent::label();
  }
}


// web/modules/custom/vg_commerce/vg_commerce.module
function vg_commerce_entity_type_alter(array &$entity_types) {
  if (isset($entity_types['commerce_invoice'])) {
    $entity_types['commerce_invoice']->setClass('Drupal\vg_commerce\Entity\Invoice');
  }
}

Voordelen: - Onderschept probleem aan de bron - Geen preprocess hooks of event subscribers nodig - Volledig backward compatible - Werkt voor alle invoice contexten (admin, views, navigation)

Geprobeerde Alternatieven (werkten niet)

  1. hook_preprocess_page_title() - Te laat in render proces
  2. EventSubscriber op KernelEvents::VIEW - Geen toegang tot juiste variabelen
  3. hook_navigation_top_bar_item_alter() - Wordt niet vroeg genoeg aangeroepen

Probleem 2: Colorbox en DOMPurify Library Errors

Symptoom

Browser console errors: - 404 voor /libraries/colorbox/jquery.colorbox-min.js - MIME type error: "X-Content-Type-Options: nosniff" met verkeerd Content-Type

Oorzaak

Libraries geïnstalleerd in project root /var/www/sites/prev.voedingsgeneeskunde.nl/libraries/ maar moeten in webroot /var/www/sites/prev.voedingsgeneeskunde.nl/web/libraries/ staan.

Oplossing

mv libraries/colorbox web/libraries/colorbox
mv libraries/DOMPurify web/libraries/DOMPurify

Composer installer-paths was al correct ingesteld op web/libraries/{$name} maar deze libraries waren handmatig geplaatst (npm-asset-packagist gaf 404).

Resultaat/Oplossing

  • Invoice admin pagina's volledig toegankelijk met Gin navigation
  • Colorbox en DOMPurify libraries laden correct met juiste MIME types
  • Alle statusrapport waarschuwingen voor deze libraries opgelost
  • Navigation toolbar toont correct invoice titles op alle invoice pagina's

Technische Details

Custom Invoice Entity

  • Locatie: web/modules/custom/vg_commerce/src/Entity/Invoice.php
  • Extends: Drupal\commerce_invoice\Entity\Invoice
  • Override: label() method cast naar string
  • Registratie: hook_entity_type_alter() in vg_commerce.module

Library Locaties

  • Colorbox 1.6.4: web/libraries/colorbox/jquery.colorbox-min.js (12K)
  • DOMPurify 3.2.2: web/libraries/DOMPurify/dist/purify.min.js (22K)

Versies

  • Drupal Core: 11.3.1
  • Gin: 5.0.10
  • Gin Toolbar: 3.0.2
  • Commerce Invoice: 2.2.0

Referenties

  • Core issue TranslatableMarkup in SDC slots: https://www.drupal.org/project/drupal/issues/3504477
  • Eerdere sessie met workaround: docs/sessies/20251111-shipping-en-btw-display.md
  • Navigation module PageContext: web/core/modules/navigation/src/Plugin/TopBarItem/PageContext.php

Tags

[Commerce, Gin, Drupal11, Critical, Navigation, Libraries]

Probleem 3: CKEditor5 List Plugin Warning

Symptoom

Warning: Undefined array key "styles" in Drupal\ckeditor5\Plugin\CKEditor5Plugin\ListPlugin->getDynamicPluginConfig() 
(line 99 of core/modules/ckeditor5/src/Plugin/CKEditor5Plugin/ListPlugin.php)

Oorzaak

Drupal 11 upgrade issue: CKEditor5 List plugin verwacht styles property onder properties maar die ontbreekt in bestaande configuraties.

Oplossing

Property toegevoegd aan alle text formats met CKEditor5: 

drush config:set editor.editor.basic_html settings.plugins.ckeditor5_list.properties.styles false -y
drush config:set editor.editor.full_html settings.plugins.ckeditor5_list.properties.styles false -y
drush config:set editor.editor.redactie settings.plugins.ckeditor5_list.properties.styles false -y

Probleem 4: GAP Zuid VG Font niet geladen in Gin Toolbar/Navigation

Symptoom

  • Inter Variable font wordt gebruikt in Gin toolbar en navigation
  • GAP Zuid VG font wel gebruikt in theme CSS maar niet daadwerkelijk geladen
  • Font bestanden bestaan in fonts/gap/ maar geen @font-face declaraties

Oorzaak

  • Geen @font-face declaraties voor GAP Zuid VG in CSS
  • Gin theme laadt eigen font-stack die voorrang heeft
  • CKEditor erft font van admin theme

Oplossing

1. @font-face declaraties toegevoegd: - Nieuw bestand: web/themes/custom/vg25/css/base/fonts-gap.css - Bevat @font-face voor Regular, Bold, Italic, BoldItalic varianten - Toegevoegd aan vg25.libraries.yml met weight -7.5

2. Gin custom CSS overrides met !important: - Bestand: web/sites/default/files/gin-custom.css - Force GAPZuidVG voor: - Gin toolbar (vertical/classic/horizontal modes) - Gin admin interface elementen - CKEditor interface + content area - Navigation module (top bar, toolbar menu) - Dialogs en overlays

Bestanden Aangepast

  • web/themes/custom/vg25/css/base/fonts-gap.css (nieuw)
  • web/themes/custom/vg25/vg25.libraries.yml (fonts-gap.css toegevoegd)
  • web/sites/default/files/gin-custom.css (font-family overrides toegevoegd)

Extra Tags

[CKEditor5, Fonts, GAP, Typography]