What You Need to Know About the Gutenberg WordPress EditorThe Gutenberg WordPress editor has become part of WordPress core. What is the Gutenberg WordPress Editor and what does that mean for you?
Gutenberg WordPress Editor is more than an editor. While the editor is the focus, the project will ultimately impact the entire publishing experience, including customisation (the next focus area).
The Gutenberg WordPress editor is a new page builder that integrates 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.
Gutenberg employs several 'blocks' you can use to customise your content and layout in the editor.
| COMMON BLOCKS | FORMATTING BLOCKS | LAYOUT BLOCKS | WIDGETS |
|---|---|---|---|
| Paragraph | Pull Quote | Separator | Latest Posts |
| Image | Table | More | Categories |
| Gallery | Preformatted | Button | Shortcode |
| Heading | Code | Text Columns | |
| Quote | Custom HTML | ||
| List | Custom Test | ||
| Cover Image | Verse | ||
| Video | |||
| Audio |
Available Embed Types
| Animoto | Meetup.com | SmugMug | |
| YouTube | Cloudup | Mixcloud | Speaker |
| CollegeHumor | Photobucket | TED | |
| Dailymotion | Polldaddy | Tumblr | |
| WordPress | Funny or Die | VideoPress | |
| SoundCloud | Hulu | ReverbNation | Vine |
| Spotify | Imgur | Screencast | WordPress.tv |
| Flickr | Issuu | Scribd | |
| Vimeo | Kickstarter | Slideshare |
Developers will be able to create their blocks for customised 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 an entity that you can manipulate on an individual basis. And because each block is "separate", you can add custom backgrounds for specific blocks. In general, it gives you more flexibility and in-depth control. Before you add some blocks, let's go over a quick run-down of the elements of the main Gutenberg interface.
- Lets you add new blocks.
- Undo/redo button.s
- Gives you access to document settings, covering categories & tags, featured images, etc. This is similar to the current sidebar in the WordPress editor.
- When you have an individual block selected, this gives you access to settings that are specific to that block.
- Lets you access a live preview of your post or publish/update your post.
- Once you add some blocks, this is where you'll work with your post's content.
To add a new block, you only need to click the +Plus icon and select the type of content you want to add. You can paste text to the page, and Gutenberg will convert it into paragraph blocks. You can rearrange them or insert new blocks between the paragraphs, such as images or videos.
You get a live edit view of the page content, which makes this a fantastic "what you see is what you get" (WYSIWYG) editor.
When you are finished, click publish as you normally would, and that post will be shown on the front end.
It's painless and intuitive once you pick up how things work with the Gutenberg WordPress editor.
At first, you might experience growing pains and struggle to perform basic actions you've taken for granted.
Things to Bear In Mind with Gutenberg WordPress Editor
Although the Gutenberg WordPress Editor is relatively 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, 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 block. You can get around this by adding columns, having a paragraph in one column and an image embedded in the other.
Currently, the Gutenberg WordPress Editor spits out a ton of inline stylesheets to 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, it will also need upgrading.
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.
