Calculators · Gutenberg
Price Calculator block for WordPress
Interactive SaaS pricing calculator with sliders, toggle switches, checkbox add-ons, and live price calculation. Supports monthly/annual billing and custom formulas.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Interactive SaaS pricing calculator with sliders, toggle switches, checkbox add-ons, and live price calculation. Supports monthly/annual billing and custom formulas.
Inspector panels on this block: Sliders, Add-ons, Pricing Settings, CTA Button, Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “Symbol position” options: Before ($9), After (9€).
Where to find it
Gutenberg inserter → Calculators → search “Price Calculator” (block name `blockenberg/price-calculator` in block.json). Style it in the sidebar after insert.
How to use Price Calculator block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Price Calculator”, insert it. Category: Calculators.
- Configure inspector controls that exist on this block. Open Sliders. Set “Label”, “Unit”, “Min”, “Max”.
- Check the published page. The view script reads HTML data attributes: data-annual, data-annual-discount, data-base-price, data-currency, data-currency-pos, data-monthly, data-price, data-price-per-unit. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Label | Text field in the inspector. |
| Unit | Text field in the inspector. |
| Min | Text field in the inspector. |
| Max | Text field in the inspector. |
| Step | Text field in the inspector. |
| Default | Text field in the inspector. |
| Price per unit ($/unit) | Text field in the inspector. |
| Monthly price ($) | Text field in the inspector. |
| Checked by default | On/off toggle in the inspector. |
| Base price ($) | Text field in the inspector. block.json default: 0. Saved as `basePrice`. |
| Currency symbol | Text field in the inspector. block.json default: $. Saved as `currency`. |
| Symbol position | Select control; the chosen value is saved on the block. Options: Before ($9); After (9€). block.json default: before. Saved as `currencyPos`. |
| Show billing toggle (monthly/annual) | On/off toggle in the inspector. On by default. Saved as `billingToggle`. |
| Annual discount % | Numeric range control in the inspector. Range 5–50. block.json default: 20. Saved as `annualDiscount`. |
| Price note (monthly) | Text field in the inspector. block.json default: per month, billed monthly. Saved as `priceNote`. |
| Price note (annual) | Text field in the inspector. block.json default: per month, billed annually. Saved as `priceNoteAnnual`. |
| Button label | Text field in the inspector. block.json default: Get Started. Saved as `ctaLabel`. |
| Button URL | Text field in the inspector. block.json default: #. Saved as `ctaUrl`. |
| Open in new tab | On/off toggle in the inspector. Off by default. Saved as `ctaNewTab`. |
| Max width (px) | Numeric range control in the inspector. Range 400–900. block.json default: 720. Saved as `maxWidth`. |
| Card radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 20. Saved as `cardRadius`. |
| Card padding (px) | Numeric range control in the inspector. Range 16–64. block.json default: 40. Saved as `cardPadding`. |
| Button radius (px) | Numeric range control in the inspector. Range 0–99. block.json default: 10. Saved as `btnRadius`. |
| Typography — Title | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `titleTypo`. |
| Subtitle | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `subtitleTypo`. |
| Price | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `priceTypo`. |
| Labels | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `labelTypo`. |
| Padding top | Numeric range control in the inspector. Range 0–200. block.json default: 64. Saved as `paddingTop`. |
| Padding bottom | Numeric range control in the inspector. Range 0–200. block.json default: 64. Saved as `paddingBottom`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-annual, data-annual-discount, data-base-price, data-currency, data-currency-pos, data-monthly, data-price, data-price-per-unit.
- JavaScript functions that perform the math: initCalculator, calcTotal.
When this is the right block
- Interactive SaaS pricing calculator with sliders, toggle switches, checkbox add-ons, and live price calculation. Supports monthly/annual billing and custom formulas — that is the job of Price Calculator, not a generic content block.
- Use it when you need the editor control labeled “Label”, which exists on this block’s inspector.
- It matches pages about calculator, pricing, price.
- The math runs in the visitor’s browser after publish — no extra calculator plugin.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Price Calculator block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Price Calculator”. It sits under Calculators. After insert, open Sliders and set “Label”, “Unit”, “Min”, “Max”.
Does Price Calculator need a server or extra plugin?
No. After Blockenberg is active, the view script runs in the browser with the values you saved on the block.
Is the Price Calculator Gutenberg block free?
Yes. Price Calculator ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Price Calculator to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Sliders, Add-ons, Pricing Settings, CTA Button).
Related calculators blocks
Discount Calculator
Calculate sale prices from discount percentages, find original prices from sale prices, or determine what discount percentage was applied. Three versatile calculation modes.
Invoice Calculator
A line-item invoice builder with editable rows, discount, tax, and grand total.
Tax Calculator
Calculate sales tax, VAT, or estimate income tax brackets. Supports before-tax and after-tax price calculations with customizable tax rates and display options.
Age Calculator
An interactive age calculator that computes exact age in years, months, and days from a birth date. Includes next birthday countdown, total days lived, zodiac sign, and day of week born.
Aspect Ratio Calculator
Calculate image or video dimensions, aspect ratios, and common presets for designers.
BMI Calculator
Interactive Body Mass Index calculator with metric and imperial units, animated result gauge, weight category indicator, and fully customizable styling.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Price Calculator from the Gutenberg inserter.