Defining Editor Font Sizes in the Block Editor

The new block editor in WordPress allows themes to define some specific rules for users, specifically colors and font sizes. Defining these gives users specific options for adjusting their output, while staying within parameters set for the site.

Basically, what this means is that a theme author can define a set of custom CSS classes which set a font size. It’s possible to do this by hand, too, using an inline style, but that’s a much less flexible approach. Consider this paragraph markup:

<p class="has-large-font-size">
“Your conjecture is totally wrong, I assure you. My mind was more agreeably engaged. I have been meditating on the very great pleasure which a pair of fine eyes in the face of a pretty woman can bestow.”
</p>Code language: HTML, XML (xml)

Because it uses a CSS class (has-large-font-size), I can change that specific rule in my stylesheet, and wherever that class is used, the new style is applied. Without the class, I might have this:

<p style="font-size:24px">
Miss Bingley immediately fixed her eyes on his face, and desired he would tell her what lady had the credit of inspiring such reflections.
</p>Code language: HTML, XML (xml)

At this point, if I want to change that font size, I have to do it every place I’ve used it. So defining custom font sizes, and having the correct class be automatically applied, is pretty magical.

As I’ve been working with the font size options specifically, I’ve run into some unwritten rules and potential shortcomings, which can be worked around if you know they exist.

You should define a “normal” font size

The first thing to know is that when you select a block which allows you to change the font size, the block editor does not [currently] include a blank, or empty option. As of Gutenberg version 6.7 (the most recent version at the time I’m writing this), if a font size is not set at all for a block, the font size selector will display one of two options: 1) Normal, if a “normal” font size has been defined; or 2) whatever the first defined font size is.

At this point in time, from what I can tell, the block editor defines the default, or fallback font size, as “normal”. If your theme defines a “normal” font size, then you won’t see anything you don’t expect, but if not, you’ll see some unexpected behavior. For example, the Twenty Twenty theme, which is still in development, does not currently define a “normal” font size, so with that theme active, here’s what an unedited paragraph looks like in the editor:

This is confusing, I think, as it suggests that the active block’s font size is Small, when there is actually no font size set for this block at all. Twenty Twenty’s custom defined font sizes are currently Small (first, which is why it’s showing here), Regular, Large, and Larger (here’s where Twenty Twenty defines its font sizes, if you want to look). If a user wants that block’s font size to be Small, they have to select a different size, and then change the selection to Small. This is the case even if a “normal” font size is defined, because the block is initially set to have no font size defined, regardless of what the select input shows.

If you look at the Block Editor Handbook, the default font sizes provided by WordPress do include a Normal size, although the CSS example provided is for a “regular” size, which I believe was the original default in Gutenberg.

This is kind of an opposite situation from the one I described last week with defining custom editor colors. Instead of having a “reserved” size/slug which should not be used, here, we have a slug which should be defined.

PHP defined font sizes must be integers

This one took me a while to figure out. Some theme authors prefer to set up font size rules using units other than pixels, such as ems or rems (I’ve also seen %). Personally, I like to use ems.

This is actually the case with Twenty Twenty as well, if you want to look at the style.css. However, when you define a font size for the block editor to use, the size parameter must be a number, set as an integer, or else you’ll end up with inline styles added to your content instead of classes, because WordPress can only match font sizes with integers (I’ve found this one out the hard way).

So, what if you want to use ems or rems or anything but pixels for your theme’s font sizes? Don’t worry, you can! Because it doesn’t matter.

Custom editor font sizes are defined in two places: in PHP, where the styles are registered for the editor, and in CSS (yours or WordPress’), where the styles are output.

Comparing the Twenty Twenty style.css with the editor sizes defined in the functions.php file told me something important: the PHP definitions for the editor sizes have no relationship to the styles being added to the site. As I’ve tinkered with this, my conclusion is that the numbers in the PHP definition exist solely to allow the block editor to add an inline style to the block for the editor preview (if defined correctly, the correct class will be applied on the front end).

The relationship between the two definitions of font sizes exist primarily in theory.

If your preference is to use something other than pixels for font sizes, my recommendation is to use those in your style.css, and define your editor font sizes using numbers which are converted to pixels.

You can change the font sizes without redefining them, but it’s worth it to do it anyway

If you do not define custom font sizes in your theme, WordPress will provide its own defaults: Small, Normal, Large, and Huge. If you want to use those classes in your theme, you can do so without redefining them using PHP, but if you want font sizes other than what WordPress provides–I mean additional sizes, or just styled differently–then I think it’s worth going ahead and setting up your own font size definitions (mainly because then using get_theme_support will always return useful information).

The key here is that WordPress provides a lot of block styles on its own, including custom rules for the font sizes, and, depending on how your theme sets up its styles, the WordPress rules may override your theme’s. Note that in Twenty Twenty, the default font size rules are made more specific, so that .has-large-font-size becomes .entry-content .has-large-font-size instead (although when the block editor controls elements outside of the main content, this may be an issue).

Genesis themes load their styles quite early, by default, and so the WordPress styles will override theme styles unless they are made more specific. Genesis Sample manages this similarly to Twenty Twenty, but adds uses .site-container .has-large-font-size as the class, so I would consider it a better option.

It’s important to make sure that your theme’s rules override what WordPress provides. Twenty Twenty’s “regular” font size displays at 21px, which is significantly larger than the WordPress size of 16px. If a site switches to Twenty Twenty from a theme which didn’t define font sizes, or used “normal” instead of “regular”, the paragraphs styled with has-normal-font-size will use the WordPress defined size of 16px.

One way to get around this, and keep both your PHP and your CSS font sizes in one place, would be to treat the font sizes as a dynamic element, and generate the CSS classes in your PHP, and add them to your site using wp_add_inline_style. For bonus points, you can add them to the wp-block-library style, which means your font sizes will load after the default WordPress styles, and will take precedence. Here’s an example, assuming you have defined your sizes already:

add_action( 'enqueue_block_assets', 'rgc_editor_font_sizes', 15 );
/**
 * Add custom font sizes to the site using wp_inline_style, attached to the wp-block-library stylesheet.
 * Editor font sizes must be defined in your theme.
 */
function rgc_editor_font_sizes() {
	list( $font_sizes, ) = (array) get_theme_support( 'editor-font-sizes' );
	if ( ! $font_sizes ) {
		return;
	}

	$css = '';
	foreach ( $font_sizes as $size ) {
		$css .= sprintf( '.has-%s-font-size {font-size: %spx;}', $size['slug'], $size['size'] );
	}

	wp_add_inline_style( 'wp-block-library', $css );
}
Code language: PHP (php)

My recommendations for using editor-font-sizes in your theme

Originally, I considered the custom editor font sizes and custom editor colors to be the same kind of feature, but for different elements, but as I’ve been working through this, I’ve decided they’re apples and oranges. I will definitely recommend defining custom editor colors, but I don’t think it’s necessary to do the same with the font sizes, unless you want sizes which are different than the WordPress defaults. The default font sizes provided by WordPress are pretty standard, at least in name.

However, if you don’t define font sizes in PHP, but you do in your CSS, you need to make sure your sizes override the WordPress defaults. So my current recommendations are:

• For the most control over your font sizes, define them in your theme’s PHP.
• If you do define sizes in your theme’s PHP, provide a complete range so that you have something similar to small ranging up to large, because anything you add to your theme will completely replace what’s provided by WordPress.
• Make sure you define a normal font size.
• Make sure the size parameter for each size is an integer, not a string, no matter what you do with your CSS (so use 16 instead of '16', and don’t include units like px, em, or rem).
• If you use em or rem for your CSS, convert those to an approximate pixel value for the PHP (so, 1em might become 16).
• In your style.css, if you are not replacing the WordPress block library styles (which is my personal preference, but I wouldn’t do it in a theme), but you want to override the font size styles, use a general CSS class (even body should do it) to make sure you provide a more specific style than WordPress.
• Alternatively, use wp_add_inline_style and add your editor font sizes to your CSS there, converting to your preferred unit on the fly, and add your new font sizes to the wp-block-library stylesheet.

If you’ve been wondering how to get a theme ready for the block editor, hopefully this helps you somewhat with the editor-font-sizes.

photo credit: Mikael Kristenson