Learning never exhausts the mind
Home >  Web Design > WordPress > Gutenberg WordPress Editor: What You Need to Know

Published 22nd November 2018 by

Very soon, the Gutenberg WordPress editor will become part of the WordPress core. What is the Gutenberg WordPress Editor and what does that mean for you?

Gutenberg is more than an editor. While the editor is the focus right now, the project will ultimately impact the entire publishing experience including customisation (the next focus area).

Gutenberg First Impressions

Gutenberg First Impressions

The Gutenberg WordPress editor is a new page builder that is being designed to integrate with WordPress core. Gutenberg will add content blocks and page builder-like functionality to every up-to-date WordPress website. When in use, it will replace TinyMCE as the default content editor. With Gutenberg, content is added in blocks of various types from the WordPress backend.

The goal of the block editor is to make adding rich content to WordPress simple and enjoyable. Gutenberg is an important step forward for WordPress. Gutenberg enables WordPress to build content layouts, not just write articles. It is one of the many transitions happening in WordPress towards a more simplified user experience.

How to Get Gutenberg

You can add Gutenberg to any WordPress site today as a plugin downloaded from the WordPress plugin directory, although this is beta software. Use with care.

Gutenberg is slated to be released with WordPress 5, however, at the time of writing, there is no official release date.

WordPress Gutenberg

WordPress Gutenberg

Gutenberg employs a number of 'blocks' you can use to customize your content and layout in the editor.

ParagraphPull QuoteSeparatorLatest Posts
HeadingCodeText Columns
QuoteCustom HTML
ListCustom Test
Cover ImageVerse

Available Embed Types

InstagramDailymotionPolldaddy Tumblr
WordPressFunny or DieReddit VideoPress
SoundCloudHuluReverbNation Vine
SpotifyImgur Screencast WordPress.tv
Flickr Issuu Scribd
Vimeo Kickstarter Slideshare

Developers will be able to create their own blocks for customized content.

How to Use Gutenberg WordPress Editor

Gutenberg replaces the single edit field of the current WordPress TinyMCE editor with lots of individual "blocks".

Each block is its own entity that you can manipulate on an individual basis. And because each block is "separate", you can also add things like custom backgrounds just for specific blocks. In general, it gives you more flexibility and in-depth control. Before you start adding some blocks, let's go over a quick run-down of the elements of the main Gutenberg interface.

WordPress Gutenberg Editor Interface

WordPress Gutenberg Editor Interface

  1. Lets you add new blocks.
  2. Undo/redo button.s
  3. Gives you access to document settings, covering things like categories & tags, featured images, etc. This is similar to the current sidebar in the WordPress editor.
  4. When you have an individual block selected, this gives you access to settings that are specific to that block.
  5. Lets you access a live preview of your post or publish/update your post.
  6. Once you add some blocks, this is where you'll actually work with your post's content.

To add a new block, all you need to do is click the +Plus icon and select the type of content you want to add. You can paste in text to the page and Gutenberg will automatically convert it to paragraph blocks. You can rearrange them, or insert new blocks such as images or videos in between the paragraphs.

You get a live edit view of the page content which makes this a cool "what you see is what you get" (WYSIWYG) editor.

When you are finished, simply click publish as you normally would do and that post is then shown in the front end.

Once you pick up the flow of how things work with Gutenberg, it's fairly painless and intuitive.

At first, you might experience some growing pains and struggle to perform basic actions that you've taken for granted.

Things to Bear In Mind with Gutenberg WordPress Editor

Although the Gutenberg WordPress Editor is fairly stable, it is still beta and there are some buggy or unfinished areas.

Currently, shortcodes cannot be executed in text columns or paragraph blocks. If you use shortcodes to link to content or embed, then these will stop working. You may need to find an alternative if shortcodes are not working in Gutenberg.

You can't wrap text around an image. Images have their own block. You can get around this by adding columns, having a paragraph in one column and an image embed in the other.

Currently, the Gutenberg WordPress Editor spits out a ton of inline stylesheet o the front end, which is not great from a styling, responsive or accessibility point of view.

Gutenberg WordPress Editor also only support HTML5 themes. If your current theme does not support HTML5 elements then it will need upgrading as well.

Do you have to use the new block editor? Can you keep the previous WordPress editor?

No, you do not have to use the new block editor and yes, you can keep using the previous WordPress editor. To deactivate the Gutenberg block editor and return your site to the classic editor after upgrading to WordPress 5.0, you can use the official Classic Editor plugin.

Leave a Reply

Fields marked with * are mandatory.

We respect your privacy, and will not make your email public. Hashed email address may be checked against Gravatar service to retrieve avatars. This site uses Akismet to reduce spam. Learn how your comment data is processed.