In Yoast SEO 8.0 you’ve met with the Yoast SEO Gutenberg sidebar. Since the 8.1 release, you can see the snippet preview in action in this sidebar. These are our first step of integrating Yoast SEO with Gutenberg. But there is more to come. Shortly, we’ll also introduce a whole new concept: Yoast SEO content blocks. In this interview with our CEO Joost and CTO Omar we explore content blocks: What are they? What do they have to do with SEO? And what are Yoast’s plans with blocks? Let’s go! 

Optimize for synonyms and related keywords and prevent broken pages on your site with Yoast SEO Premium! »

Yoast SEO: the #1 WordPress SEO plugin Info

Q. We’ve heard the term content blocks often lately. Can you explain what those blocks are?

Omar: Blocks are single components that you can use in the Gutenberg editor. You can see them as separate content items. With these items you can structure your content and build a page. A bit like you’re building a page with pieces of LEGO. Every content block can have its own styling and meta data. Because of this, a block becomes more valuable and this opens up lots of opportunities, also in terms of SEO.

gutenberg

Creation of content in blocks with Gutenberg

Q. What opportunities of blocks are you referring to?

Omar: For us, the advantage lies mostly in the meta data you can include in a block. You can add structured data to your content block, for instance. With structured data you tell search engines in a schematic way what your content is about: is it a recipe, a book or a film? Structured data exists for many things (entities): products, but also blog posts, Q&A’s or How to‘s. You can find them all on schema.org.

Joost: Let’s say you have a Q&A section on your site. If you add structured data to you Q&A block it’s directly clear to Google that this block provides answers to certain questions and what these questions and answers are. Therefore it’s easier for Google to match them up with a certain query. Because of the structured way it’s set up it’s easier to point to an answer directly, which could be an advantage for voice search as well. Voice search typically works well if it can read out loud one singular answer to a question.

Q. If you have content blocks with structured data, does that increase your chance of ranking?

Joost: We can’t say that it will instantly make you rank higher. It will help Google understand your content better, which is always good and might give you an edge. And, of course, structured data is essential, if you’d like to get rich results in the search engines. We also suspect that if you have a page that is schematically divided into blocks with their own – related – keywords, it might be easier to make your page rank for multiple related keywords too.

Q. Ok, sounds great. But how is this connected to Yoast SEO?

Joost: We’re developing Yoast SEO content blocks with schema.org meta data. Shortly, we’ll launch the first blocks: FAQ blocks and How to blocks. This means you’ll be able to select such a block in the Gutenberg content editor. The block will help you fill out all the necessary data for that specific entity. In case of the How to, for instance, it will have fields for the time it’ll take and steps that are required. And, of course, it will add the applicable structured data to those fields. This ensures your content is offered the best way possible to search engines.

Omar: What’s more, it helps content creators and editors to provide the most complete information in a structured way on their site. Some content creators intuitively add all relevant information in their content, but if you use content blocks with structured data you’re sure you’re adding all necessary information to, for instance, your recipe or job posting.

With the introduction of schema blocks, we’re adding content elements to Yoast SEO for the first time. We’ll make sure those elements are well structured and themable. Our front-end developers and UX-designers are currently working on creating tutorials for theming these blocks. Of course we’ve given these elements basic default styles to make sure they can be used out of the box.

Q. What are your plans with them for Yoast SEO? What kind of blocks are you thinking of?

Omar: We have no restrictions, we’ll try to do as many as possible. In addition to the How to and FAQ block, we’re transforming the widgets and shortcodes in our Local SEO plugin to make them available as blocks too. We’ll work first on blocks which we can dogfood on Yoast.com, like Job posting and Event. After that we’ll just go for the popular ones, like Recipe.

Q. It all sounds amazing, aren’t there any drawbacks as well?

Joost: Blocks are very easy to reuse on different pages. But how will Google deal with that? Will search engines see it as duplicate content? With a single banner or buy button they’ll work it out, but what about reusing the same ‘how to’ on multiple locations on your site? Will Google see that as duplicate content? We’re very curious about that, because it’s not possible to canonicalize a single block yet.

6. Does this concept only exists in WordPress or in other CMS’s too? Will we go to a future where there will only be blocks?

Omar: Some other CMS’s are block based already. But most of them are less intuitive than Gutenberg will be. WordPress needs to make this move as well to be able to compete with website builders. It’s nice to see that Drupal is planning to include Gutenberg in their CMS as well, because they see how promising it is.

Joost: The block philosophy of Gutenberg is just very powerful, as the example above shows. So it’s interesting to see where this will go from here. I don’t believe that the future will only be blocks though, pages will still be a thing!

Read more: What is Gutenberg? »

The post Are content blocks the future? And, what’s the benefit for SEO? appeared first on Yoast.

With the launch of Yoast SEO 8.0, we’re revealing our first real integration of with Gutenberg. We’ve been working on this for a long time, and it hasn’t always been easy. Today, we’d like to take you behind the scenes of what it took to bring Yoast SEO to Gutenberg, why we took the approach we did, and how you can follow in our footsteps. Find out how we designed Yoast SEO for Gutenberg.

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

Yoast SEO: the #1 WordPress SEO plugin Info

Don’t know what Gutenberg is? Catch up by reading our Gutenberg explainer article.

The long road

Before we get to the juicy details, a little history (feel free to skip ahead):

Around this time last year, I was made aware of the Gutenberg project by the Yoast leadership. My task was to envision how Yoast SEO could best integrate with this new editor experience. I spent some time playing around with it, and I was impressed by the new UI. The concept of blocks is really cool, both in design as well as functionality. Our conclusion at the end, however, was: this is nowhere near ready for any plugin to integrate with it.

The problem was two-fold:

  • Gutenberg was in its early stages, with layout and functionality changing every week.
  • It seemed as if minimal effort was put into thinking about how plugins should integrate.

It was understandable; the Gutenberg team was still prototyping. But their planning suggested it would launch by the end of the year, so we immediately treated it as an MVP that wasn’t ready.

Over the course of the next few months, we created a project team and started participating in the Gutenberg GitHub repo. We helped out in architecture discussions, made designs, and took the lead on building an API that allows plugins to register their sidebar, as well as building a modal component for when you need more space.

It took us a while to align our internal processes with that of the Gutenberg team. Over time we’ve become better at working together with them, and we’re still working side-by-side to improve the UI, UX and accessibility of Gutenberg to great effect.

We also started the Gut Guys video series, to inform people about this coming change to WordPress.

Best laid plans…

So how do you adapt a plugin as big as Yoast SEO to this entirely new environment?

Our initial plan was to integrate everywhere. Instead of being contained in a single metabox, could we break our plugin apart and put all the pieces in context? Maybe even some kind of SEO mode revealed at the flip of a switch like the gadgets in a James Bond car. This was a fascinating idea; it would mean we could give feedback exactly where it was relevant. Unfortunately, to date, this is still a bit difficult. We expect this will improve as Gutenberg gets closer to its release date.

So instead, we came up with a different solution: if every plugin has to integrate into the sidebar, the least we can do is give them their space, right? The sidebar isn’t very wide, and on small screens the default sections already fill the entire screen, let alone if you imagine a dozen plugins piling up in there, fighting for the top spot.

So we built the sidebar API. This gives you an entire blank sidebar to play with. You can pin it to the interface for quick access, and it puts your plugin in the spotlight.

After that, we began to adapt each feature of the Yoast SEO metabox to work in the sidebar.

Remastering Yoast SEO

We wanted to stick as close to the Gutenberg design language as we could so that the integration would appear seamless. Fortunately, Gutenberg uses a lot of modern design patterns and these mirrored things we were already doing in MyYoast. So merely by modernizing the UI and choosing JavaScript as the base, Gutenberg gave us the opportunity to unify our design across platforms much easier than we could before.

metaboxNeedless to say though, having to fit a 640px metabox into a 280px sidebar isn’t easy. But it did force us to cut away a lot of the cruft. We used to have tabs above the metabox, tabs on the side of the metabox, sections within sections – it was a lot. When moving things to the sidebar, we had to be as economical with space as we could.

Collapsible headers

For the analysis, we introduced collapsible headers for each section. This vertical design helps keep things organized and focused. It’s also a much nicer pattern to work with in an increasingly mobile world. Similarly, Readability is no longer a separate tab but appears right above the focus keyword analysis.headers in gutenberg

And even when collapsed, you can see your focus keyword and the resulting SEO score at a glance. We hope to bring this back to the publish box again too, so you can always keep an eye on your SEO.

Because some of these sections have a lot of features, we had to bump the font size of the headings up to 16px (from the default 13px for sidebar text and headings). That was one of the details where we intentionally departed from Gutenberg’s design language to improve the clarity of our interface.

The toggle and the input fields, too, are little details where we chose to use our version instead of the default Gutenberg one to give things a bit more depth and usability.

New smileys

We also introduced smileys to the bullets, to improve the clarity for people with visual impairments. Our accessibility expert Andrea is very pleased with those.

Multiple focus keywords

Since we can’t do horizontal tabs anymore in the sidebar, we’ve made adding multiple focus keywords an inline action. Whenever you’ve added a keyword, the option to add another one appears just below it. It only shows precisely what is needed, and that saves space.additional keyword

Cornerstone content

You’ll find the cornerstone content setting in its own section, with some extra explanation text. We’ve added this kind of context to every section so you can get a quick idea about what each section does, and a link to learn more if you want.

cornerstone content toggle

Internal linking

Internal linking is now also integrated into the meta box instead of being a separate section. We have a lot of exciting ideas with this feature in the future.

gutenberg sidebar internal linking

Snippet and social previews

The snippet and social previews present a unique challenge because you cannot reduce these to 280px. If we want to give you an accurate preview of a post on Facebook or Twitter, you have to see it exactly as it will appear. Therefore these functions are still in our ‘old’ meta box format. But we’ve got a plan for this in Yoast SEO 8.1 – which brings us to the next section:

What’s next

This new version of the Yoast SEO meta box is a big step forward in design, but you could argue that regarding functionality it hasn’t changed all that much, and you’d be right. But just as the Marvel Cinematic Universe operates in phases, so too is this just Phase One of our Gutenberg integration timeline.

The first thing we’ll be doing for Yoast SEO 8.1 (regarding our Gutenberg integration) is introducing modals.

New modal in GutenbergThis will put Google, Facebook, Twitter et al. into one convenient box that will appear over the content. This will provide plenty of space to house everything, and it will all be presented with the new UI and template variables introduced in Yoast SEO 7.7.

dockWith these modals in place, we can entirely switch from our classic metabox to our new sidebar – that is, if you want, because we’ll offer the ability to toggle between the two. And that includes the classic editor. All of the above design improvements will come to the current WordPress editing experience too, so even if you decide not to use Gutenberg, you will still be able to enjoy our improved interface.

We’re also updating our extensions like News SEO and Local SEO to work with Gutenberg. These settings will soon also be available in the sidebar, and come with some accessibility improvements too.

howto structured data with yoast seoAnother thing we’re working on are some blocks that make it easy to add Schema support for specific types of content. The how-to block above is one of the first but we’ve got more planned, stay tuned.

What you can do now

You may not have a whole team of developers at your disposal, but you can still do a few things to prepare your plugin or theme for Gutenberg.

First of all, check if your plugin works well with Gutenberg

Like we said, plugins will by default appear as a classic metabox in Gutenberg, and should still work if they don’t do too many fancy things. But check that. Install the Gutenberg plugin right now and see how your plugin or theme handles it.

Learn how you can make your plugin or theme compatible with Gutenberg

Basic compatibility with Gutenberg shouldn’t be a lot of work. There isn’t a ton of official documentation yet, but here are a few helpful links:

If you want to get a bit more technical:

Start thinking in blocks

Not everything about a plugin needs to be put in the sidebar. You can solve a lot of things with custom blocks. We’re building a few too for specific Schemas and Local SEO widgets. So spend some time using Gutenberg and building different things with it, so you get a feel for how blocks work. It might give you some unexpected ideas.

As a designer, take advantage of this Sketch template for WordPress mockups by 10up. It already includes Gutenberg interface elements to get creative within your mockups.

For developers, there is a great block starter kit by Ahmad Awais, and Atomic Blocks has some fun custom blocks to look at for inspiration. Shortcodes too are an excellent fit for blocks. Gary Pendergast wrote a useful script that shows how you can convert shortcodes into blocks.

Start small

Above all, start small. If your plugin or theme isn’t broken, don’t go crazy rebuilding it in React. Try making a custom block, and play around with the sidebar elements until you are comfortable with this new design language. That design language is still evolving every day, so stick with the basics. Use what there is and see what you can build with it.

Dream big

The future of Gutenberg goes well beyond just text editing. Eventually blocks will also be available in sidebars and maybe even directly in the WordPress customizer. If you’re a little creative, you can already use Gutenberg for page layouts now. Atomic Blocks offers some useful layout blocks for example and a theme that goes with it. And heck, look at what XWP made with a few custom blocks. If you’re up for it, this could be a chance to pave the way for modern design in WordPress.

The future of WordPress is exciting. We can’t wait to see what you make with it.

Read more: What is Gutenberg? »

The post How we designed Yoast SEO for Gutenberg appeared first on Yoast.

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

Gutenberg is 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 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. We’re getting closer to the launch and 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. Very shortly, we’ll be able to show you the first results of their hard work! So keep an eye on our plugin releases.

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. Both Marieke and Willemien had reservations regarding writing and editing in Gutenberg.

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 have been 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 of right away, as we’re focusing on giving you the best possible basic integration first. 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 WordPress: 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.