-
-
-
- {/* Background Color */}
- !!dropdownStyles.backgroundColor}
- label={__('Background Color', 'priority-plus-navigation')}
- onDeselect={() => updateStyle('backgroundColor', undefined)}
- >
- updateStyle('backgroundColor', value)}
- />
-
-
- {/* Border Color */}
- !!dropdownStyles.borderColor}
- label={__('Border Color', 'priority-plus-navigation')}
- onDeselect={() => updateStyle('borderColor', undefined)}
- >
- updateStyle('borderColor', value)}
- />
-
-
- {/* Border Width */}
- !!dropdownStyles.borderWidth}
- label={__('Border Width', 'priority-plus-navigation')}
- onDeselect={() => updateStyle('borderWidth', undefined)}
- >
- updateStyle('borderWidth', value)}
- units={[
- { value: 'px', label: 'px' },
- { value: 'rem', label: 'rem' },
- ]}
- />
-
-
- {/* Border Radius */}
- !!dropdownStyles.borderRadius}
- label={__('Border Radius', 'priority-plus-navigation')}
- onDeselect={() => updateStyle('borderRadius', undefined)}
- >
- updateStyle('borderRadius', value)}
- units={[
- { value: 'px', label: 'px' },
- { value: 'rem', label: 'rem' },
- { value: '%', label: '%' },
- ]}
- />
-
-
- {/* Box Shadow */}
- !!dropdownStyles.boxShadow}
- label={__('Box Shadow', 'priority-plus-navigation')}
- onDeselect={() => updateStyle('boxShadow', undefined)}
- help={__('CSS box-shadow value (e.g., "0 4px 12px rgba(0,0,0,0.15)")', 'priority-plus-navigation')}
- >
- updateStyle('boxShadow', value)}
- />
-
-
-
-
-
-
- {/* Item Spacing */}
- !!dropdownStyles.itemSpacing}
- label={__('Item Spacing', 'priority-plus-navigation')}
- onDeselect={() => updateStyle('itemSpacing', undefined)}
- help={__('Padding around items (e.g., "0.75rem 1.25rem")', 'priority-plus-navigation')}
- >
- updateStyle('itemSpacing', value)}
- />
-
-
- {/* Item Hover Background */}
- !!dropdownStyles.itemHoverBackgroundColor}
- label={__('Hover Background Color', 'priority-plus-navigation')}
- onDeselect={() => updateStyle('itemHoverBackgroundColor', undefined)}
- >
- updateStyle('itemHoverBackgroundColor', value)}
- enableAlpha
- />
-
-
- {/* Item Hover Text Color */}
- !!dropdownStyles.itemHoverTextColor}
- label={__('Hover Text Color', 'priority-plus-navigation')}
- onDeselect={() => updateStyle('itemHoverTextColor', undefined)}
- >
- updateStyle('itemHoverTextColor', value)}
- />
-
-
- {/* Multi-level Indent */}
- !!dropdownStyles.multiLevelIndent}
- label={__('Multi-level Indent', 'priority-plus-navigation')}
- onDeselect={() => updateStyle('multiLevelIndent', undefined)}
- help={__('Indentation for nested menu levels', 'priority-plus-navigation')}
- >
- updateStyle('multiLevelIndent', value)}
- units={[
- { value: 'px', label: 'px' },
- { value: 'rem', label: 'rem' },
- { value: 'em', label: 'em' },
- ]}
- />
-
-
-
-
-
-
- {/* Preview component */}
-
-
-
- {/* Footer */}
-
- );
-}
-```
-
-**Testing**: Controls should update `dropdownStyles` attribute, verify in browser devtools.
-
----
-
-### Phase 4: Live Preview Component
-
-**Goal**: Create visual preview that updates in real-time
-
-#### 4.1 Preview Component
-
-**File**: `src/variation/components/dropdown-preview.js` (new file)
-
-```javascript
-import { useMemo } from '@wordpress/element';
-import './dropdown-preview.scss';
-
-export function DropdownPreview({ styles }) {
- const previewStyles = useMemo(() => {
- return {
- '--preview-bg': styles.backgroundColor || '#ffffff',
- '--preview-border-color': styles.borderColor || '#dddddd',
- '--preview-border-width': styles.borderWidth || '1px',
- '--preview-border-radius': styles.borderRadius || '4px',
- '--preview-box-shadow': styles.boxShadow || '0 4px 12px rgba(0, 0, 0, 0.15)',
- '--preview-item-spacing': styles.itemSpacing || '0.75rem 1.25rem',
- '--preview-item-hover-bg': styles.itemHoverBackgroundColor || 'rgba(0, 0, 0, 0.05)',
- '--preview-item-hover-color': styles.itemHoverTextColor || 'inherit',
- '--preview-multi-indent': styles.multiLevelIndent || '1.25rem',
- };
- }, [styles]);
-
- return (
-