Calculators · Gutenberg
Age Calculator block for WordPress
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.
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
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.
Inspector panels on this block: Content, Display Options, Sizing. Those titles come from index.js, not from a shared template.
Where to find it
Gutenberg inserter → Calculators → search “Age Calculator” (block name `blockenberg/age-calculator` in block.json). Style it in the sidebar after insert.
How to use Age Calculator block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Age Calculator”, insert it. Category: Calculators.
- Configure inspector controls that exist on this block. Open Content. Set “Show Title”, “Content — 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`. |
| Content — Title | Text field in the inspector. block.json default: Age 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: Enter your birth date to find out your exact age. Saved as `subtitle`. |
| Years Label | Text field in the inspector. block.json default: Years. Saved as `yearsLabel`. |
| Months Label | Text field in the inspector. block.json default: Months. Saved as `monthsLabel`. |
| Days Label | Text field in the inspector. block.json default: Days. Saved as `daysLabel`. |
| Show Age Cards | On/off toggle in the inspector. On by default. Saved as `showAgeCards`. |
| Show Next Birthday | On/off toggle in the inspector. On by default. Saved as `showNextBirthday`. |
| Show Zodiac Sign | On/off toggle in the inspector. On by default. Saved as `showZodiac`. |
| Show Day of Week Born | On/off toggle in the inspector. On by default. Saved as `showBornDay`. |
| Show Life Stats | On/off toggle in the inspector. On by default. Saved as `showLifeStats`. |
| Title Typography | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `titleTypo`. |
| Age Number Typography | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `ageNumTypo`. |
| Accent Color | Color control in the inspector. block.json default: #6c3fb5. Saved as `accentColor`. |
| Age Card Background | Color control in the inspector. block.json default: #6c3fb5. Saved as `ageCardBg`. |
| Age Card Text | Color control in the inspector. block.json default: #ffffff. Saved as `ageCardColor`. |
| Result Background | Color control in the inspector. block.json default: #f5f3ff. Saved as `resultBg`. |
| Stats Background | Color control in the inspector. block.json default: #fafafa. Saved as `statsBg`. |
| Card Background | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| 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`. |
| Section Background | Color control in the inspector. Saved as `bgColor`. |
| Card Radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 16. Saved as `cardRadius`. |
| Age Card Radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 12. Saved as `ageCardRadius`. |
| Max Width (px) | Numeric range control in the inspector. Range 320–1200. block.json default: 680. 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: calcAge.
When this is the right block
- 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 — that is the job of Age 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 age, birthday, calculator.
- 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 Age Calculator block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Age Calculator”. It sits under Calculators. After insert, open Content and set “Show Title”, “Content — Title”, “Show Subtitle”, “Subtitle”.
Does Age 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 Age Calculator Gutenberg block free?
Yes. Age Calculator ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Age 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: Content, Display Options, Sizing).
Related calculators blocks
Date Difference
Calculate the exact difference between two dates — years, months, days, total days, weeks, hours, and working days.
Aspect Ratio Calculator
Calculate image or video dimensions, aspect ratios, and common presets for designers.
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.
Carbon Footprint Calculator
Estimate your annual CO2 equivalent emissions across transport, home energy, diet, and shopping categories.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Age Calculator from the Gutenberg inserter.