` for CSS isolation
- **Data Integration**: Use `useSelect` hooks to fetch analytics from Redux store
- **Dynamic Rendering**: Render different interfaces based on block type (standard/abtest/personalization)
- **WordPress API**: Leverage WordPress Data API and editor hooks for seamless integration
### Technical Guardrails
- Portal nodes must be created with `document.createElement('div')`
- Always use `requestAnimationFrame` for DOM element waiting
- Scoped Tailwind prevents style conflicts with WordPress admin
- Analytics data should be real-time using Redux store updates
- Modal portals should target `document.body` for proper z-index stacking
### Spark Charts & Mini Visualizations
Small inline charts for quick metric visualization within portal headers and variant rows.
**Common Uses:**
- Variant performance trend lines next to conversion rates
- 7-day sparklines in header summary cards
- A/B test confidence intervals
- Audience reach trend indicators
**Technical Requirements:**
- Use minimal visx components (LinePath, scaleLinear, scaleTime)
- Responsive design adapting to portal container width
- Aggregate data points for performance (max 20 points)
- Include ARIA labels for accessibility
- Fetch data via Redux store: `select('accelerate').getSparklineData(blockId, '7D')`
**Performance Considerations:**
- Lightweight rendering to avoid bundle bloat
- Cache sparkline data to prevent excessive API calls
- Use CSS transforms for hover interactions instead of re-renders
### Variant Selection Integration
When implementing variant switching in portal interfaces, coordinate with WordPress block editor state:
**Index Mapping Issue**: WordPress block indices don't always match filtered array indices. Convert between them:
```javascript
// Convert WordPress block index to UI array index
const selectedVariant = useSelect((select) => {
const blockIndex = select(PreferencesStore).get('scope', `${postId}:variant`) || 0;
const { getBlockIndex } = select(BlockEditorStore);
const arrayIndex = variants.findIndex(v => getBlockIndex(v.clientId) === blockIndex);
return arrayIndex >= 0 ? arrayIndex : 0;
}, [postId, variants]);
```
**Block Selection Strategy**: Use `selectBlock(clientId)` to trigger variant switching, let WordPress handle preference updates automatically rather than manually setting preferences. **Key insight**: Empty variants need default inner blocks (e.g., `createBlock('core/paragraph')`) to be immediately editable - `createBlock` creates empty blocks while `cloneBlock` preserves existing content structure.
### Common Patterns
```javascript
// Wait for DOM element pattern
const waitForTarget = () => {
const el = document.querySelector(selector);
if (el) {
// Inject portal
} else {
requestAnimationFrame(waitForTarget);
}
};
// Scoped Tailwind container
{/* All Tailwind styles scoped here */}
```
## Common Development Tasks
### Adding New Features
1. Create PHP namespace in `inc/[feature]/`
2. Add React components in `src/[feature]/`
3. Register webpack entry point in build config
4. Add feature toggle in `configure_features()`
5. Include in plugin bootstrap
### Block Development
1. Create block definition in `inc/blocks/[name]/`
2. Add React edit component in `src/blocks/[name]/`
3. Register block in `block.json`
4. Add to webpack entries
### API Endpoints
1. Create controller in `inc/[module]/rest_api/`
2. Extend `WP_REST_Controller`
3. Register routes in namespace bootstrap
4. Add permission callbacks