Calculators · Gutenberg

Break-Even Calculator block for WordPress

Calculate break-even point, profit zone, and contribution margin for business analysis.

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.

Get Blockenberg

What it actually does

Calculate break-even point, profit zone, and contribution margin for business analysis.

Inspector panels on this block: Header, Calculator Defaults, Sizing & Layout. Those titles come from index.js, not from a shared template.

Where to find it

Gutenberg inserter → Calculators → search “Break-Even Calculator” (block name `blockenberg/break-even-calculator` in block.json). Style it in the sidebar after insert.

How to use Break-Even Calculator block for WordPress

  1. Install Blockenberg. Install from WordPress.org and activate the plugin.
  2. Insert the block. Edit a page, click +, search for “Break-Even Calculator”, insert it. Category: Calculators.
  3. Configure inspector controls that exist on this block. Open Header. Set “Show Title”, “Show Subtitle”, “Header — Title”, “Subtitle”.
  4. 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

ControlWhat the code does
Show TitleOn/off toggle in the inspector. On by default. Saved as `showTitle`.
Show SubtitleOn/off toggle in the inspector. On by default. Saved as `showSubtitle`.
Header — TitleText field in the inspector. block.json default: Break-Even Calculator. Saved as `title`.
SubtitleText field in the inspector. block.json default: Find the exact point where revenue covers all costs. Saved as `subtitle`.
Currency SymbolText field in the inspector. block.json default: $. Saved as `currency`.
Default Fixed CostsText field in the inspector. block.json default: 10000. Saved as `defaultFixedCosts`.
Default Price/UnitText field in the inspector. block.json default: 50. Saved as `defaultPricePerUnit`.
Default Var Cost/UnitText field in the inspector. block.json default: 20. Saved as `defaultVarCostUnit`.
Default Units to SellText field in the inspector. block.json default: 500. Saved as `defaultUnitsToSell`.
Show Profit Zone BarOn/off toggle in the inspector. On by default. Saved as `showProfitZone`.
Show Contribution MarginOn/off toggle in the inspector. On by default. Saved as `showContribution`.
Show Margin RatioOn/off toggle in the inspector. On by default. Saved as `showMarginRatio`.
Result Font SizeNumeric range control in the inspector. Range 24–72. block.json default: 46. Saved as `resultSize`.
Card Border RadiusNumeric range control in the inspector. Range 0–40. block.json default: 16. Saved as `cardRadius`.
Input Border RadiusNumeric 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 340–960. 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

When this is the right block

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 Break-Even Calculator block in WordPress?

Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Break-Even Calculator”. It sits under Calculators. After insert, open Header and set “Show Title”, “Show Subtitle”, “Header — Title”, “Subtitle”.

Does Break-Even 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 Break-Even Calculator Gutenberg block free?

Yes. Break-Even Calculator ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.

Can I style Break-Even 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 Defaults, Sizing & Layout).

Related calculators blocks

Get Blockenberg

Install Blockenberg from WordPress.org, then insert Break-Even Calculator from the Gutenberg inserter.

Get Blockenberg