Query Loop Slider Layout - POC

Extremely rough implementation of slider layout in Query Loop just to show the potential approach in opposition to #74769.

Approach

Instead of a dedicated Slider block, this POC explores adding a "Slider" variation to the existing Query Loop block. The idea is to reuse Query Loop's querying capabilities while applying slider behavior to the post-template output.

Structure:

core/query (with data-wp-interactive="core/slider")
├── core/slider-controls (reused from #74769)
└── core/post-template.is-slider-track
├── .wp-block-slide (post 1)
├── .wp-block-slide (post 2)
└── ...

What's Implemented

• Block Variation (query/variations.js) with className: "is-style-slider" and isActive matcher
• PHP detection in query/index.php - adds data-wp-interactive="core/slider" and context when slider variation detected
• Modified post-template/index.php - renders <div> instead of <ul>/<li>, adds .wp-block-slide class to each post, injects scroll directives
• Shared Interactivity API store (core/slider) - same view.js handles both dedicated slider block and Query Loop variation
• Editor styles (query/editor.scss) - horizontal layout preview for slider variation
• slider-controls updated to allow core/query as parent

Problems & Limitations

1. Disconnected UX / Control Injection Problem

If we want to control slider-specific settings (slides per view, gap, peek amount, etc.), we need to inject custom inspector controls into Query Loop only for the slider layout. This is problematic because:

• It creates disconnected UX from the dedicated Slider block (which would have its own controls)
• Either we duplicate controls across both implementations, or they have different controls entirely
• Implementation requires if (isSliderVariation) conditionals scattered throughout Query Loop's edit component
• This pattern doesn't scale - every "layout mode" would need similar conditional injection

2. Other Unsolved Issues

• Overlay positioning - No native way to position controls over slides
• Responsive slides-per-view - No controls for "3 on desktop, 1 on mobile"
• Content fill behavior - How images/content fill slides
• Pagination conflict - Sliders don't work well with Query Loop pagination
• Editor preview - Shows horizontal layout but no actual sliding behavior

Conclusion

This POC demonstrates that Query Loop can be extended with slider behavior, but it highlights that neither approach (dedicated block nor variation) solves the underlying conflict between deterministic slides vs iteratively rendered blocks like Post Template.

A proper solution likely requires broader Gutenberg architecture work before sliders can be implemented cleanly.

Screenshots or screencast