Content · Gutenberg
Text Highlight block for WordPress
Animate a color marker / highlighter sweep behind specific words or phrases when they scroll into view.
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
Animate a color marker / highlighter sweep behind specific words or phrases when they scroll into view.
Inspector panels on this block: Text, Highlight Style, Animation, Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “Highlight phrases (comma-separated)” (e.g. "grow faster, smarter marketing"); “HTML Tag” options: H1, H2, H3, H4, Paragraph; “Highlight Style — Style” options: Marker (background fill), Underline, Box outline, Strikethrough, Glow; “Animation style” options: Sweep (left to right), Fade in, Scale up, Pop.
Where to find it
Gutenberg inserter → Content → search “Text Highlight” (block name `blockenberg/text-highlight` in block.json). Style it in the sidebar after insert.
How to use Text Highlight block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Text Highlight”, insert it. Category: Content.
- Configure inspector controls that exist on this block. Open Text. Set “Text — Text”, “Highlight phrases (comma-separated)”, “HTML Tag”, “Highlight Style — Style”.
- Check the published page. The view script reads HTML data attributes: data-animate, data-bkth-i, data-repeat, data-threshold. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Text — Text | Multiline text field in the inspector. block.json default: We help brands grow faster with smarter marketing.. Saved as `text`. |
| Highlight phrases (comma-separated) | Text field in the inspector. e.g. "grow faster, smarter marketing". block.json default: grow faster, smarter marketing. Saved as `highlights`. |
| HTML Tag | Select control; the chosen value is saved on the block. Options: H1; H2; H3; H4; Paragraph; Div. block.json default: h2. Saved as `tag`. |
| Highlight Style — Style | Select control; the chosen value is saved on the block. Options: Marker (background fill); Underline; Box outline; Strikethrough; Glow. block.json default: marker. Saved as `highlightStyle`. |
| Corner Radius | Numeric range control in the inspector. Range 0–24. block.json default: 4. Saved as `highlightRadius`. |
| Horizontal Padding | Numeric range control in the inspector. Range 0–24. block.json default: 6. Saved as `highlightPadX`. |
| Vertical Padding | Numeric range control in the inspector. Range 0–24. block.json default: 2. Saved as `highlightPadY`. |
| Line / Border Thickness | Numeric range control in the inspector. Range 1–20. block.json default: 8. Saved as `lineThickness`. |
| Opacity (%) | Numeric range control in the inspector. Range 10–100. block.json default: 100. Saved as `highlightOpacity`. |
| Animate on scroll | On/off toggle in the inspector. On by default. Saved as `animateOnScroll`. |
| Animation style | Select control; the chosen value is saved on the block. Options: Sweep (left to right); Fade in; Scale up; Pop. block.json default: sweep. Saved as `animationStyle`. |
| Duration (ms) | Numeric range control in the inspector. Range 100–2000. block.json default: 600. Saved as `animationDuration`. |
| Stagger delay (ms) | Numeric range control in the inspector. Range 0–400. block.json default: 80. Saved as `animationDelay`. |
| Scroll threshold (0.0–1.0) | Numeric range control in the inspector. Range 0–1. block.json default: 0.2. Saved as `threshold`. |
| Repeat on re-enter | On/off toggle in the inspector. Off by default. Saved as `repeat`. |
| Text Align | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `textAlign`. |
| Max Width (px) | Numeric range control in the inspector. Range 300–1600. block.json default: 800. Saved as `maxWidth`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 48. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 48. Saved as `paddingBottom`. |
| Highlight Color | Color control in the inspector. block.json default: #fde68a. Saved as `highlightColor`. |
| Text Color | Color control in the inspector. block.json default: #111827. Saved as `textColor`. |
| Colors — Background | Color control in the inspector. Saved as `bgColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-animate, data-bkth-i, data-repeat, data-threshold.
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- Animate a color marker / highlighter sweep behind specific words or phrases when they scroll into view — that is the job of Text Highlight, not a generic content block.
- Use it when you need the editor control labeled “Text — Text”, which exists on this block’s inspector.
- It matches pages about highlight, marker, underline.
- Inserter grouping: articles, cards, lists, and long-form layouts.
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 Highlight block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Text Highlight”. It sits under Content. After insert, open Text and set “Text — Text”, “Highlight phrases (comma-separated)”, “HTML Tag”, “Highlight Style — Style”.
What makes Text Highlight different from other Blockenberg blocks?
Animate a color marker / highlighter sweep behind specific words or phrases when they scroll into view. Inspector labels on this block include “Text — Text”, “Highlight phrases (comma-separated)”, “HTML Tag”, “Highlight Style — Style”.
Is the Text Highlight Gutenberg block free?
Yes. Text Highlight ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Text Highlight 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, Highlight Style, Animation, Layout).
Related content blocks
Styled Text Builder
Build a paragraph from mixed inline text segments — combine highlights, badges, code spans, gradient text, and bold or colored fragments in a single richly-styled sentence.
Big Stat
Display a single large impactful statistic with prefix, suffix, label, and multiple visual styles.
Callout
Highlighted panel for tips, warnings or success messages with icon, title and dismissible option.
Media & Text Rows
Repeatable alternating image-and-text rows — each row independently flippable. Classic landing-page pattern for feature breakdowns and storytelling.
Mixed Heading
A heading or paragraph where each word/phrase segment can have its own style — gradient, highlight, stroke, badge, mono, or normal.
Text Divider
Styled horizontal rule with centered text, icon, or badge label.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Text Highlight from the Gutenberg inserter.