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.

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.

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.

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' );

How To Remove Google Fonts Suggestions?

To remove Google Fonts suggestions from the Customizer.

You can insert the following filter in your child theme’s functions.php file –

add_filter( 'astra_google_fonts', '__return_empty_array' );

If you don’t have your Child Theme installed, please check this article on how to do it.

If you are not sure how to add this code, please check this article.

Due to this, you might have noticed the repeater fields not being displayed as expected in the Widgets area.

To resolve the same, the Astra Widgets update v1.2.10 you will find a notice as shown below, mentioning to Save/Update the widgets and refresh the page once.

As per the feedback from users and our designer’s request we have modified these settings.

Now, the Content Background color will work for Full-width contained & stretched layouts as well. But, only in the case of Full Width & Fluid Site layouts.

For old users, please use the below code to apply this change. (For new users this will work on your environment without any changes or code):

add_filter( 'astra_get_option_apply-content-background-fullwidth-layouts', '__return_true' );

If you don’t have your Child Theme installed, please check this article on how to do it.

If you are not sure how to add this code, please check this article.

What Is The Result?

The related posts section is displayed below your post content by default. Also, it’s a great feature that helps your users find additional interesting content from the same category. But, at the same time, this means that your users might overlook the comments section before moving to a related post.

Thus, you might want to move this section below the comments section, allowing your user to first go through comments. Further, you can do this easily by adding a custom code to your website.

How To Do This?

To disable Astra Global colours in Elementor, you need to add an action. You can add the following custom code to the functions.php file of your Child Theme:

# Move Related Posts Below Comments

add_action( 'astra_entry_before', function() {
	add_filter( 'astra_get_option_enable-related-posts', '__return_false' );
} );
add_action( 'astra_primary_content_bottom', function() {
	add_filter( 'astra_get_option_enable-related-posts', '__return_true' );
} );
add_action( 'astra_template_parts_content_top', 'action_to_update_related_post_markup', 1 );
function action_to_update_related_post_markup() {
	$related_post_markup_instance = new Astra_Related_Posts_Markup();
	add_action( 'comment_form_after', array( $related_post_markup_instance, 'astra_get_related_posts' ), 10 );
}

If you don’t have your Child Theme installed, please check this article on how to do it. 
If you are not sure how to add this code, please check this article.

Astra Global Colors In Elementor

When designing your website, you will notice that both Elemetor and Astra global colors will be available in color settings. 

Sometimes, this can be confusing. Also, you might want to limit user rolls with Elementor access to using only Elementor Global Colors.

How To Remove This?

To disable Astra global colors in Elementor, you need to add a filter. You can add the following custom code to the functions.php file of your Child Theme:

# Disable Astra Global Colors In Elementor

add_filter( 'astra_disable_global_colors_in_elementor', '__return_true' );

If you don’t have your Child Theme installed, please check this article on how to do it. 

If you are not sure how to add this code, please check this article.

How To Remove This?

To remove the category archive title, you must add a filter. You can add the following custom code to the functions.php file of your Child Theme:

# Remove Woocommerce Category Title from the product archive page

add_filter( 'woocommerce_show_page_title', 'remove_category_title_from_product_archive' );
function remove_category_title_from_product_archive( $title ) {
if ( is_product_category() ) {
$title = false;
}
return $title;
}

If you don’t have your Child Theme installed, please check this article on how to do it. 

If you are not sure how to add this code, please check this article.

Contrary, to use the default WooCommerce pages and options for your website, you need to use custom code. Thus, you can learn how to do it with this document.

What Will be the Result?

Astra theme and Astra Pro addon both allow you to customize WooCommerce pages according to your needs and brand. 

Further, these customization options are applied automatically to your online store as soon as you install Astra. At the same time, this will add additional Astra-related code. Also, you will notice additional settings in the customizer too. 

Now, adding the code from this document will revert your WooCommerce pages, code, and customizer to defaults. For example, you might need this for some 3rd-party plugins to work well or make your own customizations.

How To Change This?

To remove Astra customization and revert WooCommerce to defaults, you’ll need to add a filter. You can add the following custom code to the functions.php file of your Child Theme:

add_filter( 'astra_enable_woocommerce_integration', '__return_false' );

If you don’t have your Child Theme installed, please check this article on how to do it. 
If you are not sure how to add this code, please check this article.

This document describes who you can use Web Stories in different locations on your website.

How do Web Stories work With Astra?

Web Stories plugin can showcase your website content as web stories. Here, you can easily embed stories to your page or posts using the Gutenberg block. 

Further, you can instead add it to your whole website using the Customizer. Just navigate to Customize > Web Stories and check the “Display Stories” box. Also, you can find more details on the integration and Web Stories in this article.

Thus, when you set Web Stories to be displayed, they will be positioned above the header by default.

To change the position where Web Stories are displayed, you’ll need to use a custom code.

Changing Web Stories Position

To change the default Web Stories location, you need to add the following custom code (filter) to the functions.php file of your Child Theme:

// Filter to change the web stories position

add_filter( 'astra_web_stories_position', 'astra_web_stories_position_callback' );
function astra_web_stories_position_callback(){
    return 'astra_content_before';
}

If you don’t have your Child Theme installed, please check this article on how to do it. If you are not sure how to add this code, please check this article.

Web Stories will now be displayed under your header and before your content using this example code. 

In addition, you can set other positions for your Web Stories using Astra hooks. To change position, modify the above code by changing the bolded part of the code (hook). You can add any header, footer, or content Astra hook here instead.

To illustrate, if you want to show Web Stories before the footer and under your content, you should use the {astra_footer_before} hook instead. In this case, the code would look like this:

add_filter( 'astra_web_stories_position', 'astra_web_stories_position_callback' );
function astra_web_stories_position_callback(){
    return 'astra_footer_before';
}

You will find all Astra hooks in this document.

With Composer, you can add all of your standard themes and plugins to a new WordPress site from one place. Also, you can keep your websites updated the same way.

Using Astra Pro With Composer

You can use Composer to upgrade or downgrade Astra Pro. Before using Composer, you’ll need to have the Astra Pro plugin installed and your license activated. Thus, you’ll need to do this manually on any new website.

Follow these steps to prepare your new website before using Composer:

Step 1 – Install and activate the Astra Pro plugin. If you’re not sure how to do this, you can check out this document;

Step 2 – Next, copy your Astra Pro license from the Store, and activate the license on your website. Further, you can find more details about activating the license in this document.

Activating the plugin license on your new website will register the website URL with our Store. Now you can configure your Composer.json file and manage Astra Pro with Composer further on.

Configure The Composer.json File

The composer.json file is necessary for Composer to work on your website. To manage the Astra Pro with Composer, you’ll need to configure the composer.json file and add Astra Pro-related code. 

Here, we assume that you already have the file in your website’s root directory. Also, we are assuming that you have set your project. Check this article if you need help installing Composer, adding composer.json file, or setting up the project.

Let’s get started.

Code Example

You can check the example of the entire code:

{
    "name": "example/example",
    "type": "project",
    "description": "Project description",
    "require": {
        "brainstormforce/astra-addon": "^3.0"
    },
    "extra": {
        "installer-paths": {
            "wp-content/plugins/{$name}/": ["type:wordpress-plugin"]
        }
    },
    "repositories": [
        {
            "type": "package",
            "package": {
                "name": "brainstormforce/astra-addon",
                "version": "3.6.3",
                "type": "wordpress-plugin",
                "dist": {
                    "type": "zip",
                    "url": "https://support.brainstormforce.com/wp-json/bsf-products/v1/download/astra-addon/?purchase_key={PURCHASE_KEY}&site_url={SITE_URL}"
                },
                "require": {
                    "composer/installers": "^1.11"
                }
            }
        }
    ]
}

Further below, we’ll show you how to make this work.

Add Astra Pro Package And Version Constraints

"require": {
        "brainstormforce/astra-addon": "^3.0"
    },

You need to add the following line to your composer.json file under the “require” key. This will tell Composer to add the Astra Pro package to the list of packages your project depends on. 

Also, this will set the Astra Pro plugin version constraints to any stable version above 3.0.0.

Repositories Arrey

"repositories": [
        {
            "type": "package",
            "package": {
                …
                }
            }
        }
    ]

Next, you need to register Astra Pro Package Repository in your composer.json file. To do this, you must first edit the Astra Pro Package object. 

repositories: Repository Arrey containing Astra Pro Package object

Astra Pro Package Object

The “package” object contains data on the Astra Pro package you are requesting. Here, you need to modify the version string for each update. Thus, to upgrade Astra Pro with Composer, add a version number higher than the one you have currently installed. Similarly, to downgrade Astra Pro, add an earlier plugin version number.

"package": {
  "name": "brainstormforce/astra-addon",
  "version": "3.6.3",
  "type": "wordpress-plugin",
  "dist": {
    "type": "zip",
    "url": "https://support.brainstormforce.com/wp-json/bsf-products/v1/download/astra-addon/?purchase_key={PURCHASE_KEY}&site_url={SITE_URL}"
   },
  "require": {
     "composer/installers": "^1.11"
   }
}

package: Astra Pro Package Description Object

Also, you need to update the url parameters by adding your Astra Pro license key and a domain of the website on which you’re updating the plugin.

url: URL parameters

URL example:

https://support.brainstormforce.com/wp-json/bsf-products/v1/download/astra-addon/?purchase_key=fdsi3h3iu4n22l344n4l2&site_url=example.com

Install or Update Astra Pro With Composer

Now that your composer.json is configured, you are ready to update or install Astra Pro on your website. You can install or update Astra Pro by running the following command in Composer:

composer update