Skip to content

Commit

Permalink
Fluid typography: allow individual preset overrides (WordPress#64790)
Browse files Browse the repository at this point in the history 
* This commit allows individual font preset overrides. So, if fluid typography is disabled or not active but an individual font preset does enable it, calculate the clamp value for that individual preset.

Co-authored-by: ramonjd <[email protected]>
Co-authored-by: matiasbenedetto <[email protected]>
Co-authored-by: t-hamano <[email protected]>
  • Loading branch information
@ramonjd @t-hamano
4 people authored Aug 27, 2024
1 parent b74aead commit 8bdb64e
Show file tree
Hide file tree
Showing 5 changed files with 112 additions and 32 deletions.
3 changes: 3 additions & 0 deletions backport-changelog/6.7/7247.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
https://github.com/WordPress/wordpress-develop/pull/7247

* https://github.com/WordPress/gutenberg/pull/64790
34 changes: 17 additions & 17 deletions lib/block-supports/typography.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -449,6 +449,7 @@ function gutenberg_get_computed_fluid_typography_value( $args = array() ) {
* @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.
* @since 6.6.0 Deprecated bool argument $should_use_fluid_typography.
* @since 6.7.0 Enabled individual block fluid typography settings overrides.
*
* @param array $preset {
* Required. fontSizes preset value as seen in theme.json.
Expand All @@ -468,10 +469,11 @@ function gutenberg_get_typography_font_size_value( $preset, $settings = array()
}

/*
* Catches empty values and 0/'0'.
* Fluid calculations cannot be performed on 0.
* Catch falsy values and 0/'0'. Fluid calculations cannot be performed on `0`.
* Also return early when a preset font size explicitly disables fluid typography with `false`.
*/
if ( empty( $preset['size'] ) ) {
$fluid_font_size_settings = $preset['fluid'] ?? null;
if ( false === $fluid_font_size_settings || empty( $preset['size'] ) ) {
return $preset['size'];
}

Expand All @@ -489,20 +491,26 @@ function gutenberg_get_typography_font_size_value( $preset, $settings = array()
}

// Fallback to global settings as default.
$global_settings = gutenberg_get_global_settings();
$settings = wp_parse_args(
$global_settings = gutenberg_get_global_settings();
$settings = wp_parse_args(
$settings,
$global_settings
);
$typography_settings = isset( $settings['typography'] ) ? $settings['typography'] : array();
$should_use_fluid_typography = ! empty( $typography_settings['fluid'] );
$typography_settings = $settings['typography'] ?? array();

if ( ! $should_use_fluid_typography ) {
/*
* Return early when fluid typography is disabled in the settings, and there
* are no local settings to enable it for the individual preset.
*
* If this condition isn't met, either the settings or individual preset settings
* have enabled fluid typography.
*/
if ( empty( $typography_settings['fluid'] ) && empty( $fluid_font_size_settings ) ) {
return $preset['size'];
}

// $typography_settings['fluid'] can be a bool or an array. Normalize to array.
$fluid_settings = is_array( $typography_settings['fluid'] ) ? $typography_settings['fluid'] : array();
$fluid_settings = isset( $typography_settings['fluid'] ) ? $typography_settings['fluid'] : array();
$layout_settings = isset( $settings['layout'] ) ? $settings['layout'] : array();

// Defaults.
Expand All @@ -522,14 +530,6 @@ function gutenberg_get_typography_font_size_value( $preset, $settings = array()
$has_min_font_size = isset( $fluid_settings['minFontSize'] ) && ! empty( gutenberg_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.
$fluid_font_size_settings = isset( $preset['fluid'] ) ? $preset['fluid'] : null;

// A font size has explicitly bypassed fluid calculations.
if ( false === $fluid_font_size_settings ) {
return $preset['size'];
}

// Try to grab explicit min and max fluid font sizes.
$minimum_font_size_raw = isset( $fluid_font_size_settings['min'] ) ? $fluid_font_size_settings['min'] : null;
$maximum_font_size_raw = isset( $fluid_font_size_settings['max'] ) ? $fluid_font_size_settings['max'] : null;
Expand Down
46 changes: 41 additions & 5 deletions packages/block-editor/src/components/global-styles/test/typography-utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,9 @@ describe( 'typography utils', () => {
preset: {
size: 0,
},
typographySettings: undefined,
typographySettings: {
fluid: true,
},
expected: 0,
},

Expand All @@ -37,7 +39,9 @@ describe( 'typography utils', () => {
preset: {
size: '0',
},
typographySettings: undefined,
typographySettings: {
fluid: true,
},
expected: '0',
},

Expand All @@ -46,7 +50,9 @@ describe( 'typography utils', () => {
preset: {
size: null,
},
typographySettings: null,
typographySettings: {
fluid: true,
},
expected: null,
},

Expand Down Expand Up @@ -153,7 +159,6 @@ describe( 'typography utils', () => {
message: 'should return already clamped value',
preset: {
size: 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
fluid: false,
},
settings: {
typography: {
Expand All @@ -168,7 +173,6 @@ describe( 'typography utils', () => {
message: 'should return value with unsupported unit',
preset: {
size: '1000%',
fluid: false,
},
settings: {
typography: {
Expand Down Expand Up @@ -677,6 +681,38 @@ describe( 'typography utils', () => {
},
expected: 'clamp(16px, 1rem + ((1vw - 6.4px) * 0.179), 17px)',
},

// Individual preset settings override global settings.
{
message:
'should convert individual preset size to fluid if fluid is disabled in global settings',
preset: {
size: '17px',
fluid: true,
},
settings: {
typography: {},
},
expected:
'clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.234), 17px)',
},
{
message:
'should use individual preset settings if fluid is disabled in global settings',
preset: {
size: '17px',
fluid: {
min: '16px',
max: '26px',
},
},
settings: {
typography: {
fluid: false,
},
},
expected: 'clamp(16px, 1rem + ((1vw - 3.2px) * 0.781), 26px)',
},
].forEach( ( { message, preset, settings, expected } ) => {
it( `${ message }`, () => {
expect( getTypographyFontSizeValue( preset, settings ) ).toBe(
Expand Down
22 changes: 17 additions & 5 deletions packages/block-editor/src/components/global-styles/typography-utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@ import { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights
* Returns a font-size value based on a given font-size preset.
* Takes into account fluid typography parameters and attempts to return a css formula depending on available, valid values.
*
* The Core PHP equivalent is wp_get_typography_font_size_value().
*
* @param {Preset} preset
* @param {Object} settings
* @param {boolean|TypographySettings} settings.typography.fluid Whether fluid typography is enabled, and, optionally, fluid font size options.
Expand All @@ -50,15 +52,25 @@ import { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights
export function getTypographyFontSizeValue( preset, settings ) {
const { size: defaultSize } = preset;

if ( ! isFluidTypographyEnabled( settings?.typography ) ) {
/*
* Catch falsy values and 0/'0'. Fluid calculations cannot be performed on `0`.
* Also return early when a preset font size explicitly disables fluid typography with `false`.
*/
if ( ! defaultSize || '0' === defaultSize || false === preset?.fluid ) {
return defaultSize;
}

/*
* Checks whether a font size has explicitly bypassed fluid calculations.
* Also catches falsy values and 0/'0'.
* Fluid calculations cannot be performed on `0`.
* Return early when fluid typography is disabled in the settings, and there
* are no local settings to enable it for the individual preset.
*
* If this condition isn't met, either the settings or individual preset settings
* have enabled fluid typography.
*/
if ( ! defaultSize || '0' === defaultSize || false === preset?.fluid ) {
if (
! isFluidTypographyEnabled( settings?.typography ) &&
! isFluidTypographyEnabled( preset )
) {
return defaultSize;
}

Expand Down
39 changes: 34 additions & 5 deletions phpunit/block-supports/typography-test.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -351,7 +351,11 @@ public function data_generate_font_size_preset_fixtures() {
'font_size' => array(
'size' => null,
),
'settings' => null,
'settings' => array(
'typography' => array(
'fluid' => true,
),
),
'expected_output' => null,
),

Expand Down Expand Up @@ -425,8 +429,7 @@ public function data_generate_font_size_preset_fixtures() {

'returns already clamped value' => array(
'font_size' => array(
'size' => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
'fluid' => false,
'size' => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
),
'settings' => array(
'typography' => array(
Expand All @@ -438,8 +441,7 @@ public function data_generate_font_size_preset_fixtures() {

'returns value with unsupported unit' => array(
'font_size' => array(
'size' => '1000%',
'fluid' => false,
'size' => '1000%',
),
'settings' => array(
'typography' => array(
Expand Down Expand Up @@ -769,6 +771,33 @@ public function data_generate_font_size_preset_fixtures() {
),
'expected_output' => 'clamp(100px, 6.25rem + ((1vw - 3.2px) * 7.813), 200px)',
),

// Individual preset settings override global settings.
'should convert individual preset size to fluid if fluid is disabled in global settings' => array(
'font_size' => array(
'size' => '17px',
'fluid' => true,
),
'settings' => array(
'typography' => array(),
),
'expected_output' => 'clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.234), 17px)',
),
'should use individual preset settings if fluid is disabled in global settings' => array(
'font_size' => array(
'size' => '17px',
'fluid' => array(
'min' => '16px',
'max' => '26px',
),
),
'settings' => array(
'typography' => array(
'fluid' => false,
),
),
'expected_output' => 'clamp(16px, 1rem + ((1vw - 3.2px) * 0.781), 26px)',
),
);
}

Expand Down

0 comments on commit 8bdb64e

Please sign in to comment.