Skip to main content

​
Block patterns and styles

Vara SaaS registers a small set of block editor additions, plus the design tokens that make blocks match the front end.

​
The registered items

​
The lead paragraph style

A larger, more prominent paragraph style for introductory text. To apply it: select a paragraph block → Styles tab in the block settings sidebar → choose Lead. Screenshot: the paragraph block Styles tab showing the Vara SaaS Lead style Good uses:
  • The opening sentence of an article
  • A short introduction under a page title
  • A pull-quote-adjacent statement
Avoid using it on long passages — it is designed for one or two sentences.

​
The hero pattern

A constrained group of blocks designed as a hero section. To insert it: in the block editor, open the Patterns tab, choose the Vara SaaS category, and select Hero. Screenshot: the block inserter Patterns tab showing the Vara SaaS category and Hero pattern Because it is a pattern — inline block markup rather than a template file — you can edit every block in it individually once inserted.

​
What theme.json gives the editor

The block editor is styled to match the front end. theme.json provides:

​
Colors

A nine-color palette, available in any block that offers color controls — Group → Color in the settings sidebar. Screenshot: the block editor color palette showing the theme's nine colors

​
Fonts

Inter and JetBrains Mono are available as global fonts in the typography settings of any block.
These do not follow your Customizer font selection. The Customizer’s base font is a separate control with its own allowlist. If you set a custom font there, the block editor will still offer Inter and JetBrains Mono. Change the front end font in the Customizer and the editor font in the block settings — they are independent by design.

​
Type sizes

A ten-step named scale, available in Typography → Size on any text block.

​
Layout

Screenshot: a block set to the wide alignment spanning the full wide width

​
Editor styles

The theme calls add_editor_style() so the editor canvas renders in your theme’s typography rather than WordPress defaults. What you see in the editor is close to what you get on the front end.

​
Other block editor support

The theme also declares:

Wide blocks

align-wide support, so blocks can span the wide width.

Block styles

wp-block-styles support, which is what registers the Lead style.

​
Working with blocks instead of a builder

You can build your entire site with Gutenberg. The theme gives you:
  • A styled header, footer, blog index, archives, and single post
  • The design palette, fonts, and type scale in the editor
  • The hero pattern and lead paragraph style
What you do not get is the default front-page sections as editable blocks. If you want a marketing homepage without a builder, you build it yourself in the block editor, or you use the theme’s default sections via a child theme.

Block editor

The full Gutenberg integration.

Typography reference

The editor’s type scale in detail.