Business · Gutenberg
Contact Info block for WordPress
Display business contact information with icons, labels, and optional Schema.org markup.
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
Display business contact information with icons, labels, and optional Schema.org markup.
Inspector panels on this block: Layout, Icon Style, Icon Colors, Text Colors, Contact Items. Those titles come from index.js, not from a shared template.
Behavior controls: “Layout” options: Stacked (vertical), Inline (horizontal), Grid; “Icon Style” options: Filled box, Outline box, No box.
Where to find it
Gutenberg inserter → Business → search “Contact Info” (block name `blockenberg/contact-info` in block.json). Style it in the sidebar after insert.
How to use Contact Info block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Contact Info”, insert it. Category: Business.
- Configure inspector controls that exist on this block. Open Layout. Set “Columns”, “Item Spacing (px)”, “Show Labels”, “Inject Schema.org markup”.
- Check the published page. The view script reads HTML data attributes: data-items. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Layout | Select control; the chosen value is saved on the block. Options: Stacked (vertical); Inline (horizontal); Grid. block.json default: stacked. Saved as `layout`. |
| Columns | Numeric range control in the inspector. Range 2–4. block.json default: 2. Saved as `columns`. |
| Item Spacing (px) | Numeric range control in the inspector. Range 8–60. block.json default: 20. Saved as `itemSpacing`. |
| Show Labels | On/off toggle in the inspector. On by default. Saved as `showLabel`. |
| Inject Schema.org markup | On/off toggle in the inspector. On by default. Saved as `schemaEnabled`. |
| Icon Style | Select control; the chosen value is saved on the block. Options: Filled box; Outline box; No box. block.json default: filled. Saved as `iconStyle`. |
| Icon Size | Numeric range control in the inspector. Range 12–36. block.json default: 18. Saved as `iconSize`. |
| Box Size | Numeric range control in the inspector. Range 24–80. block.json default: 40. Saved as `iconBoxSize`. |
| Box Radius | Numeric range control in the inspector. Range 0–40. block.json default: 8. Saved as `iconRadius`. |
| Icon Color | Color control in the inspector. block.json default: #2563eb. Saved as `iconColor`. |
| Box BG | Color control in the inspector. block.json default: #eff6ff. Saved as `iconBg`. |
| Label | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoLabel`. |
| Value | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoValue`. |
| Label Color | Color control in the inspector. block.json default: #6b7280. Saved as `labelColor`. |
| Value Color | Color control in the inspector. block.json default: #111827. Saved as `valueColor`. |
| Link Color | Color control in the inspector. block.json default: #2563eb. Saved as `linkColor`. |
| Type | Select control; the chosen value is saved on the block. |
| Label | Text field in the inspector. |
| Value | Text field in the inspector. |
| Make value a link | On/off toggle in the inspector. |
What the front-end script actually does
- The view script reads HTML data attributes: data-items.
- When schema is on, the script injects FAQPage JSON-LD into the document.
When this is the right block
- Display business contact information with icons, labels, and optional Schema.org markup — that is the job of Contact Info, not a generic content block.
- Use it when you need the editor control labeled “Columns”, which exists on this block’s inspector.
- It matches pages about contact, address, phone.
- Pick this when you want FAQPage JSON-LD from the same markup visitors click.
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 Contact Info block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Contact Info”. It sits under Business. After insert, open Layout and set “Columns”, “Item Spacing (px)”, “Show Labels”, “Inject Schema.org markup”.
Does Contact Info output FAQ schema?
Yes, when the schema toggle on this block is on. The front-end script injects FAQPage JSON-LD. That is not the same as Yoast/Rank Math site-wide schema.
Is the Contact Info Gutenberg block free?
Yes. Contact Info ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Contact Info 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: Layout, Icon Style, Icon Colors, Text Colors).
Related business blocks
Contact Section
All-in-one contact page section: info cards (address, phone, email, hours) + a contact form + optional embedded map — all in a polished configurable layout.
Address Card
Business address card with contact details, opening hours, and optional map link.
Contact Form
A fully styled contact form that sends emails via your WordPress site — no plugin required.
Email Signature
Design and preview a rich HTML email signature with avatar, name, title, company, phone, email, website, social links, and an optional branded banner or divider. Outputs email-client-safe table-based HTML.
Contact Card
Business card block with photo, contact details, and social links. Multiple style variants.
Google Map
Embed a Google Map by address with zoom, map type, caption, border, and shadow controls.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Contact Info from the Gutenberg inserter.