Categories
Tutorials

Adding fonts to the block editor

As we use more and more blocks on our WordPress websites, it is important that the editor match what we see on the front. In this tutorial, we will be adding fonts to the block editor.

A screenshot of the block editor with custom fonts applied for headings and body text.
Custom fonts have been added for headings and body text (paragraphs).

Heads up, this post is a little bit technical if you are a beginner.

I will include an example of how we can use a customizer font option and use that font in the block editor. You can then expand on this basic idea to make it work with your theme or plugin.

This assumes that:

  • Your theme or plugin has a font option using theme mods.
  • You are already using this font on the front of the website (This guide will not cover how to do both).

How to add custom fonts with inline styles

We will be using:

First, we need to check if our theme or plugin is already using the enqueue_block_editor_assets action.

If not, we need to create a new blank .CSS file that we will enqueue. In the example I have named my .CSS file editor-style.css:

function prefix_block_styles() {
wp_enqueue_style( 'prefix-editor-styles', get_theme_file_uri( 'css/editor-style.css' ) );
}
add_action( 'enqueue_block_editor_assets', 'prefix_block_styles' );

Now, if we only had one font to add, and not a customizer option where the user selects fonts, we could enqueue the font like this:

function prefix_block_styles() {
wp_enqueue_style( 'prefix-editor-font', '//fonts.googleapis.com/css?family=Poppins:400,700&display=swap');
}
add_action( 'enqueue_block_editor_assets', 'prefix_block_styles' );

But we want our users to be able to select from several different font combinations. That means that we also need to add our custom font names to the CSS.

The two problems we need to solve are:

  • Applying our dynamic theme mods to the editor style sheet.
  • Overriding the default font that is used in the editor.

The specificity of the Gutenberg style sheet has improved a lot since the early releases. If you are curious about this process and the discussions around CSS specificity, see https://github.com/WordPress/gutenberg/pull/14407

But we still need to override the following:

.edit-post-visual-editor.editor-styles-wrapper,
.editor-post-title__block .editor-post-title__input

And if we have different font options for body text and headings, we also want to override the headings:

.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6,

Our example code will look like this:

function prefix_block_styles() {
wp_enqueue_style( 'prefix-editor-styles', get_theme_file_uri( 'css/editor-style.css' ) );

$prefix_heading_font = get_theme_mod( 'heading_font', 'Lora' );

$prefix_body_font = get_theme_mod( 'body_font', 
'Roboto' );

wp_enqueue_style( 'prefix-editor-font', '//fonts.googleapis.com/css?family=' . $prefix_heading_font . ':400,700|' . $prefix_body_font . ':400,700&display=swap');

$prefix_custom_css = '
.edit-post-visual-editor.editor-styles-wrapper { font-family:' . 
esc_html( $prefix_body_font ) . ' } 

.editor-post-title__block .editor-post-title__input,
.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6 { font-family:' .
esc_html( $prefix_heading_font ) . ' } 
';

wp_add_inline_style( 'prefix-editor-styles', $prefix_custom_css );
}
add_action( 'enqueue_block_editor_assets', 'prefix_block_styles' );

First we are adding our empty stylesheet. This is only used so that we can apply our custom css inline later.

Then we are assigning our two theme mods (body and title font family) to variables. This is only for ease of use and to make it easier to read the code.

We use the variables to fetch the correct fonts from Google fonts. I also included two font weights, 400 and 700.

Then we add a third variable, $prefix_custom_css, that holds our custom inline CSS.

Finally we attach the CSS to our style sheet using wp_add_inline_style together with the handle for the style sheet.

Remember to update your prefix :).

Final words

You will probably use a more advanced way of fetching the selected fonts. But for the purpose of this tutorial, I have used wp_enqueue_style directly.

It is recommended to also include some system fonts in the CSS as a fallback.

This method for adding fonts to the block editor is fiddly and not super clean. But it works until the global styles are available in WordPress core.

Categories
Beginners Quick guide

Adding custom block styles with PHP

Earlier this year I wrote two articles about how to add custom block styles with JavaScript and CSS files. With the new register_block_style PHP function in WordPress version 5.3, you can achieve the same result by adding custom block styles with PHP, with a lot less code and fever steps.

First, make sure that you have created a child theme. Do not edit the parent theme directly, or you will lose your changes when the theme is updated.

We will be using the same basic gallery block style as in our previous examples.

Open your child themes functions.php file.

To register your block style, copy the following code and add it to the file:

register_block_style(
    'core/gallery',
    array(
        'name'  => 'slug-hide-caption',
        'label' => __( 'Hide caption', 'text-domain' ),
        'inline_style' => '.is-style-slug-hide-caption figcaption { display: none; }',
    )
);

First, we are including the block name: Core/gallery.

Then we are adding three arguments: Name, label, and inline style.

  • Name is the CSS class that will be added to the block to identify it.
  • Label is the name that will be visible in the block’s style selector in the editor.
  • Inline_Style is the CSS code that will be applied to the block.

Remember to change the slug (the prefix), before you save your file.

The style should now be available in the editor:

A gallery block style with hidden captions.

By adding custom block styles with PHP, we can reduce the number of files that we need to include, since register_block_style() already includes the JavaScript and CSS for us.

As the name suggest, the CSS is added inline. Specifically, it is added to the wp-block-library stylesheet.

If you need to dequeue the wp-block-library stylesheet, you need to add the CSS to a different stylesheet that is loaded on the front.

Recommended reading

New Block APIs in WordPress 5.3

Categories
Beginners Quick guide

How to add a new default block style

When you add a new block style, you can also make it the default style in the editor.

Revisiting our gallery block where we hid the captions, we only need to add one new line: isDefault: true.

Our example codes would then look like this:

JavaScript:

wp.blocks.registerBlockStyle('core/gallery', {
	name: 'slug-hide-caption',
	label: wp.i18n.__('Hide captions', 'text-domain'),
        isDefault: true
});

Or, if you added the block style with PHP:

register_block_style(
    'core/gallery',
    array(
        'name'  => 'slug-hide-caption',
        'label' => __( 'Hide caption', 'text-domain' ),
        'inline_style' => '.is-style-slug-hide-caption figcaption { display: none; }',
        'isdefault' => true,
    )
);