Drupal Layout Builder - ein hervorragendes Werkzeug zur Erstellung von Layouts

Layout Builder ist ein Werkzeug zum Erstellen von Drupal 8 Entitätslayouts. Es gewann vor ein paar Jahren an Popularität, aber Drupal-Entwickler verwenden es immer mehr. Wenn Sie es noch nicht getan haben oder Ihr Wissen auffrischen möchten, erklären wir Ihnen, wie Sie dieses Modul installieren, starten, verwalten und verwenden.

Was ist der Drupal Layout Builder?

Das Layout Builder Modul ist seit der Version 8.5 in Drupal Core enthalten und erfährt weiterhin signifikante Änderungen und Metamorphosen. Seine grundlegende Funktionalität bleibt jedoch unverändert. Es hilft Entwicklern, Seitenlayouts einfach und bequem mit einer Benutzeroberfläche zu erstellen und ermöglicht das Einbetten und Verlinken beliebiger Elemente in ein Layout, wie Felder, Ansichten, Menüs und Formulare.

Installation und Einrichtung des Layout Builder Moduls

Wie bereits erwähnt, ist das Layout Builder Modul seit der Version 8.5 in Drupal Core verfügbar, was bedeutet, dass Sie es nur installieren müssen.

Sie müssen keine zusätzliche Konfiguration des Moduls vornehmen und können es sofort verwenden, was Sie im nächsten Schritt sehen werden.

Stand September 2021 ist der neueste stabile Zweig von Drupal 9.2.6, und diese Version verwenden wir für alle unsere Beispiele.

Starten des Drupal Layout Builders

Da Layout Builder nur in Entitäten verwendet werden kann, finden Sie sofort nach der Installation eine Option, dieses Modul anstelle des Standard-Anzeigenmanagers im Tab Anzeige verwalten bei allen Entitätstypen zu verwenden.

Mit Drupal Layout Builder können Sie Layouts für einen bestimmten Entitätstyp erstellen, sodass jede Entität eines bestimmten Typs das gleiche Layout hat. Es gibt jedoch auch eine zusätzliche Option:

Diese erlaubt es individuellen Entitäten, das Standardlayout für diesen Entitätstyp zu überschreiben. Dies bietet nahezu unbegrenzte Möglichkeiten und ermöglicht es Ihnen, das Erscheinungsbild nur einer Entität eines bestimmten Typs zu ändern, während das Layout aller anderen Entitäten erhalten bleibt.

Nach Anwendung der ausgewählten Optionen ändert sich das Aussehen des Anzeigeverwaltungsformulars. Sie finden auch einen zusätzlichen Button mit der Bezeichnung Layout verwalten.

Bitte beachten Sie, dass seit Version 8.6 das Modul Ihnen erlaubt, Layout Builder für einen bestimmten Anzeigemodus zu aktivieren/deaktivieren. Das bedeutet, dass der Teaser-Modus unberührt bleibt und die Standard-Drupal-Engine verwendet.

Layout-Verwaltung

Was macht dieser mysteriöse Layout verwalten Button? Er führt Sie zur Layout-Bearbeitungsseite, die das Standardseitenlayout verwendet.

In diesem Modus können Sie Abschnitte und Blöcke in einem Abschnitt verwalten. Sie können auch einfach die Reihenfolge der Abschnitte ändern sowie Blöcke innerhalb und zwischen Abschnitten durch Ziehen und Ablegen verschieben.

Es ist wichtig, alle Operationen durch Klicken auf den Layout speichern Button zu bestätigen.

Um einen neuen Abschnitt hinzuzufügen, klicken Sie auf Abschnitt hinzufügen. Dann erscheinen die verfügbaren Layouts auf der rechten Seite



Nachdem Sie eines ausgewählt haben, wird ein Abschnitt mit dem ausgewählten Layout hinzugefügt. Sie können dann den Abschnitt mit Blöcken füllen. Um dies zu tun, klicken Sie auf Block hinzufügen.

Sie können aus vielen verfügbaren Optionen wählen. Neben Feldern können Sie auch leicht ein Formular, eine Ansicht, ein Menü oder Blöcke in einer Entität einbetten. 

Wenn Sie etwas noch Leistungsfähigeres benötigen, kombinieren Sie Layout Builder mit dem Entity Blocks Modul (entity_block), welches Ihnen ermöglicht, eine beliebige Entität in einem ausgewählten Anzeigemodus als Abschnittsblock einzubetten. Dadurch können Sie zuvor erstellte Elemente leicht wiederverwenden und an beliebiger Stelle im Layout platzieren.

Einzel-Entitätslayout

Bisher haben wir an einem Layout für den Entitätstyp gearbeitet. Aber nehmen wir an, dass Sie möchten, dass eine einzelne Entität etwas anders als der Rest angezeigt wird, zum Beispiel mit Ihrem eigenen Block.

Layout Builder erweitert das Entitätsrouting mit einer zusätzlichen Seite mit /layout Argument, was bedeutet, dass Sie einen zusätzlichen Layout Tab beim Bearbeiten eines Blocks oder Knotens finden können.

Beim Betrachten eines Knotens finden Sie in den Tabs auch eine schnelle Verknüpfung zur Layout-Bearbeitung:

Alles, was Sie jetzt tun müssen, ist, das bestehende Standardlayout nach Ihren Bedürfnissen zu ändern und alle Änderungen anzuwenden. Wenn Sie jemals das Standardlayout wiederherstellen müssen, haben Sie auch die Möglichkeit, „Auf Standard zurücksetzen“ zu wählen.

Wichtig: Wenn Sie die Option zur Änderung des Layouts für eine einzelne Entität verwendet haben, wird die Möglichkeit zum Deaktivieren des Layout Builders blockiert.

Nur das Wiederherstellen aller geänderten Layouts auf ihre Standardwerte wird Ihnen ermöglichen, die Layout-Optionen wieder zu ändern.

Layout Builder unter der Haube

Drupal Layout Builder ist definitiv beeindruckend, wenn es um die Verwaltung der Benutzeroberfläche geht. Allerdings könnten die Programmieraufgaben, auf die Sie beim täglichen Arbeiten mit dem Werkzeug stoßen, etwas komplexer sein. Sie könnten sich dann fragen, wie man mit dem Layout Builder im Code arbeitet.

Es stellt sich heraus, dass das Aktivieren und Entsperren von Templates für eine einzelne Entität relativ einfach ist.

Laden Sie einfach die Anzeige:

$entityViewDisplay = \Drupal::entityTypeManager->getStorage('entity_view_display')->load('ENTITY_TYPE.ENTITY_BUNDLE.VIEW_MODE');

Es wird ein Objekt des Typs LayoutBuilderEntityViewDisplay zurückgeben, das Sie dann wie folgt modifizieren müssen:

$entityViewDisplay->enableLayoutBuilder();

um den Layout Builder für einen bestimmten Anzeigemodus zu aktivieren, oder setzen Sie zusätzlich das Flag:

$entityViewDisplay->setOverridable(TRUE);

um die Erstellung individueller Layouts für eine einzelne Entität zu ermöglichen.

Dann müssen Sie alles speichern.

$entityViewDisplay->save();

Was tatsächlich im Hintergrund passiert, ist, dass das Layout Builder Modul den layout_builder Schlüssel zu den third_party_settings eines bestimmten Entitätstyps hinzufügt, der Werte für die oben gezeigten Parameter (enabled, allow_custom) enthält und das Standardlayout für diesen Entitätstyp unter sections speichert.

Wenn das setOverridable Flag auf TRUE gesetzt ist, wird ein neues Entitätsfeld namens layout_builder__layout erstellt, welches das modifizierte Layout für diese bestimmte Entität speichert.

Auf der anderen Seite ist das Erstellen eines Abschnitts mit Code und das Füllen mit geeigneten Inhalten etwas komplizierter.

Lassen Sie uns mit der Erstellung eines neuen Abschnitts beginnen. Dazu müssen wir eine neue Instanz der \Drupal\layout_builder\Section Klasse erstellen, einschließlich des layout_id Parameters, der als Layout-Identifikator dient. 

Profi-Tipp: Layouts sind in *.layouts.yml Dateien definiert und die Standardvorlagen sind im layout_discovery Modul zu finden.

Dann ist der einfachste Weg einfach, ein weiteres Element zum Abschnitt hinzuzufügen, indem Sie die appendComponent Methode verwenden, die eine Instanz der \Drupal\layout_builder\SectionComponent Klasse als Argument nimmt. Allerdings müssen Sie einige Dinge vorbereiten, bevor Sie ein solches Abschnittskomponent erstellen können. Zuerst benötigen Sie folgende Komponenten:

• die uuid des eingebetteten Elements,
• den Namen der Region im Abschnitt,
• Plugin-Konfiguration.

In diesem Beispiel verwenden wir das Plugin von Entity Blocks, um einen Beispielknoten in einem einspaltigen Abschnitt einzubetten:

$section = new Section('layout_onecol');

$uuid = $node->uuid();
$region = ‘content’;
$pluginConfiguration = [
  'id' => 'entity_block:node',
  'provider' => 'entity_block',
  'label_display' => FALSE,
  'view_mode' => 'default',
  'entity' => $node->id(),
];
$component = new SectionComponent($uuid, $region, $pluginConfiguration);
$section->appendComponent($component);

Man muss immer daran denken, dass Layouts in Drittanbieter-Einstellungen oder in einem Feld gespeichert werden, also müssen Sie den Abschnitt in einem dieser Orte speichern.
In unserem Beispiel verwenden wir ein Feld, also:

$entity->layout_builder__layout->setValue($section);
$entity->save();

Durch all diese Schritte haben Sie jetzt einen einspaltigen Abschnitt zu einer Entität hinzugefügt und einen Beispielknoten darin angezeigt.

Sie könnten auch an folgenden Themen interessiert sein: Benutzerdefinierte Entitätsformulare am Beispiel der Benutzerbearbeitung und -registrierung

Vor- und Nachteile des Layout Builder Moduls 

Unten haben wir eine kurze Liste einiger Vor- und Nachteile zusammengestellt, die wir bei der Arbeit mit Layout Builder entdeckt haben:

Vorteile:

• Einfache Bereitstellung – das Modul ist bereits im Kern enthalten, es besteht keine Notwendigkeit, neue Entitätstypen zu implementieren.
• Übersichtliche Benutzeroberfläche mit Drag&Drop-Funktionalität.
• Anpassungsoptionen für individuelle Entitäten.
• Ein einfacher Weg, Felder mit anderen Entitäten zu kombinieren, ohne zusätzliche Referenzfelder zu erstellen.
• Ein bequemer Weg, vorhandene Entitäten einzubetten unter Verwendung von Entity Blocks.

Nachteile:

• Wenn die Website wächst (neue Entitätstypen und einbettbare Elemente), steigt die Ladezeit aller verfügbaren Elemente drastisch an.
• Da das Modul auf die Benutzeroberfläche fokussiert ist, könnte das Hinzufügen neuer Layouts intuitiver sein. Derzeit müssen wir .yml-Dateien und Vorlagen mit Code erstellen.
• Bei einer großen Anzahl von Elementen im Layout wird das Ziehen von Elementen zwischen den Abschnitten etwas schwierig.
• Schwieriger Zugriff auf Abschnitte in Twig, Namen sind mit uuid versehen, was das Rendern eines ausgewählten Abschnitts erschwert.

Drupal Layout Builder – Zusammenfassung

Drupal Layout Builder bringt viele interessante Möglichkeiten im Bereich der Layout-Verwaltung, sowohl unter Verwendung der Benutzeroberfläche als auch von Code. Wird es alle bestehenden Lösungen ersetzen?

Meiner Meinung nach ist es ein perfektes Werkzeug, das das Problem von Layouts im großen Maßstab löst. Geschlossene Komponenten mit beliebten Modulen wie Paragraphs, Field Group zu erstellen und dann fertige Layouts mithilfe dieser Komponenten mit Layout Builder zu bauen, scheint eine perfekte Lösung zu sein.

Wie jedes Drupal-Modul hat Layout Builder eine eigene spezifische Verwendung – es wird also, wie immer, in einigen Bereichen besser Probleme lösen und bei anderen Herausforderungen schlechter abschneiden. Probieren Sie es selbst aus!