{"id":1637,"date":"2017-06-27T11:12:10","date_gmt":"2017-06-27T11:12:10","guid":{"rendered":"http:\/\/reseller-hosting-themes.com\/wordpress\/?p=1637"},"modified":"2017-06-27T11:12:10","modified_gmt":"2017-06-27T11:12:10","slug":"gutenberg-editor-preview","status":"publish","type":"post","link":"https:\/\/reseller-hosting-themes.com\/wordpress\/gutenberg-editor-preview\/","title":{"rendered":"What to expect from WordPress&#8217;s new Gutenberg editor?"},"content":{"rendered":"<p><img decoding=\"async\" loading=\"lazy\" class=\"alignright wp-image-1643 size-medium\" src=\"https:\/\/reseller-hosting-themes.com\/wordpress\/wp-content\/uploads\/2017\/06\/gutenberg-editor-300x225.png\" alt=\"gutenberg editor preview\" width=\"300\" height=\"225\" srcset=\"https:\/\/reseller-hosting-themes.com\/wordpress\/wp-content\/uploads\/2017\/06\/gutenberg-editor-300x225.png 300w, https:\/\/reseller-hosting-themes.com\/wordpress\/wp-content\/uploads\/2017\/06\/gutenberg-editor.png 640w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>The way we write WordPress posts has remained largely the same during the years. You are presented with a small white box where you can write text. To add anything extra, you either have to use the formatting buttons at the top or the Add Media button above them.<\/p>\n<p>And while this was fine for our needs 10 years ago, WordPress has evolved a lot over the years. More and more options have been added.<\/p>\n<p>The guys at WordPress have designed a new tool for creating posts. Its name is the Gutenberg editor.<\/p>\n<h2>What is the Gutenberg editor?<\/h2>\n<p>The Gutenberg editor will change the way we write posts. The posts themselves will be made up of &#8220;blocks&#8221;. Each block can contain different information &#8211; text, images, lists, HTML code, etc.<\/p>\n<p>The WordPress editor works with blocks even today. However, they are mostly hidden from the regular user and don&#8217;t offer many layout options.<\/p>\n<p>The purpose of the Gutenberg editor is to make the creation of content-rich posts much easier. Here is what the creator of WordPress Matt Mullenweg has said about Gutenberg:<\/p>\n<blockquote><p>The new post and page building experience will make writing rich posts effortless, making it easy to do what today might take shortcodes, custom HTML, or \u201cmystery meat\u201d embed discovery.<\/p><\/blockquote>\n<h2>How does the Gutenber editor work?<\/h2>\n<p>Each time you add a new block, you choose what it will contain.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-1648 size-medium\" src=\"https:\/\/reseller-hosting-themes.com\/wordpress\/wp-content\/uploads\/2017\/06\/element-blocks-gutenberg-276x300.png\" alt=\"element blocks gutenberg editor\" width=\"276\" height=\"300\" srcset=\"https:\/\/reseller-hosting-themes.com\/wordpress\/wp-content\/uploads\/2017\/06\/element-blocks-gutenberg-276x300.png 276w, https:\/\/reseller-hosting-themes.com\/wordpress\/wp-content\/uploads\/2017\/06\/element-blocks-gutenberg-300x325.png 300w, https:\/\/reseller-hosting-themes.com\/wordpress\/wp-content\/uploads\/2017\/06\/element-blocks-gutenberg.png 716w\" sizes=\"(max-width: 276px) 100vw, 276px\" \/><\/p>\n<p>You can edit the content of the given block, you can write, you can choose which image to use, etc.<\/p>\n<p>If the block supports formatting options, you will see them as soon as you add some content in it.<br \/>\nIn addition, you will see extra formatting options in the new sidebar. A click on the post title will allow you to change the permalink.<\/p>\n<p>Once you have finished adding new blocks, you will see two arrows next to each block &#8211; one pointing up and one pointing down. They will help you quickly rearrange your blocks.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-1649\" src=\"https:\/\/reseller-hosting-themes.com\/wordpress\/wp-content\/uploads\/2017\/06\/formatting-blocks-gutenberg-300x127.png\" alt=\"formatting blocks gutenberg editor\" width=\"600\" height=\"253\" srcset=\"https:\/\/reseller-hosting-themes.com\/wordpress\/wp-content\/uploads\/2017\/06\/formatting-blocks-gutenberg-300x127.png 300w, https:\/\/reseller-hosting-themes.com\/wordpress\/wp-content\/uploads\/2017\/06\/formatting-blocks-gutenberg-768x324.png 768w, https:\/\/reseller-hosting-themes.com\/wordpress\/wp-content\/uploads\/2017\/06\/formatting-blocks-gutenberg-1000x422.png 1000w, https:\/\/reseller-hosting-themes.com\/wordpress\/wp-content\/uploads\/2017\/06\/formatting-blocks-gutenberg.png 1568w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>At the moment, the formatting options are the same as the ones you know from the existing post editor.<\/p>\n<p>However, with this new approach, the WordPress devs can add new options on a per-block basis without having to \u2018reveal&#8217; them all at once.<\/p>\n<p>The sidebar is also completely re-imagined. When you click on a given block, you will see advanced options such as drop-cap setting support (for the text blocks) or fixed position scrolling support (for the image blocks).<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-1650\" src=\"https:\/\/reseller-hosting-themes.com\/wordpress\/wp-content\/uploads\/2017\/06\/new-sidebar-gutenberg-182x300.png\" alt=\"new sidebar gutenberg editor\" width=\"300\" height=\"493\" srcset=\"https:\/\/reseller-hosting-themes.com\/wordpress\/wp-content\/uploads\/2017\/06\/new-sidebar-gutenberg-182x300.png 182w, https:\/\/reseller-hosting-themes.com\/wordpress\/wp-content\/uploads\/2017\/06\/new-sidebar-gutenberg-623x1024.png 623w, https:\/\/reseller-hosting-themes.com\/wordpress\/wp-content\/uploads\/2017\/06\/new-sidebar-gutenberg.png 674w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>When you are not editing a block, the sidebar will show the post settings in a cleaner and more condensed way.<\/p>\n<p>The meta boxes under the post editing screen have been \u2018moved&#8217; to the sidebar area.<\/p>\n<p>Will this work with popular plugins like Yoast SEO where these meta boxes \u2018inhabit&#8217; the area under the post edit screen and require more visual space? We&#8217;ve yet to find out.<\/p>\n<p>The top bar above the post screen is also re-worked. On the left, you will see a Save button and a drop-down menu, which allows you to switch from the visual to the textual editor (and vice versa).<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-1651\" src=\"https:\/\/reseller-hosting-themes.com\/wordpress\/wp-content\/uploads\/2017\/06\/new-top-bar-gutenberg-300x70.png\" alt=\"new top bar gutenberg editor\" width=\"600\" height=\"140\" srcset=\"https:\/\/reseller-hosting-themes.com\/wordpress\/wp-content\/uploads\/2017\/06\/new-top-bar-gutenberg-300x70.png 300w, https:\/\/reseller-hosting-themes.com\/wordpress\/wp-content\/uploads\/2017\/06\/new-top-bar-gutenberg-768x179.png 768w, https:\/\/reseller-hosting-themes.com\/wordpress\/wp-content\/uploads\/2017\/06\/new-top-bar-gutenberg-1000x233.png 1000w, https:\/\/reseller-hosting-themes.com\/wordpress\/wp-content\/uploads\/2017\/06\/new-top-bar-gutenberg.png 1782w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>On the right, you will find redo and undo options, a Preview button, a Post Setting button and a Publish button.<\/p>\n<h2>You can test\u00a0the Gutenberg editor work today<\/h2>\n<p>For some time now, the guys at Automatic have been releasing new features in the form of plugins.<\/p>\n<p>This way, they can gather feedback on each feature and release new versions without having to wait until the next WordPress release is launched.<\/p>\n<p>And as of last week, everyone can now download the <a href=\"https:\/\/wordpress.org\/plugins\/gutenberg\/\" target=\"_blank\" rel=\"noopener\">Gutenberg beta plugin<\/a>.<\/p>\n<p>However, as this is a beta release, it should not be tested on production sites.<\/p>\n<p>It should also be noted the Gutenberg editor does not currently support all themes. Tests have confirmed that it works with the Twenty Seventeen Theme.<\/p>\n<p>The Gutenberg editor is planned to be featured in the WordPress 5.0 release.<\/p>\n<p>However, there is plenty of time before that, the next release being 4.9. The latter will be focused mainly on polishing up the existing features.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Check our preview of the features of the new Gutenberg editor for WordPress. Download the beta plugin to test them out yourself.<\/p>\n","protected":false},"author":1,"featured_media":1643,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"_links":{"self":[{"href":"https:\/\/reseller-hosting-themes.com\/wordpress\/wp-json\/wp\/v2\/posts\/1637"}],"collection":[{"href":"https:\/\/reseller-hosting-themes.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/reseller-hosting-themes.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/reseller-hosting-themes.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/reseller-hosting-themes.com\/wordpress\/wp-json\/wp\/v2\/comments?post=1637"}],"version-history":[{"count":11,"href":"https:\/\/reseller-hosting-themes.com\/wordpress\/wp-json\/wp\/v2\/posts\/1637\/revisions"}],"predecessor-version":[{"id":1654,"href":"https:\/\/reseller-hosting-themes.com\/wordpress\/wp-json\/wp\/v2\/posts\/1637\/revisions\/1654"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/reseller-hosting-themes.com\/wordpress\/wp-json\/wp\/v2\/media\/1643"}],"wp:attachment":[{"href":"https:\/\/reseller-hosting-themes.com\/wordpress\/wp-json\/wp\/v2\/media?parent=1637"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/reseller-hosting-themes.com\/wordpress\/wp-json\/wp\/v2\/categories?post=1637"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/reseller-hosting-themes.com\/wordpress\/wp-json\/wp\/v2\/tags?post=1637"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}