Blockquote mit Gutenberg: Verse, Zitat und Pullquote

Das Schöne an dem neuen WordPress Editor ist, dass es immer wieder was zu entdecken gibt. So zum Beispiel in Sachen Blockquote mit Gutenberg. Also der Möglichkeiten, Zitate auszuzeichnen. Im Prinzip gibt es gleich drei grundlegende Optionen: Verse, Zitat und Pullquote. Dabei weisen Zitat und Pullquote zwei unterschiedliche Varianten auf, die sich beim Pullquote zudem auch breit oder in voller Fensterbreite ausgeben lassen. Grund genug, dem Ganzen etwas mehr Betrachtung zu schenken.

Um besser zeigen zu können, wovon ich rede, habe ich für diesen Beitrag die Sidebar abgeschaltet.

Dieser Hinweis ist ein Pullquote-Block »Farbfüllend«, der die volle Breite des Fensters nutzt und mit den Styles des Themes Twenty Nineteen arbeitet.

Blockquote mit Gutenberg: der Pullquote-Block in voller Fensterbreite

Zitieren mit WordPress

Bereits zu einem früheren Zeitpunkt bin ich schon mal auf das Besser zitieren mit WordPress eingegangen und habe gezeigt, wie man das für den Classic Editor bestehende Element Zitat mit etwas CSS beeinflussen kann.

Beim Zitieren mit Gutenberg sind nun zum Zitat noch die beiden Blöcke Vers und Pullquote hinzugekommen. Dabei benutzen Zitat und Pullquote die HTML-Auszeichnung blockqoute, während Vers auf das Element pre zurückgreift. Inhaltlich beziehen sich alle drei aber auf das Zitieren. Weshalb ich hier von Blockquote mit Gutenberg spreche.

Warum drei Elemente für das Zitieren mit Gutenberg?

Wenn man sich die Beschreibung für die drei Elemente Elemente Vers, Zitat und Pullquote anschaut, wirkt die Unterscheidung in meinen Augen ein wenig erzwungen. Dieser Einschätzung gegenüber steht die Möglichkeit, mit Zitaten oder anderen Textformen, die man hervorheben möchte, individuell umgehen zu können.

Gutenberg Vers

Vers soll dem Zitieren von Poesie oder Liedtexten dienen. Vielleicht ist die Idee dahinter aber auch, dass es für Autoren und Texter gedacht ist. Die würden dann ja nicht zitieren, sondern ihre eigenen Künste wiedergeben. Vers nutzt jedenfalls nicht das Blockquote-Element, sondern pre. pre allerdings dient eigentlich vorformattiertem Text und findet deshalb zumeist Anwendung für das Darstellen von Code.

Vielleicht findet sich der Vers-Block (wie der Vorformattiert-, aber auch der Pullquote-Block) deshalb in der Block-Gruppe der Formatierung. Dennoch können Sie aber auch jeden Absatz zu einem Vers-Block umwandeln – und umgekehrt.

Damit sich der Vers vom Code unterscheidet, ordnet Gutenberg dem Vers eine eigene CSS-Klasse zu: wp-block-verse. Twenty Nineteen definiert über diese Klasse die Schriftart und -größe sowie die Zeilenhöhe.

.entry .entry-content .wp-block-verse {
 font-family: "Garamond", "Times New Roman", serif; /* In der Tat sind es mehr Schriftarten... */
 font-size: 22px; 
 line-height: 1.8; 
}

Im Frontend sieht das Ganze dann so aus:

Lorem ipsum dolor sit amet, 
consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Das Problem ist offensichtlich: Durch das pre-Element entsteht der horizontale Scrollbalken, wenn man die Zeilen nicht manuell umbricht. Das gehört auch zum Sinn des Vorformatierten. Von daher verstehe ich die Absicht hinter dem ganzen Vers-Block nicht wirklich.

Für Vers gibt es jedenfalls keine Optionen für alignwide oder alignfull oder für Schrift- oder Hintergrundfarbe.

Das Ändern von Vers-Blöcken in Zitat-Blöcke ist nicht vorgesehen. Dies funktioniert nur über den Umweg Vers zu Absatz und Absatz zu Zitat.

Gutenberg Zitat

Das Zitat nutzt nun tatsächlich das Blockquote mit Gutenberg. Dazu gehört, dass es nicht nur die Möglichkeit der Texteingabe für das Zitat an sich, sondern auch für die Angabe der Quelle gibt.

Der Zitat-Block gehört zu den Allgemeinen Blöcken. Jeden Absatz können Sie in ein Zitat umwandeln – und umgekehrt.

Der Zitat-Block zeichnet sein blockquote-Element mit der CSS-Klasse wp-block-quote aus. Zu der gesellt sich noch eine der beiden Klassen is-style-default oder is-style-large. Die hängt davon ab, welchen Style Sie für das Gutenberg Zitat wählen.

Wie das Ganze dann im Frontend aussieht, hängt von Ihrem Theme ab. Oder von den Einstellungen, die Sie vielleicht schon mal für das blockquote-Element festgelegt haben. In meinem Fall unterscheidet es sich kaum vom pre-Element – abgesehen von dem horizontalen Scrollbalken, den ich bei Code aber auch so haben möchte.

Im großen Style sieht es das Ganze also im Rahmen meines Themes und mit den von mir gewählten Einstellungen für das blockquote-Element so aus:

Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

zitiert nach Lorem Ipsum, dem blindesten aller Blindtexte

Mit anderen Worten: Das kann man so machen für einen Infokasten. Für das optische Hervorheben eines Zitates ist das so allerdings weniger gut geeignet.

Auch für den Gutenbergsche Zitat-Block ist kein alignwide oder alignfull vorgesehen. Ebenso gibt es keine Option für die Schrift- oder die Hintergrundfarbe.

Das Zitat-Block können Sie aber zum Pullquote-Block umwandeln, um damit eine auffälligere Ausgabe für Ihre Zitate zu nutzen.

Gutenberg Pullquote Block

Der Pullquote-Block ist nun die hübsche große Schwester aus der Familie Blockquote mit Gutenberg. Denn im Gegensatz zum Zitat-Block kennt der Pullquote Block sowohl die Möglichkeiten des alignwide/alignfull als auch die der Schrift- und Hintergrundfarben. Ein gutes Gutenberg Theme wie Twenty Nineteen stellt hierfür auch bereits die passenden Farben in der Beitragsbearbeitung beziehungsweise die passenden CSS-Angaben zur Verfügung.

Interessanterweise finden Sie den Pullquote-Block nicht unter den Allgemeinen, sondern unter den Formatierung-Blöcken. Pullquotes können Sie nur über Umwege zu einem Absatz-Block umwandeln (Pullquote zu Zitat und Zitat zu Absatz). Jederzeit jedoch können Sie aber zwischen Zitat- und Pullquote-Block wechseln.

Natürlich hat der Pullquote-Block an sich eine eigene Klasse (wp-block-pullquote). Zu der gesellen sich wie beim Zitat noch zwei Styles: is-style-default und is-style-solid-color. Neben dem Standard gibt es also noch den Farbfüllend-Style.

Beide Styles können zudem alignwide/alignfull sein. Damit ist der Pullquote-Block die variabelste aller Zitat-Möglichkeiten. Denn er bietet insgesamt vier Darstellungsmöglichkeiten.

Gutenberg Pullquote Standard (Twenty Nineteen Style)

Der Standard des Twenty Nineteen Pullquote-Blocks sieht schon mal ganz hübsch aus. Das Zitat ist zentriert, die Schriftgröße recht groß. Und wenn man dem Ganzen auch noch Rahmenlinien oben und unten gibt, dann fällt so richtig auf, dass die Einstellung alignwide gewählt ist.

Da ich keine Google Fonts einbinde, nutzt dieser Pullquote-Block sein Fallback: Garamond.

Standard des Twenty Nine Pullquote Blocks, hier im Rahmen von Theme Zakra

Wenn Sie auf diesen Beitrag mit einem Smartphone oder einem Tablet schauen, werden Sie den Unterschied nun kaum erkennen können. Auf dem Desktop hingegen zeigt sich der Effekt des alignfull im Gegensatz zum alignwide deutlich:

Kürzlich vernahm ich, dass Garamond »altbacken« sei. Mag sein. Aber wenn es keine Verbindung zu Google Fonts gibt, sieht Twenty Nineteen Garamond vor.

Garamond – Ein Evergreen. Sozusagen

Beide funktionieren auch auf (Beitrags)-Seiten mit Sidebar, sehen dann aber – wie auf mobilen Geräten – gleich aus. Der Unterschied wird auch auf Desktops erst offensichtlich, wenn die Sidebar abgeschaltet ist.

Für die Definitionen des alignwide/alignfull ist übrigens das Theme verantwortlich. Hierfür die Angaben eines anderen Themes zu übernehmen, zum Beispiel die von Twenty Nineteen, wäre nicht zielführend.

Gutenberg Pullquote Farbfüllend (Twenty Nineteen Style)

Erhält der Pullquote Block dann auch noch den Farbfüllend-Style, wird der Unterschied zwischen alignwide und aligfull so richtig auffällig.

Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Und nun nochmal von vorne: Lorem Ipsum!

Derart hervorgehoben wird auch der dünnsinnigste Text zum Hingucker, haha! Noch stärker hervorgehoben wirkt das Ganze dann natürlich im alignfull:

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Zum letzten Mal, versprochen!

Die Pullquote-Blöcke oben nutzen nun alle kein Inline-CSS, sondern die im Customizer > Zusätzliches CSS beziehungsweise in der style.css des Childthemes hinterlegte Definition für die jeweilige Klasse, die WordPress bereitstellt. Der Vorteil für dieses Vorgehens: Sofern Sie nicht ständig eine andere Hintergrund- oder Schriftfarbe für Ihre Pullquotes nutzen wollen, gibt Ihr Theme sie immer auf die gleiche Weise aus.

So nutzt Ihr Theme auch seine eigenen Definitionen für alignwide/alignfull. Und sollte Ihr Theme von diesen Breiten noch gar nichts wissen, nutzen die folgenden Angaben den zur Verfügung stehenden Platz.

Twenty Nineteen Pullquote CSS

 /*  Pullquotes im 2019 Style  */
 /* Anpassung des Blockqoute Elementes für Pullquotes */ 
 .wp-block-pullquote blockquote {
      color: #111;
      border: none;
      margin-top: calc(4 * 1rem);
      margin-bottom: calc(4.33 * 1rem);
      margin-left: 0;
 }
 /* Absätze im Rahmen des Pullquotes */ 
 .wp-block-pullquote p {
      font-size: 2.25em;
      font-style: italic;
      line-height: 1.3;
      font-family: "Garamond", "Times New Roman", serif; /* Hier lassen sich natürlich auch andere Schriftarten auflisten */
      margin-bottom: 0.5em;
      margin-top: 0.5em;
 }
 /* Quellenangabe des Pullquotes */  
 .wp-block-pullquote cite {
      display: inline-block;
      font-family: "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;  /* Ebenso hier Platz für andere Schriftarten */ 
      line-height: 1.6;
      text-transform: none;
      font-style:normal;
      font-size: 13px;
  }
 /* Style Default */
 /* Style Default alignfull und alignwide */
 .wp-block-pullquote.alignwide.is-style-default, 
 .wp-block-pullquote.alignfull.is-style-default {
     border-top: 2px solid #632e9b;  /* Farbwert anpassen! */ 
     border-bottom: 2px solid #632e9b;  /* Farbwert anpassen! */ 
     margin-top: calc(4 * 1rem);
     margin-bottom: calc(4.33 * 1rem);
     padding: 0 1em;
 }
 /* Farbfüllende Pullquotes */  
 /* Farbfüllend: Pullquotes alignfull und alignwide */  
 .wp-block-pullquote.alignfull.is-style-solid-color, 
 .wp-block-pullquote.alignwide.is-style-solid-color {
      background-color:#632e9b; /* Farbwert anpassen! */
      padding-top: calc(2 * 1rem); 
      padding-bottom: calc(2 * 1rem); 
      margin-top: calc(4 * 1rem);
      margin-bottom: calc(4.33 * 1rem);
      }
 /* Farbfüllend: Blockquote-Element des Pullquotes 
alignfull und alignwide */   
 .wp-block-pullquote.alignfull.is-style-solid-color blockquote, 
 .wp-block-pullquote.alignwide.is-style-solid-color blockquote {
      max-width: 100%;
      margin-left: 1rem;  
      margin-right: 1rem;      
 }
 /* Farbfüllend: Absätze im Rahmen des Pullquotes */ 
 .wp-block-pullquote.is-style-solid-color p {
     color:#fff; /* Farbwert ggf. anpassen */
 }
 /* Farbfüllend: Quelle des Pullquotes alignfull und alignwide */ 
 .wp-block-pullquote.alignfull.is-style-solid-color cite, 
 .wp-block-pullquote.alignwide.is-style-solid-color cite 
 {color:#fff;  /* Farbwert ggf. anpassen */ 
}
 /* Media Queries für die Pullquotes */
 /* Tablets quer und Desktop */
 @media screen and (min-width: 769px) {
 .wp-block-pullquote.alignfull.is-style-solid-color blockquote { 
      max-width: 760px;  /* Breite ggf. anpassen */ 
      margin-left:auto;
      margin-right:auto;
 }
 .wp-block-pullquote.is-style-solid-color blockquote p {
     font-size: 2.25em;
     margin-bottom: 1em;
 }
 }
 /* Mobiles bis zu Tablet hoch */
 @media screen and (max-width: 768px) {
 .wp-block-pullquote.is-style-solid-color blockquote p {
     font-size: 32px;
 }
 .wp-block-pullquote p {
     font-size: 32px;
     margin-bottom:1em;}
 }

Nebenbei: Twenty Nineteen bezieht die Hintergrundfarbe für die Pullquotes über die im Customizer hinterlegte Primäre Farbe. Im CSS oben ist nun meine Primäre Farbe festgelegt. An den entsprechenden Stellen würden Sie natürlich Ihren Farbwert eintragen. Und sollte der besonders hell sein, sollten Sie auch die Schriftfarbe ändern.


Beitragsbild: Britta Kretschmer

Schreibe einen Kommentar

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

Nach oben scrollen