Hinzufügen von Unterstützung der Flüssigkeits Typografie zu WordPress -Block -Themen

Fluid Typografie passt die Schrifteigenschaften (Größe, Linienhöhe) dynamisch anhand der Ansichtsfenstergröße an und verbessert die Reaktionsfähigkeit. Auch als Responsive Typografie, flexibler Typ oder Typografie zur Ansichtsfenster bezeichnet, bietet sie eine überlegene Benutzererfahrung. Dieser Artikel konzentriert sich auf die Implementierung der Fluid-Typografie in WordPress 6.1 und nutzt die integrierten Block-Editor-Funktionen.

Beim einfachen Hinzufügen einer clamp() -Funktion zu style.css erstellt Fluid -Text, erfordert eine echte Block -Editor -Integration einen anderen Ansatz.

Gutenbergs Fluid Typografieunterstützung

Viele WordPress-Themenentwickler haben clamp() in ihren Themen verwendet, einschließlich Blockthemen wie zweiundzwanzig und dreiundzwanzig. Gutenberg (WordPress-Blockeditor) führte jedoch die Unterstützung der Fluid-Typografie in Version 13.8 ein und ermöglichte die Implementierung auf Themenebene für die direkte Anwendung innerhalb des Blockeditors. Diese Funktionalität wurde Teil des WordPress Core in Version 6.1.

Rich Tabor, ein wichtiger Mitwirkender, unterstreicht die Kraft und Einfachheit der Funktion. Der Ansatz konzentriert sich auf die Unterstützung auf Blockebene, wobei standardmäßig dynamisch flüssige Schriftgrößen angewendet werden. Zu den Vorteilen gehören:

• Implementierung des Themas Autor.
vereinfacht.
Wardierbare, wiederverwendbare Anwendung auf bestimmte Elemente/Blöcke.
Flexibilität in Schriftgrößeneinheiten (PX, REM, EM, %).

WordPress 6.1 ermöglicht es den Autoren von Themen, eine konsistente Flüssigkeitsypografie ohne benutzerdefinierten Code zu implementieren.

Blöcke mit Typografie- und Abstandseinstellungen

Gutenberg 14.1 (16. September 2022) fügte zahlreiche Blöcke typografische Einstellungen hinzu und lieferte Schrift- und Abstandskontrollen direkt im Blockeditor. Diese erweiterte Funktionalität ist in WordPress 6.1 integriert.

Implementierung der Fluid -Typografie in einem WordPress -Block -Thema

theme.json contentSize: 768px Fluid Typografie wird über widesize: 1600px, eine Block -Themenkonfigurationsdatei, implementiert. Betrachten Sie eine große Schriftart mit clamp() und

. Eine

<code>"settings": {
  "appearanceTools": true,
  "layout": {
    "contentSize": "768px",
    "wideSize": "1600px"
  },
  "typography": {
    "fontSizes": [
      {
        "name": "Large",
        "size": "clamp(2.25rem, 6vw, 3rem)",
        "slug": "large"
      }
    ]
  }
}</code>

-Funktion in CSS könnte sein:

<code>"settings": {
  "typography": {
    "fluid": true
  }
}</code>

WordPress 6.1 unterstützt REM-, EM- und PX -Einheiten. Die neue Flüssigkeitstyp -Funktion bietet jedoch einen einfacheren Ansatz. Aktivieren Sie die Fluid -Typografie:

fontSizes fluidSize Geben Sie dann

mit

<code>"settings": {
  "appearanceTools": true,
  "layout": {
    "contentSize": "768px",
    "wideSize": "1600px"
  },
  "typography": {
    "fontSizes": [
      {
        "size": "2.25rem",
        "fluidSize": {
          "min": "2.25rem",
          "max": "3rem"
        },
        "slug": "large",
        "name": "Large"
      }
    ]
  }
}</code>

für min und maximale Werte an:

Dies fügt der "großen" Schriftgröße (2,25REM zu 3REM) einen Flüssigkeitstyp hinzu. Die "große" Schriftart kann dann mit Schriftstellungen auf einen beliebigen Block angewendet werden. theme.json

WordPress konvertiert

<code>.has-large-font-size {
  font-size: clamp(36px, calc(2.25rem + ((1vw - 7.68px) * 1.4423)), 48px);
}</code>

Eigenschaften in CSS:

<p></p> clamp() angewendet auf Elemente wie

Tags. Online -Taschenrechner können bei der Ermittlung von

-Werten beitragen.

Beispiele

detaillierte Testanweisungen finden Sie in der entsprechenden GitHub Pull -Anforderung.

Beispiel 1: Setzen Sie eine neue Fluid -Schriftart

ein

sicherstellen, dass Gutenberg (13,8) oder WordPress 6.1 verwendet werden. Aktivieren Sie den Flüssigkeitstyp in theme.json:

<code>"settings": {
  "appearanceTools": true,
  "layout": {
    "contentSize": "768px",
    "wideSize": "1600px"
  },
  "typography": {
    "fontSizes": [
      {
        "name": "Large",
        "size": "clamp(2.25rem, 6vw, 3rem)",
        "slug": "large"
      }
    ]
  }
}</code>

Einstellungen der Schriftgröße hinzufügen:

<code>"settings": {
  "typography": {
    "fluid": true
  }
}</code>

"Normal" im Blockeditor anwenden und das Front-End-Markup und das CSS verifizieren.

Beispiel 2: Ausschluss einer Schrifteinstellung aus Fluidtyp

Flüssigkeitstyp wie zuvor aktivieren. Definieren Sie Schriftgrößen und deaktivieren Sie den Flüssigkeitstyp für einen:

<code>"settings": {
  "appearanceTools": true,
  "layout": {
    "contentSize": "768px",
    "wideSize": "1600px"
  },
  "typography": {
    "fontSizes": [
      {
        "size": "2.25rem",
        "fluidSize": {
          "min": "2.25rem",
          "max": "3rem"
        },
        "slug": "large",
        "name": "Large"
      }
    ]
  }
}</code>

WordPress erzeugt CSS entsprechend, ausgenommen die "extra große" Einstellung von den Anpassungen vom Flüssigkeitstyp. Überprüfen Sie das Front-End-Markup und das CSS.

Blockthemen mit Fluid Typografieunterstützung

blockieren

Viele Themen verwenden clamp() für den Flüssigkeitstyp. Mehrere kürzlich veröffentlichte Themen unterstützen die neue Feature der Fluid -Typografie.

Community -Feedback

Die Feature der WordPress -Fluid -Typografie hat von der Entwicklergemeinschaft ein positives Feedback erhalten und ihre Vorteile sowohl für Entwickler als auch für Inhaltsverbraucher hervorgehoben. Einige Entwickler schlagen vor, bestimmte Aspekte eher als standardmäßig zu entscheiden.

Schlussfolgerung

Die WordPress -Fluid -Typografie -Funktion ist aktiv entwickelt. Obwohl die Autoren der Themen derzeit verwendbar sind, sollten die Autoren mit Vorsicht vorgehen und relevante Github -Probleme überwachen. Zahlreiche Ressourcen liefern weitere Informationen zur Fluid -Typografie und deren Implementierung in WordPress.

Das obige ist der detaillierte Inhalt vonHinzufügen von Unterstützung der Flüssigkeits Typografie zu WordPress -Block -Themen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!