{"id":2901,"date":"2018-08-16T08:01:45","date_gmt":"2018-08-16T08:01:45","guid":{"rendered":"https:\/\/staging.elixirrdigital.com\/us\/2018\/08\/16\/a-quick-start-guide-to-the-future-gutenberg-edition\/"},"modified":"2025-03-05T16:26:31","modified_gmt":"2025-03-05T16:26:31","slug":"a-quick-start-guide-to-the-future-gutenberg-edition","status":"publish","type":"post","link":"https:\/\/staging.elixirrdigital.com\/us\/2018\/08\/16\/a-quick-start-guide-to-the-future-gutenberg-edition\/","title":{"rendered":"A Quick Start Guide to the Future: Gutenberg Edition"},"content":{"rendered":"

I\u2019ve said the word Gutenberg so many times recently, and it\u2019s for good reason. For those of you that don\u2019t know what Gutenberg is, it\u2019s the new text editor coming to WordPress<\/a> which is scheduled to land in version 5.0 \u2013 the next major iteration of the CMS that will introduce a new way of editing content on your website.<\/p>\n

I\u2019ve been over the pros and cons<\/a> in a previous post; I even did a \u2018Friday Knowledge Share\u2019 session with a lucky group of fellow Coasties a couple of weeks ago. As you can tell, I\u2019m hot on this topic!<\/p>\n

What we have currently is TinyMCE. Some people may opt to calling it \u2018the bleak screen of sadness\u2019 and in fairness to those people, they\u2019re not wrong. It\u2019s a fairly basic editing experience that most of us are accustomed to using.<\/p>\n

\"\"<\/p>\n

You have a reasonably sized box to type into, and controls at the top which follow you along. This is great for the novice blogger, but with Gutenberg, you\u2019ll see something a little bit different:<\/p>\n

\"\"<\/p>\n

That\u2019s a very different experience, right? The first thing you\u2019ll notice is that the title and content area have been merged together. These two elements are still technically separate, but visually, the title is now part of the content space to make the writing flow much easier for people.<\/p>\n

The second biggest difference is that everything is now split into blocks. You\u2019ll see that with TinyMCE, everything was in one box, effectively one block. This made it hard to rearrange content and insert additional media because you had to play around with paragraphs and indentations \u2013 something people struggled with while using TinyMCE.\n<\/p>\n

Adding a Block<\/h2>\n

An important distinction between Gutenberg and TinyMCE is blocks. A block is basically a small section of content that is independent from the other bits of content in your post.<\/p>\n

An easy way to understand this, is that each paragraph of text in the TinyMCE (classic) editing mode is its own separate block in Gutenberg. An image would be its own separate block, a list, a quote or even a heading would now be a block so everything is broken down to be more granular.<\/p>\n

By default, you get lots of different blocks to choose from, and plugin authors can create new blocks for even more customisation. Click the small plus icon to the left of the current blocks in your post and you can select a new one from the menu.<\/p>\n

The main benefit that Gutenberg is marketed on is that with these new blocks, things can be dragged \u2018n\u2019 dropped around your post easily.<\/p>\n

\"\"<\/p>\n

Let\u2019s not forget though that most blocks are used to form some parts of the toolbar within the TinyMCE editor. So whilst things have moved around a lot, you will still have access to those familiar tools and options.<\/p>\n

Things like heading types, images or lists which were a button in the TinyMCE toolbar have migrated into their own block. However, smaller customisations like bold text is obviously only accessible to blocks that have the option of including text in them.<\/p>\n

There\u2019s also some new types of content we can play with. Not only can you add images, you can now add cover images and galleries too, something that you weren\u2019t able to do with TinyMCE by default. Let\u2019s see how these blocks work.<\/p>\n

Extending Your Images<\/h2>\n

By selecting the cover image block, I can then choose to upload a new image, or add an existing image that is already in the media library of the website. Once you\u2019ve added the image, you then have the opportunity to include a piece of text on top of it (with the addition of some formatting \u2013 such as making the text italic).<\/p>\n

\"\"<\/p>\n

Publishing a Story<\/h2>\n

Now that the post is ready, albeit very basic, it\u2019s time to preview my changes before it\u2019s published for everyone to see. To do that you will need to look over to the right hand side of the screen which is where the meta boxes are.<\/p>\n

Without diving in too deep, meta boxes were those small boxes which floated around the screen. You could hide them, move them around the editing screen to where you liked and they would usually house some additional options if added by a plugin for example.<\/p>\n

\"\"<\/p>\n

\"\"<\/p>\n

Now let\u2019s click the preview button and see what we get on the front-end of the website.<\/p>\n

There we have it, our first Gutenberg post in our theme. It doesn\u2019t look like much just yet, but it is definitely a step in the right direction. Let\u2019s check out what options we have and then we can publish or schedule the post for later.<\/p>\n

\"\"<\/p>\n

Much like in the old editor, you will see all of the extra options down the right hand side of the page. This is where you can extend your post customisations by adding tags, scheduling the post for a later date and even adding a featured image to the post.<\/p>\n

This section remains mostly unchanged, so the options you can expect to see here won\u2019t look much different.<\/p>\n

A Future with Gutenberg<\/h2>\n

It\u2019s not clear exactly how well received Gutenberg will be and how much it will truly improve the editing experience within WordPress. One thing that is certain though is that it\u2019s very different: there are more options and it\u2019s more flexible to create rich content for your website visitors.<\/p>\n

Here at Coast, we\u2019re biding our time and want to see what kind of effects Gutenberg has on the variety of sites that we work on. This new experience won\u2019t be suitable for all of them and there\u2019s lots of work to be done to ensure plugins and themes are compatible with the new changes \u2013 that\u2019s something that isn\u2019t a quick fix and will take time to plan and get right.<\/p>\n

We\u2019d love to hear what you think of Gutenberg! Are you excited to see the new features \u2018in the box\u2019 or do you prefer the \u2018classic\u2019 TinyMCE experience?<\/p>\n","protected":false},"excerpt":{"rendered":"

I\u2019ve said the word Gutenberg so many times recently, and it\u2019s for good reason. For those of you that don\u2019t know what Gutenberg is, it\u2019s the new text editor coming…<\/p>\n","protected":false},"author":10,"featured_media":2902,"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-2901","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"acf":[],"card":"

\n
\n \"gutenberg\" <\/div>\n
\n
\n

\n Blog <\/p>\n \n

\n A Quick Start Guide to the Future: Gutenberg Edition\n <\/h2>\n <\/a> <\/div>\n
\n

\n I\u2019ve said the word Gutenberg so many times recently, and it\u2019s for good reason. For those of you that don\u2019t know what Gutenberg is, it\u2019s the new text editor coming… <\/p>\n

\n

\n 16 August 2018 <\/p>\n

\n
\n Web Design & 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\/2901","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=2901"}],"version-history":[{"count":0,"href":"https:\/\/staging.elixirrdigital.com\/us\/wp-json\/wp\/v2\/posts\/2901\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/staging.elixirrdigital.com\/us\/wp-json\/wp\/v2\/media\/2902"}],"wp:attachment":[{"href":"https:\/\/staging.elixirrdigital.com\/us\/wp-json\/wp\/v2\/media?parent=2901"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.elixirrdigital.com\/us\/wp-json\/wp\/v2\/categories?post=2901"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.elixirrdigital.com\/us\/wp-json\/wp\/v2\/tags?post=2901"},{"taxonomy":"related_service","embeddable":true,"href":"https:\/\/staging.elixirrdigital.com\/us\/wp-json\/wp\/v2\/related_service?post=2901"},{"taxonomy":"related_industry","embeddable":true,"href":"https:\/\/staging.elixirrdigital.com\/us\/wp-json\/wp\/v2\/related_industry?post=2901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}