Vortrag meetup Block-Editor

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.

Infos zum aktuellen Stand beim Block-Editor und 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 und Block Editor für Einsteiger und Umsteiger
Grafik: haurand.com

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/Eilendorf
    • Titel: 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:

von Angelika Reisiger:

von Jessica Lyschik:

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.

Was halten Sie davon?

Wir hoffen, dieser Beitrag hat Ihnen gefallen und wir würden uns über einen Kommentar freuen. Auch über Erweiterungen, Korrekturen, Hinweise oder sonstige Anmerkungen freuen wir uns sehr.

Weitere interessante Beiträge rund um WordPress finden Sie hier


Mehr erfahren auf dieser Webseite

Grafik: haurand.com


Infos im Blog

Mehr erfahren auf unserer Webseite

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.