Using the Block

The Vareon Calculator block is the recommended way to embed calculators in the WordPress block editor.

Add the Block

1. Open the page or post where you want the calculator
2. Click the + inserter
3. Search for Vareon Calculator
4. Insert the block
5. Choose the calculator you want in the block UI

Block Basics

The block handles the embed for you and outputs the calculator on the frontend using the same Lite rendering system as the shortcode.

The block supports:

• Calculator selection
• Theme override
• Width control
• Branding override
• Block alignment

Theme Behavior

Lite supports these built-in themes:

• light
• dark
• modern

If you do not set a block-level theme, the block uses the global default theme from:

• Settings -> Vareon Calculator Suite

Branding Behavior

Branding can be controlled globally in plugin settings and overridden per block.

• If you leave branding untouched in the block, the block uses the global setting
• If you explicitly change branding in the block, that block uses its own setting

Width and Alignment

The block supports these alignment modes:

• left
• center
• right
• wide
• full

Width behavior matters because the plugin applies alignment-aware caps:

• Default alignment: up to 645px
• Left, center, or right alignment: up to 700px
• Wide or full alignment: up to 1340px
• Minimum practical width: 300px

If you set a pixel width, the embed stays responsive and uses that value as a max width. Example:

620px

If you use percentages, the width follows the container. Example:

100%

Recommended Block Workflow

For most sites, this is the cleanest process:

1. Set the global theme and formatting in plugin settings
2. Insert the block where needed
3. Pick the calculator
4. Only override theme or branding when that specific page needs something different
5. Preview on desktop and mobile before publishing

When to Use the Block Instead of a Shortcode

Use the block when:

• You work mainly in the block editor
• You want a visual insertion flow
• You want block alignment controls
• You want easier per-page adjustments

Use shortcodes instead when:

• You are working in Elementor or another page builder
• You need to paste the calculator into widgets or template areas
• You are using the Classic Editor

See: Using Shortcodes

Troubleshooting Block Issues

The block is missing from the inserter

• Confirm the plugin is active
• Refresh the editor
• Check that you are in the block editor, not the Classic Editor

The calculator looks different on the frontend

• Check whether the block has a local theme override
• Check the page template and your theme styles
• Clear cache and refresh

The width is not what you expected

• Check the block alignment setting
• Check whether you entered a pixel width or percentage width
• Remember the plugin applies max-width caps based on alignment

Next Steps

• Using Shortcodes
• Settings Reference
• Troubleshooting