One of the biggest benefits of WordPress is the extensibility it provides. As the Core team continues development of the Gutenberg block editor, we are proactively following along as well.
As part of the Gutenberg content series on the StudioPress blog, last week we showed how to add a color palette to a custom Genesis theme. In this second installment of the series, we are going to show you how you can provide custom font sizes to Gutenberg editor blocks.
Block Font Sizes
According to the Gutenberg Handbook, blocks may allow the user to configure the Font Sizes they use, e.g., the paragraph block.
Gutenberg provides a default set of font sizes, but a theme can overwrite it and provide its own. Here is a screenshot that shows the Gutenberg editor with default settings:
Below is the code that is used to add custom font sizes to the Gutenberg editor. This can be used to customize the Genesis Sample theme:
Once this code has been added, you will notice that the editor outputs the custom font sizes that have been specified. See the screenshot below:
One thing to note is that themes are responsible for styling sections of text where custom font sizes are being applied.
By default the paragraphs are given a class that is appended with has-, followed by the font size name and ending with -font-size.
For example, here’s the CSS that would be used to style text using the XL (larger) option applied:
Genesis and Block Options
We have exciting news! The newly expanded Genesis engineering team is currently working on the integration of Gutenberg block style functions directly into Genesis.
The idea is for Genesis to do the heavy lifting of code, while we supplying a config system in the child themes to handle the data. While the instructions in this post are a manual way of adding color pallets to Gutenberg blocks, we’ll be releasing features in Genesis that make this much easier.
This would allow us to ship themes with pre-configured options that are easy to customize and extend further, while allowing you to control block options in your own custom child themes!
Additional Resources
Below is a list of resources that will help you understand building and styling themes with better integration for the Gutenberg editor:
- Gutenberg Theme Support: Block Font Sizes — WordPress.org
- The Complete Anatomy Of The Gutenberg WordPress Editor — Smashing Magazine
- Deploying the new Gutenberg Block Editor on my Personal Blog — Rich Tabor
- The Gutenberg WordPress Editor: 10 Things You Need to Know — iThemes
Note: The Block Font Sizes feature has been added to the Develop branch of the Genesis Sample theme. We invite you to download this version for testing. Feel free to report any bugs you might find in the GitHub repository.