Changeset 54825 for branches/6.1/src/wp-includes/block-supports/typography.php

Timestamp:

11/11/2022 05:54:23 PM (2 years ago)

Author:

desrosj

Message:

Editor: Improve how min/max font sizes are calculated for fluid typography.

• Where no fluid max values are set (e.g., single or custom font size values), the "size" value will act as the maximum value in a clamp() function.
• In the absence of any fluid min/max values, the lower bound rule of >16px will be enforced. This applies to custom values from the editor or single-value theme.json styles. Font sizes below this will not be clamped.
• In a preset, if a fluid.min value has been specified, the lower bound rule of >16px won't be enforced on this value. Presets with a fluid object therefore, give precedence to theme author's values.
• In a preset, if there is NOT a fluid.max but there is fluid.min, use the incoming "size" value as the max.
• In a preset, if there is NOT a fluid.min but there is a fluid.max, use size * min_size_factor as the min. The lower bound rule of >16px is enforced here, because the block editor is computing the min value. This is consistent with the way minimum sizes are calculated for single or custom values.

Props ramonopoly, mamaduka, andrewserong, aristath, joen, desrosj.
Merges [54823] to the 6.1 branch.
Fixes #57075.

Location:

branches/6.1

Files:

• . (modified) (1 prop)
• src/wp-includes/block-supports/typography.php (modified) (4 diffs)

branches/6.1/src/wp-includes/block-supports/typography.php

@@ -453 +453 @@
  *
  * @since 6.1.0
+ * @since 6.1.1 Adjusted rules for min and max font sizes.
  *
  * @param array $preset                     {
@@ -490 +491 @@
     $default_minimum_viewport_width   = '768px';
     $default_minimum_font_size_factor = 0.75;
-    $default_maximum_font_size_factor = 1.5;
     $default_scale_factor             = 1;
     $default_minimum_font_size_limit  = '14px';
@@ -509 +509 @@
     $preferred_size = wp_get_typography_value_and_unit( $preset['size'] );
 
-    // Protect against unsupported units.
+    // Protects against unsupported units.
     if ( empty( $preferred_size['unit'] ) ) {
         return $preset['size'];
     }
 
-    // If no fluid max font size is available, create one using max font size factor.
-    if ( ! $maximum_font_size_raw ) {
-        $maximum_font_size_raw = round( $preferred_size['value'] * $default_maximum_font_size_factor, 3 ) . $preferred_size['unit'];
-    }
-
-    // If no fluid min font size is available, create one using min font size factor.
-    if ( ! $minimum_font_size_raw ) {
-        $minimum_font_size_raw = round( $preferred_size['value'] * $default_minimum_font_size_factor, 3 ) . $preferred_size['unit'];
-    }
-
-    // Normalizes the minimum font size limit according to the incoming unit, so we can perform checks using it.
+    /*
+     * Normalizes the minimum font size limit according to the incoming unit,
+     * in order to perform comparative checks.
+     */
     $minimum_font_size_limit = wp_get_typography_value_and_unit(
         $default_minimum_font_size_limit,
@@ -532 +525 @@
     );
 
-    if ( ! empty( $minimum_font_size_limit ) ) {
+    // Don't enforce minimum font size if a font size has explicitly set a min and max value.
+    if ( ! empty( $minimum_font_size_limit ) && ( ! $minimum_font_size_raw && ! $maximum_font_size_raw ) ) {
         /*
          * If a minimum size was not passed to this function
          * and the user-defined font size is lower than $minimum_font_size_limit,
-         * then use the user-defined font size as the minimum font-size.
+         * do not calculate a fluid value.
          */
-        if ( ! isset( $fluid_font_size_settings['min'] ) && $preferred_size['value'] < $minimum_font_size_limit['value'] ) {
-            $minimum_font_size_raw = implode( '', $preferred_size );
+        if ( $preferred_size['value'] <= $minimum_font_size_limit['value'] ) {
+            return $preset['size'];
+        }
+    }
+
+    // If no fluid max font size is available use the incoming value.
+    if ( ! $maximum_font_size_raw ) {
+        $maximum_font_size_raw = $preferred_size['value'] . $preferred_size['unit'];
+    }
+
+    /*
+     * If no minimumFontSize is provided, create one using
+     * the given font size multiplied by the min font size scale factor.
+     */
+    if ( ! $minimum_font_size_raw ) {
+        $calculated_minimum_font_size = round(
+            $preferred_size['value'] * $default_minimum_font_size_factor,
+            3
+        );
+
+        // Only use calculated min font size if it's > $minimum_font_size_limit value.
+        if ( ! empty( $minimum_font_size_limit ) && $calculated_minimum_font_size <= $minimum_font_size_limit['value'] ) {
+            $minimum_font_size_raw = $minimum_font_size_limit['value'] . $minimum_font_size_limit['unit'];
         } else {
-            $minimum_font_size_parsed = wp_get_typography_value_and_unit(
-                $minimum_font_size_raw,
-                array(
-                    'coerce_to' => $preferred_size['unit'],
-                )
-            );
-
-            /*
-             * If the passed or calculated minimum font size is lower than $minimum_font_size_limit
-             * use $minimum_font_size_limit instead.
-             */
-            if ( ! empty( $minimum_font_size_parsed ) && $minimum_font_size_parsed['value'] < $minimum_font_size_limit['value'] ) {
-                $minimum_font_size_raw = implode( '', $minimum_font_size_limit );
-            }
+            $minimum_font_size_raw = $calculated_minimum_font_size . $preferred_size['unit'];
         }
     }