{"id":2792,"date":"2018-03-08T10:54:31","date_gmt":"2018-03-08T10:54:31","guid":{"rendered":"https:\/\/staging.elixirrdigital.com\/us\/2018\/03\/08\/introduction-new-wordpress-editor-gutenberg\/"},"modified":"2025-03-05T16:17:59","modified_gmt":"2025-03-05T16:17:59","slug":"introduction-new-wordpress-editor-gutenberg","status":"publish","type":"post","link":"https:\/\/staging.elixirrdigital.com\/us\/2018\/03\/08\/introduction-new-wordpress-editor-gutenberg\/","title":{"rendered":"An Introduction to the New WordPress Editor \u2013 Gutenberg"},"content":{"rendered":"<p>Over a year ago, Matt Mullenweg (co-founder of the WordPress project) told the community of WordPress developers to <em>\u2018learn JavaScript deeply\u2019<\/em>. Since then, a new feature project was created with the aim of improving the way people create content on WordPress.<\/p>\n<p>For many years, TinyMCE (Tiny Moxiecode Content Editor) has been the face of content editing within the software, providing a very simple interface for anyone writing for a blog or corporate website. It has long been familiar to those that use WordPress a lot, and has a number of features that give you control when creating content and allow you to edit it quickly and easily.<\/p>\n<p><center><img decoding=\"async\" class=\"aligncenter size-full wp-image-9299\" src=\"https:\/\/staging.elixirrdigital.com\/us\/wp-content\/uploads\/2025\/03\/gutenberg-editor-e1520432890817.png\" alt=\"\"><\/center><\/p>\n<h2>Introducing Gutenberg<\/h2>\n<p>Gutenberg is the code name for the brand new editing experience that will land within WordPress at some point later this year. We\u2019ll need to wait patiently to see what happens nearer the time, but it\u2019s important to be aware of this upcoming change and how it may affect you as a user or developer of WordPress.<\/p>\n<p>The concept of Gutenberg is based around \u2018blocks\u2019, much like the wooden blocks that children play with or LEGO\u00ae bricks, as used in the example image above. You can move blocks around, change what they do and even what they look like, giving you much more flexibility than TinyMCE currently provides. Overall, this new editing experience puts more focus on content rather than on an abundance of settings.<\/p>\n<p>Additionally, Gutenberg orders everything in much neater fashion with meta boxes (settings or options) condensed on the right hand side and the content filling up the rest of the space. Whilst on the surface the interface looks fairly simple, power users haven\u2019t been forgotten. You\u2019ll also be able to finely tune blocks with a more granular approach to options.<\/p>\n<h2>The Gutenberg Effect<\/h2>\n<p>The effect Gutenberg will have on WordPress sites moving forward is undoubtedly huge. It not only changes the way developers will have to make WordPress sites, but it will also change the user experience. This may, for some at least, cause problems. For example, when editing a heading block, it may not be immediately clear how to convert it to normal text or an image, unless you look closely at the drop-down box with the options at the bottom.<\/p>\n<p><center><img decoding=\"async\" class=\"aligncenter size-full wp-image-9300\" src=\"https:\/\/staging.elixirrdigital.com\/us\/wp-content\/uploads\/2025\/03\/gutenberg-picture-e1520433069780.png\" alt=\"\"><\/center>As you can see, Gutenberg still allows you to change the block type into other things, but where TinyMCE would let you just add content and press buttons, you\u2019re given a much more specific route on how to do this and it\u2019s not as straight forward as you may think. Of course there are tradeoffs when comparing to the old editor, but once you\u2019ve used Gutenberg a bit more, you\u2019ll start to grasp its quirks and understand how the user interface is structured.<\/p>\n<p>Once you have finished editing your content, the next step is to publish it! One of the downsides to Gutenberg is that everything is broken down for you bit by bit, so what may seem like an easy action to take can in fact be overwhelming. What button are you looking for here?<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-9301\" src=\"https:\/\/staging.elixirrdigital.com\/us\/wp-content\/uploads\/2025\/03\/visual-editor.png\" alt=\"\"><\/p>\n<h2>Should You Use Gutenberg?<\/h2>\n<p>The best thing to do now is to install Gutenberg on your website and get used to how it functions and experience the differences firsthand, before it fully replaces TinyMCE in the coming months. If you\u2019re ready and comfortable using Gutenberg, the transition will be seamless and much easier for you to adjust.<\/p>\n<p>You can install <a href=\"https:\/\/wordpress.org\/plugins\/gutenberg\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gutenberg as a plugin<\/a> on your website right now if you\u2019d like to get involved and test it. Once Gutenberg is ready and merged into the <a href=\"https:\/\/staging.elixirrdigital.com\/us\/2017\/11\/03\/learning-wordpress-works-hood\/\">WordPress Core<\/a>, you\u2019ll no longer need a plugin to use it. Be warned however, it\u2019s currently what\u2019s known as a \u2018beta plugin\u2019 which means it\u2019s not necessarily stable and should not be used on production websites just yet.<\/p>\n<p>Alternatively, if you are worried about Gutenberg and whether it will have a negative impact on your website, you can <a href=\"https:\/\/wordpress.org\/plugins\/classic-editor\/\" target=\"_blank\" rel=\"noopener noreferrer\">install the Classic Editor plugin<\/a> to restore TinyMCE. This is the best option if you\u2019re worried about what might happen to your website when the Gutenberg update is applied, or you don\u2019t like the experience Gutenberg will bring you.<\/p>\n<h2>The Future of WordPress<\/h2>\n<p>It\u2019s too early to tell what the future of WordPress looks like right now, although some discussion has taken place within the WordPress community that moving more of WordPress to a block based CMS is the way forward. This means that things like menus and widgets would become a thing of the past and you would instead use blocks for these sorts of things.<\/p>\n<p>Another important thing to consider is the support of older versions of browsers such as Internet Explorer, or early versions of Chrome or Firefox. Whilst many people have upgraded to newer systems, people using older software won\u2019t be able to use some of the best features which updates like Gutenberg bring to the table. Now is as good a time as ever to upgrade in preparation for the Gutenberg update.<\/p>\n<p>What do you think about Gutenberg and how it will affect your website? Do you like the new design the editing page has taken and the options it will provide to you? Let us know and get in touch if you\u2019re interested in learning more about the advantages and disadvantages Gutenberg will bring.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Over a year ago, Matt Mullenweg (co-founder of the WordPress project) told the community of WordPress developers to \u2018learn JavaScript deeply\u2019. Since then, a new feature project was created with&hellip;<\/p>\n","protected":false},"author":10,"featured_media":2793,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"related_service":[53],"related_industry":[],"class_list":["post-2792","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"acf":[],"card":"<article class=\"wp-component-card wp-component-card--dark wp-component-card--resource wp-component-card--post wp-component-card--full-width            wp-component-card--link js-card-link\n        \">\n            <div class=\"wp-component-card__image\">\n            <img width=\"564\" height=\"579\" src=\"https:\/\/staging.elixirrdigital.com\/us\/wp-content\/uploads\/sites\/2\/2025\/03\/wp-small-564x579.jpeg\" class=\"attachment-card-1-col size-card-1-col\" alt=\"wordpress small\" decoding=\"async\" loading=\"lazy\" srcset=\"https:\/\/staging.elixirrdigital.com\/us\/wp-content\/uploads\/sites\/2\/2025\/03\/wp-small-564x579.jpeg 564w, https:\/\/staging.elixirrdigital.com\/us\/wp-content\/uploads\/sites\/2\/2025\/03\/wp-small-38x40.jpeg 38w\" sizes=\"auto, (max-width: 564px) 100vw, 564px\" \/>        <\/div>\n        <div class=\"wp-component-card__content\">\n        <div class=\"wp-component-card__content-top\">\n                                                    <p class=\"wp-component-card__eyebrow\">\n                    Blog                <\/p>\n                        <a href='https:\/\/staging.elixirrdigital.com\/us\/2018\/03\/08\/introduction-new-wordpress-editor-gutenberg\/'>\n        <h2 class='wp-component-card__title'>\n            An Introduction to the New WordPress Editor \u2013 Gutenberg\n        <\/h2>\n    <\/a>        <\/div>\n                    <div class=\"wp-component-card__content-bottom\">\n                                    <p class=\"wp-component-card__description\">\n                        Over a year ago, Matt Mullenweg (co-founder of the WordPress project) told the community of WordPress developers to \u2018learn JavaScript deeply\u2019. Since then, a new feature project was created with&hellip;                    <\/p>\n                                                                    <div class=\"wp-component-card__meta\">\n                                                    <p class=\"wp-component-card__date\">\n                                08 March 2018                            <\/p>\n                                                                            <div class=\"wp-component-card__terms\">\n                                                                                            <div class=\"wp-component-tags__tag\">\n                Web Design &amp; Development            <\/div>\n                                                                                                            <\/div>\n                                            <\/div>\n                                            <\/div>\n            <\/div>\n<\/article>\n","_links":{"self":[{"href":"https:\/\/staging.elixirrdigital.com\/us\/wp-json\/wp\/v2\/posts\/2792","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.elixirrdigital.com\/us\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/staging.elixirrdigital.com\/us\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/staging.elixirrdigital.com\/us\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.elixirrdigital.com\/us\/wp-json\/wp\/v2\/comments?post=2792"}],"version-history":[{"count":0,"href":"https:\/\/staging.elixirrdigital.com\/us\/wp-json\/wp\/v2\/posts\/2792\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/staging.elixirrdigital.com\/us\/wp-json\/wp\/v2\/media\/2793"}],"wp:attachment":[{"href":"https:\/\/staging.elixirrdigital.com\/us\/wp-json\/wp\/v2\/media?parent=2792"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.elixirrdigital.com\/us\/wp-json\/wp\/v2\/categories?post=2792"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.elixirrdigital.com\/us\/wp-json\/wp\/v2\/tags?post=2792"},{"taxonomy":"related_service","embeddable":true,"href":"https:\/\/staging.elixirrdigital.com\/us\/wp-json\/wp\/v2\/related_service?post=2792"},{"taxonomy":"related_industry","embeddable":true,"href":"https:\/\/staging.elixirrdigital.com\/us\/wp-json\/wp\/v2\/related_industry?post=2792"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}