Skip to content

feat(carousel): add Terms Query block compatibility#98

Open
thomasnavarro wants to merge 3 commits intortCamp:developfrom
thomasnavarro:feature/97-terms-query-carousel-compat
Open

feat(carousel): add Terms Query block compatibility#98
thomasnavarro wants to merge 3 commits intortCamp:developfrom
thomasnavarro:feature/97-terms-query-carousel-compat

Conversation

@thomasnavarro
Copy link
Copy Markdown

@thomasnavarro thomasnavarro commented Mar 26, 2026

Summary

Adds support for core/terms-query inside carousels. The Terms Query block now works as a content source alongside Query Loop and manual slides, with each term rendered as its own slide.

One catch: Gutenberg's term-template block doesn't add a columns-{N} class to its wrapper (unlike post-template). This PR fixes that server-side (PHP render_block filter) and editor-side (MutationObserver) so the carousel can detect the column count.

Type of change

  • Bug fix
  • New feature
  • Enhancement/refactor
  • Documentation update
  • Test update
  • Build/CI/tooling

Related issue(s)

Closes #97

What changed

  • CSS: Added .wp-block-term-template and .wp-block-term selectors alongside existing post-template selectors for flex layout, gap, columns variants, loop mode and vertical axis
  • JS (frontend): view.ts detects .wp-block-term-template as Embla container and .wp-block-term as individual slides; useCarouselObservers.ts observes term-template for mutation/resize
  • JS (editor): edit.tsx allows core/terms-query in the viewport, reads the term-template's columnCount from the block store, and mirrors the columns-{N} class via MutationObserver (persists across block select/deselect cycles)
  • PHP: New render_block_core/term-template filter in Plugin.php adds columns-{N} class to the <ul> wrapper using WP_HTML_Tag_Processor, bridging a parity gap with post-template in Gutenberg core
  • Pattern: Rewrote terms-query.php with valid Gutenberg markup — dynamic term-template block (no <ul>/<li> in saved content), carousel-slide wrapper, correct termQuery attributes
  • Docs: Added Terms Query to README features/FAQ and USAGE.md setup guide
  • Test: Added isSlideActive test for .wp-block-term slide detection

Breaking changes

  • Yes
  • No

Testing

  • Unit tests
  • Manual testing
  • Cross-browser testing (if UI changes)

Test details:

  1. Insert the "Carousel Kit: Terms Query Carousel" pattern in the editor — no "Resolve block" prompt
  2. Verify term-template renders correctly with 3 visible terms per slide group
  3. Change columnCount in term-template settings (2, 3, 4) — carousel updates in both editor and frontend
  4. Select/deselect the term-template block — columns-N class persists on the wrapper
  5. Frontend: inspect <ul class="wp-block-term-template columns-3"> — class is present via PHP filter
  6. npm run test:js — all tests pass including new Terms Query test

Screenshots / recordings

N/A — to be added during review.

Checklist

  • I have self-reviewed this PR
  • I have added/updated tests where needed
  • I have updated docs where needed
  • I have checked for breaking changes

Thomas Navarro added 3 commits March 26, 2026 21:32
Add support for the core/terms-query block inside carousels.

- CSS: flex/gap selectors for .wp-block-term-template and its children
- CSS: column variants (columns-2/3/4) for term-template
- JS (view.ts): detect .wp-block-term as slide and .wp-block-term-template
  as Embla container on the frontend
- JS (useCarouselObservers): observe term-template for mutation/resize
- JS (edit.tsx): allow core/terms-query in viewport, mirror columns-N
  class on term-template via MutationObserver in the editor
- PHP (Plugin.php): render_block filter to add columns-{N} class to
  term-template output, bridging a parity gap with post-template in
  Gutenberg core
- TS (types.ts): enrich BlockEditorSelectors.getBlocks return type
Verify isSlideActive correctly identifies .wp-block-term elements as
individual slides within a Terms Query carousel.
- Rewrite terms-query.php pattern with valid Gutenberg markup:
  dynamic term-template block (no ul/li in saved content),
  carousel-slide wrapper, correct termQuery attributes
- Add Terms Query to README features list and FAQ
- Add Terms Query setup guide to USAGE.md
@thomasnavarro thomasnavarro changed the title feat(carousel): add Terms Query block compatibility (#97) feat(carousel): add Terms Query block compatibility Mar 26, 2026
@thomasnavarro
Copy link
Copy Markdown
Author

I'm not 100% sure this is the best approach to work around the missing columns-{N} class on term-template. If anyone has a cleaner implementation in mind, I'm happy to iterate on it.

@danish17 danish17 requested a review from theMasudRana March 27, 2026 05:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Enhancement]: Compatibility with the carousel for the Terms Query block (core/terms-query)

1 participant