Skip to content
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

Jump to bottom

Fluid typography: pass theme.json settings to override merged theme data #58362

Merged
merged 8 commits into from
Mar 4, 2024
Merged

Fluid typography: pass theme.json settings to override merged theme data #58362

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
83634e7
Allow passing a theme json settings object to the gutenberg_get_typog…
ramonjd Jan 29, 2024
44f7b1a
Harmonizing the function signatures of gutenberg_get_typography_font_…
ramonjd Jan 29, 2024
40b16a8
Updated comments
ramonjd Jan 30, 2024
db1c028
Forgot that useSettings won't accept top level paths
ramonjd Feb 20, 2024
9b9efdc
Passing $settings to preset callbacks
ramonjd Feb 20, 2024
d3d7c5c
Linty McLintface
ramonjd Feb 20, 2024
2110531
updating tests, remove hanging isset
ramonjd Feb 20, 2024
73ae2ab
Oh, linter, how thee hast forsaken thy duty to grate thine users less
ramonjd Feb 20, 2024
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
42 changes: 29 additions & 13 deletions lib/block-supports/typography.php
View file
Open in desktop
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() ) {
ramonjd marked this conversation as resolved.
Show resolved Hide resolved
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(
ramonjd marked this conversation as resolved.
Show resolved Hide resolved
'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
View file
Open in desktop
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 );
Copy link
Member Author

@ramonjd ramonjd Feb 23, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure yet, but this might also provide a path towards CSS var resolution for layout values. So,

	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "var(--wp--custom--layout--content-size)",
			"wideSize": "1100px"
		},
		"typography": {
			"fluid": {
				"maxViewportWidth": {
					"ref": "settings.layout.contentSize"
				},
				"minViewportWidth": "600px"
			}
		}
	},

See:

} 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 );
ramonjd marked this conversation as resolved.
Show resolved Hide resolved
}

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