Calculators · Gutenberg
Tax Calculator block for WordPress
Calculate sales tax, VAT, or estimate income tax brackets. Supports before-tax and after-tax price calculations with customizable tax rates and display options.
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
Calculate sales tax, VAT, or estimate income tax brackets. Supports before-tax and after-tax price calculations with customizable tax rates and display options.
Inspector panels on this block: Header, Calculator Settings, Preset Rate Chips, Sizing. Those titles come from index.js, not from a shared template.
Behavior controls: “Default Mode” options: Add Tax (price → total), Remove Tax (total → price); “Tax Label” (e.g. Sales Tax, VAT, GST); “Currency Position” options: Before ($100), After (100€); “Result Font Weight” options: 400 Regular, 500 Medium, 600 Semi-bold, 700 Bold, 800 Extra Bold.
Where to find it
Gutenberg inserter → Calculators → search “Tax Calculator” (block name `blockenberg/tax-calculator` in block.json). Style it in the sidebar after insert.
How to use Tax Calculator block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Tax Calculator”, insert it. Category: Calculators.
- Configure inspector controls that exist on this block. Open Header. Set “Show Title”, “Header — Title”, “Show Subtitle”, “Subtitle”.
- Check the published page. The view script reads HTML data attributes: data-opts. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Show Title | On/off toggle in the inspector. On by default. Saved as `showTitle`. |
| Header — Title | Text field in the inspector. block.json default: Tax Calculator. Saved as `title`. |
| Show Subtitle | On/off toggle in the inspector. On by default. Saved as `showSubtitle`. |
| Subtitle | Text field in the inspector. block.json default: Calculate sales tax, VAT, or reverse-calculate the pre-tax price.. Saved as `subtitle`. |
| Default Mode | Select control; the chosen value is saved on the block. Options: Add Tax (price → total); Remove Tax (total → price). block.json default: sales. Saved as `mode`. |
| Tax Label | Text field in the inspector. e.g. Sales Tax, VAT, GST. block.json default: Sales Tax. Saved as `taxLabel`. |
| Currency Symbol | Text field in the inspector. block.json default: $. Saved as `currency`. |
| Currency Position | Select control; the chosen value is saved on the block. Options: Before ($100); After (100€). block.json default: before. Saved as `currencyPos`. |
| Default Amount | Text field in the inspector. |
| Default Tax Rate (%) | Text field in the inspector. |
| Show Preset Buttons | On/off toggle in the inspector. On by default. Saved as `showPresets`. |
| Label | Text field in the inspector. |
| Rate (%) | Text field in the inspector. |
| Result Size (px) | Numeric range control in the inspector. Range 24–80. block.json default: 48. Saved as `resultSize`. |
| Result Font Weight | Select control; the chosen value is saved on the block. Options: 400 Regular; 500 Medium; 600 Semi-bold; 700 Bold; 800 Extra Bold. block.json default: 800. Saved as `resultFontWeight`. |
| Accent | Color control in the inspector. block.json default: #6c3fb5. Saved as `accentColor`. |
| Card Background | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Result Box BG | Color control in the inspector. block.json default: #f5f3ff. Saved as `resultBg`. |
| Result Box Border | Color control in the inspector. block.json default: #ede9fe. Saved as `resultBorder`. |
| Tax Amount | Color control in the inspector. block.json default: #ef4444. Saved as `taxColor`. |
| Total Price | Color control in the inspector. block.json default: #6c3fb5. Saved as `totalColor`. |
| Net Price | Color control in the inspector. block.json default: #10b981. Saved as `netColor`. |
| Stat Card BG | Color control in the inspector. block.json default: #f9fafb. Saved as `statCardBg`. |
| Title Color | Color control in the inspector. block.json default: #1e1b4b. Saved as `titleColor`. |
| Subtitle Color | Color control in the inspector. block.json default: #6b7280. Saved as `subtitleColor`. |
| Label Color | Color control in the inspector. block.json default: #374151. Saved as `labelColor`. |
| Section Background | Color control in the inspector. Saved as `sectionBg`. |
| Card Radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 16. Saved as `cardRadius`. |
| Input Radius (px) | Numeric range control in the inspector. Range 0–20. block.json default: 8. Saved as `inputRadius`. |
| Max Width (px) | Numeric range control in the inspector. Range 320–900. block.json default: 580. Saved as `maxWidth`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–160. block.json default: 60. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–160. block.json default: 60. Saved as `paddingBottom`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
- JavaScript functions that perform the math: calcSalesTax, calcReverse.
When this is the right block
- Calculate sales tax, VAT, or estimate income tax brackets. Supports before-tax and after-tax price calculations with customizable tax rates and display options — that is the job of Tax Calculator, not a generic content block.
- Use it when you need the editor control labeled “Show Title”, which exists on this block’s inspector.
- It matches pages about tax, sales tax, vat.
- 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 Tax Calculator block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Tax Calculator”. It sits under Calculators. After insert, open Header and set “Show Title”, “Header — Title”, “Show Subtitle”, “Subtitle”.
Does Tax 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 Tax Calculator Gutenberg block free?
Yes. Tax Calculator ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Tax 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: Header, Calculator Settings, Preset Rate Chips, Sizing).
Related calculators blocks
Compound Interest Calculator
Calculate compound interest growth with configurable compounding frequency, monthly contributions, and a year-by-year breakdown.
Currency Converter
Interactive currency converter supporting 30+ world currencies with instant conversion, swap button, common pairs quick-select, and customizable styling. Uses built-in indicative rates.
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.
Loan Calculator
Interactive mortgage and loan calculator with sliders for loan amount, interest rate, and term. Displays monthly payment, total interest, and total cost. Optional amortization schedule and doughnut chart.
Net Worth Calculator
Track assets and liabilities to calculate total net worth. Categorised inputs for cash, investments, real estate, vehicles, and various debt types.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Tax Calculator from the Gutenberg inserter.