Changeset 56535

Timestamp:

09/07/2023 04:28:45 AM (19 months ago)

Author:

isabel_brison

Message:

Editor: add configurable viewport sizes for fluid typography.

Adds options to configure min and max viewport sizes for fluid typography in theme.json settings.

Props ramonopoly.
Fixes #59048.

Location:

trunk

Files:

• src/wp-includes/block-supports/typography.php (modified) (4 diffs)
• tests/phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/theme.json (modified) (1 diff)
• tests/phpunit/tests/block-supports/typography.php (modified) (2 diffs)

trunk/src/wp-includes/block-supports/typography.php

@@ -472 +472 @@
  * @since 6.2.0 Added 'settings.typography.fluid.minFontSize' support.
  * @since 6.3.0 Using layout.wideSize as max viewport width, and logarithmic scale factor to calculate minimum font scale.
+ * @since 6.4.0 Added configurable min and max viewport width values to the typography.fluid theme.json schema.
  *
  * @param array $preset                     {
@@ -518 +519 @@
 
     // Defaults.
-    $default_maximum_viewport_width       = isset( $layout_settings['wideSize'] ) && ! empty( wp_get_typography_value_and_unit( $layout_settings['wideSize'] ) ) ? $layout_settings['wideSize'] : '1600px';
+    $default_maximum_viewport_width       = '1600px';
     $default_minimum_viewport_width       = '320px';
     $default_minimum_font_size_factor_max = 0.75;
     $default_minimum_font_size_factor_min = 0.25;
     $default_scale_factor                 = 1;
-    $has_min_font_size                    = isset( $fluid_settings['minFontSize'] ) &&
-        ! empty( wp_get_typography_value_and_unit( $fluid_settings['minFontSize'] ) );
-    $default_minimum_font_size_limit      = $has_min_font_size ? $fluid_settings['minFontSize'] : '14px';
+    $default_minimum_font_size_limit      = '14px';
+
+    // Defaults overrides.
+    $minimum_viewport_width = isset( $fluid_settings['minViewportWidth'] ) ? $fluid_settings['minViewportWidth'] : $default_minimum_viewport_width;
+    $maximum_viewport_width = isset( $layout_settings['wideSize'] ) && ! empty( wp_get_typography_value_and_unit( $layout_settings['wideSize'] ) ) ? $layout_settings['wideSize'] : $default_maximum_viewport_width;
+    if ( isset( $fluid_settings['maxViewportWidth'] ) ) {
+        $maximum_viewport_width = $fluid_settings['maxViewportWidth'];
+    }
+    $has_min_font_size       = isset( $fluid_settings['minFontSize'] ) && ! empty( wp_get_typography_value_and_unit( $fluid_settings['minFontSize'] ) );
+    $minimum_font_size_limit = $has_min_font_size ? $fluid_settings['minFontSize'] : $default_minimum_font_size_limit;
 
     // Font sizes.
@@ -552 +560 @@
      */
     $minimum_font_size_limit = wp_get_typography_value_and_unit(
-        $default_minimum_font_size_limit,
+        $minimum_font_size_limit,
         array(
             'coerce_to' => $preferred_size['unit'],
@@ -601 +609 @@
     $fluid_font_size_value = wp_get_computed_fluid_typography_value(
         array(
-            'minimum_viewport_width' => $default_minimum_viewport_width,
-            'maximum_viewport_width' => $default_maximum_viewport_width,
+            'minimum_viewport_width' => $minimum_viewport_width,
+            'maximum_viewport_width' => $maximum_viewport_width,
             'minimum_font_size'      => $minimum_font_size_raw,
             'maximum_font_size'      => $maximum_font_size_raw,

trunk/tests/phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/theme.json

@@ -8 +8 @@
         "typography": {
             "fluid": {
-                "minFontSize": "16px"
+                "minFontSize": "16px",
+                "maxViewportWidth": "1200px",
+                "minViewportWidth": "640px"
             }
         }

trunk/tests/phpunit/tests/block-supports/typography.php

@@ -623 +623 @@
      * @ticket 58522
      * @ticket 58523
+     * @ticket 59048
      *
      * @covers ::wp_register_typography_support
@@ -693 +694 @@
                 'font_size_value' => '17px',
                 'theme_slug'      => 'block-theme-child-with-fluid-typography-config',
-                'expected_output' => 'font-size:clamp(16px, 1rem + ((1vw - 3.2px) * 0.147), 17px);',
+                'expected_output' => 'font-size:clamp(16px, 1rem + ((1vw - 6.4px) * 0.179), 17px);',
             ),
             'returns value when font size <= custom min font size bound' => array(