feat: carousel tabs mode#167
Open
danish17 wants to merge 15 commits into
Open
Conversation
…tion to carousel save
- Toggle in inspector disables carousel-specific controls when enabled - Auto-inserts carousel-tab-list block above viewport on toggle ON - Passes duration:0 via carouselOptions for instant tab switching - Passes useTabs to EditorCarouselContext for downstream consumers - Adds data-is-tabs attribute to blockProps for WYSIWYG CSS hook - viewport/edit.tsx: passes duration option through to Embla init
- slide/edit.tsx: derive slideIndex from block tree, apply is-active class when useTabs is true and this slide is selectedIndex - editor.scss: hide non-.is-active slides under [data-is-tabs="true"] so editor matches frontend tabs behaviour
- slide/edit.tsx: add curly braces to if block (curly rule) - view.ts: move context read after early-return guards to satisfy @wordpress/no-unused-vars-before-return in getSlideTabPanelId and getSlideTabLabelledBy - carousel-tab-list/edit.tsx: add id props to BaseControl components to satisfy @wordpress/no-base-control-with-label-without-id
WPBlock recursive type replaces inline casts in carousel and tab-list edit.tsx. findBlockDeep is a depth-first search used by editor code to locate nested viewport/carousel ancestors when blocks are placed inside layout containers. encodeContext escapes JSON output for safe embedding in data-wp-context HTML attributes. Shared between carousel and carousel-tab-list save.
Expand parent arrays to include core/column and core/group so users can build side-by-side vertical-tabs layouts. Drops the dead 'deprecated' block from carousel-tab-list/block.json (invalid 'saves' key, never matched) and core/columns plural (direct parent of these blocks is core/column, not the plural columns container).
Editor renders tabs as <button> (matches save), uses stable index-based React key to avoid focus loss when typing, and resolves the closest carousel ancestor via getBlockParentsByBlockName so dotCount stays correct when nested through layout blocks. Save markup applies alignItems: stretch + flexWrap: nowrap in vertical mode so tabs render at uniform width on the frontend, matching the editor (WP .is-layout-flex class defaults to align-items: flex-start). Store (view.ts) adds WAI-ARIA tabs keyboard navigation (Home/End/Arrow keys with wrap) and roving tabindex. data-wp-context is HTML-attribute encoded via the shared encodeContext util. Tests cover onTabKeydown (9), getTabTabIndex (2), getKeyFeatureDotText (3), getTabId/getTabAriaControls (2), resolveWpValue (6).
Carousel edit drops the 'as any' block-editor select cast in favour of the typed BlockEditorSelectors interface and uses findBlockDeep to locate the viewport when it is nested through columns/group. Carousel save HTML-encodes its data-wp-context via the shared encodeContext util (was raw JSON.stringify — latent parse break if an ariaLabel or announcementPattern contained <, >, or &). Slide save adds tabpanel role + aria-labelledby bindings in tabs mode. Slide index registers __experimentalLabel for cleaner block titles. Editor context exposes setSelectedIndex; viewport edit uses it to sync the active slide when the user clicks a tab in the editor. _core.scss stacks inactive slides via :has(.embla__slide.is-active) so tabs mode shows one panel at a time without runtime is-hidden classes. Tests: append findBlockDeep coverage to types.test.ts; remove the deleted isSlideHiddenForTabs callback tests from view.test.ts; mock setSelectedIndex in viewport-edit.test.tsx.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a tabs mode to the carousel block. Toggling Use as Tabs in the carousel inspector switches slides from a swipeable carousel to a tab panel: each slide becomes a tab panel, a
carousel-tab-listblock renders the tab navigation, and selection replaces scroll.useTabsattribute + carousel save emitsrole="region"withdata-is-tabs="true".rt-carousel/carousel-tab-listblock renders WYSIWYG tab labels with inline colour/border controls. Save markup uses<button role="tab">with rovingtabindex,aria-controls, andaria-selected.role="tabpanel"+aria-labelledbyin tabs mode.onTabKeydown(WAI-ARIA tabs keyboard pattern: Home/End/Arrows with wrap),getTabTabIndex,getTabId,getTabAriaControls,getKeyFeatureDotText.EditorCarouselContext.setSelectedIndex. Recursive ancestor lookup (getBlockParentsByBlockName+findBlockDeep) letstab-list/viewportlive insidecore/column/core/groupfor side-by-side vertical-tabs layouts._core.scssstacks inactive slides via:has(.embla__slide.is-active)so one panel is visible at a time without runtimeis-hiddenclasses.data-wp-contexton carousel and tab-list save is now HTML-attribute encoded (encodeContext) to survive<,>,&in user-edited strings.Test plan
npm run lint:js && npm run lint:js:types && npm run lint:css && npm run build && npm run test:js— all green (157 tests).core/columnsblock inside a carousel, then placecarousel-tab-listin one column andcarousel-viewportin another — tabs still report correct slide count and selecting a tab updates the visible slide.tabindexkeeps only the active tab in tab order.&or<does not breakdata-wp-contextparsing.