WordPress 7.0 changed editor defaults

Posted 6 days ago

Last weekend, I logged into the WordPress to add some posts to my memory keeper personal project. When the editor came up, I noticed that the button and link colors were a much brighter blue color. At that point, I remembered an email I received earlier in the day notifying me that my WordPress install for had been updated to WordPress 7.0 by my hosting service.

I was not much of a fan of the brighter blue color. I also noticed other changes in the editor. The font was changed to a serif font (it had been sans serif) and the text size was much smaller. I was not happy with these changes either, especially the smaller type size. I was determined to find a way to restore the look of my editor and started searching for solutions.

Jeff Bridgforth

@jeffbridgforth.com

I am not a fan of the admin theme color (brighter blue) and the fonts and font sizes in the WP admin in 7.0. I have got to figure out how to override those with my own styles.

Restoring the color scheme

I was able to change the colors in my admin back choosing a different administration color scheme in my user profile. After comparing a WordPress install that had not yet updated to 7.0 to the changes in my site that had upgraded, I realized that WordPress had updated the default color scheme and renamed the pre-7.0 them to “Fresh.” I was glad to find that was a very simple fix.

Restoring the typography

On a some past projects, I had customized the look of the WordPress editor by adding my own admin stylesheet. That process involves adding a custom function to the functions.php file and creating an admin stylesheet.

function jb_custom_admin_styles() {
    wp_enqueue_style(
        'jb-admin-css',
        get_stylesheet_directory_uri() . '/admin.css',
        array(),
        filemtime( get_stylesheet_directory() . '/admin.css' )
    );
}
add_action( 'admin_enqueue_scripts', 'jb_custom_admin_styles' );

Because my site theme is fairly simple, I just added my CSS file to the root of my theme. After a bit of trial and error, I figured out what I needed to target in order to restore the serif typeface. I also bumped the font size back up to 18px and added 1.5 line-height to make it look nice.

html :where(.editor-styles-wrapper) {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.editor-styles-wrapper {
    font-size: 18px;
    line-height: 1.5;
}

But wait a minute

On Wednesday, I noticed that Chris Coyier had chimed in about the changes to the WordPress editor. I responded to his tweet that the changes had annoyed me and I had added an admin stylesheet to restore those alterations.

In the process of writing this post today to document the changes I made to restore my editor to the colors and typography, I made a discovery after rereading Chris’ article.

He mentions in the article that you could use the theme.json file or change a setting in the editor’s preferences. To do the latter, you have to have the editor open so that means editing an existing post or creating a new post. Click on the three dots, choose “Preferences” at the very bottom of the menu. In the modal window, choose “Appearance” tab and then make sure theme styles is unchecked. By default, theme styles is checked.

I played around this and realized that I did not need my solution of a custom stylesheet in order to restore the typography back to what I was use to. Both of things that annoyed me about the software update could be easily fixed if I knew the right places to go in order to make changes.

It took me awhile to understand this preference but then I came to the conclusion that WordPress had built in typography defaults that you can access by unchecking the “Use theme styles” setting. I think that this setting had been turned on by default (I checked my pre 6.9.4 install and it was turned on).

But I also came to the conclusion by changing my theme to Twenty Twenty-Five that it will only use theme styles defined in a theme.json file. This is part of the new way of building WordPress themes that emerged in the between 2022-2025 as the theme.json functionality continued to expand with subsequent releases of WordPress 6.x.

I have not adopted this new way of theme development and continue to use the legacy way of building themes. I have embraced Gutenburg blocks in the editor and even built my own custom block (see the social media block I used earlier in this post).

In my WordPress 6.9.4 install, unchecking or checking the “Use theme styles” has no difference. But in 7.0, the checked setting goes to a serif font at 12px size. I thought that was a WordPress decision. But I think that something changed in the way this setting affects sites without the theme.json.

What started out as a simple post to document how I restored the WordPress settings I was accustomed to became a larger learning experience as I dived a bit deeper into the problem and formed some theories as to why things changed. This information will be helpful to me as I update a bunch of client websites in the next few days.