Adding Custom Editor Styles to Gutenberg Editor

Posted on 16th June 2023

The Gutenberg editor is the new default editor for WordPress. It is a block-based editor that allows for more flexibility and customization than the previous editor. One of the great features of the Gutenberg editor is the ability to add custom editor styles. This allows you to style the editor to match the front-end of your website. In this article, we will show you how to add custom editor styles to the Gutenberg editor.

Adding Custom Editor Styles to the Gutenberg Editor

To add custom editor styles to the Gutenberg editor, you need to first create a file called “editor-style.css” in your theme’s directory. You can then add your custom CSS styles to this file.

Once you have added your custom CSS styles to the “editor-style.css” file, you need to enqueue it in your theme’s “functions.php” file. You can do this by adding the following code to your “functions.php” file:

function my_theme_add_editor_styles() {

add_editor_style( ‘editor-style.css’ );

}

add_action( ‘init’, ‘my_theme_add_editor_styles’ );

Now that you have added the “editor-style.css” file to your theme and enqueued it, your custom editor styles will be applied to the Gutenberg editor.

Adding Custom Editor Styles to the Gutenberg Editor

To add custom editor styles to the Gutenberg editor, you need to first create a file called “editor-style.css” in your theme’s directory. You can then add your custom CSS styles to this file.

function my_theme_add_editor_styles() {

add_editor_style( ‘editor-style.css’ );

}

add_action( ‘init’, ‘my_theme_add_editor_styles’ );

Now that you have added the “editor-style.css” file to your theme and enqueued it, your custom editor styles will be applied to the Gutenberg editor.

As we discussed in the previous article, the Gutenberg editor provides a number of ways to style the content you’re editing. But what if you want to go beyond the default styles and create your own custom styles?

In this article, we’ll show you how to add custom editor styles to the Gutenberg editor.

Why Add Custom Editor Styles?

The Gutenberg editor comes with a number of default styles that you can use to style your content. However, these styles may not be enough for some users.

For example, let’s say you’re creating a blog post and you want to add a custom CSS class to a certain paragraph. By default, the Gutenberg editor doesn’t allow you to do this.

However, if you add a custom editor style, you can add your own CSS class to any element in the Gutenberg editor.

Similarly, you may also want to change the default font family or font size in the Gutenberg editor. By default, the Gutenberg editor uses the system font, which may not be what you want.

With custom editor styles, you can change the default font family and font size in the Gutenberg editor. You can also add your own custom fonts to the Gutenberg editor.

Finally, you may also want to change the color scheme in the Gutenberg editor. By default, the Gutenberg editor uses a light color scheme. However, you can change this to a dark color scheme or a custom color scheme with custom editor styles.

How to Add Custom Editor Styles

Adding custom editor styles is a two-step process.

First, you need to create a CSS file with your custom styles. Second, you need to add this CSS file to the Gutenberg editor.

Let’s take a look at each of these steps in detail.

Creating a CSS File

The first step is to create a CSS file with your custom styles. You can do this with any text editor, such as Notepad++ or Sublime Text.

Once you have your text editor open, create a new file and save it with a .css extension. For example, you can name your file custom-editor-styles.css.

Next, you need to add your custom CSS rules to this file. For example, let’s say you want to change the default font family in the Gutenberg editor. You can do this by adding the following CSS rule to your custom-editor-styles.css file:

body {

font-family: “Open Sans”, sans-serif;

}

This CSS rule will change the font family in the Gutenberg editor to “Open Sans”. You can find a list of free fonts that you can use here.

If you want to change the font size in the Gutenberg editor, you can add the following CSS rule to your custom-editor-styles.css file:

body {

font-size: 16px;

}

This CSS rule will change the font size in the Gutenberg editor to 16px.

If you want to change the color scheme in the Gutenberg editor, you can add the following CSS rule to your custom-editor-styles.css file:

body {

background-color: #000000;

color: #ffffff;

}

This CSS rule will change the background color and text color in the Gutenberg editor to black and white, respectively.

You can also add your own custom CSS classes to the Gutenberg editor. For example, let’s say you want to add a custom CSS class to a certain paragraph. You can do this by adding the following CSS rule to your custom-editor-styles.css file:

.my-custom-class {

color: #ff0000;

}

This CSS rule will add a custom CSS class called “my-custom-class” to the Gutenberg editor. You can then add this CSS class to any element in the Gutenberg editor.

Once you’ve added your custom CSS rules to your custom-editor-styles.css file, save the file and close it.

Adding the CSS File to the Gutenberg Editor

The next step is to add your custom-editor-styles.css file to the Gutenberg editor.

To do this, open your WordPress dashboard and go to the “Appearance” -> “Editor” page.

On this page, you’ll see a list of files in the “Theme Files” section. Find your custom-editor-styles.css file in this list and click on it.

This will open your custom-editor-styles.css file in the WordPress editor.

Next, scroll down to the bottom of the page and click on the “Update File” button.

Once you’ve saved your changes, your custom editor styles will be applied to the Gutenberg editor.

Conclusion

The Gutenberg editor provides a number of default styles that you can use to style your content. However, you may want to go beyond the default styles and add your own custom styles.

Adding custom editor styles to the Gutenberg editor is a two-step process. First, you need to create a CSS file with your custom styles. Second, you need to add this CSS file to the Gutenberg editor.

Do you have any questions about how to add custom editor styles to the Gutenberg editor? Let us know in the comments section below!

Previous Post - Smart Home Solutions for Efficient Home Laundry Management

Next Post - How to Build a Testimonial Slider Plugin for WordPress