WordPress Gutenberg Editor: How far it has come & What to Expect in 2018
The WordPress Gutenberg Editor will revolutionize the way users think about creating and editing content. It is assumed to give a strong competition to all the famous page builders. Gutenberg is set to replace TinyMCE. Are you up with it?
WordPress has grown remarkably over the past years. One of the benefits working with WordPress is that it’s updating continuously. Recently, the new WordPress Gutenberg Editor has evolved as the hot topic among the WordPress lovers. You must have heard that the new Gutenberg Editor is now available as a public beta Plugin on WordPress.org plugin directory. The plugin is not ready for production sites. But, it is available for checking compatibility or any other work issues. Here in this post, we try to cover all the related news, development and future of this new WordPress editor. So, Let’s get started.
What is the need for a new WordPress Editor anyway?
WordPress already has a visual editor. So, the question arises, What’s the need of a new editor? The existing visual editor utilizes shortcodes and HTML to make things work in text mode. In visual option, you can format the content through buttons. But it definitely lacks in functionality as compared to modern editors. That is why the WordPress aims to provide a simple and enjoyable way to produce rich content. Gutenberg Editor is a good initiative, especially for those who are just starting with WordPress.
Gutenberg editor is completely a new espouse over the one long input box visual editor. It is divided into individual blocks. Each block can be assigned unique features. So, it’s far easier to manipulate and align each piece of content now. It will provide new advanced technology. The block concept is not new. What’s new is – being part of the core WordPress.
Let’s get acquainted with the all-new WordPress Gutenberg Editor and find out how the blocks work…
Working with WordPress Gutenberg Editor
The first step towards Gutenberg involves installing the Gutenberg Plugin. It will require WordPress 4.8 or above.
Installing Gutenberg Editor
You can download its latest version from WordPress Plugin Repository. You can also find it in WordPress Dashboard under Add Plugins section. It already has 2000+ active installs.
Once you installed it, activate it as shown below:
Sifting through Gutenberg
Once you installed it, you can see the Gutenberg option under your posts. It doesn’t replace the visual editor as it’s in testing phase only. It’s a good thing. As per its latest update, it is also available for pages and custom page types.
You can also navigate through WordPress dashboard. It also shows a Gutenberg option to open up a Demo Menu.
Distraction Free Writing
Once you start, you will see block outline and formatting options. Working with this is quite similar to the visual editor. You will automatically put to block as soon as you start typing. The options will also disappear once you start writing. It gives you a distraction-free environment to write with extra space. It’s awesome on smaller screens !!
Gutenberg editor offers you “Post Settings” to remove the right-hand sidebar. This will probably give you more space.
You can also add new blocks from the Plus button ”+” given at the bottom of the editor. You can add any type of block including Text, Galley, List, Table or Image etc. accordingly, you will get options to customize your new block. For example – Suppose you create an image block. You will get options regarding inserting image, editing the image, resizing options, alignment options etc.
Switching Between the Editors
There is an option to switch between visual editor and Text editor. You can see a drop-down option in the top leftmost corner. You can make choice between visual or text here.
If you selected the Text mode then you can add the new blocks with HTML code. You can see these in beginning and end of a block.
Gutenberg editor, lets you to add many different kinds of blocks: Image, Table, List, Quotes, Text, Gallery etc.
You can easily drag & drop the images in an Image block just like in visual editor. It will give you many options to insert, edit, align, resize, adding links to the images. You can also add the additional CSS to these blocks.
You can now add a table block easily in Gutenberg editor. Though it requires the HTML code or some plugin in the previous visual editor. Now, you can add a table with a single click. Currently, you are able to add just a 2X2 table and to format it you need to go in text mode. Hopefully, WordPress will provide liberty to add multiple size tables with extra functionality in the final release.
HTML Live Block
It is a pretty cool feature of Gutenberg that you can preview your HTML code from right within the block. You can call it a Live HTML block. There is no need to switch between visual and text modes for this.
Recent Blocks Option
Gutenberg editor is providing many kinds of inbuilt blocks. It also added a recent block option to speed up the process of adding blocks.
You can easily move around the blocks. You can rearrange a block with up and down arrows next to each block when you highlight it. There are also options in the sidebar to delete or change the settings of a block.
Word and Block Counts
Gutenberg Editor provides you a simple pop-up to see the word count, number of blocks and headings as shown below:
Anchor and Table of Contents Support
There is a good option of the table of contents in the sidebar. It helps a lot in case of long-form content. It shows a list of clickable links that you can use to jump into any part of your article. So, you can move freely around the post.
Similarly, Gutenberg is offering an anchor tag. With this, you can link to the header or any other part of the post. This is great for sharing and switching to SERP menus point of views.
Embedding media is super easy with Gutenberg Editor. Whether it be YouTube, SoundCloud, Hulu, Flickr, Imgur, Twitter, Slideshare, Reddit, and much more as shown below. Though you could embed all of these before this was not mentioned in the visual editor.
Gutenberg gives you the inbuilt option for adding simple buttons. Bloggers and publishers need it as looking for easier methods to add a call to actions. Before this, HTML code or Third-party plugins were used in place of it.
There is a good addition of undo and redo buttons in the Gutenberg Editor. You need to frequently undo the changes you did and to repeat the actions you undone shortly. You can easily do this with undo and redo buttons.
New Cover Text Option
Gutenberg editor introduces many options for cover text and visual styles. You can change the font size, color with custom color palette component and turn on the drop cap etc.
You get the ability to autocomplete insert the blocks. You use slacks from the keyboard to cut down the mouse clicks for easy formatting. Suppose, you type heading- it will automatically start inserting a Heading text. Likewise, you can use slacks for image, gallery and other embeds from a list.
What can be better than a combination of embed options, new alignments, anchor support, a new block experience !!!
Strengths: How strong this Contender is
Gutenberg editor seems to be a mover and shaker in the market with lots of new additions and improvements. Let’s chalk out the positive points of the all-new Gutenberg WordPress Editor.
- Publishers may love the newer editing block-style experience.
- Non-reliance to TinyMCE is a good thing. The tight integration of core, theme developers, plugins, and editor seems more promising.
- Gutenberg Editor is providing a distraction-free interface with more space.
- It has a great response on mobiles.
- It will be great to work with blocks. The new alignment options are a step forward for full-width templated and responsive sites.
- Gutenberg offers a wide range of media embeds with more ease.
- It seems to provide more flexibility with different layouts and content types.
Areas of Improvement
Gutenberg WordPress editor is under development. The final release may come with many additions and more refined improvements. But till now, it is missing some of the important areas and needs betterment. Some of these are as follows:
- Gutenberg is missing the markdown support that makes the TinyMCE a quicker writing experience. Hoping to see Markdown support in the final release.
- No support for columns. Gutenberg is consuming a single big column content layout. The basic column support will make the writing experience good in the core.It may be hard to learn using Gutenberg WordPress Editor.
- It may be hard to learn using Gutenberg WordPress Editor.
- It doesn’t support custom plugin meta boxes. But it is an obvious delay as plugin developers may start testing integrations with Gutenberg Editor. It is also promised to come in the future release.
- Copying the outside content is just out of question for Gutenberg. As all the formatting is lost, once pasted into the text block.
- Gutenberg should support the theme stylesheets to predict the frontend results. For example, the dynamic colors that a theme support in customizer would also be reflected in Gutenberg as well.
- Backward compatibility puts a big question mark on Gutenberg. Where will the millions of post go that are written with TinyMCE? Not only the WordPress users, it will also affect the workflow of developers too. Maybe some wrapper will come with TinyMCE backward compatibility!
Roadmap for Gutenberg: Release Calendar, Development & Future
WordPress Gutenberg Editor is about to reach a milestone in a technical and design vision. It has covered a long way yet a lot is left to come. You can see the milestones of Gutenberg life cycle along with the final destination to meet.
Final Release – The final release of Gutenberg WordPress editor is scheduled with WordPress 5.0. As Mullenweg said:
“Gutenberg will ship with WordPress 5.0, but the release will come out when Gutenberg is ready, not vice versa.”
Gutenberg is not going to release until the team working on it agrees. As there is a lot of work needs to be done in the documentation, translation, marketing efforts along with fixing the issues. WordPress 4.9 will come by November 2017. So, the final edition of Gutenberg may be released somewhere around 2018 with WordPress 5.0.
Gutenberg shows a long curve of development from its first version 0.1 to 1.4 till now. Each version includes a long list of updates plus some main additions. So, here only the main add-ons are being highlighted. For details, you can refer the Gutenberg Development.
Gutenberg 1.4 (Yesterday, Oct 10, 2017) – While we were detailing and diving in with this post, Automattic released another version for Gutenberg. Below updates are made to this version:
- New reusable Dropdown component added.
- Partial URLs are allowed in link input.
- Initialization actions merged into a single action.
- Fix scroll position is introduced for reordering blocks.
Gutenberg 1.3 (Oct 2017) – It has come last week with many small improvements in existing features. Like: fixed issues with sticky quick toolbar position, multi-select inside new scroll container, image block error etc. Though the main add-ons are:
- Testing the cover image block with an opacity slider
- an option to convert a single block to an HTML block when conflicting content is detected
Gutenberg 1.2 (Sept 2017)
- Resolve block conflicts in the classic editor.
- Initial support for post meta
- Addition of block and word counts to the table of contents
- Added meta box placeholder shell
Gutenberg 1.1 (Sept 2017)
- Added slash autocomplete for blocks. A shortcut for adding new blocks without leaving the keyboard.
- ability to remove an image from a gallery from within the block
- option to open a created link in a new window
- caption styling for video block
Gutenberg 1.0 (Aug 2017)
- Given a drag and drop for adding image blocks
- Merged paragraph and cover text blocks
- Restored keyboard navigation with extra robust implementation, addressing previous browser issues
- Align and edit buttons added to video block
- Thumbnail size selector is added to image blocks
- Provided support for URL input and align and edit buttons to audio block
Gutenberg 0.9 (Aug 2017)
- Ability to change font-size in cover text using slider and number input.
- Support for custom anchors on blocks, allowing to link directly to a section of the post
- Removed blank target from “view post” in notices
- History and resources docs added
Gutenberg 0.8 (Aug 2017)
- Introduced 5 new blocks – Categories, Shortcode, Test columns, Audio and Video
- Resizing handlers added to Image Block
- Direct image upload button is given to Image Block and Gallery Block
- Option to transform a block to Classic when it encounters problems
- Option to Overwrite changes on a block detected as invalid
Gutenberg 0.7 (Aug 2017)
- Added opt-in usage tracking
- Hide placeholders on focus
- PostAuthor dropdown added to the UI
- Theme support for customized color palettes and a shared component (applies to cover text and button blocks)
- Theme support for wide images
Gutenberg 0.6 (July 2017)
- Changed Text/Paragraph block behaviorNew cover text and Read more blocks added
- New cover text and Read more blocks added
- Color options added to the button block
- Mechanism added for validating and protecting blocks that may have suffered unrecognized edits
- Improved gallery creation flow by opening into “gallery” mode from placeholder
Gutenberg 0.5 (July 2017)
- New verse block for poetry added
- A new display for Recent blocks added
- A new display for Recent blocks added
- Mobile implementation of block mover, settings, and delete actions
- New documentation app to serve all tutorials, faqs, docs, etc.
- Shortcuts added to manage indents and levels in List block
- Alignment options added to latest posts block
Gutenberg 0.4 (July 2017)
- Added support for linking to a url in image blocks.
- Navigation between blocks using arrow keys
- Alternate Table block added with TinyMCE functionality for adding/removing rows/cells, etc.
- Actions added for plugins to register frontend and editor assets
- Aria-label added to edit image button and to embed input URL input
Gutenberg 0.3 (June 2017)
- Generated Front end styles for core blocks
- Framework added for notices and implemented publishing and saving ones
- Text and image quick inserts added next to inserter icon at the end of the post
- Block Description component added and applied it to several blocks
- Design blueprints and principles added to the storybook
- Sandboxing iframe implemented for embeds
Gutenberg 0.2 (June 2017)
- Added New Custom HTML and Cover Image blocks
- Button added to delete a block
- Button is given to open block settings in the inspector
- Renamed “Freeform” block to “Classic Text”
- Support for pages and custom post types
- Ability to select all blocks with ctrl/command+A
- Automatically generate wrapper class for styling blocks
Gutenberg 0.1 (June 2017) – This was the first release of Gutenberg WordPress Editor. Matt Mullenweg announced at WordCamp US 2016 that he wanted WordPress to have a renewed focus on the post writing experience. He admitted that content editing has changed and evolved a lot over the years while the WordPress editor has changed relatively little. So later, in 2017, Gutenberg editor plugin was released.
Reactions from WordPress Community
WordPress users have mixed reactions about Gutenberg Editor. It has positive as well as negative reviews.Some people loving its user-friendly design and modern update. They are seeing WordPress bright future with Gutenberg. At the same time, others feel that the editor doesn’t offer enough new features. You can see the user’s reviews as follows:
Though my experience with Gutenberg WordPress Editor says that it really exhibits some promising features. The block design is a revolutionary step to compete with other successful page builders. As Gutenberg is still in development phase so to judge it strictly, will be unfair. No one can predict future but definitely, with Gutenberg, a wind of change can be felt.
What’s your take?
Gutenberg editor aims to develop rich content in less time. The efforts of developers are really appreciable as they firepower the development of Gutenberg editor. It works on block system for producing content. It promises to deliver more elegance and flexibility. Some are seeing “Gutenberg as future of content”. In short, the development of Gutenberg can be said overwhelmingly positive. Though the community has mixed reactions as discussed. It can’t be denied that it is far behind from its goal and still has to go a long way…
But have you tried Gutenberg Editor? What do you want to say about your experience? Could it successfully replace the existing WordPress Editor? Share your views here – Good or Bad. We would love to hear from you !!
Hopefully, Gutenberg will soon appear with WordPress !! As discussed, Gutenberg is a step in a direction to produce rich content sites. If you are also looking to create fresh themes in WordPress, you can use TemplateToaster. It is a well-versed WordPress Theme Builder Software. It provides you with all the advanced features to create a WordPress theme in minutes without coding. Even, you have the option to export a WordPress theme with content. And, surely it deserves a place in your development toolkit.