Carousel Block

[Nyiriland]

Overview

Allows you to scroll through a horizontal series of content, including:

• Query loop posts
• Images (using a gallery)
• Woo products

There's 2 ways we could approach this:

1. As its own new "Carousel" block
2. As an extension to the Gallery and Query Loop blocks, which would require a plugin

We're choosing to focus on creating a new Carousel block so that it can be more easily surfaced within canonical blocks in the future, but could alter the approach if others think differently. (cc @jffng @tommusrhodus )

Scope

The following is a rough outline of the block:

• The carousel is in essence a container block that alters the display of its contents, which would be an Image gallery, Query loop, or Woo Product collection
• Converts the content to a scrollable row of posts, products or images
• Can choose # of posts (or columns, most likely) to display in row at one time
• Should be able to drag and swipe to progress, in addition to clicking buttons

Settings/options:

• Options for progression/scroll amount:
  • 1 post at a time
  • Full row of posts
• Animation options:
  • Infinite loop
  • End with last
  • Slide back to the beginning
• Navigation layout: should have a options for a few default layouts for button positioning:
  • Navigation on either side of the carousel
  • Navigation at top (left, centered)
  • Navigation on left (takes up 1 column?)
  • Navigation on bottom
• Styles:
  • Can set block spacing between columns
  • Fit to content width (hugs navigation if on left; disrespects columns)
• Navigation
  • next/prev buttons (default)
  • pagination dots
  • show both
• Overflow:
  • Hide (default)
  • Right
  • Left
  • Left & Right

To be decided:

• How we handle less-than-full rows
• Should we account for a "generic content" carousel option? For instance, those who want to do promotional cover block carousels at the top of a page.

Accessibility

As with everything we build, a11y will be top of mind. This will include:

• keyboard navigation once the user has tabbed into the carousel block
• ARIA labels noting items that are visible and not visible
• Consider best practices for UX on mobile
• Etc.

Block Editor

An idea we have is that once you insert the Carousel block, you'll get an option of 2 workflows (or 3, if you have Woo installed):

Front end examples

See below.

Work in progress

Happy Prime has been exploring some options with carousels, especially on Ernst, and are interested in taking on building out the approach outlined in this issue.

Here is the branch: https://github.com/a8cteam51/johan-ernst/tree/fix/142-carousel-animation
And the PR (ongoing): https://github.com/a8cteam51/johan-ernst/pull/236

[Nyiriland]

Sample front-end layouts with options

From this Figma file