Many faces of the WordPress block editor

When updating your WordPress to 5.0, you got a brand new post and page editor called WordPress Block editor. 

Since writing my first post about the new WordPress block editor, I have had a couple of “my content in block editor looks different from your screenshots” and “I don’t see that option in my editor” questions.

Maybe you too have noticed that your content created in the new block editor looks different from the ones you’ve seen on the internet. Or maybe you have a bunch of WordPress websites and the content written in the block editor looks different in each of them.

Because of all this, I decided to whip up a quick little post to tell you that it’s completely normal if your content looks a bit different from theme to theme.

It should look that way! Here’s why:

How Block Editor handles content

The new WordPress block editor (also known as Gutenberg) is designed as a replacement for the post and page editing screens. When before WordPress 5.0 we had the Classic Editor with its regular content box that served as a text field for typing in your page and post content, the new block editor strives to create a seamless writing experience where you just create content and it shows up styled in a pleasing and sensible way. 

WordPress classic editor vs WordPress block editor.

The new editor allows WordPress theme designers to make the back-end (everything you see when writing content for your posts and pages) to look and feel almost like the front-end (the actual website).

That is the reason why your block editor can display your content different from theme to theme!

Themes that support the new WordPress block editor will make your back-end look and feel almost like your front-end.

Themes that do not or only partially support the new editor, won’t have that front-end feel when creating content.

Examples of different block editor appearances 

Since WordPress5.0 came out, every serious theme designer and developer needs to update their WordPress themes to support the new block editor. It is a lot of work and not everyone is willing to do it right away. Because of this, you, a WordPress theme user, have a real change to see how “good” your theme is. Based on the way your block editor displays content, you can distinguish WordPress themes that have block editor compatibility from the ones that don’t.

As mentioned before, themes that support WordPress block editor properly will style your content in a way that represents the theme you’re using. This style change can actually make content creation easier since you see how it’s going to look while you’re still creating the content.

Below are a couple of examples showing how the same content can look with different, free themes from the WordPress repository. All of them support the new block editor and offer built-in styling for each block. That is why they look somewhat different.

As you can see, the main things that can change from theme to theme are typography, content with, weather or not the theme supports extra-wide images and how it styles things like quotes, lists, and media files.

Conclusion

We just entered a new and exciting era in the world of WordPress. Things are bound to change, but they will change incrementally and for good reasons. 

One of the changes is the new content editor that makes your content on the back-end look different, but I do hope that you agree that in this case different is better!

Which WordPress theme are you currently using? How do you feel about the new block editor? Leave a comment below and if you have any questions about the “new WordPress”, Gutenberg or any of the blocks, feel free to ask and I will do my best to help you out! 🙂

5 comments

  1. Thanks for the post.
    How can one go back to the classic editor with downgrading to lower version if WordPress?

  2. Thank you, Tanita! This block editor is driving me crazy, especially since every tutorial online still shows the classic view! 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.