New Block: Slider Container (CSS based)

[mtias]

Exploration. Related #25501 #25502.

These types of blocks are a very common request that we have stayed out of tackling in core for multiple reasons — primarily the reliance on JavaScript on the front-end for most implementations. The reality now, however, is that the CSS spec has added great new native tools with good browser support to try to accomplish some of these displays without relying on JS, employing properties like scroll-snap-type and scroll-snap-align.

Combined with inner blocks and layout container, including viewport units, it could easily accommodate full screen display options:

It might be a good time to explore how we might build a container or add these container behaviours to flex groups. Would be good to work as a generic container that could be leveraged for galleries, custom inner blocks, post lists templates, etc.

[costdev]

For browser support, see below. TL;DR - Supported by all major browsers.
scroll-snap-type
scroll-snap-align
scroll-behavior

CSS-only sliders are mostly fine. Selectors are typically links with href="#slide-$", and scroll-behavior: smooth on the slide container. There can be some jankiness with selectors when slides aren't full width in the slider, like in this issue's first example image. This could be improved with Javascript, and degradation is somewhat reasonable when Javascript is disabled.

For the most part, we'd likely need:

• .slide-container An outer container to hold everything.
  • .slide-selectors A container for slide selectors.
  • .slides A container for slides, which may be various blocks (or posts in a Query Loop block).
    • .slide A container for slide content.

Here's a basic example of the above structure: https://codepen.io/costdev/pen/abGeLNp?editors=1100
Note the comments in the HTML and CSS editors.
(P.S. I suggest changing the view so the editors are on the left or right, rather than the default top-bottom layout)

[strarsis]

Warming this discussion up again:
#6608

[masteradhoc]

@mtias / @costdev any update on this block? Are there any plans to work on this soon?

[altivero]

Looking at the example from @costdev
I found another example that also includes previous and next navigation:
https://codepen.io/alvarotrigo/pen/bGqgqeK

With all the advancement in the block editor I would love to see a structure with innerblocks that the can be completely customized through the editor:

• .slide-container An outer container to hold everything.
  • .slide-controls A container for slide controls which could be inner blocks like a variation of buttons that can be customized with styles.
  • .slide-foreground A container for a fixed foreground, which may be various blocks, text, nav etc.
  • .slides A container for slides, which may be various blocks (or posts in a Query Loop block).
    • .slide A container for slide content which may be various blocks.
  • .slide-background A container for a fixed background, which may be various blocks.

The background and foreground containers could be added optionally but would create a way to add fixed elements to the foreground or background (if the slides have transparency or are just text). Things like a logo, text, header, footer, navigation, anything really.

[TheRamSan]

Hi
I hope this message finds you well. Any news regarding this issue?

I frequently encounter the need for an automatic carousel functionality that seamlessly transitions between text or image items without requiring user input. While I appreciate the availability of plugins that offer such features, I believe integrating this functionality directly into the WordPress core would significantly enhance the user experience for several reasons:

Compatibility Concerns: External plugins, while useful, often introduce compatibility issues with future WordPress updates. As the WordPress ecosystem evolves, maintaining compatibility with numerous plugins becomes increasingly challenging. By incorporating a native Slider Container block, users can rest assured that their carousel functionality will remain intact across WordPress updates.

Reliability and Support: Third-party plugins may lack adequate support or become obsolete over time. When a plugin developer ceases updates or support, users are left vulnerable to security risks and functionality gaps. With a native Slider Container block, WordPress users can rely on the platform's robust support and maintenance infrastructure for long-term viability.

Performance Optimization: External plugins can contribute to bloated codebases and slow website performance. By integrating essential features directly into the WordPress core, users benefit from optimized performance and streamlined code execution, resulting in faster load times and improved overall website responsiveness.

User Accessibility: Simplifying the website development process by providing essential features within the WordPress editor promotes accessibility for users of all skill levels. A native Slider Container block empowers users to create dynamic, engaging content without the need for extensive technical knowledge or reliance on external resources.

In light of these considerations, I believe the addition of a Slider Container block aligns with WordPress's commitment to user-centric design and continuous improvement. By empowering users to create visually stunning carousels without the need for external plugins, WordPress reinforces its position as a leading platform for website development and content management.

Thank you for your dedication to advancing the WordPress platform.

Warm regards,
Ram

[solaceten]

I would like to jump in and add my twopenneth worth. As a WordPress user for almost 20 years, I have always scatched my head about why the native [gallery] does not have a) a decent options page to be able to get better config and b) a carousel or slider feature and c) simple lightbox support with nav options. Until now, I have used Slick Slider, Orbit Slider, Flex Slider, NextGen etc... and today, we have things like in-built theme sliders etc - but still occasionally I come back to the need to use the native [gallery] shortcode - and it's sad to see that it has languished for decades with little improvement. Many of the aforementioned sliders / carousels and lightbox plugins are defunct and never updated. Please consider giving us an upgraded native [gallery] experience.

[Bovelett]

Hey @mtias, I'm not a developer, but an accessibility mentor, and from reading this entry, I was wondering if you're implying to build a CSS only slider container?