Originally posted on my website on March 11th 2020
How to change the Gutenberg font sizes?
With the code snippet below we add WordPress theme support for editor-font-sizes, and set our own custom font sizes for the Gutenberg editor.
With the code above we add an action to the after_setup_theme hook and register a callback function called set_editor_font_sizes.
Inside the set_editor_font_sizes function we use the add_theme_support function to enable the editor-font-sizes theme support. As the second argument we pass an array containing arrays defining our custom font-sizes.
Each sub-array contains three key/value pairs. namely:
- $name: The name we want to display inside the editor. Note that we use the __() function to make these names translatable.
- $size: The actual font size.
- $slug: A unique slug that we can use in our Css to change the font size.
Using the font sizes in our Css
To actually make the font sizes work inside of our theme we have to add a bit of Css for each font size like shown below:
Disable the custom color selector
The code above still leave our users the ability to use the custom font size inputs to make their own font sizes. So to be save we can also disable this feature with the code below:
With the code above we add another action to the after_setup_theme hook and register a callback function called disable_custom_font_sizes.
Inside the disable_custom_font_sizes function we use the add_theme_support function again but this time we add support for disable_custom_font_sizes. (A bit counter intuitive, but it is what it is.)
This removes the custom font sizes inputs from the editor.
Follow
Found this post helpful? Follow me on twitter @Vanaf1979 or here on Dev.to @Vanaf1979 to be notified about new articles, and other WordPress development related resources.
Thanks for reading
Top comments (5)
I recognized that the defined sizes in the add_theme_support array convert to inline styles (with px values, yuck!) in the editor, which breaks custom responsive font-scaling on mobile & tablet previews. But if I set the parameter "size" to "null" this won't happen and my custom sizes defined in CSS apply as expected.
Is it ok to solve it this way, or could problems arise? I don't get any error messages or anything..
Hi Daniel,
That's a good question. I haven't tried this cuz i wasn't aware of this. Do the font sizes work inside the editor this way? Or are you loading a custom stylesheet into the editor to set the sizes?
If your not getting an error and if it works, i would guess it just works. But i haven't tried it myself, so i'm not totally sure! I would have to test it out to be sure.
Cheers
Stephan
Hoops my bad, it doesn't exactly work as desribed. The has-..-font-size classes were still present in the editor directly after setting their values to "null", but if I then wanted to change the size the classes disappear.. Seems like "size" is required for them to work..
Haha. To bad.
But i was wondering why you can't use the class names to create responsive text sizes?
I can, I have and it works, but the problem is that inline styles in the editor have to be overwritten with !important / inside the .editor-styles-wrapper parent class. So i really have to overwrite my own CSS with !important in a seperate stylesheet!? This feels extremely wrong considering that the styles / classes are already present and are only overwritten by the inline pixel values. Could lead to further problems in the cascade too .. My current solution is to calculate the corresponding pixel values matching my em's in CSS and then set them in editor_font_sizes to avoid unnecessary code, but this breaks mobile previews (I mostly have a smaller root font size on mobile devices).