Adding Block Styles to Lists in Gutenberg to Match Font Sizes

As much as I love the new Gutenberg Block Editor it is still a work in progress with some nuances that can make editing a bit more difficult than it should be. As simple as it is to define and change basic paragraph font sizes (in the Text Settings area), the font sizes for the list block don’t work in tandem with paragraph sizing. So if you have a list block on a page where you modified the font size of the paragraphs, you will end up with some mixed-matched font sizes.

In this post we will discuss adding some simple list block styles to match the paragraph font sizing offered in the Gutenberg Block Editor. Here is what we’ll cover:

• Registering your block styles so they show when editing the list block
• Creating the styles to match your list styles with the font sizing

Register Your List Block Styles

The first thing we need to do is register the block styles for the list block. Bill Erickson has a great post on setting up block styles that you can read for a more in-depth look at block styles.

First, you need to create a file to enqueue within the block editor. In my theme I use editor.js and enqueue it with the script below:

/**
 * Block editor scripts & styles
 *
 * @since  1.0.0
 *
 */
function wd_admin_gutenstyles() {
     wp_enqueue_script('wd-editor', get_stylesheet_directory_uri() . '/assets/js/editor.js', array( 'wp-blocks', 'wp-dom' ), filemtime( get_stylesheet_directory() . '/assets/js/editor.js' ), true );
}
add_action( 'enqueue_block_editor_assets', 'wd_admin_gutenstyles' );

Then within the editor.js file we’ll register our list block styles:

// Add custom button styles
wp.domReady( () => {

     // Add custom list styles
     wp.blocks.registerBlockStyle( 'core/list', {
          name: 'default',
          label: 'Default',
          isDefault: true,
     });

     wp.blocks.registerBlockStyle( 'core/list', {
          name: 'small-font',
          label: 'Small Font',
     } );

     wp.blocks.registerBlockStyle( 'core/list', {
          name: 'large-font',
          label: 'Large Font',
     } );

     wp.blocks.registerBlockStyle( 'core/list', {
          name: 'larger-font',
          label: 'Larger Font',
     } );

} );

You’ll notice we are registering 4 different list styles. These list styles match the options found in the “Text Settings” tab when editing a paragraph block:

• Default
• Small Font
• Large Font
• Larger Font

This is important to ensure we have a cohesive editing experience throughout the block editor. Take note of the name field, as we’ll be using that in the next step.

Creating Your List Block Styles

Now you need to provide the proper CSS to make your new block styles match the font styles output by the editor. When you create block styles the name field you declare will be the class that is added to the element and it will be prepended by is-style-. So, for example, the “Large Font” class will be is-style-large-font.

So in this example I simply added the corresponding classes to align with the styles that define the font styles in my child theme:

/* ----- Font Sizes for Gutenberg Blocks -------------------- */
.has-small-font-size,
.is-style-small-font {
     font-size: 16px;
}

.has-large-font-size,
.is-style-large-font {
     font-size: 22px;
}

.has-larger-font-size,
.is-style-larger-font {
     font-size: 24px;
}

You can see each is-style-class version coincides with the has-class-size class. The has-class-size is the class that is output on the paragraph font sizes, so as long as you keep that in line with the new block styles you have created, you can use the new list block styles to match your paragraph font sizing.

Note: for your styles to show within the editor AND on the front end of the site you need to add support for an editor stylesheet and create one. Here is a great article from Rich Tabor on doing so. You are welcome to check out my Base Child Theme to see my SASS setup.