diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..f94f794 --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,117 @@ +# Priority Plus Navigation - Claude Context + +## Project Overview + +A WordPress block plugin that extends the core Navigation block with the "Priority Plus" responsive pattern. Navigation items that don't fit in available space automatically move to a "More" dropdown menu. + +## Architecture + +### Block Variation Approach +- Extends `core/navigation` as a block variation (not a wrapper block) +- Registered in `src/variation/block.js` with name `priority-plus-navigation` +- Identified by className `is-style-priority-plus-navigation` +- Custom attributes prefixed with `priorityNav*` + +### Key Files + +**Editor (Block Extension)** +- `src/variation/block.js` - Registers block variation and extends core/navigation attributes +- `src/variation/controls.js` - Adds InspectorControls via `editor.BlockEdit` filter +- `src/variation/constants.js` - Shared defaults (DEFAULT_DROPDOWN_STYLES) + +**Modal & Components** +- `src/variation/components/dropdown-customizer-modal.js` - Main modal component for dropdown styling +- `src/variation/components/dropdown-preview.js` - Live preview inside modal +- `src/variation/components/panels/color-panel.js` - PanelColorSettings for dropdown colors +- `src/variation/components/panels/menu-styles-panel.js` - ToolsPanel for border, radius, shadow +- `src/variation/components/panels/menu-spacing-panel.js` - ToolsPanel for item spacing and indent + +**Styles** +- `src/variation/components/modal.scss` - Modal layout styles +- `src/variation/components/dropdown-preview.scss` - Preview component styles +- `src/styles/style.scss` - Frontend dropdown styles +- `src/styles/editor.scss` - Editor-specific styles + +**Frontend** +- `src/core/PriorityNav.js` - Main frontend class handling overflow detection +- `src/layout/width-calculator.js` - Width calculation algorithm +- `src/dom/dom-builder.js` - Builds dropdown menu dynamically +- `src/dom/dom-extractor.js` - Extracts nav item data +- `src/events/accordion-handler.js` - Handles accordion submenus +- `src/events/event-handlers.js` - Click/keyboard event handlers + +## Modal Structure (Dropdown Customizer) + +Triggered from ToolsPanel in controls.js via "Customize Dropdown" button. + +``` +DropdownCustomizerModal +├── ColorPanel - Background, hover background, hover text colors +├── MenuStylesPanel - Border (BorderBoxControl), border radius, box shadow +├── MenuSpacingPanel - Item spacing (BoxControl/SpacingSizesControl), multi-level indent +└── DropdownPreview - Live preview with actual frontend classes +``` + +**State Flow:** +1. `controls.js` manages `isDropdownCustomizerOpen` state +2. Modal reads `attributes.priorityNavDropdownStyles` merged with DEFAULT_DROPDOWN_STYLES +3. Updates via `updateStyle(key, value)` helper → `setAttributes({ priorityNavDropdownStyles: {...} })` +4. Preview updates instantly using CSS custom properties + +## Custom Attributes (on core/navigation) + +```javascript +priorityNavEnabled: boolean // Whether Priority+ is active +priorityNavMoreLabel: string // "More" button text +priorityNavMoreBackgroundColor: string +priorityNavMoreBackgroundColorHover: string +priorityNavMoreTextColor: string +priorityNavMoreTextColorHover: string +priorityNavMorePadding: object // {top, right, bottom, left} +priorityNavDropdownStyles: object // Full dropdown styling object +priorityNavTypographyFontFamily: string // Copied from block for preview +priorityNavTypographyFontSize: string +priorityNavTypographyFontWeight: string +priorityNavTypographyFontStyle: string +``` + +## DEFAULT_DROPDOWN_STYLES + +```javascript +{ + backgroundColor: '#ffffff', + borderColor: '#dddddd', + borderWidth: '1px', + borderRadius: '4px', + boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)', + itemSpacing: { top: '0.75rem', right: '1rem', bottom: '0.75rem', left: '1rem' }, + itemHoverBackgroundColor: 'rgba(0, 0, 0, 0.05)', + itemHoverTextColor: 'inherit', + multiLevelIndent: '1.25rem', +} +``` + +## WordPress Components Used + +- `Modal`, `Button`, `TextControl`, `BoxControl` from `@wordpress/components` +- `ToolsPanel`, `ToolsPanelItem` (experimental) +- `BorderBoxControl`, `UnitControl` (experimental) +- `SpacingSizesControl` (experimental) from `@wordpress/block-editor` +- `PanelColorSettings`, `InspectorControls`, `useSetting` from `@wordpress/block-editor` + +## Build Commands + +```bash +npm run start # Development with hot reload +npm run build # Production build +npm run lint:js # Lint JavaScript +npm run lint:css # Lint CSS/SCSS +``` + +## Notes + +- Modal uses two-column grid layout (controls left, preview right) +- Preview uses exact same CSS classes as frontend for accuracy +- Preset values (var:preset|spacing|30) are converted to CSS custom properties +- BorderBoxControl in MenuStylesPanel handles both color and width updates atomically +- Typography settings are mirrored from navigation block for preview accuracy diff --git a/NEW-PLAN.md b/NEW-PLAN.md new file mode 100644 index 0000000..2ed24fd --- /dev/null +++ b/NEW-PLAN.md @@ -0,0 +1,882 @@ +# Dropdown Styles Migration - Implementation Plan + +## Overview + +Migrate dropdown styling from theme.json to block attributes with a visual customizer interface. This provides per-block customization and better UX for non-technical users. + +## Goals + +1. Remove theme.json dependency entirely +2. Add visual dropdown customizer with live preview +3. Store styles as block attributes (per-block customization) +4. Maintain existing default values for consistency +5. Use WordPress native components for better UX + +## Design Decisions + +###  Confirmed Approach + +- **Storage**: Block attributes (`priorityNavDropdownStyles`) +- **UI Pattern**: Modal with two-column layout (controls + preview) +- **Properties**: All 9 existing dropdown properties +- **Defaults**: Same as current theme.json/SCSS defaults +- **Theme.json**: Remove entirely (unreleased product, no migration needed) +- **PHP Rendering**: Extend existing `inject_priority_attributes()` method + +### Key Benefits + +- Per-block customization (header vs footer can differ) +- Better UX than editing theme.json +- Portable - styles travel with block +- Version controlled in post revisions +- Consistent with existing More button pattern + +## Implementation Phases + +### Phase 1: Backend Foundation (Attributes + PHP Rendering) + +**Goal**: Set up block attributes and CSS generation without UI + +#### 1.1 Add Block Attribute + +**File**: `src/variation/block.js` + +Add new attribute to the `registerBlockVariation` and `addFilter` sections: + +```javascript +// In registerBlockVariation (line 21) +attributes: { + className: 'is-style-priority-plus-navigation', + overlayMenu: 'never', + priorityNavEnabled: true, + priorityNavMoreLabel: 'More', + priorityNavMoreBackgroundColor: undefined, + priorityNavMoreBackgroundColorHover: undefined, + priorityNavMoreTextColor: undefined, + priorityNavMoreTextColorHover: undefined, + + // NEW: Dropdown styles + priorityNavDropdownStyles: { + backgroundColor: '#ffffff', + borderColor: '#dddddd', + borderWidth: '1px', + borderRadius: '4px', + boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)', + itemSpacing: '0.75rem 1.25rem', + itemHoverBackgroundColor: 'rgba(0, 0, 0, 0.05)', + itemHoverTextColor: 'inherit', + multiLevelIndent: '1.25rem', + }, +}, + +// In addFilter - blocks.registerBlockType (line 41) +attributes: { + ...settings.attributes, + priorityNavEnabled: { type: 'boolean', default: false }, + priorityNavMoreLabel: { type: 'string', default: 'More' }, + // ... existing attributes ... + + // NEW: Dropdown styles attribute + priorityNavDropdownStyles: { + type: 'object', + default: { + backgroundColor: '#ffffff', + borderColor: '#dddddd', + borderWidth: '1px', + borderRadius: '4px', + boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)', + itemSpacing: '0.75rem 1.25rem', + itemHoverBackgroundColor: 'rgba(0, 0, 0, 0.05)', + itemHoverTextColor: 'inherit', + multiLevelIndent: '1.25rem', + }, + }, +}, +``` + +#### 1.2 PHP: Extend render_block Method + +**File**: `classes/class-enqueues.php` + +Modify the `render_block()` method to extract dropdown styles: + +```php +public function render_block( string $block_content, array $block ): string { + // ... existing code ... + + // After line 152, add: + $dropdown_styles = $this->get_priority_attr( $block, 'priorityNavDropdownStyles', array() ); + + // Pass to injection method (update line 155): + return $this->inject_priority_attributes( + $block_content, + $more_label, + $more_icon, + $more_background_color, + $more_background_color_hover, + $more_text_color, + $more_text_color_hover, + $more_padding, + $overlay_menu, + $dropdown_styles // NEW parameter + ); +} +``` + +#### 1.3 PHP: Add Dropdown Styles to inject_priority_attributes + +**File**: `classes/class-enqueues.php` + +Update method signature and add dropdown CSS custom properties: + +```php +private function inject_priority_attributes( + string $block_content, + string $more_label, + string $more_icon, + string $more_background_color = '', + string $more_background_color_hover = '', + string $more_text_color = '', + string $more_text_color_hover = '', + array $more_padding = array(), + string $overlay_menu = 'never', + array $dropdown_styles = array() // NEW parameter +): string { + // ... existing code ... + + // After the More button custom properties (around line 369), add: + + // Add dropdown style CSS custom properties + if ( ! empty( $dropdown_styles ) ) { + $property_map = array( + 'backgroundColor' => '--wp--custom--priority-plus-navigation--dropdown--background-color', + 'borderColor' => '--wp--custom--priority-plus-navigation--dropdown--border-color', + 'borderWidth' => '--wp--custom--priority-plus-navigation--dropdown--border-width', + 'borderRadius' => '--wp--custom--priority-plus-navigation--dropdown--border-radius', + 'boxShadow' => '--wp--custom--priority-plus-navigation--dropdown--box-shadow', + 'itemSpacing' => '--wp--custom--priority-plus-navigation--dropdown--item-spacing', + 'itemHoverBackgroundColor' => '--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color', + 'itemHoverTextColor' => '--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color', + 'multiLevelIndent' => '--wp--custom--priority-plus-navigation--dropdown--multi-level-indent', + ); + + foreach ( $property_map as $attr_key => $css_var_name ) { + if ( isset( $dropdown_styles[ $attr_key ] ) && '' !== $dropdown_styles[ $attr_key ] ) { + $style_parts[] = sprintf( + '%s: %s', + $css_var_name, + esc_attr( $dropdown_styles[ $attr_key ] ) + ); + } + } + } + + // ... rest of existing code ... +} +``` + +**Testing Phase 1:** +- Manually set `priorityNavDropdownStyles` attribute in browser console +- Verify CSS custom properties are injected into nav wrapper +- Verify styles override :root defaults from _variables.scss +- Check that frontend dropdown appearance changes + +--- + +### Phase 2: Modal UI Structure + +**Goal**: Create modal that opens/closes with basic two-column layout + +#### 2.1 Add "Customize Dropdown" Button to Inspector + +**File**: `src/variation/controls.js` + +Add state and button after existing ToolsPanels (around line 269): + +```javascript +import { useState } from '@wordpress/element'; + +// Inside withPriorityNavControls component, after line 103: +const [isDropdownCustomizerOpen, setIsDropdownCustomizerOpen] = useState(false); + +// Add new ToolsPanel after the "Priority Plus Button" panel (after line 269): + { + setAttributes({ + priorityNavDropdownStyles: { + backgroundColor: '#ffffff', + borderColor: '#dddddd', + borderWidth: '1px', + borderRadius: '4px', + boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)', + itemSpacing: '0.75rem 1.25rem', + itemHoverBackgroundColor: 'rgba(0, 0, 0, 0.05)', + itemHoverTextColor: 'inherit', + multiLevelIndent: '1.25rem', + }, + }); + }} +> + { + const { priorityNavDropdownStyles } = attributes; + return !!priorityNavDropdownStyles && Object.keys(priorityNavDropdownStyles).length > 0; + }} + label={__('Customize Dropdown', 'priority-plus-navigation')} + onDeselect={() => + setAttributes({ + priorityNavDropdownStyles: undefined, + }) + } + isShownByDefault + > + + + + +{/* Render modal conditionally */} +{isDropdownCustomizerOpen && ( + setIsDropdownCustomizerOpen(false)} + /> +)} +``` + +#### 2.2 Create Modal Component File + +**File**: `src/variation/components/dropdown-customizer-modal.js` (NEW) + +```javascript +/** + * WordPress dependencies + */ +import { Modal, Button } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import './dropdown-customizer-modal.scss'; + +export function DropdownCustomizerModal({ attributes, setAttributes, onClose }) { + const { priorityNavDropdownStyles = {} } = attributes; + + return ( + +
+
+

{__('Controls will go here', 'priority-plus-navigation')}

+
+ +
+

{__('Preview will go here', 'priority-plus-navigation')}

+
+
+ +
+ +
+ + ); +} +``` + +#### 2.3 Create Modal Styles + +**File**: `src/variation/components/dropdown-customizer-modal.scss` (NEW) + +```scss +.priority-plus-dropdown-customizer { + // Override default modal content padding + .components-modal__content { + padding: 0; + display: flex; + flex-direction: column; + min-height: 600px; + } + + .dropdown-customizer-layout { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2rem; + padding: 2rem; + flex: 1; + overflow: hidden; + } + + .dropdown-customizer-controls { + overflow-y: auto; + padding-right: 1rem; + + // Spacing between ToolsPanels + .components-tools-panel { + margin-bottom: 1.5rem; + } + } + + .dropdown-customizer-preview { + display: flex; + align-items: center; + justify-content: center; + background: #f5f5f5; + border-radius: 4px; + padding: 2rem; + position: sticky; + top: 0; + overflow-y: auto; + } + + .dropdown-customizer-footer { + padding: 1rem 2rem; + border-top: 1px solid #ddd; + display: flex; + justify-content: space-between; + align-items: center; + background: #fff; + } + + // Responsive: stack on smaller screens + @media (max-width: 960px) { + .dropdown-customizer-layout { + grid-template-columns: 1fr; + } + + .dropdown-customizer-preview { + position: static; + min-height: 300px; + } + } +} +``` + +#### 2.4 Import Modal in controls.js + +**File**: `src/variation/controls.js` + +Add import at the top: + +```javascript +import { DropdownCustomizerModal } from './components/dropdown-customizer-modal'; +``` + +**Testing Phase 2:** +- Button appears in Inspector under "Dropdown Styles" panel +- Modal opens/closes correctly +- Two-column layout displays properly +- Modal is responsive on smaller screens +- ESC key closes modal + +--- + +### Phase 3: Control Components + +**Goal**: Add all 9 property controls with proper input types + +#### 3.1 Import Required Components + +**File**: `src/variation/components/dropdown-customizer-modal.js` + +Update imports: + +```javascript +import { + Modal, + Button, + ColorPicker, + TextControl, + __experimentalUnitControl as UnitControl, + __experimentalBoxControl as BoxControl, + __experimentalToolsPanel as ToolsPanel, + __experimentalToolsPanelItem as ToolsPanelItem, +} from '@wordpress/components'; +``` + +#### 3.2 Add Helper Functions + +**File**: `src/variation/components/dropdown-customizer-modal.js` + +Add these helper functions before the component: + +```javascript +/** + * Parse spacing value string to BoxControl format + * e.g., "0.75rem 1.25rem" -> { top: '0.75rem', right: '1.25rem', bottom: '0.75rem', left: '1.25rem' } + */ +function parseSpacingValue(value) { + if (!value || typeof value !== 'string') { + return { top: '0', right: '0', bottom: '0', left: '0' }; + } + + const parts = value.trim().split(/\s+/); + + if (parts.length === 1) { + return { top: parts[0], right: parts[0], bottom: parts[0], left: parts[0] }; + } else if (parts.length === 2) { + return { top: parts[0], right: parts[1], bottom: parts[0], left: parts[1] }; + } else if (parts.length === 3) { + return { top: parts[0], right: parts[1], bottom: parts[2], left: parts[1] }; + } else if (parts.length === 4) { + return { top: parts[0], right: parts[1], bottom: parts[2], left: parts[3] }; + } + + return { top: '0', right: '0', bottom: '0', left: '0' }; +} + +/** + * Format BoxControl value to spacing string + * e.g., { top: '0.75rem', right: '1.25rem', bottom: '0.75rem', left: '1.25rem' } -> "0.75rem 1.25rem" + */ +function formatSpacingValue(values) { + if (!values) { + return ''; + } + + const { top = '0', right = '0', bottom = '0', left = '0' } = values; + + // All same + if (top === right && right === bottom && bottom === left) { + return top; + } + + // Top/bottom same, left/right same + if (top === bottom && right === left) { + return `${top} ${right}`; + } + + // All different + return `${top} ${right} ${bottom} ${left}`; +} +``` + +#### 3.3 Add Update Helper Methods + +**File**: `src/variation/components/dropdown-customizer-modal.js` + +Inside the component: + +```javascript +export function DropdownCustomizerModal({ attributes, setAttributes, onClose }) { + const { priorityNavDropdownStyles = {} } = attributes; + + // Helper to update a single style property + const updateStyle = (key, value) => { + setAttributes({ + priorityNavDropdownStyles: { + ...priorityNavDropdownStyles, + [key]: value, + }, + }); + }; + + // Helper to check if a property has a value + const hasValue = (key) => { + return !!priorityNavDropdownStyles[key]; + }; + + // Helper to reset a property to default + const resetToDefault = (key, defaultValue) => { + updateStyle(key, defaultValue); + }; + + // ... rest of component +} +``` + +#### 3.4 Implement All Controls + +**File**: `src/variation/components/dropdown-customizer-modal.js` + +Replace the controls placeholder with full implementation. See the full code in the continuation of this plan (this section is too long to include inline - refer to the detailed code examples in the original PLAN.md Phase 3 section for all 9 controls). + +Key controls to implement: +1. Background Color (ColorPicker) +2. Border Color (ColorPicker) +3. Border Width (UnitControl) +4. Border Radius (UnitControl) +5. Box Shadow (TextControl) +6. Item Spacing (BoxControl) +7. Item Hover Background Color (ColorPicker) +8. Item Hover Text Color (ColorPicker) +9. Multi-level Indent (UnitControl) + +#### 3.5 Add Control Styles + +**File**: `src/variation/components/dropdown-customizer-modal.scss` + +Add styles for controls: + +```scss +.dropdown-customizer-control { + margin-bottom: 1rem; + + label { + display: block; + margin-bottom: 0.5rem; + font-weight: 500; + font-size: 11px; + text-transform: uppercase; + color: #1e1e1e; + } + + .components-color-picker { + margin-top: 0.5rem; + } +} + +.components-tools-panel-item { + margin-bottom: 0; +} +``` + +**Testing Phase 3:** +- All 9 controls render in modal +- Changing values updates `priorityNavDropdownStyles` attribute +- Color pickers support alpha channel +- UnitControl shows proper unit options +- BoxControl allows individual side spacing +- ToolsPanelItem reset (X button) works +- Values persist when closing/reopening modal + +--- + +### Phase 4: Live Preview Component + +**Goal**: Create visual preview that updates in real-time + +#### 4.1 Create Preview Component + +**File**: `src/variation/components/dropdown-preview.js` (NEW) + +```javascript +/** + * WordPress dependencies + */ +import { useMemo } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import './dropdown-preview.scss'; + +export function DropdownPreview({ styles }) { + // Compute preview CSS custom properties from 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 ( +
+
+ Preview +
+
+
+ Home +
+
+ About Us +
+
+ Services + ¼ +
+
+
+ Web Design +
+
+ Development + ¼ +
+
+
+ WordPress +
+
+ React +
+
+
+ Consulting +
+
+
+ Portfolio +
+
+ Contact +
+
+
+ ); +} +``` + +#### 4.2 Create Preview Styles + +**File**: `src/variation/components/dropdown-preview.scss` (NEW) + +```scss +.dropdown-preview-wrapper { + width: 100%; + max-width: 320px; +} + +.dropdown-preview-label { + font-size: 11px; + font-weight: 600; + text-transform: uppercase; + color: #757575; + margin-bottom: 1rem; + letter-spacing: 0.5px; +} + +.dropdown-preview-menu { + background: var(--preview-bg); + border-width: var(--preview-border-width); + border-style: solid; + border-color: var(--preview-border-color); + border-radius: var(--preview-border-radius); + box-shadow: var(--preview-box-shadow); + list-style: none; + margin: 0; + padding: 0; + overflow: hidden; +} + +.dropdown-preview-item { + padding: var(--preview-item-spacing); + cursor: pointer; + display: flex; + justify-content: space-between; + align-items: center; + transition: background 0.2s ease, color 0.2s ease; + border-top: 1px solid rgba(0, 0, 0, 0.05); + + &:first-child { + border-top: none; + } + + &.dropdown-preview-item-hover { + background: var(--preview-item-hover-bg); + color: var(--preview-item-hover-color); + } + + &.dropdown-preview-item-nested { + padding-left: calc(var(--preview-multi-indent) + 1rem); + } + + &.dropdown-preview-item-nested-2 { + padding-left: calc((var(--preview-multi-indent) * 2) + 1rem); + } + + // Hover effect for non-hover items + &:not(.dropdown-preview-item-hover):hover { + background: var(--preview-item-hover-bg); + color: var(--preview-item-hover-color); + } +} + +.dropdown-preview-arrow { + font-size: 0.7em; + opacity: 0.6; + margin-left: 0.5rem; +} + +.dropdown-preview-submenu { + background: transparent; +} +``` + +#### 4.3 Import and Use Preview in Modal + +**File**: `src/variation/components/dropdown-customizer-modal.js` + +Add import: + +```javascript +import { DropdownPreview } from './dropdown-preview'; +``` + +Replace preview placeholder: + +```javascript +
+ +
+``` + +**Testing Phase 4:** +- Preview renders in right column +- Preview updates in real-time as controls change +- Preview accurately reflects all 9 style properties +- Nested navigation items show proper indentation +- Hover state is visually indicated +- Preview matches actual dropdown appearance on frontend + +--- + +### Phase 5: Polish & UX Enhancements + +**Goal**: Add helpful features and improve usability + +#### 5.1 Add Reset to Defaults Button + +**File**: `src/variation/components/dropdown-customizer-modal.js` + +Update footer section: + +```javascript +
+ + + +
+``` + +#### 5.2 Add Help Text to Controls + +Add help prop to controls that need clarification: + +```javascript +// Example: + updateStyle('borderWidth', value)} + help={__('Thickness of the dropdown border', 'priority-plus-navigation')} + units={[...]} +/> +``` + +**Testing Phase 5:** +- "Reset to Defaults" button works +- Help text is clear and helpful +- Modal is keyboard accessible +- All controls have proper labels + +--- + +### Phase 6: Theme.json Removal & Documentation + +**Goal**: Clean up theme.json support and update documentation + +#### 6.1 Remove :root CSS Variables + +**File**: `src/styles/_variables.scss` + +Remove lines 7-17 (the dropdown CSS custom properties) entirely: + +```scss +// CSS custom properties for Priority Plus Navigation + +// More button styles (controlled via block attributes, not theme.json) +.is-style-priority-plus-navigation { + --priority-plus-navigation--background: transparent; + // ... rest stays ... +} +``` + +#### 6.2 Update Documentation + +**Files to update:** +- `docs/styling.md` - Replace with new documentation (see detailed version in plan) +- `README.md` - Update Configuration section to mention Dropdown Customizer + +**Testing Phase 6:** +- Build plugin and verify :root variables are removed +- Check that blocks work with default styles +- Documentation is accurate +- No console or PHP errors + +--- + +## File Structure Summary + +``` +priority-plus-navigation/ + src/ +  variation/ +   block.js (modified) +   controls.js (modified) +   components/ +   dropdown-customizer-modal.js (NEW) +   dropdown-customizer-modal.scss (NEW) +   dropdown-preview.js (NEW) +   dropdown-preview.scss (NEW) +  styles/ +  _variables.scss (modified) + classes/ +  class-enqueues.php (modified) + docs/ +  styling.md (modified) + README.md (modified) +``` + +## Success Criteria + +- [ ] Users can customize all 9 dropdown properties without code +- [ ] Live preview accurately represents final appearance +- [ ] Modal UX feels polished and professional +- [ ] Performance is smooth (no lag) +- [ ] Code is maintainable and well-documented +- [ ] Fully accessible (keyboard and screen reader) +- [ ] Theme.json support fully removed +- [ ] Documentation complete and clear + +## Future Enhancements (Post-MVP) + +1. Preset style templates +2. Copy/paste styles between blocks +3. Visual box-shadow builder +4. Import/export styles as JSON +5. Block style variations with pre-configured styles diff --git a/PLAN.md b/PLAN.md new file mode 100644 index 0000000..e435d39 --- /dev/null +++ b/PLAN.md @@ -0,0 +1,846 @@ +# Dropdown Style Customizer - Implementation Plan + +## Overview + +Add a visual dropdown style customizer to the Priority Plus Navigation block, allowing users to customize dropdown appearance through a modal interface with live preview. This will eventually replace the theme.json approach with a more user-friendly, per-block customization system. + +## Goals + +1. **Visual Customization** - Provide intuitive UI for styling the dropdown menu +2. **Live Preview** - Show real-time feedback as users adjust settings +3. **Per-Block Control** - Each Priority+ Navigation block can have unique dropdown styles +4. **Better UX** - Easier than editing theme.json for non-technical users +5. **Foundation for Future** - Sets up infrastructure for preset styles and block variations + +## Design Decisions + +### ✅ Confirmed Approach + +- **Storage**: Block attributes (not global settings) +- **UI Pattern**: Modal (not Popover) +- **Properties**: All 9 existing dropdown properties +- **Defaults**: Pre-populate with plugin defaults on first use +- **theme.json**: Plan to deprecate (no fallback support needed - unreleased product) + +### Why Block Attributes? + +- Matches WordPress block patterns +- Allows per-block customization (header vs footer nav can differ) +- Portable - styles travel with the block +- Version controlled in post revisions +- Future-proof for preset styles and variations + +### Why Modal? + +- Two-column layout needs space (controls + preview) +- Better for 9+ properties with labels/help text +- Feels more like a dedicated "design tool" +- WordPress `Modal` component is well-tested + +## Implementation Phases + +### Phase 1: Foundation & Data Structure + +**Goal**: Set up block attributes and CSS generation logic + +#### 1.1 Add Block Attribute + +**File**: `src/variation/block.js` + +Add new attribute to store dropdown styles: + +```javascript +attributes: { + // ... existing attributes ... + + dropdownStyles: { + type: 'object', + default: { + backgroundColor: '#ffffff', + borderColor: '#dddddd', + borderWidth: '1px', + borderRadius: '4px', + boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)', + itemSpacing: '0.75rem 1.25rem', + itemHoverBackgroundColor: 'rgba(0, 0, 0, 0.05)', + itemHoverTextColor: 'inherit', + multiLevelIndent: '1.25rem' + } + } +} +``` + +#### 1.2 Generate CSS Custom Properties + +**File**: `classes/class-enqueues.php` (or new file `classes/class-dropdown-styles.php`) + +Create function to convert block attributes to inline CSS custom properties: + +```php +public function generate_dropdown_styles( $attributes ) { + if ( empty( $attributes['dropdownStyles'] ) ) { + return ''; + } + + $styles = $attributes['dropdownStyles']; + $css_vars = ''; + + // Map attribute keys to CSS custom property names + $property_map = [ + 'backgroundColor' => '--wp--custom--priority-plus-navigation--dropdown--background-color', + 'borderColor' => '--wp--custom--priority-plus-navigation--dropdown--border-color', + 'borderWidth' => '--wp--custom--priority-plus-navigation--dropdown--border-width', + 'borderRadius' => '--wp--custom--priority-plus-navigation--dropdown--border-radius', + 'boxShadow' => '--wp--custom--priority-plus-navigation--dropdown--box-shadow', + 'itemSpacing' => '--wp--custom--priority-plus-navigation--dropdown--item-spacing', + 'itemHoverBackgroundColor' => '--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color', + 'itemHoverTextColor' => '--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color', + 'multiLevelIndent' => '--wp--custom--priority-plus-navigation--dropdown--multi-level-indent', + ]; + + foreach ( $property_map as $attr_key => $css_var ) { + if ( isset( $styles[ $attr_key ] ) ) { + $css_vars .= "{$css_var}: {$styles[$attr_key]};"; + } + } + + return $css_vars; +} +``` + +#### 1.3 Apply Styles to Block Wrapper + +**File**: `classes/class-enqueues.php` + +Modify `render_block` filter to inject inline styles: + +```php +public function render_block( $block_content, $block ) { + if ( 'core/navigation' !== $block['blockName'] ) { + return $block_content; + } + + // Check if this is Priority+ variation + if ( ! isset( $block['attrs']['className'] ) || + strpos( $block['attrs']['className'], 'is-style-priority-plus-navigation' ) === false ) { + return $block_content; + } + + // Generate dropdown styles + $dropdown_styles = $this->generate_dropdown_styles( $block['attrs'] ); + + if ( ! empty( $dropdown_styles ) ) { + // Inject inline styles into block wrapper + $style_attr = 'style="' . esc_attr( $dropdown_styles ) . '"'; + $block_content = preg_replace( + '/class="([^"]*is-style-priority-plus-navigation[^"]*)"/', + 'class="$1" ' . $style_attr, + $block_content, + 1 + ); + } + + return $block_content; +} +``` + +**Testing**: At this point, manually setting `dropdownStyles` attribute should apply styles. + +--- + +### Phase 2: Modal UI - Basic Structure + +**Goal**: Create modal that opens/closes with basic layout + +#### 2.1 Add "Customize Dropdown" Button + +**File**: `src/variation/controls.js` + +Add button to InspectorControls: + +```javascript +import { ToolsPanel, ToolsPanelItem, Button } from '@wordpress/components'; +import { useState } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; + +function PriorityNavControls( { attributes, setAttributes } ) { + const [isCustomizerOpen, setIsCustomizerOpen] = useState(false); + + return ( + <> + + {/* ... existing More Button controls ... */} + + + + + + + {isCustomizerOpen && ( + setIsCustomizerOpen(false)} + /> + )} + + ); +} +``` + +#### 2.2 Create Modal Component + +**File**: `src/variation/components/dropdown-customizer-modal.js` (new file) + +```javascript +import { Modal } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import './dropdown-customizer-modal.scss'; + +export function DropdownCustomizerModal({ attributes, setAttributes, onClose }) { + const { dropdownStyles = {} } = attributes; + + return ( + +
+
+ {/* Controls will go here */} +

Controls placeholder

+
+ +
+ {/* Preview will go here */} +

Preview placeholder

+
+
+ +
+ +
+ + ); +} +``` + +#### 2.3 Modal Layout Styles + +**File**: `src/variation/components/dropdown-customizer-modal.scss` (new file) + +```scss +.priority-plus-dropdown-customizer { + .components-modal__content { + padding: 0; + display: flex; + flex-direction: column; + } + + .dropdown-customizer-layout { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2rem; + padding: 2rem; + flex: 1; + overflow: hidden; + } + + .dropdown-customizer-controls { + overflow-y: auto; + padding-right: 1rem; + } + + .dropdown-customizer-preview { + display: flex; + align-items: center; + justify-content: center; + background: #f0f0f0; + border-radius: 4px; + padding: 2rem; + position: sticky; + top: 0; + } + + .dropdown-customizer-footer { + padding: 1rem 2rem; + border-top: 1px solid #ddd; + display: flex; + justify-content: flex-end; + } +} +``` + +**Testing**: Modal should open/close, show two-column layout. + +--- + +### Phase 3: Control Components + +**Goal**: Add all 9 property controls with proper inputs + +#### 3.1 Control Component Structure + +Each property gets a `ToolsPanelItem` with appropriate control type: + +- **Color properties**: `ColorPalette` or `ColorPicker` (with alpha support) +- **Dimension properties**: `UnitControl` +- **Shadow property**: `TextControl` (complex - could enhance later) + +#### 3.2 Implement All Controls + +**File**: `src/variation/components/dropdown-customizer-modal.js` + +```javascript +import { + ColorPalette, + UnitControl, + TextControl, + __experimentalToolsPanel as ToolsPanel, + __experimentalToolsPanelItem as ToolsPanelItem, +} from '@wordpress/components'; + +export function DropdownCustomizerModal({ attributes, setAttributes, onClose }) { + const { dropdownStyles = {} } = attributes; + + const updateStyle = (key, value) => { + setAttributes({ + dropdownStyles: { + ...dropdownStyles, + [key]: value, + }, + }); + }; + + return ( + +
+
+ + + {/* 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 ( +
+
+
Home
+
About
+
+ Services + â–¼ +
+
+
+ Design +
+
+ Development + â–¼ +
+
+
+ WordPress +
+
+ React +
+
+
+
Contact
+
+
+ ); +} +``` + +#### 4.2 Preview Styles + +**File**: `src/variation/components/dropdown-preview.scss` (new file) + +```scss +.dropdown-preview-wrapper { + width: 100%; + max-width: 300px; +} + +.dropdown-preview-menu { + background: var(--preview-bg); + border-width: var(--preview-border-width); + border-style: solid; + border-color: var(--preview-border-color); + border-radius: var(--preview-border-radius); + box-shadow: var(--preview-box-shadow); + list-style: none; + margin: 0; + padding: 0; +} + +.dropdown-preview-item { + padding: var(--preview-item-spacing); + cursor: pointer; + display: flex; + justify-content: space-between; + align-items: center; + transition: background 0.2s ease, color 0.2s ease; + + &.dropdown-preview-item-hover { + background: var(--preview-item-hover-bg); + color: var(--preview-item-hover-color); + } + + &.dropdown-preview-item-nested { + padding-left: calc(1rem + var(--preview-multi-indent)); + } + + &.dropdown-preview-item-nested-2 { + padding-left: calc(1rem + (var(--preview-multi-indent) * 2)); + } +} + +.dropdown-preview-arrow { + font-size: 0.7em; + opacity: 0.6; +} + +.dropdown-preview-submenu { + background: transparent; +} +``` + +#### 4.3 Integrate Preview into Modal + +**File**: `src/variation/components/dropdown-customizer-modal.js` + +```javascript +import { DropdownPreview } from './dropdown-preview'; + +export function DropdownCustomizerModal({ attributes, setAttributes, onClose }) { + // ... + + return ( + +
+
+ {/* Controls */} +
+ +
+ +
+
+ {/* Footer */} + + ); +} +``` + +**Testing**: Preview should update live as controls change. + +--- + +### Phase 5: Polish & UX Enhancements + +**Goal**: Improve usability and add helpful features + +#### 5.1 Reset to Defaults Button + +Add button to footer that resets all styles to plugin defaults: + +```javascript +
+ + + +
+``` + +#### 5.2 Validation & Sanitization + +Add validation for dimension values: + +```javascript +const updateStyle = (key, value) => { + // Sanitize dimension values + if (['borderWidth', 'borderRadius', 'multiLevelIndent'].includes(key)) { + // Ensure value has unit (default to px if numeric) + if (value && /^\d+$/.test(value)) { + value = value + 'px'; + } + } + + setAttributes({ + dropdownStyles: { + ...dropdownStyles, + [key]: value, + }, + }); +}; +``` + +#### 5.3 Improved Color Controls + +Use `ColorPicker` instead of `ColorPalette` for more control: + +```javascript +import { ColorPicker } from '@wordpress/components'; + + updateStyle('backgroundColor', value)} + enableAlpha +/> +``` + +#### 5.4 Help Text & Documentation + +Add helpful descriptions to each control explaining what it does. + +--- + +### Phase 6: Deprecate theme.json (Future Release) + +**Goal**: Clean up theme.json support after customizer ships + +#### 6.1 Update Documentation + +- Update `docs/styling.md` to mark theme.json as deprecated +- Add note that customizer is the preferred method +- Keep theme.json docs for reference but add deprecation notice + +#### 6.2 Migration Notice (Optional) + +Add admin notice for users who have theme.json customizations: + +```php +// Check if theme.json has Priority+ settings +// Show dismissible notice suggesting migration to block customizer +``` + +#### 6.3 Remove SCSS Defaults (Optional - Breaking Change) + +After sufficient adoption period, remove `:root` defaults from `_variables.scss` since they'll be in block attributes. + +--- + +## File Structure + +``` +src/variation/ +├── block.js (updated - add dropdownStyles attribute) +├── controls.js (updated - add Customize button & modal trigger) +├── components/ +│ ├── dropdown-customizer-modal.js (new) +│ ├── dropdown-customizer-modal.scss (new) +│ ├── dropdown-preview.js (new) +│ └── dropdown-preview.scss (new) + +classes/ +├── class-enqueues.php (updated - add inline style generation) +└── class-dropdown-styles.php (optional new - style generation helper) +``` + +## Testing Checklist + +### Phase 1 +- [ ] `dropdownStyles` attribute saves to post_content +- [ ] Manually setting attribute applies styles on frontend +- [ ] Inline styles correctly override SCSS defaults + +### Phase 2 +- [ ] "Customize Dropdown" button appears in Inspector +- [ ] Modal opens/closes correctly +- [ ] Two-column layout displays properly +- [ ] Modal is responsive (test small screens) + +### Phase 3 +- [ ] All 9 controls render in modal +- [ ] Changing values updates attribute +- [ ] Color pickers support alpha channel +- [ ] UnitControl shows proper unit options +- [ ] ToolsPanelItem reset works (X button) + +### Phase 4 +- [ ] Preview renders in modal +- [ ] Preview updates in real-time as controls change +- [ ] Preview shows nested navigation correctly +- [ ] Preview matches actual dropdown appearance + +### Phase 5 +- [ ] "Reset to Defaults" clears all customizations +- [ ] Validation prevents invalid dimension values +- [ ] Help text is clear and helpful +- [ ] Modal is keyboard accessible + +### Phase 6 +- [ ] Documentation updated +- [ ] Deprecation notices added where appropriate + +## Performance Considerations + +1. **Use `useMemo` in preview** - Prevent unnecessary re-renders +2. **Debounce rapid changes** - If typing in TextControl causes lag +3. **Lazy load modal** - Only import modal components when needed +4. **Optimize preview HTML** - Keep preview DOM lightweight + +## Accessibility + +- [ ] Modal is keyboard navigable (Tab/Shift+Tab) +- [ ] Esc key closes modal +- [ ] Color controls have proper labels +- [ ] Preview has appropriate ARIA labels +- [ ] Focus returns to trigger button on close + +## Browser Compatibility + +- All features use WordPress components (pre-tested) +- CSS custom properties have excellent support +- Preview uses modern CSS (Grid, custom properties) - acceptable for editor-only feature + +## Future Enhancements (Post-MVP) + +1. **Preset Styles** - Add quick-select presets ("Minimal", "Bold", "Card") +2. **Copy Styles** - Copy dropdown styles from one block to another +3. **Advanced Shadow Builder** - Visual box-shadow builder instead of text input +4. **Spacing Builder** - Visual padding/margin builder for itemSpacing +5. **Import/Export** - Export styles as JSON, import into other blocks +6. **Block Variations** - Register variations with pre-configured dropdown styles + +## Migration from theme.json + +For users currently using theme.json: + +1. **No automatic migration** - Manual only (simpler, less risky) +2. **Documentation** - Provide clear instructions on moving from theme.json to block attributes +3. **Coexistence** - Block attributes take precedence, theme.json acts as fallback until deprecated + +## Success Criteria + +- [ ] Users can customize all 9 dropdown properties without touching code +- [ ] Live preview accurately represents final appearance +- [ ] Modal UX feels polished and professional +- [ ] Performance is smooth (no lag when adjusting controls) +- [ ] Code is maintainable and well-documented +- [ ] Feature is accessible to keyboard and screen reader users + +## Timeline Estimate + +- **Phase 1**: 3-4 hours (attribute + CSS generation) +- **Phase 2**: 2-3 hours (modal structure) +- **Phase 3**: 4-5 hours (all controls) +- **Phase 4**: 3-4 hours (preview component) +- **Phase 5**: 2-3 hours (polish) +- **Phase 6**: 1-2 hours (documentation) + +**Total**: ~15-21 hours + +## Notes + +- This is an unreleased product - no backward compatibility needed +- Block attributes approach aligns with WordPress best practices +- Modal provides better UX than Popover for this use case +- Live preview is critical for good UX +- Plan to deprecate theme.json once customizer ships diff --git a/README.md b/README.md index 2cf7c4e..1c9d4ff 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,8 @@ Priority Plus Navigation is a responsive design pattern that keeps all navigatio - **Core Navigation Variation** - Extends the standard WordPress navigation block as a variation, no need to rebuild your menus - **Automatic Overflow Detection** - Intelligently calculates available space and moves items to dropdown - **Easy Conversion** - Transform any Navigation block to Priority Plus Navigation via block variations -- **Customizable "More" Button** - Choose label text and button styles +- **Customizable Toggle Button** - Choose label text, colors, and padding for the "More" button +- **Customizable Dropdown Menu** - Full control over menu appearance with live preview: colors, borders, shadows, spacing - **Responsive by Design** - Uses ResizeObserver for smooth, performant resizing - **Core Navigation Integration** - Automatically detects and respects "Open submenus on click" setting - **Smart Mobile Detection** - Automatically disables on mobile/hamburger mode to avoid conflicts @@ -78,9 +79,25 @@ The Priority Plus Navigation is available as a variation of the core Navigation ### Block Settings (Inspector Sidebar) -**More Button Label** -- Default: "More" -- Customize the text displayed on the overflow button +When Priority Plus Navigation is active, you'll find these control panels in the block inspector sidebar under the "Styles" tab: + +#### Priority Plus Settings +- **Toggle Button Label**: Customize the text displayed on the "More" button (default: "More") + +#### Toggle Button Colors +- **Text Color**: Color of the button text +- **Text Hover Color**: Color when hovering over the button +- **Background Color**: Background color of the button +- **Background Hover Color**: Background when hovering + +#### Toggle Button Spacing +- **Padding**: Control the internal padding of the toggle button + +#### Menu Styles +- **Customize Menu**: Opens a modal with a live preview where you can customize: + - **Menu Colors**: Background, item hover background, item hover text color + - **Menu Styles**: Border (with per-side control), border radius, box shadow + - **Menu Item Spacing**: Item padding, submenu indent ### Core Navigation Settings @@ -101,31 +118,35 @@ The block supports all standard WordPress block features: - **Spacing**: Margin, Padding - **Colors**: Background, Text -### Theme.json Styling +### Two Ways to Customize Menu Styles -The Priority Plus Navigation dropdown menu can be customized via your theme's `theme.json`. The plugin provides sensible defaults, and you can override any property you want to customize. +#### Option 1: Block Inspector (Recommended) -**Style Examples:** +Use the "Customize Menu" button in the block inspector to open a modal with a live preview. This is the easiest way to customize your dropdown menu and allows per-block customization. + +#### Option 2: Theme.json (Global Defaults) + +For site-wide defaults, customize via your theme's `theme.json`. Block-level customizations will override these defaults. ```json { "version": 3, "settings": { - "custom": { - "priorityPlusNavigation": { - "dropdown": { - "backgroundColor": "#f0f0f0", - "borderColor": "#999999", - "borderWidth": "2px", - "borderRadius": "8px", - "boxShadow": "0 8px 16px rgba(0, 0, 0, 0.2)", - "itemSpacing": "1rem 1.5rem", - "itemHoverBackgroundColor": "rgba(0, 0, 0, 0.08)", - "itemHoverTextColor": "#007cba", - "multiLevelIndent": "3.5rem" + "custom": { + "priorityPlusNavigation": { + "dropdown": { + "backgroundColor": "#f0f0f0", + "borderColor": "#999999", + "borderWidth": "2px", + "borderRadius": "8px", + "boxShadow": "0 8px 16px rgba(0, 0, 0, 0.2)", + "itemSpacing": "1rem 1.5rem", + "itemHoverBackgroundColor": "rgba(0, 0, 0, 0.08)", + "itemHoverTextColor": "#007cba", + "multiLevelIndent": "3.5rem" + } } } - }, } } ``` @@ -257,6 +278,17 @@ The plugin detects when WordPress's overlay/hamburger menu is active by checking ## Changelog +### 0.4.0 - Menu Customization & UI Improvements +- Added dropdown menu customizer modal with live preview +- Full control over menu colors: background, item hover background, item hover text +- Border customization with per-side control (top, right, bottom, left) +- Border radius and box shadow controls +- Menu item padding controls with theme spacing size support +- Submenu indent control for nested navigation +- Toggle button styling: text colors, background colors, hover states, padding +- Renamed attributes for clarity (`priorityPlus*` prefix) +- Improved reset functionality for all style controls + ### 0.3.0 - Overlay Menu Compatibility - Added intelligent overlay menu detection and compatibility - Priority Plus now properly disables when hamburger menu is active (overlayMenu: 'mobile') diff --git a/build/priority-plus-nav-editor-rtl.css b/build/priority-plus-nav-editor-rtl.css index 5e7b9ef..9402b30 100644 --- a/build/priority-plus-nav-editor-rtl.css +++ b/build/priority-plus-nav-editor-rtl.css @@ -1 +1,2 @@ -:root{--wp--custom--priority-plus-navigation--dropdown--background-color:#fff;--wp--custom--priority-plus-navigation--dropdown--border-color:#ddd;--wp--custom--priority-plus-navigation--dropdown--border-width:1px;--wp--custom--priority-plus-navigation--dropdown--border-radius:4px;--wp--custom--priority-plus-navigation--dropdown--box-shadow:0 4px 12px rgba(0,0,0,.15);--wp--custom--priority-plus-navigation--dropdown--item-spacing:0.75rem 1.25rem;--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color:rgba(0,0,0,.05);--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color:inherit;--wp--custom--priority-plus-navigation--dropdown--multi-level-indent:1.25rem}.is-style-priority-plus-navigation{--priority-plus-navigation--background:transparent;--priority-plus-navigation--background-hover:transparent;--priority-plus-navigation--color:inherit;--priority-plus-navigation--color-hover:inherit;--priority-plus-navigation--border-color:transparent;--priority-plus-navigation--border-style:solid;--priority-plus-navigation--border-width:0;--priority-plus-navigation--border-radius:0;--priority-plus-navigation--font-family:inherit;--priority-plus-navigation--font-size:inherit;--priority-plus-navigation--font-weight:inherit;--priority-plus-navigation--padding:0}.editor-styles-wrapper .priority-plus-navigation-editor-wrapper nav{align-items:center;border:2px solid green!important;display:flex;flex-wrap:nowrap;width:100%}.priority-plus-navigation-disable-always-option .components-toggle-group-control-option-base:last-child{cursor:not-allowed;opacity:.4;pointer-events:none;text-decoration:line-through} +.priority-plus-dropdown-customizer .components-modal__header{background-color:#fff;border-bottom:1px solid #ddd;padding:24px 32px 18px;position:sticky;z-index:2000}.priority-plus-dropdown-customizer .components-modal__content{margin-top:0;padding:0}.priority-plus-dropdown-customizer .dropdown-customizer-layout{display:grid;gap:2rem;grid-template-columns:1fr 1fr;padding:2rem}.priority-plus-dropdown-customizer .dropdown-customizer-controls>.components-tools-panel{border:1px solid #ddd}.priority-plus-dropdown-customizer .dropdown-customizer-controls>.components-tools-panel+.components-tools-panel{margin-top:1.5rem}.priority-plus-dropdown-customizer .priority-plus-navigation-dropdown.is-open{margin:0 auto;max-width:280px;position:sticky;top:110px}.priority-plus-dropdown-customizer .dropdown-customizer-footer{align-items:center;background:#f9f9f9;border-top:1px solid #ddd;display:flex;justify-content:space-between;padding:1rem 2rem}@media(max-width:896px){.priority-plus-dropdown-customizer .dropdown-customizer-layout{grid-template-columns:1fr}} +:root{--wp--custom--priority-plus-navigation--dropdown--background-color:#fff;--wp--custom--priority-plus-navigation--dropdown--border-color:#ddd;--wp--custom--priority-plus-navigation--dropdown--border-width:1px;--wp--custom--priority-plus-navigation--dropdown--border-radius:4px;--wp--custom--priority-plus-navigation--dropdown--box-shadow:0 4px 12px rgba(0,0,0,.15);--wp--custom--priority-plus-navigation--dropdown--item-spacing:0.75rem 1rem;--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color:rgba(0,0,0,.05);--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color:inherit;--wp--custom--priority-plus-navigation--dropdown--multi-level-indent:1.25rem}.is-style-priority-plus-navigation{--priority-plus-navigation--background:transparent;--priority-plus-navigation--background-hover:transparent;--priority-plus-navigation--color:inherit;--priority-plus-navigation--color-hover:inherit;--priority-plus-navigation--border-color:transparent;--priority-plus-navigation--border-style:solid;--priority-plus-navigation--border-width:0;--priority-plus-navigation--border-radius:0;--priority-plus-navigation--font-family:inherit;--priority-plus-navigation--font-size:inherit;--priority-plus-navigation--font-weight:inherit;--priority-plus-navigation--font-style:inherit;--priority-plus-navigation--padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown,.priority-plus-navigation-dropdown.is-open{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color)!important;border-bottom:var(--wp--custom--priority-plus-navigation--dropdown--border-bottom,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd));border-right:var(--wp--custom--priority-plus-navigation--dropdown--border-left,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd));border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-left:var(--wp--custom--priority-plus-navigation--dropdown--border-right,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd));border-top:var(--wp--custom--priority-plus-navigation--dropdown--border-top,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd));box-shadow:var(--wp--custom--priority-plus-navigation--dropdown--box-shadow);list-style:none;margin:0;min-width:200px;opacity:0;overflow:hidden;padding:0;position:absolute;left:0;top:100%;transform:translateY(-10px);transition:opacity .2s ease,visibility .2s ease,transform .2s ease;visibility:hidden;z-index:1000}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown.is-open,.priority-plus-navigation-dropdown.is-open.is-open{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li,.priority-plus-navigation-dropdown.is-open li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li .priority-plus-navigation-preview-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a,.priority-plus-navigation-dropdown.is-open li .priority-plus-navigation-preview-link,.priority-plus-navigation-dropdown.is-open li a{color:inherit;display:block;font-style:inherit;font-weight:inherit;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-decoration:none;transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li .priority-plus-navigation-preview-link:hover,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a:hover,.priority-plus-navigation-dropdown.is-open li .priority-plus-navigation-preview-link:hover,.priority-plus-navigation-dropdown.is-open li a:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-wrapper,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow .priority-plus-navigation-accordion-arrow,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-arrow .priority-plus-navigation-accordion-arrow{display:inline-block;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;justify-content:space-between;outline:none;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-align:right;transition:background .2s ease,color .2s ease;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-arrow,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-arrow{margin-right:.5rem;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:focus,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:hover,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full:focus,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:focus-visible,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full:focus-visible{outline:2px solid currentcolor;outline-offset:-2px}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full[aria-expanded=true] .priority-plus-navigation-accordion-arrow,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(-90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content{background:transparent;display:none;list-style:none;margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content[aria-hidden=true],.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content[aria-hidden=true]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content.is-open,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content.is-open{display:block!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>a{padding-right:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent))}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a{padding-right:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)*2)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a{padding-right:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)*3)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a{padding-right:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)*4)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-link{flex:1;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link:hover,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-link:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-arrow{background:transparent;border:none;color:inherit;cursor:pointer;flex-shrink:0;font-family:inherit;font-size:inherit;outline:none;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:focus,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:hover,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-arrow:focus,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-arrow:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:focus-visible,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-arrow:focus-visible{outline:2px solid currentcolor;outline-offset:-2px}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow[aria-expanded=true] .priority-plus-navigation-accordion-arrow,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-arrow[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(-90deg)}.editor-styles-wrapper .priority-plus-navigation-editor-wrapper nav{align-items:center;border:2px solid green!important;display:flex;flex-wrap:nowrap;width:100%}.priority-plus-navigation-disable-always-option .components-toggle-group-control-option-base:last-child{cursor:not-allowed;opacity:.4;pointer-events:none;text-decoration:line-through} diff --git a/build/priority-plus-nav-editor.asset.php b/build/priority-plus-nav-editor.asset.php index c350a4c..5aa7d4e 100644 --- a/build/priority-plus-nav-editor.asset.php +++ b/build/priority-plus-nav-editor.asset.php @@ -1 +1 @@ - array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-primitives'), 'version' => '51a330a400fb321176cf'); + array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-primitives'), 'version' => 'edae5fe7ea1cc8bfb77f'); diff --git a/build/priority-plus-nav-editor.css b/build/priority-plus-nav-editor.css index 5e7b9ef..8de6ec6 100644 --- a/build/priority-plus-nav-editor.css +++ b/build/priority-plus-nav-editor.css @@ -1 +1,2 @@ -:root{--wp--custom--priority-plus-navigation--dropdown--background-color:#fff;--wp--custom--priority-plus-navigation--dropdown--border-color:#ddd;--wp--custom--priority-plus-navigation--dropdown--border-width:1px;--wp--custom--priority-plus-navigation--dropdown--border-radius:4px;--wp--custom--priority-plus-navigation--dropdown--box-shadow:0 4px 12px rgba(0,0,0,.15);--wp--custom--priority-plus-navigation--dropdown--item-spacing:0.75rem 1.25rem;--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color:rgba(0,0,0,.05);--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color:inherit;--wp--custom--priority-plus-navigation--dropdown--multi-level-indent:1.25rem}.is-style-priority-plus-navigation{--priority-plus-navigation--background:transparent;--priority-plus-navigation--background-hover:transparent;--priority-plus-navigation--color:inherit;--priority-plus-navigation--color-hover:inherit;--priority-plus-navigation--border-color:transparent;--priority-plus-navigation--border-style:solid;--priority-plus-navigation--border-width:0;--priority-plus-navigation--border-radius:0;--priority-plus-navigation--font-family:inherit;--priority-plus-navigation--font-size:inherit;--priority-plus-navigation--font-weight:inherit;--priority-plus-navigation--padding:0}.editor-styles-wrapper .priority-plus-navigation-editor-wrapper nav{align-items:center;border:2px solid green!important;display:flex;flex-wrap:nowrap;width:100%}.priority-plus-navigation-disable-always-option .components-toggle-group-control-option-base:last-child{cursor:not-allowed;opacity:.4;pointer-events:none;text-decoration:line-through} +.priority-plus-dropdown-customizer .components-modal__header{background-color:#fff;border-bottom:1px solid #ddd;padding:24px 32px 18px;position:sticky;z-index:2000}.priority-plus-dropdown-customizer .components-modal__content{margin-top:0;padding:0}.priority-plus-dropdown-customizer .dropdown-customizer-layout{display:grid;gap:2rem;grid-template-columns:1fr 1fr;padding:2rem}.priority-plus-dropdown-customizer .dropdown-customizer-controls>.components-tools-panel{border:1px solid #ddd}.priority-plus-dropdown-customizer .dropdown-customizer-controls>.components-tools-panel+.components-tools-panel{margin-top:1.5rem}.priority-plus-dropdown-customizer .priority-plus-navigation-dropdown.is-open{margin:0 auto;max-width:280px;position:sticky;top:110px}.priority-plus-dropdown-customizer .dropdown-customizer-footer{align-items:center;background:#f9f9f9;border-top:1px solid #ddd;display:flex;justify-content:space-between;padding:1rem 2rem}@media(max-width:896px){.priority-plus-dropdown-customizer .dropdown-customizer-layout{grid-template-columns:1fr}} +:root{--wp--custom--priority-plus-navigation--dropdown--background-color:#fff;--wp--custom--priority-plus-navigation--dropdown--border-color:#ddd;--wp--custom--priority-plus-navigation--dropdown--border-width:1px;--wp--custom--priority-plus-navigation--dropdown--border-radius:4px;--wp--custom--priority-plus-navigation--dropdown--box-shadow:0 4px 12px rgba(0,0,0,.15);--wp--custom--priority-plus-navigation--dropdown--item-spacing:0.75rem 1rem;--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color:rgba(0,0,0,.05);--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color:inherit;--wp--custom--priority-plus-navigation--dropdown--multi-level-indent:1.25rem}.is-style-priority-plus-navigation{--priority-plus-navigation--background:transparent;--priority-plus-navigation--background-hover:transparent;--priority-plus-navigation--color:inherit;--priority-plus-navigation--color-hover:inherit;--priority-plus-navigation--border-color:transparent;--priority-plus-navigation--border-style:solid;--priority-plus-navigation--border-width:0;--priority-plus-navigation--border-radius:0;--priority-plus-navigation--font-family:inherit;--priority-plus-navigation--font-size:inherit;--priority-plus-navigation--font-weight:inherit;--priority-plus-navigation--font-style:inherit;--priority-plus-navigation--padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown,.priority-plus-navigation-dropdown.is-open{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color)!important;border-bottom:var(--wp--custom--priority-plus-navigation--dropdown--border-bottom,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd));border-left:var(--wp--custom--priority-plus-navigation--dropdown--border-left,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd));border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-right:var(--wp--custom--priority-plus-navigation--dropdown--border-right,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd));border-top:var(--wp--custom--priority-plus-navigation--dropdown--border-top,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd));box-shadow:var(--wp--custom--priority-plus-navigation--dropdown--box-shadow);list-style:none;margin:0;min-width:200px;opacity:0;overflow:hidden;padding:0;position:absolute;right:0;top:100%;transform:translateY(-10px);transition:opacity .2s ease,visibility .2s ease,transform .2s ease;visibility:hidden;z-index:1000}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown.is-open,.priority-plus-navigation-dropdown.is-open.is-open{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li,.priority-plus-navigation-dropdown.is-open li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li .priority-plus-navigation-preview-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a,.priority-plus-navigation-dropdown.is-open li .priority-plus-navigation-preview-link,.priority-plus-navigation-dropdown.is-open li a{color:inherit;display:block;font-style:inherit;font-weight:inherit;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-decoration:none;transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li .priority-plus-navigation-preview-link:hover,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a:hover,.priority-plus-navigation-dropdown.is-open li .priority-plus-navigation-preview-link:hover,.priority-plus-navigation-dropdown.is-open li a:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-wrapper,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow .priority-plus-navigation-accordion-arrow,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-arrow .priority-plus-navigation-accordion-arrow{display:inline-block;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;justify-content:space-between;outline:none;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-align:left;transition:background .2s ease,color .2s ease;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-arrow,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-arrow{margin-left:.5rem;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:focus,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:hover,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full:focus,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:focus-visible,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full:focus-visible{outline:2px solid currentcolor;outline-offset:-2px}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full[aria-expanded=true] .priority-plus-navigation-accordion-arrow,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content{background:transparent;display:none;list-style:none;margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content[aria-hidden=true],.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content[aria-hidden=true]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content.is-open,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content.is-open{display:block!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>a{padding-left:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent))}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a{padding-left:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)*2)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a{padding-left:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)*3)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a{padding-left:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)*4)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-link{flex:1;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link:hover,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-link:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-arrow{background:transparent;border:none;color:inherit;cursor:pointer;flex-shrink:0;font-family:inherit;font-size:inherit;outline:none;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:focus,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:hover,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-arrow:focus,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-arrow:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:focus-visible,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-arrow:focus-visible{outline:2px solid currentcolor;outline-offset:-2px}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow[aria-expanded=true] .priority-plus-navigation-accordion-arrow,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-arrow[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(90deg)}.editor-styles-wrapper .priority-plus-navigation-editor-wrapper nav{align-items:center;border:2px solid green!important;display:flex;flex-wrap:nowrap;width:100%}.priority-plus-navigation-disable-always-option .components-toggle-group-control-option-base:last-child{cursor:not-allowed;opacity:.4;pointer-events:none;text-decoration:line-through} diff --git a/build/priority-plus-nav-editor.js b/build/priority-plus-nav-editor.js index 72095d5..6aa688a 100644 --- a/build/priority-plus-nav-editor.js +++ b/build/priority-plus-nav-editor.js @@ -1 +1 @@ -(()=>{"use strict";const o=window.wp.i18n,i=window.wp.blocks,e=window.wp.primitives,r=window.ReactJSXRuntime;var t=(0,r.jsx)(e.SVG,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",children:(0,r.jsx)(e.Path,{fillRule:"evenodd",clipRule:"evenodd",d:"M7.404 16.596a6.5 6.5 0 1 0 9.192-9.192 6.5 6.5 0 0 0-9.192 9.192ZM6.344 6.343a8 8 0 1 0 11.313 11.314A8 8 0 0 0 6.343 6.343Zm4.906 9.407v-3h-3v-1.5h3v-3h1.5v3h3v1.5h-3v3h-1.5Z"})});const a=window.wp.hooks;(0,i.registerBlockVariation)("core/navigation",{name:"priority-plus-navigation",title:(0,o.__)("Priority Plus Navigation","priority-plus-navigation"),description:(0,o.__)('A responsive navigation that automatically moves overflow items to a "More" dropdown.',"priority-plus-navigation"),icon:t,scope:["inserter","transform"],attributes:{className:"is-style-priority-plus-navigation",overlayMenu:"never",priorityNavEnabled:!0,priorityNavMoreLabel:"More",priorityNavMoreBackgroundColor:void 0,priorityNavMoreBackgroundColorHover:void 0,priorityNavMoreTextColor:void 0,priorityNavMoreTextColorHover:void 0},isActive:(o,i)=>o.className?.includes(i.className)}),(0,a.addFilter)("blocks.registerBlockType","priority-plus-navigation/extend-core-navigation",(o,i)=>"core/navigation"!==i?o:{...o,attributes:{...o.attributes,priorityNavEnabled:{type:"boolean",default:!1},priorityNavMoreLabel:{type:"string",default:"More"},priorityNavMoreIcon:{type:"string",default:"none"},priorityNavMoreBackgroundColor:{type:"string"},priorityNavMoreBackgroundColorHover:{type:"string"},priorityNavMoreTextColor:{type:"string"},priorityNavMoreTextColorHover:{type:"string"},priorityNavMorePadding:{type:"object",default:void 0}}});const n=window.wp.blockEditor,l=window.wp.components,s=window.wp.compose,p=window.wp.element,v=(0,s.createHigherOrderComponent)(o=>i=>{const{name:e,attributes:t}=i;if("core/navigation"!==e)return(0,r.jsx)(o,{...i});const a=(t.className||"").includes("is-style-priority-plus-navigation")||!0===t.priorityNavEnabled;return(0,p.useEffect)(()=>{if(!a)return;const o=document.querySelector(".block-editor-block-inspector");if(!o)return;const i=o.querySelector('.components-toggle-group-control-option-base[data-value="always"]');i&&(i.style.opacity="0.4",i.style.pointerEvents="none",i.style.textDecoration="line-through",i.style.cursor="not-allowed")},[a,t.overlayMenu]),(0,r.jsx)(o,{...i})},"addDisableAlwaysOption"),d=(0,s.createHigherOrderComponent)(i=>e=>{const{name:t,attributes:a,setAttributes:s}=e;if("core/navigation"!==t)return(0,r.jsx)(i,{...e});const v=(a.className||"").includes("is-style-priority-plus-navigation")||!0===a.priorityNavEnabled;if(!v)return(0,r.jsx)(i,{...e});const{priorityNavEnabled:d,priorityNavMoreLabel:u,priorityNavMoreBackgroundColor:y,priorityNavMoreBackgroundColorHover:c,priorityNavMoreTextColor:g,priorityNavMoreTextColorHover:b,priorityNavMorePadding:w,overlayMenu:h}=a;(0,p.useEffect)(()=>{v&&"always"===h&&s({overlayMenu:"mobile"})},[v,h,s]);const M=(0,n.useSetting)("spacing.spacingSizes")||[];return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(i,{...e}),(0,r.jsx)(n.InspectorControls,{group:"settings",children:(0,r.jsx)(l.Notice,{status:"info",isDismissible:!1,children:(0,o.__)('Priority Plus Navigation is not compatible with "Always" overlay menu. The overlay menu is set to "Mobile" to allow Priority+ to work on desktop.',"priority-plus-navigation")})}),(0,r.jsxs)(n.InspectorControls,{group:"styles",children:[(0,r.jsx)(l.__experimentalToolsPanel,{label:(0,o.__)("Priority Plus Settings","priority-plus-navigation"),resetAll:()=>s({priorityNavMoreLabel:"More"}),children:(0,r.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>!!u,label:(0,o.__)("More Button Label","priority-plus-navigation"),onDeselect:()=>s({priorityNavMoreLabel:"More"}),isShownByDefault:!0,children:(0,r.jsx)(l.TextControl,{label:(0,o.__)("More Button Label","priority-plus-navigation"),value:u,onChange:o=>s({priorityNavMoreLabel:o}),help:(0,o.__)('Text displayed on the "More" button',"priority-plus-navigation")})})}),(0,r.jsx)(n.PanelColorSettings,{title:(0,o.__)("Priority Plus Colors","priority-plus-navigation"),colorSettings:[{label:(0,o.__)("Button Text Color","priority-plus-navigation"),value:g,onChange:o=>s({priorityNavMoreTextColor:o||void 0}),clearable:!0},{label:(0,o.__)("Button Text Hover Color","priority-plus-navigation"),value:b,onChange:o=>s({priorityNavMoreTextColorHover:o||void 0}),clearable:!0},{label:(0,o.__)("Button Background Color","priority-plus-navigation"),value:y,onChange:o=>s({priorityNavMoreBackgroundColor:o||void 0}),clearable:!0},{label:(0,o.__)("Button Background Hover Color","priority-plus-navigation"),value:c,onChange:o=>s({priorityNavMoreBackgroundColorHover:o||void 0}),clearable:!0}]}),(0,r.jsx)(l.__experimentalToolsPanel,{label:(0,o.__)("Priority Plus Button","priority-plus-navigation"),resetAll:()=>s({priorityNavMorePadding:void 0}),children:(0,r.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>!!w&&Object.keys(w).length>0,label:(0,o.__)("Padding","priority-plus-navigation"),onDeselect:()=>s({priorityNavMorePadding:void 0}),isShownByDefault:!0,children:M.length>0?(0,r.jsx)(n.__experimentalSpacingSizesControl,{values:w,onChange:o=>s({priorityNavMorePadding:o}),label:(0,o.__)("Button Padding","priority-plus-navigation"),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"]}):(0,r.jsx)(l.BoxControl,{label:(0,o.__)("Button Padding","priority-plus-navigation"),values:w,onChange:o=>s({priorityNavMorePadding:o}),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"],allowReset:!0})})})]})]})},"withPriorityNavControls");(0,a.addFilter)("editor.BlockEdit","priority-plus-navigation/add-disable-always-option",v,5),(0,a.addFilter)("editor.BlockEdit","priority-plus-navigation/add-priority-plus-navigation-controls",d,10)})(); \ No newline at end of file +(()=>{"use strict";const o=window.wp.i18n,t=window.wp.blocks,e=window.wp.primitives,i=window.ReactJSXRuntime;var r=(0,i.jsx)(e.SVG,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",children:(0,i.jsx)(e.Path,{fillRule:"evenodd",clipRule:"evenodd",d:"M7.404 16.596a6.5 6.5 0 1 0 9.192-9.192 6.5 6.5 0 0 0-9.192 9.192ZM6.344 6.343a8 8 0 1 0 11.313 11.314A8 8 0 0 0 6.343 6.343Zm4.906 9.407v-3h-3v-1.5h3v-3h1.5v3h3v1.5h-3v3h-1.5Z"})});const n=window.wp.hooks,l="#ffffff",s={color:"#dddddd",width:"1px",style:"solid"},a="4px",u="0 4px 12px rgba(0, 0, 0, 0.15)",p={top:"0.75rem",right:"1rem",bottom:"0.75rem",left:"1rem"},y="rgba(0, 0, 0, 0.05)",g="inherit",d="1.25rem";(0,t.registerBlockVariation)("core/navigation",{name:"priority-plus-navigation",title:(0,o.__)("Priority Plus Navigation","priority-plus-navigation"),description:(0,o.__)('A responsive navigation that automatically moves overflow items to a "More" dropdown.',"priority-plus-navigation"),icon:r,scope:["inserter","transform"],attributes:{className:"is-style-priority-plus-navigation",overlayMenu:"never",priorityPlusEnabled:!0,priorityPlusToggleLabel:"More",priorityPlusToggleBackgroundColor:void 0,priorityPlusToggleBackgroundColorHover:void 0,priorityPlusToggleTextColor:void 0,priorityPlusToggleTextColorHover:void 0},isActive:(o,t)=>o.className?.includes(t.className)}),(0,n.addFilter)("blocks.registerBlockType","priority-plus-navigation/extend-core-navigation",(o,t)=>"core/navigation"!==t?o:{...o,attributes:{...o.attributes,priorityPlusEnabled:{type:"boolean",default:!1},priorityPlusToggleLabel:{type:"string",default:"More"},priorityPlusToggleIcon:{type:"string",default:"none"},priorityPlusToggleBackgroundColor:{type:"string"},priorityPlusToggleBackgroundColorHover:{type:"string"},priorityPlusToggleTextColor:{type:"string"},priorityPlusToggleTextColorHover:{type:"string"},priorityPlusTogglePadding:{type:"object",default:void 0},priorityPlusMenuBackgroundColor:{type:"string",default:l},priorityPlusMenuBorder:{type:"object",default:s},priorityPlusMenuBorderRadius:{type:["string","object"],default:a},priorityPlusMenuBoxShadow:{type:"string",default:u},priorityPlusMenuItemPadding:{type:"object",default:p},priorityPlusMenuItemHoverBackground:{type:"string",default:y},priorityPlusMenuItemHoverTextColor:{type:"string",default:g},priorityPlusMenuSubmenuIndent:{type:"string",default:d},priorityPlusTypographyFontFamily:{type:"string"},priorityPlusTypographyFontSize:{type:"string"},priorityPlusTypographyFontWeight:{type:"string"},priorityPlusTypographyFontStyle:{type:"string"}}});const c=window.wp.blockEditor,h=window.wp.components,v=window.wp.compose,m=window.wp.element;function P(o){if(!o||"string"!=typeof o)return o;if(o.startsWith("var:preset|")){const t=o.match(/^var:preset\|([^|]+)\|(.+)$/);if(t)return`var(--wp--preset--${t[1]}--${t[2]})`}return o.startsWith("var("),o}function b(o){if(!o)return a;if("string"==typeof o)return o;if("object"==typeof o){const{topLeft:t,topRight:e,bottomRight:i,bottomLeft:r}=o;return t===e&&e===i&&i===r&&t?t:`${t||"0"} ${e||"0"} ${i||"0"} ${r||"0"}`}return a}function x(o){const t=`${p.top} ${p.right} ${p.bottom} ${p.left}`;if(!o)return t;if("string"==typeof o)return P(o);if("object"==typeof o){if(0===Object.keys(o).length)return t;const{top:e,right:i,bottom:r,left:n}=o;if(!(e&&""!==e&&"0"!==e||i&&""!==i&&"0"!==i||r&&""!==r&&"0"!==r||n&&""!==n&&"0"!==n))return t;const l=P(e)||"0",s=P(i)||"0",a=P(r)||"0",u=P(n)||"0";return l===s&&s===a&&a===u?l:l===a&&s===u?`${l} ${s}`:`${l} ${s} ${a} ${u}`}return t}function f({attributes:t,typographyStyles:e={}}){const{priorityPlusMenuBackgroundColor:r,priorityPlusMenuBorder:n,priorityPlusMenuBorderRadius:c,priorityPlusMenuBoxShadow:h,priorityPlusMenuItemPadding:v,priorityPlusMenuItemHoverBackground:P,priorityPlusMenuItemHoverTextColor:f,priorityPlusMenuSubmenuIndent:_}=t,w=r||l,M=n||s,S=c||a,T=h||u,B=v||p,C=P||y,j=f||g,I=_||d,[k,F]=(0,m.useState)(!0),z=(0,m.useMemo)(()=>{const o=function(o){const t=s,e="--wp--custom--priority-plus-navigation--dropdown--";if(!o)return{[`${e}border-color`]:t.color,[`${e}border-width`]:t.width,[`${e}border-style`]:t.style};if(o.color||o.width||o.style)return{[`${e}border-color`]:o.color||t.color,[`${e}border-width`]:o.width||t.width,[`${e}border-style`]:o.style||t.style};const i=["top","right","bottom","left"];if(i.some(t=>o[t])){const r={};if(i.forEach(i=>{const n=o[i];if(n&&(n.color||n.width||n.style)){const o=n.width||t.width,l=n.style||t.style,s=n.color||t.color;r[`${e}border-${i}`]=`${o} ${l} ${s}`}}),Object.keys(r).length>0)return r}return{[`${e}border-color`]:t.color,[`${e}border-width`]:t.width,[`${e}border-style`]:t.style}}(M),t={"--wp--custom--priority-plus-navigation--dropdown--background-color":w,"--wp--custom--priority-plus-navigation--dropdown--border-radius":b(S),"--wp--custom--priority-plus-navigation--dropdown--box-shadow":T,"--wp--custom--priority-plus-navigation--dropdown--item-spacing":x(B),"--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color":C,"--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color":j,"--wp--custom--priority-plus-navigation--dropdown--multi-level-indent":I,...o};return e.fontFamily&&(t.fontFamily=e.fontFamily),e.fontSize&&(t.fontSize=e.fontSize),e.fontWeight&&(t.fontWeight=e.fontWeight),e.fontStyle&&(t.fontStyle=e.fontStyle),t},[w,M,S,T,B,C,j,I,e]);return(0,i.jsxs)("ul",{className:"priority-plus-navigation-dropdown is-open",style:z,children:[(0,i.jsx)("li",{children:(0,i.jsx)("span",{className:"priority-plus-navigation-preview-link",children:(0,o.__)("Top level item","priority-plus-navigation")})}),(0,i.jsx)("li",{className:"dropdown-preview-hover-demo",children:(0,i.jsx)("span",{className:"priority-plus-navigation-preview-link",children:(0,o.__)("Another top level item","priority-plus-navigation")})}),(0,i.jsxs)("li",{children:[(0,i.jsxs)("button",{type:"button",className:"priority-plus-navigation-accordion-toggle priority-plus-navigation-accordion-toggle-full",onClick:()=>F(!k),"aria-expanded":k,children:[(0,i.jsx)("span",{className:"priority-plus-navigation-accordion-text",children:(0,o.__)("Top level with a submenu","priority-plus-navigation")}),(0,i.jsx)("span",{className:"priority-plus-navigation-accordion-arrow","aria-hidden":"true",children:"›"})]}),k&&(0,i.jsxs)("ul",{className:"priority-plus-navigation-accordion-content is-open",children:[(0,i.jsx)("li",{children:(0,i.jsx)("span",{className:"priority-plus-navigation-preview-link",children:(0,o.__)("Submenu item","priority-plus-navigation")})}),(0,i.jsxs)("li",{children:[(0,i.jsxs)("button",{type:"button",className:"priority-plus-navigation-accordion-toggle priority-plus-navigation-accordion-toggle-full",onClick:()=>F(!k),"aria-expanded":k,children:[(0,i.jsx)("span",{className:"priority-plus-navigation-accordion-text",children:(0,o.__)("Submenu in a submenu","priority-plus-navigation")}),(0,i.jsx)("span",{className:"priority-plus-navigation-accordion-arrow","aria-hidden":"true",children:"›"})]}),k&&(0,i.jsxs)("ul",{className:"priority-plus-navigation-accordion-content is-open",children:[(0,i.jsx)("li",{children:(0,i.jsx)("span",{className:"priority-plus-navigation-preview-link",children:(0,o.__)("Going deeper into the submenu","priority-plus-navigation")})}),(0,i.jsx)("li",{children:(0,i.jsx)("span",{className:"priority-plus-navigation-preview-link",children:(0,o.__)("Woah, submenu inception!","priority-plus-navigation")})})]})]})]})]}),(0,i.jsx)("li",{children:(0,i.jsx)("span",{className:"priority-plus-navigation-preview-link",children:(0,o.__)("Don't forget to test nav item the hover effect!","priority-plus-navigation")})})]})}function _(o,t){if(o&&o!==t)return o}function w({attributes:t,setAttributes:e}){const{priorityPlusMenuBackgroundColor:r,priorityPlusMenuItemHoverBackground:n,priorityPlusMenuItemHoverTextColor:s}=t;return(0,i.jsx)(c.PanelColorSettings,{title:(0,o.__)("Menu Colors","priority-plus-navigation"),colorSettings:[{label:(0,o.__)("Background Color","priority-plus-navigation"),value:_(r,l),onChange:o=>e({priorityPlusMenuBackgroundColor:o||l}),clearable:!0},{label:(0,o.__)("Item Hover Background","priority-plus-navigation"),value:_(n,y),onChange:o=>e({priorityPlusMenuItemHoverBackground:o||y}),clearable:!0},{label:(0,o.__)("Item Hover Text Color","priority-plus-navigation"),value:_(s,g),onChange:o=>e({priorityPlusMenuItemHoverTextColor:o||g}),clearable:!0}]})}function M({value:t,onChange:e}){const r=(0,c.useSetting)("shadow.presets.theme"),n=(0,c.useSetting)("shadow.presets.default"),l=(0,m.useMemo)(()=>{const t=r||[],e=n||[],i=[{value:"none",label:(0,o.__)("None","priority-plus-navigation")},{value:u,label:(0,o.__)("Default","priority-plus-navigation")}];return t.length>0&&t.forEach(o=>{i.push({value:o.shadow,label:o.name})}),e.length>0&&e.forEach(o=>{i.push({value:o.shadow,label:o.name})}),i},[r,n]),[s,a]=(0,m.useState)(l);return(0,i.jsx)(h.ComboboxControl,{__next40pxDefaultSize:!0,__nextHasNoMarginBottom:!0,label:(0,o.__)("Shadow","priority-plus-navigation"),value:t,onChange:o=>{e(o)},options:s,onFilterValueChange:o=>{if(!o)return void a(l);const t=o.toLowerCase();a(l.filter(o=>o.label.toLowerCase().includes(t)))}})}function S({attributes:t,setAttributes:e}){const{priorityPlusMenuBorder:r,priorityPlusMenuBorderRadius:n,priorityPlusMenuBoxShadow:l}=t,p=(0,c.useSetting)("color.palette")||[];return(0,i.jsxs)(h.__experimentalToolsPanel,{label:(0,o.__)("Menu Styles","priority-plus-navigation"),resetAll:()=>{e({priorityPlusMenuBorder:s,priorityPlusMenuBorderRadius:a,priorityPlusMenuBoxShadow:u})},children:[(0,i.jsx)(h.__experimentalToolsPanelItem,{hasValue:()=>{return!!(o=r)&&(!!(o.color||o.width||o.style)||["top","right","bottom","left"].some(t=>{const e=o[t];return e&&(e.color||e.width||e.style)}));var o},label:(0,o.__)("Border","priority-plus-navigation"),onDeselect:()=>e({priorityPlusMenuBorder:s}),isShownByDefault:!0,children:(0,i.jsx)(h.__experimentalBorderBoxControl,{label:(0,o.__)("Border","priority-plus-navigation"),colors:p,value:r,onChange:o=>e({priorityPlusMenuBorder:o}),enableAlpha:!0,enableStyle:!0,size:"__unstable-large"})}),(0,i.jsx)(h.__experimentalToolsPanelItem,{hasValue:()=>{return!!(o=n)&&("string"==typeof o?""!==o:"object"==typeof o&&Object.values(o).some(o=>o&&""!==o));var o},label:(0,o.__)("Border Radius","priority-plus-navigation"),onDeselect:()=>e({priorityPlusMenuBorderRadius:a}),isShownByDefault:!0,children:(0,i.jsx)(c.__experimentalBorderRadiusControl,{values:n,onChange:o=>e({priorityPlusMenuBorderRadius:o})})}),(0,i.jsx)(h.__experimentalToolsPanelItem,{hasValue:()=>!!l,label:(0,o.__)("Shadow","priority-plus-navigation"),onDeselect:()=>e({priorityPlusMenuBoxShadow:u}),isShownByDefault:!0,children:(0,i.jsx)(M,{value:l||u,onChange:o=>e({priorityPlusMenuBoxShadow:o})})})]})}function T({attributes:t,setAttributes:e,spacingSizes:r}){const{priorityPlusMenuItemPadding:n,priorityPlusMenuSubmenuIndent:l}=t;return(0,i.jsxs)(h.__experimentalToolsPanel,{label:(0,o.__)("Menu Item Spacing","priority-plus-navigation"),resetAll:()=>{e({priorityPlusMenuItemPadding:p,priorityPlusMenuSubmenuIndent:d})},children:[(0,i.jsx)(h.__experimentalToolsPanelItem,{hasValue:()=>{return!!(o=n)&&("object"==typeof o?Object.values(o).some(o=>o&&""!==o):!!o);var o},label:(0,o.__)("Item Padding","priority-plus-navigation"),onDeselect:()=>e({priorityPlusMenuItemPadding:p}),isShownByDefault:!0,children:r.length>0?(0,i.jsx)(c.__experimentalSpacingSizesControl,{values:n,onChange:o=>e({priorityPlusMenuItemPadding:o}),label:(0,o.__)("Item Padding","priority-plus-navigation"),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"]}):(0,i.jsx)(h.BoxControl,{label:(0,o.__)("Item Padding","priority-plus-navigation"),values:n,onChange:o=>e({priorityPlusMenuItemPadding:o}),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"],allowReset:!0})}),(0,i.jsx)(h.__experimentalToolsPanelItem,{hasValue:()=>!!l,label:(0,o.__)("Submenu Indent","priority-plus-navigation"),onDeselect:()=>e({priorityPlusMenuSubmenuIndent:d}),isShownByDefault:!0,children:(0,i.jsx)(h.__experimentalUnitControl,{label:(0,o.__)("Submenu Indent","priority-plus-navigation"),value:l||d,onChange:o=>e({priorityPlusMenuSubmenuIndent:o}),help:(0,o.__)("Indentation for nested submenu items","priority-plus-navigation"),units:[{value:"px",label:"px"},{value:"rem",label:"rem"},{value:"em",label:"em"}]})})]})}function B({attributes:t,setAttributes:e,onClose:r}){const n=(0,c.useSetting)("typography.fontSizes")||[],v=(0,c.useSetting)("typography.fontFamilies")||[],m={};if(t.priorityPlusTypographyFontFamily){let o=[];v&&"object"==typeof v&&!Array.isArray(v)?(v.theme&&Array.isArray(v.theme)&&(o=o.concat(v.theme)),v.custom&&Array.isArray(v.custom)&&(o=o.concat(v.custom))):Array.isArray(v)&&v.forEach(t=>{t.fontFamilies&&Array.isArray(t.fontFamilies)?o=o.concat(t.fontFamilies):t.slug&&t.fontFamily&&o.push(t)});const e=o.find(o=>o.slug===t.priorityPlusTypographyFontFamily);e&&(m.fontFamily=e.fontFamily)}if(t.priorityPlusTypographyFontSize){let o=[];Array.isArray(n)&&n.forEach(t=>{t.sizes&&Array.isArray(t.sizes)?o=o.concat(t.sizes):t.slug&&t.size&&o.push(t)});const e=o.find(o=>o.slug===t.priorityPlusTypographyFontSize);e&&(m.fontSize=e.size)}t.priorityPlusTypographyFontWeight&&(m.fontWeight=t.priorityPlusTypographyFontWeight),t.priorityPlusTypographyFontStyle&&(m.fontStyle=t.priorityPlusTypographyFontStyle);const P=(0,c.useSetting)("spacing.spacingSizes")||[];return(0,i.jsxs)(h.Modal,{title:(0,o.__)("Customize Priority Plus Menu","priority-plus-navigation"),onRequestClose:r,className:"priority-plus-dropdown-customizer",size:"large",isDismissible:!0,children:[(0,i.jsxs)("div",{className:"dropdown-customizer-layout",children:[(0,i.jsxs)("div",{className:"dropdown-customizer-controls",children:[(0,i.jsx)(w,{attributes:t,setAttributes:e}),(0,i.jsx)(S,{attributes:t,setAttributes:e}),(0,i.jsx)(T,{attributes:t,setAttributes:e,spacingSizes:P})]}),(0,i.jsx)("div",{className:"dropdown-customizer-preview",children:(0,i.jsx)(f,{attributes:t,typographyStyles:m})})]}),(0,i.jsxs)("div",{className:"dropdown-customizer-footer",children:[(0,i.jsx)(h.Button,{variant:"tertiary",isDestructive:!0,onClick:()=>{e({priorityPlusMenuBackgroundColor:l,priorityPlusMenuBorder:s,priorityPlusMenuBorderRadius:a,priorityPlusMenuBoxShadow:u,priorityPlusMenuItemPadding:p,priorityPlusMenuItemHoverBackground:y,priorityPlusMenuItemHoverTextColor:g,priorityPlusMenuSubmenuIndent:d})},children:(0,o.__)("Reset to Defaults","priority-plus-navigation")}),(0,i.jsx)(h.Button,{variant:"primary",onClick:r,children:(0,o.__)("Done","priority-plus-navigation")})]})]})}const C=(0,v.createHigherOrderComponent)(o=>t=>{const{name:e,attributes:r}=t;if("core/navigation"!==e)return(0,i.jsx)(o,{...t});const n=(r.className||"").includes("is-style-priority-plus-navigation")||!0===r.priorityPlusEnabled;return(0,m.useEffect)(()=>{if(!n)return;const o=document.querySelector(".block-editor-block-inspector");if(!o)return;const t=o.querySelector('.components-toggle-group-control-option-base[data-value="always"]');t&&(t.style.opacity="0.4",t.style.pointerEvents="none",t.style.textDecoration="line-through",t.style.cursor="not-allowed")},[n,r.overlayMenu]),(0,i.jsx)(o,{...t})},"addDisableAlwaysOption"),j=(0,v.createHigherOrderComponent)(t=>e=>{const{name:r,attributes:n,setAttributes:v}=e;if("core/navigation"!==r)return(0,i.jsx)(t,{...e});const P=(n.className||"").includes("is-style-priority-plus-navigation")||!0===n.priorityPlusEnabled;if(!P)return(0,i.jsx)(t,{...e});const{priorityPlusToggleLabel:b,priorityPlusToggleBackgroundColor:x,priorityPlusToggleBackgroundColorHover:f,priorityPlusToggleTextColor:_,priorityPlusToggleTextColorHover:w,priorityPlusTogglePadding:M,overlayMenu:S}=n,[T,C]=(0,m.useState)(!1);(0,m.useEffect)(()=>{P&&"always"===S&&v({overlayMenu:"mobile"})},[P,S,v]),(0,m.useEffect)(()=>{if(!P)return;const o=n.style?.typography?.fontWeight,t=n.style?.typography?.fontStyle;n.fontSize===n.priorityPlusTypographyFontSize&&n.fontFamily===n.priorityPlusTypographyFontFamily&&o===n.priorityPlusTypographyFontWeight&&t===n.priorityPlusTypographyFontStyle||v({priorityPlusTypographyFontFamily:n.fontFamily,priorityPlusTypographyFontSize:n.fontSize,priorityPlusTypographyFontWeight:o,priorityPlusTypographyFontStyle:t})},[P,n.fontSize,n.fontFamily,n.style?.typography?.fontWeight,n.style?.typography?.fontStyle,n.priorityPlusTypographyFontFamily,n.priorityPlusTypographyFontSize,n.priorityPlusTypographyFontWeight,n.priorityPlusTypographyFontStyle,v]);const j=(0,c.useSetting)("spacing.spacingSizes")||[];return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t,{...e}),(0,i.jsx)(c.InspectorControls,{group:"settings",children:(0,i.jsx)(h.Notice,{status:"info",isDismissible:!1,children:(0,o.__)('Priority Plus Navigation is not compatible with "Always" overlay menu. The overlay menu is set to "Mobile" to allow Priority+ to work on desktop.',"priority-plus-navigation")})}),(0,i.jsxs)(c.InspectorControls,{group:"styles",children:[(0,i.jsx)(h.__experimentalToolsPanel,{label:(0,o.__)("Priority Plus Settings","priority-plus-navigation"),resetAll:()=>v({priorityPlusToggleLabel:"More"}),children:(0,i.jsx)(h.__experimentalToolsPanelItem,{hasValue:()=>!!b,label:(0,o.__)("Toggle Button Label","priority-plus-navigation"),onDeselect:()=>v({priorityPlusToggleLabel:"More"}),isShownByDefault:!0,children:(0,i.jsx)(h.TextControl,{label:(0,o.__)("Toggle Button Label","priority-plus-navigation"),value:b,onChange:o=>v({priorityPlusToggleLabel:o}),help:(0,o.__)("Text displayed on the toggle button","priority-plus-navigation")})})}),(0,i.jsx)(c.PanelColorSettings,{title:(0,o.__)("Toggle Button Colors","priority-plus-navigation"),colorSettings:[{label:(0,o.__)("Text Color","priority-plus-navigation"),value:_,onChange:o=>v({priorityPlusToggleTextColor:o||void 0}),clearable:!0},{label:(0,o.__)("Text Hover Color","priority-plus-navigation"),value:w,onChange:o=>v({priorityPlusToggleTextColorHover:o||void 0}),clearable:!0},{label:(0,o.__)("Background Color","priority-plus-navigation"),value:x,onChange:o=>v({priorityPlusToggleBackgroundColor:o||void 0}),clearable:!0},{label:(0,o.__)("Background Hover Color","priority-plus-navigation"),value:f,onChange:o=>v({priorityPlusToggleBackgroundColorHover:o||void 0}),clearable:!0}]}),(0,i.jsx)(h.__experimentalToolsPanel,{label:(0,o.__)("Toggle Button Spacing","priority-plus-navigation"),resetAll:()=>v({priorityPlusTogglePadding:void 0}),children:(0,i.jsx)(h.__experimentalToolsPanelItem,{hasValue:()=>!!M&&Object.keys(M).length>0,label:(0,o.__)("Padding","priority-plus-navigation"),onDeselect:()=>v({priorityPlusTogglePadding:void 0}),isShownByDefault:!0,children:j.length>0?(0,i.jsx)(c.__experimentalSpacingSizesControl,{values:M,onChange:o=>v({priorityPlusTogglePadding:o}),label:(0,o.__)("Button Padding","priority-plus-navigation"),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"]}):(0,i.jsx)(h.BoxControl,{label:(0,o.__)("Button Padding","priority-plus-navigation"),values:M,onChange:o=>v({priorityPlusTogglePadding:o}),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"],allowReset:!0})})}),(0,i.jsx)(h.__experimentalToolsPanel,{label:(0,o.__)("Menu Styles","priority-plus-navigation"),resetAll:()=>{v({priorityPlusMenuBackgroundColor:l,priorityPlusMenuBorder:s,priorityPlusMenuBorderRadius:a,priorityPlusMenuBoxShadow:u,priorityPlusMenuItemPadding:p,priorityPlusMenuItemHoverBackground:y,priorityPlusMenuItemHoverTextColor:g,priorityPlusMenuSubmenuIndent:d})},children:(0,i.jsx)(h.__experimentalToolsPanelItem,{hasValue:()=>{const{priorityPlusMenuBackgroundColor:o,priorityPlusMenuBorder:t,priorityPlusMenuBorderRadius:e,priorityPlusMenuBoxShadow:i,priorityPlusMenuItemPadding:r,priorityPlusMenuItemHoverBackground:l,priorityPlusMenuItemHoverTextColor:s,priorityPlusMenuSubmenuIndent:a}=n;return!!(o||t||e||i||r||l||s||a)},label:(0,o.__)("Customize Menu","priority-plus-navigation"),onDeselect:()=>v({priorityPlusMenuBackgroundColor:l,priorityPlusMenuBorder:s,priorityPlusMenuBorderRadius:a,priorityPlusMenuBoxShadow:u,priorityPlusMenuItemPadding:p,priorityPlusMenuItemHoverBackground:y,priorityPlusMenuItemHoverTextColor:g,priorityPlusMenuSubmenuIndent:d}),isShownByDefault:!0,children:(0,i.jsx)(h.Button,{variant:"secondary",onClick:()=>C(!0),children:(0,o.__)("Customize Menu","priority-plus-navigation")})})})]}),T&&(0,i.jsx)(B,{attributes:n,setAttributes:v,onClose:()=>C(!1)})]})},"withPriorityPlusControls");(0,n.addFilter)("editor.BlockEdit","priority-plus-navigation/add-disable-always-option",C,5),(0,n.addFilter)("editor.BlockEdit","priority-plus-navigation/add-priority-plus-navigation-controls",j,10)})(); \ No newline at end of file diff --git a/build/priority-plus-navigation.asset.php b/build/priority-plus-navigation.asset.php index 376a83b..16b4590 100644 --- a/build/priority-plus-navigation.asset.php +++ b/build/priority-plus-navigation.asset.php @@ -1 +1 @@ - array(), 'version' => 'cb0794ae579e8c9c17f8'); + array(), 'version' => '874dfb5c427f37e2a56b'); diff --git a/build/priority-plus-navigation.js b/build/priority-plus-navigation.js index 110590b..dd3d995 100644 --- a/build/priority-plus-navigation.js +++ b/build/priority-plus-navigation.js @@ -1 +1 @@ -(()=>{"use strict";var t,e={823(){const t="More";function e(t){if(!t)return!1;const e=window.getComputedStyle(t),i=t.getBoundingClientRect();return"none"!==e.display&&"hidden"!==e.visibility&&i.width>0&&i.height>0}function i(t){return e(t)?t.getBoundingClientRect().width:0}function n(t){return e(t)}function s(t){const e=document.createElement("div");return e.textContent=t,e.innerHTML}function o(t){const e={text:"",url:"#",hasSubmenu:!1,children:[]},i=t.querySelector(":scope > .wp-block-navigation__submenu-container");let n=t.querySelector(":scope > a");if(n||(n=t.querySelector(":scope > .wp-block-navigation-item__content a")),!n){if(i){const i=t.cloneNode(!0),n=i.querySelector(".wp-block-navigation__submenu-container");n&&n.remove(),e.text=i.textContent.trim()}else e.text=t.textContent.trim();return i&&(e.hasSubmenu=!0,i.querySelectorAll(":scope > li").forEach(t=>{e.children.push(o(t))})),e}return e.text=function(t){if(!t)return"";const e=t.querySelector(".wp-block-navigation-item__label");if(e)return e.textContent.trim();const i=t.cloneNode(!0);i.querySelectorAll("*").forEach(t=>t.remove());let n=i.textContent.trim();if(!n){const e=Array.from(t.childNodes).filter(t=>t.nodeType===Node.TEXT_NODE);e.length>0&&(n=e.map(t=>t.textContent.trim()).filter(t=>t).join(" "))}return n}(n),i&&e.text&&(e.text=function(t,e){if(!t||!e)return t;const i=[];if(e.querySelectorAll("li a").forEach(e=>{const n=e.textContent.trim();n&&t.includes(n)&&i.push(n)}),i.length>0){let e=t;return i.forEach(t=>{e=e.replace(t,"").trim()}),e}return t}(e.text,i)),e.url=n.getAttribute("href")||"#",i&&(e.hasSubmenu=!0,i.querySelectorAll(":scope > li").forEach(t=>{e.children.push(o(t))})),e}function r(t,e,i,n,o){const a=`${i}-submenu-${n.value++}`;let l="";return t.hasSubmenu?(l=o?`\n\t\t\t\t\n\t\t\t\t