Skip to content

Commit

Permalink
Switching to log base 2
Browse files Browse the repository at this point in the history
  • Loading branch information
@ramonjd
ramonjd committed Apr 18, 2023
1 parent 345233b commit f5630e1
Show file tree
Hide file tree
Showing 6 changed files with 43 additions and 35 deletions.
12 changes: 8 additions & 4 deletions lib/block-supports/typography.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -540,10 +540,14 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty
*/
if ( ! $minimum_font_size_raw ) {
$preferred_font_size_in_px = 'px' === $preferred_size['unit'] ? $preferred_size['value'] : $preferred_size['value'] * 16;
// Logarithmic scale factor: Min font scale that tapers out as the font size increases.
$minimum_font_size_factor = 1 - 0.12 * log( $preferred_font_size_in_px );
// Constrains the minimum font size factor between min and max values.
$minimum_font_size_factor = min( max( $minimum_font_size_factor, $default_minimum_font_size_factor_min ), $default_minimum_font_size_factor_max );

/*
* The scale factor is a multiplier that affects how quickly the curve will move towards the minimum,
* that is, how quickly the size factor reaches 0 given increasing font size values.
* For a - b * log2(), lower values of b will make the curve move towards the minimum faster.
* The scale factor is constrained between min and max values.
*/
$minimum_font_size_factor = min( max( 1 - 0.075 * log( $preferred_font_size_in_px, 2 ), $default_minimum_font_size_factor_min ), $default_minimum_font_size_factor_max );
$calculated_minimum_font_size = round( $preferred_size['value'] * $minimum_font_size_factor, 3 );

// Only use calculated min font size if it's > $minimum_font_size_limit value.
Expand Down
10 changes: 7 additions & 3 deletions packages/block-editor/src/components/font-sizes/fluid-utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,11 +108,15 @@ export function getComputedFluidTypographyValue( {
? fontSizeParsed.value
: fontSizeParsed.value * 16;

// Logarithmic scale factor: Min font scale that tapers out as the font size increases.
// And constrains the minimum font size factor between min and max values.
/*
* The scale factor is a multiplier that affects how quickly the curve will move towards the minimum,
* that is, how quickly the size factor reaches 0 given increasing font size values.
* For a - b * log2(), lower values of b will make the curve move towards the minimum faster.
* The scale factor is constrained between min and max values.
*/
const minimumFontSizeFactor = Math.min(
Math.max(
1 - 0.12 * Math.log( fontSizeValueInPx ),
1 - 0.075 * Math.log2( fontSizeValueInPx ),
DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MIN
),
DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MAX
Expand Down
8 changes: 4 additions & 4 deletions packages/block-editor/src/components/font-sizes/test/fluid-utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
fontSize: '30px',
} );
expect( fluidTypographyValues ).toBe(
'clamp(17.756px, 1.11rem + ((1vw - 3.2px) * 0.957), 30px)'
'clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 0.863), 30px)'
);
} );

Expand All @@ -42,7 +42,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
fontSize: '30px',
} );
expect( fluidTypographyValues ).toBe(
'clamp(17.756px, 1.11rem + ((1vw - 3.2px) * 0.957), 30px)'
'clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 0.863), 30px)'
);
} );

Expand All @@ -53,7 +53,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
maximumViewPortWidth: '1000px',
} );
expect( fluidTypographyValues ).toBe(
'clamp(17.756px, 1.11rem + ((1vw - 5px) * 2.449), 30px)'
'clamp(18.959px, 1.185rem + ((1vw - 5px) * 2.208), 30px)'
);
} );

Expand All @@ -63,7 +63,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
scaleFactor: '2',
} );
expect( fluidTypographyValues ).toBe(
'clamp(17.756px, 1.11rem + ((1vw - 3.2px) * 1.913), 30px)'
'clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 1.725), 30px)'
);
} );

Expand Down
20 changes: 10 additions & 10 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 @@ -89,7 +89,7 @@ describe( 'typography utils', () => {
fluid: true,
},
expected:
'clamp(1.05rem, 1.05rem + ((1vw - 0.2rem) * 0.875), 1.75rem)',
'clamp(1.119rem, 1.119rem + ((1vw - 0.2rem) * 0.789), 1.75rem)',
},

{
Expand All @@ -101,7 +101,7 @@ describe( 'typography utils', () => {
fluid: true,
},
expected:
'clamp(1.05em, 1.05rem + ((1vw - 0.2em) * 0.875), 1.75em)',
'clamp(1.119em, 1.119rem + ((1vw - 0.2em) * 0.789), 1.75em)',
},

{
Expand All @@ -113,7 +113,7 @@ describe( 'typography utils', () => {
fluid: true,
},
expected:
'clamp(34.377px, 2.149rem + ((1vw - 3.2px) * 2.797), 70.175px)',
'clamp(37.897px, 2.369rem + ((1vw - 3.2px) * 2.522), 70.175px)',
},

{
Expand All @@ -127,7 +127,7 @@ describe( 'typography utils', () => {
fluid: true,
},
expected:
'clamp(19.154px, 1.197rem + ((1vw - 3.2px) * 1.082), 33px)',
'clamp(20.515px, 1.282rem + ((1vw - 3.2px) * 0.975), 33px)',
},

{
Expand All @@ -140,7 +140,7 @@ describe( 'typography utils', () => {
fluid: true,
},
expected:
'clamp(34.377px, 2.149rem + ((1vw - 3.2px) * 2.797), 70.175px)',
'clamp(37.897px, 2.369rem + ((1vw - 3.2px) * 2.522), 70.175px)',
},

{
Expand All @@ -154,7 +154,7 @@ describe( 'typography utils', () => {
fluid: true,
},
expected:
'clamp(16.804px, 1.05rem + ((1vw - 3.2px) * 0.875), 28px)',
'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)',
},

{
Expand All @@ -167,7 +167,7 @@ describe( 'typography utils', () => {
fluid: true,
},
expected:
'clamp(16.804px, 1.05rem + ((1vw - 3.2px) * 0.875), 28px)',
'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)',
},

{
Expand Down Expand Up @@ -271,7 +271,7 @@ describe( 'typography utils', () => {
fluid: true,
},
expected:
'clamp(16.804px, 1.05rem + ((1vw - 3.2px) * 4.937), 80px)',
'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 4.851), 80px)',
},

{
Expand Down Expand Up @@ -392,7 +392,7 @@ describe( 'typography utils', () => {
fluid: true,
},
expected:
'clamp(4.429rem, 4.429rem + ((1vw - 0.2rem) * 9.464), 12rem)',
'clamp(5.174rem, 5.174rem + ((1vw - 0.2rem) * 8.533), 12rem)',
},

{
Expand All @@ -405,7 +405,7 @@ describe( 'typography utils', () => {
fluid: true,
},
expected:
'clamp(72.84px, 4.553rem + ((1vw - 3.2px) * 9.934), 200px)',
'clamp(85.342px, 5.334rem + ((1vw - 3.2px) * 8.958), 200px)',
},

{
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/hooks/test/use-typography-props.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ describe( 'getTypographyClassesAndStyles', () => {
style: {
letterSpacing: '22px',
fontSize:
'clamp(1.168rem, 1.168rem + ((1vw - 0.2rem) * 1.04), 2rem)',
'clamp(1.25rem, 1.25rem + ((1vw - 0.2rem) * 0.938), 2rem)',
textTransform: 'uppercase',
},
} );
Expand All @@ -70,7 +70,7 @@ describe( 'getTypographyClassesAndStyles', () => {
style: {
textDecoration: 'underline',
fontSize:
'clamp(1.168rem, 1.168rem + ((1vw - 0.2rem) * 1.04), 2rem)',
'clamp(1.25rem, 1.25rem + ((1vw - 0.2rem) * 0.938), 2rem)',
textTransform: 'uppercase',
},
} );
Expand Down
24 changes: 12 additions & 12 deletions phpunit/block-supports/typography-test.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -379,39 +379,39 @@ public function data_generate_font_size_preset_fixtures() {
'size' => '1.75rem',
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(1.05rem, 1.05rem + ((1vw - 0.2rem) * 0.875), 1.75rem)',
'expected_output' => 'clamp(1.119rem, 1.119rem + ((1vw - 0.2rem) * 0.789), 1.75rem)',
),

'returns clamp value with em min and max units' => array(
'font_size' => array(
'size' => '1.75em',
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(1.05em, 1.05rem + ((1vw - 0.2em) * 0.875), 1.75em)',
'expected_output' => 'clamp(1.119em, 1.119rem + ((1vw - 0.2em) * 0.789), 1.75em)',
),

'returns clamp value for floats' => array(
'font_size' => array(
'size' => '70.175px',
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(34.377px, 2.149rem + ((1vw - 3.2px) * 2.797), 70.175px)',
'expected_output' => 'clamp(37.897px, 2.369rem + ((1vw - 3.2px) * 2.522), 70.175px)',
),

'coerces integer to `px` and returns clamp value' => array(
'font_size' => array(
'size' => 33,
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(19.154px, 1.197rem + ((1vw - 3.2px) * 1.082), 33px)',
'expected_output' => 'clamp(20.515px, 1.282rem + ((1vw - 3.2px) * 0.975), 33px)',
),

'coerces float to `px` and returns clamp value' => array(
'font_size' => array(
'size' => 70.175,
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(34.377px, 2.149rem + ((1vw - 3.2px) * 2.797), 70.175px)',
'expected_output' => 'clamp(37.897px, 2.369rem + ((1vw - 3.2px) * 2.522), 70.175px)',
),

'returns clamp value when `fluid` is empty array' => array(
Expand All @@ -420,7 +420,7 @@ public function data_generate_font_size_preset_fixtures() {
'fluid' => array(),
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(16.804px, 1.05rem + ((1vw - 3.2px) * 0.875), 28px)',
'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)',
),

'returns clamp value when `fluid` is `null`' => array(
Expand All @@ -429,7 +429,7 @@ public function data_generate_font_size_preset_fixtures() {
'fluid' => null,
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(16.804px, 1.05rem + ((1vw - 3.2px) * 0.875), 28px)',
'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)',
),

'returns clamp value if min font size is greater than max' => array(
Expand Down Expand Up @@ -503,7 +503,7 @@ public function data_generate_font_size_preset_fixtures() {
),
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(16.804px, 1.05rem + ((1vw - 3.2px) * 4.937), 80px)',
'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 4.851), 80px)',
),

'should not apply lower bound test when fluid values are set' => array(
Expand Down Expand Up @@ -557,15 +557,15 @@ public function data_generate_font_size_preset_fixtures() {
'size' => '12rem',
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(4.429rem, 4.429rem + ((1vw - 0.2rem) * 9.464), 12rem)',
'expected_output' => 'clamp(5.174rem, 5.174rem + ((1vw - 0.2rem) * 8.533), 12rem)',
),

'should apply scaled min font size for px values when custom min font size is not set' => array(
'font_size' => array(
'size' => '200px',
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(72.84px, 4.553rem + ((1vw - 3.2px) * 9.934), 200px)',
'expected_output' => 'clamp(85.342px, 5.334rem + ((1vw - 3.2px) * 8.958), 200px)',
),

'should not apply scaled min font size for minimum font size when custom min font size is set' => array(
Expand Down Expand Up @@ -718,7 +718,7 @@ public function data_generate_replace_inline_font_styles_with_fluid_values_fixtu
'block_content' => '<h2 class="has-vivid-red-background-color has-background has-link-color" style="margin-top:var(--wp--preset--spacing--60);font-size:4rem;font-style:normal;font-weight:600;letter-spacing:29px;text-decoration:underline;text-transform:capitalize">This is a heading</h2>',
'font_size_value' => '4rem',
'should_use_fluid_typography' => true,
'expected_output' => '<h2 class="has-vivid-red-background-color has-background has-link-color" style="margin-top:var(--wp--preset--spacing--60);font-size:clamp(2.004rem, 2.004rem + ((1vw - 0.2rem) * 2.495), 4rem);font-style:normal;font-weight:600;letter-spacing:29px;text-decoration:underline;text-transform:capitalize">This is a heading</h2>',
'expected_output' => '<h2 class="has-vivid-red-background-color has-background has-link-color" style="margin-top:var(--wp--preset--spacing--60);font-size:clamp(2.2rem, 2.2rem + ((1vw - 0.2rem) * 2.25), 4rem);font-style:normal;font-weight:600;letter-spacing:29px;text-decoration:underline;text-transform:capitalize">This is a heading</h2>',
),
'return_content_if_no_inline_font_size_found' => array(
'block_content' => '<p class="has-medium-font-size" style="font-style:normal;font-weight:600;letter-spacing:29px;">A paragraph inside a group</p>',
Expand All @@ -742,7 +742,7 @@ public function data_generate_replace_inline_font_styles_with_fluid_values_fixtu
'block_content' => "<div class=\"wp-block-group\" style=\"font-size:1.5em\"> \n \n<p style=\"font-size:1.5em\">A paragraph inside a group</p></div>",
'font_size_value' => '1.5em',
'should_use_fluid_typography' => true,
'expected_output' => "<div class=\"wp-block-group\" style=\"font-size:clamp(0.928em, 0.928rem + ((1vw - 0.2em) * 0.715), 1.5em);\"> \n \n<p style=\"font-size:1.5em\">A paragraph inside a group</p></div>",
'expected_output' => "<div class=\"wp-block-group\" style=\"font-size:clamp(0.984em, 0.984rem + ((1vw - 0.2em) * 0.645), 1.5em);\"> \n \n<p style=\"font-size:1.5em\">A paragraph inside a group</p></div>",
),
);
}
Expand Down

0 comments on commit f5630e1

Please sign in to comment.