Revolutionary Blocks Documentation

Revolutionary Blocks is a visual page builder that lives entirely inside the WordPress block editor. Instead of bolting a separate builder app onto your site, it adds a drag-and-drop palette of sections and patterns to Gutenberg, so you assemble whole pages from ready-made parts and edit them on a live canvas.

Every section is a real block. It saves as standard block markup in your post, inherits your theme's colors and fonts through the suite's design tokens, and responds to per-device controls without you writing a single media query. There is no jQuery, no second editor, and no proprietary format holding your content hostage.

This guide takes you from installation through registering your own patterns in code. If you just want to ship a page in five minutes, jump straight to Your first page.

Tip: Sections are composable. Drop a "Feature grid" pattern, then delete or duplicate individual cards inside it, the same way you would edit any group block. Nothing is locked.

Revolutionary Blocks installs like any standard WordPress plugin. You can install it from the bundled .zip archive or directly from the Revolutionary Plugins hub.

Upload the plugin. In your WordPress admin, go to Plugins - Add New - Upload Plugin and choose revolutionary-blocks.zip. Click Install Now.
Activate. Once installed, click Activate. The block palette and the Revolutionary category appear in the editor inserter on your next page edit.
Register your global styles. Open Appearance - Editor - Styles (or the block editor's style sidebar) to confirm the colors and fonts the sections will inherit. By default they read straight from your active theme.
Verify your license. Paste your suite license key under Revolutionary - Settings - License to unlock the premium sections, synced templates, and priority support.

Heads up: The block editor must be enabled for the post type you are editing. If a page is using the classic editor (via the Classic Editor plugin or a theme override), switch it to the block editor to see the palette.

Let's assemble a landing page from sections and publish it. The whole process takes about five minutes.

Create a new page. Go to Pages - Add New. You'll land in the standard block editor with the Revolutionary palette available in the inserter.
Drop in a hero. Open the inserter, find the Revolutionary category, and drag the Hero section onto the canvas. Click the headline to edit it in place.
Add more sections. Drag a Feature grid, then Pricing, then FAQ + CTA below the hero. Reorder anything by dragging its block toolbar handle.
Tune for mobile. Switch the device toggle to Phone and adjust columns and spacing for small screens. Your desktop layout is untouched.
Publish. Click Publish. The page renders as standard block markup with your theme's styling, no shortcode, no extra step.

That's the full loop: drop, edit, make responsive, publish. Everything else in this guide builds on these same moves.

The palette is your library of sections, grouped by purpose and searchable by name. Drag any item onto the canvas, or click to insert it at the current position. Each section is a self-contained block you can move, duplicate, or delete like any other.

Sections fall into a few families: layout (rows, columns, spacers), content (headings, rich text, media + text), and marketing (heroes, feature grids, pricing, testimonials, stats, FAQs, CTAs). Premium sections are marked Pro in the inserter and require an active license.

A section is a single block. A pattern is a pre-arranged group of sections, for example a full "FAQ + CTA" combination, that you insert as one unit and then tailor. Patterns are the fastest way to build a complete page: drop three or four and you have a draft.

Section	Description	Key controls
Hero	Headline, lede, two CTAs, and an optional media or gradient background.	Layout, alignment, background, button tokens
Feature grid	Two to four columns of icon cards, ideal for benefits and features.	Columns, icon style, gap, card border
Pricing	Two or three tiers with feature lists and a highlighted "popular" plan.	Tiers, featured plan, billing label
Stats band	A row of big numbers with labels, on a tinted or ink background.	Count, background, number gradient
Testimonials	Quote cards with star ratings and author detail, grid or single.	Columns, stars, avatar style
FAQ	Accordion of question and answer pairs using native details.	Open-by-default, dividers, width
CTA band (Pro)	A gradient call-to-action strip with one or two buttons.	Gradient, buttons, padding
Logos / cloud (Pro)	A wrapping row of client or integration logos and chips.	Items, spacing, grayscale toggle

Every section also supports an Additional CSS class and an anchor, so you can target it from custom CSS or link directly to it with a fragment URL.

Each block carries its own per-device settings. Use the device toggle in the editor toolbar to switch between Desktop, Tablet, and Phone, then change spacing, columns, alignment, or visibility for just that breakpoint. The plugin compiles these into clean inline styles, you never write a media query.

Spacing: set section padding and block margins independently per device.
Columns: a three-column grid on desktop can drop to one column on phone with a single change.
Visibility: hide or show any block per breakpoint, useful for swapping a desktop image for a compact mobile version.
Typography: override heading and text size per device when the global step needs a nudge.

Tip: Edit desktop first and let tablet and phone inherit it. Only override a breakpoint when the layout actually needs it, fewer overrides mean cleaner output and easier maintenance.

Revolutionary Blocks does not invent its own color picker soup. Sections read your site's design tokens, the same custom properties the rest of the Revolutionary suite uses, so a button or heading inside a block automatically matches your theme. Change your theme's primary color and every block button follows.

Button styling flows through the suite-wide token contract. A section's primary button consumes --rev-btn-bg, --rev-btn-color, and friends, while headings consume --rev-heading-font and the per-tag size tokens. Your theme emits those values, so you almost never set a color by hand.

/* A section button inherits your theme's button token contract */
.rb-section .rb-button {
  background: var( --rev-btn-bg, --rp-grad );
  color:      var( --rev-btn-color, #fff );
  border-radius: var( --rev-btn-radius, 999px );
}
/* Headings inherit the heading contract */
.rb-heading { font-family: var( --rev-heading-font, inherit ); }

Don't hardcode brand colors. If you override a section button with a fixed hex value, it will stop matching when you change your theme. Set colors at the global level and let the tokens cascade.

Any section or full page can be saved as a named template and reused across your site. When you insert a template you choose how it behaves:

Synced, all instances share one source. Edit the template once and every page updates. Perfect for a header CTA or a pricing block you repeat.
One-off, the template is copied into the page and then edited freely, with no link back to the source.

Manage your library under Revolutionary - Templates. You can rename, categorize, duplicate, and delete templates there, and see how many synced instances each one has across your site before you edit it.

Templates export to a portable JSON document so you can move them between sites, version them in git, or ship them inside a theme. Export from Revolutionary - Templates - Export, and import the same file on another site. The format is plain and human-readable:

{
  "name":    "Hero, lime gradient",
  "slug":    "hero-lime",
  "version": "2.4",
  "category": "marketing",
  "blocks": [
    {
      "name": "revolutionary/hero",
      "attributes": {
        "headline": "Build pages, not bloat",
        "align":    "center",
        "useTokens": true
      }
    }
  ]
}

Because useTokens is true, the imported hero adopts the new site's colors and fonts automatically, no manual restyling after a move.

You build with native blocks, so most pages need no shortcode at all, you simply publish. When you do want to render a saved template inside a non-block context (a widget, a classic-editor area, or a custom theme part), use the shortcode with the template id shown in the Templates library.

// Render saved template #123 anywhere shortcodes run
[revolutionary_block id="123"]

In the block editor itself you never need this, just insert the section from the palette. Here is the block markup the editor saves for an inserted hero, so you can see there is no proprietary wrapper:

<!-- wp:revolutionary/hero {"align":"center","useTokens":true} -->
<section class="rb-section rb-hero alignfull"> ... </section>
<!-- /wp:revolutionary/hero -->

You can also render a saved template from PHP in a theme template using the helper function:

if ( function_exists( 'revblocks_render' ) ) {
    echo revblocks_render( 123 );
}

Developers can ship their own sections to the palette by registering a pattern in code. This is how agencies build an in-house library that every client site inherits. Hook into the editor on init and call revblocks_register_pattern with a name, a category, and the block markup:

add_action( 'init', function() {
    if ( ! function_exists( 'revblocks_register_pattern' ) ) {
        return;
    }
    revblocks_register_pattern( [
        'slug'     => 'acme/promo-banner',
        'title'    => 'Promo banner',
        'category' => 'agency',
        'keywords' => [ 'cta', 'banner', 'promo' ],
        'content'  => '<!-- wp:revolutionary/cta {"useTokens":true} -->...<!-- /wp:revolutionary/cta -->',
    ] );
} );

Once registered, the pattern appears in the inserter's Patterns tab under your category, ready to drag onto any page, and it inherits the site's tokens just like the built-in sections.

Nearly every part of the rendering pipeline is filterable. Two of the most useful are shown below.

Use the revblocks_section_classes filter to add your own class to every rendered section, handy for scoping custom CSS or analytics hooks:

add_filter( 'revblocks_section_classes', function( $classes, $block ) {
    $classes[] = 'has-scroll-reveal';
    return $classes;
}, 10, 2 );

Use the revblocks_render_block filter to transform a section's output just before it reaches the page, for example to inject a lazy-load attribute or wrap a section for A/B testing:

add_filter( 'revblocks_render_block', function( $html, $block ) {
    if ( 'revolutionary/hero' === $block['blockName'] ) {
        $html = '<div data-experiment="hero">' . $html . '</div>';
    }
    return $html;
}, 10, 2 );

Other commonly used hooks include revblocks_register_categories, revblocks_template_save, revblocks_default_tokens (override the token map), and revblocks_palette_sections (filter which sections appear in the inserter). See the full reference in the developer docs.

Most issues come down to the editor, caching, or theme styling. Work through these first:

Palette not showing: confirm the post type uses the block editor, not the classic editor, and that the plugin is active. Hard-refresh the editor to clear a stale script bundle.
Buttons or headings look off-brand: your theme may not emit the suite's design tokens. Set your global colors and fonts in Appearance - Editor - Styles so the token contract has values to read.
Mobile layout looks wrong: check whether a phone-specific override is set on the block. Reset the breakpoint to let it inherit the desktop value, then adjust only what you need.
Synced template not updating: a full-page cache can serve a stale copy. Clear your cache after editing a synced template so every instance reflects the change.
Imported template uses wrong colors: make sure useTokens is enabled on the section so it adopts the destination site's palette instead of a baked-in hex.

Tip: Open the browser console while editing. The plugin logs a clear warning when a block can't find an expected token, which usually points straight at a theme that isn't emitting the contract.

It is fully native to the block editor. It adds sections, patterns, and a drag-and-drop palette to Gutenberg itself, so there is no second editor to load and no new interface for your team to learn.

Your content is saved as standard block markup in the post. Text, images, and structure remain in the database and stay readable. The premium sections render a graceful fallback, and nothing is locked in a proprietary format.

Yes. Sections read your global colors and fonts through the suite's design-token contract, so buttons and headings inherit your brand. Change your theme and the blocks follow, as long as the theme emits the tokens.

No. There is no jQuery dependency and no bundled CSS framework. Output is clean block markup with a tiny runtime, which keeps your pages fast and your Core Web Vitals healthy.

Yes. Register patterns in code with revblocks_register_pattern to ship a reusable in-house library, and filter the rendering pipeline with hooks like revblocks_render_block.

DOCUMENTATION

Getting started

Sections & patterns

Responsive controls

Global styles & tokens

Reusable templates

Register & extend

Introduction

Installation

Your first page

Blocks & palette

Sections & patterns

Responsive controls

Global styles & tokens

Reusable templates

Template JSON format

Embedding & shortcode

Register a pattern

Hooks & filters

Troubleshooting

FAQ

Frequently asked questions

Was this helpful?