has-large-font-size nach gutenberg update zerschossen (Eksell)

  • Gelöst entlein

    (@entlein)


    vor 3 Jahren, 2 Monaten

    seit dem Gutenberg Plugin-update auf Version 11.6.0 sind plötzlich alle blöcke, denen ich has-font-size-large zugeordnet habe überschrieben mit einer riesigen Schrift!! selbst auf dem Handy. Ich habe im Inspektor (Firefox) herausgefunden ,dass es mit folgender Variabel zu tun hat. Wenn dort z.B. das important gelöscht ist, dann sieht die Sache schon ganz anders aus.

    var(--wp--preset--font-size--large) !important

    Leider fehlt mir das knowhow um zu sehen wo genau diese variabel definiert wird. Jedenfalls kann ich im child theme nicht einfach die class .has-large-font-size überschreiben, wie es scheint.

    Wie kann ich das zentral reparieren ohne jeden Block anzufassen?

Ansicht von 9 Antworten – 1 bis 9 (von insgesamt 9)
  • Moderator Bego Mario Garde

    (@pixolin)

    vor 3 Jahren, 2 Monaten

    … seit dem Gutenberg Plugin-update auf Version 11.6.0 …

    Das Gutenberg-Plugin ist eine Entwicklungs-Version des integrierten Block-Editors, die auf produktiven Webseiten nicht genutzt werden sollte. Das Plugin soll interessierten Anwendern/-innen eine Vorschau auf künftige Funktionen geben, die sich bis zur Übernahme in den WordPress-Core noch ändern können.

    sind plötzlich alle blöcke, denen ich has-font-size-large zugeordnet habe überschrieben mit einer riesigen Schrift!!

    Da wird ein Stylesheet dieses CSS-Klasse verwendet haben, um Text mit „riesiger Schrift“ auszugeben.

    Jedenfalls kann ich im child theme nicht einfach die class .has-large-font-size überschreiben, wie es scheint.

    Damit würdest du die CSS-Regel des Stylesheets für die gesamte Website überschreiben. Ich weiß nicht, wie sinnvoll das ist.

    Wie kann ich das zentral reparieren ohne jeden Block anzufassen?

    Wahrscheinlich gar nicht. (Außer dass du das Update rückgängig machst – du hast sicher ein Backup? Anderenfalls kannst du das Plugin WP Rollback nutzen oder Gutenberg komplett deaktivieren.) Mit einer URL zu deinen Webseiten und einem Blick in den Quellcode ließe sich das besser beurteilen.

    Moderator Hans-Gerd Gerhards

    (@hage)

    vor 3 Jahren, 2 Monaten

    Hallo,
    wenn du dann noch die URL oben einträgst, dann können wir uns das auch ansehen und dir sicher besser helfen.
    Viele Grüße
    Hans-Gerd

    Moderator Bego Mario Garde

    (@pixolin)

    vor 3 Jahren, 2 Monaten

    Noch ein Nachtrag: has-large-font-size ist eine CSS-Klasse, die im Editor vorgegeben wird und in jedem Theme entsprechend gestaltet werden sollte. Weist du einem Block diese Klasse zu, bedeutet das umgangssprachlich ausgedrückt „übernimm die Gestaltung des Themes für Blöcke mit großer Schriftgröße“. Änderst du die CSS-Klasse über eine eigene CSS-Regel, die du im Customizer unter Zusätzliches CSS einträgst, veränderst du damit auch die Gestaltung des Themes.

    Thread-Starter entlein

    (@entlein)

    vor 3 Jahren, 2 Monaten

    Hallo Hans-Gerd Hallo Bego Mario Garde,
    Schock! Ich habe gar nicht gewußt, dass das Gutenberg-Plugin nur unter Vorbehalt zu verwenden ist! Danke für den Hinweis.

    Meine Frage war eigentlich:
    wo wird die Variabel definiert.
    Ich habe nun das Gutenberg Plugin deaktiviert und siehe da, die font-size ist wieder so, wie sie im Theme definiert wurde. Demnach vermute ich hatte zuvor das Gutenberg-Plugin bzw. die dort definierten Styles die vom Theme überschrieben. Oder verstehe ich da was falsch?

    Damit würdest du die CSS-Regel des Stylesheets für die gesamte Website überschreiben. Ich weiß nicht, wie sinnvoll das ist.

    ja, das möchte ich ja auch. Einheitliche Styles auf der Website, einfach anzuwenden. „Large“ im Editor eingeben. Dann im Frontend wird die Darstellung noch an verschiedene Ausgabegrößen angepaßt (@media (min-width:700) @media (min-width:1200)). Hauptsache die Macher von WP werden sich einig, wo schriftgrößen zukünftig definiert werden sollen.

    Herzlichen Dank an euch beide für die schnelle Antwort!!

    Moderator Bego Mario Garde

    (@pixolin)

    vor 3 Jahren, 2 Monaten

    Ich hab noch rasch das Theme Eksell und die neueste Version des Gutenberg-Plugin installiert und einem Absatz die Schrifgröße „Groß“ zugewiesen, was dazu führt dass der Absatz automatisch eine CSS-Klasse has-large-font-size zugewiesen bekommt. Der Absatz wird in Schrifgröße 36px ausgegeben, was ich nicht als „riesig“ empfinde. Ich vermute eher, dass eine eigene CSS-Regel bei der Schriftgröße eine Rolle spielt.

    Den Browser-Cache hast du nach dem Update geleert?

    Moderator Bego Mario Garde

    (@pixolin)

    vor 3 Jahren, 2 Monaten

    Hauptsache die Macher von WP werden sich einig, wo schriftgrößen zukünftig definiert werden sollen.

    Du meinst die CSS-Regeln im Core? Oder im Theme? Oder in Plugins?

    Bestimmte CSS-Klassen sind schon seit langer Zeit als Standard definiert worden, z.B. aligncenter. Wenn du jetzt einem Absatz eine CSS-Klasse aligncenter zuweist und dafür eine eigene CSS-Regel setzt, überschreibst du damit global die Gestaltung für alle Elemente, die bereits diese CSS-Klasse verwenden. Du kannst dir aber angewöhnen, alle selbst definierten CSS-Klassen mit einer individuellen Vorsilbe zu versehen, z.B. entlein-aligncenter, um nicht Überschneidungen mit bereits vorhandenen (oder vielleicht auch künftigen) CSS-Klassen zu erzeugen.

    Nehmen wir an, du hast einen Absatz-Block eingegeben und ihm unter „Erweitert“ eine CSS-Klasse dolly zugewiesen. Der Absatz wird in der Datenbank folgendermaßen abgelegt:

    <!-- wp:paragraph {"className":"dolly"} -->
<p class="dolly">Lorem ipsum dolor sit amet …</p>
<!-- /wp:paragraph -->

    Wenn du das mit 57 Absätzen in 42 Seiten so gemacht hast, lässt sich der Klassenname mit einem Plugin wie Better Search Replace ersetzen, indem du nach "className":"dolly" und class="dolly" suchst und dolly durch dingdong ersetzt. (Sorry, mir sind keine sinnvolleren Platzhalternamen eingefallen.)

    Problematisch ist jetzt, wenn du statt dessen einzelnen Absätzen eine CSS-Klasse has-large-font-size zugewiesen hast, weil dann eine Ersetzung auch die Absätze ändert, denen du in den Block-Einstellungen eine große Schriftart zugewiesen hast.

    Fazit: CSS-Klassen-Namen sollten gut überlegt sein.

    Thread-Starter entlein

    (@entlein)

    vor 3 Jahren, 2 Monaten

    Ich danke Dir sehr für die ausführliche Antwort. So wie ich momentan mit Themes umgehe, definiere ich keine neuen Klassen, sondern ich überschreibe (an gaaanz wenigen Stellen) diejenigen, die im Theme oder im Plugin definiert wurden mithilfe eines Child Themes. So habe ich z.B. die WP-Forms Buttons ans Theme angepaßt. Kann sein, dass dies eine crude und wenig nachhaltige Vorgehensweise ist. Ich lasse mich gern eines besseren belehren.

    Ich hatte im Editor die Einstellungen für Typografie entdeckt. Diese bieten mir an, dort vordefinierte Schriftgrößen zu wählen (zumindest beim Absatz-Block, beim Überschriften Block und bei den Listen). Das fand ich auch sehr praktisch denn mein Ziel ist eine einheitliche Typografie. Das Eksell-theme (oder war es Core?) hat die Schriftgrößen (L,Xl ,XXL) dann in sich stimmig „cascading-style“ aufgebaut und danach sah es auch aus, bis heute das update kam.
    Jetzt bin ich etwas besorgt: könnte das demnächst ins Core übernommen werden? Meine Theorie für die Schriftvergrößerung ist, dass Eksell mit seiner Definition der Schriftgrößen in em auf einer Basis (durch Gutenberg Plugin definiert) aufbaut, die dann zu dieser übermäßig großen Schrift führte.

    Es könnte sein, dass ich zukünftig auch eigene styles verwende.
    Dazu müßte ich ja dann (wie Du beschreibst) für jeden erzeugten Absatz-Block separat unter erweitert >Zusätzliche CSS-Klasse(n) diese Bezeichnung eingeben oder?
    Das ist aber wenig praktikabel, da mein Redakteur ja auch damit arbeiten soll.

    Moderator Hans-Gerd Gerhards

    (@hage)

    vor 3 Jahren, 2 Monaten

    Hallo,
    alternativ kannst du auch Block Patterns nutzen. Das sind im Grunde fertige Bausteine bestehend aus einem oder mehrerer Blöcke, die dann als Blöcke genau wie die Standard-Blöcke verwendet werden können.
    Damit kann man dann auch die speziellen CSS-Klassen verbinden.
    Wie das funktioniert, habe ich in dem folgenden Beitrag beschrieben.
    Viele Grüße
    Hans-Gerd

    • Diese Antwort wurde geändert vor 3 Jahren, 2 Monaten von Hans-Gerd Gerhards. Grund: Tippfehler
    Moderator Bego Mario Garde

    (@pixolin)

    vor 3 Jahren, 2 Monaten

    Ich hatte dich so verstanden, dass du einzelnen Absätzen CSS-Klassen zugewiesen hast, die an anderer Stelle vorkamen:

    … sind plötzlich alle blöcke, denen ich has-font-size-large zugeordnet habe …

    „ich habe zugeordnet“ → geht nur manuell über die Sidebar > Erweitert > CSS-Klasse eintragen

    „has-font-size-large zugeordnet“ → vorhandene Standardklasse mehreren Blöcken zugewiesen.

    … sondern ich überschreibe (an gaaanz wenigen Stellen) diejenigen, die im Theme oder im Plugin definiert wurden mithilfe eines Child Themes

    Kann man so machen, wobei ein Child-Theme nur nötig ist, wenn du über die CSS-Regeln hinaus Änderungen vornehmen möchtest. Sonst ist der Verwaltungsaufwand bei Child-Themes zu groß.

    Kann sein, dass dies eine crude und wenig nachhaltige Vorgehensweise ist. Ich lasse mich gern eines besseren belehren.

    Nein schon korrekt und es gibt auch keine WordPress-Polizei, die das verbietet. Deine Website, deine Regeln. Nur wenn du hier nachfragst, versuchen wir, „Best Practice“ zu vermittel. Es lesen ja auch Kinder mit.
    Belehren wollen wir sowieso niemand. Das wäre mir zu anstrengend.

    Ich hatte im Editor die Einstellungen für Typografie entdeckt.

    Klar, so kann man vorgehen: per CSS feste Schriftgrößen vorgeben. Leider sind die Themes heute komplizierter, weil viel mit Variablen und Abhängigkeiten (rem) gearbeitet wird. Oder wie du selber geschrieben hast:

    … dass Eksell mit seiner Definition der Schriftgrößen in em auf einer Basis (durch Gutenberg Plugin definiert) aufbaut, die dann zu dieser übermäßig großen Schrift führte.

    Dazu müßte ich ja dann (wie Du beschreibst) für jeden erzeugten Absatz-Block separat unter erweitert >Zusätzliche CSS-Klasse(n) diese Bezeichnung eingeben oder?

    Nein, gar nicht unbedingt. Der Trick ist ja, spezifischere CSS-Regeln zu überschreiben. Dabei sind die CSS-Klassen, die WordPress dem <body>-Tag automatisch zuweist, recht hilfreich.

    Nehmen wir an, du hast eine CSS-Regel .entry-content p { color: #444; } und du möchtest den Text in Absätzen lieber in Blau haben, dann reicht eine spezifischere CSS-Regel .page .entry-content p { color: blue; } (mit der Klasse page aus dem<body>-Tag).

    Die Möglichkeit, Blöcken zusätzlich CSS-Klassen zuzuweisen, vereinfacht eine Gestaltung bestimmter Abschnitte deiner Webseiten. Aber es geht meistens auch ohne, wenn auch etwas umständlicher.

    Denkst du bitte daran, nach Beantwortung deiner Frage den Thread noch als „gelöst“ zu markieren?

Ansicht von 9 Antworten – 1 bis 9 (von insgesamt 9)
  • Das Thema „has-large-font-size nach gutenberg update zerschossen (Eksell)“ ist für neue Antworten geschlossen.