Der Block-Editor (Gutenberg) für Einsteiger und Umsteiger

Vortrag zum Block-Editor beim WordPress-Online-Meetup (Aachen) am 28.10.2020

Dieser Beitrag beinhaltet alle Informationen zum Vortrag „Der Block-Editor (Gutenberg) für Einsteiger und Umsteiger“, der im Rahmen des Online-Meetups Aachen am 28.10.2020 gehalten wurde.

Der Beitrag richtet sich insbesondere an Einsteiger, die entweder noch gar nicht viel Erfahrungen mit WordPress haben. Gleichzeitig ist der Beitrag aber auch interessant für Umsteiger, die bis jetzt mit dem Classic Editor gearbeitet haben.

Video zum Vortrag Block-Editor für Ein- und Umsteiger

Im folgenden Video kann man sich noch mal alles ansehen, was bei dem Vortrag zur Sprache kam.

Hier klicken, um den Inhalt von YouTube anzuzeigen.
Erfahre mehr in der Datenschutzerklärung von YouTube.

Infos zum aktuellen Stand beim Block-Editor und Gutenberg

Gutenberg – Block-Editor (https://de.wordpress.org/gutenberg/)

Einstellungen > Schreiben mit Classic-Editor und Block-Editor. Hier kann man auswählen, welcher Editor der Standard-Editor sein soll und ob ein Benutzer den Editor wechseln kann:

Classic Editor Block Editor

Vortrag zum Block-Editor

Hier noch eine kurze Beschreibung, wie der Vortrag aufgebaut ist. Das Video ist auch weitestgehend dementsprechend gestaltet.

  • Beiträge im Classic Editor und im Block-Editor
  • Beiträge, die mit dem Classic-Editor erstellt wurden, können umgewandelt werden: in Blöcke (Beitrag > Bearbeiten [Block-Editor], dann auf den Classic-Block, drei senkrechte Punkte und „in Blöcke umwandeln“ wählen). Ein Problem können Beiträge mit Bildern darstellen. Die Bilder werden möglicherweise nicht mehr korrekt positioniert. In dem Fall sollte man den Beitrag (Text) z. B. in einen zweispaltigen Block kopieren.
  • Beiträge > Erstellen – Block-Editor: rechte Leiste (Vollbildmodus – Willkommens-Guide): Über die 3 senkrechten Punkte oben “Mehr Werkzeuge und Optionen” erscheint ein weiteres Menü, wo man den Vollbildmodus deaktivieren kann.
  • Beitrag erstellen, Quelle: https://de.wikipedia.org/wiki/EilendorfTitel: Eilendorf – ein Stadtteil von Aachen (automatisch <h1>)
    Überschrift: Aachen-Eilendorf (<h2>)
    Überschrift: Geschichte (<h2>)
    Text aus Wikipedia zu Geschichte
    Überschrift: Bevölkerung (<h2>)
    Text aus Wikipedia zu Bevölkerung
    Liste oberhalb erstellen mit interner Verlinkung (als Anker für Geschichte und Bevölkerung mit #)
    Vorschau zeigen
    kurze Übersicht Blöcke – Erläuterung der unterschiedlichen Blocktypen
    Danach wird das Bild oben als Cover eingefügt (erst mit “Hintergrund fixiert”, Hinweis auf Problematik, dass das nicht immer korrekt angezeigt wird, daher evtl. CSS-Regel para_img nutzen – s. u.)
    Überschrift Landschaft (<h2>)
    Spaltenblock mit 2 Spalten
    Block-Navigation oben links
    links: Text aus Wikipedia zu Landschaft
    rechts: zwei Bilder einfügen (evtl. unter erweitert: kachel_spalte – s. u. )
    Liste oben mit Anker ergänzen (Landschaft)
    wiederverwendbarer Block („Was meinen Sie dazu“) erstellen
    Verlinkungen zum Thema (besser komplett reinkopieren)
  • ggfs. Ansicht in der developer console (F12 in Chrome oder Firefox) für verschiedene Geräte prüfen
  • ggfs. über Optionen: Source, siehe drei senkrechte Punkte > Code-Editor. Hier sieht man, wie der Code aufgebaut ist. Diesen Code kann man prinzipiell auch bei anderen Projekten nutzen – siehe auch den Beitrag zu Block Patterns
  • ggfs. eigenes Plugin „Custom Gutenberg Block Styles“ aktivieren und kurz zusätzliche Optionen und Source zeigen

Der fertige Beitrag

Das Ergebnis mit dem kompletten Beitrag seht ihr z. B. hier


Weitere Verlinkungen zum Thema:

Interessante Diskussionen zum Thema Pagebuilder / Block-Editor /Elementor:

Forum

Hier geht es zum deutschen wordpress.org Forum: https://de.wordpress.org/support/view/all-topics/

CSS-Regeln, die (teilweise) im Vortrag verwendet werden:

/* auf kleineren Displays kein Parallax wegen Problemen mit iOS*/
@media (max-width: 800px) {
.para_img {
background-attachment: scroll;
}
}

/* auf größeren Displays Parallax */
@media (min-width: 801px) {
.para_img {
background-attachment: fixed;
/* z-index:-1;
background-size: cover;
background-position: center;
background-size: cover; */
}
}
/* ------- aus haurand.com -----*/
/* Randdarstellung für Kacheln */
.kachel_spalte {
flex-basis: calc(50% - 16px);
flex-grow: 0;
box-shadow: 5px 5px 5px 5px #888888;
padding: 15px;
}

/* Beim Überfahren mehr Schatten */
.kachel_spalte:hover {
box-shadow: 10px 10px 10px 10px #888888;
}
/* Hintergrund für Slider-Text und Cover-Bild */
.carousel-caption {
background-color: black;
opacity: 0.50;
}

Fazit

Es lohnt sich für Einsteiger und Umsteiger, sich mit dem Block-Editor (Gutenberg) zu beschäftigen. Der Einstieg ist gar nicht so schwer. Nach kurzer Zeit ist man bereits in der Lage, den im Vergleich zum Classic-Editor doch wesentlich leistungsfähigeren und flexibleren Block-Editor zu nutzen.


Mehr erfahren auf dieser Webseite

Grafik: haurand.com


Zum Blog

Mehr erfahren auf unserer Webseite

Wir freuen uns über eine Kontaktaufnahme

Schreibe einen Kommentar