Calculators · Gutenberg

Scientific Calculator block for WordPress

A fully functional scientific calculator with standard arithmetic, trigonometric, logarithmic, and power functions, memory storage, and history log.

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

A fully functional scientific calculator with standard arithmetic, trigonometric, logarithmic, and power functions, memory storage, and history log.

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

Behavior controls: “Default Angle Mode” options: Degrees, Radians.

Where to find it

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

How to use Scientific 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 “Scientific 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-mode, 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: Scientific Calculator. Saved as `title`.
SubtitleText field in the inspector. block.json default: Perform advanced mathematical calculations. Saved as `subtitle`.
Default Angle ModeSelect control; the chosen value is saved on the block. Options: Degrees; Radians. block.json default: deg. Saved as `angleMode`.
Show Memory ButtonsOn/off toggle in the inspector. On by default. Saved as `showMemory`.
Show HistoryOn/off toggle in the inspector. On by default. Saved as `showHistory`.
History Max EntriesNumeric range control in the inspector. Range 3–20. block.json default: 10. Saved as `historyMax`.
Calculation PrecisionNumeric range control in the inspector. Range 4–14. block.json default: 10. Saved as `precision`.
Display Font SizeNumeric range control in the inspector. Range 18–64. block.json default: 36. Saved as `displaySize`.
Button Font SizeNumeric range control in the inspector. Range 11–22. block.json default: 15. Saved as `btnSize`.
Card Border RadiusNumeric range control in the inspector. Range 0–40. block.json default: 20. Saved as `cardRadius`.
Button RadiusNumeric range control in the inspector. Range 0–20. block.json default: 10. Saved as `btnRadius`.
Max Width (px)Numeric range control in the inspector. Range 320–640. block.json default: 420. Saved as `maxWidth`.
Padding TopNumeric range control in the inspector. Range 0–160. block.json default: 60. Saved as `paddingTop`.
Padding BottomNumeric 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 Scientific Calculator block in WordPress?

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

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

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

Can I style Scientific 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

Get Blockenberg

Install Blockenberg from WordPress.org, then insert Scientific Calculator from the Gutenberg inserter.

Get Blockenberg