Themology
Docs Evenzo – Events Manager for WooCommerce

Gutenberg Blocks

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.

BlockDescription
Event CalendarInteractive calendar with month and list views
Events ListGrid or list of events
Upcoming EventsCompact list for sidebars
Event CardSingle event embed
Event CountdownTimer counting down to event

Event calendar block#

Display an interactive calendar showing events.

Adding the block#

  1. Add a new block
  2. Search for “Event Calendar”
  3. Select the block
  4. 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#

  1. Add a new block
  2. Search for “Events List”
  3. Select the block
  4. 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#

  1. Add a new block
  2. Search for “Upcoming Events”
  3. Select the block
  4. 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#

  1. Add a new block
  2. Search for “Event Card”
  3. Select the block
  4. Choose an event
  5. 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#

  1. Add a new block
  2. Search for “Event Countdown”
  3. Select the block
  4. Choose an event
  5. 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:

  1. Select the block
  2. Open the Settings panel
  3. Adjust options
  4. 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