Improved Spectra Compatibility

Spectra is 100% beginner friendly and enhances the default WordPress block editor, Gutenberg. Using Spectra, you can power up the Gutenberg editor with advanced and powerful blocks that help you build websites in no time! Our goal with Spectra was to bring out a product with everything you need to build excellent websites coupled with the best user experience.

Spectra compatibility was introduced in Astra 3.9.4 and has been part of the theme ever since. This document explains the alignment and spacing improvements and how to enable them if you were using Astra before version 3.9.4.

Better alignment with Page Title for Spectra blocks in Editor

We have improved the page title alignment and the container alignment of the Spectra blocks and the Gutenberg core block. All the container block types are now supported with the Spectra plugin and the alignment of all the blocks such as Full Width Contained, Content Boxed container and Boxed Container layout look better than ever.

Better alignment with Page Title for Spectra blocks in the Front-End

These alignments are improved in the front end as well without any extra effort. This will make creating the website using Gutenberg and Spectra along with the Astra theme much cleaner and easier. In the new version of the Astra theme, the page title, headers, paragraph columns, and core blocks and perfectly aligned.

Matching Front-end and editor experience with Specta

We have also improved the paddings and margins on this new version of the Astra theme. As always, we have also fixed a few minor bugs along the way.

User Experience:

If you installed Astra after version 3.9.4, these improvements are active automatically, no action needed.

If you installed Astra before version 3.9.4 and have since updated, the improvements are not applied automatically to preserve backward compatibility. To enable them, follow the steps below. If you are not sure how to insert the code, please refer to this article.

Switch to “Compact“, “Comfort“, or “Custom” mode from Appearance > Customize > General > Block Editor > Core Blocks Spacing. Once done, add the filter below:

/* Enable Spectra compatibility improvements (for users who installed Astra before 3.9.4) */
add_filter( 'astra_spectra_gutenberg_compat_css', '__return_true' );