Calculators · Gutenberg
Recipe Scaler block for WordPress
Scale recipe ingredient quantities up or down by adjusting the number of servings. Add, edit and remove ingredients with a live WYSIWYG preview.
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
Scale recipe ingredient quantities up or down by adjusting the number of servings. Add, edit and remove ingredients with a live WYSIWYG preview.
Inspector panels on this block: Recipe Settings, Sizing. Those titles come from index.js, not from a shared template.
Where to find it
Gutenberg inserter → Calculators → search “Recipe Scaler” (block name `blockenberg/recipe-scaler` in block.json). Style it in the sidebar after insert.
How to use Recipe Scaler block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Recipe Scaler”, insert it. Category: Calculators.
- Configure inspector controls that exist on this block. Open Recipe Settings. Set “Recipe Name”, “Default Servings”, “Maximum Servings”, “Show quick serving buttons”.
- Check the published page. The view script reads HTML data attributes: data-idx, 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 |
|---|---|
| Recipe Name | Text field in the inspector. block.json default: Classic Pancakes. Saved as `recipeName`. |
| Default Servings | Numeric range control in the inspector. Range 1–24. block.json default: 4. Saved as `defaultServings`. |
| Maximum Servings | Numeric range control in the inspector. Range 4–100. block.json default: 24. Saved as `maxServings`. |
| Show quick serving buttons | On/off toggle in the inspector. On by default. Saved as `showQuickBtns`. |
| Show recipe notes | On/off toggle in the inspector. On by default. Saved as `showNotes`. |
| Recipe Notes | Text field in the inspector. block.json default: Do not over-mix the batter — a few lumps are fine!. Saved as `recipeNotes`. |
| Max Width (px) | Numeric range control in the inspector. Range 400–1100. block.json default: 660. Saved as `contentMaxWidth`. |
| Typography — Title | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `titleTypo`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-idx, data-opts.
When this is the right block
- Scale recipe ingredient quantities up or down by adjusting the number of servings. Add, edit and remove ingredients with a live WYSIWYG preview — that is the job of Recipe Scaler, not a generic content block.
- Use it when you need the editor control labeled “Recipe Name”, which exists on this block’s inspector.
- It matches pages about recipe, scaler, ingredients.
- Inserter grouping: tools, lead magnets, and interactive widgets.
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 Recipe Scaler block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Recipe Scaler”. It sits under Calculators. After insert, open Recipe Settings and set “Recipe Name”, “Default Servings”, “Maximum Servings”, “Show quick serving buttons”.
What makes Recipe Scaler different from other Blockenberg blocks?
Scale recipe ingredient quantities up or down by adjusting the number of servings. Add, edit and remove ingredients with a live WYSIWYG preview. Inspector labels on this block include “Recipe Name”, “Default Servings”, “Maximum Servings”, “Show quick serving buttons”.
Is the Recipe Scaler Gutenberg block free?
Yes. Recipe Scaler ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Recipe Scaler 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: Recipe Settings, Sizing).
Related calculators blocks
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.
Binary & Text Converter
Convert text to binary, hexadecimal, and octal — and back. Includes an interactive ASCII table.
BMI Calculator
Interactive Body Mass Index calculator with metric and imperial units, animated result gauge, weight category indicator, and fully customizable styling.
Body Fat Calculator
Calculate body fat percentage using the US Navy method based on height, neck, waist, and hip measurements. Shows body fat category and health range.
Break-Even Calculator
Calculate break-even point, profit zone, and contribution margin for business analysis.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Recipe Scaler from the Gutenberg inserter.