• Skip to content
  • Skip to footer
A Bright Clear Web

A Bright Clear Web

A Bright Clear Web - Simple, effective, accessible websites

  • Home
  • About
  • Websites
  • Writing
  • Learn
  • Blog
  • Contact
You are here: Home / WordPress / Spectra WordPress Plugin Review – A Powerful Plugin to Extend the Block Editor

Spectra WordPress Plugin Review – A Powerful Plugin to Extend the Block Editor

Posted: October 14, 2022 Updated: June 24, 2024 by Claire Brotherton
15 Comments

Spectra - WordPress Gutenberg Blocks

WordPress’ block editor was introduced in version 5 and has transformed the way we build sites.

But despite the huge number of blocks available, there’s always room for more.

That’s where Spectra, formerly known as Ultimate Addons for Gutenberg, comes in.

Spectra - WordPress Gutenberg Blocks

Spectra is made by Brainstorm Force, the company behind the Astra theme, and is designed to build websites without coding. The plugin currently has over 400,00 installs, and over 800 five-star reviews on wordpress.org.

It adds a series of blocks to the block editor. Here’s the list:

Spectra blocks and extensions

At the time of writing, there are 31 blocks or extensions. Extensions are enhancements for other blocks.

Wisely, the Spectra developers have allowed you to disable individual blocks if you aren’t using them.

When using the block editor, Spectra blocks appear like this:

Spectra blocks in the block editor
Table Of Contents
  1. Enhanced Gutenberg Blocks – Heading, Container, Image, Blockquote, Buttons, Icon List, Masonry Gallery
    • Heading block
    • Container block
    • Image block
    • Blockquote block
    • Buttons block
    • Icon List block
    • Masonry Gallery block
  2. Conditional blocks – Responsive Conditions, Display Conditions
    • Responsive Conditions
    • Display Conditions
  3. My favourite blocks – Content Timeline, Google Map, Table of Contents
    • Content Timeline block
    • Google Map block
    • Table of Contents
  4. Post blocks – Post Carousel, Post Grid, Post Timeline
    • Post Carousel block
    • Post Grid block
    • Post Timeline block
  5. Other Spectra blocks
    • Info Box block
    • Call to Action block
    • FAQ block
    • Form block
    • How To block
    • Inline Notice block
    • Lottie Animation block
    • Marketing Button block
    • Price List block
    • Review block
    • Social Share block
    • Star Ratings blocks
    • Tabs block
    • Taxonomy List block
    • Team block
    • Testimonials block
  6. Copying and pasting block styles
  7. Spectra Template Kits
    • Pages
    • Patterns
    • Wireframes
  8. Summing up

Enhanced Gutenberg Blocks – Heading, Container, Image, Blockquote, Buttons, Icon List, Masonry Gallery

Heading block

Spectra’s heading block offers a little more than a standard heading block.

You can change the font-family of the heading, and apply a colour gradient to it, as opposed to a single colour.

You can also have a separator under your heading (solid, double, dashed or dotted) and add a subheading. Note that the subheading isn’t marked up as a heading, but as a paragraph tag, so I personally wouldn’t use it.

Spectra heading block with separator and sub heading

Container block

The Container block is like the block editor’s Columns block but offers more layouts.

Spectra Container layouts
Spectra container block with images

Image block

Spectra’s image block differs somewhat from the standard image block. One cool thing you can do is to add an overlay with a heading and other text to the image, similar to the Cover block. Where Spectra differs is that you can add a border to your image and have text appear on hover.

Spectra image block showing text on hover

You can also add other effects such as box-shadow, borders and a clipping mask.

A feather image with box-shadow
Image of a rocky outcrop with a dashed border
Golden Gate Bridge with a hexagonal mask

Blockquote block

The blockquote block is a souped-up quote block. As well as the quote and citation, you can add a small image and a tweet button.

Spectra Blockquote block - Tough times never last but tough people do, quote from Robert H Schuller

Buttons block

The buttons block scores over the default button block by giving you more styling choices over buttons.

You can choose from 8 button presets, add an icon to your button, change the button size and colour, change the typography and select how the buttons stack on mobile devices.

Spectra buttons block showing gradient background and arrow icons

Icon List block

The icon list is a list block with icons instead of bullet points. Each item in the list can have a different icon.

Spectra Icon List block

Masonry Gallery block

You can try Spectra’s masonry gallery by adding a standard Gallery block and enabling the masonry gallery option.

Enable Masonry Layout on

Your images display at the same width but different heights:

Spectra Masonry Gallery

Conditional blocks – Responsive Conditions, Display Conditions

These settings allow you to control the display of Spectra blocks. Check that they are on by visiting Settings > Spectra > Blocks/Extensions.

To enable them in the block editor, go to the Advanced tab for the block you are working on.

Responsive Conditions

Spectra Responsive Conditions settings with hide on tablet and hide on mobile enabled

Display Conditions

Display Conditions lets you enable display of a block by user state, user role, browser or operating system.

Spectra Display Conditions with Browser selected

My favourite blocks – Content Timeline, Google Map, Table of Contents

Content Timeline block

The Content Timeline block is easy to edit. Just change the text and the dates and you’re away. Spectra Content Timeline - landmarks in the history of a restaurant

Google Map block

The Google Map block is extremely easy to use – simply fill in the address and choose the zoom level, height of the map and language. No fiddling around creating API keys – that’s all been taken care of.

Google Map of Edinburgh Castle

Table of Contents

Spectra’s Table of Contents takes its lead from the headings in your document. It’s automatically created for you when you insert the block.

In the block settings you can adjust the heading levels used to create the table. If you need to hide a heading for any reason, here’s instructions on excluding headings.

Spectra Table of Contents block

Post blocks – Post Carousel, Post Grid, Post Timeline

Post Carousel block

The post carousel is a configurable carousel showing 3 posts by default. You can control the carousel’s autoplay and display options. You also have control over post display e.g. you can filter posts by category, change the display order and number of columns.

Spectra Post Carousel block showing 3 posts

Post Grid block

The post grid block displays 6 posts by default in a grid. The screenshot shows posts filtered by the Block category and pagination.

Spectra Post Grid block

Post Timeline block

The post timeline block shows posts in a timeline, from newest to oldest. You have multiple configuration options here, including:

  • Number of posts to display
  • Filter by category or tag
  • Change order from descending to ascending
  • Show or hide featured images
  • Change the calendar icon
Spectra Post Timeline block

Other Spectra blocks

Info Box block

The info box lets you add a heading and accompanying information, along with an icon.

Spectra Info Box block

Call to Action block

This block features a button along with a heading and description. You can change the button’s style and add an additional button.

Spectra Call to Action block with a Join Now button

FAQ block

The FAQ block is an accordion block, with the first question and answer open by default.

Configuration options include:

  • Change the layout
  • Enable schema support
  • Change the open and closed icons
Spectra FAQ block

Form block

The Form block inserts a simple contact form, newsletter form or suggestion form, which is configurable.

The form is not as powerful as one created by a dedicated form plugin, but it will do at a pinch.

Spectra Form block showing a simple contact form

How To block

The How To block lets you add a how to section using schema markup. The use of schema markup can boost your showing in Google search results.

Spectra How To Make Blinis block

Inline Notice block

You can use the inline notice to display tips or warnings, for example. You can style the colour of your notice and make it dismissible.

Spectra Inline Notice block with a tip

Lottie Animation block

You can show animations in the browser by inserting a Lottie animation. You can get links to animations from LottieFiles. Lottie animations are designed to be lightweight and quick loading.

Marketing Button block

Similar to the Call to Action, the marketing button block features a choice of button designs, a heading, icon and accompanying text.

Spectra Marketing Button block

Price List block

This block shows a price list in grid format – choose from one of four presets.

Spectra Price List preset layouts
Spectra Price List block showing menu items

Review block

The review block also supports schema markup. You can select the type of review from the following:

  • Book
  • Course
  • Movie
  • Product
  • Software Application

Spectra prompts you for all the information you need to add the right type of schema markup for your review.

Spectra Review block with a review of a wine bar

Social Share block

Social sharing buttons to share your content across various networks – 20 in all.

Spectra Social Share block showing Facebook, Twitter, Pinterest and LinkedIn buttons

Star Ratings blocks

Rate any product or service with these star ratings. You can have partial star ratings e.g. 4.5. Star ratings can be out of 5 or out of 10, and you can alter how they display.

Spectra Star Ratings blocks - Zinfandel 4 stars, Merlot 4.5 stars, Chardonnay 5 stars

Tabs block

Add an info box with multiple tabs to your content with the tabs block.

Spectra Tabs block

Taxonomy List block

Display your categories or tags in a grid or a list, with post counts optional.

Spectra Taxonomy List block showing tags and post numbers

Team block

This block shows team profiles, with optional picture and social media links.

Spectra Team block showing a profile for a chef

Testimonials block

The Testimonials block shows testimonials in a carousel. You can add images and adjust the number of testimonials, number of columns, and the carousel display.

Spectra Testimonials block

Copying and pasting block styles

Spectra lets you keep brand consistency by providing a copy and paste function for block styles.

Spectra copy and paste blockquote styles

Spectra Template Kits

If you want to start building pages quickly, Spectra’s Template Kits are an excellent choice. They’re arranged in three flavours – Pages, Patterns and Wireframes.

Pages

Pages are groups of templates built around a type of business. Most have three or more templates to build a range of pages. Using Astra theme is the best way to get your site looking like the demos.

Spectra Template Kits Pages for home and garden decor, heating and AC Technician, learn baking and ebook author
Spectra Deli Restaurant templates

Patterns

Patterns are parts of pages which perform a specific function, such as Features and Services. You can filter the patterns by colour and category.

Spectra Template Kits - Patterns
Spectra Light FAQ Patterns

Wireframes

Wireframes are layouts waiting for you to add content, grouped by type. Again, you can filter them by colour and category.

Spectra Template Kits Wireframes
Spectra Hero Wireframes

Summing up

Spectra has a lot to offer in terms of blocks and templates. The range of blocks is impressive and using Template Kits is a great way to build a site fast.

Do you think you will use Spectra? Leave a comment below.

Related

Category: WordPress

About Claire Brotherton

Freelance web designer and front end developer based in Edinburgh, Scotland. I love WordPress, code, learning and blogging.

Reader Interactions

Comments

  1. Graham Armfield says

    October 15, 2022 at 4:56 pm

    Great post Claire as I’m lowering myself into actually using Gutenberg now, and this is really useful.

    Have you assessed the accessibility of any of these blocks when they are output onto a page?

    Reply
    • Claire Brotherton says

      October 19, 2022 at 9:42 am

      Thanks for commenting, Graham.

      No, I didn’t test the block outputs for accessibility, though I tried navigating the Tabs block with the keyboard, and it seemed to work okay.

      Think Spectra accessibility testing is a whole other post!

      Reply
    • Claire Brotherton says

      October 19, 2022 at 10:11 am

      I have made a couple of accessibility suggestions to the developers for the Table of Contents block:

      1. Make the title Table of Contents into a Heading 2.
      2. Provide a skip link for sighted keyboard users to skip the Table of Contents.

      I’m told that these have been added to the to-do list.

      Reply
  2. Darko Nelson says

    March 30, 2023 at 9:36 am

    Nice description. And I have a similar post but focused on the visual preview of particular blocks-https://nelmediashop.com/wordpress/spectra-wordpress-blocks-a-new-era-of-design

    Reply
    • Darko Nelson says

      February 22, 2024 at 4:05 pm

      I moved the aforementioned text to a new address, and since you don’t have a comment correction, I have to publish it like this:
      https://nel-media.com/en/spectra-wordpress-blocks-a-new-era-of-design

      Reply
  3. Mike says

    April 11, 2023 at 7:15 am

    Good review Claire,
    I am using wpbakery, do you suggest changing it to spectra?

    Reply
  4. Yasar Ali says

    June 25, 2023 at 1:19 pm

    Thank you for the detailed review. I had to choose the best Gutenberg Block plugin and it feels like Spectra is the all-in-one solution for what my site requires.

    Reply
    • Claire Brotherton says

      June 28, 2023 at 6:59 pm

      Thanks for reading and commenting, Yasar!

      Reply
  5. Ayush singh says

    November 25, 2023 at 7:16 am

    Nice post. I loved Spectra’s icon list option. This feature is truly amazing and the Popup builder in the pro version is also a really good feature with the best customization.
    Spectra is really cool page builder plugin.
    Thanks

    Reply
  6. David says

    August 28, 2024 at 12:59 pm

    Great post! I’m really impressed with Spectra’s icon list option—it’s such a standout feature. The Popup Builder in the Pro version is also excellent, offering top-notch customization. Spectra truly is an outstanding page builder plugin!

    Reply
    • Claire Brotherton says

      August 28, 2024 at 9:30 pm

      Thanks David, I really like Spectra too.

      Reply
  7. Graham Armfield says

    August 29, 2024 at 5:46 am

    Working on a site at the moment where I’m considering using Spectra. One thing I’ve noticed before with block plugins is that if you have two different block plugins enabled at the same time they don’t always play nicely with each other.

    Have you noticed any issues like that with Spectra?

    Reply
    • Claire Brotherton says

      August 30, 2024 at 1:02 pm

      No, I haven’t had compatibility issues, but I have noticed that there is duplication of blocks between Spectra and other block plugins like Otter Blocks.

      Spectra also hogs the top spot of the block inserter. 🙂

      Reply
  8. Ayush Singh says

    September 10, 2024 at 11:49 am

    Good Review. I am using Spectra Pro on my website and I loved the plugin. The popup builder and Instagram feed in the pro version is my fav feature.
    The premium plugin worth your money.
    Thanks

    Reply
    • Claire Brotherton says

      September 10, 2024 at 2:21 pm

      Good to know! Thanks for your comment, Ayush.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email. Read my privacy policy.

potted cactus and laptop with code

Footer

Categories

  • Accessibility
  • Blogging & Content Marketing
  • Business
  • Personal
  • Software & Tech
  • Websites
  • WordPress

Top Posts

  • How To Create WordPress Excerpts And Include Links In Them
  • How To Solve WordPress Image Alignment And Text-Wrap Problems
  • Improve Your Divi Website's Reach With Divi Accessibility
  • How To Set Up And Customize Twenty Nineteen Theme
  • Registering a Domain Name with GoDaddy - Step by Step

Let’s Be Social

  • E-mail
  • Facebook
  • LinkedIn
  • Twitter
Copyright © 2014 -2025 A Bright Clear Web
  • Privacy and cookies policy
  • Site map