How To Add Custom Editor Styles to Gutenberg

Standard

Adding Custom Gutenberg editor styles in WordPress is a nice touch to any theme, as it allows authors to get a basic preview of their content before it gets published. It seems like a complicated task, but it’s actually pretty simple, once you get started.

Before

Default Gutenberg Editor Styles

After

Custom Gutenberg Editor Styles

The PHP

It begins with registering and enqueueing a CSS file in your theme.

The CSS

The CSS is a bit trickier because there are so many blocks and elements to cover. Here is an example that I’ve put together for this demo that can be a starting place for you.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s