Changeset 54260 for trunk/src/wp-includes/class-wp-theme-json.php

Timestamp:

09/20/2022 03:41:44 PM (3 years ago)

Author:

hellofromTonya

Message:

Editor: Introduces fluid typography and uses Style Engine.

This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.

The motivation for fluid typography block supports:

"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.

Font sizes can smoothly scale between minimum and maximum viewport widths.

Typography changes introduced from Gutenberg:

• Uses the Style Engine to generate the CSS and classnames in wp_apply_typography_support().
• Introduces wp_typography_get_preset_inline_style_value() for backwards-compatibility.
• Introduces a private internal function called wp_get_typography_value_and_unit(), for checking and getting typography unit and value.
• Introduces a private internal function called wp_get_computed_fluid_typography_value(), for an internal implementation of CSS clamp().
• Deprecates wp_typography_get_css_variable_inline_style().

References:

• ​WordPress/gutenberg PR 40332 Style Engine: add typography and color to backend
• ​WordPress/gutenberg PR 39529 Block supports: add fluid typography

Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].

Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.

File:

• trunk/src/wp-includes/class-wp-theme-json.php (modified) (1 diff)

trunk/src/wp-includes/class-wp-theme-json.php

@@ -151 +151 @@
             'prevent_override'  => false,
             'use_default_names' => true,
-            'value_key'         => 'size',
+            'value_func'        => 'wp_get_typography_font_size_value',
             'css_vars'          => '--wp--preset--font-size--$slug',
             'classes'           => array( '.has-$slug-font-size' => 'font-size' ),