Themes Overview

The FRS ecosystem includes two Blocksy child themes designed for Hub experiences.

Theme Comparison

Feature	Workspaces	Workspaces Directory
Purpose	Lender/Agent/Partner Hubs	Directory Hub
Sidebar	Fixed 320px	Fixed 320px
Menu System	Hub-specific menus	Taxonomy-agnostic dynamic menus
Navigation	Hub shortcodes	Taxonomy-based routing
Use Case	Lender Hub, Agent Hub, Partner Hub	Directory Hub workspace
Tutor LMS	Optional support	Full dashboard integration

Shared Features

Both themes share:

• Blocksy Parent - Requires Blocksy theme
• Fixed Sidebar Frame - 320px persistent left sidebar
• WordPress Interactivity API - Dynamic PHP templates with declarative interactivity
• wp-scripts - WordPress official build tooling
• Design Tokens - Shared color palette and typography

Design System

Color Palette

Both themes use a consistent color palette defined in theme.json:

Token	Value	Usage
primary-blue	#2563EB	Primary actions, links
rich-teal	#20D4DA	Accents, highlights
dark-charcoal	#171A1F	Text, dark backgrounds
navy-base	#263042	Secondary backgrounds
off-white	#F8F7F9	Light backgrounds

Typography

Token	Font	Weight	Usage
heading	Mona Sans	600-800	Headlines
body	Mona Sans	400	Body text
mono	ui-monospace	400	Code

Spacing Scale

10-step spacing scale from 4px to 96px:

10: 4px   |  50: 24px  |  90: 80px
20: 8px   |  60: 32px  |  100: 96px
30: 12px  |  70: 48px
40: 16px  |  80: 64px

Sidebar Architecture

┌─────────────────────────────────────────────────┐
│              Blocksy Header                      │
├──────────────┬──────────────────────────────────┤
│   SIDEBAR    │     Header Bar (60px)            │
│   (320px)    │     ┌─────────────────────────┐  │
│              │     │ Toggle │ Title │ Clock  │  │
│ ┌──────────┐ │     └─────────────────────────┘  │
│ │  Header  │ ├──────────────────────────────────┤
│ │  Widget  │ │                                  │
│ │  (16:9)  │ │                                  │
│ └──────────┘ │        Main Content              │
│              │        (scrollable)              │
│ ┌──────────┐ │                                  │
│ │   Menu   │ │                                  │
│ └──────────┘ │                                  │
│              │                                  │
│ ┌──────────┐ │                                  │
│ │ Profile  │ │                                  │
│ │   Card   │ │                                  │
│ └──────────┘ │                                  │
└──────────────┴──────────────────────────────────┘

Interactivity API Stores

Both themes use WordPress Interactivity API (WP 6.5+):

Store	Namespace	Purpose
Sidebar Toggle	workspaces/sidebar	Collapse/expand with localStorage
Date/Time	workspaces/datetime	Live clock display
Navigation	hub-navigation	Hub page navigation

Custom Nav Walkers

Both themes include custom navigation walkers:

Workspace_Nav_Walker

• Renders sidebar menu with Lucide icons
• Collapsible submenus with chevron animation
• Active state highlighting
• Icon from _menu_item_icon post meta

User_Menu_Walker

• Simple user dropdown menu
• Icon support
• Compact styling

Build System

# Development (watch mode)
npm run start

# Production build
npm run build

Uses @wordpress/scripts for building Interactivity API view.js files and block assets.

Deployment

Both themes deploy via GitHub:

# Standard workflow
git add . && git commit -m "message"
git push origin main
git checkout production && git merge main && git push origin production
git checkout main

Production: Cloudron at myhub21.com