Content · Gutenberg
Styled Text Builder block for WordPress
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.
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
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.
Inspector panels on this block: Segment Colors, All Segments, Container, Container Colors. Those titles come from index.js, not from a shared template.
Behavior controls: “Style Preset” options: None (plain), Highlight — Yellow, Highlight — Green, Highlight — Pink, Highlight — Blue; “Text Align” options: Left, Center, Right.
Styled Text Builder has no render.php and no frontend.js. The saved Gutenberg HTML is what visitors see, plus Blockenberg layout/typography CSS.
Where to find it
Gutenberg inserter → Content → search “Styled Text Builder” (block name `blockenberg/styled-text-builder` in block.json). Style it in the sidebar after insert.
How to use Styled Text Builder block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Styled Text Builder”, insert it. Category: Content.
- Configure inspector controls that exist on this block. Open Segment Colors. Set “Text”, “Style Preset”, “Underline”, “Custom Font Size (0 = inherit)”.
- Publish. Save the page. Output is the saved block HTML; typography/colors follow Blockenberg shared panels.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Text | Text field in the inspector. |
| Style Preset | Select control; the chosen value is saved on the block. Options: None (plain); Highlight — Yellow; Highlight — Green; Highlight — Pink; Highlight — Blue; Badge / Pill; Code Span; Gradient Text; Glow Text; Underline (styled). |
| Bold | On/off toggle in the inspector. |
| Italic | On/off toggle in the inspector. |
| Underline | On/off toggle in the inspector. |
| Custom Font Size (0 = inherit) | Numeric range control in the inspector. Range 0–64. |
| Text Color | Color control in the inspector. |
| Segment Colors — Background | Color control in the inspector. |
| Horizontal Padding | Numeric range control in the inspector. Range 0–30. |
| Vertical Padding | Numeric range control in the inspector. Range 0–20. |
| Border Radius | Numeric range control in the inspector. Range 0–50. |
| Text Align | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: left. Saved as `textAlign`. |
| Max Width (0 = full) | Numeric range control in the inspector. Range 0–1200. block.json default: 0. Saved as `maxWidth`. |
| Container Padding | Numeric range control in the inspector. Range 0–60. block.json default: 0. Saved as `containerPadding`. |
| Container Border Radius | Numeric range control in the inspector. Range 0–30. block.json default: 0. Saved as `containerRadius`. |
| Base Text Color | Color control in the inspector. block.json default: #1e293b. Saved as `textColor`. |
When this is the right block
- 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 — that is the job of Styled Text Builder, not a generic content block.
- Use it when you need the editor control labeled “Text”, which exists on this block’s inspector.
- It matches pages about text, styled, highlight.
- 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 Styled Text Builder block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Styled Text Builder”. It sits under Content. After insert, open Segment Colors and set “Text”, “Style Preset”, “Underline”, “Custom Font Size (0 = inherit)”.
What makes Styled Text Builder different from other Blockenberg blocks?
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. Inspector labels on this block include “Text”, “Style Preset”, “Underline”, “Custom Font Size (0 = inherit)”.
Is the Styled Text Builder Gutenberg block free?
Yes. Styled Text Builder ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Styled Text Builder 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: Segment Colors, All Segments, Container, Container Colors).
Related content blocks
Mixed Heading
A heading or paragraph where each word/phrase segment can have its own style — gradient, highlight, stroke, badge, mono, or normal.
Text Highlight
Animate a color marker / highlighter sweep behind specific words or phrases when they scroll into view.
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.
Icon
Standalone styled icon with label, link, shape, animation, and rich customization.
Media & Text Rows
Repeatable alternating image-and-text rows — each row independently flippable. Classic landing-page pattern for feature breakdowns and storytelling.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Styled Text Builder from the Gutenberg inserter.