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!
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
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
What is the theme.json in WordPress Full Site Editing?
Short introduction to the theme.json file that defines a WordPress full site editing theme. Includes useful resources to learn more!
Read more What is the theme.json in WordPress Full Site Editing?
Creating a server side rendered Gutenberg block
Learn how to create your first ‘Hello World’ server side block. Adding dynamic content to your block theme with ease.
