Gutenberg Blocks

The plugin provides five Gutenberg blocks for displaying events in posts, pages, and the site editor.

Available blocks

Find all blocks in the Events Manager category when adding blocks.

Event calendar block

Display an interactive calendar showing events.

Adding the block

• Add a new block
• Search for "Event Calendar"
• Select the block
• Configure in sidebar

Settings

View

• Month View: Traditional calendar grid
• List View: Chronological event list

Category Filter to show only events from a specific category.

Show Today Button Toggle the "Today" navigation button.

Features

• Click dates to see events
• Navigate between months
• Event popups with details
• Links to full event pages

Preview

The editor shows a live preview of the calendar with sample events.

Events list block

Show multiple events in a grid or list layout.

Adding the block

• Add a new block
• Search for "Events List"
• Select the block
• Configure in sidebar

Settings

Layout

• Grid: Cards in columns
• List: Vertical list view

Columns (Grid only) 1 to 4 columns for the grid layout.

Number of Events How many events to display (1-24).

Category Filter to a specific category.

Featured Only Toggle to show only featured events.

Display options

• Show Image: Event featured images
• Show Date: Event date and time
• Show Venue: Venue name
• Show Excerpt: Event description preview

Preview

The editor shows a preview with your actual events.

Upcoming events block

Compact event list designed for sidebars.

Adding the block

• Add a new block
• Search for "Upcoming Events"
• Select the block
• Configure in sidebar

Settings

Number of Events How many to show (1-10).

Category Filter to a specific category.

Display options

• Show Image: Small event thumbnails
• Show Date: Event date
• Show Venue: Venue name

Use cases

• Sidebar widgets
• Footer sections
• Homepage highlights

Event card block

Embed a single event reference in content.

Adding the block

• Add a new block
• Search for "Event Card"
• Select the block
• Choose an event
• Configure display

Settings

Event Select which event to display from the dropdown.

Show Image Toggle the event thumbnail.

Show Date Toggle the event date display.

Show Venue Toggle the venue name.

Use cases

• Reference events in blog posts
• Highlight specific events
• Event announcements
• Newsletter-style layouts

Preview

Shows the event card as it will appear on the frontend.

Event countdown block

Live countdown timer to an event.

Adding the block

• Add a new block
• Search for "Event Countdown"
• Select the block
• Choose an event
• Configure display

Settings

Event Select the event to count down to.

Show Title Display the event name above the countdown.

Time Units Toggle individual units:

• Show Days
• Show Hours
• Show Minutes
• Show Seconds

Completed Text Message shown after the event starts (default: "Event has started").

Features

• Live countdown updates
• Automatic time calculation
• Shows message when event starts

Common features

Live preview

All blocks show live previews in the editor using server-side rendering. The preview matches what visitors see.

Placeholder states

When no event or content is selected, blocks show helpful placeholder messages explaining what to configure.

Responsive design

All blocks adapt to screen size:

• Grid layouts adjust columns
• Font sizes scale
• Touch-friendly on mobile

Block settings panel

Configure blocks using the sidebar panel:

• Select the block
• Open the Settings panel
• Adjust options
• Preview updates automatically

Styling

Default styles

Blocks use neutral styling that works with most themes. Colors follow your theme's design.

Custom CSS

Target blocks with these classes:

/* Calendar */
.wp-block-emwc-calendar {
}

/* Events List */
.wp-block-emwc-events-list {
}

/* Upcoming Events */
.wp-block-emwc-upcoming-events {
}

/* Event Card */
.wp-block-emwc-event-card {
}

/* Countdown */
.wp-block-emwc-event-countdown {
}

Theme compatibility

Blocks work with any block-enabled theme. For classic themes, ensure block styles are enqueued.

Block patterns (coming soon)

Pre-designed layouts combining blocks:

• Event highlight section
• Upcoming events sidebar
• Conference schedule
• Event landing page

Troubleshooting

Block not appearing

• Clear browser cache
• Deactivate/reactivate plugin
• Check for JavaScript errors

Preview not loading

• Check browser console for errors
• Verify REST API is accessible
• Ensure events exist

Styling issues

• Check for CSS conflicts
• Inspect with browser tools
• Add custom CSS to override