Author 诗语

Global Container – Astra Theme

A container is an area where we display the content. In general, the container encloses the whole page.

The content area and the sidebar are parts of the container. The content area is technically called as the primary container, whereas the sidebar is the secondary container.

You can apply container layouts globally for the entire website through the Customizer option at Appearance > Customizer > Global > Container.

Different containers can be applied for individual pages and posts from meta settings. These are page-specific settings that have high priority than customizer settings.

Container Width

Content will be display within this width. You can try width in combination with container layout to create different views.

Container Layout

Astra offers 4 types of Containers Layout. These are global containers that will be applied to the entire website. But you can set different containers』 layout for different post types with Dedicated Container Layout. To have more control over container layout on each page you can refer page meta settings.

All container layout types are explained in the following links –

BoxedContent BoxedFull Width / ContainedFull Width / Stretched

Dedicated Container Layout

The above 4 types of container layouts are separately available for the following post types. That means if you choose default layout as Full Width/Stretched, and for Archives you choose the Boxed option, then the entire site except archive pages will have Full Width/Stretched layout while Archive pages will have Boxed layout.

Page Layout – For only pagesBlog Post Layout – For blog archive and single blog post pages Archives Layout – All archives

Astra has integration with a few popular plugins. When those plugins are installed you will get dedicated container layout options for those plugin pages too. Below is the list of plugins that has integration with Astra –

WooCommerceLifterLMSLearnDashEDD (Easy Digital Downloads)

Note:

We provide more advanced options in dedicated modules of Astra Pro Addon plugin. And such options are available in dedicated modules of Astra Pro Addon plugin. For e.g.

Container layout can be overridden by the page meta settings. The priority of the meta settings is higher than the customizer settings. Read more about Meta Settings here.The width of the container depends on the Site Layout settings.

How to Add Breadcrumbs in WordPress Website with Astra

Astra is a popular WordPress theme that offers a built-in breadcrumb feature. The theme also offers various customizations with dedicated colors and typography options.

How to Enable Breadcrumbs?

To enable breadcrumbs you just need to have the Astra theme installed and activated. To explore the settings, from the WordPress dashboard navigate to Appearance > Customize > Breadcrumb.

In this article, we』ll see –

Breadcrumb Settings in AstraDisplay Breadcrumbs Anywhere with ShortcodeSupport for third party plugins

Breadcrumb Settings in Astra

Below are the available settings for Breadcrumb

Position: This option allows you to choose a location to display breadcrumbs. Choose where you wish to display them. Current, you can choose to display it inside the header, after the header or before the title.Separator: You can set custom separators between breadcrumb links. Disable Breadcrumb on specific pages/post: You will see a list of pages and posts where you can disable breadcrumbs. These include categories, archive pages, 404 pages, etc. (You can disable breadcrumbs on individual pages and posts through the post meta settings)Alignment: You can select the alignment to display your breadcrumbSpacing: Adjust the spacing from all sides

Color and Typography options for Breadcrumb

By default, breadcrumbs will inherit the color and typography from the theme. But in case you wish to highlight them with different colors and typography, you have dedicated options for Breadcrumbs. In the Customizer, navigate to – Customize > Breadcrumb > Typography

Display Breadcrumbs Anywhere!

Currently, Astra lets you display breadcrumbs in three places only – inside the header, after the header, before title.

What if you want to display it anywhere on the page or post? You can do that using a shortcode.

Paste this shortcode anywhere in any custom layout, text, or HTML block on your website and see the breadcrumb appear there – [astra_breadcrumb]

Support for third-party plugins

Along with the built-in breadcrumb feature, Astra also supports breadcrumbs from the following external plugins –

Yoast SEOBreadcrumb NavXTRank MathSEOPress PRO

You can turn off Astra』s default options and use breadcrumbs from the above plugins. Although the breadcrumbs are fetched from the above plugins, you can still manage the styling such as colors and typography through Astra.

How to Set External Plugin Breadcrumbs with Astra?

1. With Yoast SEO Plugin:

Install and Activate the Yoast SEO PluginActivate Breadcrumb for Yoast SEO Plugin from WordPress Dashboard > SEO > Search Appearance > Breadcrumbs > Enable BreadcrumbsYou will see an option in the Customizer > Layout > Breadcrumb > Breadcrumb Source. Select Yoast SEO Breadcrumb. Now the Yoast SEO Breadcrumb markup should start appearing on the pages instead of the default Astra Breadcrumb.All Color and Typography options from the customizer will override the styling of Yoast SEO Breadcrumb.All options to disable breadcrumb on specific locations will also work with the Yoast SEO plugin.

Yoast Backend Settings:

Yoast Option in the Customizer:

2. With Breadcrumb NavXT Plugin

Install and Activate the Breadcrumb NavXT PluginYou will see an option in the Customizer > Breadcrumb > Breadcrumb Source. Select Breadcrumb NavXT. Now Breadcrumb NavXT markup will start appearing on the pages instead of the default Astra Breadcrumb.All Color and Typography options from the customizer will override the styling of Breadcrumb NavXT. All options to disable breadcrumb on specific locations will also work with the Breadcrumb NavXT plugin.

3. With Rank Math Plugin

Install and Activate the Rank Math PluginSet Breadcrumbs through Dashboard > Rank Math > General Settings > Breadcrumbs You will see an option in the Customizer > Breadcrumb > Breadcrumb Source. Select Rank Math. Now Rank Math markup will start appearing on the pages instead of the default Astra Breadcrumb.All Color and Typography options from the customizer will override the styling of Rank Math. All options to disable breadcrumb on specific locations will also work with the Rank Math plugin.

4. With SEOPress (PRO) Plugin:

Install and Activate both the SEOPress free and PRO PluginsActivate Breadcrumbs for SEOPress Plugin by navigating to WordPress Dashboard > SEO > PRO > Breadcrumbs. Here, follow these steps:Step 1 – Enable Breadcrumbs;Step 2 – Enable HTML Breadcrumbs;Step 3 – Optionally, you can set the text to be shown before the Breadcrumbs by adding it to the 「Display a text before the breadcrumbs」 field;Step 4 – Click on the 「Save changes」 button to activate the SEOPress Breadcrumbs.Navigate next to Customizer > Layout > Breadcrumb > Breadcrumb Source. Here, select the 「SEOPress」 option.Now the SEOPress Breadcrumb markup should start appearing on the pages instead of the default Astra Breadcrumb.All options to disable breadcrumb on specific locations will also work with the SEOPress plugin, and some additional settings will be also available at Dashboard > SEO > PRO > Breadcrumbs.

SEOPress – Enable Breadcrumbs:

SEOPress – Enable HTML Breadcrumbs:

SEOPress Option in the Customizer:

This Is Your Customizer

In some way, we could say that Customizer is the heart of the Astra theme and your website. This is where you will find many important website settings and special Astra options for 3rd party plugins like WooCommerce and LearnDash.

The Customizer settings provide you with the easiest way to customize your website and make it stand out. In this guide, we』ll cover the basics of using the Customizer and the options available with the Astra Theme.

Astra Theme Walkthrough Docs:

Astra Theme WalkthroughThis Is Your Customizer (currently reading)Style Your Website With Global SettingsBuild Your HeaderFind the Way With BreadcrumbsSet Up Your BlogAdd Your SidebarsBuild Your FooterHost Google Fonts Locally – Performance Is the KeySee Other Customizer OptionsHow To Build Quick Sites With Astra?Getting the Most Out of Astra Theme

Astra Options

Astra provides a dedicated settings page in your WordPress dashboard under Appearance > Astra Options.  You can manage all controls related to the Astra theme and Astra Pro Addon here.

The Astra theme comes with a list of additional plugins and options specifically made to expand the theme』s functionality. You can activate only the options you need, which results in better website performance. Once activated, these options and settings will be available in the Customizer.

Since version 3.0.0 the Astra theme comes with the Header and Footer Builder. You can choose to use the legacy (old) header and footer or the new Header and Footer Builder by using the switch available at Astra Options. You can find more details with an explanation of all options available in this article.

Working with the Customizer

Your Customizer is located at Dashboard > Appearance > Customize. 

On the top of the customizer in the left corner, you will find 「X」 icon which closes the Customizer. 

In the right corner, the 「Publish「 button is located. Notice here that when you make any changes, a small 「cog」 symbol will appear next to this button. Clicking on this symbol will give you options to publish, save the draft (and share a preview), or schedule the date when your new customizer settings will go live.

At the bottom, there is an option to hide the Customizer and see the website changes you made in full width. Also, here, you will find options to switch between desktop, tablet, and mobile simulators.

Switching your view allows you to see how your website will look on different devices. But, more importantly, it gives you the possibility of adjusting your Customizer settings for each view separately and make your website perfectly responsive.

Icons

Pencil – these icons are located on different elements in your Customizer preview. is a shortcut leading you directly to the Customizer settings for that element.

Back to default – these icons are located next to a certain option in the Customizer. Clicking on this icon will restore the default theme value for that option.

Responsive editing – these icons are located next to a certain option in the Customizer and they symbolize that responsive editing is available for this option. Clicking on it will circle between different views (desktop/tablet/mobile) allowing you to set separate values for each view.

Link Values Together – you can find these icons usually next to margin and padding options. Having this option active will sync all sides (top, right, bottom, left) to use the same value. To edit sides individually, deactivate this option. 

Unit icons – many values can be used with different units. When these icons are present, they allow you to choose which unit would you like to use. For example, using 20 PX (pixels) of padding will always add the same space on all screens. Switching it to 20% will add space which will adjust to the size of the screen/element being used. 

Previous: Astra Theme Walkthrough

Next: Style Your Website With Global Settings

How to Translate Custom Layouts with WPML?

Custom Layouts is a premium feature available with the Astra Pro Addon plugin. To use these pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website.

WPML and Custom Layouts

Firstly, you need to add WPML to your Astra website and turn it multilingual. In addition, if you need help doing this, you can check this article.

Secondly, we need to make sure that the option to translate the Custom Layout with WPML is active. Follow the steps below to activate this option:

Step 1 – Login to your website and navigate to Dashboard > WPML > Settings;

Step 2 – Nest, scroll down to reach the 「Post Types Translation」 section;

Step 3 – In the end, select Custom Layouts (astra-advanced-hook)  to be Translatable. Here you have options to show items only if there is the translation available in the selected language or to show content in the default language (fallback option). Choose the option which suits you better and click on the 「Save」 button to apply changes.

This will enable all Custom Layouts to be translated with WPML. You will find the translation options in your Custom Layouts list.

Translating Custom Layouts

Now that this option is activated, let』s show you how to translate your Custom Layouts:

Step 1 – Navigate to Dashboard > Appearance > Astra Options > Custom Layouts and check the column next to the custom layouts titles in the list. You will notice the WPML language options for each layout. Layouts are set to your default language, and the column contains flags of the other languages available.

Step 2 – To create a version of the custom layout in another language, just click on the 「+」 icon in the desired language column. This will open an Advanced Translation Editor that will allow line-by-line translation.

By default, the editor will display content in 「dual」 mode, showing the original content on one side and translation fields on the other side. 

We decided to add a French version of the layout in our example:

Step 3 – To translate a line of the content, you need to click on the matching translation field for each line and provide the translation. Once you added all translations, click on 「Complete」 to create the translated page.

Managing Translations

Keep in mind that you will not be able to click the 「Complete」 button until you provided all translations. If you need to pause translating, just click on the 「Back to list」 button. This will save you current progress and take you back to the custom layouts list. To mark the translation in progress, you will notice that the 「+」 icon changed to the 「cogs」 icon. You can resume translating the layout any time you want by clicking this icon.

Once you complete your translation and click the 「Complete」 button, the translated version of your custom layout will be automatically added and linked with the original. In the layouts list, you will see that existing translated versions are represented by a 「pencil」 icon instead of a 「+」 icon to mark that the translation exists.

When it comes to the layout content, your designs will be automatically copied, and original content will be replaced with the translated content:

Great, you just created your Custom Layout translation. You can repeat these steps for any layout you want to translate.

How to Fix Starter Template Importing Issues

So, you tried to import the Starter Template, but the import failed? In this case, you might have seen a popup that says – 「Import Process Interrupted」. Here, most of the time the issues are related to your server settings and resources. Since this can happen for more than one reason, it』s not easy to know the exact issue straight away. Thus, in this document, we will explain the most common issues and how you can solve themthem.

Starter Templates Walkthrough Docs:

Getting Started With Starter Templates Starter Templates ImportingHow to Import A Complete Site With Starter Templates?How to Import Single Page With Starter Templates?Importing Gutenberg Pages, Patterns, and WireframesStarter Templates – Elementor PopupHow to Fix Starter Template Importing Issues (currently reading)Building Your Website With Starter TemplatesStarter Templates FAQs

Let』s Understand Importing Fundamentals

All starter templates are stored on our server (websitedemos.net). When you choose a template you would like to import, the Starter Template plugin connects to our server and imports the files to your website. This process has a specified flow which includes a connection request being sent from your server and receiving back the template data with a reply from our server.

The connection request flow looks like this:

Now, you understand the basics of how the import process. Therefore, let』s explore some common issues that we have seen in the import process.

Importing Issues

These are the most common reasons your Starter Template import can fail: 

500 / 502 / Any 5XX Error

5XX error can happen for more than one reason. Namely, this error is mostly related to the available server resources or caused by one of your installed plugins. Thus, you would need to check your plugins or update the PHP configuration on your server.

Please check this article on how to fix the error which says: 500 – Internal Server Error

Connection Timeout

As previously described, importing a template to your website will require the template files to be transferred from our server. The Starter Templates plugin on your website will initiate a connection request to do this. If this complete flow for this request is not successful in a specific time, it will fail, and you will get this error like this: WP_Error – cURL error 28: Operation timed out after 30001 milliseconds with 0 bytes received.

Please check this article for understanding how to fix it.

Blocked Request 

As mentioned, there needs to be communication between your server and ours for the template to be imported. Sometimes it happens that the connection request coming from your server gets blocked. If this is the case, you will see the following error: WP_Error – User has blocked requests through HTTP.

Please check this article on how to fix this error.

XML file storing issue 

To import the template content, WordPress needs to store an XML file in the /wp-content/ folder. This issue could be related to your host offloading /wp-content/ folder to a third-party server. In this case, you might see an error that says something like this: Looks like your host could not store XML file in /wp-content/ folder.

Please check this article on how to fix this error.

Other issues

In case your starter template import process is interrupted for any other reason, or the solutions above don』t help, please open a Support ticket. Our support team will have to inspect your issue and help you find the solution. Please do have in mind that most of the issues you can face with Starter Template imports are server-related.

Since our Support team can』t access your server settings, we will point you to the root of the problem. Further, you will have to make modifications to your server yourself or by contacting your hosting company.

Previous: Starter Templates – Elementor Popup

Next: Building Your Website With Starter Templates

Replace Deprecated Astra Theme and Astra Pro Hooks

Following Astra Theme 3.7.4 and Astra Pro 3.6.2 updates, we deprecated a significant number of functions, filters, and actions. Thus, some of the Astra hooks you might have added to your website should be updated.

Therefore, this document will help you replace these hooks on your website. Please use the lists below to update your code.

Deprecated Astra Hooks and Their Replacements

In short, further down, you will find lists of functions, filters, and actions. Accordingly, please update hooks if you added any filters, actions, or other functions to your website.

Astra Theme 3.7.4 and Astra Pro 3.6.2 versions are still compatible with old codes to avoid any issues. Although your website will still work well after the update, you should replace deprecated hooks with the replacements below.

Further, to help you with these updates, we added backend notifications:

Hence, you can do this by replacing deprecated hooks in your code with the replacements from the lists. This way, your website will remain fully functional and compatible with future updates.

ActionsFiltersFunctions

Deprecated actionReplacementastra_get_css_filesastra_addon_get_css_filesastra_get_css_filesastra_addon_get_js_filesastra_after_render_jsastra_addon_after_render_jsasta_register_admin_menu astra_register_admin_menu

Deprecated filterReplacementastra_bb_render_content_by_idastra_addon_bb_render_content_by_idastra_get_assets_uploads_dirastra_addon_get_assets_uploads_dirastra_pro_show_brandingastra_addon_show_brandingastra_dynamic_cssastra_addon_dynamic_cssastra_add_css_fileastra_addon_add_css_fileastra_add_js_fileastra_addon_add_js_fileastra_add_dependent_js_fileastra_addon_add_dependent_js_fileastra_render_cssastra_addon_render_cssastra_render_jsastra_addon_render_jsastra_languages_directoryastra_addon_languages_directoryastra_ext_default_addonsastra_addon_ext_default_addonsastra_get_addonsastra_addon_get_addonsastra_ext_enabled_extensionsastra_addon_enabled_extensionsastra_custom_404_optionsastra_addon_custom_404_optionsastra_cache_asset_query_varastra_addon_cache_asset_query_varastra_cache_asset_typeastra_addon_cache_asset_typeastra_load_dynamic_css_inlineastra_addon_load_dynamic_css_inlineastra_flags_svgastra_addon_flags_svgastra_display_on_listastra_addon_display_on_listastra_location_rule_post_typesastra_addon_location_rule_post_typesastra_user_roles_listastra_addon_user_roles_listastra_target_page_settingsastra_addon_target_page_settingsastra_get_display_posts_by_conditionsastra_addon_get_display_posts_by_conditionsastra_meta_args_post_by_conditionastra_addon_meta_args_post_by_conditionastra_pro_white_label_add_formastra_addon_white_label_add_formast_footer_bar_displayastra_footer_bar_displayast_main_header_displayastra_main_header_displaysecondary_submenu_border_classastra_secondary_submenu_border_classgtn_image_group_css_compastra_gutenberg_image_group_style_supportast_footer_sml_layoutastra_footer_sml_layoutprimary_submenu_border_classastra_primary_submenu_border_class

Deprecated functionReplacementastra_get_supported_posts                                      astra_addon_get_supported_postsastra_rgba2hexastra_addon_rgba2hexastra_check_is_hexastra_addon_check_is_hexis_support_swap_mobile_below_header_sectionsastra_addon_swap_mobile_below_header_sectionsis_astra_theme_3_5_0_versionastra_addon_check_theme_3_5_0_versionsticky_header_default_site_title_tagline_css_compastra_addon_sticky_site_title_tagline_css_compis_support_swap_mobile_above_header_sectionsastra_addon_support_swap_mobile_above_header_sectionsastra_return_content_layout_page_builderastra_addon_return_content_layout_page_builderastra_return_page_layout_no_sidebarastra_addon_return_page_layout_no_sidebarastra_pro_is_emp_endpointastra_addon_is_amp_endpointis_astra_breadcrumb_trailastra_addon_is_breadcrumb_trailastra_breadcrumb_shortcodeastra_addon_breadcrumb_shortcodeastra_get_templateastra_addon_get_templateastra_locate_templateastra_addon_locate_templateastra_ext_adv_search_dynamic_cssastra_addon_adv_search_dynamic_cssastra_ext_advanced_search_dynamic_cssastra_addon_advanced_search_dynamic_cssastra_ext_header_builder_sections_colors_dynamic_cssastra_addon_header_builder_sections_colors_dynamic_cssastra_ext_header_sections_colors_dynamic_cssastra_addon_header_sections_colors_dynamic_cssastra_ldrv3_dynamic_cssastra_addon_ldrv3_dynamic_cssastra_learndash_dynamic_cssastra_addon_learndash_dynamic_cssastra_ext_mobile_above_header_dynamic_cssastra_addon_mobile_above_header_dynamic_cssastra_ext_mobile_below_header_dynamic_cssastra_addon_mobile_below_header_dynamic_cssastra_ext_mobile_header_colors_background_dynamic_cssastra_addon_mobile_header_colors_background_dynamic_cssastra_ext_mobile_header_spacing_dynamic_cssastra_addon_mobile_header_spacing_dynamic_cssastra_ext_mobile_header_dynamic_cssastra_addon_mobile_header_dynamic_cssastra_ext_mega_menu_dynamic_cssastra_addon_mega_menu_dynamic_cssastra_ext_scroll_to_top_dynamic_cssastra_addon_scroll_to_top_dynamic_cssastra_ext_fb_button_dynamic_cssastra_addon_footer_button_dynamic_cssastra_fb_divider_dynamic_cssastra_addon_footer_divider_dynamic_cssastra_fb_lang_switcher_dynamic_cssastra_addon_footer_lang_switcher_dynamic_cssastra_footer_social_dynamic_cssastra_addon_footer_social_dynamic_cssastra_ext_hb_button_dynamic_cssastra_addon_header_button_dynamic_cssastra_hb_divider_dynamic_cssastra_addon_header_divider_dynamic_cssastra_hb_lang_switcher_dynamic_cssastra_addon_header_lang_switcher_dynamic_cssastra_ext_hb_menu_dynamic_cssastra_addon_header_menu_dynamic_cssastra_header_social_dynamic_cssastra_addon_header_social_dynamic_css

How To Improve CLS For the SVG Logo?

Cumulative Layout Shift (CLS) is an important metric related to the website』s visual stability. More precisely, this metric tracks unexpected layout shifts that users experience on your website. This document will show you how to improve the CLS score if you』re using the SVG logo for your website.

When you add a logo image in the .png and .jpg formats to your website, the logo height will be added automatically based on the logo width. Contrary to this, if you upload the SVG image, WordPress will only set the logo width but not height.

As a result, some logo shrinking is possible, which can cause an unexpected layout shift in the header section. Astra Theme version 3.6.0 improved the way SVG logo images are handled, which prevents unexpected shifts. Hence, this change can help improve the overall CLS score. 

How Did We Improve This?

To improve this, we added some JavaScript code that will automatically calculate the height for the SVG logo once it』s imported to your website. After that. the height will be calculated based on the logo width you set in the customizer. You can find more details about this in our Blog article.

This SVG logo improvement will be reflecting on a standard and transparent header. This issue was not present with the sticky header logo.

How To Fix This?

For all new websites, the SVG logo improvement will be applied automatically. Once you upload the SVG logo and set the logo width, the height will be automatically calculated and saved. On the other hand, if you already have a website with an SVG logo, you』ll need to make some minor changes.

We didn』t apply this improvement to existing websites to avoid any potential issues that could have appeared. In some cases, applying this improvement automatically to logos already in use could result in unwanted changes.

To apply this improvement to your website, please follow these steps:

Step 1 – Navigate to Customizer > Header > 「Site Identity & Logo」 widget;

Step 2 – Update/edit the logo width value

Step 3 – Click the 「Publish」 button to save the changes. 

Based on the width you just updated, the logo height will be automatically calculated and saved in customizer settings. This will apply improvements to the SVG logo used on your website.

How to Activate Astra Pro Addon License?

Astra Pro Addon is a plugin that extends the free Astra theme and adds more features to it.

Note: Make sure you have the Astra Pro Addon (plugin) installed and activated before starting the license activation. Here』s an article on how to install and activate the Astra Pro Addon if you need further details on this.

To activate your Astra Pro Addon please follow these steps:

Step 1 – Please visit our Store to get your license key. Please log in and navigate to the Account > Licenses page. Copy your Astra Pro license key:

Step 2 – Navigate to Dashboard > Appearance > Astra Options

Step 3 – Copy your Astra Pro license key to the Astra Pro License section. Click the 「Activate License」 button.

Note:

The 「License」 section will not be visible if the Astra Pro plugin is not activated. If you don』t see this section, please navigate to Dashboard > Plugins and click on 「Activate」 under the Astra Pro plugin line.

That』s it. Your Astra Pro license is now activated.

Gutenberg Editor And Frontend UI Improvements With Astra (3.7.4)

Astra Theme version 3.7.4 brought interesting Gutenberg UI improvements for both Block editor and frontend user interface. 

This document will show you the changes we added and how to apply these improvements when you update your theme to 3.7.4.

Gutenberg UI Improvements Overview

We added Gutenberg UI improvements to several blocks as well as the whole Block editor:

Block layouts「Spacer」 block;「Pullquote」 block;「File」 block;Block edit controles;Block selection in the editor.

Let』s check out some details for each improvement:

Block layouts

We added layout compatibility for multiple blocks. The block layout now provides the following options:

Default Layout – a default boxed layout;Wide Layout – this layout will inherit the width of the container you set on your website;Full-width Layout – this layout will go edge-to-edge of the screen.

This layout is available for Group, Cover, Columns, Heading, and Media & Text blocks. This structure is available for these blocks even when they are nested. Check out this visual representation of improvement:

This improvement works both for the block editor and front end.

Spacer Block

The Spacer blocks were previously hard to notice. You would notice this block only when you clicked on it. Otherwise, the block stayed almost hidden.

We made the block improvements by adding a light background and by displaying its assigned height.

Pullquote Block

We added a quote icon for the Pullquote block both in the editor and in the front end. This is how the Pullquote Block looked like previously:

The improvements make the block more visible and emphasize that the block content is a quote.

File Block

Previously the File block didn』t have Style support which was improved in the mentioned update.

The style support is now available in the editor and the front-end as well.

Block Edit Controls

In previous versions, the block controls had a lighter color making them less visible.

The block edit controls are more visible now, as we gave them a darker color.

Block Selection

Before improvements, it was not easy to tell what space is some block taking and where to click to start editing it.

The improvement now allows you to see each block and its borders by simply hovering over it with a mouse.

How To Get These Impovements?

For all new websites, Gutenberg UI improvements will be applied automatically when the theme is updated. 

As these improvements can reflect on the front end, you』ll need to activate changes by adding a filter for existing websites. This way, you can check how these changes apply to your website and make any adjustments if needed. 

To apply the improvements to your website, add the following filter to the functions.php file of your Child Theme:

// Filter to enable Astra 3.7.4 Gutenberg UI improvements
add_filter( 'astra_get_option_improve-gb-editor-ui', '__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 Setup Custom Adobe Fonts (Typekit) Plugin?

Have you installed the Custom Adobe Fonts (Typekit) plugin and facing difficulties setting it up? 

Custom Adobe Fonts (Typekit) is a free plugin that helps you embed Adobe fonts into your WordPress website. You can install it from the WordPress repository by navigating to Dashboard > Plugins > Add New.

Now, let us help you with the setup:

Step 1: Once the plugin is installed and activated, you will need the Project ID to fetch the Adobe fonts from the web projects.

Step 2: Get the Project ID. You can follow the instructions up to Step 4 in this article.

Step 3: Next, paste the Project ID, for which you will need to navigate to WordPress Dashboard > Appearance > Adobe Fonts > Project ID and get all the fonts.

Go ahead and add more fonts to the respective project and refresh the Project. This will fetch other font families too.

Note: If you are using the Astra theme, then start using fonts from the customizer.You can also select Font Family from Appearance -> Adobe Fonts and start using it in your custom CSS.