Dieser Beitrag zeigt euch mein CSS für den pullquote block und den blockquote block und wie ich das CSS auskommentiere und dann in die theme.json integriere. Und Stil Varianten erstellen.
Ziel: Styles in theme.json
Dieser Beitrag gehört zu einer ganzen Serie. Nämlich, wie ich Stück für Stück meine style.css Datei verkleinere, alles, was in theme.json möglich ist, dort integriere und diese Teile in der style.css Datei auskommentiere.
Übrig bleibt dann in der style.css Datei nur mehr diese Styles, welche mit theme.json noch nicht umsetzbar sind.
Ich möchte nur kurz wiederholen, was ich in Teil 1 – body und p, gemacht habe.
Das habe ich bis jetzt gemacht:
- Die Schriftgröße wurde global in theme.json definiert, mit small, medium, large.
- Ebenso die Schriftart auf Open Sans gestellt.
- Ebenso wurde das noch in core/ paragraph integriert
- Das – siehe Code unten – dann in der style.css Datei auskommentiert.
Bis jetzt vorhanden:
theme.json:
"fontFamily": "\"Open Sans\", sans-serif",
"name": "Open Sans",
"slug": "open-sans"
}
],
"fontSizes": [
{
"name": "Small",
"size": "1rem",
"slug": "small"
},
{
"name": "Medium",
"size": "1.3rem",
"slug": "medium"
},
{
"name": "Large",
"size": "2rem",
"slug": "large"
}
]
"core/paragraph": {
"typography": {
"fontSize":"var(--wp--preset--font-size--medium)"
}
},
style.css :
p {
margin-bottom: 0px;
color:#464646;
/* font-family: Lora,serif;*/
line-heigth:1.2;
}
und
body{
/*font-family: Lora,serif;*/
font-size:1.3rem;
overflow-x:hidden;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
Damit greift jetzt nichts mehr von der style.css Datei für oben genannte Strukturen.
Schriftgrößen definieren in theme.json
Wenn man in WordPress mit der theme.json eigene Schriftgrößen definiert, verwendet man eine kleine Struktur mit drei Werten:
"name": "Small",
"size": "1rem",
"slug": "small"
name
name, ist der sichtbare Name der im Block Editor angezeigt wird. Für name kann man beliebige Texte verwenden. Allerdings , wenn man ein Block Theme schreibt ist es besser, bei Englisch zu bleiben. Selbst wenn es technisch funktioniert.
Allerdings, wenn du ein Theme nur für bestimmte Personen erstellst, kannst du auch Klein,Mittel, Gross verwenden, oder du kombinierst das mit eine englischen Slug.
Im Bild unten: rechts ist M eingestellt , links ein Textabschnitt vom Absatz Block und über dem M steht: Grösse Medium, siehe auch Codebeispiel oben.
"name": "Medium"→ wird im Editor angezeigt.
Also, genau das, was ich in der theme.json definiert habe, zeigt rechts die Sidebar des Absatz Blocks. Und die Werte unter S,M,L, sind genau die, welche ich selber in der theme.json reingeschrieben habe.
Wenn du das TT5 Block Theme nimmst, steht dort noch ein XL dabei. Ich habe nur drei Werte definiert.
slug
slug ist ein eindeutiger technischer Bezeichner.
Er darf keine Leerzeichen oder Umlaute enthalten und soll kleingeschrieben sein. Er wird für die CSS Klasse verwendet:
Beispiel:
"slug": "large"→ wird zu.has-large-font-sizeim HTML.
size
size ist die tatsächliche Größe.
👉 Das ist der Wert, der im CSS angewendet wird : zum Beispiel 1.3 rem für Medium. Dieser Wert bestimmt, wie groß der Text wirklich dargestellt wird.
"size": "1.3rem"→ das ist etwa 20.8 px.
Der Zitate Block
<blockquote class="wp-block-quote">
<p>Zitattext</p>
</blockquote>
☝️ Nun möchte ich den Zitate Block oder blockquote Block in meinem CSS ansehen und schauen, wass ich davon in die theme.json integrieren kann. Was ich in der style.css auskommentieren soll und was bleiben soll.
Siehe Bild unten, sieht der Zitate Block noch nicht so aus, wie er sein sollte. Obwohl für core/paragraph die Schriftart Open Sans integriert wurde in die theme.json, zeigt sich hier eine Serifen Schrift.
Ich sehe mir also das CSS blockquote an. Und dort steht ganz unten die Schriftart Lora. Da ich diese Schrift aber nirgendwo mehr installiert habe in diesem Block Theme , wurde auf eine Fallback Schrift zurückgegriffen. Eine Serifen Schrift.
blockquote{
/*width:*/
margin:20px;
padding:20px;
padding-left:40px;
border-left:15px solid #30526C;
border-radius:5px;
background:#F7F5FB;
}
blockquote p:before {
color: #30526C;
content: open-quote;
content: "\201C";
font-size: 4em;
line-height: 0.1em;
margin-right: 0.10em;
vertical-align: -0.4em;
font-family:Lora,serif;
}
blockquote p {
display: block;
color:#30526C!important;
line-height:1.7;
font-size:1.2rem;
/*font-family:Lora,serif;*/
}
Wie oben sichtbar, kommentiere ich das aus und dann ist auch im Zitate Block die Open Sans Schriftart verfügbar.
Merke: ☝️ CSS überschreibt immer ! die theme.json
Also, wer irgendwo einen Fehler findet und er hat noch CSS in der style.css stehen und hat ein altes Classic Theme oder ein Hybrid Theme ersetzt durch ein Block Theme, schaut in die style. css Datei !
Wie man sieht, greift jetzt die Schrift aus der theme.json , genauso wie die Schrifgröße. Allerdings das Styling und die Farben sind noch aus der CSS Datei und so wird’s bleiben für diesen Block 😉.
Ganz ohne CSS gehts nicht ..
👉 Ja, das nur so nebenei, es gibt schon Block Themes, die komplett ohne CSS auskommen. Wenn man aber nur ein bisschen individuelles Styling haben möchte, dann geht’s halt ohne CSS nicht.
Aber !, wie gesagt nur was nötig ist.
Was bleibt in der style.css Datei ?
Das bleibt in der style.css Datei vom blockquote:
/* Minimaler Zitat-Block CSS – ergänzt nur, was theme.json nicht kann */
.wp-block-quote p::before {
content: "\201C"; /* typographisches „ */
font-size: 4em;
line-height: 0.1em;
margin-right: 0.1em;
vertical-align: -0.4em;
font-family: 'Lora', serif;
color: #30526C; /* sollte zum Text passen */ das ist die Farbe vom Anführungszeichen
}
.wp-block-quote {
hyphens: auto;
word-break: break-word;
}
Was kommt in die theme.json ?
"core/quote": {
"typography": {
"fontSize": "1.2rem",
"lineHeight": "1.7"
},
"color": {
"text": "#30526C" wird nicht angezeigt,
},
"elements": {
"link": {
"color": {
"text": "#30526C"
}
}
},
"spacing": {
"padding": {
"top": "20px",
"bottom": "20px",
"left": "40px",
"right": "20px"
},
"margin": {
"top": "20px",
"bottom": "20px"
}
},
"border": {
"left": {
"color": "#30526C",
"width": "15px",
"style": "solid"
},
"radius": "5px"
}
},
Warum ist der Text jetzt nicht türkisgrün, sondern grau ?🤔. Weil ich zwar die Farbe in der theme.json unter core/quote definiert habe, aber in der style.css Datei noch für den Fließtext unter .wp-block-post-content p eine graue Farbe stehn habe.
Wenn ich das auskommentiere:
.wp-block-post-content p
{/*color:#1c1c1c;*/
line-height:1.6;
}
sieht der Zitate Block schon so aus, wie im Bild oben. Das heißt jetzt greift das türkisgrün aus der theme.json für den Zitate Block 😀
Meine Frage an chatgpt:
Warum war aber die Farbe vom Anführungszeichen im Zitate Block türkis ?
Gute Frage! Die Farbe des Anführungszeichens im Zitat wird wahrscheinlich direkt per CSS gesetzt und nicht über die generelle Textfarbe des Blocks gesteuert.
In deinem CSS hattest du ja so etwas wie:
blockquote p:before {
content: "\201C";
font-family: 'Lora', serif;
font-size: 4em;
color: #30526C; /* Das türkisfarbene Anführungszeichen */
}
Das bedeutet:
- Dieses Pseudo-Element (
p:before) bekommt explizit die Farbe #30526C, unabhängig von der normalen Textfarbe im Block. - Die normale Textfarbe (z.B. das Grau) gilt für den Inhalt des Zitates, aber nicht für das Anführungszeichen, weil es eine eigene CSS-Farbe hat.
Deshalb siehst du das türkisfarbene Anführungszeichen korrekt, obwohl der restliche Text im Zitat die graue Farbe von .wp-block-post-content oder vom Blocktext bekommt.
Aha ok, der Zitate Block ist ja aber auch speziell. Weil er innerhalb vom Zitate Block einen Absatz Block integriert hat. Aber ok, jetzt versteh ich das !
💡👇
☝️😅 Wenn jemand einfach ein neues Block Theme macht und einfach von Anfang an in die theme.json schreibt, kann das einfacher sein. In meinem Fall gehe ich einen anderen Weg. Der ist wesentich schwieriger, aber dafür habe ich auch die Chance wirklich etwas zu lernen und die Zusammenhänge zwischen style.css und theme.json besser zu verstehen.
Vor allem hängen diese Beiden nach wie vor zusammen und es gibt Wechselwirkungen.
Da wir die style.css für diverse Stylings noch länger brauchen werden, ist es also nur zuträglich, wenn auch eher wirklich komplex, es einmal von der anderen Seite zu betrachten.
So, puhh, leider leider bin ich ja noch nicht ferig. Ich habe das Anführungszeichen vergessen, das war nämlich auch eine Fallback Schrift. Damals dachte ich mir ok, ich lasse das, weil mir gefällt das Zeichen in der Fallback Schrift besser.
Aber jetzt zwecks der Ordnung 😔, habe ich das auch geändert. Und wir können dabei ja auch alle etwas lernen:
Zweite Schrift nur über style.css Datei laden ohne theme.json
Da ich diese Lora, also die Schrift für das Anführungszeichen nur für dieses Anführungszeichen brauche, geht das schneller, wenn ich es über die style.css Datei einbinden.
Und wie geht das jetzt ?
Schriftart Lora in eigenen Theme Ordner legen
Als erstes, das hatte ich ja schon, habe ich für die Lora, eine Google Variable Font, unter fonts einen eigenen Ordner im Custom Block Theme angelegt: mit Namen fonts/Lora.
Die Schriftschnitte, man soll sie ja klein halten, mit
- Regular 400 woff2
- Bold 700
- Italic 400
in den Ordner gelegt,
So, jetzt muss ich diese Schrift nur noch in der style.css Datei einbinden:
/* ========== Lokale Fonts ========== */
@font-face {
font-family: 'Lora';
src: url('./assets/fonts/lora/Lora-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Lora';
src: url('./assets/fonts/lora/Lora-Italic.woff2') format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Lora';
src: url('./assets/fonts/lora/Lora-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
So, hat funkioniert. Und der Zitate Block sieht jetzt korrekt so aus:
So, jetzt dreht sich bald alles in meinem Kopf . Mir fallt ja auf, dass der Balken links in grün war. Wie gesagt, ich versteh jetzt schon, warum sich alle WordPresser an das TT4 und TT5 halten und sich diese Sachen komplett sparen.
Es ist zu aufwändig. Aber es schaut halt gut aus. 😔😅
Aber das ist jetzt glaube ich eine Kleinigkeit, weil das habe ich ja schon in der theme.json definiert. Genauso ist es:
"border": {
"left": {
"color": "#179c56",
"width": "15px",
"style": "solid"
},
So, ich habe jetzt einfach in der theme.json die Farbe für border: left:color von türkis auf grün geändert, aber jetzt hab ich’s wirklich.
Und was ist mit der editor-style.css ?
Jetzt soll noch jemand mal sagen, das ein Block Theme entwickeln einfach ist. Ja ist es, wenn ma net so viele Styles braucht . 😂😂😂😂
So, also, ich gehöre zu denen, bei denen die editor-style.css Datei speziell gestylt ist. Wie schon gesagt, gefällt mir dieses viele Weiß nicht im Block Editor. Ich mag gerne so das Gefühl, ich habe eine Hintergrundfarbe und der Absatz Block hat einen eigenen Rand .. usw. halt.
Und deswegen brauche ich auch noch eine editor-style.css Datei. Und jetzt brauch ich natürlich, auch dort noch das bisschen CSS für den Zitate Block, wie in der style.css Datei.
Ok, immerhin, ich habe was ich wollte, ich zeigs euch aber trotzdem, damit ihr euch was vorstellen könnt.
Also, man sieht, das der Absatz Block einen Rand hat und ich eine Hintergrundfarbe verwende.
Jo, ich kannst nicht lassen, ich habe jetzt die editor-style.css Datei gelöscht, und so schaut jetzt der Block Editor aus:
Also ja, das Anführungszeichen fehlt, weil ich die ganze editor-style.css Datei gelöscht habe, nur um das zu sehen, wie es aussieht. Ich spiele sie aber wieder zurück. Natürlich ist es ohne viel weißer, weil ja viel mehr Platz ist.
Der Absatz Block im Zitate Block
Standardmässig sind im TT5 Block Theme zwei Absatzblöcke im Zitate Block integriert. Für den Zitate Block gibt es zwei Variationen:
- Standard
- Einfach
Allerdings gibt es für den Absatz Block mehrere Variationen im TT5 Block Theme. Diese greifen dann natürlich auch im Zitate Block. Ich nehme immer das TT5 Block Theme als Beispiel. Die Beispiele hier sind aber von meinem Custom Block Theme.
Wie im Bild oben zu sehen, wird bei einem zweiten Absatz wieder so ein Anführungszeichen generiert. Das sollte im Prinzip nicht sein.
Warum passiert das ?
.wp-block-quote p::before {
content: "\201C";
...
}
Damit bekommt jeder Absatz <p> im Zitat Block ein Anführungszeichen. Das ist cool, wenn nur ein Absatz vorhanden ist, wenn aber mehrere Absätze da sind, sieht das nicht so cool aus.
Lösung:
.wp-block-quote p:first-of-type::before {
content: "\201C";
font-size: 4em;
line-height: 0.1em;
margin-right: 0.1em;
vertical-align: -0.4em;
font-family: 'Lora', serif;
color: #30526C;
}
und dann:
.wp-block-quote p:not(:first-of-type)::before {
content: none;
}
👉Damit zeigt nur der erste Absatz im Zitat das dekorative große Anführungszeichen. Weitere Absätze darunter bleiben neutral. Das wirkt eleganter und typografisch stimmiger.
In der theme.json Datei ändert sich nichts. Siehe Code oben.
Nun ist aber wirklich alles in Ordnung. 🥵
Stil Variationen im Zitat Block
Standadmässig sind in WordPress im TT5 Block Theme im Zitate Block 2 Stil Varianten :
- Standard
- Einfach
in Englisch:
- Default
- Plain
warum ich das schreibe, das hat schon seinen Grund.
Wenn man im WordPress Repository unter Block Themes ein Theme herunterladet, dann hat der Theme Ersteller diese Dinge ja schon unter der Haube geregelt.
Meistens sind ebenfalls nur zwei Stile vorhanden. Aber das kann jeder wie er will.
Zitat Block Variation : Standard
Ich kann jetzt in der theme.json Datei unter core /quote meine Styles reinschreiben. WordPress zeigt das dann unter dem Button “ Standard “ an.
Bei mir immer noch ganz obiger Code für die theme.json. Und bei mir auch die Ergänzung dazu in der style.css Datei, auch Code, wie oben.
Jetzt gibt es aber noch einen zweiten Stil Variation Button: Einfach oder Plain.
Zitat Block Variation: Plain – Einfach
Diese Variation hat es nun in sich. Denn, sie lässt sich nicht so einfach erstellen.
Aktuell lassen sich eigene Stilvariationen für Block-Themes entweder über die
functions.phpoder direkt im Stilbuch im Site Editor anlegen. Während der Standard-Stil „Einfach“ (engl.plain) automatisch von WordPress gesetzt wird, ist eine direkte Entfernung oder Ersetzung über dietheme.jsonbislang nicht zuverlässig möglich.
Wer vollständige Kontrolle braucht, kann allerdings die visuelle Stilbuch-Funktion verwenden – beim Export des Themes wird die Konfiguration automatisch in dietheme.jsongeschrieben.
Es gibt einen noch offenen #issue 37670 und auch im wordpress.org Forum quote block not shown properly, wo diess Proble dargestellt wird. Bislang gibt es noch keine zufriedenstellende Lösung. Man ist angehalten eigene Lösunen daweil zu verwenden.
Diese Lösungen, die da für mich gut funkioniert haben, zeige ich euch.
Block Variation: Plain über das Stilebuch #1 Test
Also vorweg, mir war es einfach nicht möglich, über die theme.json Datei unter variations: plain einen Style zu schreiben, der dann im Editor auch angezeigt worden wäre.
Meine Situation: ich hatte dann zwei mal den gleichen Style nämlich Standard = Plain / Einfach. Das war ja so nicht gewollt.
Wunsch wäre gewesen: Entweder unter Plain einen eigenen Stil oder den Button Plain/Einfach zu entfernen.
Zweiteres habe ich nicht geschafft. Also versuche ich es mit dem Stilebuch: Im Website Editor gehe einfach auf > Stile > Typographie > Klick aufs Auge > dann scrolle rechts im Fenster zum Zitate Block.
Wenn du rechts auf das große Fenster Zitate Block klickst, öffnet sich im mittleren Fenster die Einstellung für den Zitate Block. Siehe Bild unten.
Du hast jetzt dort die Möglichkeit unter Stile :
- Einfach oder
- Standard
auszuwählen. Im Vorschaubild sieht man bei mir, dass jeweils dasselbe Design angezeigt wird. Deswegen ändere ich jetzt unter > Einfach das Hintergrundbild.
Danach muss man das ganze noch > speichern.
Stil Einach wurde geändert
Stil Einfach – Änderung in der theme.json
Wer jetzt glaubt, dass mit der Änderung dieser Stil automatisch in der theme.json eingetragen wird, der irrt. Leider muss man zuerst das gesamte Theme downloaden, – das kann man indem man im Website Editor ein Template auswählt, und dann rechts in der Sidebar ganz nach unten scrollt und dort auf > exportieren klickt. –
Danach das geziptte Theme wieder hochladen und öffnen. Und dann sieht man in der theme.json Folgendes:
"variations": {
"plain": {
"background": {
"backgroundImage": {
"id": 69,
"source": "file",
"title": "header3",
"url": "http://localhost/walnut-base/wp-content/uploads/2025/06/header3.jpg"
},
"backgroundSize": "cover"
}
}
}
Ok, der Code meiner Stiländerung wird in der theme.json angezeigt.
Überlegung: Das könnte man auch mit dem Create Block Theme Plugin machen. Dann erspart man sich das umständliche Theme herunterladen, Theme wieder hochladen, nur um die Änderungen des Stilebuchs in der theme.json des eigenen Block Themes zu haben.
👉 Aber ! – Das Create Block Theme Plugin erstellt oft einfach auch Code, den man so nicht haben will. Und warum ein Plugin installieren, sollte das nicht WordPress auch können ? Na daweil halt noch nicht so.
Falls du jetzt noch da bist, Gratuliere, dann bist du wirklich interessiert oder ein Coder ha ha.
Oder du merkst, das FSE super ist, aber doch recht komplex.
Ok, ich will ja kein Hintergrundbild haben, also ändere ich den Hintergrund im Stile Buch einfach auf eine Farbe. Siehe Bild unten.
Und ich – Theme heruntelraden, Theme hochladen – schaue, was jetzt in der theme.json Datei steht:
Haare raufen .. 😂😂😂😂
Schaut euch das an ….
"variations": {
"plain": {
"background": {
"backgroundImage": {
"id": 69,
"source": "file",
"title": "header3",
"url": "http://localhost/walnut-base/wp-content/uploads/2025/06/header3.jpg"
},
"backgroundSize": "cover"
},
"color": {
"background": "#8dd2fc3b"
},
"spacing": {
"padding": {
"bottom": "0"
}
},
"typography": {
"fontFamily": "var(--wp--preset--font-family--open-sans)",
"fontSize": "var(--wp--preset--font-size--medium)",
"fontStyle": "normal",
"fontWeight": "400"
}
}
}
},
Man glaubt es kaum, es behält das Hintergrundbild und darunter dann die anderen Einstellungen. Also, da ist von Seiten WordPress auf jeden Fall noch Nachholbedarf.
Aber angesichts der derzeitigen Entwicklunge in WordPress – siehe auch den Beitrag > Statement von Matt Mullenweg und WordPress 6.9 , werden wir hier viel Geduld brauchen.
Ok, ich lösche das Hintergrundbild heraus. Aber es ist mir immer noch nicht möglich, den Stil Einfach/ Plain über die theme.json manuell zu ändern. Aber-
#1 Desgin Plain über Stilebuch erfolgreich
Aber immerhin, ich weiß jetzt, dass ich das Design Einfach/ Plain über das Stilebuch ändern kann und es dann auch so in die theme.json Datei von WordPress übertragen wird.
👉 Achtung ! Wer glaubt dass alle Design Änderungen, welche er über das Stilebuch macht, auch dann in dem Block Theme gespeichert werden, NEIN , wird es nicht. Das heißt, wenn du deine Änderungen, welche du im Stilebuch machst, dauerhaft erhalten möchtest, machst du das am besten über das Create Block Theme Plugin.
Block Variation: über die functions.php Datei Plain #2
Es gibt jetzt aber noch eine gute Möglichkeit, eigene Stile für jeden Block, auch für den Zitate Block zu einem Block Theme hinzuzufügen. Nämlich über die functions.php Datei.
Man könnte das auch über die theme.json machen. Aber sichere Weg geht über die functions.php Datei.
So geht’s:
Neue Stil Variante : Orange
- Oranger Hintergrund
- gepunkteter linker Rand
- blaue Schriftfarbe
- Schrift: Open Sans
Das Bild oben ist im Block Editor. Rechts kannst du sehen, habe ich zu den Styles:
- Standard
- Einfach
noch 3 weitere Styles über die functions.php hinzugefügt:
- Orange
- großes Zitat
- Einfaches Zitat
Und so sieht’s im Frontend aus:
1 – PHP in functions.php
/ Stilvariante: Orange (orange Hintergrund, gepunkteter Rand)
function mytheme_register_quote_styles () {
register_block_style(
'core/quote',
[
'name'=> 'simple', // hat nix mit " Einfach " zu tun, ist nur ein Bezeichner
'label' => 'Orange',
'style_handle'=>'szbasic-stylesheet'// die style.css
]
);
}
Den style_handle brauche ich eigentlich nicht, den braucht man nur, wenn man eine andere Datei hat als die style.css Datei.
2 – style.css – Styles
Das muss in die style.css Datei:
/* Stilvariante: Orange */
.wp-block-quote.is-style-simple {
background-color: #f2dfd7;
border-left: 4px dotted #2B4861;
padding: 1.5rem;
margin: 1.5rem 0;
border-radius: 8px;
}
/* Keine Anführungszeichen */
.wp-block-quote.is-style-simple p::before {
content: none;
}
Quellen:
Frage an chatgpt:
functions.php reicht für ein paar Stile, inc Ordner nur dann wenn es wirklich viele Stile werden ?
🔧 Stilvariante hinzufügen – einfache Struktur:
functions.php→ Registrierung mitregister_block_style()style.css→ Das eigentliche CSS für.is-style-deinname
Das reicht völlig für 1–3 Varianten oder Tests. Kein
theme.json, keinblock.json.
🗂️ Eigener Ordner (/inc/ oder /styles/) – wann sinnvoll?
Du brauchst das nur dann, wenn du z. B.:
- viele verschiedene Blöcke individuell stylen willst,
- oder wenn du das Theme später skalierbar oder für andere Entwickler strukturieren willst,
- oder deinen Code sauber modular halten willst.
Dann kannst du z. B.:
- In
/inc/block-styles.phpalle Registrierungen machen. - Pro Block in
/styles/eine eigene CSS-Datei laden (optional mit eigenemstyle_handle).
Fazit zum Zitate Block
Jo, ich glaube, ich habe den Zitate Block gut in die theme.json integriert. CSS bleibt halt doch , wegen des Anführungszeichens.
Weiters habe ich ein paar Stile erstellt über die functions.php Datei. Den Button “ Einfach “ habe ich zumindest über das Stilbuch gestylt. Obwohl ich ihn lieber entfernt hätte.
Aber mit dem Plain Stil, Einfach, gibt es anscheinend noch ein paar Ruckler 😅. Falls ich mal nachsehen will, habe ich diesen Beitrag. Vielleicht hilft er auch sonst noch jemand.
Weiterführende Links:
mediaevent-css-generated-quotes
Pullquote Block
Zum Pullquote Block gibt es jetzt nicht mehr sehr viel zu sagen.
Ich habe auch den Pullquote Block mit einem Anführungszeichen.
🧠 Tipp: pullquote-Struktur im HTML
<figure class="wp-block-pullquote">
<blockquote>
<p>Dein hervorgehobenes Zitat</p>
<cite>Quelle oder Autor</cite>
</blockquote>
</figure>
Im Codebeispiel unten siehst du mein CSS in der style.css Datei für den Pullquote Block. Da ist viel, was gar nicht zum Pullquote Block gehört. Das gehörte alles zum Zitate Block. Ok, ausmisten. ha ha.
*-------*/
/*Quotes*/
/*------*/
.wp-block-pullquote{
background:f2dfd7;
border:2px dotted #2B4861;
border-radius:10px;
/*font-family:'Lora',serif;*/
margin-top: calc(3 * 1rem);
margin-bottom: calc(3.33 * 1rem);
padding-top:10px;
padding-bottom:10px;
hyphens: auto;
word-break: break-word;
} // Das ist alles vom Pullquote Block !
/* Block Quote Regular */
.wp-block-quote:not(.is-large):not(.is-style-large) {
border-left:10px solid #179c56!important;
padding-left:5%;
padding-right:5%;
}
.wp-block-quote cite,
.wp-block-quote footer,
.wp-block-quote .wp-block-quote__citation {
/* font-family:'Lora',serif;*/
font-size: 1.0rem;
line-height: 1.6;
color:#684268;
}
.wp-block-quote p{font-size:1.3rem!important;}
.wp-block-quote.is-large, .wp-block-quote.is-style-large {
font-size:4rem!important;
}
.wp-block-quote.is-large p, // das waren alte Stilvarianten , alles löschen
.wp-block-quote.is-style-large p {
font-size: 4rem;
line-height: 1.3;
margin-bottom: 10px;
margin-top: 1.5em;
}
/*=========Ende Quotes =======*/
Und so siehts jetzt aus:
Die Linkfarbe stimmt nicht, aber die Navigation und die Links habe ich noch nicht in die theme.json übertragen.
theme.json :
"core/pullquote": {
"border": {
"color": "#2B4861",
"radius": "10px",
"style": "dotted",
"width": "2px"
},
"color": {
"background": "none",
"text": "#2B4861"
},
"spacing": {
"margin": {
"bottom": "2rem",
"top": "2rem"
},
"padding": {
"bottom": "2rem",
"left": "2rem",
"right": "2rem",
"top": "2rem"
}
},
"typography": {
"fontFamily": "var(--wp--preset--font-family--open-sans)",
"fontSize": "1.5rem",
"lineHeight": "1.6"
}
},
und in der style.css Datei:
/*Pullquote Block */
.wp-block-pullquote blockquote p::before {
content: "“";
font-size: 4em;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
color: #2B4861;
font-family: Lora, serif;
}
.wp-block-pullquote cite {
display: block;
margin-top: 1em;
text-align: right;
font-style: normal;
color: #2B4861;
font-size: 1.2rem;
font-family: 'Lora', serif;
}
👉 Also musst du immer mit dem Selektor .wp-block-pullquote blockquote p::before arbeiten – der ist nötig für dein typografisches Anführungszeichen.
Ich habe die Styles vorgegeben, allerdings kann man die ja im Block Editor komplet überschreiben.
Der Pullqutoe Block hat im TT5 Block Theme keine extra Stil Varianten. Also brauche ich auch keine… 😆
Du muss angemeldet sein, um einen Kommentar zu veröffentlichen.