After showing a preview of the new Gutenberg editor with dynamic blocks replacing widgets, Mullenweg announced that it is now available as a plugin in a preview version on WordPress.org directory<\/a>. While Gutenberg as part of the core it\u2019s not quite ready for prime time (Matt Mullenweg recently confirmed Gutenberg won\u2019t be in WordPress 4.9), we still thought it would be helpful to give you a look at how the Gutenberg Editor works.<\/p>\n\n\n\n As we all know, the editor part of WordPress is one of the most fundamental parts of the CMS. In many ways, this hub is where all the action happens, or in other words, the place where you create engaging content which keeps users coming back to your site. Over the years it has developed from a barely usable and – at times – frustrating writing experience into a rather functional tool. Millions of people have learned how to use the classic WordPress editor and many developers have built alternative editing tools on top of the default editor.<\/p>\n\n\n\n And despite all that while content editing has changed and evolved a lot over the years, the current WordPress TinyMCE visual editor hasn\u2019t had many changes over the years and for the most part, has stayed pretty much the same. The core functionality of the editor, including shortcodes and embeds, was developed for a different time and has become increasingly clunky compared to the best editing experiences available on the web nowadays. The current visual editor requires a lot of time to utilize shortcodes and HTML to make things work. While this isn\u2019t such a bad thing, many think it is time for a change. Lots of people have grown to know and love WordPress\u2019 TinyMCE-based editor, it can be off-putting to new users used to writing and editing in word processors like Word or text editors like iA Writer. Other platforms such as Medium or Ghost provide a really newest and greatest experience for writers, so why can\u2019t WordPress?<\/p>\n\n\n\n In the past 6+ months, the dedicated WordPress core editor team has been working on the new Gutenberg WordPress Plugin which is solely tasked with improving the user interface and making things easier and enjoyable, especially for novice WordPress users. The new Editor aims to dramatically improve the editor experience in WordPress by adding easy-to-use, dynamic content blocks. Not only is it way easier for the technophobe but saves time and hassle for the proficient developer.<\/p>\n\n\n\n Although it\u2019s still in the early stages, the current set up works using blocks which handle each and every post element. A paragraph is a block. An image is a block. A list of posts, a gallery, a pull quote, or some custom HTML are all blocks. These can be arranged with ease and you\u2019ll enjoy a huge selection of formatting options for each block. This also means that you can easily move both the images and text while inserting headings, lists, and quotes as you would do in the current editor.<\/p>\n\n\n\n Gutenberg requires the latest WordPress 4.8 to function properly. You can download the latest version of Gutenberg from the WordPress repository<\/p>\n\n\n\n The other option is to install it directly from your WordPress Admin Panel. From your WordPress admin dashboard, navigate to Plugins > Add New<\/strong>. Search for Gutenberg from the top right search bar. As soon as you find it, click on the Install Now button.<\/p>\n\n\n\n After successful installation of the plugin, click on the Activate<\/strong> button. For further reference, take a look at the image below.<\/p>\n\n\n At this early stage, you may go back to the home page, assuming you would need to create a new page where you would be dropped into the editor mode. This is not the case here.<\/p>\n\n\n\n After activating the plugin, you will see the Gutenberg menu on the left side of the WordPress dashboard. Go to Gutenberg > New Post<\/strong> and then create a post.<\/p>\n\n\n For testing purposes, you can also check out the demo page by going to the Demo button located below the Gutenberg editor button.<\/p>\n\n\n What is more, the WordPress core team has left both the default WordPress editor and the Gutenberg one, so that you can check both options simultaneously.<\/p>\n\n\n\n Once you have Gutenberg successfully installed, you will see links to your Posts that allow you to open up the Gutenberg editor easily and be able to bounce back and forth to the classic TinyMCE editor.<\/p>\n\n\n Now you can easily compare the current visual editor and the Gutenberg editor plugin side by side. The first thing that caught our attention is how much more writing space Gutenberg has, especially on smaller screens. For people who you use laptops on a daily basis for posting website updates, Gutenberg is going to be a nice change of pace! It is definitely focused on \u201cwriting first\u201d and is trying to provide a less distracting environment as promised.<\/p>\n\n\n Now let\u2019s edit the existing blog post to check out the options of Gutenberg.<\/p>\n\n\n\n When selecting this option from the drop-down menu, you will be able to make the blocks directly from the text editor mode.<\/p>\n\n\n This option allows you to add Text, Image, Gallery, Heading, Quote, List, and Cover Image.<\/p>\n\n\n Embedding content from services like YouTube, using the built-in oEmbeds, are already super-easy to use in the existing TinyMCE editor. You just grab the embed code for the video, slideshow, infographic, or whatever, and then you simply paste a URL into the editor and that’s it. There are still those, though that find that difficult because there is no mention of it in the visual editor.<\/p>\n\n\n Gutenberg is said to make embedding media content even easier, whether it be YouTube, SoundCloud, Hulu, Flickr, Imgur, Twitter, Slideshare, Reddit, and much more. In combination with the new block experience and alignment options, we aren\u2019t sure what could really be done better.<\/p>\n\n\n\n Now coming back to the \u2018Post Settings\u2019 menu, you can use it to manage your post\u2019s status, post format, visibility, revisions, taxonomies (categories & tags), featured image, excerpt and discussion settings.<\/p>\n\n\n\n The only problem you may find with this menu is that it doesn\u2019t switch tabs automatically when you click on a different tab, that is, by default the \u2018Status & Visibility\u2019 tab is expanded, but when you click on the \u2018Excerpt\u2019 tab which is present just before the last tab, it doesn\u2019t open up properly. It tries to keep all the tabs open and we should collapse the tab manually to switch between the different sections.<\/p>\n\n\n Right next to it is the \u2018Insert\u2019 button about which I mentioned above, you will notice the different types of blocks available under the Insert menu. Right after that lies the \u2018Preview\u2019 button. It is the same as the previous editor, just click on it to preview the page or a post once you have saved it.<\/p>\n\n\n\n After that comes the \u2018Publish\u2019 button using which you can publish your post once you have added all the necessary blocks (text, images, embeds, etc).<\/p>\n\n\n\n After successfully added details you need to update your post by clicking on the update button.<\/p>\n\n\n\n The plugin itself doesn\u2019t support custom plugin meta boxes such as Yoast SEO yet. This alone makes it unusable in production right now. But it is understandable as plugin developers will now have to start testing integrations with the Gutenberg editor. Yet, we should mention it works great on mobile, and going forward we can actually see people utilizing this a lot more. Need to make a quick edit on your phone while on the go? No problem.<\/p>\n\n\n\n Gutenberg has 1000+ active installs now and first impressions are rolling in. In the past few weeks, members of the community have published their experiences with the new editor. While the developers working on the Gutenberg editor plugin have obviously put a lot of work into creating the plugin so far it looks like users have had a very strong reaction to it on both ends of the spectrum.<\/p>\n\n\n\n It is important to note that this is the first time the new block editor has been easily accessible to any user who wants to try it. Gutenberg also offers a somewhat unique testing experience in that it creates its own menu inside WordPress, so users don\u2019t have to choose between the old editor and the new one.<\/p>\n\n\n\n Most likely version 5.0, as there\u2019s still quite a bit of work to be done. It should be clearly noted that Gutenberg is a very early prototype. It\u2019s unfortunate that they call it a Beta. That gives people the impression that it\u2019s almost a Pre-Release candidate when it\u2019s not near that stage. It demonstrates where the developers are hoping to go, but there\u2019s a long way to go before they get there. Most of the promised functionality isn\u2019t yet working, and it\u2019ll be some time before we see Gutenberg integrated into WordPress Core.<\/p>\n\n\n\n This plugin is being actively developed by many contributors and the team behind this new editor are reaching out for assistance with your feedback. The best part of the Gutenberg Project is that everyone can help. You can follow along on github.com\/WordPress\/gutenberg<\/a> and on the #editor tag on the make.wordpress.org<\/a> blog. We encourage everyone to grab a copy of it from the WordPress repository and install it on a dev or staging site.<\/p>\n\n\n\n Have you tried out Gutenberg yet? If so, we would love to hear your thoughts, both good and bad.<\/p>\n","protected":false},"excerpt":{"rendered":" By now you should have heard the phrase \u2018Gutenberg Project\u2019. And no, I am not referring to Johannes Gutenberg, who invented a printing press with movable type more than 500 years ago. Today we are talking about the new editor for WordPress that is called Gutenberg. It\u2019s been floating about for some time but the […]<\/p>\n","protected":false},"author":2,"featured_media":1113,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[256],"tags":[207,205,78,44],"class_list":["post-1108","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-editor","tag-gutenberg","tag-update","tag-wordpress"],"featured_image_src":"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2017\/07\/gutenberg.jpg","author_info":{"display_name":"Elena","author_link":"https:\/\/www.fastcomet.com\/blog\/author\/elenatileva"},"yoast_head":"\nWhy Project Gutenberg?<\/h2>\n\n\n\n
How to Install Gutenberg?<\/h2>\n\n\n\n
![\"Installing](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2017\/07\/gutenberg1.jpg\")
<\/figure>\n<\/div>\n\n\n![\"Creating](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2017\/07\/gutenberg2.jpg\")
<\/figure>\n<\/div>\n\n\n![\"WordPress](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2017\/07\/gutenberg3.jpg\")
<\/figure>\n<\/div>\n\n\nExploring Gutenberg<\/h2>\n\n\n\n
![\"Exploring](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2017\/07\/gutenberg4.jpg\")
<\/figure>\n<\/div>\n\n\n![\"Comparison](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2017\/07\/gutenberg5.jpg\")
<\/figure>\n<\/div>\n\n\nText<\/h3>\n\n\n\n
![\"Gutenberg](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2017\/07\/gutenberg6.jpg\")
<\/figure>\n<\/div>\n\n\nInsert > Recent<\/h3>\n\n\n\n
![\"Inserting](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2017\/07\/gutenberg7.jpg\")
<\/figure>\n<\/div>\n\n\nInsert > Embed<\/h3>\n\n\n\n
![\"Inserting](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2017\/07\/gutenberg8.jpg\")
<\/figure>\n<\/div>\n\n\nPost Settings<\/h3>\n\n\n\n
![\"Gutenberg](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2017\/07\/gutenberg9.jpg\")
<\/figure>\n<\/div>\n\n\nPreview<\/h3>\n\n\n\n
Update<\/h4>\n\n\n\n
Gutenberg First Impressions and Concerns<\/h2>\n\n\n\n
When will Gutenberg Be in Core?<\/h2>\n\n\n\n
Add Your Contribution<\/h2>\n\n\n\n