Fluid typography: allow individual preset overrides #7247

ramonjd · 2024-08-27T01:13:59Z

This PR syncs the following Gutenberg PR:

Fluid typography: allow individual preset overrides gutenberg#64790

What?

This PR allows individual font preset overrides.

So, if fluid typography is disabled or not active but an individual font preset does enable it, calculate the clamp value for that individual preset.

Why?

Individual font sizes may opt out of fluid typography if it is turned on globally.

This PR does the opposite: individual font size presets can opt in to fluid typography if it is not turned on globally.

How?

Check if fluid settings on individual font size presets are present.

Testing Instructions

In a theme's theme.json, enable fluid typography for some individual font size presets by adding "fluid": true to the preset object. See the below example theme.json.
Make sure fluid typography is not enabled globally in the general "settings.typography" settings.
In the editor, apply some of your presets and save.
The presets that have fluid settings should have fluid font sizes in the frontend.
The presets that have no fluid settings should behave as static font sizes.

Note

This only affects the frontend site, not the editor.

Here is some test theme.json

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"typography": {
			"fontSizes": [
				{
					"name": "Big bill",
					"size": "59px",
					"slug": "big-bill"
				},
				{
					"name": "Medium Matt",
					"size": "30px",
					"slug": "med-matt",
					"fluid": true
				},
				{
					"name": "Small Ted",
					"size": "1rem",
					"slug": "small-ted",
					"fluid": {
						"max": "60px",
						"min": "30px"
					}
				}
			]
		}
	}
}

Trac ticket: https://core.trac.wordpress.org/ticket/61932

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

…graphy is disabled or not active but an individual font preset does enable it, calculate the clamp value for that individual preset. Individual font sizes may opt-out of fluid typography if it is turned on globally. This commit does the opposite: individual font size presets can opt-in to fluid typography if it is not turned on globally.

github-actions · 2024-08-27T01:14:18Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props ramonopoly, aaronrobertshaw.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

ramonjd · 2024-08-27T01:22:18Z

tests/phpunit/tests/block-supports/typography.php

@@ -359,7 +360,11 @@ public function data_generate_font_size_preset_fixtures() {
 				'font_size_preset' => array(
 					'size' => null,
 				),
-				'settings'         => null,
+				'settings'         => array(
+					'typography' => array(


Addressing an omission - here the test is checking whether a null value is returned even when fluid typography is enabled.

ramonjd · 2024-08-27T01:22:36Z

tests/phpunit/tests/block-supports/typography.php

@@ -429,8 +434,7 @@ public function data_generate_font_size_preset_fixtures() {
 			),
 			'returns already clamped value'              => array(
 				'font_size_preset' => array(
-					'size'  => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
-					'fluid' => false,
+					'size' => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',


Addressing an omission - here the test is checking whether the clamped value is returned when fluid typography is enabled.

ramonjd · 2024-08-27T01:22:59Z

tests/phpunit/tests/block-supports/typography.php

@@ -442,8 +446,7 @@ public function data_generate_font_size_preset_fixtures() {

 			'returns value with unsupported unit'        => array(
 				'font_size_preset' => array(
-					'size'  => '1000%',
-					'fluid' => false,
+					'size' => '1000%',


As above, addressing an omission - here the test is checking whether the unsupported unit is returned when fluid typography is enabled.

github-actions · 2024-08-27T01:38:44Z

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

The Plugin and Theme Directories cannot be accessed within Playground.
All changes will be lost when closing a tab with a Playground instance.
All changes will be lost when refreshing the page.
A fresh instance is created each time the link below is clicked.
Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

aaronrobertshaw

Thanks for this PR and the extra inline explanations @ramonjd 👍

✅ Code changes align with corresponding Gutenberg PR
✅ Unit test updates look good and pass
✅ Tests as expected

The presets that have fluid settings should have fluid font sizes in the editor and the frontend.

This test step seems to conflict with the note below it that the changes only affect the frontend. I'm assuming it's just a copy pasta from the Gutenberg PR.

On the frontend only, I see the fluid font sizes:

I left a couple of minor nits/questions but all in all this is looking pretty good to me.

aaronrobertshaw · 2024-08-28T04:42:28Z

src/wp-includes/block-supports/typography.php

@@ -518,6 +518,7 @@ function wp_get_computed_fluid_typography_value( $args = array() ) {
 * @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.
+ * @since 6.7.0 Enabled individual block fluid typography settings overrides.


Maybe it's just my lack of context here but this comment isn't very clear to me.

Agree. I'll update.

aaronrobertshaw · 2024-08-28T04:49:33Z

src/wp-includes/block-supports/typography.php

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


The comment here doesn't seem to match the code. Should it still be normalizing to an array or not?

Ach, the comment needs to go. Good catch.

The change to isset here prevents warnings if the fluid property doesn't exist.

No "normalizing" isn't necessary as there are isset checks on all potential properties of $fluid_settings anyway.

ramonjd · 2024-08-28T05:28:54Z

Thanks for testing! I'll update those small things.

I'm assuming it's just a copy pasta from the Gutenberg PR.

You assume correctly 😄 I'll update.

ramonjd · 2024-08-29T05:22:10Z

Committed in r58950 / e2c4f64

ramonjd added 2 commits August 27, 2024 11:21

Ticket annotation

665b3fe

My blod is typ0

b117466

ramonjd commented Aug 27, 2024

View reviewed changes

ramonjd requested review from t-hamano, talldan, kevin940726, andrewserong and aaronrobertshaw August 27, 2024 01:27

WordPress deleted a comment from github-actions bot Aug 27, 2024

github-actions bot mentioned this pull request Aug 27, 2024

PHP backports for WP 6.7 WordPress/gutenberg#63827

Open

aaronrobertshaw approved these changes Aug 28, 2024

View reviewed changes

Update comment language for clarity.

8da1b28

ramonjd added a commit to WordPress/gutenberg that referenced this pull request Aug 28, 2024

Update comments, backport from WordPress/wordpress-develop#7247

b93bc14

ramonjd mentioned this pull request Aug 28, 2024

Typography: backport comment changes only WordPress/gutenberg#64859

Merged

ramonjd closed this Aug 29, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fluid typography: allow individual preset overrides #7247

Fluid typography: allow individual preset overrides #7247

ramonjd commented Aug 27, 2024 •

edited

Loading

github-actions bot commented Aug 27, 2024 •

edited

Loading

ramonjd Aug 27, 2024 •

edited

Loading

ramonjd Aug 27, 2024 •

edited

Loading

ramonjd Aug 27, 2024 •

edited

Loading

github-actions bot commented Aug 27, 2024

aaronrobertshaw left a comment

aaronrobertshaw Aug 28, 2024

ramonjd Aug 28, 2024

aaronrobertshaw Aug 28, 2024

ramonjd Aug 28, 2024

ramonjd commented Aug 28, 2024

ramonjd commented Aug 29, 2024

Fluid typography: allow individual preset overrides #7247

Fluid typography: allow individual preset overrides #7247

Conversation

ramonjd commented Aug 27, 2024 • edited Loading

What?

Why?

How?

Testing Instructions

github-actions bot commented Aug 27, 2024 • edited Loading

ramonjd Aug 27, 2024 • edited Loading

Choose a reason for hiding this comment

ramonjd Aug 27, 2024 • edited Loading

Choose a reason for hiding this comment

ramonjd Aug 27, 2024 • edited Loading

Choose a reason for hiding this comment

github-actions bot commented Aug 27, 2024

Test using WordPress Playground

Some things to be aware of

aaronrobertshaw left a comment

Choose a reason for hiding this comment

aaronrobertshaw Aug 28, 2024

Choose a reason for hiding this comment

ramonjd Aug 28, 2024

Choose a reason for hiding this comment

aaronrobertshaw Aug 28, 2024

Choose a reason for hiding this comment

ramonjd Aug 28, 2024

Choose a reason for hiding this comment

ramonjd commented Aug 28, 2024

ramonjd commented Aug 29, 2024

ramonjd commented Aug 27, 2024 •

edited

Loading

github-actions bot commented Aug 27, 2024 •

edited

Loading

ramonjd Aug 27, 2024 •

edited

Loading

ramonjd Aug 27, 2024 •

edited

Loading

ramonjd Aug 27, 2024 •

edited

Loading