Introduction

When writing an article in the Gutenberg editor of WordPress, I changed the display of h2 and h3 slightly.The article was changed properly, but the display in the Gutenberg editor remained the same and did not reflect the changes I made.

Therefore, we were able to reflect the h2 and h3 styles of the article in the Gutenberg editor as well, and we will explain how to do so.

Edit style.css

The following is the style.css of the Twenty Twenty Five child theme created for display. h3 and h2 are changed.

/* 20250122 Change h3 display Line on left, bold */
h3 {
        border-left:5px solid #707f49;
        padding-top:9px;
        padding-bottom:9px;
        padding-left:9px;
        font-weight:bold;
}
/* 20250122 Change h2 display Bold */
h2 {
        font-weight:bold;
}

• h2 : Bold
• h3 : Leading vertical bar, Bold, and padding adjustment

If you put this information in the style.css of the child theme, the article will be modified properly.

However, the Gutenberg editor did not reflect this.

Edit functions.php

In order for the Gutenberg editor to reflect the CSS content, the following functions and hooks must be added to functions.php.

//20250125 Gutenburg Editor to reflect the contents of the style sheet for display.
function wpdocs_theme_add_editor_styles() {
  add_theme_support('editor-styles');
  add_editor_style('style.css');
}
add_action('after_setup_theme', 'wpdocs_theme_add_editor_styles');

In this case, the same style.css was used for the display and for the Gutenberg editor.

Result

The h2 and h3 now look the same in the Gutenberg editor and in the article view.It’s a small thing, but it was bothering me, so I’m glad I was able to resolve it.

I referred to this article on qiita.