Direkt zum Inhalt

Gutenberg in Drupal 8

Wordpress Gutenberg-Editor in Drupal 8

Gutenberg ist der neue Editor von WordPress, der seit Ende 2018 für großes Aufsehen sorgt. Statt alle Inhalte in ein einziges Textfeld zu setzen, werden Seiten in flexiblen Blöcken angelegt. So ein Block kann ein Textabsatz sein, eine Überschrift oder ein Bild, oder eine komplexe Struktur wie Gallerien und Spalten aufbauen.

Der Gutenberg-Editor kann inzwischen auch in Drupal 8 benutzt werden. Drupal kommt schon von Haus aus mit einem Block-System: Drupal-Blöcke sind eigenständige Elemente, die an vorbestimmten Stellen des Layouts auf beliebigen Seiten eingesetzt werden können.

Der Drupal-Editor war aber immer schon ein störrisches starres Ding aus der Steinzeit (nicht anders als der WordPress-Editor), dem alles neben Überschrift, Absatz und Bild gegen den Strich ging. Da half das System der Drupal-Blöcke nur begrenzt beim Layout der individuellen Seiten, denn Drupal-Blöcke lassen sich nicht an beliebige Stellen des Editors einbeziehen, sondern sind auf ihre Position im Layout beschränkt.

Gutenberg installieren und aktivieren

Einstellungen für das Eingabeformular Titel Veröffentlichungseinstellungen Published, Neue Revision erstellen Spracheinstellungen Standardsprache der Website (German) Menüeinstellungen Gutenberg-Erlebnis Gutenberg-Erlebnis aktivieren Verwandelt das Formular zum Bearbeiten von Inhalten in die Gutenberg UI. Hierfür benötigt der Inhaltstyp mindestens ein Textfeld. Inhaltstyp Basic page bearbeiten Inhaltstyp sichern

Gutenberg für Drupal-Autoren

Gutenberg erspart dem Autor die Flut der Drupal-Blöcke und bringt Design-Elemente wie Spalten und Galerien relativ unkompliziert auf jede Seite und an jede beliebige Stelle des Seiteninhalts.

Der Gutenberg-Editor ist anders als alle anderen Editoren für Drupal. Gutenberg-Seiten werden aus Gutenberg-Blöcken aufgebaut – Gutenberg-Blöcke sind keine Drupal-Blöcke!

So zeigt sich Gutenberg als Editor: aufgeräumt und überschaubar, kein Vergleich zum eingebauten Drupal-Editor und selbst zu den überlasteten Editoren mit zusätzlichen Funktionen.

Den ersten Text schreiben: Mit der Maus über Text hinzufügen oder … hovern, klicken und schreiben.

Drupal 8 Gutenberg Block anlegen Drupal 8 Gutenberg Block anlegen Drupal 8 Gutenberg Block anlegen Drupal 8 Gutenberg Block anlegen Drupal 8 Gutenberg Block anlegen Drupal 8 Gutenberg Block anlegen Drupal 8 Gutenberg Block anlegen Drupal 8 Gutenberg Block anlegen Drupal 8 Gutenberg Block anlegen

Um die verfügbaren Gutenberg-Blöcke zu inspizieren, mit der Maus über "Text hinzufügen …" hovern und auf das Plus-Symbol klicken, mit dem Pfeil-nach-unten-Symbol eine Sektion aufklappen und scrollen, um weitere Sektionen zu öffnen.

Am rechten Rand des Gutenberg-Editors unter Speichern und Vorschau sitzen zwei Tabs: Document und Block. Wenn ein Gutenberg-Block aktiviert ist, zeigt das Block-Tab weitere Konfigurations-Einstellungen, z.B. Schriftgröße, Farben für Text und Hintergrund für einen Absatz (Paragraph).

B I ABC Der Überschrift folgte ein Absatz dicht auf den Fersen Hide Block Settings Duplicate Insert Before Insert After Edit as HTML Add to Reusable Blocks Remove Block < > HTML

Gutenberg-Blöcke können innerhalb des Editors an eine andere Position geschoben und miteinander vertauscht werden. Dazu sitzt auf der linken Seite jedes Gutenberg-Blocks das Symbol mit Pfeil-rauf, Pfeil-runter. Wenn das Symbol nicht sichtbar wird, mit der Maus über dem Gutenberg-Block nach links hovern.

Column –> Paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta ex in libero dictum, sed iaculis risus convallis. Praesent dignissim tincidunt libero, ut tempor metus dapibus sit amet.

body { max-width: 900px; margin-left: auto; margin-right: auto } img { width:100%; height: auto; } .slides { position: relative; max-width: 720px; margin: 2em auto; border:1px solid gainsboro; } .slides img { position: absolute; top: 0; left:0; } .slides canvas { display: block; width: 100%; visibility: hidden; } .svginside { position: relative; margin-left: auto; margin-right: auto; } .svginside canvas{ display: block; width: 100%; visibility: hidden; } .svginside svg { position: absolute; top: 0; left:0; }