Effects · Gutenberg
Text Path block for WordPress
Render text along a curved SVG path — arc, wave, circle or S-curve.
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
Render text along a curved SVG path — arc, wave, circle or S-curve.
Inspector panels on this block: Text & Path, Path Stroke, Animation. Those titles come from index.js, not from a shared template.
Behavior controls: “Text & Path — Text” (Add • or | between repetitions for circular paths); “Path Shape” options: Arc (Bow), Wave, Circle, S-Curve; “Arc Direction” options: Bow Up (text on top), Bow Down (text underneath); “Text Anchor” options: Start, Middle, End.
Where to find it
Gutenberg inserter → Effects → search “Text Path” (block name `blockenberg/text-path` in block.json). Style it in the sidebar after insert.
How to use Text Path block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Text Path”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Text & Path. Set “Text & Path — Text”, “Path Shape”, “Arc Radius (px)”, “Arc Direction”.
- 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 |
|---|---|
| Text & Path — Text | Text field in the inspector. Add • or | between repetitions for circular paths. block.json default: Your Curved Text Goes Here • Beautiful Typography •. Saved as `text`. |
| Path Shape | Select control; the chosen value is saved on the block. Options: Arc (Bow); Wave; Circle; S-Curve. block.json default: arc. Saved as `pathType`. |
| Arc Radius (px) | Numeric range control in the inspector. Range 50–600. block.json default: 300. Saved as `arcRadius`. |
| Arc Direction | Select control; the chosen value is saved on the block. Options: Bow Up (text on top); Bow Down (text underneath). block.json default: top. Saved as `arcDirection`. |
| Wave Amplitude (px) | Numeric range control in the inspector. Range 5–120. block.json default: 40. Saved as `waveAmplitude`. |
| Wave Frequency | Numeric range control in the inspector. Range 1–6. block.json default: 2. Saved as `waveFrequency`. |
| SVG Width (px) | Numeric range control in the inspector. Range 300–1400. block.json default: 800. Saved as `svgWidth`. |
| SVG Height (px) | Numeric range control in the inspector. Range 80–600. block.json default: 200. Saved as `svgHeight`. |
| Text Start Offset (%) | Numeric range control in the inspector. Range 0–100. block.json default: 10. Saved as `startOffset`. |
| Text Anchor | Select control; the chosen value is saved on the block. Options: Start; Middle; End. block.json default: start. Saved as `textAnchor`. |
| Typography — Alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `align2`. |
| Show Path Line | On/off toggle in the inspector. Off by default. Saved as `showPath`. |
| Stroke Width (px) | Numeric range control in the inspector. Range 1–10. block.json default: 1. Saved as `pathStrokeWidth`. |
| Animate Text Along Path | On/off toggle in the inspector. Off by default. Saved as `animate`. |
| Animation Duration (s) | Numeric range control in the inspector. Range 2–60. block.json default: 12. Saved as `animateDuration`. |
| Repeat | Select control; the chosen value is saved on the block. Options: Infinite; 1×; 2×; 3×. block.json default: indefinite. Saved as `repeatCount`. |
| Text Color | Color control in the inspector. block.json default: #0f172a. Saved as `textColor`. |
| Path Stroke Color | Color control in the inspector. block.json default: #e2e8f0. Saved as `pathStrokeColor`. |
| Section Background | Color control in the inspector. Saved as `sectionBg`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
When this is the right block
- Render text along a curved SVG path — arc, wave, circle or S-curve — that is the job of Text Path, not a generic content block.
- Use it when you need the editor control labeled “Text & Path — Text”, which exists on this block’s inspector.
- It matches pages about text, path, svg.
- 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 Text Path block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Text Path”. It sits under Effects. After insert, open Text & Path and set “Text & Path — Text”, “Path Shape”, “Arc Radius (px)”, “Arc Direction”.
What makes Text Path different from other Blockenberg blocks?
Render text along a curved SVG path — arc, wave, circle or S-curve. Inspector labels on this block include “Text & Path — Text”, “Path Shape”, “Arc Radius (px)”, “Arc Direction”.
Is the Text Path Gutenberg block free?
Yes. Text Path ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Text Path 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: Text & Path, Path Stroke, Animation).
Related effects blocks
Gradient Text
Heading or paragraph text with a rich gradient fill, optional outline, shadow, and CSS animation.
Gradient Text Animator
Animated gradient-filled text with multiple animation modes — shift, pulse, wave, rainbow, and reveal.
Handwriting Text
SVG text that animates in as if being handwritten — stroke reveal effect triggered on scroll or load.
Text Stroke
Large outlined/hollow text using CSS text-stroke with hover fill, gradient, and animation options.
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.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Text Path from the Gutenberg inserter.