The WordPress Gutenberg editor is a powerful tool for content creation, but its default back-end interface doesn’t always meet every user’s specific needs.
While many WordPress users focus on front-end design, the back-end area — the editor itself — also offers opportunities for customization to streamline workflow and enhance the editing experience.
This article will explore how to customize the text in the Gutenberg editor’s backend by adding custom PHP snippets and CSS modifications that you can apply to any WordPress theme you’re using.
Whether you’re a developer or a WordPress enthusiast, this guide will help you create a tailored editing environment that works for you.
Steps to Customize the Text on the Back-End Area of WordPress Gutenberg Editor
Step 1: Add the Custom Code to the functions.php file
First, you need to add custom code to modify the WordPress block editor (Gutenberg) for better visual alignment between the editor (backend) and the front end of the website.
On your WordPress dashboard, go to Appearance > Theme File Editor. You can find Theme File Editor under the Tools menu if you’re using a block theme.
Once you enter the Theme File Editor page, select the functions.php file. Afterward, paste the PHP snippet below at the end of the function.php file content. Next, update the theme file by clicking the Update File button.
// Add custom CSS to the Gutenberg editor
function custom_gutenberg_editor_styles() {
add_theme_support('editor-styles'); // Enable editor styles
add_editor_style('custom-editor-style.css'); // Enqueue the custom CSS file
}
add_action('after_setup_theme', 'custom_gutenberg_editor_styles');
// Enqueue custom editor styles directly
function enqueue_custom_editor_css() {
wp_enqueue_style(
'custom-editor-styles',
get_template_directory_uri() . '/custom-editor-style.css',
array(),
'1.0'
);
}
add_action('enqueue_block_editor_assets', 'enqueue_custom_editor_css');
Step 2: Add the CSS File in your Theme DIrectory (custom-editor-style.css)
Next, you need to create a CSS file named custom-editor-style.css in your theme directory (e.g., wp-content/themes/your-theme/).
1: Install a File Manager for WordPress
To create a CSS file name in your theme directory, you can use any file manager for WordPress available in the WordPress plugin directory.
Please install and activate it, then start creating a new CSS file named custom-editor-style.css in your theme directory. For this example, we use the Advanced File Manager plugin and our current WordPress theme is Astra so the path will be like this: wp-content/themes/astra/custom-editor-style.css
2: Add the CSS snippet to custom-editor-style.css file
Next, add the custom styles to this file to modify the text on the back-end area of Gutenberg. Copy the CSS snippet below and paste it into the input field.
Here is the CSS snippet you can use:
/* Customize paragraph font size and line height */
.editor-styles-wrapper p {
font-size: 18px !important;
line-height: 1.6 !important;
color: #000000 !important;
font-weight: 400 !important;
}
/* Customize editor post title (H1) */
.editor-post-title__input {
font-family: 'Arial', sans-serif !important;
font-size: 40px !important;
color: #000000 !important;
font-weight: 700 !important;
line-height: 1.6 !important;
}
/* Customize heading blocks (H2, H3, H4, H5) */
.editor-styles-wrapper h2{
font-family: 'Arial', sans-serif !important;
font-size: 36px !important;
color: #000000 !important;
font-weight: 700 !important;
line-height: 1.6 !important;
}
.editor-styles-wrapper h3{
font-family: 'Arial', sans-serif !important;
font-size: 32px !important;
color: #000000 !important;
font-weight: 700 !important;
line-height: 1.6 !important;
}
.editor-styles-wrapper h4{
font-family: 'Arial', sans-serif !important;
font-size: 30px !important;
color: #000000 !important;
font-weight: 700 !important;
line-height: 1.6 !important;
}
.editor-styles-wrapper h5{
font-family: 'Arial', sans-serif !important;
font-size: 28px !important;
color: #000000 !important;
font-weight: 700 !important;
line-height: 1.6 !important;
}
/* Style for unordered lists */
.editor-styles-wrapper ul {
margin-left: 20px;
padding-left: 20px;
list-style-type: disc;
font-size: 18px !important;
line-height: 1.6 !important;
font-family: 'Arial', sans-serif !important;
color: #000000 !important;
font-weight: 400 !important;
}
/* Style for list items */
.editor-styles-wrapper ul li {
margin-bottom: 10px;
font-size: 18px !important;
color: #000000 !important;
font-weight: 400 !important;
}
/* Nested list styles */
.editor-styles-wrapper ul ul {
margin-left: 20px;
list-style-type: circle;
}
/* Additional styles for ordered lists if needed */
.editor-styles-wrapper ol {
margin-left: 20px;
padding-left: 20px;
list-style-type: decimal;
font-size: 18px !important;
line-height: 1.6 !important;
font-family: 'Arial', sans-serif !important;
color: #000000 !important;
font-weight: 400 !important;
}
Once you’ve added the CSS snippet to the custom-editor-style.css file, you can check whether your customizations in the Gutenberg editor’s back-end area are applied successfully.
Go to the WordPress Gutenberg editor by creating a new post type (page or post) or selecting the existing one.
What did the code do?
1: Custom code in the functions.php file
First Function
function custom_gutenberg_editor_styles() {
add_theme_support('editor-styles'); // Enable editor styles
add_editor_style('custom-editor-style.css'); // Enqueue the custom CSS file
}
add_action('after_setup_theme', 'custom_gutenberg_editor_styles');
This function tells WordPress to use a custom CSS file (custom-editor-style.css) in the Gutenberg editor.
Second Function
function enqueue_custom_editor_css() {
wp_enqueue_style(
'custom-editor-styles', // Unique name for the stylesheet.
get_template_directory_uri() . '/custom-editor-style.css', // Path to your CSS file.
array(), // No dependencies.
'1.0' // Version of the CSS file.
);
}
add_action('enqueue_block_editor_assets', 'enqueue_custom_editor_css');
This function directly loads the custom-editor-style.css file into the editor.
Why two functions?
- The first function adds basic theme support for styling the WordPress Gutenberg editor.
- The second function controls how and when the CSS file is loaded.
2: CSS snippet in the custom-editor-style.css file
Customize Paragraph Text (p)
.editor-styles-wrapper p {
font-size: 18px !important;
line-height: 1.6 !important;
color: #000000 !important;
font-weight: 400 !important;
}
What it does:
- Changes the font size of paragraphs to 18px.
- Sets the line height to 1.6 for better readability.
- Applies black text color #000000.
- Uses a normal font-weight (400).
!important: Ensures these styles override any conflicting styles.
Customize Post Title (H1)
.editor-post-title__input {
font-family: 'Arial', sans-serif !important;
font-size: 40px !important;
color: #000000 !important;
font-weight: 700;
line-height: 1.6;
}
What it does:
- Changes the post title font to Arial with a sans-serif fallback.
- Sets a large font size of 40px.
- Ensures the text is bold (font-weight: 700) and uses black color.
- Maintains a consistent line height.
Customize Heading Blocks (H2, H3, H4, H5)
.editor-styles-wrapper h2 {
font-family: 'Arial', sans-serif !important;
font-size: 36px !important;
color: #000000 !important;
font-weight: 700;
line-height: 1.6;
}
Similar styles are applied for H3, H4, and H5 with decreasing font sizes:
- H2: 36px
- H3: 32px
- H4: 30px
- H5: 28px
What It does:
- Standardizes the font family, color, weight, and line height across all heading levels.
- Ensures a clear hierarchy by adjusting font sizes.
Style for Unordered Lists (ul)
.editor-styles-wrapper ul {
margin-left: 20px;
padding-left: 20px;
list-style-type: disc;
font-size: 18px !important;
line-height: 1.6 !important;
font-family: 'Arial', sans-serif !important;
color: #000000 !important;
font-weight: 400 !important;
}
What it does:
- Adds spacing to the left of unordered lists (indentation).
- Ensures list items use the disc bullet style.
- Applies consistent font size, color, and line height to match paragraph text.
Style for List Items (ul li)
.editor-styles-wrapper ul li {
margin-bottom: 10px;
font-size: 18px !important;
color: #000000 !important;
font-weight: 400 !important;
}
What it does:
- Adds spacing between list items for readability (margin-bottom: 10px).
- Ensures text styles match the overall design.
Nested List Styles
.editor-styles-wrapper ul ul {
margin-left: 20px;
list-style-type: circle;
}
What it does:
- Adjusts indentation for nested unordered lists.
- Changes bullet style for nested lists to circle.
Style for Ordered Lists (ol)
.editor-styles-wrapper ol {
margin-left: 20px;
padding-left: 20px;
list-style-type: decimal;
font-size: 18px !important;
line-height: 1.6 !important;
font-family: 'Arial', sans-serif !important;
color: #000000 !important;
font-weight: 400 !important;
}
What it does:
- Adds spacing and uses decimal numbering for ordered lists.
- Ensures ordered lists follow the same typography as paragraphs and unordered lists.
The Bottom Line
This article shows how easily you can customize the text in the back-end area of the WordPress Gutenberg editor. As we mentioned at the beginning of this article, customizing the text in Gutenberg’s back-end area will enhance your editing experience. Enhancing the editing experience in WordPress is crucial because it directly impacts our efficiency, creativity, and satisfaction as content creators.
Implementing the method in this article (add the custom code to the functions.php file and add the CSS file in your theme directory) allows you to customize the text in the back-end area of Gutenberg no matter what WordPress theme you use. This approach ensures that your changes remain consistent across different themes and updates.
Feel free to adjust values in the CSS snippet to achieve the best appearance of your text in the back-end area of Gutenberg. You can modify property values like font size, line height, color, and margins to ensure the content is legible and visually appealing. For instance, changing the font-family to a more readable typeface, or setting a line-height that improves readability, can enhance the editing experience. Additionally, adjusting the padding and margin properties can help space out elements more effectively, preventing the layout from feeling too overcrowded.
