Mein Konzept für WordPress Blocks

Für den neuen Block Editor von WordPress existieren noch keine Best Practices für individuelle Blocks und wir befinden uns momentan in einer ersten Phase des Experimentierens. Technische Möglichkeiten müssen erst nach und nach von Entwicklern ausgelotet werden, um ein sinnvolles Konzept für WordPress Blocks zu finden.

Bei der Entwicklung von GT Blocks verfolge ich momentan einige grundlegende Regeln und Überlegungen, welche meiner Meinung nach die Qualität und Nachhaltigkeit meiner Blocks verbessern und auf die Zielgruppe von GermanThemes ausgerichtet sind.

Meine Grundgedanken und Konzept für WordPress Blocks möchte ich kurz vorstellen.

CSS-Klassen statt Inline-Styles

Soweit es geht verzichte ich auf Inline-Styles in meinen Blocks und setze stattdessen auf CSS-Klassen. Das große Problem bei Inline-Styles ist, dass Blocks damit hartcodiert im Content gestaltet werden und nur noch schwierig anzupassen sind. Beim Ändern des Stylings muss jeder Block einzeln geändert werden, statt einer globalen Klasse.

GT Section Block
Der GT Section Block nutzt CSS-Klassen für Abstände statt Inline-Styles

Ein Beispiel: Ich setze einen Custom Block für Zitate auf 200 Beiträgen ein und gestalte diesen passend zum Theme mit einem Abstand von 18px und einer 4px Rahmen. Border und Margin werden als Inline-Style gespeichert und landen direkt als HTML-Attribut style="margin: 18px; border: 4px solid" im Content des Beitrags.

Beim Wechsel des Themes passt dieses Styling nicht mehr und soll geändert werden. Nun müssen 200 Blocks einzeln angepasst werden. Mit zwei CSS-Klassen .margin-medium und .border-thick hingegen kann das Styling global modifiziert und vom Theme bereitgestellt werden werden. Design und Content sind voneinander getrennt.

Block-Styles statt Design-Optionen

Aus dem ersten Gedanken für CSS-Klassen folgt, dass die WordPress Blocks nur eine Reihe unterschiedlicher Styles anbieten, anstatt vielfältiger Gestaltungs-Optionen.

Statt einer Range-Option mit Eingabefeld für individuelle Pixelwerte gibt es ein Auswahlfeld für Abstände mit Klein, Mittel und Groß. Nur damit lassen sich Block-Optionen als CSS-Klassen realisieren und Inline-Styles vermeiden.

Ghost Button Style

Ein Beispiel: Statt ein halbes Dutzend von Einstellungen für Rahmen und Schlagschatten stellt das Theme zwei Block-Styles bereit, mit dem die Schattierung des Blocks zum restlichen Design passt und für alle Blocks auf allen Seiten einheitlich aussieht.

Usability statt Featuritis

Letztendlich ist es auch eine Frage der Usability.

Die klassischen Page Builder Plugins für WordPress wie Visual Composer, Divi, Elementor und Beaver Builder bieten zahlreiche Einstellungen, mit der sich jede Kleinigkeit festlegen lässt. Diese Plugins sind für Power User erstellt, welche häufig nur noch dieses System verwenden, um damit alle ihre Websites und Kundenprojekte zu bauen.

Für „normale“ Nutzer sind die Page Builder häufig zu überladen und kompliziert. Es benötigt viel Einarbeitungszeit, um sich zurechtzufinden. Anfangs wird man von den Optionen eher erschlagen. Falls man sich auskennt, sind diese Tools natürlich unglaublich flexibel einsetzbar und mächtig.

Aber es braucht auch ein gutes Auge und Know-How für Design. Flexible Optionen zur Gestaltung der eigenen Website sind noch keine Garantie, dass das Ergebnis gut aussieht. Typografie, Farben, Abstände und Ausrichtung von Elementen müssen wohl überlegt aufeinander abgestimmt sein, um ein stimmiges Gesamtbild zu ergeben.

Mit WordPress Blocks wird sich diese Geschichte wiederholen.

Es wird früher oder später sehr flexible Blocks mit zahlreichen Einstellungen geben, welche Nutzer zum Designer über die komplette Website machen. Spätestens, wenn Blocks außerhalb des Editors eingeführt sind, werden die Möglichkeiten unendlich sein.

Ich persönlich bevorzuge einen Mittelweg zwischen Usability und Flexibilität. Blocks sollen die nützlichsten Optionen anbieten, aber nicht mit Features vollgestopft sein.

Fazit zum Konzept für WordPress Blocks

Ihr werdet vielleicht gemerkt haben, dass alle Punkte in etwa das Gleiche aussagen und eng miteinander zusammenhängen. Und im Grunde müssen Entwickler schon immer genau abwägen, welche Features und Funktionen sie in ihre Software einbauen.

Ich hoffe, dieser Beitrag erklärt etwas die Hintergründe, warum die WordPress Blocks von GermanThemes keine Eingabefelder für individuelle Pixelwerte anbieten und generell mit eher weniger Design-Optionen auskommen. Ich hoffe ebenfalls, dass der Artikel die Vorteile dieses Konzepts herausgestellt hat.