Effects · Gutenberg
Text Stroke block for WordPress
Large outlined/hollow text using CSS text-stroke with hover fill, gradient, and animation options.
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
Large outlined/hollow text using CSS text-stroke with hover fill, gradient, and animation options.
Inspector panels on this block: Text, Stroke, Gradient overlay, Hover Effect, Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “HTML tag” options: h1, h2, h3, h4, p; “Text — Alignment” options: Left, Center, Right; “Use gradient” (Applies gradient via background-clip; overrides fill color); “Hover effect” options: Fill text on hover, Change stroke color on hover, Scale up on hover, None.
Where to find it
Gutenberg inserter → Effects → search “Text Stroke” (block name `blockenberg/text-stroke` in block.json). Style it in the sidebar after insert.
How to use Text Stroke block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Text Stroke”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Text. Set “Text — Content”, “HTML tag”, “Text — Alignment”, “Link URL (optional)”.
- Check the published page. The view script reads HTML data attributes: data-hover, data-hover-fill, data-hover-stroke. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Text — Content | Multiline text field in the inspector. block.json default: Outlined Text. Saved as `text`. |
| HTML tag | Select control; the chosen value is saved on the block. Options: h1; h2; h3; h4; p; div. block.json default: h2. Saved as `tag`. |
| Text — Alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `textAlign`. |
| Link URL (optional) | Text field in the inspector. Saved as `linkUrl`. |
| Open in new tab | On/off toggle in the inspector. Off by default. Saved as `linkNewTab`. |
| Stroke width (px) | Numeric range control in the inspector. Range 0–12. block.json default: 2. Saved as `strokeWidth`. |
| Text shadow blur (px) | Numeric range control in the inspector. Range 0–60. block.json default: 0. Saved as `shadowBlur`. |
| Use gradient | On/off toggle in the inspector. Applies gradient via background-clip; overrides fill color. Off by default. Saved as `useGradient`. |
| Gradient angle (°) | Numeric range control in the inspector. Range 0–360. block.json default: 135. Saved as `gradientAngle`. |
| Hover effect | Select control; the chosen value is saved on the block. Options: Fill text on hover; Change stroke color on hover; Scale up on hover; None. block.json default: fill. Saved as `hoverEffect`. |
| Transition duration (ms) | Numeric range control in the inspector. Range 0–1000. block.json default: 300. Saved as `transitionDuration`. |
| Padding top (px) | Numeric range control in the inspector. Range 0–160. block.json default: 40. Saved as `paddingTop`. |
| Padding bottom (px) | Numeric range control in the inspector. Range 0–160. block.json default: 40. Saved as `paddingBottom`. |
| Stroke color | Color control in the inspector. block.json default: #6c3fb5. Saved as `strokeColor`. |
| Fill color (blank = hollow) | Color control in the inspector. block.json default: transparent. Saved as `fillColor`. |
| Hover fill color | Color control in the inspector. block.json default: #6c3fb5. Saved as `hoverFillColor`. |
| Hover stroke color | Color control in the inspector. Saved as `hoverStrokeColor`. |
| Gradient color 1 | Color control in the inspector. block.json default: #6c3fb5. Saved as `gradientColor1`. |
| Gradient color 2 | Color control in the inspector. block.json default: #ec4899. Saved as `gradientColor2`. |
| Shadow color | Color control in the inspector. block.json default: #000000. Saved as `shadowColor`. |
| Section background | Color control in the inspector. Saved as `wrapBg`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-hover, data-hover-fill, data-hover-stroke.
When this is the right block
- Large outlined/hollow text using CSS text-stroke with hover fill, gradient, and animation options — that is the job of Text Stroke, not a generic content block.
- Use it when you need the editor control labeled “Text — Content”, which exists on this block’s inspector.
- It matches pages about outline, stroke, hollow.
- 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 Stroke block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Text Stroke”. It sits under Effects. After insert, open Text and set “Text — Content”, “HTML tag”, “Text — Alignment”, “Link URL (optional)”.
What makes Text Stroke different from other Blockenberg blocks?
Large outlined/hollow text using CSS text-stroke with hover fill, gradient, and animation options. Inspector labels on this block include “Text — Content”, “HTML tag”, “Text — Alignment”, “Link URL (optional)”.
Is the Text Stroke Gutenberg block free?
Yes. Text Stroke ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Text Stroke 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, Stroke, Gradient overlay, Hover Effect).
Related effects blocks
Gradient Text
Heading or paragraph text with a rich gradient fill, optional outline, shadow, and CSS animation.
Handwriting Text
SVG text that animates in as if being handwritten — stroke reveal effect triggered on scroll or load.
Text Path
Render text along a curved SVG path — arc, wave, circle or S-curve.
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.
Glitch Text
Eye-catching glitch animation text with chromatic aberration, noise, scanlines, and digital distortion effects.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Text Stroke from the Gutenberg inserter.