Skip to content

Commit

Permalink
Fluid typography: pass theme.json settings to override merged theme d…
Browse files Browse the repository at this point in the history
…ata (#58362)

* Allow passing a theme json settings object to the gutenberg_get_typography_font_size_value function.

This is so that any stylesheets generated by the Theme_JSON class can use that class's theme_json instance.

* Harmonizing the function signatures of gutenberg_get_typography_font_size_value (PHP) and getTypographyFontSizeValue (JS)

Updated doc comment

* Updated comments
Light refactoring
Added extra test to check for empty objects/arrays

* Forgot that useSettings won't accept top level paths

* Passing $settings to preset callbacks
Added test for the above

* Linty McLintface

* updating tests, remove hanging isset

test

* Oh, linter, how thee hast forsaken thy duty to grate thine users less
  • Loading branch information
ramonjd authored Mar 4, 2024
1 parent c143fd1 commit bdeeda2
Show file tree
Hide file tree
Showing 10 changed files with 751 additions and 228 deletions.
42 changes: 29 additions & 13 deletions lib/block-supports/typography.php
Original file line number Diff line number Diff line change
Expand Up @@ -420,6 +420,7 @@ function gutenberg_get_computed_fluid_typography_value( $args = array() ) {
return "clamp($minimum_font_size_raw, $fluid_target_font_size, $maximum_font_size_raw)";
}


/**
* Returns a font-size value based on a given font-size preset.
* Takes into account fluid typography parameters and attempts to return a CSS
Expand All @@ -430,19 +431,21 @@ function gutenberg_get_computed_fluid_typography_value( $args = array() ) {
* @since 6.2.0 Added 'settings.typography.fluid.minFontSize' support.
* @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.
*
* @param array $preset {
* @param array $preset {
* Required. fontSizes preset value as seen in theme.json.
*
* @type string $name Name of the font size preset.
* @type string $slug Kebab-case unique identifier for the font size preset.
* @type string|int|float $size CSS font-size value, including units where applicable.
* }
* @param bool $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing. Default is `false`.
* @param bool|array $settings Optional Theme JSON settings array that overrides any global theme settings.
* Default is `array()`.
*
* @return string|null Font-size value or `null` if a size is not passed in $preset.
*/
function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_typography = false ) {
function gutenberg_get_typography_font_size_value( $preset, $settings = array() ) {
if ( ! isset( $preset['size'] ) ) {
return null;
}
Expand All @@ -455,22 +458,35 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty
return $preset['size'];
}

// Checks if fluid font sizes are activated.
$global_settings = gutenberg_get_global_settings();
$typography_settings = isset( $global_settings['typography'] ) ? $global_settings['typography'] : array();
$layout_settings = isset( $global_settings['layout'] ) ? $global_settings['layout'] : array();
/*
* Backwards compatibility since 6.5.
* As a bool (deprecated since 6.5), $settings acts as an override to switch fluid typography "on" (`true`) or "off" (`false`).
*/
if ( is_bool( $settings ) ) {
_deprecated_argument( __FUNCTION__, '6.6.0', __( '`boolean` type for second argument `$settings` is deprecated. Use `array()` instead.', 'gutenberg' ) );
$settings = array(
'typography' => array(
'fluid' => $settings,
),
);
}

$should_use_fluid_typography
= isset( $typography_settings['fluid'] ) &&
( true === $typography_settings['fluid'] || is_array( $typography_settings['fluid'] ) ) ?
true :
$should_use_fluid_typography;
// Fallback to global settings as default.
$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'] );

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

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

// Defaults.
$default_maximum_viewport_width = '1600px';
Expand Down
7 changes: 5 additions & 2 deletions lib/class-wp-theme-json-gutenberg.php
Original file line number Diff line number Diff line change
Expand Up @@ -1857,6 +1857,7 @@ public static function scope_selector( $scope, $selector ) {
* </code>
*
* @since 5.9.0
* @since 6.6.0 Passing $settings to the callbacks defined in static::PRESETS_METADATA.
*
* @param array $settings Settings to process.
* @param array $preset_metadata One of the PRESETS_METADATA values.
Expand All @@ -1883,7 +1884,7 @@ protected static function get_settings_values_by_slug( $settings, $preset_metada
is_callable( $preset_metadata['value_func'] )
) {
$value_func = $preset_metadata['value_func'];
$value = call_user_func( $value_func, $preset );
$value = call_user_func( $value_func, $preset, $settings );
} else {
// If we don't have a value, then don't add it to the result.
continue;
Expand Down Expand Up @@ -2082,6 +2083,7 @@ protected static function flatten_tree( $tree, $prefix = '', $token = '--' ) {
* @since 5.8.0
* @since 5.9.0 Added the `$settings` and `$properties` parameters.
* @since 6.1.0 Added `$theme_json`, `$selector`, and `$use_root_padding` parameters.
* @since 6.5.0 Passing current theme JSON settings to wp_get_typography_font_size_value().
*
* @param array $styles Styles to process.
* @param array $settings Theme settings.
Expand Down Expand Up @@ -2151,8 +2153,9 @@ protected static function compute_style_properties( $styles, $settings = array()
* whether the incoming value can be converted to a fluid value.
* Values that already have a clamp() function will not pass the test,
* and therefore the original $value will be returned.
* Pass the current theme_json settings to override any global settings.
*/
$value = gutenberg_get_typography_font_size_value( array( 'size' => $value ) );
$value = gutenberg_get_typography_font_size_value( array( 'size' => $value ), $settings );
}

if ( 'aspect-ratio' === $css_property ) {
Expand Down
Loading

0 comments on commit bdeeda2

Please sign in to comment.