Progress on the Gutenberg project, the new content creating experience coming to WordPress, has come a long way. Since the start of the project, there have been 30 releases and 12 of those happened after WordCamp US 2017. In total since then, there have been 1,764 issues opened and 1,115 closed as of WordCamp Europe. As the work on phase one moves into its final stretch, here is what you can expect.

In Progress

  • Freeze new features in Gutenberg (the feature list can be found here).
  • Hosts, agencies, teachers invited to opt-in sites they have influence over.
  • WordPress.com has opt-in for wp-admin users. The number of sites and posts will be tracked.
  • Mobile app support for Gutenberg will be across iOS and Android.

July

  • 4.9.x release with an invitation to install either Gutenberg or Classic Editor plugin.
  • WordPress.com will move to opt-out. There will be tracking to see who opts out and why.
  • Triage increases and bug gardening escalates to get blockers in Gutenberg down to zero.
  • Gutenberg phase two, Customization exploration begins by moving beyond the post.

August and beyond

  • All critical issues within Gutenberg are resolved.
  • There is full integration with Calypso and there is opt-in for users there.
  • A goal will be 100k+ sites having made 250k+ posts using Gutenberg.
  • Core merge of Gutenberg begins the 5.0 release cycle.
  • 5.0 moves into beta releases and translations are completed.
  • There will be a mobile version of Gutenberg by the end of the year.

WordPress 5.0 could be as soon as August with hundreds of thousands of sites using Gutenberg before release. Learn more about Gutenberg here, take it for a test drive, install on your site, follow along on GitHub and give your feedback.

Being part of the blog team at Yoast I spend much time writing, correcting and editing content in the editor. Of course, I’ve heard about Gutenberg (it’s quite the thing here at Yoast) and glanced over it, but I didn’t take the time to do much with it myself. When the Gut Guys asked me if I would like to feature in one of their videos I couldn’t escape it anymore, I had to start testing Gutenberg for real! So I did. As Marieke already wrote about using Gutenberg as a writer, I’d like to share my experiences with using Gutenberg as an editor.

Free course! Learn what makes your site rank with our SEO for beginners training »

Free SEO course: SEO for beginners Info

Gutenberg?

In case you’ve missed it: the content editor in WordPress is going to get a complete overhaul. Instead of just a big blank field where you type your text, with some options to format it on top of your screen, it’s going to transform into smaller blocks. You can select a block to have a particular appearance, for instance, a paragraph, a heading or an image. And you can move these blocks around or duplicate them. In the sidebar, you’ll have more options to do all kinds of things with your content. That’s it in a tiny nutshell, if you want to know more, read Edwin’s highly informative piece on what Gutenberg is exactly.

Start the test!

You can already install the Gutenberg plugin and already use Gutenberg on a (test) site to see how it works. Another option, if you want to get acquainted with Gutenberg, is to go to testgutenberg.com and create and edit some content right there in your browser. Not all functionalities work as they should there, but it’ll surely give you an impression.

First impression

I have to admit I was a bit hesitant to use Gutenberg in the beginning. I guess it’s just hard to let go of what you’re used to and start learning something new. Moreover, in my previous job, I’ve worked with the Oracle ATG CMS which works with blocks as well, and that CMS has a very steep learning curve. On the other hand, that experience also made me already see the advantages of using blocks with pieces of content, instead of one big field.

But starting out I was pleasantly surprised! This didn’t feel that different at all. OK, I had to click around a bit to find the functionalities I was looking for, but that was to be expected. It felt quite intuitive to me. I happily clicked around adding, moving and editing blocks and jotted down what I noticed. I tried to test things I often do as an editor, like copying content people shared with me in Google docs, edit a bit of HTML somewhere, search for a certain paragraph, move them, change a heading or adding a conclusion to a text. Here are my findings:

Copy content from Google Docs

Copying content from Google Docs to the classic WordPress editor can be a hassle. But with Gutenberg, it’s much easier. You copy it from your doc and paste it right into the editor. To my surprise, this gave an excellent result. No weird span tags, the headings where correct, paragraphs transferred correctly, and the links were still in place. Nice! I didn’t discover any flaws at all. For me, this is an enormous improvement, as it is not that easy in the classic editor. Of course, I’m aware there are workarounds for issues with it in the current editor, but how wonderful if we wouldn’t need those!

Switch a block to HTML in Gutenberg

If you want to edit a piece of content in HTML you can click on the three dots in the upper right corner of a block and switch to HTML:

This feature made me so happy! We’ve got some pretty lengthy articles here at Yoast, especially our cornerstone articles, and the time I’ve spent to find exactly that sentence or paragraph that I wanted to edit… I think this feature will make me work much more efficiently.

Search for a paragraph and move it

In Gutenberg, you can find a table of contents in the sidebar when you click on the information icon above your article. I didn’t really expect to find it there – perhaps some ‘structure-like’ icon would make more sense – but I like the fact this table of content exists. I can click on a heading and jump to that part of the copy directly.

If one of our authors has written a long article, this comes in handy! When editing a text, I sometimes search for a paragraph because I’d like to change it a bit, add something or move it to another location to improve the flow. In that case, I can just drag and drop a block and move it to another location. You can also use the upward or downward arrow on the left side of the block to move a block up or down. Not sure if I would use that much though.

Placing the mouse correctly to make the hand icon appear to move the block can be a bit of a struggle. I also noticed that if I’d like to move two blocks together, for instance, a paragraph and a header, you’d have to move them separately. At least I didn’t achieve to select and move them together.

Headings and anchors in Gutenberg

Headings are essential for your users and SEO. They guide the reader, show the structure of your text and should mention the most important (sub)topics of it. In my daily work, I notice that sometimes writers get enthusiastic and start writing a lot of paragraphs after one single subheading. In that case, the readability analysis of Yoast SEO will throw off this notice:

readability too much text subheading

So I’ll have to add some subheadings to improve the readability of the copy, which is easy with Gutenberg. Just click on the plus or hit enter where you want the additional heading to be. It will be an H2 by default — which I like — but you can quickly change it to an H3 or H4 if you want.

add heading in gutenberg

Select the right heading for a block

Ok, this might not be the hardest thing to do in the classic editor either – especially if you know you can use ## before the heading and hit enter to create an H2 – but not everyone knows these kinds of tricks.

Easily create an HTML anchor to link to a heading

And what I like most… there is a way to add an HTML anchor to your heading without having to switch to HTML! Click on Advanced on the Block tab in the sidebar, and the option will unfold.

Just add the text you want, let’s say ‘example’, and you can link directly to this heading from everywhere by adding #example to the URL of the page! No need to add id=’example’ in the HTML of your copy. Awesome, right?

Duplicate and share blocks

Reusing a useful piece of content you’ve already created is music to every web editor’s ears. In Gutenberg, you can duplicate a block (create an exact copy of it in your article), or you can share it. If you share it, you can use it again on another post or page. It’s one of the few things I sometimes actually miss from Oracle ATG, a feeling I don’t get very often ;-)

“But what about duplicate content?” I hear you think. Of course, you should reuse blocks sensibly and be aware of not duplicating or recreating entire pages. This could confuse Google which page to show in the search results.

But sometimes you’ve created a nice-looking layout which you’d like to reuse. Or you’ve written a small piece of copy you’d like to add in multiple articles. With the shared block function, you won’t have to type it over and over again or copy and paste it all. I can imagine we could use this to link to our cornerstones at the end of a post, or if we want to add a short notification to a certain set of posts. And I’m sure much more great use cases will come up!

Optimize your site for search & social media and keep it optimized with Yoast SEO Premium »

Yoast SEO: the #1 WordPress SEO plugin Info

Adding images to the content

As an editor, quite often we add illustrations and screenshots to a blog post. I tried to add some using Gutenberg and it’s easy. Just hit enter, click on the plus and upload the image you want to add. What I liked immediately is that you can write a caption below the image right away. Good captions can help the reader to understand what the image is about. Just seeing this option might trigger the writer to add one, which could increase the reader’s understanding of the copy. In the sidebar, you can add an alt text too, which is great.

I got a little less enthusiastic though when I tried to select and scale the image. When I selected it, it selected the paragraph below it too. This might be caused by the fact that I aligned the image left or right, but I think it shouldn’t happen anyway. The scaling functionality appeared to be off a bit too. It only seemed to scale properly when I moved the mouse vertically, not horizontally, which took me a while to find out. This probably still needs some work.

No issues?

Until so far this has been a fairly positive article. What about the downsides? To be honest, I didn’t encounter much inconvenience working with the editor yet. What I found a bit odd is that the plus only appears after you hit enter after a paragraph. For me, it would make sense if it would be there and you could click it after you’ve finished your sentence. But that’s just a minor thing. Apart from that, the image editing functionality requires some finetuning, as I explained. But that’s about it!

Go and try it out too!

I’ve had a very positive experience working with Gutenberg and got more excited along the way! But I can only judge it as an author or editor on our blog. Of course, there are much more roles and technical implications that don’t directly affect me in my work. That’s why I’m curious how other people experience using this editor. So I’d say, don’t be scared and go for it! Use Gutenberg and try to do with it what you usually do. And please share your findings in the comments below!

Read more: ‘Gutenberg: Concepts for integrating with Yoast SEO’ »

The post Using Gutenberg as an editor: does it make my life easier? appeared first on Yoast.

You might have felt some tremors in the WordPress world. There is something brewing. Something called Gutenberg. It’s the new editing environment in WordPress and the impact it’s going to have will be massive. Some welcome it with open arms, while others are critical. There is also a large group of WordPress users who don’t have a clue what’s going on. Here, we’ll introduce Gutenberg.

Optimize your site for search & social media and keep it optimized with Yoast SEO Premium »

Yoast SEO: the #1 WordPress SEO plugin Info

It’s the first step for a bright new future for WordPress

It’s something many people often gloss over, but Gutenberg is not just a new editor for WordPress. It’s the start of something much bigger. Gutenberg lays the groundwork for incredibly exciting developments. Gutenberg is stage one of a three-pronged roll-out strategy. First, WordPress will get a redeveloped editor, after that it the project will focus on page templates and in the final stage WordPress will become a full site customizer. You can imagine, this gives us endless possibilities and it is a necessary step to keep WordPress the #1 CMS for years to come.

Today, we’re focusing on stage one. The new Gutenberg editor will land in WordPress 5.0 sometime this year. As it stands now, it is not nearly finished, but loads of people are working around the clock to turn this editor into a solid and stable product. We have a big team working on it as well, both on the editor itself and our integration with it.

Opening Gutenberg for the first time

When you open the new editor for the first time you’re probably looking for the interface we have all grown accustomed to. That, however, is gone. We now have a very clean writing environment, with great typography and lots of space for your content to shine. On the right-hand side, you can open the settings — per document or per block — by clicking on the cog icon. Clicking on the three dots beside that cog lets you switch to the code editor so you can make your edits on the code side of things.

gutenberg blank canvas

Now, seeing this screen might cause you to turn around and run — please don’t. We all know people have a hard time changing from one thing that they know well to something new. Even Marieke had reservations regarding writing in Gutenberg, which she addressed in a post.

People find it hard to accept change when they don’t see why it’s necessary to change something that was working ok. Well, in this case, it’s relatively easy to understand: to get ready for the future, WordPress needs to adapt. Gutenberg introduces concepts and technologies that help make WordPress future proof. Most visible right now? The concept of a block.

In Gutenberg, everything is a block

Gutenberg introduces blocks. Previously, your content lived inside one big HTML file and for every enhancement there had to be something new: shortcodes, custom post types, embeds, widgets and the like. All with their quirky interfaces and weird behavior. Now, you can build your content precisely like you make a LEGO set: all from one box, following a standardized and straightforward set of instructions. In the animated gif below, I’ll quickly show you some blocks and add an image as a block:

By using this blocks concept, you can now determine what every part of your content is. Not only that, you can define their specifications per block. So, for instance, you can turn a single line of text into a quote by changing its block type. After that, it gets a new set of options that you can set. You can change the type of quote, its placement, text decoration et cetera. This goes for all blocks. There are blocks for, among other things:

  • Paragraphs
  • Lists
  • Quotes
  • Headings
  • Code
  • Images
  • Galleries
  • Shortcodes
  • Columns
  • Buttons
  • Widgets
  • And a ton of embeds

Every block you make can get its own layout and settings. And you can save these as reusable blocks!

Gutenberg

Reusable blocks

One of the coolest things about Gutenberg is reusable blocks. Think of these as a completed block that you can save along with its settings. For instance, if you’ve made a cool looking layout for the intro of your blog articles, you can save this as a reusable block. After that, you only have to go to Add Block -> Saved to pick your reusable intro block. How cool is that!

This is an incredibly basic example, but you can think of a lot more complex uses for this! How about a complete gallery where you only have to drop in the images. Or a multi-column article template with great typography for killer blog posts. And of course, developers can hook into this as well, so there are bound to arrive some great blocks that’ll make our lives so much easier. There is no limit to this. This is all made possible because we have full control over all individual blocks.

Yoast SEO and Gutenberg

We’ve been heavily investing in Gutenberg since the beginning. We have several developers that are helping to improve Gutenberg full time. Also, we are actively researching how, why and where we should integrate Yoast SEO inside Gutenberg. Even for us, the possibilities are endless. We won’t be able to build everything we’re dreaming up right away, as we’re focusing on giving you the best possible basic integration from the moment Gutenberg gets released. But, keep in mind, there is a lot more to come from us!

Let The Gut Guys explain Gutenberg for you

Two of the most active Yoasters in the Gutenberg development team is our UX designer Tim and software architect Anton. These guys are so passionate about Gutenberg that we’re featuring the dynamic duo in an exclusive video series called The Gut Guys — Gut as in ‘good’. They will show you around the Gutenberg editing experience and explain the why and how of the new editor. We’re regularly adding new installments. Watch it and subscribe!

Need more? Check this essential talk

We know thinking and talking about Gutenberg can be tiring, but that’s mostly because we are keeping those thoughts in the now. We should most definitely look at the broader picture and see where Gutenberg can take WordPress. To explain that, I’d like to ask you to invest 45 minutes of your time in watching this essential talk by Morten Rand-Hendriksen.

Conclusion to what is Gutenberg?

There’s no beating around the bush: Gutenberg is coming. We’re getting ready for it and you should as well. The new editor will probably take some getting used to and it might break some stuff, but in the end, we will get a much more streamlined environment with a lot of cool possibilities down the road.

The most important thing you can do right now is installing the plugin. Play with it, test it, break it. Add every issue you find to Gutenberg’s GitHub: things that don’t work or should work better. We need as many eyes on this as we can, so we need you. Don’t just talk and yell: contribute! Your contributions will make or break this project.

Read more: ‘Gutenberg: Concepts for integrating Yoast SEO’ »

The post What is Gutenberg? appeared first on Yoast.

Gutenberg is coming. It’s a really big thing in the world of WordPress. At Yoast, we are really busy making sure our Yoast SEO plugin integrates nicely with the new editor. So we talk and think and a lot about Gutenberg. But as a writer, I didn’t really use Gutenberg yet. And this made me wonder: What is it like to use Gutenberg? Does writing with Gutenberg feel any different? Is it easier? Will I have more fun? Is it a good writing experience? In this post, I’ll share my thoughts on the new editor from a writer’s perspective. 

Get the most out of Yoast SEO, learn every feature and best practice in our Yoast SEO for WordPress training! »

Yoast SEO for WordPress training Info

What is Gutenberg?

Gutenberg will become the new default editor of WordPress. The biggest change from the current editor is the introduction of blocks. In the new editor a paragraph, a title or a picture will be a block. You can add a new block, choose what kind of block it will be, and easily edit it the way you want to. Blocks are flexible and can be shifted dynamically around the page.

With the plus sign you can add a new block in the Gutenberg editor

Read more about the Gutenberg project on WordPress.org. The Gutenberg editor is going to be released in the 5.0 update of WordPress. It is not clear when exactly this update will appear, but it should happen somewhere in Spring 2018.

Starting out as a skeptic

I have to be honest. I was rather skeptical about Gutenberg. Prejudiced even. But, I installed the Gutenberg plugin on my personal website and started writing a blog post. Trying to be as open minded as possible. And, I can’t deny: it was really easy. I even forgot for a moment I was testing out a new editor. It didn’t feel weird or new to me at all. Main conclusion: I’m really enthusiastic about Gutenberg.

Intuitive and easy to use

The Gutenberg editor has an intuitive design. For me. And if it’s intuitive for me, it basically is intuitive for everyone. I am not that savvy. It didn’t take much effort to find out how to choose a new heading. It took me just a little bit of clicking to figure out how to insert a picture in my blog post. I could do all the things I do while writing a blog post, just as fast as I always do. At the same time, my screen was rather empty. I liked that. There was little distraction.

Some great advantages over the old editor

The Gutenberg editor has some great assets that could genuinely help people to write better texts. I like that every time you hit enter, a new block emerges. If you go on typing, you’ll create a new paragraph. In my opinion, most writers do not think enough about why they start a new paragraph. They just put whitespaces in when they feel like it. Hitting enter in Gutenberg will create a new block. I believe this will help people to think more about the structure of their text.

Hit enter and Gutenberg will create a new paragraph.

I also love the fact that the editing options are not hidden away at the top of your post. If I want to add a link in my text in the old editor, I have to go all the way to the top of my blog post. That’s a lot of scrolling.  I think I will add much more links to my text when using Gutenberg. Because it is so much easier. And adding (internal) links to your blog posts is important for SEO. Inserting pictures has become much easier too. 

Learn how to write awesome and SEO friendly articles in our SEO Copywriting training »

SEO copywriting training Info

Some downsides…

I understand why dynamic blocks are appealing. And I do think the flexibility of the blocks will come in handy to get the correct place for a picture or a quote. However, I do not like the fact that it’s so easy to dynamically shift paragraphs and headings. I’m a bit scared that people then feel free to shift their paragraphs while writing. And, from my point of view, the best texts are written after the author carefully established the structure of his or her argumentation. No dragging and dropping there.

Another downside was my experience as I tried to copy and paste a text from Google docs in the Gutenberg editor. In the current editor it takes a lot of work to get the formatting of your article right. That did not work perfectly in Gutenberg either. It does strip out the superfluous HTML code though. Other things went well, like transferring headings, but some paragraphs were transformed in a single block, while other paragraphs were merged together in one block. I could not figure out why. As lots of writers won’t write in the WordPress backend, but in another editor, this experience should be really smooth. A flawless experience would be a tremendous improvement compared to the current editor.

Conclusion

For me, writing with Gutenberg was not all that different from writing in the old editor. And, scrolling down gave me the Yoast SEO meta box, with suggestions to improve my writing and SEO. Yoast SEO already works. The Gutenberg editor offer lots of chances to improve our plugin. We’re working on awesome redesigns to make the writing experience even more awesome. So stay tuned!

Read more: ‘User-testing Gutenberg’ »

The post Writing with Gutenberg appeared first on Yoast.