An Introduction to Gutenberg Editor – New WordPress Feature (With Demo)

WordPress are making some changes as they introduce one of the biggest updates to the user experience in several years – the Gutenberg editor.

If you’re fairly active within the WordPress community then there’s no doubt you’ve heard about Gutenberg since early 2017. If not then you may have noticed a message about it on the dashboard after updating to WordPress 4.9.8 last week.

Since we’re getting closer to the official release I thought I’d give you an overview of this new feature coming to WordPress…

Overview Of The New Gutenberg WordPress Editor - Visual Mode

Wait! What is Gutenberg?

Gutenberg is the project name given to the new content editor within WordPress.

It will replace the current TinyMCE editor in the WordPress core. This means the Gutenberg editor will be enabled by default soon.

WordPress have rebuilt the content creation experience to “make it easy for anyone to create rich layouts”. This is done using drag-and-drop blocks that allow you to add a number of features to a post or page (just like on Squarespace).

How does Gutenberg work? What are blocks?

Essentially, Gutenberg is a “content builder”. You build your content using blocks.

Gutenberg - Adding Blocks in WordPress

You can insert, rearrange and style content by dropping blocks into your post or page. Those blocks could contain text, images, widgets, videos and almost anything else WordPress can display. There are a number of blocks already available and developers will be able to create their own.

Blocks include:

  • Text blocks – paragraphs, lists, headings, code, quotes, tables
  • Media blocks – image, gallery, audio, video
  • Layout elements – buttons, spacers, separators, page breaks
  • Widget blocks – categories, latest posts, shortcode
  • Embed blocks – YouTube, Soundcloud, Spotify, Twitter and more

Embed blocks makes embedding HTML, content from social media and WordPress shortcodes much easier! I’m pretty excited about reusable blocks which will allow you to reuse shared chunks of content (like for disclaimers or call-to-actions).

When will Gutenberg be available in WordPress?

Gutenberg is scheduled to be included with WordPress 5.0, which is expected to launch around September/October 2018.

Will Gutenberg work with my theme?

Gutenberg is currently available for testing. You might want to hold off using it on a live site until its official launch though since there are bugs.

Unless you go back to edit an older post with Gutenberg installed, your old content will mostly remain the same. You may lose some styling on elements/text depending on your theme.

Check with your theme developer to ensure your theme is Gutenberg compatible, there’s information about this in the WordPress Codex/Handbook. My future WordPress themes will have support for Gutenberg built in. If you have a WordPress theme from me, they are compatible but I’ll be emailing you further details shortly.

You can install the Classic Editor plugin if you would like to switch between the new and old editing options.

Why is WordPress introducing this?

1) Competition – platforms like Squarespace, Medium, Wix and Weebly have been growing over the past years offering a clean writing experience and block-based page builders letting you quickly create sites without needing to know code.

2) Demand – there’s over 1,700 page builder plugins in the WordPress depository. It’s clearly wanted!

There a lot of mixed reviews on Gutenberg plugin. Users believe it should be kept as a separate plugin instead of being included in the core. What are your thoughts on Gutenberg? 

Gutenberg Blocks in WordPress

How do I test Gutenberg and report bugs?

To take it for a test drive before its official release, you can visit our custom demo page here or download the Gutenberg plugin here.

If you do come across any bugs or tech issues you can help out the team and report it.

Try our demo!

And let us know your thoughts below!

Gutenberg Resources

The XOmisse Gutenberg Demo
The Gutenberg Handbook
Gutenberg News
Gutenberg FAQ
Editor Technical Overview
A Collection Of Gutenberg Conversations Resources
Gutenberg Design Principles
What happens to my custom meta fields?
Gutenberg boilerplate

Leave a Reply

Thank you so much for taking the time to comment! Your email will not be published or shared but you will recieve an email if your comment has a reply. Need help with a tutorial? Check out our Coding + Consultation service for one-on-one assistance.

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