Gutenberg Editor: New method of Digital marketing

What is the Gutenberg Editor?


You’ve probably heard the name Gutenberg before – Johannes Gutenberg invented a printing press with movable type more than 500 years ago. So it’s fitting that the WordPress project, which aims to democratize publishing, has borrowed a name from such an important historical figure.

The new Gutenberg editor sure is causing a stir! The project aims to replace the visual/text editor in WordPress with a new post and page building experience that “will make writing rich posts effortless, making it easy to do what today might take shortcodes, custom HTML, or ‘mystery meat’ embed discovery.” For digital marketers, the overhaul to Gutenberg could change our workflows for content production and management, so take notes.

In this post, I’ll explain a bit about how Gutenberg works and why we should take a step back and try and understand how it can best serve our content marketing efforts moving forward. If you aren’t on Team Gutenberg after my explanation below, you can see the alternatives to Gutenberg here.

Gutenberg

Gutenberg – the WordPress editor, that is – is one of three core focus projects for WordPress this year, along with the REST API and the Customizer. It’s a completely new take on the editor as we know it. It uses “blocks” to structure and format content, with each paragraph of text, heading, image, list or other content consisting of a block.

Here’s what the blocks look like in action:

Post
Gutenberg

According to WordPress.org, the plugin has been downloaded 6,500+ times and there are 1,000 active installs. As I mentioned above, reviews are mixed and the plugin (at the time of writing) has a 2.5 out of 5 stars review. Here are the last 4 reviews to give you an idea of what people are saying:

“Very Bad Idea.”

“A Usability Nightmare.”

“A step forward in the right direction.”

“Great UI and UX.”

So yeah, reactions are on polar opposite ends of the scale.

The Gutenberg development team has been taking on feedback and pushing updates with long lists of improvements and bug fixes since releasing the plugin, even creating a new page in wordpress Testing Handbook to help users get involved.

I installed Gutenberg 0.4.0 on a localhost development install before testing it since it’s very much in beta and is not production-ready yet.

How the Gutenberg Editor Works

My first impression after installing Gutenberg ? It looks a lot like Medium – minimal, lots of white space and a focus on writing. It’s not surprising at all, really, since Matt Mullenweg has made it pretty obvious in interviews that WordPress needs to compete with platforms like Medium, Wix and Weebly and one of the keys to achieving this is making the post editing experience easier for new users.

When you create a new post, you’re prompted to add a title and “Write your story.” Unlike Medium, Gutenberg does feature a static sidebar, which is similar to the meta boxes on the right side of the existing post editor.

I found Gutenberg easy and intuitive to get started using. Yes, it did take a minute to adjust to the different interface. After all, I’ve been using the existing TinyMCE editor for years! But after clicking around for a minute, I had no trouble at all working out how to add and format content, insert images and update post settings.

Gutenberg

Writing a post is straightforward – you just need to start typing. When you click a block to add content, formatting options will appear for aligning text and making it bold or italicized. There’s no more kitchen sink – formatting options only appear when you need them. You can also choose to insert links or – as I’m very happy to report – you can still copy-paste links as you would in the existing WordPress editor.

Depending on the kind of content you want to create – text, headings, images, etc – the sidebar changes to displays the relevant settings, i.e. drop cap for text, heading types, and alignments for headings.

To the left of a block, there are arrows that you can click to rearrange where blocks sit amongst your content. And to the right of a block, there are icons for settings (which doesn’t always work yet) and a trash can (so you can delete the block).

Gutenberg post editor
Gutenberg

When you click “Post Settings” in the top-right, you can hide the sidebar for distraction-free writing. One of my criticisms is that it isn’t obvious at all that the “Post Settings” button toggles the sidebar views – the user experience here could definitely be improved. Likewise, I initially assumed there was no “Save” button, only a “Publish” button because I’m so used to the “Save” and “Publish” buttons being in the same meta box in the existing editor on the right-hand side. In Gutenberg, the “Publish” button is located in the sidebar on the right and the “Save” button is a text link in the top-left.

Gutenberg text editor
Text editor

While I’m mentioning gripes, I’ll also add here that it wasn’t initially obvious to me that I could toggle between the visual and text editor – I didn’t notice the link in the top-left as my eyes were immediately drawn to the sidebar and I automatically assumed that was where all the important settings were located.

Gutenberg save publisher
Gutenberg save publisher

Gripes aside, I really like how simple the text editor looks and works. Gutenberg adds in new HTML comments at the beginning and end of each block, but the code isn’t messy at all, as you can see in the image above. Using these HTML tags allows you to create blocks directly in text editor mode if it’s your preferred method of writing in WordPress.

I also really like how creating blocks works. When you’re typing and hit enter, each new paragraph becomes a new block, which allows you to insert new blocks in between paragraphs for headings, images and other content. You can either add new blocks to the bottom of your existing content or click the “Insert” button at the top of the page to insert text, headings, lists and other content, or even embeds from popular services like YouTube, Instagram, reddit, and Twitter. A blue line indicates where the content will be inserted in the post. While I don’t mind this approach to inserting content, I do think it would be more intuitive to have an icon appear to the right of the content where you want to insert content.

Content blog
Gutenberg

Initially, I had trouble getting used to formatting blocks of text. I tried to add a heading to some text but made a whole paragraph H2 and couldn’t work out how to undo it, so I just deleted it and started again. I later realized that all I had to do was select the block of text and then click the formatting box that appears above it to toggle between text, heading, quote, list and preformatted options.

A couple of reviews of Gutenberg I’ve read have mentioned that you can’t copy-paste formatted text from Word into Gutenberg. All I can say is, good riddance! Since I don’t use Word and find the span tags Word often adds to WordPress annoying, this doesn’t bother me at all. I usually write posts into Bear and then export to HTML so I can copy-paste into the text editor. I can still do this with the Gutenberg text editor so I’m very happy about that.

I should also add that it’s an absolute delight using Gutenberg on my 13” laptop. For years, it has been a frustrating and cumbersome experience using the existing post editor on my laptop to write lengthy articles because the text area and meta boxes look all squished in and writing involves So. Much. Scrolling.

I know scrolling areas where fixed to some extent in WordPress a few versions ago, but when you’re dealing with a post that’s 2000 words and you’re trying to get to the bottom of it to update an excerpt or Yoast settings… Yes, not an enjoyable experience! So I’m glad Gutenberg addresses this, my biggest pet peeve about the existing post editor.

However… it does make me wonder how plugins, like Yoast in particular, will manage to display settings that have been traditionally displayed underneath posts. There’s not a lot of room in the sidebar, so plugin authors will have to work out a clever way to display information that complements Gutenberg (perhaps using modals?).

New Formatting Options

Gutenberg includes some formatting options that are new to the WordPress editor and were previously only possible with the addition of plugins.

Pullquote

Now you can add pullquotes, which are like blockquotes except not. It’s hard to explain, so let me show you:

Gutenberg
Pollquote

I like that pullquotes include alignment options for left, middle, right, big and full-width so you can display quotes in different, more striking ways that (hopefully!) complement your theme.

Custom HTML

This block allows you to enter HTML and then preview it live. I’m not exactly sure why this block type is necessary, but I’m sure there are people out there who will find this feature super handy.

To test this out, I styled some text. Here’s what it looks like in HTML view:

Custom HTML
Custom HTML

And this is what it looks like in Preview view:

Gutenberg custom HTML preview
Custom HTML

Button

The new Button block allows you to add a simple call to action button. There aren’t any styling options yet. However, we’ll no doubt see more options become available as Gutenberg evolves and users offer more feedback for developers and ask for features.

Everything about Gutenberg
Button

A Few Other Observations About Gutenberg:

  • There are a lot of embed options, 35 in fact. As new embed options become available, scrolling through the list is going to become cumbersome. Fortunately, there’s a handy search field above the list of embeds to overcome this.
  • Word counts are no longer displayed at the bottom of posts. As a content manager, I need to know word counts!
  • Comments are no longer displayed at the bottom of posts (because nothing is displayed underneath posts!). There is a “Discussion” setting in the sidebar but the only options are to allow comments and/or allow pingbacks and trackbacks.
  • The Classic Text block feels like something of an afterthought like it’s been thrown in as a way to appease people who want to use the existing editor rather than Gutenberg.
  • I’m not sure how Gutenberg is going to work with accessibility. Right now, it doesn’t work at all. I mean, you can tab through blocks but you can’t access settings or edit content. It’ll be interesting to see how the development team handles this in future releases.
  • It would be so much easier to drag and drop content blocks. Clicking the up and down arrows is fine for short posts but annoying for long ones. Fortunately, there’s a Trac ticket open for a feature that would allow users to sort blocks via drag and drop.

Conclusion

Obviously, in order for WordPress to hit 50% market share, it needs to better cater to new users who find WordPress confusing. Gutenberg aims to do this, but right now developers and marketers who are creating sites are taking one look at Gutenberg and getting scared off because they don’t believe the new editor will be easier to use, and they don’t want to go through the process of re-training.

As for merging Gutenberg with WordPress core, we know it will be sometime this year but there is no deadline. This allows the development team to continue working on it without time constraints.

It’s possible Gutenberg will be released with WordPress 5.0 later in the year. The feature-as-a-plugin still needs a lot of work, but it’s exciting to see where it’s at now and I’m looking forward to seeing how it will develop and improve with each new release.

63 Comments on “Gutenberg Editor: New method of Digital marketing

  1. Hello There. I found your blog the use of msn. This is an extremely smartly written article. I’ll be sure to bookmark it and return to read more of your useful information. Thank you for the post. I’ll definitely return.

  2. I have discovered some new elements from your website about pc’s. Another thing I’ve always presumed is that computer systems have become an item that each house must have for many reasons. They offer convenient ways in which to organize households, pay bills, shop, study, listen to music and perhaps watch tv series. An innovative way to complete these types of tasks is with a laptop. These personal computers are portable ones, small, potent and portable.

  3. It’s a few to discover a trained specialist to that you can aquire plenty of values. In the united states today, none quite loves implying the rest for just about any obtainable in this worry. Insights on how fortuitous So i’m to produce actually observed an extraordinarily incredible internet site much more. It is always individuals like you that will an absolute alteration current during the conceptions these make known.

  4. After study several of the blogs for your site now, and i genuinely appreciate your way of blogging. I bookmarked it to my bookmark internet site list and will also be checking back soon. Pls look at my web page as well and figure out what you believe.

  5. Aw, it was an extremely good post. In notion I must place in writing such as this moreover – spending time and actual effort to make a really good article… but so what can I say… I procrastinate alot and no means apparently go completed.

  6. Definitely believe that which you stated. Your favorite reason appeared to be on the net the easiest thing to be aware of. I say to you, I definitely get irked while people think about worries that they plainly don’t know about. You managed to hit the nail upon the top and defined out the whole thing without having side effect , people could take a signal. Will likely be back to get more. Thanks

  7. This design is steller! You obviously know how to keep a reader entertained. Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!) Great job. I really loved what you had to say, and more than that, how you presented it. Too cool!

  8. There are some fascinating closing dates on this article however I don’t know if I see all of them center to heart. There is some validity but I will take hold opinion until I look into it further. Good article , thanks and we would like extra! Added to FeedBurner as effectively

  9. Thanks a lot for providing individuals with remarkably brilliant opportunity to check tips from this site. It really is very pleasing and packed with fun for me personally and my office co-workers to visit your website particularly three times weekly to learn the latest guides you have. And of course, I am also at all times motivated considering the remarkable opinions you give. Selected 2 points on this page are rather the most beneficial we have all had.

  10. The next time I read a blog, Hopefully it doesn’t fail me as much as this particular one. I mean, Yes, it was my choice to read through, but I truly believed you would have something useful to talk about. All I hear is a bunch of moaning about something you can fix if you were not too busy searching for attention.

  11. Great goods from you, man. I have understand your stuff previous to and you’re just too magnificent. I actually like what you have acquired here, really like what you are saying and the way in which you say it. You make it enjoyable and you still take care of to keep it smart. I can’t wait to read much more from you. This is actually a tremendous site.

  12. Next time I read a blog, I hope that it doesn’t disappoint me just as much as this one. After all, I know it was my choice to read, nonetheless I genuinely believed you would have something interesting to talk about. All I hear is a bunch of whining about something that you could fix if you were not too busy seeking attention.

  13. Its like you read my mind! You appear to know so much about this, like you wrote the book in it or something. I think that you could do with some pics to drive the message home a little bit, but instead of that, this is fantastic blog. A fantastic read. I will certainly be back.

  14. I am just commenting to make you be aware of of the amazing discovery our daughter obtained studying your blog. She came to find too many details, most notably how it is like to possess a very effective helping style to make the rest smoothly fully understand a number of complicated topics. You truly did more than visitors’ expected results. I appreciate you for distributing the insightful, safe, informative and even cool guidance on this topic to Janet.

  15. I would like to show my love for your kind-heartedness giving support to all those that absolutely need assistance with your question. Your real dedication to passing the message throughout had become rather interesting and has consistently helped employees much like me to arrive at their goals. Your new warm and helpful guidelines signifies a great deal to me and even further to my peers. Best wishes; from all of us.

  16. I must express my appreciation to this writer just for bailing me out of such a matter. Just after browsing through the world wide web and meeting advice which are not productive, I believed my life was gone. Living without the solutions to the difficulties you’ve sorted out as a result of your short post is a serious case, as well as those which may have in a negative way damaged my career if I hadn’t noticed your web site. Your personal natural talent and kindness in taking care of everything was vital. I’m not sure what I would’ve done if I had not discovered such a thing like this. I can also at this point look forward to my future. Thanks a lot so much for the expert and result oriented help. I won’t think twice to suggest the sites to anybody who should receive support about this issue.

  17. Today, I went to the beachfront with my children. I found a sea shell and gave it to my 4 year old daughter and said “You can hear the ocean if you put this to your ear.” She put the shell to her ear and screamed. There was a hermit crab inside and it pinched her ear. She never wants to go back! LoL I know this is entirely off topic but I had to tell someone!

  18. Its like you read my mind! You seem to understand a lot approximately this, like you wrote the guide in it or something. I believe that you just can do with some percent to force the message home a bit, however other than that, this is wonderful blog. An excellent read. I will definitely be back.

  19. Thanks for your helpful post. Through the years, I have come to understand that the actual symptoms of mesothelioma cancer are caused by this build up of fluid regarding the lining of your lung and the chest cavity. The ailment may start while in the chest location and pass on to other areas of the body. Other symptoms of pleural mesothelioma cancer include weight reduction, severe inhaling and exhaling trouble, throwing up, difficulty ingesting, and puffiness of the neck and face areas. It must be noted that some people existing with the disease don’t experience just about any serious signs and symptoms at all.

  20. I was wondering if you ever considered changing the structure of your blog? Its very well written; I love what youve got to say. But maybe you could a little more in the way of content so people could connect with it better. Youve got an awful lot of text for only having 1 or 2 images. Maybe you could space it out better?

Leave a Reply