Wenn du WordPress schon seit einigen Jahren verwendest, dann erinnerst du dich, als die Leute von WordPress den Gutenberg - Editor in WordPress 5.0 im Jahr 2018 eingeführt haben.

Dieser neue Standard-Editor war eine grundlegende Überarbeitung für die Bearbeitung von Beiträgen und Seiten auf Ihrer Website. Es verwandelte das große Textfeld, an das Websitebesitzer gewöhnt waren, in eine ganz andere blockbasierte Bearbeitungsplattform.

Einige Website-Besitzer hassten es so sehr, dass sie ein Upgrade auf WordPress 5.0 vermieden und so lange wie möglich beim klassischen Standard-Editor blieben. Andere Websitebesitzer begrüßten die Änderung wegen ihrer Einfachheit und Benutzerfreundlichkeit.

Wenn Sie den Übergang vollziehen und neugierig sind, was Sie erwartet, führt Sie dieses WordPress Gutenberg -Tutorial durch die wichtigsten Funktionen, die Sie kennen und verstehen müssen. Dies sollte Ihnen die Umstellung so einfach wie möglich machen.

Was Sie in WordPress Gutenberg erwartet^{(WordPress Gutenberg)}

Das Wichtigste, was man über den Gutenberg -Editor wissen sollte, ist, dass er blockbasiert ist. Das bedeutet, dass alles, was Sie hinzufügen müssen, über Blöcke verwaltet wird. Zu den Blöcken in Gutenberg gehören (sind aber nicht beschränkt auf):

• Absatz
• Header
• Bild
• Aufführen
• Zitieren
• Code
• Vorformatiert
• Pullquote
• Tisch

Es gibt auch ein paar andere fortgeschrittene Blöcke, die selten verwendet werden. Möglicherweise sehen Sie zusätzliche Blöcke, wenn Sie neue WordPress-Plugins^{(new WordPress plugins)} im Editor installieren.

Das Hinzufügen von Blöcken ist so einfach wie das Auswählen des +-Symbols rechts unter dem zuletzt hinzugefügten Block.

Wenn Sie einen der Blöcke aus dem Popup-Fenster auswählen, wird dieser Block als nächster Abschnitt auf Ihrer Seite oder Ihrem Beitrag hinzugefügt. 

Bevor wir zu diesen Blöcken kommen, fangen wir von vorne an und erstellen einen neuen Beitrag mit Gutenberg in WordPress .

Beiträge erstellen und Blöcke hinzufügen

Das Hinzufügen eines Beitrags bleibt gegenüber der letzten Version von WordPress unverändert . Wählen Sie einfach^(Just) in der linken Navigationsleiste Beiträge und darunter Neu^(Posts) hinzufügen aus  .^{(Add New)}

Dies öffnet das Post-Editor-Fenster. Auch hier ist alles anders. Sie sehen den Standard -Gutenberg-WordPress- Editor. 

Hinzufügen von Blockelementen^{(Block Items)} im Gutenberg-Editor

Sie können den Titel Ihres Beitrags in das Titelfeld eingeben. Wählen Sie dann rechts das +-Symbol aus, um den ersten Block hinzuzufügen +

Absatzblöcke^{(Paragraph Blocks)}

Der häufigste erste Block, der nach dem Titel hinzugefügt wird, ist ein Absatzblock. Wählen Sie dazu im Popup-Fenster  Absatz aus.^(Paragraph)

Dadurch wird ein Blockfeld eingefügt, in das Sie mit der Eingabe des ersten Absatzes Ihres Beitrags beginnen können. Die Formatierung für den Absatzblock^(Paragraph) folgt der Standardschriftart^{(the default font)} für die Absatzblöcke Ihrer Website. 

Hier sind einige Tipps zum Hinzufügen von Absatzblöcken im Gutenberg- Editor.

• Ihr Absatz kann beliebig lang sein. Der Text wird automatisch in die nächste Zeile umbrochen, genau wie im klassischen Editor.
• Wenn Sie die Eingabetaste^(Enter) drücken, erstellt der Gutenberg -Editor automatisch einen neuen Absatzblock, der jedoch nur wie ein zweiter Absatz mit Absatzumbruch aussieht.
• Durch das Hervorheben von Text im Absatz wird ein Formatierungsfenster angezeigt, in dem Sie die Formatierung für diesen Text ändern oder den Block in eine Liste oder einen anderen Blocktyp ändern können.
• Wählen Sie die drei Punkte und Block entfernen aus, um einen Absatzblock^{(Remove block)} zu löschen und durch etwas anderes zu ersetzen.

Bildblöcke^{(Image Blocks)}

Wenn Sie den Bildblock auswählen ,^(Image) sehen Sie ein Bildfeld, in dem Sie eine Hochladen^(Upload) -Schaltfläche auswählen können , um ein Bild^(Image) von Ihrem Computer in Ihren Beitrag hochzuladen. Wählen Sie den Link „ Medienbibliothek^{(Media Library)} “, um ein Bild aus Ihrer vorhandenen Medienbibliothek zu verwenden, oder „Von URL einfügen^{(Insert from URL)} “, um einen Link zu einem Bild von einer anderen Website zu erstellen.

Dadurch wird das Bild in den Artikel eingefügt, in dem Sie den neuen Bildblock hinzugefügt haben^(Image) . Sie werden feststellen, dass Sie die Beschriftung für das Bild direkt unter dem Bild selbst eingeben können.

Sie können für den Beschriftungstext dieselben Formatierungsoptionen verwenden wie für den normalen Absatztext.

Blöcke auflisten^{(List Blocks)}

Wenn Sie einen neuen Block hinzufügen und Liste^(List) auswählen , wird der Listenblock an dieser Stelle in den Artikel eingefügt.

Es wird ein Aufzählungszeichen angezeigt, aber während Sie tippen und die Eingabetaste^(Enter) drücken , wird jedes neue Aufzählungszeichen angezeigt, wenn Sie es benötigen.

Die Listenformatierung folgt auch dem von Ihrem Design^{(your theme)} definierten Schriftstil und der Schriftgröße. Seien Sie also nicht überrascht, wenn die Schriftart in Ihrer Liste anders aussieht als Ihre Absatzblöcke.

Sie können Text im Listenblock markieren und sehen Formatierungsoptionen für diesen Text, wenn Sie ihn ändern möchten. Sie können den Schriftstil hier nicht ändern, aber Sie können fett oder kursiv schreiben, einen Hyperlink hinzufügen oder den Blocktyp vollständig ändern.

Andere Blöcke^{(Other Blocks)}

Wenn Sie alle verfügbaren Blöcke sehen möchten, wählen Sie + aus, um einen Block hinzuzufügen, und wählen Sie dann Alle durchsuchen^{(Browse all)} aus, um die gesamte Liste anzuzeigen.

Diese Liste ist eigentlich ziemlich lang. Alles, woran Sie sich erinnern, dass es im klassischen Editor über sein Menüsystem verfügbar war, wird hier eingefügt. Dazu gehören andere häufig verwendete Blöcke wie:

• Tische
• Dateien und Medien
• Videos
• Das „Mehr“-Tag
• Seitenumbrüche und Trennzeichen
• Widgets wie soziale Symbole, Tag-Clouds, Kalender^(calendar) und WordPress-Plugin-Widgets
• Betten Sie^(Embed) Code für soziale Seiten, Medienseiten wie YouTube und Spotify und mehr ein

Andere Gutenberg-Funktionen

Sie müssen nicht bei den Blöcken bleiben, die Sie hinzugefügt haben, wo immer Sie sie hinzugefügt haben. Sie können in Ihrem Beitrag nach oben scrollen und das + -Symbol zwischen einem der vorhandenen Blöcke auswählen. Dadurch können Sie neue Blöcke zwischen bestehenden einfügen.

Sie sind auch nicht an die Platzierung Ihrer Blöcke gebunden. Im klassischen WordPress- Editor war es nicht immer einfach, Dinge wie Bilder in andere Abschnitte Ihres Beitrags zu verschieben, ohne manchmal die Hintergrundcodierung durcheinander zu bringen.

In Gutenberg ist das Verschieben von Elementen wie Bildern so einfach wie das Auswählen des Blocks und das anschließende Auswählen der Aufwärts- oder Abwärtspfeile in der Popup-Menüleiste, um den Block im Beitrag nach oben oder unten zu verschieben.

Jedes Mal, wenn Sie den Pfeil auswählen, wird dieser Block um eine Position in die von Ihnen ausgewählte Richtung verschoben.

Verwenden des Glutenberg-Editors^{(Glutenberg Editor)} in WordPress

Der Post-Bereich ist nicht der einzige Ort, an dem neue Blöcke hinzugefügt werden können. Sie werden feststellen, dass sich oben im Editor ein sehr einfaches Symbolmenü befindet, in dem Sie mit dem Symbol + auch Blöcke hinzufügen können.

Die anderen Symbole in diesem Menü geben Ihnen schnellen Zugriff auf andere Gutenberg- Funktionen.

• Mit dem Stift - Bearbeiten^(Edit) -Symbol können Sie in den Auswahlmodus wechseln, um Blöcke einfacher auszuwählen. Doppelklicken Sie auf^{(Double-click)} einen Block, um zum Bearbeitungsmodus^(Edit) zurückzukehren .
• Die Symbole „ Rückgängig^(Undo) “ oder „ Wiederherstellen^(Redo) “ (gekrümmte Pfeile nach links und rechts) machen Ihre letzte Bearbeitung rückgängig oder stellen sie wieder her.
• Das Symbol i (Details) zeigt Ihnen die Anzahl der Zeichen, Wörter, Überschriften, Absätze und Blöcke in Ihrem Beitrag.
• Mit dem Gliederungssymbol^(Outline) können Sie schnell zu Blöcken in Ihrem Beitrag navigieren, basierend auf ihrer Reihenfolge in Ihrer Beitragsgliederung.

Für viele Leute ist der Gutenberg - Editor in WordPress etwas gewöhnungsbedürftig. Nachdem Sie jedoch erfahren haben, wie einfach es ist, Blöcke von Elementen in Ihren Posts zu erstellen, zu bearbeiten und zu manipulieren, werden Sie feststellen, dass Ihr Prozess zum Erstellen von Posts und Seiten schneller und produktiver ist.

WordPress Gutenberg Tutorial: How to Use the New Editor

If you’ve been using WordPreѕѕ for quite a few years, then you remеmber when the folks at WordPress rolled out the Gutenberg editor in WordPress 5.0 back in 2018.

This new default editor was a major overhaul for editing both posts and pages on your site. It transformed the large text box that website owners were accustomed to into a very different block-based editing platform.

Some website owners hated it so much that they avoided upgrading to WordPress 5.0 and stayed with the classic default editor as long as possible. Other website owners embraced the change for its simplicity and ease-of-use.

If you’re making the transition and are curious what to expect, this WordPress Gutenberg tutorial will walk you through the main features you need to know and understand. This should make your transition as easy as possible.

What to Expect in WordPress Gutenberg

The main thing to know about the Gutenberg editor is that it’s block based. This means anything you need to add is managed via blocks. Blocks in Gutenberg include (but are not limited to):

• Paragraph
• Header
• Image
• List
• Quote
• Code
• Preformatted
• Pullquote
• Table

There are also a few other advanced blocks that are rarely used. You may see additional blocks if you install new WordPress plugins to the editor.

Adding blocks is as simple as selecting the + icon to the right under the most recent block you’ve added.

Selecting any of the blocks from the pop-up window adds that block as the next section in your page or post. 

Before we get to these blocks, let’s start from the beginning and create a new post using Gutenberg in WordPress.

Creating Posts and Adding Blocks

Adding a post remains unchanged from the last version of WordPress. Just select Posts from the left navigation bar, and select Add New underneath it. 

This will open the post editor window. This is also where everything is different. You’ll see the default Gutenberg WordPress editor. 

Adding Block Items in the Gutenberg Editor

You can type the title for your post in the title field. Then select the + icon on the right to add the first block.

Paragraph Blocks

The most common first block people add after the title is a paragraph block. To do this, select Paragraph from the pop-up window. 

This will insert a block field where you can start typing the first paragraph of your post. Formatting for the Paragraph block follows the default font for your site’s paragraph blocks. 

Here are some tips for adding paragraph blocks in the Gutenberg editor.

• Your paragraph can be as long as you like. The text will automatically wrap into the next line, just like in the classic editor.
• If you press Enter, the Gutenberg editor automatically creates a new paragraph block, however it just looks like a second paragraph with a paragraph break.
• Highlighting any text in the paragraph will show a formatting window where you can alter the formatting for that text, or modify the block into a list or some other block type.
• Select the three dots and select Remove block to delete a paragraph block and replace it with something else.

Image Blocks

If you select the Image block, you’ll see an Image box where you can select an Upload button to upload an image into your post from your computer. Select the Media Library link to use an image from your existing media library, or Insert from URL to link to an image from another site.

This will insert the image into the article where you added the new Image block. You’ll notice that you can type the caption for the image directly under the image itself.

You can use the same formatting options on the caption text as you can on the regular paragraph text.

List Blocks

When you add a new block and select List, it’ll insert the list block at that point in the article.

It’ll show one bullet, but as you type and press Enter, each new bullet will appear as you need them.

List formatting also follows the font style and size as defined by your theme, so don’t be surprised if the font in your list looks different than your paragraph blocks.

You can highlight text in the list block and you’ll see formatting options for this text if you want to change it. You can’t change the font style here, but you can bold, italics, add a hyperlink, or change the block type entirely.

Other Blocks

If you want to see all the blocks that are available, select + to add a block, then select Browse all to see the entire list.

This list is actually quite long. Anything you remember being available in the classic editor via its menu system will be included here. These include other commonly used blocks like:

• Tables
• Files and media
• Videos
• The “More” tag
• Page breaks and separators
• Widgets like social icons, tag clouds, calendar, and WordPress plugin widgets
• Embed code for social sites, media sites like YouTube and Spotify, and more

Other Gutenberg Features

You don’t have to stick with the blocks you’ve added wherever you added them. You can scroll back up in your post and select the + icon between any of the existing blocks. This will let you insert new blocks between existing ones.

You also aren’t stuck with the placement of your blocks either. In the classic WordPress editor, it wasn’t always easy moving things like images to other sections of your post without sometimes messing up the background coding.

In Gutenberg, moving elements like images is as simple as selecting the block and then selecting the up or down arrows in the pop-up menu bar to move the block up or down in the post.

Each time you select the arrow it’ll slide that block one position in whatever direction you’ve selected.

Using the Glutenberg Editor in WordPress

The post area isn’t the only place to add new blocks. You’ll notice there’s a very simple icon menu at the top of the editor where you can use the + icon to add blocks as well.

The other icons in this menu give you quick access to other Gutenberg features.

• The pen Edit icon lets you switch to select mode to more easily select blocks. Double-click a block to go back to Edit mode.
• Undo or Redo icons (left and right curved arrows) will undo or redo your last edit.
• The i (Details) icon shows you the number of characters, words, headings, paragraphs, and blocks in your post.
• The Outline icon lets you quickly navigate to blocks in your post based on their order in your post outline.

For many people, the Gutenberg editor in WordPress does take some getting used to. But after experiencing how easy it is to create, edit, and manipulate blocks of elements in your posts, you’ll find that your process of creating posts and pages is faster and more productive.

Related posts

• 9 Muss Plugins für neue WordPress-Installationen haben

• So wechseln Sie vom klassischen WordPress-Editor zu Gutenberg

• So blenden Sie Quick Links auf einer neuen Registerkarte in Edge mit dem Registrierungseditor aus

• So verschieben Sie eine WordPress-Site von einem Host auf einen anderen

• So installieren und konfigurieren Sie WordPress auf Microsoft Azure

• So richten Sie WordPress manuell auf einer Domain ein

• So verwenden Sie WP Super Cache im WordPress-Blog

• Die 3 besten SEO-Plugins für WordPress

• So installieren Sie WordPress auf der Google Cloud Platform

• So ändern Sie Ihre WordPress-Anmelde-URL für mehr Sicherheit

• Buchbesprechung: Erstellen Sie Ihre eigene Website: Ein Comic-Leitfaden für HTML, CSS und Wordpress

• So führen Sie blitzschnelles WordPress auf Microsoft Azure aus

• So entfernen Sie alle Spuren eines WordPress-Plugins

• So verwenden Sie Lumen5, um Ihren Blog-Beitrag in ein Video umzuwandeln

• Das beste Blog-Schreibformat, um Ihre Punkte zu vermitteln

• So installieren Sie eine WordPress-Testseite auf Ihrem Computer

• So aktualisieren Sie PHP in WordPress

• So steigern Sie die Leistung in WordPress durch eine Datenbankbereinigung

• Wix Vs WordPress: Was ist am besten für die Erstellung Ihrer Website?

• 7 WordPress-Tipps für eine mobilfreundliche Website