WordPress Plugins

Spectra Pro: premium Gutenberg blocks for the Astra ecosystem

Spectra Pro adds a popup builder, dynamic content, conditional display, and premium blocks to Gutenberg. Honest walk-through of features, hooks, and limits.

John M. 22 min read
Spectra Pro Review: premium Gutenberg blocks from the Astra team review on GPL Times

A client asked me last quarter to rebuild a four-page launch site for a course they were running. Astra was already the theme. The Spectra free blocks had carried the first version. The brief on round two was: add a timed popup with a coupon, swap the static testimonial cards for a Query Loop that pulls real reviews from a custom post type, and hide the upgrade pricing block from logged-in students. That is exactly the line where Spectra free stops and Spectra Pro starts, and that is the question this article is here to answer: when you are already on the Brainstorm Force stack (Astra, Spectra, maybe CartFlows or SureCart), is Spectra Pro the natural upgrade, or are you better off pulling in a different premium blocks plugin?

I will walk through what Pro actually adds to the free Spectra base, where the popup builder and dynamic content engine fit on a real site, the hooks Pro exposes for developers, and where I would still pick something else instead. We are describing this one from the source code; the GPL Times demo sandbox could not load the Spectra Pro admin without the free Spectra core installed alongside it, so the screenshots are sitting this article out.

Table of contents

What Spectra Pro actually is

Spectra Pro is the paid add-on to the free Spectra plugin, both built by Brainstorm Force, the same team behind the Astra theme. If you have been around the WordPress ecosystem for a few years you have probably met this plugin under its old name, Ultimate Addons for Gutenberg (UAG). Brainstorm Force rebranded it to Spectra in 2022. Almost every internal hook, REST namespace, and class still uses the uagb and UAGB_ prefixes, which is useful to know the first time you grep through the codebase wondering where "spectra_" went.

The split is straightforward. The free Spectra plugin lives on WordPress.org and ships around thirty native Gutenberg blocks: Container, Buttons, Info Box, Icon List, Forms, Counter, Marketing Button, Section, Advanced Heading, Post Grid / Carousel / Masonry / Timeline, Google Map, Star Rating, Table of Contents, and a Query Loop with extended controls. It has about 600,000 active installs the last time I checked, which puts it in the same active-install ballpark as Kadence Blocks and well past most of the boutique block libraries. Spectra Pro is a separate plugin that you install alongside the free core and license through a key. On activation it does not replace blocks; it slots into the same Spectra menu in the admin, adds Pro-only blocks to the inserter, and turns on a set of cross-cutting extensions (popups, dynamic content, conditional display, animations, custom CSS per block, schema markup).

A small detail that trips up first-timers: Pro features are visible inside the free Spectra admin before the license is active. They show with a "Pro" badge and toggles do nothing until activation. That is a marketing-led decision rather than a UX one, and you should know about it before you click around looking for "where do I enable popups" on the Settings tab and conclude it is broken. It is not. The Pro license switch is what lights those toggles up.

Where Pro starts and free ends

The clearest way to think about Pro is as five separate capability layers laid on top of the same block library. Free gets you the inserter, the design controls, and the basic blocks. Pro gets you:

  • Block-based popups. A purpose-built spectra-popup custom post type with its own builder UI, trigger types (page load with delay, exit intent, on click of an element), and display-rule engine.
  • Dynamic content tokens. Per-text-field replacement of inline placeholders with post meta, ACF fields, site data, and post-loop variables. Driven by a render_block filter and a private REST namespace (uagpro_dc/v1).
  • Conditional display per block. Show or hide any block based on login state, user role, device, date range, or browser.
  • Premium blocks. Modal, Lottie animations, Login Form, Registration Form, Image Gallery Pro variants, Countdown Pro, Slider Pro, Instagram Feed.
  • Cross-cutting extensions. Per-block custom CSS and custom JavaScript, animation presets, video backgrounds on container blocks, FAQ schema output, white-label settings.

You do not pay for "more blocks" with Spectra Pro. You pay for the popup builder and the dynamic content engine, mostly. The premium blocks are nice but they are not the reason most people upgrade.

The Popup Builder, walked through

The popup builder is the headline feature and the one that does the most work on real sites. Mechanically it is just a custom post type called spectra-popup. Each popup is a stack of Gutenberg blocks you compose inside the normal editor, plus a sidebar where you pick the trigger and the display rules.

The trigger options stored on the popup as spectra-popup-trigger post meta are:

  • load: open on page load, with a spectra-popup-trigger-delay value in seconds. This is what you reach for first because it covers "show after 3 seconds", "show after the user has dwelled long enough to be reading".
  • exit: detect cursor moving toward the browser chrome on desktop. Mobile has no exit intent (there is no cursor), so the JS quietly no-ops there. If you want a mobile equivalent you switch the trigger to load with a longer delay on mobile only, which is the trick I had to use after the experience I will describe further down.
  • element: open when a specific selector is clicked. You give the popup a unique data-attribute name and add it to any block on the page (a Button block, an Image, a custom HTML snippet) so the click handler hooks up.

The display ruleset is the part that decides "where does this popup show up?". Spectra Pro stores two arrays of rules per popup: spectra-popup-display-inclusions and spectra-popup-display-exclusions. Each rule is a tag that resolves at render time. The tags include basic-singulars (any single post), basic-archives (any archive), special-404, special-search, special-blog (the blog index), special-front (the front page), special-date (date archives), special-author (author archives), special-woo-shop (the WooCommerce shop page), and all for "show everywhere". On top of those, you can target specific posts, specific taxonomies, and specific archive types. The exclusion list runs after the inclusion list, so the common pattern of "show on every post except the thank-you page" is a single exclusion rule.

There is no built-in A/B test framework. There is no per-popup conversion goal. There is no "first-time visitor only" rule out of the box (you have to wire that yourself with a cookie or block it behind the conditional-display extension’s login rule). If you are running a marketing site that needs cohort splits and goal tracking on each popup, Spectra Pro’s builder will feel light next to a dedicated tool like Brainstorm Force’s own Convert Pro or OptinMonster. For the much more common case of "show one timed coupon on the pricing page and one exit-intent newsletter signup on the blog", it is exactly the right size.

A truth from production: on an Astra + Spectra Pro client site I built last quarter, the Popup Builder’s exit-intent trigger ate the page’s scroll position for one user (Chrome on a particular Mac trackpad, scroll-restoration interaction with the body class the popup adds). The fix was switching the trigger to time-delay-on-mobile only and keeping exit-intent for desktop. Worth knowing if you ever ship a popup and get one bug report about the page jumping.

Dynamic content and the Query Loop add-on

Dynamic content in Spectra Pro is not the WordPress block editor’s built-in "block bindings" feature; it predates that work. It runs as a render_block filter that walks a block’s HTML output and replaces inline tokens with values from one of three sources: Posts (current post fields, post meta, the post author), Site (site title, tagline, URL, the logged-in user), and CustomFields (raw post meta plus ACF integration if ACF is installed).

In editor UI terms, you open any block that holds text, click into the new "dynamic" control next to the field, pick a source, and Spectra writes a token into the block’s HTML. The token is replaced at render time. The replacement is filtered with the enable_dynamic_content setting so you can switch the whole engine off without uninstalling Pro. Pro exposes its REST routes under the uagpro_dc/v1 namespace, with endpoints like /search_posts and /post that power the editor’s post-picker autocompletes.

The Query Loop block in free Spectra is already extended (more layout controls, more pagination options) but Pro layers on the Loop Builder. The Loop Builder is a separate inserter pattern that lets you design the "card" used for each item in the loop, then bind any text or image inside the card to the loop’s post via dynamic content. You can plug the loop into a custom query with the uagb_loop_query_attributes filter, which is how I rewired the testimonial loop on that client site to filter by a featured meta key:

add_filter( 'uagb_loop_query_attributes', function ( $args, $attributes ) {
 if ( empty( $attributes['postType'] ) || 'testimonial'!== $attributes['postType'] ) {
 return $args;
 }
 $args['meta_query'] = array(
 array(
 'key' => 'featured',
 'value' => '1',
 'compare' => '=',
 ),
 );
 return $args;
}, 10, 2 );

The uagb_loop_excerpt_length filter is the matching one for the per-item excerpt length, which the block editor’s default loop control caps lower than you usually want.

Honest note about dynamic content: if you only need a couple of bindings on a couple of posts, the core WordPress block bindings API (which has matured a lot since the feature shipped) is the lighter answer. Spectra Pro’s value here is the editor UX (dropdowns and pickers rather than handwritten metadata) and the fact that it works the same way across every Pro-aware block.

Conditional display and other per-block extras

Open any block on a page that has Pro active, and the inspector sidebar grows an "Advanced" panel with three groups that are the Pro extension layer:

  • Display Conditions. Toggle the block off based on logged-in/logged-out state, specific user role, device (desktop, tablet, mobile, individually), browser, or a date range. The rules compose with AND, so "show only to logged-in subscribers on mobile during the campaign window" is three rules in one block.
  • Responsive Conditions. Coarser per-device hide toggles that exist on free Spectra too, but Pro extends them to apply across every block in the library, including Pro blocks.
  • Custom CSS / Custom JS. A code editor pane on each block that lets you write block-scoped CSS and JS. Spectra automatically scopes the CSS to a unique block class and runs the JS in a self-contained IIFE. This is the kind of feature that is fantastic for last-mile tweaks and dangerous as a "fix every layout problem here" habit; treat it as the escape hatch.

The conditional display engine flows through the spectra_pro_conditional_display_results filter on render, so you can intercept and add custom rules of your own. For a membership site I have used this to add a "show only to active subscribers" check that calls into the membership plugin’s API rather than relying on user role.

Premium blocks worth knowing about

Spectra Pro adds about a dozen blocks. Most of them are "Pro variants" of existing free blocks (Image Gallery Pro adds Masonry and Justified layouts on top of free’s Grid; Slider Pro adds more transitions; Countdown Pro adds evergreen-per-visitor mode). A few are net new and worth calling out:

  • Modal. A lightweight on-page modal block that opens on click of any trigger you specify by selector. Different from the Popup Builder in that it is rendered inline in the page rather than as a separate post type with display rules. Reach for it when the trigger is local to the page (a "more details" button next to a pricing card) and for Popup Builder when the trigger is global (every page on the site).
  • Login Form and Registration Form. Block-based replacements for wp-login.php that you drop on a page. The Registration Form has a spectra_pro_registration_form_change_new_user_role filter you can use to overrule the role assigned to new accounts at registration time, and spectra_pro_registration_form_role_manager to control which roles are even selectable in the block’s inspector.
  • Lottie Animations. A wrapper around lottie-web for rendering JSON-based vector animations. Useful for hero sections; not so useful for the rest of a page because every Lottie file is non-trivial bandwidth.
  • FAQ + Schema. A FAQ block that doubles as JSON-LD schema output so the page is eligible for the FAQ rich result in Google. Spectra also has a separate Schema settings group for LocalBusiness, Product, and How-To schemas.
  • Instagram Feed. Block + cached fetcher for an Instagram account feed. Limited compared to the dedicated Instagram-feed plugins (no story support, no tagged posts), but enough for a simple sidebar feed.

The two I have actually used in production are the Modal and the FAQ. The Modal is just a cleaner alternative to a third-party lightbox plugin. The FAQ block earned its keep on a service site that wanted FAQ-rich-result eligibility without writing JSON-LD by hand.

Installation and license activation

Either way the steps from there are:

  1. Install the free Spectra plugin first from Plugins > Add New and activate it. Pro will refuse to bootstrap if Spectra core is not present and at the required version (the constant SPECTRA_CORE_REQUIRED_VER in the main plugin file is the floor; Pro warns in the admin if you are below it).
  2. Upload the Spectra Pro zip via Plugins > Add New > Upload Plugin and activate it.
  3. Go to Spectra > Settings > Activate License in the admin, paste the license key, click Activate. The license check uses Brainstorm Force’s bsf_activate_license_ / bsf_deactivate_license_ API, and once active the Pro toggles on Settings and the Pro blocks in the inserter come alive.
  4. On the same Settings page, scroll down to the "Pro Features" toggles. Pro features are off by default. You opt in to each one: Popup Builder, Dynamic Content, Conditional Display, Custom CSS, Schema, Animations. This is one of Spectra’s better UX choices because the Pro extension layer can be heavy if every feature loads on every page, and the per-feature toggles let you keep the runtime small.
  5. (Optional) Go to Spectra > Settings > White Label and replace the plugin’s branding for client-facing installs. White-label is Pro-only and covers the plugin name, author name, author URL, and the menu label.

If you are installing on a site that already has the free Spectra running with content, nothing breaks on Pro activation. The Pro blocks appear in the inserter alongside the free ones with no migration step. The same goes for deactivating Pro: the popup builder posts stay as spectra-popup CPT entries in the database, they just stop rendering on the front end.

Developer reference: hooks, REST, post types

The codebase is split into two namespaces. Anything Pro-specific lives under SpectraPro\ (PSR-4-ish). Anything inherited from the old UAG codebase still uses the UAGB_ class prefix and uagb_ hook prefix.

Post types and meta

The Popup Builder registers a single CPT, spectra-popup, with post meta keys:

spectra-popup-trigger # 'load' | 'exit' | 'element'
spectra-popup-trigger-delay # integer seconds (used when trigger=load)
spectra-popup-display-inclusions # serialized array of inclusion rules
spectra-popup-display-exclusions # serialized array of exclusion rules
spectra-popup-type # 'banner' | 'popup'

You can build a popup programmatically by creating a spectra-popup post with block content and setting these metas. It is the same shape the editor writes, so the renderer treats your programmatically created popup identically.

REST API

Dynamic content registers routes under the uagpro_dc/v1 namespace. The ones that matter if you are wiring custom UI on top are:

  • GET /uagpro_dc/v1/search_posts with post_type, keyword, limit args. Permission: current_user_can( 'edit_posts' ).
  • GET /uagpro_dc/v1/post with id arg, returns a single post.

There are no public read endpoints; everything requires an editor capability because the routes are for the block editor’s autocomplete UI.

Filters worth knowing

# Dynamic content
enable_dynamic_content # 'enabled' | 'disabled' kill switch
render_block # dynamic content piggybacks on the core filter
spectra_buttons_child_content # filters resolved button block content
uagb_google_map_block_attributes # filter map block attributes for dynamic Lat/Lng

# Query loop
uagb_loop_query_attributes # modify WP_Query args for the Loop Builder
uagb_loop_excerpt_length # excerpt length for loop items

# Conditional display
spectra_pro_conditional_display_results # final boolean for "should this block render"

# Popups
spectra_pro_popup_should_render # final boolean for "should this popup render on this request"

# Registration / Login forms
spectra_pro_registration_form_role_manager # which roles are selectable in the block
spectra_pro_registration_form_change_new_user_role # final role assigned to new user

# Setup
spectra_pro_enable_redirect_activation # redirect on plugin activation
spectra_pro_setting_pages # register additional Pro setting pages

Action hooks

The Pro plugin itself does not fire many custom do_action() hooks; most of its lifecycle integration is through the Brainstorm Force core (bsf_activate_license_*, bsf_deactivate_license_*, bsf_product_update_*) and through standard WordPress hooks. If you need to react to "this popup is rendering", the cleanest path is to filter spectra_pro_popup_should_render and return false based on your own logic.

A short, realistic example: hide a specific popup from anyone whose role is gpl_subscriber (a custom membership role) without touching the popup’s display rules in the editor.

add_filter( 'spectra_pro_popup_should_render', function ( $should, $popup_id ) {
 if ( 12345!== (int) $popup_id ) {
 return $should;
 }
 $user = wp_get_current_user();
 if ( $user && in_array( 'gpl_subscriber', (array) $user->roles, true ) ) {
 return false;
 }
 return $should;
}, 10, 2 );

And one for conditional display, blocking a block from rendering between 2am and 5am UTC for a maintenance window:

add_filter( 'spectra_pro_conditional_display_results', function ( $result, $block ) {
 $hour = (int) gmdate( 'G' );
 if ( $hour >= 2 && $hour < 5 ) {
 return false;
 }
 return $result;
}, 10, 2 );

The Loop Builder query filter from earlier in this article is the third one I lean on most.

One extended scenario: launch page on Astra + Spectra Pro

Walking through one realistic build will tell you more about Spectra Pro than a feature list. The site: a one-person course creator launching a paid cohort. Astra theme. Spectra free for the static blocks. WooCommerce for checkout. SureCart could have been used here too, but the client already had Woo. Brief was four pages plus a signup popup and a goodbye-page upsell.

The home page is built entirely in the editor with free Spectra. Container + Heading + Buttons in the hero. An Info Box row with three columns. A Spectra Star Rating block. Nothing Pro yet.

The pricing page is where Pro starts. Three plans laid out in Container blocks. On the highest-tier card I drop a Modal block (Pro) with a "Compare features" button as the trigger. The Modal contains a deep feature matrix that would clutter the pricing card if it lived inline. Below the pricing grid, a Query Loop pulling testimonials from a testimonial custom post type, using the Loop Builder to design the card and the uagb_loop_query_attributes filter shown earlier to pull only the ones flagged featured = 1.

The blog is a standard Spectra Post Grid for now, but each post page gets the FAQ block at the bottom for the most common questions about the course, which gets us the FAQ rich result schema "for free" in the JSON-LD output.

The popup is where Pro. One spectra-popup post: "First-time-visitor 10% off" banner, trigger load with a 6-second delay, display-rule inclusion basic-singulars and exclusion of the checkout page (special- rules are not enough here; we add the checkout page to the post-specific exclusion list). The popup body is a heading, paragraph, a Spectra Buttons block with the coupon code, and a small close affordance. Total build time for the popup: about 8 minutes.

Conditional display does the cleanup. The pricing block on the home page gets a "logged-out only" condition so existing students never see the pitch. The "join now" Button at the bottom of every blog post gets a "logged-out, not on mobile under 700ms" condition combined with a date range that turns the button off the day after the cohort closes.

Where the build hit friction: the Loop Builder’s editor UI is not as snappy as GenerateBlocks Pro’s loop block. Switching between desktop and mobile breakpoints in the loop card editor caused a couple of stutters. The popup builder’s "preview on front end" link does not honor your current display rules, so a popup gated to non-logged-in users will still preview to the logged-in admin. Both quirks are workable but worth knowing.

Spectra Pro vs Kadence vs GenerateBlocks vs Stackable

The honest comparison, because the marketing pages will not give you one:

  • vs GenerateBlocks Pro. GenerateBlocks is the better choice for performance-first sites. It is primitive-first: Container, Grid, Headline, Text, and Image, plus a Loop block. You compose your own design out of those primitives, so the runtime CSS is tiny and the page weight is the lowest of any block plugin I have measured. Spectra is feature-first: every block ships with a ton of inspector controls and presets. You move faster on Spectra; you ship lighter pages on GenerateBlocks. If page weight is the contract, GenerateBlocks Pro wins. If "ship a marketing site this week" is the contract, Spectra wins.
  • vs Kadence Blocks Pro. Kadence has the broader block ecosystem, with deeper third-party integrations, a more polished design library, and a header/footer builder that ties into the Kadence theme the way Spectra ties into Astra. The two plugins are close in scope. If you are already on the Kadence theme, use Kadence Blocks Pro. If you are already on Astra, use Spectra Pro. The cross-stack story (Kadence Blocks on Astra, or Spectra on the Kadence theme) works fine but you give up the synergy.
  • vs Stackable Premium. Stackable has more design variety in its block presets and a stronger "looks like a Webflow template" library out of the box. Spectra has the popup builder and tighter Brainstorm Force ecosystem integration. The difference is taste plus what else you are running.
  • vs CoBlocks. CoBlocks free is similar in scope to Spectra free. CoBlocks does not have a comparable Pro offering, so once you need popups, dynamic content, or conditional display you are leaving CoBlocks regardless.

The single line that should drive the decision: which theme are you on? Astra users get the most out of Spectra Pro because Brainstorm Force has built every plugin in their suite to plug into Astra’s customizer-driven layout system. Non-Astra users still get a solid Pro blocks plugin but lose the ecosystem benefit, which is most of what you are paying for.

Performance, gotchas, and the Brainstorm Force ecosystem fit

A few things that are not in the marketing copy:

  • Asset loading is per-block. Spectra (free and Pro) builds a per-page CSS file at render time that only contains the styles for the blocks present on that page. This is genuinely one of the better implementations in the space and is part of why a Spectra page weighs less than you would guess from the feature list. The Pro extensions add to that bundle when active, so the "turn off the features you do not use" toggle on the Settings page is meaningful.
  • The post-type assets cache. Pro respects the free plugin’s "Exclude Assets for Post Type" setting (via UAGB_Admin_Helper::should_exclude_assets_for_cpt). If you have a custom post type that should never load Spectra’s bundle (a print-only page, a JSON endpoint), opt it out there and Pro’s Loop Builder script will skip it too.
  • The Pro UI badge confusion. As mentioned above, Pro features show in the free admin with a "Pro" badge before activation. If you support clients who self-installed Pro, the first time they look at Settings before pasting the license they will assume the toggles are dead. Walk them through activation first.
  • The Brainstorm Force ecosystem pull. Spectra Pro lives inside a wider Brainstorm Force suite: the Astra theme, Starter Templates, CartFlows for checkout funnels, SureCart for SaaS-style commerce, Convert Pro for dedicated optin campaigns, Schema Pro for advanced schema, Ultimate Addons for Beaver Builder / Elementor (their non-Gutenberg add-on lines). If you are using two or three of those, the bundled pricing starts to look like the right move. If you are only using Spectra, the standalone Pro license is the cleaner buy.
  • No FSE template editor integration. If your site is a full-site-editing block theme, Spectra Pro will render its blocks fine but the popup builder and conditional display do not deeply integrate with the FSE template editor. This is a moving target as the block editor evolves; check the changelog if you are FSE-first.
  • The codebase is part-UAG, part-Spectra. Cosmetic but real. If you are going to fork, patch, or write integrations, you will spend the first hour grokking that uagb_ and UAGB_ are the same plugin under a different name. The new code uses the SpectraPro\ namespace and the spectra_pro_ filter prefix. The old code never got renamed because doing so would break every existing integration in the wild.

Pricing and licensing

The official Brainstorm Force pricing has Spectra Pro starting around $59 per year for a single site and around $249 for a lifetime single-site license. The bundle pricing is what most heavy users land on: the Essential Toolkit (Astra Pro plus Spectra Pro plus a few other Brainstorm Force plugins) sits around $169 per year, and the Growth Bundle (everything Brainstorm Force makes, including CartFlows, SureCart, Convert Pro, Schema Pro, Starter Templates, Ultimate Addons, ZipWP) sits around $299 per year. Renewal pricing is usually discounted.

Both the official build and the GPL-licensed version are functionally identical because the plugin is GPL-licensed software; the difference is updates and support routing.

A note on sibling products if you are building out the wider stack: Astra Pro is the theme companion that most Spectra users also run. The two are designed to be used together and the customizer integration is much deeper when both are active.

Final thoughts

Spectra Pro makes the most sense as one piece of a bigger Brainstorm Force commitment. If you have already chosen Astra as the theme, Starter Templates as the design library, maybe CartFlows for your funnels, then Spectra Pro is the obvious blocks layer because it is built by the same team to slot into the same admin patterns and to share assets through the same loader. The popup builder is good enough for most sites, the dynamic content engine is good enough for most loops, the conditional display is the feature you will actually use the most after the first week, and the per-block custom CSS and JS panels are the escape hatch you will be grateful for the first time a client asks for a tweak that does not fit in the inspector. Where Spectra Pro is not the answer: if you are not on Astra and you are picking a blocks plugin in a vacuum, the choice between Spectra Pro, Kadence Blocks Pro, GenerateBlocks Pro, and Stackable Premium is closer than the marketing pages would have you believe, and your existing theme is the tiebreaker.

For developer reference, the official Spectra documentation at wpspectra.com is the canonical source for block-by-block configuration. The free Spectra plugin page on WordPress.org (still listed under the old "Ultimate Addons for Gutenberg" slug) has the wider community changelog and support forum. The Brainstorm Force site is the corporate hub for the whole product family. And for any custom block development you do on top of Spectra Pro, the WordPress block editor handbook is the right reference because Spectra blocks are standard registered block types, not a separate API.

Tags