Interactive · Gutenberg
Analog Clock block for WordPress
A beautiful live analog clock rendered with SVG. Fully customizable: clock style, timezone, colors, size, and optional date/time labels.
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
A beautiful live analog clock rendered with SVG. Fully customizable: clock style, timezone, colors, size, and optional date/time labels.
Inspector panels on this block: Content, Clock Settings. Those titles come from index.js, not from a shared template.
Behavior controls: “Clock Style” options: Classic, Minimal, Bold; “Timezone” options: Local (device), UTC, New York (ET), Chicago (CT), Los Angeles (PT).
Where to find it
Gutenberg inserter → Interactive → search “Analog Clock” (block name `blockenberg/analog-clock` in block.json). Style it in the sidebar after insert.
How to use Analog Clock block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Analog Clock”, insert it. Category: Interactive.
- Configure inspector controls that exist on this block. Open Content. Set “Clock Size (px)”, “Clock Style”, “Timezone”, “Show Numbers”.
- 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 |
|---|---|
| Clock Size (px) | Numeric range control in the inspector. Range 100–500. block.json default: 240. Saved as `clockSize`. |
| Clock Style | Select control; the chosen value is saved on the block. Options: Classic; Minimal; Bold. block.json default: classic. Saved as `clockStyle`. |
| Timezone | Select control; the chosen value is saved on the block. Options: Local (device); UTC; New York (ET); Chicago (CT); Los Angeles (PT); London (GMT/BST); Paris (CET); Berlin (CET); Moscow (MSK); Dubai (GST). block.json default: local. Saved as `timezone`. |
| Show Numbers | On/off toggle in the inspector. On by default. Saved as `showNumbers`. |
| Show Tick Marks | On/off toggle in the inspector. On by default. Saved as `showTicks`. |
| Show Second Hand | On/off toggle in the inspector. On by default. Saved as `showSecondHand`. |
| Show Date Below | On/off toggle in the inspector. Off by default. Saved as `showDate`. |
| Show Digital Time | On/off toggle in the inspector. Off by default. Saved as `showDigitalTime`. |
| Clock Face | Color control in the inspector. block.json default: #ffffff. Saved as `clockFace`. |
| Clock Border | Color control in the inspector. block.json default: #1e1b4b. Saved as `clockBorder`. |
| Hour Hand | Color control in the inspector. block.json default: #1e1b4b. Saved as `hourHandColor`. |
| Minute Hand | Color control in the inspector. block.json default: #374151. Saved as `minuteHandColor`. |
| Second Hand | Color control in the inspector. block.json default: #ef4444. Saved as `secondHandColor`. |
| Tick Marks | Color control in the inspector. block.json default: #374151. Saved as `tickColor`. |
| Numbers | Color control in the inspector. block.json default: #1e1b4b. Saved as `numberColor`. |
| Center Dot | Color control in the inspector. block.json default: #ef4444. Saved as `centerDotColor`. |
| Section Background | Color control in the inspector. Saved as `sectionBg`. |
| Title Color | Color control in the inspector. block.json default: #1e1b4b. Saved as `titleColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
When this is the right block
- A beautiful live analog clock rendered with SVG. Fully customizable: clock style, timezone, colors, size, and optional date/time labels — that is the job of Analog Clock, not a generic content block.
- Use it when you need the editor control labeled “Clock Size (px)”, which exists on this block’s inspector.
- It matches pages about clock, analog, time.
- 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 Analog Clock block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Analog Clock”. It sits under Interactive. After insert, open Content and set “Clock Size (px)”, “Clock Style”, “Timezone”, “Show Numbers”.
What makes Analog Clock different from other Blockenberg blocks?
A beautiful live analog clock rendered with SVG. Fully customizable: clock style, timezone, colors, size, and optional date/time labels. Inspector labels on this block include “Clock Size (px)”, “Clock Style”, “Timezone”, “Show Numbers”.
Is the Analog Clock Gutenberg block free?
Yes. Analog Clock ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Analog Clock 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, Clock Settings).
Related interactive blocks
World Clock
Display live clocks for multiple timezones with analog or digital style. Perfect for global audiences, remote teams, and travel blogs.
Stopwatch
Interactive stopwatch with start/pause/reset controls and lap recording. Fully styled with customizable colors, display format, and rich Inspector settings.
Weather Widget
Live weather display with current conditions, temperature, humidity, wind speed and a 5-day forecast. Powered by OpenWeatherMap free API.
2048 Game
The classic sliding-tile 2048 puzzle. Swipe or use arrow keys to merge tiles and reach the 2048 tile.
Bingo Card
Interactive 5×5 Bingo card with number calling, win detection, and celebration animations.
Content Score
Visual content or SEO scoring card with circular gauge, color-coded criteria rows, and overall grade.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Analog Clock from the Gutenberg inserter.