Wordpress Ver 6.2 custom font size in editor not working properly

[uniquesolution]

Description

custom font size in block editor not working properly in Wordpress ver. 6.2

How it should work => when we choose custom font size in block editor blocks sidebar settings, instead of choosing dropdown values we provided in json. It works like getting that exact font size, that we have provided in the setting.

How it is working => Currently if we choose a font size in custom font size box, that match with font size of any default drop down font size, its not overriding it and behaving like we have chosen the default font size. It should override Whatever we have provided in json. specially if we have made font sizes fluid in json, that causing big problem to keep any places fix font size for some special text.

see a demo page with issue here https://mall-world-rali.instawp.xyz/sample-page/

Step-by-step reproduction instructions

1. I modified default wordpress Twenty Twenty-Three theme json file to provide my own default font sized for block editor, here is the related code "fontSizes": [ { "fluid": false, "name": "Tiny", "size": "13px", "slug": "tiny" }, { "fluid": false, "name": "Extra Small", "size": "14px", "slug": "extra-small" }, { "fluid": false, "name": "Small", "size": "15px", "slug": "small" }, { "fluid": false, "name": "Normal", "size": "16px", "slug": "normal" }, { "fluid": false, "name": "Medium", "size": "17px", "slug": "medium" }, { "fluid": false, "name": "Medium", "size": "18px", "slug": "medium" }, { "fluid": { "max": "20px", "min": "19px" }, "name": "Large", "size": "19px", "slug": "large" }, { "fluid": { "max": "21px", "min": "17px" }, "name": "Huge", "size": "17px", "slug": "huge" }, { "fluid": { "max": "23px", "min": "20px" }, "name": "Extra Huge", "size": "20px", "slug": "extra-huge" }, { "fluid": { "max": "24px", "min": "21px" }, "name": "Custom Font 1", "size": "21px", "slug": "custom-font-size-1" }, { "fluid": { "max": "26px", "min": "22px" }, "name": "Custom Font 2", "size": "22px", "slug": "custom-font-size-2" }, { "fluid": { "max": "30px", "min": "25px" }, "name": "Custom Font 3", "size": "25px", "slug": "custom-font-size-3" }, { "fluid": { "max": "36px", "min": "27px" }, "name": "Custom Font 4", "size": "27px", "slug": "custom-font-size-4" } ]
2. Now go to any page in backend and create a group and change its font setting to custom (for example look at my attached image, I have provided 27px as custom font size)
3. Now look at my json code, it has a font name Custom Font 4, which is a fluid font which change from 27px to 36px based on screen size. and its matching with the custom font size I provided.
4. Now if you look at the frontend, you will see that its not following your provided custom font size of 27px, but actually following what Custom Font 4 say it do. I am providing custom font size intentionally to this group , because I don't want to change the font size of that particular div text on any screen size.
5. But its not following, so in that case custom font size is not working as its should work. It should override the default font size setting, but instead its adding automatically the class 'has-custom-font-size-4-font-size' to that group, and not applying our custom font size.
6. Its the same case with every block, either its heading, paragraph or any other block font size.

Screenshots, screen recording, code snippet

No response

Environment info

`

wp-core

version: 6.2

wp-active-theme

name: Twenty Twenty-Three (twentytwentythree)
version: 1.1

wp-server

server_architecture: Linux 5.4.0-122-generic x86_64
httpd_software: Apache/2.4.56 (Ubuntu) mod_fcgid/2.3.9 OpenSSL/1.1.1f
php_version: 8.0.28 64bit

• No plugins installed in site. not even Gutenberg plugin installed.

`

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

[t-hamano]

Thanks for the report.

If I understand correctly, this behavior is a bug. Even though the fluid setting is enabled in theme.json, the custom values should remain fixed.

This problem can also be reproduced in Twenty Twenty Three.

---

Enter a fixed value for font size in any of the blocks that support font size.

Here, a fixed value of 20px is set in the group block, but the value is rewritten in the editor using the clamp() function:

Stored styles remain fixed values.:

However, the front end rewrites the value using the clamp() function:

[t-hamano]

Even though the fluid setting is enabled in theme.json, the custom values should remain fixed.

I may have misunderstood this. From the PRs such as #51516, it appears that it was intended that custom font sizes would be fluid as well.

@ramonjd

Is it intended that the custom font size be fluid if settings.typography.fluid is true in theme.json? 🙏

[ramonjd]

Is it intended that the custom font size be fluid if settings.typography.fluid is true in theme.json? 🙏

Thanks for the ping @t-hamano

This is intentional behaviour and has been so since WordPress 6.1

[t-hamano]

@ramonjd

Thanks for the reply!

@uniquesolution

I would like to close this issue because this is expected behavior. If you have any questions, please feel free to comment.

[uniquesolution]

If its intentional behaviour, then this is not right I think, because in custom font size we can even provide fluid size values. Then why not we keep it as fixed values if needed for some particular size. This causing issue if we want a font somewhere fixed size.

Let understand the complete scenario.
Suppose I have created a fluid font size in json for "Large" as 22px to 30px. Now there comes a banner, where I want fixed font size for both desktop and mobile and that font size comes under the range of Large font size ( let suppose 28px). I am not able to give custom 28px font size to any text manually using custom font size setting. It always take the "Large" Font size automatically if I try to give it a fixed font size. So this is the actual issue and its not acceptable at all. Because its taking our freedom to decide font size for any particular situation.

@ramonjd and @t-hamano , Please check this particular behaviour in case of fluid font size.

[ramonjd]

It always take the "Large" Font size automatically if I try to give it a fixed font size. So this is the actual issue and its not acceptable at all. Because its taking our freedom to decide font size for any particular situation.

Thanks for the response.

I believe the fluid setting in theme.json was considered to be a general flag that all fonts be converted to fluid, where possible.

In that way it gives themes the freedom to opt in to fluid for the entire site, or, opt out and define their own clamp values in for font sizes in theme.json and let everything else be static.

Custom font sizes will only be converted to clamp values where they are px|rem|em.

For context, see:

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

So you could opt out of fluid typography and add your own custom clamp() values in settings.typography.fontSizes.

cc @jasmussen for visibility.

[ramonjd]

Also note that there has been talk of opening up UI controls for fluid type in the editor, so perhaps your concern might be addressed in future iterations.

[uniquesolution]

For now I am using Custom Attributes for blocks plugin, and adding inline style attribute to block to give me custom static font size to override fluid font size