Tipps und Tricks zum WordPress-Gutenberg-Editor

Der mit WordPress 5.0 gestartete Editor Gutenberg bringt viele neue und nützliche Funktionen. Einige davon muss man aber erstmal finden. Die meiner Meinung nach wichtigsten habe ich nachfolgend aufgelistet und erklärt.

Drag’n’Drop von Inhalten

Medien, die eigentlich erst hochgeladen werden müssen, können in Gutenberg direkt per Drag’n’Drop (mit gedrückter Maustaste die Datei in den Editor ziehen) abgelegt werden. Die Datei bzw. die Dateien werden automatisch hochgeladen und in ihrem jeweiligen Block (beispielsweise Bild oder Audio) eingebunden. Auch beliebige Dateien können (sofern in WordPress zugelassen) so hochgeladen werden und dann als Download-Schaltfläche verlinkt werden.

Slash-Befehle

Wenn du unterschiedliche Blöcke nutzt, sind die Slash-Befehle sehr praktisch. Starte einen neuen Block durch Drücken der Enter-Taste oder durch den Klick auf ein entsprechendes Icon und gib einfach ein / ein. Dann erhältst du automatisch ein Drop-down-Menü mit einer Auswahl deiner zuletzt genutzten Blöcke. Benötigst du einen anderen, tippe nach dem / einfach dessen Namen ein. Das Drop-down-Menü wird automatisch entsprechend aktualisiert. Du kannst den gewünschten Block dann daraus mit der Maus oder mit den Pfeiltasten und einem anschließenden Druck auf Enter auswählen.

Jeder Block kann auch noch zusätzliche Schlagworte enthalten. Bei der Eingabe von /audio erscheinen neben dem eigentlichen Audio-Block demnach auch noch weitere Blöcke, die etwas mit Audio zu tun haben. Die Anzahl dieser Schlagworte ist pro Block auf 3 limitiert, sodass ein Block nicht alle Möglichkeiten abdeckt und damit immer erscheint, egal was du eingibt.

Überschriften-Größe schnell auswählen

Wer Markdown kennt, der weiß, dass man dort das #-Symbol nutzen kann, um eine Überschrift zu erzeugen. Ein # steht dabei für eine Überschrift des 1. Levels (H1), zwei ## für eine Überschrift des 2. Levels (H2) und so weiter. Dies ist auch bei Gutenberg möglich. Starte einen neuen Absatz einfach mit ### und drücke die Leertaste. Schon erhältst du eine Überschrift des 3. Levels (H3).

Eine Überschrift des 1. Levels ist mit # in WordPress nicht möglich, zwei bis sechs # Zeichen funktionieren jedoch wie beschrieben.

Backticks für Inline-Code

Wer Inline-Code nutzt, der per <code></code> dargestellt wird, dem wird das Einbinden im Gutenberg-Editor leichter gemacht als bisher. Es genügt, ein Backtick (`) zu setzen, den gewünschten Code zu schreiben und dann nochmals ein Backtick zu setzen. Beim Druck auf die Leertaste (oder Pfeil nach rechts) danach wird der Inhalt, der von den Backticks umschlossen wurde, automatisch als Code dargestellt. Die Darstellung siehst du bereits hier in der ersten Zeile bei dem HTML-Code sowie dem Backtick in den Klammern.

Klick auf die Überschriften bei der Gliederung

Gerade bei längeren Beiträgen durchaus nützlich: Mit einem Klick auf das Informations-Symbol oben links neben den Icons für Rückgängig und Wiederholen kannst du die Gliederung aufrufen. Klicke nun auf eine der dort dargestellten Überschriften und der Cursor wird direkt bei dieser Überschrift aktiv, sodass du sie schnell bearbeiten oder von dort aus weiter navigieren kannst.

Schnelles Speichern eines Entwurfs

Wenn du schnell eine Änderung oder einen Entwurf speichern möchtest, drücke einfach STRG + S unter Windows bzw. ⌘ + S unter macOS. Das speichert direkt die letzten Änderungen in deinem Beitrag. Solange der Beitrag noch nicht veröffentlicht wurde, wird lediglich der Entwurf neu gespeichert. Wurde der Beitrag bereits veröffentlicht wird die Änderung direkt live angezeigt.

Dies ist übrigens keine Gutenberg-spezifische Funktion und funktionierte bereits im alten Editor.

Tastenkombinationen

Für Gutenberg gibt es viele Tastenkombinationen, die einem das Leben erleichtern. So ist es beispielsweise per STRG + ⇧ + D bzw. ⌘ + ⇧ + D möglich, einen Block zu duplizieren oder mit STRG + K bzw. ⌘ + ⇧ + K einen Link in einem Text zu entfernen. Es gibt noch viele weitere Tastenkombinationen, für die Gutenberg selbst eine Übersicht mitbringt. Diese kann man entweder mit der Tastenkombination ⇧ + ALT + H bzw. ⌃ + ⌥ + H aufrufen oder aber über die drei Punkte oben rechts für die weiteren Werkzeuge unter dem Eintrag Tastaturkürzel.

Vorhandenen Text schnell verlinken

Auch keine spezifische Funktion für Gutenberg, sondern bereits länger in WordPress vorhanden, ist die Funktion, einen bereits vorhandenen Text im Editor schnell zu verlinken. Dazu genügt es, den Link in die Zwischenablage zu legen, den gewünschten Text zu markieren und mit STRG + V bzw. ⌘ + V den Link einzufügen. Dann wird automatisch der markierte Text mit dem Link aus der Zwischenablage verlinkt.

Ansicht anpassen

Du benötigst gewisse Funktionen generell nicht, beispielsweise die Schlagwörter oder das Beitragsbild? Dann kannst du diese in Gutenberg komplett ausblenden. Klicke dazu auf die drei Punkte oben rechts für die weiteren Werkzeuge und wähle dann den Eintrag „Ansicht anpassen“. Dort kannst du dann die jeweiligen Bereiche global deaktivieren oder wieder aktivieren.

Beachte aber, dass diese Einstellungen nur für deinen eigenen Account greifen und die Ansicht anderer Bentuzer deiner Seite davon nicht beeinflusst wird.