Building Custom Blocks

With v3.1, we introduced a complete block building system to WP Rig. This system comes with a handful of helper commands to make creating and building blocks a breeze.

With any of the below commands, if you are using Bun, you can replace the npm command with bun

Create a block (static)

(title auto-generated from slug)

npm run block:new -- hero --title="Hero"

Create a dynamic block

(title auto-generated from slug)

npm run block:new:dynamic testimonial

List blocks

npm run block:list

Remove a block

(prompts to confirm)

npm run block:remove wprig/hero

Promote to a plugin

(exports minimal plugin skeleton)

npm run block:promote-plugin wprig/hero

Once you have created your new block, you can run all of WP Rig

npm start

or we also have block specific commands to only watch and build the blocks

npm run start:blocks

Workflow and conventions

This block system is built on the @wordpress/create-block package, so you would develop these blocks the same as those. This means you can write JSX and follow all the other block dev conventions used with that package. This does mean you need to know some React to build these blocks.

Why build blocks in your theme?

While traditionally custom Gutenberg blocks are built as a plugin, there are some specific scenarios where you may want to build theme-specific blocks. It’s particularly useful for bespoke client sites or themes with unique visual patterns, as opposed to reusable blocks that warrant plugin distribution for broader compatibility.

Another thing to consider here is that WP Rig already has a robust build process built-in. Having a single build process to build your theme and blocks means that you only need one set of dependencies, one dev server running while developing, one build to run in your CI/CD pipeline, and one directory in your project repo.

Some great examples are blocks like: mega menu blocks, custom page navigation blocks,

Block ExampleDescriptionWhy Integrate into a Theme?
Hero Banner/CTA SectionA full-width banner with editable headline, subheadline, background image/video, and overlaid CTA button/link. Supports color palettes and alignment controls, often with nested inner blocks for columns or icons.Ties directly into the theme’s header/footer patterns and responsive grid; custom parallax or overlay effects match theme-specific animations without extra plugin overhead.
Testimonial SliderA carousel displaying rotating client quotes, photos, and ratings, with options for autoplay, navigation dots, and quote sourcing from a CPT.Enhances trust-building sections in marketing themes; styling (e.g., theme-matched typography and transitions) ensures seamless integration with site-wide sliders or grids.
Pricing TableResponsive cards comparing product/service plans, with features checklists, pricing toggles (monthly/yearly), and highlight states for premium options.Common in SaaS/e-commerce themes; leverages theme’s color scheme and button styles for consistent conversion funnels, avoiding plugin bloat for simple, non-dynamic pricing.
Mega MenusSome menu experience designs merit a very specific look and feel along with markupCustom menu walkers are commonly built into themes. So if the walk is in the theme, why not the menu block as well?
FAQ AccordionCollapsible panels for questions/answers, with search/filter options and expandable states; supports rich text and icons per item.Improves UX in documentation or service themes; theme-specific animations (e.g., easing curves) and icon libraries keep it lightweight and on-brand.
Dynamic Content GridA query loop pulling from CPTs (e.g., courses, products, or blog teasers) with customizable columns, filters, and card layouts (image, title, excerpt).Essential for content-heavy themes like education sites; integrates with theme’s query vars and pagination for efficient, site-tailored displays without external dependencies.
Custom Column LayoutAn advanced columns block with mobile breakpoint controls, drag-to-swap ordering, gap spacing, and background options per column.Addresses core block limitations in responsive themes; ensures uniform spacing and breakpoints across the site via theme’s SCSS variables.