You’ve all probably heard of Spectra WordPress blocks.
Their author is Brainstormforce, the same company behind the popular Astra theme.
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”.
At the top of the page, there will be an icon with which I open Template Kits.
From Patterns, I will select one block with four columns and load it.
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.
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.
From List View, you can select Columns block and repeat the previous procedure-transform to Container.
Now when you open the list view you will see that all the blocks have been converted to Container blocks.
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.
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.
From the Style Background option, we will add a background color on the outer block.
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.
When you are satisfied with the look of the first block, simply select the brush icon above the block and press Copy Style.
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.
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.
Flex Properties-Wrap
For this purpose, the Wrap function is used in Flex Properties, which will arrange the blocks in two rows.
But that’s not all because now the blocks will have a 3+1 look and we want 2+2.
We need to select the first block in Container>General settings and adjust Custom Width to around 44%.
When we repeat the procedure on all inner blocks result will be like we want.
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.
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.