With the Gutenberg Block Editor, WordPress provides a way to build custom layouts into the core software. You no longer need a page builder plugin to create multiple columns, embed media or add a grid of blog posts.
While that represents an improvement over the old Classic Editor, you’ll still need a little help if you want to do anything more than edit colors or font size. Since version 6.0, advanced styling for individual blocks is not readily available in a default installation of WordPress.
There are some pretty simple solutions, though. Today, we’ll introduce you to three ways to enhance your custom layout with the WordPress block editor. They will help you turn something basic into a highly customized setup.
Option #1: Write Custom CSS
If you’re comfortable writing code, you can customize almost every aspect of your block editor layout via CSS. It’s perfect for those who are already building custom WordPress themes and want to test their work with clients.
How you go about the process depends on how widely you want the styles to be applied. In this example, we are looking for a one-time solution. Therefore, the easiest method is to add a custom CSS class to a block.
There is a field in the block editor settings panel for this purpose only:
- Click on the block you want to style;
- Click on the Complex panel in the settings area on the right;
- Add your custom CSS class name to the Additional CSS class(es). Famine;
- Save your work;
Here, we have added the custom class rounded-corners to an image block.
Next, we’ll add that class to our theme’s CSS and define some styles. If your theme uses the WordPress Customizer, code can also be inserted into it Additional CSS panel.
.rounded-corners {
border-radius: 10px;
}Note that you will also want to add this code to your theme editor-style.css file (if it exists) to see your custom styles displayed within the block editor.
Looking at the front end, our image now sports some nicely rounded corners!
Option #2: Set Default Styles via Theme.json
Among the early drawbacks of the block editor was the difficulty of applying consistent styling. You had to focus on some CSS classes that were defined in the core software.
Come the theme.json file to greatly simplify the process. Instead of searching around for all the relevant CSS, you can define block styles directly within a single file. And you have the flexibility to focus on blocks as wide or as narrow as you like.
Layout and design features such as custom color palettes, typography, and spacing can be defined through theme.json. Best of all, this feature is compatible with all WordPress themes.
If you are already using newfangled block theme on your website, you can edit the layout theme.json file within the theme’s root folder (keep a backup of the original – just in case). WordPress provides some documentation with examples to guide you.
For those using classic themes or building from scratch, tools like ThemeGen allow you to a theme.json file. Choose your styles, export the theme.json file and drop it into your theme’s root folder. WordPress will recognize the file and apply the styles. It even writes the CSS for you!
Option #3: Use the Editor Plus Plugin
Looking for a no-code solution and don’t want to deal with it theme.json? The Editor Plus plugin has you covered. It allows advanced styling of block layouts directly from the editor.
Activate the plugin, and the default settings area of the block editor will get a variety of new panels. From there, you can set custom padding, margins, borders, size, and more. If you want visual control over every aspect of your site’s layout, Editor Plus offers a simple solution.
The plugin also adds a handy selection of custom blocks. Features like accordion UIs, icons, and progress bars offer a bit more flexibility in style and content.
However, going this route requires a long-term commitment. Disabling the plugin will cause you to lose any custom styles you’ve created. Therefore, it is worth considering the pros and cons before making a decision.
Take Your WordPress Page Layouts to the Next Level
In some ways, it makes sense to think of the block editor as a starting point. With it, we can create all kinds of custom layouts. But until more configuration options are added to WordPress core, it requires extra effort to fully customize styling.
The three options above provide a path to balance your block layout styles. Whether you’re looking to improve a single element or site-wide features, there’s a way to do it.
All things considered, theme.json it may be the best long-term solution. It’s baked into the core of WordPress, and everything is within a single file. From a maintenance point of view, this is better than the other options.
However, there are many reasons to choose a custom CSS or even a plugin. In the end, it’s all about finding the best fit for your needs and workflow.
The good news is that you don’t have to settle for the default styles of block editors. Use your favorite tool and start building!
