Section blocks vs. tiny components: page builders editors can’t break

For years, our page builder setup was made of small pieces: a text component, a spacer, a button, all nested inside flexible wrappers. In theory editors could build anything. In practice, every site slowly drifted away from its design.

The problem with tiny components

• Changing spacing or type sizes later means editing dozens of instances.
• Mobile layouts depend on how each wrapper happened to be configured.
• Editors get too many knobs, so pages drift off-brand.
• Content entry is slow because every section is assembled by hand.

Build blocks at the section level

A section block matches one section of the design: a hero, a card grid, a stats band. Its layout and responsive behavior live in code. Editors fill in content and choose from a few deliberate options.

Give editors the right levers

• A semantic heading tag that’s separate from its visual size, so an H3 can look like an H1 without breaking the page outline.
• A short list of approved background colors instead of a color picker.
• Layout variants, like image left or right, instead of free positioning.
• Spacing presets tied to design tokens.

/* Design tokens as CSS variables: change once, update everywhere */
:root {
  --space-section: clamp(64px, 8vw, 120px);
  --color-brand: #3D5AFE;
  --font-size-h1: clamp(38px, 4.6vw, 62px);
}

This works with Gutenberg too

The same thinking applies to block themes and custom Gutenberg blocks: a few smart blocks with locked-down layout and clear options beat a toolbox of primitives.