Navigation Panels

Container block that renders prc-block/navigation-panel children as a radio-driven navigation interface. The server builds navigation options from each panel's label, optional icon, and return label. Panel visibility and top-layout back navigation are handled by the Interactivity API.

Block Namespace

prc-block/navigation-panels

Category

widgets

Supports

Feature	Detail
Anchor	Yes
HTML	No
Interactivity	Yes
Lock	true (block cannot be moved or removed)

Attributes

Attribute	Type	Default	Description
allowedBlocks	array	—	Override allowed inner blocks. Defaults to prc-block/navigation-panel only.
activePanelIndex	number	0	Panel index active on the frontend at load.
editorActivePanelIndex	number	—	Editor-only active panel index (role: local).
returnLabel	string	"Back"	Editor preview label for the top-layout return control (role: local).
level	string	"independent"	Navigation hierarchy mode: independent, parent, or child.
desktopLayout	string	"left"	Desktop options placement: left (sidebar) or top (overlay-style).
mobileLayout	string	"top"	Mobile options placement: left or top.
optionsMinWidth	string	"25%"	Minimum width of the navigation options column.
navigationStyle	string	"none"	Optional trailing icon on each option: none, play, or angle-right.

Inner Blocks

Only prc-block/navigation-panel blocks are allowed. The default template inserts one panel labeled "Browse By".

Toolbar controls (block toolbar):

• Move panel up / down — reorders the active panel among siblings.
• Add new — inserts a new panel after the current set.
• Remove — removes the active panel (disabled when only one panel remains).

Context

Direction	Key	Maps to
Provides	navigation-panel/activeIndex	activePanelIndex
Provides	navigation-panel/activeEditorIndex	editorActivePanelIndex

Layout Modes

Left layout

Navigation options render in a fixed left column. Selecting an option shows the matching panel in the content area. Both columns remain visible.

Top layout

When desktopLayout or mobileLayout is top, selecting a panel:

1. Hides the options list for that breakpoint.
2. Shows the panel content area with a return control above it.
3. Sets panelOpen to true in Interactivity state.

The return control label comes from the selected panel's returnLabel (defaulting to "Back"). Clicking it resets activeIndex to -1 and closes the panel.

Navigation Level

Level	Behavior
independent	Standalone navigation. No parent/child coordination.
parent	Can display sub-navigation options injected by a nearby child Navigation Panels block.
child	Registers its panel list with the nearest parent when a panel is selected or reset.

Child blocks push { navigationId, blockId, index, label, returnLabel } entries into the parent's subNavigationList while the matching parent panel is active.

Editor Behavior

The editor mirrors the frontend structure:

• A live preview of navigation options is built from sibling panel labels, icons, and the selected navigationStyle icon.
• Clicking an option sets editorActivePanelIndex and stores that panel's returnLabel for the preview return control.
• Only the panel matching editorActivePanelIndex receives the is-visible class.
• Inspector panels: Settings (level, default panel) and Style (navigation style, options width, desktop/mobile layout).

PHP Rendering

class-navigation-panels.php (PRC\Platform\Blocks\Navigation_Panels)

Render callback:

1. Generates a unique block_id via wp_unique_id('prc-block-navigation-panels-').
2. Walks saved panel markup with WP_HTML_Tag_Processor, reading each panel's data-wp-context.
3. Builds radio navigation items styled as prc-block/form-input-checkbox (is-style-label-only), including optional panel thumbnail and navigation style icon.
4. For parent level, appends a sub-navigation column bound to state.subNavList.
5. For child level, collects parentNavigationList entries for Interactivity coordination.
6. Sets panel id, data-wp-bind--hidden, and updated context on each panel wrapper.
7. Registers per-instance Interactivity state keyed by block_id (level, activeIndex, parentNavigationList).
8. Outputs options column, content column, and (for top layout) a single dynamic return control.

Frontend Interactivity

view.js registers the prc-block/navigation-panels store.

State:

• navigationPieces — parses the current element's id (or sub-nav option.navigationId) into [blockId, index].
• isSelected — compares activeIndex against the parsed index.
• panelOpen — whether a panel is open (used by top layout visibility classes).
• returnLabel / localReturnLabel — label for the return control.
• hasSubNav / subNavList — parent sub-navigation list when the active parent panel matches.

Actions:

• setNavigation — sets activeIndex, opens the panel, stores the panel's return label, and syncs child sub-navigation to a parent when level is child.
• resetNavigation — sets activeIndex to -1, closes the panel, and clears child sub-navigation on the parent.
• addSubNavigation — writes subNavigationList and subNavigationPanel on the nearest .is-parent-nav ancestor.

CSS Architecture

style.scss uses a flex row layout:

• .wp-block-prc-block-navigation-panels__options — options column with configurable min-width.
• .wp-block-prc-block-navigation-panels__content — panel content area.
• .is-desktop-hidden / .is-mobile-hidden — breakpoint-specific visibility toggles for top layout.
• .sub-navigation — indented sub-navigation items under a parent option.

Related Blocks

Block	Relationship
prc-block/navigation-panel	Required child block
prc-block/form-input-checkbox	Styles navigation radio controls