Changeset 54260 for trunk/src/wp-includes/deprecated.php

Timestamp:

09/20/2022 03:41:44 PM (2 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/deprecated.php (modified) (1 diff)

trunk/src/wp-includes/deprecated.php

@@ -4457 +4457 @@
     return $metadata;
 }
+
+/**
+ * Generates an inline style for a typography feature e.g. text decoration,
+ * text transform, and font style.
+ *
+ * @since 5.8.0
+ * @access private
+ * @deprecated 6.1.0 Use wp_style_engine_get_styles() introduced in 6.1.0.
+ *
+ * @see wp_style_engine_get_styles()
+ *
+ * @param array  $attributes   Block's attributes.
+ * @param string $feature      Key for the feature within the typography styles.
+ * @param string $css_property Slug for the CSS property the inline style sets.
+ * @return string CSS inline style.
+ */
+function wp_typography_get_css_variable_inline_style( $attributes, $feature, $css_property ) {
+    _deprecated_function( __FUNCTION__, '6.1.0', 'wp_style_engine_get_styles()' );
+
+    // Retrieve current attribute value or skip if not found.
+    $style_value = _wp_array_get( $attributes, array( 'style', 'typography', $feature ), false );
+    if ( ! $style_value ) {
+        return;
+    }
+
+    // If we don't have a preset CSS variable, we'll assume it's a regular CSS value.
+    if ( strpos( $style_value, "var:preset|{$css_property}|" ) === false ) {
+        return sprintf( '%s:%s;', $css_property, $style_value );
+    }
+
+    /*
+     * We have a preset CSS variable as the style.
+     * Get the style value from the string and return CSS style.
+     */
+    $index_to_splice = strrpos( $style_value, '|' ) + 1;
+    $slug            = substr( $style_value, $index_to_splice );
+
+    // Return the actual CSS inline style e.g. `text-decoration:var(--wp--preset--text-decoration--underline);`.
+    return sprintf( '%s:var(--wp--preset--%s--%s);', $css_property, $css_property, $slug );
+}