Skip to content

Commit

Permalink
- add to settings > fluid would be a boolean true to enable the feature.
Browse files Browse the repository at this point in the history 
- remove content settings as fallbacks
- rename fluidSize to fluid in the typography settings for each font.
- unit tests
  • Loading branch information
@ramonjd
ramonjd committed Jul 17, 2022
1 parent 62beef5 commit edeaca7
Show file tree
Hide file tree
Showing 3 changed files with 40 additions and 79 deletions.
45 changes: 10 additions & 35 deletions lib/block-supports/typography.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -356,29 +356,27 @@ function gutenberg_get_computed_fluid_typography_value( $args = array() ) {
* Takes into account fluid typography parameters and attempts to return a css formula depending on available, valid values.
*
* @param array $preset fontSizes preset value as seen in theme.json.
* @param boolean $should_use_fluid_typography An override to switch fluid typography "on".
* @param boolean $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing.
* @return string Font-size value.
*/
function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_typography = false ) {
// Check if fluid font sizes are activated.
$typography_settings = gutenberg_get_global_settings( array( 'typography' ) );
$fluid_settings = isset( $typography_settings['fluid'] ) ? $typography_settings['fluid'] : $should_use_fluid_typography;
$typography_settings = gutenberg_get_global_settings( array( 'typography' ) );
$should_use_fluid_typography = isset( $typography_settings['fluid'] ) && true === $typography_settings['fluid'] ? true : $should_use_fluid_typography;

if ( ! $fluid_settings ) {
if ( ! $should_use_fluid_typography ) {
return $preset['size'];
}

// Defaults.
$default_maximum_viewport_width = '1600px';
$default_minimum_viewport_width = '768px';
$default_minimum_font_size_factor = isset( $fluid_settings['minFontSizeFactor'] ) && is_numeric( $fluid_settings['minFontSizeFactor'] ) ? $fluid_settings['minFontSizeFactor'] : 0.75;
$default_maximum_font_size_factor = isset( $fluid_settings['maxFontSizeFactor'] ) && is_numeric( $fluid_settings['minFontSizeFactor'] ) ? $fluid_settings['maxFontSizeFactor'] : 2;
$default_scale_factor = isset( $fluid_settings['scaleFactor'] ) && is_numeric( $fluid_settings['scaleFactor'] ) ? $fluid_settings['scaleFactor'] : 1;
$maximum_viewport_width_raw = null;
$minimum_viewport_width_raw = null;
$default_minimum_font_size_factor = 0.75;
$default_maximum_font_size_factor = 1.5;
$default_scale_factor = 1;

// Font sizes.
$fluid_font_size_settings = isset( $preset['fluidSize'] ) ? $preset['fluidSize'] : null;
$fluid_font_size_settings = isset( $preset['fluid'] ) ? $preset['fluid'] : null;

// 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;
Expand All @@ -401,33 +399,10 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty
$maximum_font_size_raw = ( $preferred_size['value'] * $default_maximum_font_size_factor ) . $preferred_size['unit'];
}

// Set min and max viewport sizes, if any.
if ( isset( $fluid_settings['maxViewPortWidth'] ) ) {
$maximum_viewport_width_raw = $fluid_settings['maxViewPortWidth'];
}

if ( isset( $fluid_settings['minViewPortWidth'] ) ) {
$minimum_viewport_width_raw = $fluid_settings['minViewPortWidth'];
}

// Apply viewport width fallbacks.
// First from "layout.contentSize" for min width and "layout.wideSize" for max width.
// Then from the hardcoded defaults.
if ( ! $maximum_viewport_width_raw || ! $minimum_viewport_width_raw ) {
$layout_settings = gutenberg_get_global_settings( array( 'layout' ) );
if ( ! $maximum_viewport_width_raw ) {
$maximum_viewport_width_raw = isset( $layout_settings['wideSize'] ) ? $layout_settings['wideSize'] : $default_maximum_viewport_width;
}

if ( ! $minimum_viewport_width_raw ) {
$minimum_viewport_width_raw = isset( $layout_settings['contentSize'] ) ? $layout_settings['contentSize'] : $default_minimum_viewport_width;
}
}

$fluid_font_size_value = gutenberg_get_computed_fluid_typography_value(
array(
'minimum_viewport_width' => $minimum_viewport_width_raw,
'maximum_viewport_width' => $maximum_viewport_width_raw,
'minimum_viewport_width' => $default_maximum_viewport_width,
'maximum_viewport_width' => $default_minimum_viewport_width,
'minimum_font_size' => $minimum_font_size_raw,
'maximum_font_size' => $maximum_font_size_raw,
'scale_factor' => $default_scale_factor,
Expand Down
46 changes: 27 additions & 19 deletions phpunit/block-supports/typography-test.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -226,27 +226,35 @@ function test_gutenberg_get_typography_font_size_value( $font_size_preset, $shou
*/
public function data_generate_font_size_preset_fixtures() {
return array(
'default_return_value' => array(
'default_return_value' => array(
'font_size_preset' => array(
'size' => '28px',
),
'should_use_fluid_typography' => false,
'expected_output' => '28px',
),

'default_return_default_fluid_values_with_empty_fluidSize' => array(
'return_fluid_value' => array(
'font_size_preset' => array(
'size' => '28px',
'fluidSize' => array(),
'size' => '1.75rem',
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 4.207), 56px)',
'expected_output' => 'clamp(1.3125rem, 1.3125rem + ((1vw - 1rem) * -2.524), 2.625rem)',
),

'default_return_size_with_invalid_fluid_units' => array(
'return_default_fluid_values_with_empty_fluidSize' => array(
'font_size_preset' => array(
'size' => '10em',
'fluidSize' => array(
'size' => '28px',
'fluid' => array(),
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(21px, 1.3125rem + ((1vw - 16px) * -2.524), 42px)',
),

'return_size_with_invalid_fluid_units' => array(
'font_size_preset' => array(
'size' => '10em',
'fluid' => array(
'min' => '20vw',
'max' => '50%',
),
Expand All @@ -255,38 +263,38 @@ public function data_generate_font_size_preset_fixtures() {
'expected_output' => '10em',
),

'default_return_fluid_clamp_value' => array(
'return_fluid_clamp_value' => array(
'font_size_preset' => array(
'size' => '28px',
'fluidSize' => array(
'size' => '28px',
'fluid' => array(
'min' => '20px',
'max' => '50rem',
),
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(20px, 1.25rem + ((1vw - 7.68px) * 93.75), 50rem)',
'expected_output' => 'clamp(20px, 1.25rem + ((1vw - 16px) * -93.75), 50rem)',
),

'default_return_clamp_value_with_default_fluid_max_value' => array(
'return_clamp_value_with_default_fluid_max_value' => array(
'font_size_preset' => array(
'size' => '28px',
'fluidSize' => array(
'size' => '28px',
'fluid' => array(
'min' => '2.6rem',
),
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(2.6rem, 2.6rem + ((1vw - 0.48rem) * 1.731), 56px)',
'expected_output' => 'clamp(2.6rem, 2.6rem + ((1vw - 1rem) * -0.048), 42px)',
),

'default_return_clamp_value_with_default_fluid_min_value' => array(
'font_size_preset' => array(
'size' => '28px',
'fluidSize' => array(
'size' => '28px',
'fluid' => array(
'max' => '80px',
),
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 7.091), 80px)',
'expected_output' => 'clamp(21px, 1.3125rem + ((1vw - 16px) * -7.091), 80px)',
),
);
}
Expand Down
28 changes: 3 additions & 25 deletions schemas/json/theme.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -317,30 +317,8 @@
"default": true
},
"fluid": {
"description": "Enables fluid typography and allows users to set global fluid typography parameters.",
"type": "object",
"properties": {
"maxViewPortWidth": {
"description": "Allow users to set custom a max viewport width in px, rem or em, used to set the maximum size boundary of a fluid font.",
"type": "string"
},
"minViewPortWidth": {
"description": "Allow users to set custom a min viewport width in px, rem or em, used to set the minimum size boundary of a fluid font",
"type": "string"
},
"minFontSizeFactor": {
"description": "Used to calculate a minimum font size from a single size value, where `fluidSize.min` is not set.",
"type": "number"
},
"maxFontSizeFactor": {
"description": "Used to calculate a maximum font size from a single size value, where `fluidSize.max` is not set.",
"type": "number"
},
"scaleFactor": {
"description": "Determines the rate of font size change between the minimum and maximum font sizes. The higher the value the faster the change.",
"type": "number"
}
}
"description": "Opts into fluid typography.",
"type": "boolean"
},
"letterSpacing": {
"description": "Allow users to set custom letter spacing.",
Expand Down Expand Up @@ -385,7 +363,7 @@
"description": "CSS font-size value, including units.",
"type": "string"
},
"fluidSize": {
"fluid": {
"type": "object",
"properties": {
"min": {
Expand Down

0 comments on commit edeaca7

Please sign in to comment.