Make WordPress Core

Changeset 58950


Ignore:
Timestamp:
08/29/2024 05:20:51 AM (2 months ago)
Author:
ramonopoly
Message:

Fluid typography: allow individual preset overrides

In theme.json, individual font sizes may opt out of fluid typography if it is turned on globally.

This commit ensures that individual font size presets can also opt in to fluid typography if it is not turned on globally.

Props aaronrobertshaw, mmaattiiaass, ramonopoly, wildworks.

Fixes #61932.

Location:
trunk
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/block-supports/typography.php

    r58408 r58950  
    519519 * @since 6.4.0 Added configurable min and max viewport width values to the typography.fluid theme.json schema.
    520520 * @since 6.6.0 Deprecated bool argument $should_use_fluid_typography.
     521 * @since 6.7.0 Font size presets can enable fluid typography individually, even if it’s disabled globally.
    521522 *
    522523 * @param array      $preset   {
     
    539540
    540541    /*
    541      * Catches empty values and 0/'0'.
    542      * Fluid calculations cannot be performed on 0.
    543      */
    544     if ( empty( $preset['size'] ) ) {
     542     * Catches falsy values and 0/'0'. Fluid calculations cannot be performed on `0`.
     543     * Also returns early when a preset font size explicitly disables fluid typography with `false`.
     544     */
     545    $fluid_font_size_settings = $preset['fluid'] ?? null;
     546    if ( false === $fluid_font_size_settings || empty( $preset['size'] ) ) {
    545547        return $preset['size'];
    546548    }
     
    565567    );
    566568
    567     $typography_settings         = isset( $settings['typography'] ) ? $settings['typography'] : array();
    568     $should_use_fluid_typography = ! empty( $typography_settings['fluid'] );
    569 
    570     if ( ! $should_use_fluid_typography ) {
     569    $typography_settings = $settings['typography'] ?? array();
     570
     571    /*
     572     * Return early when fluid typography is disabled in the settings, and there
     573     * are no local settings to enable it for the individual preset.
     574     *
     575     * If this condition isn't met, either the settings or individual preset settings
     576     * have enabled fluid typography.
     577     */
     578    if ( empty( $typography_settings['fluid'] ) && empty( $fluid_font_size_settings ) ) {
    571579        return $preset['size'];
    572580    }
    573581
    574     // $typography_settings['fluid'] can be a bool or an array. Normalize to array.
    575     $fluid_settings  = is_array( $typography_settings['fluid'] ) ? $typography_settings['fluid'] : array();
     582    $fluid_settings  = isset( $typography_settings['fluid'] ) ? $typography_settings['fluid'] : array();
    576583    $layout_settings = isset( $settings['layout'] ) ? $settings['layout'] : array();
    577584
     
    592599    $has_min_font_size       = isset( $fluid_settings['minFontSize'] ) && ! empty( wp_get_typography_value_and_unit( $fluid_settings['minFontSize'] ) );
    593600    $minimum_font_size_limit = $has_min_font_size ? $fluid_settings['minFontSize'] : $default_minimum_font_size_limit;
    594 
    595     // Font sizes.
    596     $fluid_font_size_settings = isset( $preset['fluid'] ) ? $preset['fluid'] : null;
    597 
    598     // A font size has explicitly bypassed fluid calculations.
    599     if ( false === $fluid_font_size_settings ) {
    600         return $preset['size'];
    601     }
    602601
    603602    // Try to grab explicit min and max fluid font sizes.
  • trunk/tests/phpunit/tests/block-supports/typography.php

    r58181 r58950  
    296296     * @ticket 58523
    297297     * @ticket 61118
     298     * @ticket 61932
    298299     *
    299300     * @covers ::wp_get_typography_font_size_value
     
    360361                    'size' => null,
    361362                ),
    362                 'settings'         => null,
     363                'settings'         => array(
     364                    'typography' => array(
     365                        'fluid' => true,
     366                    ),
     367                ),
    363368                'expected_output'  => null,
    364369            ),
     
    430435            'returns already clamped value'              => array(
    431436                'font_size_preset' => array(
    432                     'size'  => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
    433                     'fluid' => false,
     437                    'size' => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
    434438                ),
    435439                'settings'         => array(
     
    443447            'returns value with unsupported unit'        => array(
    444448                'font_size_preset' => array(
    445                     'size'  => '1000%',
    446                     'fluid' => false,
     449                    'size' => '1000%',
    447450                ),
    448451                'settings'         => array(
     
    773776                ),
    774777                'expected_output' => 'clamp(100px, 6.25rem + ((1vw - 3.2px) * 7.813), 200px)',
     778            ),
     779
     780            // Individual preset settings override global settings.
     781            'should convert individual preset size to fluid if fluid is disabled in global settings' => array(
     782                'font_size'       => array(
     783                    'size'  => '17px',
     784                    'fluid' => true,
     785                ),
     786                'settings'        => array(
     787                    'typography' => array(),
     788                ),
     789                'expected_output' => 'clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.234), 17px)',
     790            ),
     791            'should use individual preset settings if fluid is disabled in global settings' => array(
     792                'font_size'       => array(
     793                    'size'  => '17px',
     794                    'fluid' => array(
     795                        'min' => '16px',
     796                        'max' => '26px',
     797                    ),
     798                ),
     799                'settings'        => array(
     800                    'typography' => array(
     801                        'fluid' => false,
     802                    ),
     803                ),
     804                'expected_output' => 'clamp(16px, 1rem + ((1vw - 3.2px) * 0.781), 26px)',
    775805            ),
    776806        );
Note: See TracChangeset for help on using the changeset viewer.