Add Styles for Gutenberg Editor
Adding custom styles to Gutenberg blocks is easy and at the same time very useful. All you need to do is to add a snippet in your functions.php or plugin file. Selecting a style to a block simply adds a class that you can style wherever you want!
![](https://wpblockz.com/wp-content/uploads/2020/09/custom_style-edited.png)
Share
Add Styles to Gutenberg editor WordPress.
/**
* Register and enqueue a custom stylesheet in the WordPress admin.
*/
add_action('admin_enqueue_scripts', function () {
$editor_style_uri = get_stylesheet_directory_uri() . '/build/editor.css';
$editor_style_path = get_stylesheet_directory() . '/build/editor.css';
wp_register_style('custom_wp_admin_css', $editor_style_uri, false, filemtime($editor_style_path));
wp_enqueue_style('custom_wp_admin_css');
});
More tutorials
How to use multiple post types in a Query Loop Block
Currently the Query Loop only supports one post type. In this article we will show how we add multiple post types to…
Read more How to use multiple post types in a Query Loop Block
How to add filters and search to the WordPress Query Loop Block
It has been a pain to add filters and search to your feeds in Gutenberg. Not any more, we will teach you…
Read more How to add filters and search to the WordPress Query Loop Block
Learn Gutenberg block building – Create a block that renders an ACF field
With this tutorial, you’ll learn how to create a custom Gutenberg block that displays an ACF field on the front-end of your…
Read more Learn Gutenberg block building – Create a block that renders an ACF field