Blog Argument

Block themes and page builders: what each one actually costs

How block themes eliminate builder bloat, protect content from plugin lock-in, and keep WordPress sites fast and maintainable over years.

Visual page builders like Elementor, Divi, and Beaver Builder dominate WordPress agency workflows for a clear reason: they let teams assemble custom layouts visually, hand intuitive drag-and-drop controls to clients, and launch on schedule.

The architectural trade-off is not just initial page weight. The real divergence is how each system stores content in the database and how design changes are managed across the site lifecycle.

How page builders store layout in post_content#

When you inspect post_content for a page built with a traditional visual builder, the database holds proprietary shortcodes, deep wrappers with utility classes, or a serialised JSON payload:

  • Styles live directly in database rows. Margins, padding, font sizes, and custom colours are stored element by element across individual posts. Changing a button radius or brand colour across a site means modifying every saved layout manually or overriding rules with !important CSS.
  • Deactivation breaks presentation. When a builder plugin is deactivated or encounters a fatal PHP error, shortcodes render as raw text and layouts lose the stylesheets required to position columns.
  • Migrations require manual reconstruction. Because content formatting is coupled to a specific plugin runtime, exporting content to a new design requires copying text and rebuilding templates from scratch.

This storage model prioritises per-element visual control during editing at the expense of a unified design system.

How block themes separate content from design tokens#

Block themes separate markup structure from global styling tokens.

Content is stored as standard semantic HTML annotated with HTML block comments:

<!-- wp:heading {"level":2} -->
<h2 class="wp-block-heading">What we do</h2>
<!-- /wp:heading -->

Global design rules live in theme.json. This configuration file defines the site palette, typography scale, spacing presets, and layout widths. Blocks reference these tokens by slug rather than hardcoding CSS values into post_content.

Updating a colour palette or font scale in theme.json updates every block across the site immediately. Switching themes leaves the content intact as valid HTML that adopts the new theme's tokens.

Structural comparison#

FactorPage builderBlock theme
Setup speedFast visual assembly out of the boxRequires initial theme configuration
Style managementStored per element in page markupCentralised in theme.json
Theme portabilityLocked to the builder pluginStandard HTML blocks
Asset footprintVendor framework CSS and JSPer-block styles loaded on demand
Client editingFree-form visual canvasConstrained Site Editor controls

The block editor and Site Editor require a structured mental model. For a fixed-budget brochure site where layouts will never change and the client demands arbitrary drag-and-drop positioning, a visual builder remains a pragmatic tool.

Where block themes pay off over time#

Block themes provide distinct advantages as a site grows and requires ongoing maintenance:

  1. Multi-site reuse: Standard theme.json presets and core block patterns can be reused across client builds without recurring plugin licence fees.
  2. Global rebrands: Modifying site-wide colours and typography in theme.json takes one configuration edit rather than updating individual page records.
  3. Core Web Vitals: WordPress loads styles only for the specific core blocks present on the rendered page, eliminating unused CSS bundles.
  4. Clean handoffs: Standard block markup adheres to core WordPress conventions, allowing any developer to maintain the codebase without vendor training.

Assembling layouts with core patterns#

Page builders gained popularity because they offer ready-made section templates. Assembling complex heroes, comparison grids, and pricing tables from scratch in the core editor is slow.

Block patterns bridge that gap. A pattern is a collection of core blocks pre-configured into a section. Pasting a pattern places production-ready markup directly into the post while inheriting the active theme's tokens.

When sourcing patterns, verify that the markup uses theme slugs rather than hardcoded hex values to maintain portability across future redesigns.

Planning transitions for existing projects#

For new WordPress builds, configuring a block theme and establishing a theme.json token hierarchy provides a clean, maintainable foundation.

For existing client sites running smoothly on page builders, leave them in place until a scheduled redesign. Rebuilding working sites provides minimal immediate return; the logical time to migrate to block themes is when rewriting templates and updating the visual identity.

Pattern Paste is a library of 232 WordPress block patterns in plain core markup, with 6 free to copy. Browse the library, or read how it works.

Read next

All posts