Canvas Docs

Event Posts

Queries and displays canvas_event posts in a responsive card grid. Supports filtering by upcoming, past, or all events. Can be placed on any page. It is shown in the block inserter as Event Posts and registered as canvas-core/event-posts.

Select the block on a page and its own settings open in the sidebar, in the panels below:

The Event Posts settings in the block editor sidebar

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Query

  • CountDefault6

    How many events are shown. With Paginate turned on this becomes the number per page rather than the total.

  • FilterDefaultUpcoming

    Which events are eligible: only those still to come, only those already held, or every event whatever its date.

    ChoicesUpcomingPastAll

  • Order ByDefaultDate Published

    What decides the sequence events appear in. Event Date orders by when each event happens, which is usually what a visitor expects; Date Published orders by when you added it.

    ChoicesDate PublishedTitleEvent Date (meta)

  • PaginateDefaultOff

    Treat Count as a page size and add pagination links below the events.

  • Pagination StyleDefaultOlder / Newer buttons

    How the page controls are drawn: two buttons that step one page at a time, or numbers a visitor can jump between.

    ChoicesOlder / Newer buttonsNumbered pagesShown when Paginate is on

  • Older LabelDefaultOlder

    Wording on the button that moves towards older events.

    Shown when Pagination Style is "Older / Newer buttons"

  • Newer LabelDefaultNewer

    Wording on the button that moves back towards newer events.

    Shown when Pagination Style is "Older / Newer buttons"

Layout

  • LayoutDefaultGrid

    How the events are arranged: cards side by side, full width rows, small rows for a sidebar, a carousel a visitor can move through, or a tall list with a drifting background.

    ChoicesGridListCompact (widget rows)CarouselParallax List

  • ColumnsDefault3

    How many cards sit across a row on a wide screen. Narrower screens step down on their own.

    Shown when Layout is "Grid"

  • Merge Wrapper into RowDefaultOff

    Emit the card row as the block's own element instead of wrapping it in an extra div.

    Shown when Layout is "Grid" or "List"

  • Feature First EventDefaultOff

    Render the first event as a full-width horizontal card above the grid.

    Shown when Layout is "Grid"

  • Card Bottom SpacingDefaultNone (grid gutter only)

    Extra space under each card, on top of the grid gutter.

    ChoicesNone (grid gutter only)Extra SmallSmallMediumLargeShown when Layout is "Grid" or "List"

Content

  • Show ImageDefaultOn

    Shows the featured image of each event on its card.

  • Show Type BadgeDefaultOn

    Shows the event type as a small tag over the picture.

    Shown when Show Image is on

  • Show DateDefaultOn

    Shows when each event takes place, in the formats set below.

  • Show ExcerptDefaultOn

    Shows a short summary of each event under its title.

  • Show LocationDefaultOn

    Shows where each event is being held.

  • Card Date FormatDefaultD, M j

    PHP date format for the card date line, e.g. "D, M j" renders "Fri, Jan 23".

    Shown when Show Date is on

  • Card Time FormatDefaultg:iA

    PHP time format appended after "@", e.g. "g:iA" renders "5:30PM".

    Shown when Show Date is on

  • Widget Thumbnail ClassesDefaultEmpty

    Classes on the small widget thumbnail, e.g. rounded-circle for round thumbs.

    Shown when Layout is "Compact (widget rows)"

  • Card Image RatioDefaultEmpty

    Proportions every card image is cropped to, for example 16/9, so pictures of different shapes line up. Empty keeps their natural shape.

    Shown when Show Image is on

  • CTA LabelDefaultBuy Tickets

    Wording on the button beside each event in the parallax list.

    Shown when Layout is "Parallax List"

  • CTA ColorDefaultDanger

    Which colour fills that button.

    ChoicesDangerPrimaryInfoSuccessWarningDarkShown when Layout is "Parallax List"

  • Items (base)Default0

    Fallback item count for every breakpoint that sets none of its own. 0 leaves it unset.

    Shown when Layout is "Carousel"

  • Items (XS)Default1

    Slides visible on screens narrower than 576 pixels. 0 falls back to Items (base).

    Shown when Layout is "Carousel"

  • Items (SM)Default2

    Slides visible from 576 pixels up. 0 repeats the count from the breakpoint below.

    Shown when Layout is "Carousel"

  • Items (MD)Default3

    Slides visible from 768 pixels up. 0 repeats the count from the breakpoint below.

    Shown when Layout is "Carousel"

  • Items (LG)Default4

    Slides visible from 992 pixels up. 0 repeats the count from the breakpoint below.

    Shown when Layout is "Carousel"

  • Items (XL)Default4

    Slides visible from 1200 pixels up, including the widest screens. 0 repeats the count from the breakpoint below.

    Shown when Layout is "Carousel"

  • Item Gap (px)Default20

    Space between one slide and the next, in pixels.

    Shown when Layout is "Carousel"

  • Show ArrowsDefaultOn

    Show the previous and next arrows beside the slides.

    Shown when Layout is "Carousel"

  • Arrows Always VisibleDefaultOff

    Keep the arrows on screen instead of revealing them when the pointer enters the carousel.

    Shown when Layout is "Carousel"

  • Show DotsDefaultOn

    Show the row of dots below the slides, one per page.

    Shown when Layout is "Carousel"

  • Autoplay (ms)Default0

    Milliseconds between slides. 0 disables autoplay.

    Shown when Layout is "Carousel"

  • LoopDefaultOff

    Run the slides in an endless cycle, so the last one is followed by the first. Off stops at each end.

    Shown when Layout is "Carousel"

  • Transition SpeedDefault250

    Milliseconds per slide transition.

    Shown when Layout is "Carousel"

  • Centre Active SlideDefaultOff

    Keeps the active slide in the middle of the stage.

    Shown when Layout is "Carousel"

  • Stage PaddingDefault0

    Pixels of the neighbouring slides left visible at each edge. 0 leaves it unset.

    Shown when Layout is "Carousel"

  • Animate InDefaultEmpty

    Animation class applied to the incoming slide. Empty uses a plain slide.

    Shown when Layout is "Carousel"

  • Animate OutDefaultEmpty

    Animation class applied to the outgoing slide. Empty uses a plain slide.

    Shown when Layout is "Carousel"

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Events: Conference Programme, Event Archive Grid, Event Categories, Event Content, Event Date, Event Excerpt.

Was this page helpful?