Calculators · Gutenberg
Debt Payoff Calculator block for WordPress
Compare Avalanche vs Snowball debt payoff strategies. Enter multiple debts, set a monthly payment budget, and see exactly when you'll be debt-free and how much interest you'll save.
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
Compare Avalanche vs Snowball debt payoff strategies. Enter multiple debts, set a monthly payment budget, and see exactly when you'll be debt-free and how much interest you'll save.
Inspector panels on this block: Header, Calculator Settings, Sizing & Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “Default Strategy” options: Avalanche (highest rate first), Snowball (lowest balance first).
Where to find it
Gutenberg inserter → Calculators → search “Debt Payoff Calculator” (block name `blockenberg/debt-payoff-calculator` in block.json). Style it in the sidebar after insert.
How to use Debt Payoff Calculator block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Debt Payoff Calculator”, insert it. Category: Calculators.
- Configure inspector controls that exist on this block. Open Header. Set “Show Title”, “Show Subtitle”, “Header — Title”, “Subtitle”.
- Check the published page. The view script reads HTML data attributes: data-opts, data-strat. 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`. |
| Show Subtitle | On/off toggle in the inspector. On by default. Saved as `showSubtitle`. |
| Header — Title | Text field in the inspector. block.json default: Debt Payoff Calculator. Saved as `title`. |
| Subtitle | Text field in the inspector. block.json default: Find the fastest, cheapest way to become debt-free. Saved as `subtitle`. |
| Currency Symbol | Text field in the inspector. block.json default: $. Saved as `currency`. |
| Default Strategy | Select control; the chosen value is saved on the block. Options: Avalanche (highest rate first); Snowball (lowest balance first). block.json default: avalanche. Saved as `defaultStrategy`. |
| Show Strategy Comparison | On/off toggle in the inspector. On by default. Saved as `showComparison`. |
| Show Payment Schedule | On/off toggle in the inspector. On by default. Saved as `showSchedule`. |
| Schedule Rows to Show | Numeric range control in the inspector. Range 6–60. block.json default: 12. Saved as `scheduleRows`. |
| Result number size (px) | Numeric range control in the inspector. Range 14–36. block.json default: 22. Saved as `resultNumFontSize`. |
| Strategy label size (px) | Numeric range control in the inspector. Range 11–22. block.json default: 15. Saved as `stratLabelFontSize`. |
| Table font size (px) | Numeric range control in the inspector. Range 10–18. block.json default: 13. Saved as `tableFontSize`. |
| Card Border Radius | Numeric range control in the inspector. Range 0–40. block.json default: 16. Saved as `cardRadius`. |
| Input Radius | 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 360–1100. block.json default: 700. Saved as `maxWidth`. |
| Padding Top | Numeric range control in the inspector. Range 0–160. block.json default: 60. Saved as `paddingTop`. |
| Padding Bottom | 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, data-strat.
- JavaScript functions that perform the math: calcPayoff.
When this is the right block
- Compare Avalanche vs Snowball debt payoff strategies. Enter multiple debts, set a monthly payment budget, and see exactly when you'll be debt-free and how much interest you'll save — that is the job of Debt Payoff 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 debt, payoff, avalanche.
- 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 Debt Payoff Calculator block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Debt Payoff Calculator”. It sits under Calculators. After insert, open Header and set “Show Title”, “Show Subtitle”, “Header — Title”, “Subtitle”.
Where do Debt Payoff Calculator submissions go?
The published page calls this block’s Blockenberg REST route (see front-end notes). The editor canvas does not send mail unless you preview on the front end.
Is the Debt Payoff Calculator Gutenberg block free?
Yes. Debt Payoff Calculator ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Debt Payoff 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, Sizing & Layout).
Related calculators blocks
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.
Savings Calculator
An interactive compound interest savings calculator. Enter initial deposit, monthly contribution, annual interest rate, and years to see total savings, interest earned, and a year-by-year growth breakdown.
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.
Loan Affordability Calculator
Calculate how much home or loan you can afford based on annual income, existing debts, interest rate, and debt-to-income ratios. Ideal for real estate and finance sites.
Monthly Budget Planner
Interactive monthly budget planner with income and expense categories. Track spending, visualise balance and see how much is left to allocate.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Debt Payoff Calculator from the Gutenberg inserter.