No results found. Try again with different words?

Search must be at least 3 characters.

How Does Astra Work with the Gutenberg Editor?

Sidebar Image

Did not find a solution? We are here to help you succeed.

Astra gives you a great experience of building a page with Gutenberg editor. Below are the points that explain how Astra suits best with Gutenberg editor.

Support Container Layout 

Container layout set for Astra from the customizer will be applied to the Gutenberg editor as well. So that user will get the experience of how the final page will look in the frontend. Read more about the container layout here.

Gutenberg editor with Boxed / Content Boxed – Container Layout

Gutenberg Boxed Layout

Gutenberg editor with Full Width / Contained – Container Layout

Gutenberg Contained Layout

Note: It is not recommended to use Full Width / Stretched layout with Gutenberg editor. It is specially designed for page builders which need full control over the container width. So if you enable Full Width / Stretched layout, the content will not be stretched to the fullest with Gutenberg editor but will be stretched in the frontend.

Support Wide / Full width alignment options

Gutenberg editor provides wide width and full width option for blocks like Image, Image Gallery, Cover Image, Posts etc. Astra supports these width options depending on the selected container layouts.

Wide width option will display full image but will have some space around it. While full width option will stretch the image end to end. In Boxed and Content Boxed container layout, full width image will stretch as per the width of the box. That means it will not display out of the box.

Image with Boxed / Content Boxed – Container Layout

gutenberg image boxed

Image with Full Width / Contained – Container Layout

gutenberg image contained

Note: If the sidebar is enabled for the page, the image will not be stretched to fullest. As doing so will overlap the sidebar content.

Backend same as a frontend 

Gutenberg editor has the object to provide a visual editing experience. So with Astra, we make sure that the editor looks similar to the frontend. The customizer settings for background colors, text colors, typography etc. can be seen while editing the page. So that you can have an idea of how the page will look in the frontend.

Style blocks nicely

Astra is tested with every block of Gutenberg. Customizer settings will be applied to all Gutenberg blocks.

Support for Astra shortcodes

Astra shortcodes that come with Astra Pro Addon plugin will work best with Gutenberg editor.

Was this article helpful?
Sidebar Image

Did not find a solution? We are here to help you succeed.

Related Docs

Join 1,653,898+ Happy Site Owners Using Astra

Whether you are a beginner, small business owner, or professional web developer, Astra provides all the tools you need to easily build your beautiful WordPress website.

REWIND

YEAR IN REVIEW

Download is Just A Click Away!

Membership Retention Checklist Download

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form
Scroll to Top
Now choose your preferred
page builder addon
Choose your preferred page builder addon

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form