Changeset 54497 for trunk/src/wp-includes/block-supports/typography.php

Timestamp:

10/11/2022 06:42:20 PM (2 years ago)

Author:

davidbaumwald

Message:

Editor: Merge latest fluid typography bugfixes for 6.1 Release Candidate 1.

Merges the following:

• ​Gutenberg PR 44761 - Fluid Typography: Fix bug in global styles where fluid clamp() rules were not calculated for custom values
• ​Gutenberg PR 44762 - Fluid Typography: Convert server-side block support values
• ​Gutenberg PR 44764 - Fluid Typography: Convert font size inline style attributes to fluid values
• ​Gutenberg PR 44807 - Fluid Typography: Covert font size number values to pixels
• ​Gutenberg PR 44847 - Fluid Typography: ensure font sizes are strings or integers

Follow-up to [54280].

Props andrewserong, isabel_brison, ramonopoly.
See #56467.

File:

• trunk/src/wp-includes/block-supports/typography.php (modified) (6 diffs)

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

@@ -120 +120 @@
             ? $block_attributes['style']['typography']['fontSize']
             : null;
-        $typography_block_styles['fontSize'] = $preset_font_size ? $preset_font_size : $custom_font_size;
+            $typography_block_styles['fontSize'] = $preset_font_size ? $preset_font_size : wp_get_typography_font_size_value(
+                array(
+                    'size' => $custom_font_size,
+                )
+            );
     }
 
@@ -246 +250 @@
 
 /**
+ * Renders typography styles/content to the block wrapper.
+ *
+ * @since 6.1.0
+ *
+ * @param string $block_content Rendered block content.
+ * @param array  $block         Block object.
+ * @return string Filtered block content.
+ */
+function wp_render_typography_support( $block_content, $block ) {
+    if ( ! isset( $block['attrs']['style']['typography']['fontSize'] ) ) {
+        return $block_content;
+    }
+
+    $custom_font_size = $block['attrs']['style']['typography']['fontSize'];
+    $fluid_font_size  = wp_get_typography_font_size_value( array( 'size' => $custom_font_size ) );
+
+    /*
+     * Checks that $fluid_font_size does not match $custom_font_size,
+     * which means it's been mutated by the fluid font size functions.
+     */
+    if ( ! empty( $fluid_font_size ) && $fluid_font_size !== $custom_font_size ) {
+        // Replaces the first instance of `font-size:$custom_font_size` with `font-size:$fluid_font_size`.
+        return preg_replace( '/font-size\s*:\s*' . preg_quote( $custom_font_size, '/' ) . '\s*;?/', 'font-size:' . esc_attr( $fluid_font_size ) . ';', $block_content, 1 );
+    }
+
+    return $block_content;
+}
+
+/**
  * Checks a string for a unit and value and returns an array
- * consisting of `'value'` and `'unit'`, e.g., [ '42', 'rem' ].
+ * consisting of `'value'` and `'unit'`, e.g. array( '42', 'rem' ).
  *
  * @since 6.1.0
- * @access private
- *
- * @param string $raw_value Raw size value from theme.json.
- * @param array  $options   {
+ *
+ * @param string|int|float $raw_value Raw size value from theme.json.
+ * @param array            $options   {
  *     Optional. An associative array of options. Default is empty array.
  *
  *     @type string   $coerce_to        Coerce the value to rem or px. Default `'rem'`.
  *     @type int      $root_size_value  Value of root font size for rem|em <-> px conversion. Default `16`.
- *     @type string[] $acceptable_units An array of font size units. Default `[ 'rem', 'px', 'em' ]`;
+ *     @type string[] $acceptable_units An array of font size units. Default `array( 'rem', 'px', 'em' )`;
  * }
  * @return array|null An array consisting of `'value'` and `'unit'` properties on success.
@@ -264 +296 @@
  */
 function wp_get_typography_value_and_unit( $raw_value, $options = array() ) {
+    if ( ! is_string( $raw_value ) && ! is_int( $raw_value ) && ! is_float( $raw_value ) ) {
+        _doing_it_wrong(
+            __FUNCTION__,
+            __( 'Raw size value must be a string, integer, or float.' ),
+            '6.1.0'
+        );
+        return null;
+    }
+
     if ( empty( $raw_value ) ) {
         return null;
+    }
+
+    // Converts numbers to pixel values by default.
+    if ( is_numeric( $raw_value ) ) {
+        $raw_value = $raw_value . 'px';
     }
 
@@ -289 +335 @@
     $unit  = $matches[2];
 
-    // Default browser font size. Later, possibly could inject some JS to
-    // compute this `getComputedStyle( document.querySelector( "html" ) ).fontSize`.
+    /*
+     * Default browser font size. Later, possibly could inject some JS to
+     * compute this `getComputedStyle( document.querySelector( "html" ) ).fontSize`.
+     */
     if ( 'px' === $options['coerce_to'] && ( 'em' === $unit || 'rem' === $unit ) ) {
         $value = $value * $options['root_size_value'];
@@ -324 +372 @@
  *     @type int    $scale_factor           A scale factor to determine how fast a font scales within boundaries.
  * }
- * @return string|null A font-size value using clamp() on success. Else, null.
+ * @return string|null A font-size value using clamp() on success, otherwise null.
  */
 function wp_get_computed_fluid_typography_value( $args = array() ) {
@@ -396 +444 @@
  *     Required. fontSizes preset value as seen in theme.json.
  *
- *     @type string $name Name of the font size preset.
- *     @type string $slug Kebab-case unique identifier for the font size preset.
- *     @type string $size CSS font-size value, including units where applicable.
+ *     @type string           $name Name of the font size preset.
+ *     @type string           $slug Kebab-case, unique identifier for the font size preset.
+ *     @type string|int|float $size CSS font-size value, including units if applicable.
  * }
  * @param bool  $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing.
- *                                           Default is `false`.
- * @return string Font-size value.
+ *                                           Default is false.
+ * @return string|null Font-size value or null if a size is not passed in $preset.
  */
 function wp_get_typography_font_size_value( $preset, $should_use_fluid_typography = false ) {
+    if ( ! isset( $preset['size'] ) ) {
+        return null;
+    }
+
+    /*
+     * Catches empty values and 0/'0'.
+     * Fluid calculations cannot be performed on 0.
+     */
+    if ( empty( $preset['size'] ) ) {
+        return $preset['size'];
+    }
+
     // Checks if fluid font sizes are activated.
     $typography_settings         = wp_get_global_settings( array( 'typography' ) );