Effects · Gutenberg
Skill Rings block for WordPress
Animated SVG circular progress rings for showcasing skills, proficiencies, or statistics. Supports both concentric (nested rings) and row (individual rings) layouts with scroll-triggered fill animations.
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
Animated SVG circular progress rings for showcasing skills, proficiencies, or statistics. Supports both concentric (nested rings) and row (individual rings) layouts with scroll-triggered fill animations.
Inspector panels on this block: Layout & Animation, Animation, Labels, Skills. Those titles come from index.js, not from a shared template.
Behavior controls: “Layout” options: Row (individual rings), Concentric (nested rings); “Line Cap” options: Round, Flat, Square; “Easing” options: Ease Out, Ease In, Linear; “Label Position” options: Below ring, Inside ring.
Where to find it
Gutenberg inserter → Effects → search “Skill Rings” (block name `blockenberg/skill-rings` in block.json). Style it in the sidebar after insert.
How to use Skill Rings block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Skill Rings”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Layout & Animation. Set “Skill Name”, “Percentage”, “Stroke Width (px)”, “Gap Between Rings (px)”.
- 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 |
|---|---|
| Skill Name | Text field in the inspector. |
| Percentage | Numeric range control in the inspector. Range 0–100. |
| Layout | Select control; the chosen value is saved on the block. Options: Row (individual rings); Concentric (nested rings). block.json default: row. Saved as `layout`. |
| Stroke Width (px) | Numeric range control in the inspector. Range 2–40. block.json default: 10. Saved as `strokeWidth`. |
| Gap Between Rings (px) | Numeric range control in the inspector. Range 2–40. block.json default: 14. Saved as `ringGap`. |
| Line Cap | Select control; the chosen value is saved on the block. Options: Round; Flat; Square. block.json default: round. Saved as `lineCap`. |
| Duration (ms) | Numeric range control in the inspector. Range 200–4000. block.json default: 1400. Saved as `animDuration`. |
| Easing | Select control; the chosen value is saved on the block. Options: Ease Out; Ease In; Linear. block.json default: ease-out. Saved as `animEasing`. |
| Stagger Delay (ms) | Numeric range control in the inspector. Range 0–500. block.json default: 120. Saved as `animDelay`. |
| Show Percentage | On/off toggle in the inspector. On by default. Saved as `showPercentage`. |
| Show Skill Name | On/off toggle in the inspector. On by default. Saved as `showLabel`. |
| Label Position | Select control; the chosen value is saved on the block. Options: Below ring; Inside ring. block.json default: below. Saved as `labelPosition`. |
| Percentage Size (px) | Numeric range control in the inspector. Range 12–60. block.json default: 28. Saved as `pctSize`. |
| Center Label | Text field in the inspector. Saved as `centerLabel`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 60. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 60. Saved as `paddingBottom`. |
| Percentage (Pct Typo) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `pctTypo`. |
| Label | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `labelTypo`. |
| Colors — Background | Color control in the inspector. Saved as `bgColor`. |
| Track (empty arc) | Color control in the inspector. block.json default: #1f2937. Saved as `trackColor`. |
| Percentage Text | Color control in the inspector. block.json default: #ffffff. Saved as `pctColor`. |
| Label Text | Color control in the inspector. block.json default: #ffffff. Saved as `labelColor`. |
| Center Label | Color control in the inspector. block.json default: #ffffff. Saved as `centerLabelColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- Animated SVG circular progress rings for showcasing skills, proficiencies, or statistics. Supports both concentric (nested rings) and row (individual rings) layouts with scroll-triggered fill animations — that is the job of Skill Rings, not a generic content block.
- Use it when you need the editor control labeled “Skill Name”, which exists on this block’s inspector.
- Inserter grouping: motion, overlays, and visual treatments.
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 Skill Rings block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Skill Rings”. It sits under Effects. After insert, open Layout & Animation and set “Skill Name”, “Percentage”, “Stroke Width (px)”, “Gap Between Rings (px)”.
What makes Skill Rings different from other Blockenberg blocks?
Animated SVG circular progress rings for showcasing skills, proficiencies, or statistics. Supports both concentric (nested rings) and row (individual rings) layouts with scroll-triggered fill animations. Inspector labels on this block include “Skill Name”, “Percentage”, “Stroke Width (px)”, “Gap Between Rings (px)”.
Is the Skill Rings Gutenberg block free?
Yes. Skill Rings ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Skill Rings 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: Layout & Animation, Animation, Labels, Skills).
Related effects blocks
3D Text
Eye-catching 3D extruded text using CSS text-shadow layers and perspective transforms. Supports rotate-on-hover, float animation, and customizable depth, colors and typography.
Animated Text
Heading with animated cycling words — typewriter, fade, slide, or flip effects. Perfect for hero sections.
Card Carousel
Horizontal drag-to-scroll card carousel with rich cards, autoplay, arrows, dots, and responsive column settings.
Card Deck Slider
A 3D card deck slider where cards arc/fan out behind the front card and animate through the sequence.
Card Stack
A fanned or stacked pile of cards with hover-spread interaction. Perfect for testimonials, case studies, or feature highlights.
Confetti Button
A call-to-action button that triggers a burst of canvas confetti particles on click. Supports multiple confetti styles, custom colors, particle physics and link/action settings.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Skill Rings from the Gutenberg inserter.