Effects · Gutenberg
Handwriting Text block for WordPress
SVG text that animates in as if being handwritten — stroke reveal effect triggered on scroll or load.
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
SVG text that animates in as if being handwritten — stroke reveal effect triggered on scroll or load.
Inspector panels on this block: Text, Canvas, Underline, Animation. Those titles come from index.js, not from a shared template.
Behavior controls: “Text to Handwrite” (Cursive/script fonts work best for the handwriting effect); “Font Preset” (Google Fonts must be loaded separately via "Additional CSS" or your theme); “Text Alignment” options: Left, Center, Right; “Trigger” options: On Scroll (IntersectionObserver), On Page Load, On Click.
Where to find it
Gutenberg inserter → Effects → search “Handwriting Text” (block name `blockenberg/handwriting-text` in block.json). Style it in the sidebar after insert.
How to use Handwriting Text block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Handwriting Text”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Text. Set “Text to Handwrite”, “Font Preset”, “Text Alignment”, “SVG Width (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 |
|---|---|
| Text to Handwrite | Text field in the inspector. Cursive/script fonts work best for the handwriting effect. block.json default: Beautiful Handwriting. Saved as `text`. |
| Font Preset | Select control; the chosen value is saved on the block. Google Fonts must be loaded separately via "Additional CSS" or your theme. Options: Dancing Script (cursive); Caveat (casual); Pacifico (rounded); Satisfy (elegant); Sacramento (thin cursive); Inherit (theme font); Custom (type below). Saved as `typoText`. |
| Text Alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `align2`. |
| SVG Width (px) | Numeric range control in the inspector. Range 300–1400. block.json default: 900. Saved as `svgWidth`. |
| SVG Height (px) | Numeric range control in the inspector. Range 60–400. block.json default: 140. Saved as `svgHeight`. |
| Text Y Position (px) | Numeric range control in the inspector. Range 20–380. block.json default: 110. Saved as `textY`. |
| Stroke Width (px) | Numeric range control in the inspector. Range 1–8. block.json default: 2. Saved as `strokeWidth`. |
| Show Underline | On/off toggle in the inspector. Off by default. Saved as `showUnderline`. |
| Underline Width (px) | Numeric range control in the inspector. Range 1–12. block.json default: 4. Saved as `underlineWidth`. |
| Underline Gap (px) | Numeric range control in the inspector. Range 0–40. block.json default: 12. Saved as `underlineOffsetY`. |
| Underline Animate Duration (s) | Numeric range control in the inspector. Range 0.2–3. block.json default: 0.6. Saved as `underlineDuration`. |
| Trigger | Select control; the chosen value is saved on the block. Options: On Scroll (IntersectionObserver); On Page Load; On Click. block.json default: scroll. Saved as `trigger`. |
| Draw Duration (s) | Numeric range control in the inspector. Range 0.5–12. block.json default: 3. Saved as `duration`. |
| Start Delay (s) | Numeric range control in the inspector. Range 0–5. block.json default: 0.3. Saved as `delay`. |
| Easing | Select control; the chosen value is saved on the block. Options: Ease In Out; Ease In; Ease Out; Linear. block.json default: ease-in-out. Saved as `easing`. |
| Fill Text After Drawing | On/off toggle in the inspector. On by default. Saved as `fillOnComplete`. |
| Fill Transition Duration (s) | Numeric range control in the inspector. Range 0.1–3. block.json default: 0.8. Saved as `fillDuration`. |
| Repeat Animation on Re-enter | On/off toggle in the inspector. Off by default. Saved as `repeatAnimation`. |
| Typography — Text | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoText`. |
| Text Fill Color | Color control in the inspector. block.json default: #0f172a. Saved as `textColor`. |
| Drawing Stroke Color | Color control in the inspector. block.json default: #6366f1. Saved as `strokeColor`. |
| Underline Color | Color control in the inspector. block.json default: #6366f1. Saved as `underlineColor`. |
| 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.
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- SVG text that animates in as if being handwritten — stroke reveal effect triggered on scroll or load — that is the job of Handwriting Text, not a generic content block.
- Use it when you need the editor control labeled “Text to Handwrite”, which exists on this block’s inspector.
- It matches pages about handwriting, svg, text.
- 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 Handwriting Text block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Handwriting Text”. It sits under Effects. After insert, open Text and set “Text to Handwrite”, “Font Preset”, “Text Alignment”, “SVG Width (px)”.
What makes Handwriting Text different from other Blockenberg blocks?
SVG text that animates in as if being handwritten — stroke reveal effect triggered on scroll or load. Inspector labels on this block include “Text to Handwrite”, “Font Preset”, “Text Alignment”, “SVG Width (px)”.
Is the Handwriting Text Gutenberg block free?
Yes. Handwriting Text ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Handwriting Text 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, Canvas, Underline, Animation).
Related effects blocks
Glitch Text
Eye-catching glitch animation text with chromatic aberration, noise, scanlines, and digital distortion effects.
Gradient Text Animator
Animated gradient-filled text with multiple animation modes — shift, pulse, wave, rainbow, and reveal.
Kinetic Text
Text characters that scatter outward and snap back on hover with smooth physics animation.
Morphing Text
Headline that smoothly morphs between multiple words with blur, crossfade, slide, or typewriter transitions.
Split Text
Scroll-triggered per-word or per-character text reveal animation. Each word or character animates in sequentially as the block enters the viewport.
Split-Flap Display
Recreate the iconic airport departure-board split-flap animation. Characters roll through the alphabet and settle on the target text. Supports multiple messages, ticker mode, custom colours, and scroll-triggered animation.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Handwriting Text from the Gutenberg inserter.