Global Block Style Extension

Global Block Style is a feature in Spectra that allows you to create and manage consistent styles for your blocks across your entire website. This can be a huge time-saver, especially if you have a lot of pages on your site and you want to make sure that all of your blocks look the same.

Let’s go through the following sections of this document to learn more about Global Block Style Extension in Spectra

What is Global Block Style

Global Block Styles are a way to create and manage consistent styles for your Spectra blocks across your entire website.

Example: To create a global block style, simply edit a block (Heading block) and make the desired changes to its appearance. Then, you can make it a Global Block Style in the block settings. This will save your changes as a new global block style.

Once you have created a global block style, you can apply it to any other Heading block on your website by clicking the Link to Existing Style in the block settings and selecting the desired style.

Where can I use the Global Block Extension?

Imagine you’re setting up your website, adding a cool new block, and giving it that perfect look. Now, wouldn’t it be awesome if you could reuse that style easily? That’s where the Global Block Style comes into play. Just hit the “Add New” button, give it a name then your block stylings are now saved as Global Block Style.

If you want to use this styled block somewhere else on your site, you can do it easily. Add a new block, go to the Advanced Settings of the block. There you will notice the Global Block Syle module. Under Link to Existing Style, pick a style of that specific block from the list – your block is linked, with the chosen style.

How to Use Global Block Extension

Now that we understand more about why you might want to use a Spectra Global Block Extension, let’s look at how you can activate it.

Note that for this tutorial, we’ll assume you already have Spectra Pro installed and activated on your website.

Once you have Spectra installed on your site, you can navigate to Spectra > Blocks / Extensions > Extensions. In the Block/Extensions section, you can find the ‘Global Block Style‘ extension, which allows administrators to enable or disable the Global Block Style feature.

Now go to any page or post and add any block. Inside individual block settings, navigate to the ‘Advanced’ section to see the ‘Global Block Style.’ This is where you can manage and apply block styles.

After making customizations to a block, you can convert it into a Global Block Style. Click the ‘Add New’ button in the ‘Global Block Style’ module. A popup dialogue opens, prompting users to name the style. Upon entering a name, your block stylings are now saved as Global Block Style.

Now, to use a Global Block Style in another block, you can simply drag and drop a new block, and go to the Advanced settings. Here, you can see the ‘Link to Existing Style’ option. The dropdown menu by default displays ‘None’. You can select the desired Global Block Style from the dropdown. Then the selected style is instantly applied to the block.

Once a block is linked to a Global Block Style, any modifications made to that particular block will seamlessly propagate to all other blocks that are also linked to the same Global Style.

To do so, make all necessary changes to the block and click ‘Update Style’. Then the same styles will be applied to the block where this Global block Style is applied.

This dynamic synchronization ensures a consistent and unified appearance throughout your blocks, minimizing the need for manual adjustments and saving you valuable time and effort.

In case you want to have control over every detail, then there is a feature for you – the “Unlink Global Block Style” option. This handy tool lets you tweak a specific block without changing others that are linked to the same Global Block Style. It’s like having the freedom to make your block stand out while keeping everything else intact.

In the ‘Global Block Style’ section, you can manage your styles. Clicking on the edit icon opens a popup with options to update style titles, delete specific global block styles, and even remove all global block styles if needed.

In case you have added multiple Global Block Styles for a specific block, then you apply the desired style of your choice to another specific block from the dropdown.

We hope this article has been helpful. If you have any questions, please feel free to leave a comment below.

Important Note:

As of now, we have implemented Global Block Style in the core blocks only listed below

• Heading block
• Icon block 
• Call to action
• Info box
• Countdown
• Buttons
• Buttons child block
• Image block
• Container