Business · Gutenberg
Event Card block for WordPress
Event display card with date, time, venue, description, speakers, call-to-action button, and Event JSON-LD structured data.
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
Event display card with date, time, venue, description, speakers, call-to-action button, and Event JSON-LD structured data.
Inspector panels on this block: Event Info, Date & Time, Venue, Photo, CTA Button. Those titles come from index.js, not from a shared template.
Behavior controls: “Badges (comma-separated)” (e.g.: Free,Workshops,Networking); “Layout” options: Horizontal, Card.
Where to find it
Gutenberg inserter → Business → search “Event Card” (block name `blockenberg/event-card` in block.json). Style it in the sidebar after insert.
How to use Event Card block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Event Card”, insert it. Category: Business.
- Configure inspector controls that exist on this block. Open Event Info. Set “Event Name”, “Description”, “Event Type”, “Badges (comma-separated)”.
- Check the published page. The view script reads HTML data attributes: data-event, data-schema. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Event Name | Text field in the inspector. block.json default: Annual Design Summit 2026. Saved as `eventName`. |
| Description | Multiline text field in the inspector. block.json default: Join designers, developers, and product leaders for a day of inspiring talks, hands-on workshops, and networking.. Saved as `description`. |
| Event Type | Select control; the chosen value is saved on the block. block.json default: In-Person. Saved as `eventType`. |
| Badges (comma-separated) | Text field in the inspector. e.g.: Free,Workshops,Networking. block.json default: Free,Workshops,Networking. Saved as `badges`. |
| Organizer | Text field in the inspector. Saved as `organizer`. |
| Start Date (YYYY-MM-DD) | Text field in the inspector. block.json default: 2026-06-15. Saved as `startDate`. |
| Start Time (HH:MM) | Text field in the inspector. block.json default: 09:00. Saved as `startTime`. |
| End Date (YYYY-MM-DD) | Text field in the inspector. block.json default: 2026-06-15. Saved as `endDate`. |
| End Time (HH:MM) | Text field in the inspector. block.json default: 18:00. Saved as `endTime`. |
| Timezone | Text field in the inspector. block.json default: America/New_York. Saved as `timezone`. |
| Venue Name | Text field in the inspector. block.json default: Javits Center. Saved as `venueName`. |
| Address | Text field in the inspector. block.json default: 429 11th Ave, New York, NY 10001. Saved as `venueAddress`. |
| Ticket / RSVP URL | Text field in the inspector. block.json default: #. Saved as `ticketUrl`. |
| Button Label | Text field in the inspector. block.json default: Get Tickets. Saved as `ticketLabel`. |
| Button Radius (px) | Numeric range control in the inspector. Range 0–50. block.json default: 8. Saved as `btnRadius`. |
| Layout | Select control; the chosen value is saved on the block. Options: Horizontal; Card. block.json default: horizontal. Saved as `layoutStyle`. |
| Card Radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 16. Saved as `cardRadius`. |
| Card Shadow | On/off toggle in the inspector. On by default. Saved as `cardShadow`. |
| Schema.org Markup | On/off toggle in the inspector. On by default. Saved as `schemaEnabled`. |
| Event Name (Typo Name) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoName`. |
| Description (Typo Desc) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoDesc`. |
| Badges | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoBadge`. |
| Meta / Info | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoMeta`. |
| Typography — Button | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoBtn`. |
| Accent / Date BG | Color control in the inspector. block.json default: #6c3fb5. Saved as `accentColor`. |
| Card Background | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Card Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `cardBorder`. |
| Button BG | Color control in the inspector. block.json default: #6c3fb5. Saved as `btnBg`. |
| Button Text | Color control in the inspector. block.json default: #ffffff. Saved as `btnColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-event, data-schema.
- When schema is on, the script injects FAQPage JSON-LD into the document.
When this is the right block
- Event display card with date, time, venue, description, speakers, call-to-action button, and Event JSON-LD structured data — that is the job of Event Card, not a generic content block.
- Use it when you need the editor control labeled “Event Name”, which exists on this block’s inspector.
- It matches pages about event, calendar, schedule.
- 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 Event Card block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Event Card”. It sits under Business. After insert, open Event Info and set “Event Name”, “Description”, “Event Type”, “Badges (comma-separated)”.
Does Event Card 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 Event Card Gutenberg block free?
Yes. Event Card ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Event Card 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: Event Info, Date & Time, Venue, Photo).
Related business blocks
Event Agenda
A conference or event schedule showing day tabs, time slots, session titles, speaker info, rooms, and session types.
Speaker Lineup
Event/conference speaker lineup section with avatar, topic, bio, and social links. Perfect for summits, webinars, and courses.
Event Speakers
Showcase event or conference speakers with bios, session info, and social links.
Business Hours
Display business opening hours with current status indicator.
FAQ Accordion
FAQ section with smooth accordion expand/collapse, rich typography, and schema.org markup support.
FAQ Schema
FAQ block with automatic FAQPage JSON-LD structured data for SEO rich snippets.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Event Card from the Gutenberg inserter.