Elliott Richmond Counter

An animated "count-up" statistic block for WordPress. The number counts up from zero to a target value when the block scrolls into view, with an editable subtitle describing what the figure represents. Built as a single block using the WordPress Interactivity API.

Requirements

• WordPress 6.7+
• PHP 8.2+
• Node 20+ and npm 9+ (only needed to build from source)

Features

• Counts up from 0 to a configurable target with an ease-out curve (~3s default).
• Animation triggers on scroll-into-view via IntersectionObserver; each instance animates independently.
• Locale-aware number formatting (Intl.NumberFormat) with optional thousands separator and decimal places.
• Optional prefix and suffix (e.g. £, +, %) that render only when set.
• Editable rich-text subtitle (bold, italic, links).
• Respects prefers-reduced-motion — shows the final value immediately with no animation.
• Standard block supports: wide/full alignment, colour, typography, spacing.
• Accessible: the animating number is aria-hidden, and a visually-hidden copy exposes the final value to assistive technology.

Block attributes

Development

npm install      # install dependencies
npm start        # build and watch for changes
npm run build    # production build to /build
npm run lint:js  # lint JavaScript
npm run lint:css # lint styles
npm test         # run JS unit tests

Build note

The block's front-end animation is a script module (viewScriptModule). Building script modules with @wordpress/scripts 30.x requires the WP_EXPERIMENTAL_MODULES environment variable, which the build and start npm scripts already set. If you run wp-scripts build directly, set it yourself: WP_EXPERIMENTAL_MODULES=true wp-scripts build.

The block is registered from build/block.json on the init hook, so a build must be run before the block appears in the editor.

Usage

Add the Animated Counter block to any post or page. Set the target value and formatting options in the block sidebar, type a subtitle, and — for a row of statistics — place several counters side by side inside a Columns block.

File structure

elliott-richmond-counter/
├── elliott-richmond-counter.php   # Plugin bootstrap; registers the block on init
├── uninstall.php                  # No-op (the block stores no data outside post content)
├── package.json                   # Build tooling (@wordpress/scripts)
├── src/                           # Block source
│   ├── block.json                 # Block metadata, attributes, supports
│   ├── index.js                   # Editor entry; registers the block
│   ├── edit.js                    # Editor component + inspector controls
│   ├── save.js                    # Saved markup with Interactivity API directives
│   ├── view.js                    # Front-end module: scroll trigger + count-up
│   ├── format.js                  # Shared number formatter
│   ├── easing.js                  # Ease-out maths + count-up value helper
│   ├── *.test.js                  # Jest unit tests
│   └── style.scss / editor.scss   # Styles
└── build/                         # Compiled output (generated; gitignored)

Licence

GPL-2.0-or-later.