Verbesserung der Layout-Builder-Erfahrung von Drupal

Als der Layout Builder in Drupal 8.6 eingeführt und in Drupal 8.7 stabilisiert wurde, führte er zu einer Verschiebung des Seitenerstellungsmechanismus, der im Drupal-Ökoraum verwendet wird. Der Layout-Builder hat anderen Tools wie Paragraphs, Brick, Panels und Display Suite eine harte Konkurrenz gemacht. Seine einzigartige Fähigkeit, Komponenten per Drag-and-Drop zu ziehen und in Echtzeit anzuzeigen, war ein echtes Zugeständnis für ein Page Builder-Tool und für die Autoren.

Obwohl es ein erstaunliches Werkzeug zum Erstellen von Seiten ist, hat es jedoch seine Nachteile, wenn es für Unternehmensanwendungen verwendet wird, die eine bessere Authoring-Fähigkeit, eingeschränkte Auswahl, schnellen Zugriff und, was noch wichtiger ist, granulare Berechtigungen für verschiedene Benutzerrollen erfordern.

In diesem Artikel werde ich 10 von Drupal beigesteuerte Module behandeln, die in Verbindung mit dem brillanten Layout Builder-Modul verwendet werden können, das das Tool faszinierender und maßgeblicher macht. Um diese Großartigkeit noch zu verstärken, sind alle diese Module und auch mit Drupal 9 kompatibel!

Die Module sind in bestimmte Kategorien unterteilt:

• Styling - Möglichkeit, dem Editor Zugriff zu gewähren, um aus einer Stilbibliothek auszuwählen, die auf Abschnitte und Blöcke angewendet werden kann.
• Authoring-Erfahrung - Verbessern Sie die Authoring-Erfahrung der Redakteure, die sie lieben werden.
• Wiederverwendbarkeit – Bereitstellung zur Wiederverwendung von Komponenten oder Abschnitten auf verschiedenen Seiten, um die Seitenerstellungszeit zu verkürzen.
• Schnellzugriff - Bieten Sie den Editoren schnellen Zugriff, um bestimmte Aktionen auszuführen und so Zeit zu sparen.
• Berechtigungen – Gewähren Sie Bearbeitern oder anderen Benutzerrollen eingeschränkten Zugriff basierend auf ihrem Zugriff.

Layout Builder-Stile

Der Layout Builder Styles ist ein leistungsstarkes Drupal-Modul, mit dem Sie den Blöcken und Abschnitten direkt über die Benutzeroberfläche Stile hinzufügen können. Es kann verwendet werden, um den Autoren die Möglichkeit zu geben, aus einer Liste von voreingestellten Stilen auszuwählen, die im Backend definiert sind.

Ein "Stil" ist nur eine Darstellung einer oder mehrerer CSS-Klassen, die angewendet werden. Außerdem wird bei Blöcken ein Blockvorlagenvorschlag für den ausgewählten Stil hinzugefügt.

Die Stile sind im Grunde Konfigurationsentitäten, die die CSS-Klassen enthalten. Die Klassen, die in der Konfiguration hinzugefügt werden, müssen im Stylesheet des Frontend-Themes definiert werden, damit sie sich im Frontend widerspiegeln, wenn sie auf einen bestimmten Abschnitt oder einen Block angewendet werden. Es gibt eine Vorkehrung für mehrere Stile, die auf einen einzelnen Block oder Abschnitt angewendet werden können.

Da die Stile als Konfiguration gespeichert werden, können sie mithilfe der Drupal-Konfigurationsverwaltung einfach in Konfigurationsdateien exportiert werden.

Sie müssen jedoch beim Hinzufügen von Stilen verantwortungsbewusst sein, da Sie den Autoren eine leistungsstarke Möglichkeit geben, die Stile der auf einer Seite platzierten Komponenten zu ändern. Wenn nicht richtig geplant, können die Dinge mit widersprüchlichen Stilen in den Süden gehen.

Komponentenattribute des Layout Builder

Das Modul Attribute der Layout Builder-Komponente bietet Autoren ähnliche Möglichkeiten, jedoch mit mehr Optionen und nur für die Blöcke, die in einem Layout platziert werden.

Oftmals müssen Autoren einem Block bestimmte Datenattribute oder bestimmte CSS-Klassen/IDs hinzufügen, um die Daten auf eine bestimmte Weise zu rendern. Für solche Fälle stehen Module wie Blockattribute und Blockklasse zur Verfügung, die jedoch entweder nicht vom Layout Builder unterstützt werden oder gepatcht werden müssen. Das Modul Attribute der Layout Builder-Komponente bietet die Möglichkeit, diese Details als Attribute zu den Blöcken direkt in der Layout Builder-Benutzeroberfläche hinzuzufügen.

Die Module bieten Optionen ID, Klasse(n), Stile [Inline-Stile zum Block], Daten-*-Attribute. Diese Attribute können 1) dem Blockelement (äußeres) Element, 2) dem Blocktitel und 3) dem Blockinhaltselement (inneren) hinzugefügt werden. Die Optionen sind für jeden Elementtyp konfigurierbar, dh wenn Sie nicht möchten, dass das ID-Feld für Blocktitel verfügbar ist, können diese im Modulkonfigurationsformular unter deaktiviert werden

„/admin/config/content/layout-builder-component-attributes“

Layout Builder Modal

Das Layout Builder Modal-Modul von Drupal modernisiert die Benutzeroberfläche und das Authoring-Erlebnis für die Blockkonfigurationsformulare oder Erstellungsformulare (im Falle von Inline-Blöcken). Das Formular, das in der Seitenleiste des Off-Canvas-Dialogs angezeigt wird, kann sehr umständlich werden, da es sehr schmal ist. Vor allem, wenn Sie es mit komplexen Feldern, Rich-Text-Feldern, Medienreferenzen usw. zu tun haben. Der Off-Canvas-Dialog schränkt die Benutzerfreundlichkeit stark ein und ist für solche Situationen nicht ideal.

Das Modul öffnet die Formulare in einem Popup-Fenster, in dem es viel Platz zum Atmen und eine erhöhte Benutzerfreundlichkeit gibt. Es stehen Konfigurationen zur Verfügung, in denen Sie die Breite und Höhe des modalen Popup-Fensters festlegen können. Sie können auch auswählen, welches Thema für den modalen Inhalt verwendet werden soll, wobei Sie entweder die standardmäßig aktivierten Themen (Olivero im Falle des obigen Screenshots) und das gute alte Seven-Administrationsthema auswählen können. Derzeit wird Claro nicht unterstützt, aber an dieser Front wird daran gearbeitet, Claro als Alternative zur Verfügung zu stellen.

Insgesamt verbessert das Modul die Autorenerfahrung für Redakteure und die Benutzerfreundlichkeit des Layout Builders erheblich.

Layout Builder-Bibliothek

Betrachten wir eine Situation, in der die Redakteure schnell eine Seite einrichten müssen, auf der sie bestimmte Inhaltsblockkomponenten basierend auf bestimmten Kriterien anzeigen müssen, z. B. Auswahl bestimmter Taxonomiebegriffe. Dies kann nun auf die harte Tour erfolgen, indem Redakteure eine Landingpage erstellen und dann immer wieder dasselbe Layout für mehrere Seiten mit demselben Inhalt, aber unterschiedlichen Bedingungen erstellen. Oder verwenden Sie das Bibliotheksmodul Layout Builder.

Die Bibliotheksmodule des Layout-Builders bieten dem Site-Administrator die Möglichkeit, vordefinierte Layouts für jede Entitätstyp- und Bundle-Kombination zu erstellen. Diese Layouts stehen nun den Site-Editoren beim Erstellen des Inhalts der Zielseite zur Verfügung. Dies wird die Aufgabe viel einfacher und schneller machen, da die Redakteure dieselbe Aufgabe nicht wiederholt wiederholen müssen. Das Modul bietet auch granulare Berechtigungen, um Redakteure auf die Erstellung eigener maßgeschneiderter Layouts einzuschränken, ihnen jedoch die Möglichkeit zu geben, Layouts pro Inhaltselement anzupassen.

Sektionsbibliothek

Ähnlich wie in der oben erwähnten Situation, in der Redakteure möglicherweise aus einem vorhandenen Layout aus einer Bibliothek auswählen müssen, kann es vorkommen, dass Redakteure bestimmte Abschnitte des Layout Builder auf mehreren Seiten wiederverwenden müssen. Hier kommt die Sektionsbibliothek ins Spiel. Mit dem Modul können Redakteure eigene Mini-Layouts erstellen, die sie auf anderen Seiten wiederverwenden können. Dies ermöglicht es ihnen, Seiten schneller zu erstellen, ohne die gleichen Dinge wiederholt zu tun.

Der Hauptunterschied zwischen diesem Modul und dem Layout Builder Library-Modul besteht darin, dass letzteres eine ganzseitige Vorlage erstellt und konfigurationsbasiert ist. Die Abschnittsbibliothek ist inhaltsbasiert, sodass der Inhaltseditor Vorlagen ohne Import-/Exportkonfigurationen erstellen kann. Außerdem erstellt sie Vorlagen für den Abschnitt oder mehrere kombinierte Abschnitts-(Seiten-)Vorlagen.

Es gibt keine Überschneidungen zwischen den beiden Modulen und Sie können beide gleichzeitig verwenden.

Direktes Hinzufügen zum Layout Builder

Eine der Hauptfunktionen von Layout Builder ist die Möglichkeit, Inline-Blöcke hinzuzufügen, die einzelne nicht wiederverwendbare Blöcke sind, die spezifisch für eine Seite sind. Wenn die Seiten in Ihrem System nun hauptsächlich von diesen Inline-Blöcken als Komponenten abhängen, kann das Layout Builder Direct Add durch die Einsparung einiger Klicks einiges an Redakteurszeit sparen.

Das Modul ersetzt einfach die Schaltfläche "Block hinzufügen" durch eine schnelle Dropdown-Schaltfläche zu den im System verfügbaren Blocktypen durch eine Option "Mehr", die die Seitenleiste des Off-Canvas-Dialogfelds öffnet. Wenn ein Editor einen der Blocktypen aus der Liste auswählt, öffnet er direkt das Blockformular, um diese Komponente zu erstellen.

Link zum Layout-Builder-Betrieb

Dieses kleine Modul ist eine gute Funktion für eine Site. Um auf die Layout Builder-Benutzeroberfläche für eine Entität zuzugreifen, muss ein Redakteur die Seite besuchen und dann in der Taskleiste auf die Registerkarte Layout klicken. Der Layout Builder Operation Link fügt dem Inhalt auf der Inhaltsübersichtsseite eine Layoutoption als Dropdown-Schaltfläche hinzu.

Die Layoutoption wird für alle Entitätstyp-Bundles angezeigt, in denen Layout Builder aktiviert ist. Dieser Link erspart Content-Editoren einen Klick/einen Seitenladen, wenn sie direkt auf die Layoutseite einer Entität zugreifen möchten, ohne zuerst die Bearbeitungsseite zu laden.

Einschränkungen für den Layout Builder

Standardmäßig listet Layout Builder alle im System verfügbaren Blöcke auf, die von verschiedenen Plugins und Modulen bereitgestellt werden, Felder sind als Blöcke verfügbar und es gibt Inline-Blockoptionen zum Erstellen einmaliger Blöcke. Außerdem werden alle Layouts anderer Module und das Theme aufgelistet, wenn ein Abschnitt platziert wird. Dies kann für Redakteure ein wenig verwirrend und überfordernd sein und stellt ein Usability-Problem dar, da die Anzahl der Blöcke in einer Unternehmensanwendung schnell anwachsen kann.

Layout Builder Restrictions löst dieses Problem, indem ein konfigurierbares Layout mit benötigten Optionen bereitgestellt wird. Diese Optionen sind immer dann vorhanden, wenn der Layout Builder für eine beliebige Entitätsanzeige aktiviert ist. Die modulkonfigurierbare Benutzeroberfläche für Blöcke und Layouts zum Zulassen/Ablehnen von Listen. Sites können alle Optionen eines bestimmten Anbieters zulassen oder alle Optionen nach Anbieter einschränken oder einzelne zulässige Blöcke und Layouts angeben. Site-Administratoren können die Blöcke zulassen/verweigern, die für Redakteure nützlich sind, um die Seiten zu erstellen, und nur diese Blöcke und Layouts stehen den Redakteuren zur Auswahl.

Erweiterte Berechtigungen für Layout Builder

Obwohl Drupal ein leistungsfähiges Berechtigungssystem für Benutzerrollen bietet, kann es auf der Grundlage der Rollen Möglichkeiten für detailliertere Berechtigungen geben. Die Situation kann auftreten, wenn mehrere Benutzerrollen mit dem System und den Seiten interagieren.

Das Modul "Layout Builder Advanced Permissions" bietet Site-Administratoren die Möglichkeit, eingeschränkte Nutzungsberechtigungen basierend auf ihrer Rolle zu erteilen. Diese Berechtigungen sind global und werden auf alle Entitätstypen angewendet, bei denen der Layout Builder aktiviert ist. Um die Dinge weiterzuentwickeln und den Zugriff auf einer gröberen Ebene einzuschränken, ist die Layout-Builder-Sperre praktisch, die im nächsten Abschnitt behandelt wird.

Layout Builder-Sperre

Wie oben erwähnt, bietet die Layout Builder-Sperre den Benutzern einen gröberen Zugriff. Es ermöglicht Administratoren, Abschnitte eines Standardlayouts zu sperren, sodass Benutzer bestimmte Aktionen nicht ausführen können, wenn das Layout für eine einzelne Entität überschrieben wird.

Diese Sperreinstellungen sind verfügbar, wenn das Modul installiert wird und sind für alle Bereiche verfügbar. Es stehen globale Berechtigungen zur Verfügung, um den Zugriff auf die Sperrfunktionen zu verwalten. Dies sind erweiterte redaktionelle Funktionen, die hinzugefügt und sehr verantwortungsbewusst verwendet werden sollten. Das Sperren eines Abschnitts oder einer beliebigen Komponente innerhalb eines Abschnitts bedeutet, dass der Abschnitt nur sehr eingeschränkten Zugriff zur Änderung hat.

Kurze Zusammenfassung

1. Layout-Builder-Stile – ermöglichen Site-Buildern, aus einer Liste von Stilen auszuwählen, die auf Layout-Builder-Blöcke und Layout-Builder-Abschnitte angewendet werden sollen.
2. Layout Builder-Komponentenattribute - ermöglicht es Editoren, HTML-Attribute zu Layout Builder-Komponenten (Blöcken) hinzuzufügen.
3. Layout Builder Modal - Ermöglicht das Hinzufügen und Konfigurieren vorhandener Blöcke in einem Modal in der Layout Builder-Benutzeroberfläche.
4. Layout-Builder-Bibliothek – stellt eine Layout-Bibliothek bereit, mit der Inhaltseditoren aus einer Liste vordefinierter Layouts auswählen können.
5. Abschnittsbibliothek - Erstellen Sie wiederverwendbare Vorlagen für einzelne oder mehrere Abschnitte.
6. Layout Builder Direct Add - ersetzt den Link "Block hinzufügen" durch eine Dropdown-Schaltfläche, die benutzerdefinierte Blocktypen auflistet.
7. Layout Builder-Operations-Link - fügt einen 'Layout'-Operations-Link zu Layout Builder-aktivierten Inhalten auf Drupal-Verwaltungsseiten hinzu.
8. Layout Builder-Einschränkungen - Legen Sie fest, welche Blöcke und welche Layouts für die Platzierung im Layout Builder verfügbar sein sollen.
9. Erweiterte Berechtigungen für den Layout-Builder – ermöglicht die detaillierte Steuerung des Zugriffs auf die Seite des Layout-Builders durch Bereitstellung eines detaillierteren Berechtigungssatzes.
10. Layout-Builder-Sperre – ermöglicht Administratoren das Sperren von Abschnitten eines Standardlayouts, sodass Benutzer beim Überschreiben des Layouts für eine einzelne Entität bestimmte Aktionen nicht ausführen können.