search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.36k stars 4.13k forks source link

Fluid typography: custom font sizes should be converted to fluid font sizes values #44758

Closed ramonjd closed 1 year ago

ramonjd commented 1 year ago

Gutenberg Bugfix PRs

wp/6.1 Gutenberg backport PR

Core Backport PRs

Description

In Gutenberg 13.8 Fluid Typography for font size presets was introduced:

This allows themers to generate fluid font size presets in theme.json, which can then be applied to other elements in theme.json or via the FontSizePicker in the editor.

However for fluid font sizes to be considered a complete feature, when "settings.typography.fluid" is set to true, custom font sizes should also be automatically converted to fluid values.

This applies both to font size values set:

  1. on individual block typography in the site and post editors (block supports)
  2. on global typography styles, including elements, in the site editor (should be fixed by https://github.com/WordPress/gutenberg/pull/44761)
  3. on "styles", including blocks and elements, in theme.json (should also be fixed by https://github.com/WordPress/gutenberg/pull/44761)

At present, with fluid typography enabled, font size values set by the user or otherwise are not fluid, and are applied to the target elements exactly as they are represented in the value fields.

For that reason it should be considered a "Bug".

Implementation

The functions to generate clamp values from static font size values are available since https://github.com/WordPress/gutenberg/pull/39529

The follow high-level tasks probably need addressing:

Step-by-step reproduction instructions

Enable fluid font sizes in your theme.json.

Here is a sample theme.json ```json { "version": 2, "settings": { "appearanceTools": true, "layout": { "contentSize": "840px", "wideSize": "1100px" }, "typography": { "fluid": true, "fontSizes": [ { "size": ".9rem", "fluid": { "min": "0.9rem", "max": "1.1" }, "slug": "small", "name": "Small" }, { "size": "1rem", "fluid": { "min": "1rem", "max": "1.3rem" }, "slug": "medium", "name": "Medium" }, { "size": "1.75rem", "slug": "large", "name": "Large" }, { "size": "2.25rem", "slug": "x-large", "name": "Extra large" }, { "size": "3.5rem", "slug": "huge", "name": "Huge" }, { "size": "4.25rem", "slug": "gigantic", "name": "Gigantic" }, { "size": "5.75rem", "slug": "colossal", "name": "Colossal" } ] } } } ```

In the post or site editor, apply a preset font size to a text element.

Observe that the text reacts in size to changes to the view port, that is, that it is "fluid".

For the same element, apply a custom font size. The element now has the static custom font size value and it is not fluid.

This is true for both the editor and the frontend.

Screenshots, screen recording, code snippet

https://user-images.githubusercontent.com/6458278/194429439-cb59cd14-573d-49b3-ad1f-ab7be80471f3.mp4

Environment info

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

ramonjd commented 1 year ago

@scruffian could you/themes folks spare any time to test the ongoing bugfix PRs for this issue? 🙇

cc/ @priethor

jasmussen commented 1 year ago

Definitely a bug, otherwise the boolean would be unnecessary. Thank you for working on this. 🙏

priethor commented 1 year ago

Definitely a bug, otherwise the boolean would be unnecessary.

💯 This is a bug indeed and a good way to summarize it. Thanks for addressing this!

As a matter of fact, this is a very important bug to fix, considering fluid typography is among the top highlighted features in WP 6.1. The individual PRs are already approved and ready to merge & backport, so I'm flagging them to Editor Tech Leads @michalczaplinski, @ockham, @c4rl0sbr4v0, and Core Tech Leads @getsource, @jeffpaul, @dream-encode, for awareness and last-minute reviews before merging.

andrewserong commented 1 year ago

I've opened up a backport PR in https://github.com/WordPress/wordpress-develop/pull/3431 to cover the PHP parts of the following 3 PRs:

I believe the PHP changes in the block-library directory will be picked up by the backport process for the JS side of things / NPM packages. And the remaining PHP changes appear to be covered in https://github.com/WordPress/wordpress-develop/pull/3428. But it'd be good to double-check just in case I've missed anything!

Update: the backport PR now also includes:

ramonjd commented 1 year ago

I've opened up a backport PR in https://github.com/WordPress/wordpress-develop/pull/3431 to cover the PHP parts of the following 3 PRs:

Thanks @andrewserong I'm testing https://github.com/WordPress/gutenberg/pull/44847 right now. I think we could add those changes as well if it's not going to blow up your day. I'll help as well.

ramonjd commented 1 year ago

Closing this issue now that everything is merged and committed. Thanks everyone 🍺

ramonjd commented 1 year ago

I've added a tracking issue to consolidate all the work on fluid typography so far and to track ongoing enhancements: