Content · Gutenberg
Text Divider block for WordPress
Styled horizontal rule with centered text, icon, or badge label.
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
Styled horizontal rule with centered text, icon, or badge label.
Inspector panels on this block: Label, Line. Those titles come from index.js, not from a shared template.
Behavior controls: “Label Style” options: Text, Badge, Icon; “Line Style” options: Solid, Dashed, Dotted, Double; “Line — Alignment” options: Left, Center, Right.
Text Divider 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 “Text Divider” (block name `blockenberg/text-divider` in block.json). Style it in the sidebar after insert.
How to use Text Divider block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Text Divider”, insert it. Category: Content.
- Configure inspector controls that exist on this block. Open Label. Set “Show Label”, “Label Style”, “Label Text”, “Dashicon”.
- 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 |
|---|---|
| Show Label | On/off toggle in the inspector. On by default. Saved as `showLabel`. |
| Label Style | Select control; the chosen value is saved on the block. Options: Text; Badge; Icon. block.json default: text. Saved as `labelStyle`. |
| Label Text | Text field in the inspector. block.json default: OR. Saved as `label`. |
| Dashicon | Select control; the chosen value is saved on the block. block.json default: star-filled. Saved as `icon`. |
| Icon Size (px) | Numeric range control in the inspector. Range 10–60. block.json default: 18. Saved as `iconSize`. |
| Padding X (px) | Numeric range control in the inspector. Range 0–40. block.json default: 16. Saved as `labelPaddingX`. |
| Padding Y (px) | Numeric range control in the inspector. Range 0–20. block.json default: 6. Saved as `labelPaddingY`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–60. block.json default: 50. Saved as `labelRadius`. |
| Show Border | On/off toggle in the inspector. Off by default. Saved as `labelBorder`. |
| Line Style | Select control; the chosen value is saved on the block. Options: Solid; Dashed; Dotted; Double. block.json default: solid. Saved as `lineStyle`. |
| Thickness (px) | Numeric range control in the inspector. Range 1–10. block.json default: 1. Saved as `lineThickness`. |
| Width (%) | Numeric range control in the inspector. Range 10–100. block.json default: 100. Saved as `lineWidth`. |
| Line — Alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `align`. |
| Margin Top (px) | Numeric range control in the inspector. Range 0–100. block.json default: 24. Saved as `marginTop`. |
| Margin Bottom (px) | Numeric range control in the inspector. Range 0–100. block.json default: 24. Saved as `marginBottom`. |
| Line Color | Color control in the inspector. block.json default: #e5e7eb. Saved as `lineColor`. |
| Label Text Color | Color control in the inspector. block.json default: #6b7280. Saved as `labelColor`. |
| Label Background | Color control in the inspector. block.json default: #ffffff. Saved as `labelBg`. |
| Label Border Color | Color control in the inspector. block.json default: #e5e7eb. Saved as `labelBorderColor`. |
| Icon Color | Color control in the inspector. block.json default: #9ca3af. Saved as `iconColor`. |
When this is the right block
- Styled horizontal rule with centered text, icon, or badge label — that is the job of Text Divider, not a generic content block.
- Use it when you need the editor control labeled “Show Label”, which exists on this block’s inspector.
- It matches pages about divider, separator, rule.
- 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 Divider block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Text Divider”. It sits under Content. After insert, open Label and set “Show Label”, “Label Style”, “Label Text”, “Dashicon”.
What makes Text Divider different from other Blockenberg blocks?
Styled horizontal rule with centered text, icon, or badge label. Inspector labels on this block include “Show Label”, “Label Style”, “Label Text”, “Dashicon”.
Is the Text Divider Gutenberg block free?
Yes. Text Divider ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Text Divider 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: Label, Line).
Related content blocks
Media & Text Rows
Repeatable alternating image-and-text rows — each row independently flippable. Classic landing-page pattern for feature breakdowns and storytelling.
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.
Text Highlight
Animate a color marker / highlighter sweep behind specific words or phrases when they scroll into view.
Accordion
Collapsible accordion panels for FAQ, features, and more.
Accordion Table
A data table where each row expands on click to reveal rich detail content — specs, bullet points, sub-data, or notes. Perfect for pricing tiers, product specs, API docs, and comparison matrices.
Alert / Notice
Info, success, warning or error notice block with icon, title and body text. Pure CSS — zero JS.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Text Divider from the Gutenberg inserter.