Styling the Gutenberg Columns Block

WordPress 5.0 steht kurz bevor und mit ihm kommt der neue Gutenberg-Editor. In der WordPress-Community wurde viel darüber diskutiert, was das genau für Nutzer, Designer und Entwickler bedeutet. Und während Gutenberg zweifellos die Schreiberfahrung verbessern wird, kann es für Entwickler, die nun sicherstellen müssen, dass ihre Plugins und Themes aktualisiert und kompatibel sind, durchaus Kopfzerbrechen bereiten.

Eine der offensichtlichsten Möglichkeiten, um sicherzustellen, dass Ihr Theme mit WordPress 5.0 und Gutenberg kompatibel ist, besteht darin, einige grundlegende Stile für die neuen Blöcke hinzuzufügen, die Gutenberg einführt. Abgesehen von den grundlegenden HTML-Blöcken (wie Absätze, Überschriften, Listen und Bilder), für die wahrscheinlich bereits Stile vorhanden sind, gibt es nun komplexe Blöcke, die Sie wahrscheinlich nicht bedacht haben, wie z. B. Pull Quotes, Cover-Bilder, Buttons und Spalten. In diesem Artikel werden wir uns einige Styling-Konventionen für Gutenberg-Blöcke ansehen und dann unsere eigenen Stile für Gutenbergs Spalten-Block hinzufügen.

Block-Namenskonventionen

Zuerst einmal: Wie werden Gutenberg-Blöcke benannt? Wenn Sie mit dem Code-Inspektor vertraut sind, können Sie diesen auf einer Seite öffnen, die den zu formatierenden Block verwendet, und ihn selbst überprüfen.

Nun könnte es umständlich werden, dies für jeden einzelnen Block zu tun, den Sie formatieren möchten, und glücklicherweise gibt es eine Methode hinter dem Wahnsinn. Gutenberg-Blöcke verwenden eine Form der Block-, Element-, Modifikator- (BEM) Namenskonvention. Der Hauptunterschied besteht darin, dass die oberste Ebene für jeden Block wp ist. Für unseren Pull Quote lautet der Name also wp-block-pullquote. Spalten wären wp-block-columns und so weiter. Mehr dazu können Sie im WordPress Development Handbook lesen.

Klassenname-Vorbehalt

Hier gibt es eine kleine Einschränkung, da der Blockname möglicherweise nicht der *einzige* Klassenname ist, mit dem Sie es zu tun haben. Im obigen Beispiel sehen wir, dass auch die Klasse alignright angewendet wird. Und Gutenberg kommt mit zwei neuen Klassen: alignfull und alignwide. Bei unseren Spalten sehen Sie auch eine Klasse, die uns sagt, wie viele es sind. Aber dazu kommen wir bald.

Eigene Klassennamen anwenden

Gutenberg-Blöcke bieten uns auch eine Möglichkeit, eigene Klassen anzuwenden.

Das ist großartig, wenn Sie einen gemeinsamen Satz von Klassen für Blöcke über verschiedene Themes hinweg haben möchten, zuvor vorhandene Klassen auf Blöcke anwenden möchten, wo es sinnvoll ist, oder Variationen von Blöcken haben möchten.

Ähnlich wie der aktuelle (oder "klassische") WordPress-Beitrag-Editor trifft Gutenberg so wenige Entscheidungen wie möglich für das Frontend und überlässt die meiste Arbeit uns. Dazu gehören auch die Spalten, die im Grunde nur genügend Stile enthalten, um sie zu Spalten zu machen. Wir müssen also den Innenabstand, den Außenabstand und die responsiven Stile hinzufügen.

Spalten formatieren

Zeit, zum Kern der Sache zu kommen: Lasst uns einige Spalten formatieren! Das Erste, was wir tun müssen, ist, ein Theme zu finden, das wir verwenden können. Noch gibt es nicht viele, die eine umfassende Gutenberg-Unterstützung haben, aber das ist in unserem Fall eigentlich gut. Stattdessen werden wir ein Theme verwenden, das flexibel genug ist, um uns einen guten Ausgangspunkt zu geben: Astra.

Astra ist ein kostenloses, schnelles und flexibles Theme, das für die Zusammenarbeit mit Page Buildern entwickelt wurde. Das bedeutet, dass es uns eine wirklich gute Vorlage für unsere Spalten geben kann. Apropos, wir brauchen etwas Inhalt. Hier ist, womit wir arbeiten werden.

Wir haben ein Layout mit drei Spalten, Bildern, Überschriften und Text. Das Bild oben zeigt, wie die Spalten im Gutenberg-Editor aussehen. Hier ist, wie sie im Frontend aussehen.

Sie können sehen, dass es einige Unterschiede zwischen dem gibt, was wir im Editor sehen, und dem, was wir im Frontend sehen. Am auffälligsten ist, dass im Frontend kein Abstand zwischen den Spalten ist. Der linke Rand der Überschrift im Frontend ist auch mit dem linken Rand der ersten Spalte bündig. Im Editor ist dies nicht der Fall, da wir die Klasse alignfull verwenden.

Hinweis: Für dieses Tutorial behandeln wir .alignfull, .alignwide und keine Ausrichtung gleich, da das Astra-Theme die neuen Klassen noch nicht unterstützt.

Wie Gutenberg-Spalten funktionieren

Nachdem wir nun ein Theme haben, kommen wir zur Beantwortung der Frage: "Wie funktionieren Spalten in Gutenberg?"

Bis vor kurzem wurde CSS Grid verwendet, dann wurde auf Flexbox umgestellt. (Der Grund dafür war, dass Flexbox eine breitere Browserunterstützung bietet.) Allerdings sind die Stile super leichtgewichtig.

.wp-block-columns {
  display: flex;
}

.wp-block-column {
  flex: 1;
}

Wir haben einen Pen mit den endgültigen Stilen, wenn Sie das Ergebnis sehen möchten, das wir anstreben. Sie können darin sehen, dass Gutenberg nur die Flexbox definiert und dann festlegt, dass jede Spalte die gleiche Länge hat. Aber Sie werden auch ein paar andere Dinge bemerken.

• Der übergeordnete Container ist wp-block-columns.
• Es gibt auch die Klasse has-3-columns, die die Anzahl der Spalten für uns angibt. Gutenberg unterstützt zwischen zwei und sechs Spalten.
• Die einzelnen Spalten haben die Klasse wp-block-column.

Diese Informationen reichen uns aus, um loszulegen.

Die Eltern formatieren

Da Flexbox standardmäßig angewendet wird, besteht die beste Vorgehensweise darin, sicherzustellen, dass diese Spalten im Frontend in einem größeren Bildschirmkontext gut aussehen, wie wir es bereits gesehen haben.

Zuallererst fügen wir einige Abstände hinzu, damit sie nicht ineinander oder in andere Elemente hineinragen.

/* Add vertical breathing room to the full row of columns. */
.wp-block-columns {
  margin: 20px 0;
}

/* Add horiztonal breathing room between individual columns. */
.wp-block-column {
  margin: 0 20px;
}

Da wir vernünftigerweise davon ausgehen können, dass die Spalten nicht die einzigen Blöcke auf der Seite sein werden, haben wir oben und unten Außenabstände zum gesamten übergeordneten Container hinzugefügt, damit es eine Trennung zwischen den Spalten und anderen Blöcken auf der Seite gibt. Dann, damit die Spalten nicht aneinander stoßen, wenden wir linke und rechte Außenabstände auf jede einzelne Spalte an.

Das sieht schon besser aus! Wenn Sie möchten, dass sie einheitlicher aussehen, können Sie natürlich auch text-align: justify; auf die Spalten anwenden.

Spalten responsiv machen

Das Layout beginnt auseinanderzufallen, wenn wir zu kleineren Bildschirmbreiten wechseln. Astra macht eine gute Arbeit, indem es die Schriftgrößen beim Verkleinern reduziert, aber wenn wir uns etwa 764px nähern, wird es etwas eng.

An diesem Punkt können wir, da wir drei Spalten haben, die Spalten explizit mit der Klasse .has-3-columns formatieren. Die einfachste Lösung wäre, Flexbox ganz zu entfernen.

@media (max-width: 764px) {
  .wp-block-columns.has-3-columns {
    display: block;
  }
}

Dies würde unsere Spalten automatisch in Blöcke umwandeln. Alles, was wir jetzt noch tun müssten, ist die Abstände anzupassen, und wir sind fertig - es ist keine elegante Lösung, aber sie ist lesbar. Ich möchte jedoch etwas kreativer sein. Stattdessen machen wir die erste Spalte zur breitesten und die anderen beiden bleiben dann Spalten unter der ersten.

Das funktioniert nur je nach Inhalt. Ich denke hier ist es verzeihlich, Yoda Priorität als den bemerkenswertesten Jedi-Meister zu geben.

Lassen Sie uns sehen, wie das aussieht.

@media screen and (max-width: 764px) {
  .wp-block-columns.has-3-columns {
    flex-flow: row wrap;
  }
  
  .has-3-columns .wp-block-column:first-child {
    flex-basis: 100%;
  }
}

In den ersten Zeilen nach der Media-Query zielen wir auf .has-3-columns ab, um das flex-flow auf row wrap zu ändern. Dies teilt dem Browser mit, dass die Spalten den Container füllen dürfen und bei Bedarf umbrechen sollen.

Dann zielen wir auf die erste Spalte mit .wp-block-column:first-child und weisen den Browser an, die flex-basis auf 100% zu setzen. Das bedeutet: "Lass die erste Spalte den gesamten verfügbaren Platz einnehmen." Und da wir Spalten umbrechen, werden die anderen beiden automatisch in die nächste Zeile verschoben. Unser Ergebnis ist dieses.

Das Schöne an diesem Layout ist, dass die Spalten mit row wrap auf den kleinsten Bildschirmen alle eine volle Breite haben. Da sie jedoch davor schwer zu lesen sind, sollten wir einen guten Haltepunkt finden und die Stile selbst festlegen. Um 478px sollte das gut passen.

@media (max-width: 478px) {
  .wp-block-columns.has-3-columns {
    display: block;
  }
  
  .wp-block-column {
    margin: 20px 0;
  }
}

Dies entfernt das Flex-Layout und kehrt die Abstände der einzelnen Spalten um, wobei der Abstand zwischen ihnen erhalten bleibt, wenn sie zu einem gestapelten Layout übergehen.

Auch hier sehen Sie, wie all diese Konzepte in der folgenden Demo zusammenkommen.

Siehe den Pen Gutenberg Columns von Joe Casabona (@jcasabona) auf CodePen.

Wenn Sie ein weiteres Live-Beispiel sehen möchten, finden Sie eines hier.

Zusammenfassung

So, da haben Sie es! In diesem Tutorial haben wir untersucht, wie Gutenbergs Spalten-Block funktioniert, seine Klassen-Namenskonventionen und dann grundlegende Stile angewendet, um die Spalten auf jeder Bildschirmgröße im Frontend gut aussehen zu lassen. Von hier aus können Sie diesen Code nehmen und damit arbeiten – wir haben kaum an der Oberfläche gekratzt und Sie können allein mit CSS noch viel mehr tun. Zum Beispiel habe ich kürzlich diese Preistabelle nur mit Gutenberg-Spalten erstellt.

Und natürlich gibt es die anderen Blöcke. Gutenberg legt viel Macht in die Hände von Content-Redakteuren, aber noch mehr in die Hände von Theme-Entwicklern. Wir müssen nicht mehr die Infrastruktur für komplexere Layouts im WordPress-Editor erstellen und wir müssen den Benutzern nicht mehr beibringen, Shortcodes oder HTML einzufügen, um das zu bekommen, was sie auf einer Seite brauchen. Wir können ein wenig CSS zu unseren Themes hinzufügen und die Content-Ersteller den Rest erledigen lassen.

Wenn Sie tiefer in die Vorbereitung Ihres Themes für Gutenberg einsteigen möchten, können Sie sich meinen Kurs Theming with Gutenberg ansehen. Wir behandeln, wie man viele verschiedene Blöcke formatiert, benutzerdefinierte Farbpaletten einrichtet, Blockvorlagen und mehr.