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
Like this snippet? Follow me on twitter @Vanaf1979 or on Dev.to @Vanaf1979. Or support me to write more in the future by buying me a coffeel,
Comments?
If you want to leave a comment, please do so under the copy of this article on Dev.to so i can get back to you.
Follow me on twitter @Vanaf1979 or Dev.to @Vanaf1979 or subscribe to my newsletter to be notified about new articles, and other WordPress development related resources.
Thanks for reading
