Adding Fluid Typography Support to WordPress Block Themes

Fluid typography dynamically adjusts font properties (size, line height) based on viewport size, enhancing responsiveness. Also called responsive typography, flexible type, or viewport-sized typography, it offers a superior user experience. This article focuses on implementing fluid typography in WordPress 6.1, leveraging its built-in Block Editor features.

While simply adding a clamp() function to style.css creates fluid text, true Block Editor integration requires a different approach.

Gutenberg's Fluid Typography Support

Many WordPress theme developers have utilized clamp() in their themes, including block themes like Twenty Twenty-Two and Twenty Twenty-Three. However, Gutenberg (WordPress's block editor) introduced fluid typography support in version 13.8, enabling theme-level implementation for direct application within the Block Editor. This functionality became part of WordPress Core in version 6.1.

Rich Tabor, a key contributor, highlights the feature's power and simplicity. The approach focuses on block-level support, dynamically applying fluid font sizes by default. Benefits include:

• Simplified theme author implementation.
• Maintainable, reusable application to specific elements/blocks.
• Flexibility in font size units (px, rem, em, %).

WordPress 6.1 allows theme authors to implement consistent fluid typography without custom code.

Blocks with Typography and Spacing Settings

Gutenberg 14.1 (September 16, 2022) added typographic settings to numerous blocks, providing font and spacing controls directly in the Block Editor. This expanded functionality is integrated into WordPress 6.1.

Implementing Fluid Typography in a WordPress Block Theme

Fluid typography is implemented via theme.json, a block theme configuration file. Consider a large font, with contentSize: 768px and widesize: 1600px. A clamp() function in CSS could be:

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

WordPress 6.1 supports rem, em, and px units. However, the new fluid type feature offers a simpler approach. Enable fluid typography:

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

Then specify fontSizes with fluidSize for min and max values:

<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>

This adds fluid type to the "Large" font size (2.25rem to 3rem). The "Large" font can then be applied to any block with font settings.

WordPress converts theme.json properties into CSS:

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

Applied to elements like <code><p></p> tags. Online calculators can assist in determining clamp() values.

Examples

Detailed testing instructions are available in the relevant GitHub Pull Request.

Example 1: Setting a New Fluid Font Setting

Ensure Gutenberg (13.8 ) or WordPress 6.1 is used. Enable fluid type 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>

Add font size settings:

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

Apply "Normal" in the Block Editor and verify the front-end markup and CSS.

Example 2: Excluding a Font Setting from Fluid Type

Enable fluid type as before. Define font sizes, disabling fluid type for one:

<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 generates CSS accordingly, excluding the "Extra Large" setting from fluid type adjustments. Verify the front-end markup and CSS.

Block Themes with Fluid Typography Support

Many themes utilize clamp() for fluid type. Several recently released themes support the new fluid typography feature.

Community Feedback

The WordPress fluid typography feature has received positive feedback from the developer community, highlighting its benefits for both developers and content consumers. Some developers suggest making certain aspects opt-in rather than default.

Conclusion

The WordPress fluid typography feature is actively developed. While currently usable, theme authors should proceed with caution, monitoring relevant GitHub issues. Numerous resources provide further information on fluid typography and its implementation in WordPress.

The above is the detailed content of Adding Fluid Typography Support to WordPress Block Themes. For more information, please follow other related articles on the PHP Chinese website!