Interactive · Gutenberg
Stopwatch block for WordPress
Interactive stopwatch with start/pause/reset controls and lap recording. Fully styled with customizable colors, display format, and rich Inspector settings.
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
Interactive stopwatch with start/pause/reset controls and lap recording. Fully styled with customizable colors, display format, and rich Inspector settings.
Inspector panels on this block: Stopwatch Settings, Sizing. Those titles come from index.js, not from a shared template.
Where to find it
Gutenberg inserter → Interactive → search “Stopwatch” (block name `blockenberg/stopwatch` in block.json). Style it in the sidebar after insert.
How to use Stopwatch block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Stopwatch”, insert it. Category: Interactive.
- Configure inspector controls that exist on this block. Open Stopwatch Settings. Set “Show title”, “Show subtitle”, “Show lap recorder”, “Show milliseconds”.
- 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`. |
| Show subtitle | On/off toggle in the inspector. On by default. Saved as `showSubtitle`. |
| Show lap recorder | On/off toggle in the inspector. On by default. Saved as `showLaps`. |
| Show milliseconds | On/off toggle in the inspector. On by default. Saved as `showMilliseconds`. |
| Max laps to show | Numeric range control in the inspector. Range 5–50. block.json default: 20. Saved as `maxLaps`. |
| Max width (px) | Numeric range control in the inspector. Range 320–900. block.json default: 560. Saved as `contentMaxWidth`. |
| Clock font size | Numeric range control in the inspector. Range 32–120. block.json default: 64. Saved as `clockFontSize`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
When this is the right block
- Interactive stopwatch with start/pause/reset controls and lap recording. Fully styled with customizable colors, display format, and rich Inspector settings — that is the job of Stopwatch, 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 stopwatch, timer, clock.
- Inserter grouping: quizzes, games, and click-to-reveal experiences.
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 Stopwatch block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Stopwatch”. It sits under Interactive. After insert, open Stopwatch Settings and set “Show title”, “Show subtitle”, “Show lap recorder”, “Show milliseconds”.
What makes Stopwatch different from other Blockenberg blocks?
Interactive stopwatch with start/pause/reset controls and lap recording. Fully styled with customizable colors, display format, and rich Inspector settings. Inspector labels on this block include “Show title”, “Show subtitle”, “Show lap recorder”, “Show milliseconds”.
Is the Stopwatch Gutenberg block free?
Yes. Stopwatch ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Stopwatch 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: Stopwatch Settings, Sizing).
Related interactive blocks
Analog Clock
A beautiful live analog clock rendered with SVG. Fully customizable: clock style, timezone, colors, size, and optional date/time labels.
World Clock
Display live clocks for multiple timezones with analog or digital style. Perfect for global audiences, remote teams, and travel blogs.
Bingo Card
Interactive 5×5 Bingo card with number calling, win detection, and celebration animations.
Interactive Steps
Step-by-step wizard or process block with clickable numbered steps that reveal different content panels.
Pomodoro Timer
An interactive Pomodoro productivity timer with work and break cycles, visual progress ring, and session tracking.
Snake Game
Classic Snake game playable in the browser. Keyboard and on-screen touch controls, high-score tracking, multiple speed levels and color themes.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Stopwatch from the Gutenberg inserter.