Skip to content

Fluid typography: add configurable settings for minimum font size to theme.json #42489

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ramonjd merged 15 commits into from
Dec 15, 2022
Merged

Fluid typography: add configurable settings for minimum font size to theme.json #42489

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
632e9b7
Reinstating the commit in edeaca7068196f8960453965fe7fa64632d573ef so…
ramonjd Jul 18, 2022
6d14b11
Adding a filter pre-calculations
ramonjd Jul 18, 2022
fdf74f1
$fluid_settings was missing
ramonjd Oct 27, 2022
5f2a77a
Removing filter
ramonjd Oct 27, 2022
a6533d5
Add config slot for minFontSize
ramonjd Nov 1, 2022
dcf083e
Adding config to test theme
ramonjd Nov 1, 2022
d0f1697
Updating args to include `minimumFontSizeLimit`
ramonjd Nov 15, 2022
3b6cd9a
Updating tests and fixing settings logic
ramonjd Nov 15, 2022
4ffc18e
Ensure that a theme's fluid font size settings are used when calculat…
ramonjd Dec 14, 2022
8a3fb8f
Validating incoming viewport widths and min font size against accepte…
ramonjd Dec 14, 2022
7775602
Ensure we check for fluid settings validity in getTypographyClassesAn…
ramonjd Dec 14, 2022
642b3c7
Rolling back configurable values to the global minimum font size only.
ramonjd Dec 14, 2022
dff191d
Remove config assignment from getTypographyClassesAndStyles and updat…
ramonjd Dec 15, 2022
d9531c2
Adding frontend test for unsupported units in min font size config
ramonjd Dec 15, 2022
a998a1b
simplifying condition so that it's readable in screen widths < 100000px
ramonjd Dec 15, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Validating incoming viewport widths and min font size against accepte… 
…d units.
  • Loading branch information
@ramonjd
ramonjd committed Dec 15, 2022
commit 8a3fb8fa4129ea034fca3b34b7002665b36809bf
9 changes: 6 additions & 3 deletions lib/block-supports/typography.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -464,11 +464,14 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty
$fluid_settings = isset( $typography_settings['fluid'] ) && is_array( $typography_settings['fluid'] ) ? $typography_settings['fluid'] : array();

// Defaults.
$default_maximum_viewport_width = isset( $fluid_settings['maxViewPortWidth'] ) ? $fluid_settings['maxViewPortWidth'] : '1600px';
$default_minimum_viewport_width = isset( $fluid_settings['minViewPortWidth'] ) ? $fluid_settings['minViewPortWidth'] : '768px';
$default_maximum_viewport_width = isset( $fluid_settings['maxViewPortWidth'] ) &&
! empty( gutenberg_get_typography_value_and_unit( $fluid_settings['maxViewPortWidth'] ) ) ? $fluid_settings['maxViewPortWidth'] : '1600px';
$default_minimum_viewport_width = isset( $fluid_settings['minViewPortWidth'] ) &&
! empty( gutenberg_get_typography_value_and_unit( $fluid_settings['minViewPortWidth'] ) ) ? $fluid_settings['minViewPortWidth'] : '768px';
$default_minimum_font_size_factor = isset( $fluid_settings['minFontSizeFactor'] ) && is_numeric( $fluid_settings['minFontSizeFactor'] ) ? $fluid_settings['minFontSizeFactor'] : 0.75;
$default_scale_factor = isset( $fluid_settings['scaleFactor'] ) && is_numeric( $fluid_settings['scaleFactor'] ) ? $fluid_settings['scaleFactor'] : 1;
$global_minimum_font_size = isset( $fluid_settings['minFontSize'] ) ? $fluid_settings['minFontSize'] : '14px';
$global_minimum_font_size = isset( $fluid_settings['minFontSize'] ) &&
! empty( gutenberg_get_typography_value_and_unit( $fluid_settings['minFontSize'] ) ) ? $fluid_settings['minFontSize'] : '14px';

// Font sizes.
$fluid_font_size_settings = isset( $preset['fluid'] ) ? $preset['fluid'] : null;
Expand Down
17 changes: 14 additions & 3 deletions packages/block-editor/src/components/font-sizes/fluid-utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,12 +48,23 @@ export function getComputedFluidTypographyValue( {
minimumFontSize,
maximumFontSize,
fontSize,
minimumViewPortWidth = DEFAULT_MINIMUM_VIEWPORT_WIDTH,
maximumViewPortWidth = DEFAULT_MAXIMUM_VIEWPORT_WIDTH,
minimumViewPortWidth,
maximumViewPortWidth,
scaleFactor = DEFAULT_SCALE_FACTOR,
minimumFontSizeFactor = DEFAULT_MINIMUM_FONT_SIZE_FACTOR,
minimumFontSizeLimit = DEFAULT_MINIMUM_FONT_SIZE_LIMIT,
minimumFontSizeLimit,
} ) {
// Defaults.
minimumViewPortWidth = !! getTypographyValueAndUnit( minimumViewPortWidth )
? minimumViewPortWidth
: DEFAULT_MINIMUM_VIEWPORT_WIDTH;
maximumViewPortWidth = !! getTypographyValueAndUnit( maximumViewPortWidth )
? maximumViewPortWidth
: DEFAULT_MAXIMUM_VIEWPORT_WIDTH;
minimumFontSizeLimit = !! getTypographyValueAndUnit( minimumFontSizeLimit )
? minimumFontSizeLimit
: DEFAULT_MINIMUM_FONT_SIZE_LIMIT;

/*
* Calculates missing minimumFontSize and maximumFontSize from
* defaultFontSize if provided.
Expand Down