Skip to content

Commit

Permalink
Editor: Merge latest fluid typography bugfixes for 6.1 Release Candid…
Browse files Browse the repository at this point in the history 
…ate 1.

Merges the following:
* [WordPress/gutenberg#44761 Gutenberg PR 44761] - Fluid Typography: Fix bug in global styles where fluid `clamp()` rules were not calculated for custom values
* [WordPress/gutenberg#44762 Gutenberg PR 44762] - Fluid Typography: Convert server-side block support values
* [WordPress/gutenberg#44764 Gutenberg PR 44764] - Fluid Typography: Convert font size inline style attributes to fluid values
* [WordPress/gutenberg#44807 Gutenberg PR 44807] - Fluid Typography: Covert font size number values to pixels
* [WordPress/gutenberg#44847 Gutenberg PR 44847] - Fluid Typography: ensure font sizes are strings or integers

Follow-up to [54280].

Props andrewserong, isabel_brison, ramonopoly.
See #56467.

git-svn-id: https://develop.svn.wordpress.org/trunk@54497 602fd350-edb4-49c9-b593-d223f7449a82
  • Loading branch information
@dream-encode
dream-encode committed Oct 11, 2022
1 parent aa11f4c commit a874e5f
Show file tree
Hide file tree
Showing 5 changed files with 469 additions and 14 deletions.
88 changes: 74 additions & 14 deletions src/wp-includes/block-supports/typography.php
View file
Expand Up @@ -119,7 +119,11 @@ function wp_apply_typography_support( $block_type, $block_attributes ) {
$custom_font_size = isset( $block_attributes['style']['typography']['fontSize'] )
? $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,
)
);
}

if ( $has_font_family_support && ! $should_skip_font_family ) {
Expand Down Expand Up @@ -244,29 +248,71 @@ function wp_typography_get_preset_inline_style_value( $style_value, $css_propert
return sprintf( 'var(--wp--preset--%s--%s);', $css_property, $slug );
}

/**
* 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.
* `null` on failure.
*/
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';
}

$defaults = array(
'coerce_to' => '',
'root_size_value' => 16,
Expand All @@ -288,8 +334,10 @@ function wp_get_typography_value_and_unit( $raw_value, $options = array() ) {
$value = $matches[1];
$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'];
$unit = $options['coerce_to'];
Expand Down Expand Up @@ -323,7 +371,7 @@ function wp_get_typography_value_and_unit( $raw_value, $options = array() ) {
* @type string $minimum_font_size Minimum font size for any clamp() calculation.
* @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() ) {
$maximum_viewport_width_raw = isset( $args['maximum_viewport_width'] ) ? $args['maximum_viewport_width'] : null;
Expand Down Expand Up @@ -395,15 +443,27 @@ function wp_get_computed_fluid_typography_value( $args = array() ) {
* @param array $preset {
* 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' ) );
$should_use_fluid_typography = isset( $typography_settings['fluid'] ) && true === $typography_settings['fluid'] ? true : $should_use_fluid_typography;
Expand Down
12 changes: 12 additions & 0 deletions src/wp-includes/class-wp-theme-json.php
View file
Expand Up @@ -1675,6 +1675,18 @@ protected static function compute_style_properties( $styles, $settings = array()
continue;
}

// Calculates fluid typography rules where available.
if ( 'font-size' === $css_property ) {
/*
* wp_get_typography_font_size_value() will check
* if fluid typography has been activated and also
* whether the incoming value can be converted to a fluid value.
* Values that already have a clamp() function will not pass the test,
* and therefore the original $value will be returned.
*/
$value = wp_get_typography_font_size_value( array( 'size' => $value ) );
}

$declarations[] = array(
'name' => $css_property,
'value' => $value,
Expand Down
3 changes: 3 additions & 0 deletions src/wp-includes/default-filters.php
View file
Expand Up @@ -687,6 +687,9 @@
add_action( 'setup_theme', 'wp_enable_block_templates' );
add_action( 'wp_loaded', '_add_template_loader_filters' );

// Fluid typography.
add_filter( 'render_block', 'wp_render_typography_support', 10, 2 );

// User preferences.
add_action( 'init', 'wp_register_persisted_preferences_meta' );

Expand Down

0 comments on commit a874e5f

Please sign in to comment.