Font sizes at Frontend vs Editor

[JohnPixle]

I remember coming across this one before, and it looks like the font sizes are different in the frontend vs what the user sees in the editor.

You can try it at any page including this one: https://raft.vertisite.cloud/patterns/features/

Here's a magic logic link.

Here at the frontend, let's take the example of the hero heading, which is Huge size and declared as 56pixels. However in the editor, the font sizes are different:

Why / where are these declarations for Huge and normal sizes?

@HardeepAsrani Let me know if you have any insights! Thanks!

[JohnPixle]

@HardeepAsrani Hey, whenever you can take a look into this, I have no idea where these font size styles are added.

[HardeepAsrani]

Hey @JohnPixle, for me it looks same on both end. It's set as default size in the editor which is --huge? We've set it as huge as default for Heading Block: https://github.com/Codeinwp/raft/blob/master/theme.json#L247

And the font sizes are defined here: https://github.com/Codeinwp/raft/blob/master/theme.json#L177-L179

[JohnPixle]

@HardeepAsrani Hey, I insist on this one :)

Here is a screenshot from the editor and the frontend (bottom). Reference Page.

The Huge and Normal Sizes are overriden by this code:

[HardeepAsrani]

Hey @JohnPixle,

It seems the Core defines the variables later than the theme so they're being used when the font size isn't explicitly being defined. And since we use the same slugs as the core, it causes this issue. I tried to see if we can do something to fix it but I couldn't find anything.

I saw the same issue happening on Core themes if we define same names for the variables.

[JohnPixle]

@HardeepAsrani oh, that's too bad, but thanks for looking into it. I assume that if we attempt to change these slugs now, all hell will break loose. I just tried and it did break things, sadly 😭

[JohnPixle]

Looking into the situation, I will add this to the backlog and see if we can do something about it in the near future.

[HardeepAsrani]

Hey @JohnPixle

I spent some time here trying to see what we can do, but sadly, not much. Whatever I did, didn't really work. Also one weird thing is that if you use a website with Raft and Otter, this issue doesn't appear. I am assuming Otter isn't the only plugin, might be an issue only if theme is being used without any block libraries.