Spectra Blocks Detailed Review in 2024 | 30+ Blocks Explored

You must have heard a lot of rumors or may have seen people talking about this new block editor addon for WordPress called Spectra, Earlier the name was Ultimate Addon for Gunterberg in short UAG and in this blog, we will cover everything about Spectra Blocks from start to end.

Why Spectra? Reason and Intro

I know you might have questions like there are already 15-20 Block Editor add-ons so why Spectra? I mean at first, it will seem like almost all Popular WordPress Theme Development publishers have released their own blocks so the Astra team also joined the army. But ahh.. that's not the case here.

Spectra is a Block editor add-on by the same developers or the same company who built Astra Theme and as per my thinking and speculations, this has been done to give a good revival for Astra's future. Earlier the name was Ultimate Addon for Gutenberg or UAG but they changed the name during the release of 2.0.

Yup, you heard it right, Astra was not growing after the coming of Block Editor-Based themes like Kadence and Blocksy and the reason was simple, WordPress itself is moving towards the Block Editor and Block-Based theme hence no one wants to stick to the things of past. So People switched to Those new modern themes and they were good in performance as well which is the most important selling point of Astra.

But after the launch of Astra 4.0 and Spectra, it started doubling the downloads.

Here are some statistics from the WordPress Repo and Astra Official Site.

I am not saying Astra doesn't have good features but when you see the review etc. you will find people liked Astra because it has quite good features without compromising speed. But these new block-based themes were Better in terms of performance and had more to offer like Hooks etc.

But this blog is not about Astra Right?? It's about Spectra so let's continue on that.

They launched this Block Editor Addon to offer their audience a better bundle where they have Theme + Editor and as a developer, I really like this combo because when you work on website designs and you face a bug or issue you just have to contact only 1 team, instead of 2 and they can find out issue quite fast as both are their products.

Now let's talk about Spectra Blocks Block, ummm, it's repeating but that's what I mean.

Read More: Why use Gutenberg Block Editor in 2023

Blocks offered by Spectra Blocks or WP Spectra

This is going to be a Crazy list as they have some essential and good blocks as well as some not-so-important or junk blocks, which I don't know why they even created.

Probably they take all feature requests seriously ????.

Here is a quick list of all Blocks which are included in Spectra, and I will cover all of them in detailed subsections so that you can get a better idea of each of them, I will explain what controls you will have with all those blocks and what are possibilities in designing a site using these.

So there are 33 Blocks as of now, the current version is 2.4.0 and I think they will take down a few of them as they don't really make sense to have them. Like They have a call to action and Marketing buttons as blocks that can be created easily by essential blocks like containers and buttons.

Now let's talk about what else they have in Spectra.

Read more: Kadence Blocks 3.0 Complete Review and Overview

Spectra Dashboard Overview

When you install Spectra Blocks in your WordPress you will see a section in the setting where you can control the global options of Spectra like

• You can Enable/Disable individual blocks
  • This is quite a good idea and helpful in performance optimization also reduces the bloating of the WordPress block editor.
• Editor Options
  • You can control global editor settings like Default Content width, Container Paddings Container Element Gap, Blocks Editor Spacing,, etc. You can check in the below-attached images.
• Asstest Generation (Again Performance thing)
• Templates Option Enable Disable
• Version and Beta Control
• Performance Module
• Block Settings (Recaptcha APIs for now)
• Coming Soon Module
  • I love this one, as you can set any page as a coming soon page on your website with only a few clicks.

Spectra Template Library

Another big thing about spectra is they have a good template library of full-page templates, sections, and wireframes which can help you design and pay easily.

So before I talk about all individual blocks and their controls, let me tell you about Spectra Pricing and my honest opinion on Spectra. So that you do not need to read this whole blog, yeah, I do care about you guys.

Spectra Pricing

Currently, Spectra is available for free only and there is no pro plan but there should be a Premium version of Spectra that will have more advanced features, especially Dynamic Blocks and compatibility to create Custom Post Type Temaplets, etc.

My Thoughts on Spectra

As of now, If you are using the Astra theme and you want to have a block editor in your website or if you are using Elementor and want to switch to Block Editor, Spectra Blocks can be the option but do note that it can not create dynamic templates or very complex designs as of now.

It's Best Suited for Blogger, Business Websites which require only a few pages or a Simple Exommerce Store.

If you have an Elegant-looking website on Elementor or Divi, or if you have a website with Custom Post type and custom fields please be away from it as for now it does not support these things.

Well if you are a blogger or someone who wants to explore it more, let's go ahead with Individual Blocks.

Spectra Individual Blocks Overview and Review

Before we start, this post is written based on Spectra Blocks 2.4.0, which is the current latest, I will try to keep it up to date but if I miss something, make sure to inform me via comments or email.

1. Spectra Container

Spectra Container block support full Flex Layouts which makes it easy to design any kind of section and use flex properties to modify how the content will be aligned inside the container.

You have almost all container controls like

• Width
• Minimum Height
• Equal height (helps in creating Grids)
• HTML Container Tag option
  • div, section, header, footer, article, aside, main, summary, nav, links, figure (Honestly I really don't know what few of them are for)
• Flex Properties like Direction, Alignment, Justify Content and Wrapping
• You can set the Background color, gradient, image, and video
• Border, Box Shadow, Shape Dividers, and Spacing (padding and margins) are also there

2. Spectra Heading Block

I really like the way they thought about the heading, other blocks just have a single text area for headings without any extra elements but they included subheadings and a divider with their own controls in the heading block to design some good sections.

You have control over the heading tag, the color of the Heading, the Subheading, the separator, etc.

3. Image Block

Spectra Image Blocks is one of the best Block in their bundle, it has advanced Image settings Like

• Alignment
• Aspect ratio
• Object fit type
• Hover Effect
• Overlay Heading and Sub Heading,
  • I really appreciate them for merging this to their heading block, unlike Kadence where they have a separate block for image overlays.
• Image Masking
  • I really like this one as it can create blob versions of your images by masking them, it has several types of blobs and other masks.

4. Buttons

Again a good block to have in spectra, it helps you design some good button layouts with everything to customize like Alignment, gap and stacking on the smaller device, Icon to add, Border, Background, Border Radius, etc.

5. Info Box

Info boxes are such essential design elements for all types of websites in current trends, whether you want to represent features of your product or want to showcase your abilities in service and many more.

The Spectra info box Has 6 elements, Icon, Subtext, Separator, Title, Description, and Button. You can control almost all parts of these elements like color, and size, enable disable individual elements, spacing around, etc.

6. Call to Action Block

Honestly, I don't even know why this block exists, you can create this with a simple container, paragraph, and Button block. So I would count this as not so important nor very creative.

7. Blockquote

I would say this one is a simple creative and helpful block. It let you create blockquote in a creative way by adding your image and Tweet button. Personally, I liked it.

8. Content Timeline

When I use Kadence Blocks, this is a block I miss sometimes, here in spectra I won't say it is very flexible but yeah, it has quite good features, you can align content, and icons, and change the color of them.

9. Counter/Progress Bar

On more block I hope Kadence can have, this is also a very crucial design element for the modern looking website where you show them how better you or your service or your features are.

In Spectra Counter Block, you can choose whether you can it to be circular or just a number or a Horizontal Progress Bar. You can align it, change the color or bars, add prefixes and suffixes to the number, or increase or decrease the counter speed. Basically full controls and a well-designed block.

One more good block in spectra

10. Countdown Block

The best part of the countdown is it comes with some good design presets you can choose from and it also offers full flexibility to customize all elements, whether it's Size, color, spacing, or alignment.

11. FAQ / Accordion Block

Accordion or FAQ lock is mostly used for FAQs and it supports Schema as well, You get 4 presets to choose from and the ability to make it a grid, choose a question tag from H1 – Paragraph, and Change Icon for Expanding and collapsing, it's alignment and many more.

Overall useful and goo block.

12. Form Block

It's a quite good form block with the option to add different types of input like Radio, Select, Checkbox, Toggle, Accept, URL, Hidden, Datepicker, etc. It offers the flexibility to customize all these inputs around their size, color, and spacing.

13. MAP Block

Map block supports Google MAP only and the MAP API key is added by the Spectra team so you can not modify it. Basic Customization is available, like height, zoom, and language.

14. How to Block

Again quite a popular block for bloggers who cover tutorials or guides, this supports How to schema to make your content stand out in eyes of Google. You can add Title, Image, Time, Cost, Tools, and Material as data and customize their look.

15. Icon List

You can create listed elements with custom icons instead of bullet points or numbers in the icon list. You can either select an icon as a whole or an individual icon item element-wise. It also supports images as icons so if you have created a custom icon in png or SVG, you can use that as well.

Comes with some predefined designed layout and the ability to customize them all.

16. Gallery Block

Gallery Block is awesome, it has a lot of customization options available, first, you choose which format of the gallery you need like, Grid, Tile, Masonry, or Carousel, and then you have the ability to customize the on-hover effect and click event. You can open a link or open a lightbox to view the zoomed image.

I would say a good block with great flexibility in controls.

17. Simple Notice Block

This is again not so creative and a very useful block as we can create this one easily using container and heading. It can help bloggers to highlight to give disclaimers of content.

18. Lottie Animation Block

Lottiefiles are the future of web animation, they are lightweight, rendered in no time, and easy to create as well. Using the Lottie animation block you can either put animation from the Lottie files repository using the file URL or use your own Lottie file.

There are options like Playing in Loop, Alignment, Reversing animation, Playing trigger and speed.

19. Marketing button

One more button block for nothing, I mean this can be created manually, so they can include this in their template library instead of having this as a block. not so impressive to me personally but yes you get a button block with 2 Text and some preset with customization options.

20. Modal Trigger

Now, this is the kind of block I really appreciate, this creates a button that triggers a modal popup. The only limitation here is you can put only defined elements which are icons, titles, descriptions, and CTA buttons.

But still, a good block to have.

21. Post Carousel

As the name suggests, In the Post Carousel block you can fetch posts and put them in a slider or carousel. It has 4 predesigned layouts but you can create one from scratch as well. Quite a useful and helpful block to have.

You have the ability to auto-slide, customize the slide speed, number of slides, etc.

22. Post Grid

Again as the name suggests, it's a Block to showcase your blog posts in a grid layout. This one does not have a preset but has the option to customize the look of all elements inside the grid element.

23. Post Timeline

Same story again, a block only 1% of the users need. I really think they take feature requests quite seriously haha.

In the Post timeline block, you can put a timeline with the Post thumbnail, title, and date in order of their publishing date. If you were looking for something like this, it's for you.

Personally, I don't think it's that useful as most people use post grids and carousels.

24. Price List

Yet another basic block, which could have been created as a template in their library. This block helps you create a Pricing menu and comes with some presets which are specially designed for restaurant menus. Though you can customize it to make it look more like your way. But still, you could have done this with Container, Image and Heading Block

25. Spectra Review Block

Review block can be used by Bloggers and Affiliate Marketers when presenting a product review or product listing where they can have

• Product Image
• Product Title
• Features with star rating
• Summary
• Overall Rating (Based on Individual rating)
• Author Name

This block supports Schema/Structure data so it can help you rank better as well.

26. Slider Block

Having a Slider in the Hero Section is quite a common design approach and if you thinking to do the same and want a basic slider, Spectra have that for you. You can create a slider with a Heading, Description, and CTA with a Background image or Gradient color.

You can customize the width, height, arrow style, slide transition effect, etc.

27. Social Share

Everyone wants their audience to share the content on social media or with other people and to help in the same, spectra have a social share block where you can add multiple social share icons without any additional plugin. I really like this block as otherwise I would need a social share plugin and adding a plugin for this small feature is not good.

28. Table of content

A table of content (TOC) is the must-have element of any blog as it helps your user navigate each section quite easily. TOC Block in Spectra offers good customization and control on which heading to show and which to hide, how fast to scroll and they also have a scroll to the top button when you go to a section via TOC, really good idea.

29. Star Rating

Quite a Basic Block but can be useful if you can want to show a star rating on your page or blog.

30. Tabs Block

31. Taxonomy List

You can list all your taxonomies whether from posts, custom posts, or products using this block and link all the list to their respective archive. It's useful when you have too many taxonomies.

32. Testimonials

You can put a testimonial slider using the testimonial block.

33. Team

I won't say it's very innovative but it's useful when you want to showcase your team members. This can be created using an Image, Heading, Paragraph, and social icons inside a container so it can be replaced by a template instead of a block.