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.
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:
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.
Thanks for reading