Astra Is Fully Gutenberg Compatible! See How It Works:

As part of WordPress 5.0, WordPress is going to get a brand new content editor, dubbed the Gutenberg Editor.

Gutenberg will bring some major changes to how you create content with WordPress, and making the transition to Gutenberg will also likely bring some minor growing pains as you adjust to the new interface. Because of that, we’re happy to announce that we can at least take one thing off your plate!

We’ve already built Gutenberg compatibility into Astra, which means that all of the sites that you’ve built with Astra will be ready to go as soon as WordPress 5.0 ships.

In this post, we’ll share a quick introduction to Gutenberg in case you’re not already familiar with the new editor. Then, we’ll dig into the ways in which we’ve built Gutenberg compatibility into Astra.

A Quick Introduction To Gutenberg For The Uninitiated

If you’re not already familiar, Gutenberg brings a new approach to content creation in the form of block-based editing.

Whereas the original WordPress content editor is basically one long editing field, Gutenberg separates each little “piece” of your content into a separate block. For example:

• A paragraph is one block
• An image is one block
• A video is one block etc.

You also get some layout blocks, like the ability to divide your content into separate columns. And third-party developers will be able to add their own blocks, which will eliminate the need to use shortcodes in your content.

The upshot is that Gutenberg will:

• Give you more flexibility for creating more complex content and layouts.
• Offer a more visual editing experience.
• Make it easier to include content from your favorite plugins.

Here is a video by Envato that nicely explains it further:

Gutenberg will be released as part of WordPress 5.0, which could come as soon as November 19, though there’s also a backup release date of January 22 if it needs more testing.

If you want to try the new editor, you can play around with a live demo here.

What Makes A Theme Gutenberg Compatible?

Gutenberg is probably the biggest update to WordPress since it was introduced in 2002. It is a complete reimagination of how content should be written.

Below, we’ll illustrate how we’ve implemented Gutenberg compatibility features in Astra and some of the cool ways they work amazingly together.

See Your Front-End Styles In The Gutenberg Editor

One of the ways that Gutenberg can offer a more visual editing experience is by bringing the theme’s front-end styles into the back-end editor.

For example, instead of seeing the same generic typography on every WordPress install, you can see your theme’s real typography even when you’re creating content in the backend.

To offer that visual experience, Astra makes sure that your content looks identical on the front-end and back-end. You can manage:

The Width of the Editor

The width of your content in the editor will be the same as you expect in the frontend.

Typography (font choices, font size, etc.)

All the typography settings from the theme are applied to the content in the Gutenberg editor too.

Colors and Background

The colors and background set within the theme will be fetched and seen in the editor too.

Basically, the typography and colors that you set in the WordPress Customizer will also apply to the Gutenberg Editor.

Enjoy Beautifully Styled Gutenberg Blocks

To help you create more unique content, Gutenberg includes a number of built-in blocks for things like:

• Quotes
• Galleries
• Files etc.

We’ve made sure that all of these blocks will inherit your Astra Customizer styles so that they’ll match the rest of your site.

So no matter what you build with Gutenberg, it should fit right in!

Take Advantage Of The New Full-Width Alignment Option

For some blocks, Gutenberg offers a new full-width alignment option that stretches the block’s content across the entire visible viewport.

Currently, the following blocks offer the full-width alignment:

• Image
• Cover Image
• Gallery
• Posts

However, in order to be able to use this alignment option, your theme needs to specifically enable it.

Well, good news! We’ve gone ahead and done that in Astra, which means you’ll be able to use the new full-width alignment right away.

Note – full-width alignment only works on posts without a sidebar.

Your Astra Theme Settings Are Still Safe And Secure In The Sidebar

Finally, just in case you were wondering what’s going to happen to the Astra Settings options for your individual posts and pages, all your settings will still be available in the sidebar once you make the switch to Gutenberg.

You can refer to our knowledge base article to understand the working of Astra with Gutenberg editor.

With Astra, You’ll Hit The Ground Running When WordPress 5.0 Drops

As an Astra user, we want you to be able to hit the ground running as soon as WordPress 5.0 is released, whether that happens in November or January.

Not only have we already implemented all the current best practices for compatibility with the new editor, but we’ll also keep a close watch going forward so that we can continue to offer you the best experience possible.

And One More Thing…

Having built the best set of page builder addons for Beaver Builder, Elementor, and WPBakery Page Builder, now it is time to build an extension for the official Page Builder of WordPress — Gutenberg!

You read that right! For the past few months, we have been working on Spectra which will enhance what is possible with Gutenberg.

Spectra will introduce custom blocks such as Section, Heading, Info Box, Post Grid, Google Map, Table, Social Share, Menu, Buttons along with the bunch of ready to import starter templates!

UPDATE: Spectra is available on WordPress.org for free! Know more about the plugin on the website.

Cheers!