How to convert Gutenberg blocks to Spectra?

You’ve all probably heard of Spectra WordPress blocks.

Their author is Brainstormforce, the same company behind the popular Astra theme.

Spectra logo

These blocks were called ultimate addons for Gutenberg and then they were completely redone and changed the name to Spectra.

Here I would like to explain how to convert classic Gutenberg blocks into Spectra blocks.

Loading the finished block

If you use the Astra theme, it has a whole series of ready-made blocks (Starter templates).

I’ll take the conversion block right from there.

I will first create a new page with the title “Test”.

Spectra add new page

At the top of the page, there will be an icon with which I open Template Kits.

Spectra open design library

From Patterns, I will select one block with four columns and load it.

Spectra import template kits-patterns block

Many Gutenberg blocks have already been converted to Spectra, but this one still is a group Gutenberg block.

If you don’t have Template Kits you can select an existing WordPress Templates block with four columns.

Converting to Container blocks

On the selector above the block, you will select the group icon and select Transform to Container.

Block is still group block

But that’s not all because when you open the List View you will see that there are still four columns that have not been converted.

Spectra not all blocks converted(list view)

From List View, you can select Columns block and repeat the previous procedure-transform to Container.

convert columns to container

Now when you open the list view you will see that all the blocks have been converted to Container blocks.

Spectra list view all blocks converted

As we can see, an excess block was created for us during the conversion.

Now we have one block and inside it another one with four insides.

Select the inner block with four more blocks inside it and drag it outside the main block.

Spectra drag one block outside

We simply delete the lower block.

We do this because an extra block would cause us problems with the display.

I often answer questions on Quora and I find that it is a poorly done conversion that creates a problem for less experienced people.

Container settings

Now we have to define the converted block because it is without color and the inner blocks are a little too close.

Container Width

Under container width, you have Full Width, Boxed, and Custom.

Under full width, the block will be the width defined in the theme. Boxed will be reduced in width and the background color of the page will be visible outside the block.

Custom will be the width in percentages from 0-100% width.

Container boxed settings

From the Style Background option, we will add a background color on the outer block.

Style background color

Then we will add color and margin for the first block only to get a better view.

Margin and padding select from Style>Spacing.

Copy Paste Style

Spectra has implemented a very good Copy Paste Style function to speed up our work with blocks.

background color and margin for first block

When you are satisfied with the look of the first block, simply select the brush icon above the block and press Copy Style.

copy style from first block

Go to the second block and click on the same icon but now select Paste Style and repeat on the existing blocks.

Our finished block will be like that in the picture.

Finished block

Conversion for tablet devices

Another question that users often ask is how to get a good look at tablet devices in Spectra.

If you switch to a tablet preview you can see that the blocks are too narrow.

tablet preview

Flex Properties-Wrap

For this purpose, the Wrap function is used in Flex Properties, which will arrange the blocks in two rows.

Flex Properties wrap

But that’s not all because now the blocks will have a 3+1 look and we want 2+2.

Spectra wrap activated

We need to select the first block in Container>General settings and adjust Custom Width to around 44%.

Adjusting blocks size

When we repeat the procedure on all inner blocks result will be like we want.

finished blocks

If you think that the distance between the blocks is too large, select the outer main block (container) and adjust it in the Spacing>Row and Column Gap.

Adjust row and column gap

Conclusion

As you can see, I didn’t deal much with Spectra blocks and detailed settings here, but only with the most common questions that new users come across.

However, in the following articles, the functions and capabilities of the basic as well as some specific Spectra blocks will be explained.

Until then, best regards.

0 0 votes
Please rate!
0 Comments
Inline Feedbacks
View all comments