Was ist neu in Drupal 10?

Mit Drupal 10 fand am 14. Dezember 2022 das neueste Release Drupals den Weg in die Community und zu den Endanwendern. Eigentlich schon für August 2022 geplant, wurde der Release aufgrund der Integration von CKEditor 5 und der Behebung einiger noch verbliebender Bugs auf Ende 2022 verschoben.

Im Fokus des neuesten Major-Release sind zum einen Änderungen am Frontend in Sachen Usabillity und User Experience. Aber auch unter der Haube hat sich wieder viel getan. Im vorliegenden Artikel gehen wir daher auf die wichtigsten Änderungen und Neuerungen Punkt für Punkt ein.

I. Claro als Theme für den Administrationsbereich

Nach fast 13 Jahren mit dem Standard-Theme Seven wurde es - auch dadurch, dass das Web sich stetig weiterentwickelt - Zeit, ein neues Standard-Theme für Drupal bereitzustellen. Dieses heißt Claro und ersetzt seit Drupal 10 Seven.
Gänzlich neu ist Claro für versierte Drupal-Nutzer aber nicht: seit etwas mehr als 3 Jahren, genauer gesagt mit dem Release von Drupal 8.8, war Claro als alternatives Administrations-Theme bereits im Lieferumfang Drupals enthalten. Seitdem wurde es stetig weiterentwickelt und ist daher nun bereit, als neues Standard-Theme die Nachfolge von Seven anzutreten.

Fortschritt durch Reduktion

Viel Platz, die Reduktion auf das Wichtigste, klare farbliche Abgrenzung durch hervorgehobenen Content und dezente farbliche Hintergründe, um aktive und passive Seitenelemente darzustellen, zählen zu den Stärken von Claro.

Im Laufe der letzten Jahre setzte sich in Sachen UX und Design im Web ein minimalistischerer Standard durch mit dem Ziel, Endnutzer:innen durch Designelemente nicht zu überlasten (wie es in Web 2.0 noch durch knallige Farben und das Lenken auf Aufmerksamkeit durch poppige Highlights erfolgte), sondern sachte den Weg durch eine Seite zu zeigen und nur das Wichtigste im Auge zu behalten.

Die grundlegenden Eigenschaften des Claro Themes, nach den Grundlagen der Drupal Werte und Prinzipien lauten:

Kraftvoll, empathisch, responsiv, klar, sauber, knapp und präzise, zugänglich und transparent, natürlich, freundlich und kollaborativ.

© drupal.org

 

Iconographie: Bilder statt Texte für das Offensichtliche

Piktogramme begleiten uns im Alltag deutlich häufiger, als uns tatsächlich auffällt. Seien es die Verkehrsschilder, auf Produktpackungen oder als Hinweisschilder jeglicher Art.  
Wir als Menschen haben über die Jahre gelernt, diese natürlichen und schnell interpretierbaren Bilder in unseren Alltag aufzunehmen, aber auch sie zu verstehen. Warum also nicht auch im Web anwenden?

So zeigt durch klare, minimalistische, aber aussagekräftige Icons den Endnutzer:innen welche Funktion welches Icon besitzt, nimmt der Seite unnötigen Text weg und bietet auch somit mehr Fläche für Freiheit und Platz für das Auge.

© drupal.org

 

Auch hier folgen klare Designentscheidungen und -regeln einem gemeinsamen Konsens und reduzieren Informationen auf ein Minimum.

© drupal.org

 

Sanfte Farben und klare Kontraste

© drupal.org

 

Accessibility – ein Anliegen, das uns alle betrifft

Bis heute ist es der Drupal Community ein großes Anliegen, Drupal für alle zugänglich zu machen. So lautet einer der Grundsätze Drupals:

As an inclusive community, we are committed to making sure that Drupal is accessible. Content creators and site builders of all abilities should be able to use this platform to reach their audience. Disabilities are an integral part of our human experience. People have permanent, temporary, and situational disabilities. Prioritizing accessibility within Drupal is critical to our values. Digital tools are so embedded with our lives that accessibility is even more critical.

Quelle: https://www.drupal.org/about/features/accessibility

Claro und die Web-Content-Accessibility-Guidelines (WCAG)

Die Web-Accessibility-Initative (WAI) ist eine Organisation, die sich mit Standards beschäftigt, welche die Zugänglichkeit des Webs für körperlich eingeschränkte Personen erleichtern soll und diese als internationale Standards definiert und zertifiziert.

So hat Drupal bereits den Score Level AA (die zweithöchste Stufe der WAI) erhalten, was mit Claro weiter gefestigt wurde.

• Identify Input Purpose
  Dieses Kriterium ist erfüllt, wenn Drittanwenderprogramme, etwa wie Text-to-Speech oder Ähnliches, nicht nur den kontextuellen Inhalt eines Elements versteht und an den Nutzer weitergibt, sondern auch, dass ein Mindestkontrast in einer Relation von 4,5:1 vorliegt, welches im unteren Bild deutlich erkennbar ist.

  

  © drupal.org

• Farben
  Farben müssen eine Information klar transportieren, eine Aktion ankündigen oder eine Rückmeldung durch ein visuelles Element verbreiten.
  
  Dies wird hier durch die Verwendung der unterschiedlichen Color Patterns zu spezifischen Buttons klar. Es ist auf schnellen Blick ersichtlich, wie hoch die Interaktionsrate eines Elements priorisiert ist.

  

  © drupal.org

  Für diejenigen, die mehr über Drupal und Accessibility erfahren möchten, seien hier die Hintergründe und Grundlagen zu diesem Thema, sowie die genauen Zertifizierungskriterien der WCAG verlinkt.

 

Und noch so viel mehr

Wirklich alles aufzuzählen, würde wahrlich den Rahmen dieses Artikels sprengen. Wer sich dennoch einmal das komplette Mockup anschauen möchte, ist gerne eingeladen, sich in Ruhe das komplette Theme auf Figma anzuschauen.

Und es lohnt sich einmal reinzuschauen, da es viel zu entdecken gibt.

II. CKEditor 5 - Power durch Individualisierung

Was einst als kleines Contrib Modul begann, entwickelte sich im Laufe der Jahre zu einem unverzichtbaren Tool für Drupal: CKEditor.

Was ist CKEditor?

CKEditor ist im Grunde nichts anderes als ein hoch individualisierbarer WYSIWYG  (What You See Is What You Get) Text Editor, der es mit seiner breiten Masse an Plugins ermöglicht, so gut wie jeden Use Case abzubilden.

Mit dem kompletten programmatischen und logischen Rework von CKEditor auf Version 5.0, entfällt CKEditor 4 komplett aus dem Drupal Core und wird durch Version 5.0 ersetzt.

Was ist neu mit CKEditor 5?

• Kollaboration
  Eines der wohl größten neuen Features von CKEditor 5 ist die Kollaboration mit anderen User:innen.  
  Erstmals ist es möglich, synchron an einer Texteingabe zu arbeiten.  
  Allerdings benötigt dieses Feature einen Zugang zum CKEditor 5 Cloud Service, welcher bis zum Erstellen dieses Artikels noch nicht im Core vorhanden ist.
• Output und Download Funktion
  Es ist nun erstmals möglich, einen Download des Inhalts des Texteditors zu generieren und verfügbar zu machen, und ebenso diesen in den Texteditor zu (re-)importieren.  
  Des Weiteren gibt es einen Output, welcher zum Beispiel Markdown Texte in seinen ursprünglichen Markdown Syntax konvertiert.
• Höhere Anzahl an nativ verfügbaren Textformatierungs-Elementen
  Auch ist es - neben der Verwendung der Standard Textformatierungen wie bold, italics, super- und subscript - möglich, ganze Fontfamilien und die Kontrolle der Schriftgröße, sowie Front und Background Farben direkt anzupassen.
• Erhöhte Produktivität
  Ebenfalls neu erschienen unter CKEditor 5 sind neue Produktivitäts-Features. So gehören zum Beispiel ein Wortcounter und eine Autokorrektur zu den neuen Features.

Fundamentale programmatische und architektonische Änderungen in CKEditor 5

Im Vergleich zu seinen Vorgängerversionen, nutzt CKEditor 5 nicht mehr das DOM als vorhandenes Modell, sondern verwendet ein customisiertes Datenmodell, welches sich als Vorbild das MVC Model aus der objektorientierten Programmierung nimmt. Damit wird das Inhaltsrendering fernab des Browsers durch JavaScript gerendert und garantiert eine größere Kontrolle darüber, wie der Output generiert wird.

Dies bedeutet im Umkehrschluss, dass das gerenderte HTML zuvor abgefangen und manipuliert werden kann, was einen enormen Vorteil in der Customisierung von CKEditor Content und Plugins resultiert.

Die Kehrseite der Medaille: Migration

Auch wenn sich auf den ersten Blick die Änderungen an CKEditor 5 ausgezeichnet anhören und auch gut sind, wird durch die geänderte strukturelle und architektonische Grundlage von CKEditor 5 eine komplett neue Migration auf Drupal 9 oder 10 notwendig.

CKEditor selbst spricht hier nicht von einem Upgrade, sondern von einer Migration, da, wie bereits beschrieben, grundlegende Änderungen in CKEditor stattgefunden haben.  
Einige der Custom Plugins für CKEditor sind bereits auf CKEditor und Drupal migriert, andere leider noch nicht, was zwei Optionen zulässt:

1. Eigenständiges Migrieren
2. Warten und "Aussitzen", bis vorhandene, alte Plugins für Drupal migriert wurden.

Natürlich kann eigenständiges Migrieren den Aufwand an einem Projekt beeinflussen. Ein Artikel von QED42 fasst die Migration in wenigen Schritten zusammen und bietet ein Ansatz für die Problemlösung.

III. Theme Starterkit

Das Erstellen von Custom Themes in Drupal erfolgt über das Vererben von bereits bestehenden Themes als sogenannte Subthemes.

Mit dem Theme Starterkit ist es nun möglich, via CLI Command eine Vorlage aus einem existierenden Theme mitsamt info.yml, breakpoints.yml, libraries.yml und ein .theme File zu generieren, was mit folgendem CLI Command umsetzbar ist:

php core/scripts/drupal generate-theme my_new_theme

IV. Core Streamline

Ebenfalls, wie mit jedem Major Release üblich, wurden einige Core Module auf Contrib-Module umgestellt:

• Quickedit
  In-Place Content Editing
• Aggregator
  Sammeln und Darstellen von Content aus externen Ressourcen (RSS, RDF, Atom feeds)
• HAL
  Verwendung von Hypertext Application Languague (HAL) zur Implementierung von externen API
• RDF
  Hinzufügen von Metadaten in die Seite
• CKEditor 4
  WYSIWYG Editor  
• Forum
  Klassisches Forum im Stile eines Bulletin-Boards

V. Deprecated Code in Drupal 10

Eine Übersicht über den wichtigsten Code, welcher mit Drupal 11 entfernt wird:

Deprecated Code	Alternative
Database::RETURN_INSERT_ID	kein Replacement
Databse::RETURN_NULL	kein Replacement
Databse:RETURN_STATEMENT	kein Replacement
EntityStorageInterface::deleteRevision	\Drupal\Core\Entity\RevisionableStorageInterface::deleteRevision
EntitySotrageInterface::loadRevision	\Drupal\Core\Entity\RevisionableStorageInterface::loadRevision
Migration::$trackLastImported	kein Replacement
MigrationInterface::getTrackLastImported	kein Replacement
MigrationInterface::isTrackLastImported	kein Replacement
MigrationInterface::setTrackLastImported	kein Replacement
node_revision_delete	\Drupal\Core\Entity\EntityStorageInterface::deleteRevision
node_revision_load	Use \Drupal\Core\Entity\EntityStorageInterface::loadRevision
node_type_update_nodes	\Drupal\Core\Entity\EntityStorageInterface::updateType

Die gesamte Übersicht von entferntem Code aus Drupal 9 ist hier zu finden.

Natürlich wird es im Verlauf des Lebenszyklus von Drupal 10 noch weitere Depecated Code Snippets geben. Immer mal wieder reinschauen lohnt sich also.

VI. Symfony 6.2

Ebenfalls mit Drupal 10 findet das mächtige PHP Framework Symfony mit seiner Version 6.2 Einzug, die einige Neuerungen und Änderungen mit sich bringt.

Lazy Loading Proxies in PHP

Lazy Loading Objekte werden nur dann initialisiert, wenn diese auch wirklich benötigt werden. Dies geschieht dann, wenn eine ihrer Eigenschaften angesprochen wird. Dies spart unter anderem Performance bei starken und schweren Objekten, da diese nur dann geladen werden müssen, wenn sie gebraucht werden.

Built-in Cache

Bereits seit über 10 Jahren existieren in Symfony Annotations, welche den Cache, die Sicherheit, Templates und Doktrine konfigurierbar machen.  Diese sind nun als PHP Attribute verwendbar und benötigen keine Installation von externen Packages mehr. So werden #[Cache], #[Template], #[IsGranted] und #[MapEntity] zu nativen Attributen bereitgestellt.

Dabei funktioniert #[MapEntity] wie #[ParamConverter] und #[IsGranted] ersetzt die @Security() Annotation

Vorher:

use Sensio\Bundle\FrameworkExtraBundle\Configuration\ParamConverter;

#[ParamConverter('post', options: ['mapping' => ['postSlug' => 'slug']])]
public function addComment(Request $request, Post $post): Response

Nachher:

use Symfony\Bridge\Doctrine\Attribute\MapEntity;

public function addComment(
    Request $request,
    #[MapEntity(mapping: ['postSlug' => 'slug'])] Post $post
): Response  {
     // ...
 }

Verbesserter Emoji-Support

Durch EmojiTransliterator können Emojis leichter in andere Sprachen transkribiert werden.

use Symfony\Component\Intl\Transliterator\EmojiTransliterator;

// describe emojis in English
$transliterator = EmojiTransliterator::create('en');
$transliterator->transliterate('Menus with 🍕 or 🍝');
// => 'Menus with pizza or spaghetti'

// describe emojis in Ukrainian
$transliterator = EmojiTransliterator::create('uk');
$transliterator->transliterate('Menus with 🍕 or 🍝');
// => 'Menus with піца or спагеті'

Access Token Authenticator

In Symfony 6.2 wurde außerdem ein neuer Authenticator implementiert, welcher Access Tokens aus Request Header, Request Body oder einem Query String verarbeiten kann.

Clock Component

Um das Testen von Code unter zeitlichen Bedingungen zu erleichtern, wurde der bisherige Clock Mocking um einen neuen Component, den Clock Component erweitert.

namespace Symfony\Component\Clock;

interface ClockInterface
{
    // returns the current datetime (it's designed to be compatible with PSR-20)
    public function now(): \DateTimeImmutable;

    // advances the clock by the provided number of seconds
    public function sleep(float|int $seconds): void;

    // changes the time zone returned by now()
    public function withTimeZone(\DateTimeZone|string $timezone): static;
}

Verbesserungen an der Finder Suche

Die Finder Component bietet eine Vielzahl an nützlichen Methoden, Dateien und Ordnerstrukturen über multiple Filter leichter zu finden und zu sortieren.

Neu hinzugefügt wurden die Sortierungsmethoden:

sortByExtension() , sortBySize() und sortByCaseInsensitiveName()

PSR-4 Route Loader

PSR-4 definiert den entsprechenden Dateipfad für einen vollständig qualifizierten Klassennamen. Dadurch muss nicht mehr explizit nach einer Klasse, die die einzelnen Daten definiert, gesucht werden.

Sofern das Projekt den PSR-4 Guidelines folgt, kann der neue PSR-4 Route Loader deutlich schneller Routen finden und bietet daher einen Performance Boost.

Vorher:

# config/routes.yaml
 controllers:
-    resource: ../src/Controller/
     type: attribute

 

Nachher:

# config/routes.yaml
 controllers:
+    resource:
+        path: ../src/Controller/
+        namespace: App\Controller
     type: attribute

Verbesserter File Validator

Durch den verbesserten File Validator können nun mimeTypes (auch bekannt als Media Typen) in die Validation aufgenommen werden.

use Symfony\Component\Validator\Constraints as Assert;

class Document
{
    #[Assert\File(
        maxSize: '1024k',
        mimeTypes: ['application/pdf', 'application/x-pdf'],
    )]
    protected $pdfFile;

    // ...
}

Wichtig ist denn noch zu beachten, dass die mimeTypes den von der IANA definierten Media Typen entsprechen, welche hier zu finden sind.

Neue und verbesserte Debugging Commands

Beispiel 1: Anzahl der eingereihten Nachrichten des Messenger Components

# Ausgabe der Anzahl an eingereihten Messages in allen Transportsystemen
$ php bin/console messenger

# zeigt Status der angegebenen Transportsysteme an
$ php bin/console messenger:stats transport_name other_transport_name

 

Beispiel 2: Verbesserte Anzeige der Environment Variablen im Debugger

$ php bin/console debug:dotenv AWS
  // ...
  ----------------------  -------------------------------------
   Variable               Value
  ----------------------  -------------------------------------
   AWS_ACCESS_KEY_ID       ...
   AWS_SECRET_ACCESS_KEY   ...
   AWS_DEFAULT_REGION      ...
   ...

VII. PHP 8.1

Performance Boost - schneller, höher, weiter

Eindeutig miteinander verknüpfte Klassen, welche zuvor separat kompiliert werden mussten, befinden sich nun in einem Opchache shared memory zur Zwischenspeicherung, was die Ladezeiten zu diesen Klassen verkürzt.

array_is_list() - neue Chancen für Debugging

Da Drupal sehr viel auf Arrays setzt, ist diese Änderung für Drupal Developer sehr interessant.  
Durch die in PHP 8.1 hinzugefügte Funktion `array_is_list()` ist es eine Überprüfung möglich, ob eine fehlerlose numerische Reihenfolge in den Array-Keys vorhanden ist.

Beispiele für Richtigkeit der numerischen Reihenfolge:

array_is_list([]); // true
array_is_list([1, 2, 3]); // true
array_is_list(['car', 2, 3]); // true
array_is_list(['car', 'bike']); // true
array_is_list([0 => 'car', 'bike']); // true
array_is_list([0 => 'car', 1 => 'bike']); // true

 

Beispiele für Fehlerausgabe:

// Key startet nicht mit 0
array_is_list([1 => 'car', 'bike']); // false

// Keys sind nicht in der richtigen Reihenfolge
array_is_list([1 => 'car', 0 => 'bike']); // false

// Keys sind keine Integer
array_is_list([0 => 'car', 'bike' => 'green']); false

// Keys sind in keiner Sequenz
array_is_list([0 => 'car', 2 => 'bike']); false

Damit kann überprüft werden, ob die Inhalte der Arrays (wie zum Beispiel im $form_array des FormStateInterface in der richtigen Reihenfolge eingeordnet werden und kann damit den Weg für neue Debugging Möglichkeiten bieten.

Array unpacking

Vor PHP 8.1 musste für den Zusammenschluss von mehreren Arrays die Funktion `array_merge()` verwendet werden, was unter PHP 8.1 nun automatisch integriert ist und ebenfalls einen kleinen Performance Boost bietet.

Mit PHP 8.1 können aktuell lediglich String Arrays zusammengefasst werden, da aber die Grundlogik dahinter bereits existiert, könnte es wahrscheinlich werden, dass simple und komplexe Datentypen langfristig ebenso in diese Funktion eingebracht werden.

vor PHP 8.1

$arrayA = ['a' => 1];
$arrayB = ['b' => 2];

$result = array_merge(['a' => 0], $arrayA, $arrayB);

// ['a' => 1, 'b' => 2]

 

ab PHP 8.1

$arrayA = ['a' => 1];
$arrayB = ['b' => 2];

$result = ['a' => 0, ...$arrayA, ...$arrayB];

// ['a' => 1, 'b' => 2]

Enumerationen als neuer Datentyp

Enumerations sind Aufzählungen, die eine endliche Menge haben (Monate, Jahre, Anreden, Farben, etc.).

Umgewandelt in Integer existieren also die Tage 1 bis 7 für jeden Wochentag. Werden bei Code Integer über diesen Wert verwendet, entsteht automatisch ein Fehler, der nicht verarbeitet werden kann.  
In diesem Falle springen Enumerations ein, da diese als Klasse verwendet werden kann, was die Fehleranfälligkeit deutlich verringert.

enum $weekdays {
 case:  Montag;
 case: Dienstag;
 ...
}

Fibers - Asynchrones Arbeiten

Mit der Einführung von Fibers ermöglicht PHP nun ausgewählte Teile geschriebenen Codes isoliert zu betrachten, was in Bezug auf asynchrone Programmierung einen Vorteil gibt.

Hierzu ein kleines Beispiel:  
Ein Ticketsystem erhält ein Ticket und verarbeitet nun folgenden Programmablauf:

• das Senden einer Benachrichtigungsmail
• eine Kopie des Tickets an das Backupsystem schicken
• weitere Verarbeitung des Tickets für dessen logische und programmatische Verarbeitung

Wo zuvor jeder Teil dieser Prozesse einzeln verarbeitet und ausgeführt werden musste, ermöglichen Fibers das gleichzeitige Ausführen dieser Aufgaben. Dies spart nicht nur Performance, sondern macht bestehende Prozesse effizienter.

never return type

Ähnlich wie bei Programmiersprachen wie Java, C# oder C++, die die Angabe von expliziten Datentypen erfordert, bietet PHP durch die Einführung des `never` return types nun den ersten Schritt in die Richtung jener Programmiersprachen.
Somit ist `never`das Äquvalent zu `void`, mit der Ausnahme, dass `never` bei Ausführung entweder eine Exception wirft, oder da Beenden des Codes durch `die ` oder `exit` erwartet wird.

function istDerMörder(string $moerder): never (
    ...
    exit();
}

Readonly Klassen Properties

Klasseneigenschaften können als schreibgeschützt deklariert werden, was im Zuge der Kapselung des objektorientierten Programmierparadigmas ebenfalls ein weiterer, wichtiger Schritt ist, die Integrität von vererbenden Klassen zu bewahren und damit die Fehleranfälligkeit von Code verringern soll.

class Test {
 public readonly string $test;
}

VIII. Fazit

Mit Drupal 10 werden sehr viele Neuerungen und Änderungen der Drupal Comminity zur Verfügung gestellt und damit ist wirklich für jeden etwas dabei, sei es für

• Developer:innen mit den Änderungen um PHP oder Symphony
• UX und UI Designer mit den Neuerungen für CKEditor
• oder Endanwender:innen mit der Verwendung des Claro Themes für das Backend.

Drupal wird größer, flexibler, aber auch innovativer und einsteigerfreundlicher.

Und eines steht fest: Drupal entwickelt sich ständig weiter und die Arbeiten an Drupal 11 haben schon längst begonnen.