Improved Block Editor Experience with Astra

When we develop the Astra theme, we constantly focus on improving the performance of your website. As a result of this, we have updated the fundamentals of combining functionality and visual appeal. The website should be simple to use and appealing to the eye. Here are the major changes that we have updated in the new version of the Astra theme.

Enhanced block editor user experience

A study says that the usage of CSS on your website is directly proportional to the speed of your website. The more CSS you use, the slower your website will load. With the speed of the website being one of the major ranking factors, it is very important to minimize the usage of CSS. That’s what we have done with the block editor. We have used the built-in CSS of WordPress and reduced the usage of CSS in the theme.

Let’s take a closer look at all the major changes:

Latest Posts block

In the new version, we designed the latest posts block in such a way that it automatically highlights the headings, changes the color of the link and meta tags, changes the font size based on the theme, and many other features. 

Pullquote & Quote block

The pull-quote block can quickly and easily make short snippets look beautiful and also adds value when you try to attract the users to a particular portion of the website. We improved the User Experience with the new version of the Astra theme by updating the border and quote positions. Previously, when you moved the quote to the middle-centered or right-centered position, it still showed as left-aligned. This has now been changed and looks much better. We also fixed a few minor bugs in this section.

Default layout for Group block

When users adds a group block, by defualt it will inherit the layout from the default layout setting. The user can turn this off by using the slider next to the setting.

Full Width Layout update

For the Group and the Cover blocks “Full Width” layout will be set on drag-drop. By default, the content will be sticked within the Astra container width area.

Improvements on the theme.json

A website’s design influences how your target audience perceives your brand. The impression you make on them can either persuade them to stay on your page and learn more about your company, or it can persuade them to go to a competitor’s page. This is why we’ve added more weapons to the block editor, allowing you to design the block more creatively.

Link Color Change

We’ve added a new Link color option in the colors group to the latest version of the Astra theme, allowing you to change the color of the links that appear inside the block.

Margin Improvements

We’ve added a margin option to the dimension control to give you more control over the dimension.

Padding Improvement

The improved padding option will allow you to select the space in which your block will appear. Inner block spacing allows you to control the distance between inner blocks and the container block, elevating the overall user experience.

Border Control Improvement

We’ve also added border control options, which allow you to choose and change the width, style, color, and radius of the block.

Improved design settings of Meta tags

We’ve made significant changes to the meta tags and how they appear on your site. Meta settings have been redesigned, optimized, and made more elegant. Here are a few standouts.

Disable Header

Added a new meta option called “Disable Header” – Previously, we had three options for disabling header parts (disable above, disable primary, and disable below), but no global option to completely disable the header.)

The “Disable Page Title” meta toggle option has been renamed “Enable/Disable Eye Icon” and is now located alongside the title. You can hide or show the page title just by clicking on the eye icon next to the page title.

Other changes in the Meta Settings

Apart from these, now you have better control over the sidebar and the content layout with the visual layout designs to choose from right inside the block editor. Page Elements where the number of toggles has been reduced or will appear conditionally which in turn will load the page faster.

Advanced header setting

The advanced header setting will let you have better control over the header section. When you choose this option, a pop up will appear on the screen with more settings that will let you modify the following options

Performance improvement

With all the changes made, the overall performance has increased significantly. The new Astra theme editor now loads 1.21 seconds faster than the previous version and 0.26 seconds faster on the frontend. Below is the performance comparison of the older version and the new version.

Functions	Master Version	Latest version
Editor	Static CSS: 21 KB Dynamic CSS: 21.4 KB Page Size: 588 KB	Static CSS: 15 KB Dynamic CSS: 7 KB Page Size: 547 KB
Frontend	CSS: 9.77 KB Page Size: 111 KB	CSS: 4.44 KB  Page Size: 106 KB

New Block Editor Under Customizer

We have added a powerful option to the customizer to change the padding of the entire website. You can access this option by navigating to Appearance > Customize > Global > Block Editor. You can now set custom paddings to all the blocks on your website with this global option. This setting will be overwritten if any of the blocks have any custom dimension set.

Users now have two new padding preset options like “Compact” and “Comfort“. The compact option is preset with the padding of 2em and the comfort option is preset with 3em. These options will be application to Groups, Columns or a Cover block.

How to use the Block Editor to set the padding manually?

Improvement on the Featured Images of the Posts page

With the latest version of the Astra theme, you can now disable the featured image from the single post page; however, still, show it on the post list page. To access this option, simply click on the Settings button on the top right corner of any single post page and check the box just below the featured image option. Once checked, this option will enable the featured image on the post list page; however, it will be disabled on the single post page.

Change the default content width for the theme

With the latest version of the Astra theme, you can now change the default content width (910PX) to anything based on your requirement. Simply add the following filter to the child theme. To update the wide width for your layouts, please update Container Width from Customizer > Global > Container.

function astra_update_block_content_size( $content_size ) {
	return '840px'; // Default 910px overridden by 840px.
}
add_filter( 'astra_block_content_width', 'astra_update_block_content_size' );

Few more filters

In v3.8.3 we have released a more enhanced block editor experience with some new things, improvements, etc. Here is the short list for that –

• New: Padding presets like Compact, and Comfort for core block sections
• Block layouts will sync with Astra container layouts, so as per the container layout-block layouts will work.
• Improved default spacing of Astra containers to look fresh theme setup UI elegant.

To avail these features please use the below filters in your child theme –

add_filter( 'astra_get_option_customizer-default-layout-update', '__return_true' );
add_filter( 'astra_get_option_wp-blocks-v2-ui', '__return_true' );