From 30ef7db5c44ef6a19758987fe41ad703b43e30fc Mon Sep 17 00:00:00 2001 From: Troy Chaplin Date: Sat, 3 Jan 2026 00:05:40 -0500 Subject: [PATCH 01/40] fix: css issue --- NEW-PLAN.md | 882 +++++++++++++++++++ PLAN.md | 846 ++++++++++++++++++ build/style-priority-plus-navigation-rtl.css | 2 +- build/style-priority-plus-navigation.css | 2 +- src/styles/style.scss | 33 + 5 files changed, 1763 insertions(+), 2 deletions(-) create mode 100644 NEW-PLAN.md create mode 100644 PLAN.md 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/build/style-priority-plus-navigation-rtl.css b/build/style-priority-plus-navigation-rtl.css index 3dea6e6..7db3a04 100644 --- a/build/style-priority-plus-navigation-rtl.css +++ b/build/style-priority-plus-navigation-rtl.css @@ -1 +1 @@ -: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;position:relative}.is-style-priority-plus-navigation .priority-plus-navigation-more-button{align-items:center;background:var(--priority-plus-navigation--background);border-color:var(--priority-plus-navigation--border-color);border-radius:var(--priority-plus-navigation--border-radius);border-style:var(--priority-plus-navigation--border-style);border-width:var(--priority-plus-navigation--border-width);color:var(--priority-plus-navigation--color);cursor:pointer;display:flex;font-family:var(--priority-plus-navigation--font-family);font-size:var(--priority-plus-navigation--font-size);font-weight:var(--priority-plus-navigation--font-weight);padding:var(--priority-plus-navigation--padding);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:hover{background:var(--priority-plus-navigation--background-hover);color:var(--priority-plus-navigation--color-hover)}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon{align-items:center;display:inline-flex;line-height:1}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon svg{fill:currentcolor;height:1.25em;width:1.25em}.is-style-priority-plus-navigation .priority-plus-navigation-more-button[aria-expanded=true] .priority-plus-navigation-icon{transform:rotate(-180deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color);border-color:var(--wp--custom--priority-plus-navigation--dropdown--border-color);border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-style:solid;border-width:var(--wp--custom--priority-plus-navigation--dropdown--border-width);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{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a{color:inherit;display:block;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 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-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]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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>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>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>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>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-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-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;justify-content:space-between;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{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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: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[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(-90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{background:transparent;border:none;color:inherit;cursor:pointer;flex-shrink:0;font-family:inherit;font-size:inherit;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 .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-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[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(-90deg)}.is-style-priority-plus-navigation[data-more-hidden=true] .priority-plus-navigation-more{display:none} +: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;position:relative}.is-style-priority-plus-navigation .priority-plus-navigation-more-button{align-items:center;background:var(--priority-plus-navigation--background);border-color:var(--priority-plus-navigation--border-color);border-radius:var(--priority-plus-navigation--border-radius);border-style:var(--priority-plus-navigation--border-style);border-width:var(--priority-plus-navigation--border-width);color:var(--priority-plus-navigation--color);cursor:pointer;display:flex;font-family:var(--priority-plus-navigation--font-family);font-size:var(--priority-plus-navigation--font-size);font-weight:var(--priority-plus-navigation--font-weight);outline:none;padding:var(--priority-plus-navigation--padding);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:focus,.is-style-priority-plus-navigation .priority-plus-navigation-more-button:hover{background:var(--priority-plus-navigation--background-hover);color:var(--priority-plus-navigation--color-hover)}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:focus-visible{outline:2px solid currentColor;outline-offset:-2px}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon{align-items:center;display:inline-flex;line-height:1}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon svg{fill:currentcolor;height:1.25em;width:1.25em}.is-style-priority-plus-navigation .priority-plus-navigation-more-button[aria-expanded=true] .priority-plus-navigation-icon{transform:rotate(-180deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color);border-color:var(--wp--custom--priority-plus-navigation--dropdown--border-color);border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-style:solid;border-width:var(--wp--custom--priority-plus-navigation--dropdown--border-width);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{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a{color:inherit;display:block;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 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-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]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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>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>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>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>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-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-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size: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{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{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{transform:rotate(-90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{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 .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-arrow:focus,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{transform:rotate(-90deg)}.is-style-priority-plus-navigation[data-more-hidden=true] .priority-plus-navigation-more{display:none} diff --git a/build/style-priority-plus-navigation.css b/build/style-priority-plus-navigation.css index 4634a59..76b8f7d 100644 --- a/build/style-priority-plus-navigation.css +++ b/build/style-priority-plus-navigation.css @@ -1 +1 @@ -: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;position:relative}.is-style-priority-plus-navigation .priority-plus-navigation-more-button{align-items:center;background:var(--priority-plus-navigation--background);border-color:var(--priority-plus-navigation--border-color);border-radius:var(--priority-plus-navigation--border-radius);border-style:var(--priority-plus-navigation--border-style);border-width:var(--priority-plus-navigation--border-width);color:var(--priority-plus-navigation--color);cursor:pointer;display:flex;font-family:var(--priority-plus-navigation--font-family);font-size:var(--priority-plus-navigation--font-size);font-weight:var(--priority-plus-navigation--font-weight);padding:var(--priority-plus-navigation--padding);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:hover{background:var(--priority-plus-navigation--background-hover);color:var(--priority-plus-navigation--color-hover)}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon{align-items:center;display:inline-flex;line-height:1}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon svg{fill:currentcolor;height:1.25em;width:1.25em}.is-style-priority-plus-navigation .priority-plus-navigation-more-button[aria-expanded=true] .priority-plus-navigation-icon{transform:rotate(180deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color);border-color:var(--wp--custom--priority-plus-navigation--dropdown--border-color);border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-style:solid;border-width:var(--wp--custom--priority-plus-navigation--dropdown--border-width);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{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a{color:inherit;display:block;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 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-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]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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>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>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>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>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-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-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;justify-content:space-between;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{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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: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[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{background:transparent;border:none;color:inherit;cursor:pointer;flex-shrink:0;font-family:inherit;font-size:inherit;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 .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-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[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(90deg)}.is-style-priority-plus-navigation[data-more-hidden=true] .priority-plus-navigation-more{display:none} +: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;position:relative}.is-style-priority-plus-navigation .priority-plus-navigation-more-button{align-items:center;background:var(--priority-plus-navigation--background);border-color:var(--priority-plus-navigation--border-color);border-radius:var(--priority-plus-navigation--border-radius);border-style:var(--priority-plus-navigation--border-style);border-width:var(--priority-plus-navigation--border-width);color:var(--priority-plus-navigation--color);cursor:pointer;display:flex;font-family:var(--priority-plus-navigation--font-family);font-size:var(--priority-plus-navigation--font-size);font-weight:var(--priority-plus-navigation--font-weight);outline:none;padding:var(--priority-plus-navigation--padding);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:focus,.is-style-priority-plus-navigation .priority-plus-navigation-more-button:hover{background:var(--priority-plus-navigation--background-hover);color:var(--priority-plus-navigation--color-hover)}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:focus-visible{outline:2px solid currentColor;outline-offset:-2px}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon{align-items:center;display:inline-flex;line-height:1}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon svg{fill:currentcolor;height:1.25em;width:1.25em}.is-style-priority-plus-navigation .priority-plus-navigation-more-button[aria-expanded=true] .priority-plus-navigation-icon{transform:rotate(180deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color);border-color:var(--wp--custom--priority-plus-navigation--dropdown--border-color);border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-style:solid;border-width:var(--wp--custom--priority-plus-navigation--dropdown--border-width);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{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a{color:inherit;display:block;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 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-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]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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>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>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>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>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-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-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size: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{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{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{transform:rotate(90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{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 .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-arrow:focus,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{transform:rotate(90deg)}.is-style-priority-plus-navigation[data-more-hidden=true] .priority-plus-navigation-more{display:none} diff --git a/src/styles/style.scss b/src/styles/style.scss index 0275ccd..8ad3d62 100755 --- a/src/styles/style.scss +++ b/src/styles/style.scss @@ -18,12 +18,23 @@ border-radius: var(--priority-plus-navigation--border-radius); transition: background 0.2s ease, color 0.2s ease; cursor: pointer; + outline: none; &:hover { background: var(--priority-plus-navigation--background-hover); color: var(--priority-plus-navigation--color-hover); } + &:focus { + background: var(--priority-plus-navigation--background-hover); + color: var(--priority-plus-navigation--color-hover); + } + + &:focus-visible { + outline: 2px solid currentColor; + outline-offset: -2px; + } + .priority-plus-navigation-icon { display: inline-flex; align-items: center; @@ -164,6 +175,7 @@ color: inherit; text-align: left; transition: background 0.2s ease, color 0.2s ease; + outline: none; .priority-plus-navigation-accordion-text { flex: 1; @@ -179,6 +191,16 @@ color: var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color); } + &:focus { + background: var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color); + color: var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color); + } + + &:focus-visible { + outline: 2px solid currentColor; + outline-offset: -2px; + } + &[aria-expanded="true"] { .priority-plus-navigation-accordion-arrow { @@ -209,6 +231,7 @@ color: inherit; flex-shrink: 0; transition: background 0.2s ease, color 0.2s ease; + outline: none; .priority-plus-navigation-accordion-arrow { transition: transform 0.2s ease; @@ -220,6 +243,16 @@ color: var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color); } + &:focus { + background: var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color); + color: var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color); + } + + &:focus-visible { + outline: 2px solid currentColor; + outline-offset: -2px; + } + &[aria-expanded="true"] { .priority-plus-navigation-accordion-arrow { From f0a26dd192816758589bdb1db07c9fff51d29dd5 Mon Sep 17 00:00:00 2001 From: Troy Chaplin Date: Sat, 3 Jan 2026 09:15:16 -0500 Subject: [PATCH 02/40] add: block attr for drop down menu --- build/priority-plus-nav-editor.asset.php | 2 +- build/priority-plus-nav-editor.js | 2 +- classes/class-enqueues.php | 32 ++++++++++++++++++++++-- src/variation/block.js | 25 ++++++++++++++++++ 4 files changed, 57 insertions(+), 4 deletions(-) diff --git a/build/priority-plus-nav-editor.asset.php b/build/priority-plus-nav-editor.asset.php index c350a4c..b075e48 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' => 'a9403ae7aada4b841451'); diff --git a/build/priority-plus-nav-editor.js b/build/priority-plus-nav-editor.js index 72095d5..a769e04 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,r=window.wp.blocks,e=window.wp.primitives,i=window.ReactJSXRuntime;var t=(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 a=window.wp.hooks;(0,r.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,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"}},isActive:(o,r)=>o.className?.includes(r.className)}),(0,a.addFilter)("blocks.registerBlockType","priority-plus-navigation/extend-core-navigation",(o,r)=>"core/navigation"!==r?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},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"}}}});const n=window.wp.blockEditor,l=window.wp.components,s=window.wp.compose,p=window.wp.element,d=(0,s.createHigherOrderComponent)(o=>r=>{const{name:e,attributes:t}=r;if("core/navigation"!==e)return(0,i.jsx)(o,{...r});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 r=o.querySelector('.components-toggle-group-control-option-base[data-value="always"]');r&&(r.style.opacity="0.4",r.style.pointerEvents="none",r.style.textDecoration="line-through",r.style.cursor="not-allowed")},[a,t.overlayMenu]),(0,i.jsx)(o,{...r})},"addDisableAlwaysOption"),v=(0,s.createHigherOrderComponent)(r=>e=>{const{name:t,attributes:a,setAttributes:s}=e;if("core/navigation"!==t)return(0,i.jsx)(r,{...e});const d=(a.className||"").includes("is-style-priority-plus-navigation")||!0===a.priorityNavEnabled;if(!d)return(0,i.jsx)(r,{...e});const{priorityNavEnabled:v,priorityNavMoreLabel:u,priorityNavMoreBackgroundColor:y,priorityNavMoreBackgroundColorHover:c,priorityNavMoreTextColor:g,priorityNavMoreTextColorHover:b,priorityNavMorePadding:m,overlayMenu:x}=a;(0,p.useEffect)(()=>{d&&"always"===x&&s({overlayMenu:"mobile"})},[d,x,s]);const w=(0,n.useSetting)("spacing.spacingSizes")||[];return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(r,{...e}),(0,i.jsx)(n.InspectorControls,{group:"settings",children:(0,i.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,i.jsxs)(n.InspectorControls,{group:"styles",children:[(0,i.jsx)(l.__experimentalToolsPanel,{label:(0,o.__)("Priority Plus Settings","priority-plus-navigation"),resetAll:()=>s({priorityNavMoreLabel:"More"}),children:(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>!!u,label:(0,o.__)("More Button Label","priority-plus-navigation"),onDeselect:()=>s({priorityNavMoreLabel:"More"}),isShownByDefault:!0,children:(0,i.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,i.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,i.jsx)(l.__experimentalToolsPanel,{label:(0,o.__)("Priority Plus Button","priority-plus-navigation"),resetAll:()=>s({priorityNavMorePadding:void 0}),children:(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>!!m&&Object.keys(m).length>0,label:(0,o.__)("Padding","priority-plus-navigation"),onDeselect:()=>s({priorityNavMorePadding:void 0}),isShownByDefault:!0,children:w.length>0?(0,i.jsx)(n.__experimentalSpacingSizesControl,{values:m,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,i.jsx)(l.BoxControl,{label:(0,o.__)("Button Padding","priority-plus-navigation"),values:m,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",d,5),(0,a.addFilter)("editor.BlockEdit","priority-plus-navigation/add-priority-plus-navigation-controls",v,10)})(); \ No newline at end of file diff --git a/classes/class-enqueues.php b/classes/class-enqueues.php index e793b22..dea1c6b 100644 --- a/classes/class-enqueues.php +++ b/classes/class-enqueues.php @@ -150,6 +150,7 @@ public function render_block( string $block_content, array $block ): string { $more_text_color_hover = $this->get_priority_attr( $block, 'priorityNavMoreTextColorHover', '' ); $more_padding = $this->get_priority_attr( $block, 'priorityNavMorePadding', array() ); $overlay_menu = $this->get_priority_attr( $block, 'overlayMenu', 'never' ); + $dropdown_styles = $this->get_priority_attr( $block, 'priorityNavDropdownStyles', array() ); // Inject data attributes into the navigation element. return $this->inject_priority_attributes( @@ -161,7 +162,8 @@ public function render_block( string $block_content, array $block ): string { $more_text_color, $more_text_color_hover, $more_padding, - $overlay_menu + $overlay_menu, + $dropdown_styles ); } @@ -307,9 +309,10 @@ private function padding_to_css( array $padding ): string { * @param string $more_text_color_hover The "more" button text hover color. * @param array $more_padding The "more" button padding values. * @param string $overlay_menu The overlay menu setting (never, mobile, always). + * @param array $dropdown_styles The dropdown menu style settings. * @return string Modified block content with data attributes. */ - 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' ): string { + 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() ): string { if ( '' === $block_content ) { return $block_content; } @@ -368,6 +371,31 @@ private function inject_priority_attributes( string $block_content, string $more } } + // 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 ] ) + ); + } + } + } + // Build attributes string. $attributes = sprintf( '$1 data-more-label="%s" data-more-icon="%s" data-overlay-menu="%s"', diff --git a/src/variation/block.js b/src/variation/block.js index a810f48..16bdd52 100644 --- a/src/variation/block.js +++ b/src/variation/block.js @@ -27,6 +27,17 @@ registerBlockVariation('core/navigation', { priorityNavMoreBackgroundColorHover: undefined, priorityNavMoreTextColor: undefined, priorityNavMoreTextColorHover: undefined, + 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', + }, }, isActive: (blockAttributes, variationAttributes) => { return blockAttributes.className?.includes( @@ -78,6 +89,20 @@ addFilter( type: 'object', default: undefined, }, + 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', + }, + }, }, }; } From 36e79b071fc4fbcfa2c112eef551d6463e7a40fe Mon Sep 17 00:00:00 2001 From: Troy Chaplin Date: Sat, 3 Jan 2026 09:32:04 -0500 Subject: [PATCH 03/40] add: admin modal --- build/priority-plus-nav-editor-rtl.css | 1 + build/priority-plus-nav-editor.asset.php | 2 +- build/priority-plus-nav-editor.css | 1 + build/priority-plus-nav-editor.js | 2 +- src/dom/dom-builder.js | 3 +- src/events/event-handlers.js | 4 +- .../components/dropdown-customizer-modal.js | 51 ++++++++ .../components/dropdown-customizer-modal.scss | 61 +++++++++ src/variation/controls.js | 118 ++++++++++++++++-- 9 files changed, 230 insertions(+), 13 deletions(-) create mode 100644 src/variation/components/dropdown-customizer-modal.js create mode 100644 src/variation/components/dropdown-customizer-modal.scss diff --git a/build/priority-plus-nav-editor-rtl.css b/build/priority-plus-nav-editor-rtl.css index 5e7b9ef..0e02e40 100644 --- a/build/priority-plus-nav-editor-rtl.css +++ b/build/priority-plus-nav-editor-rtl.css @@ -1 +1,2 @@ +.priority-plus-dropdown-customizer .components-modal__content{display:flex;flex-direction:column;min-height:600px;padding:0}.priority-plus-dropdown-customizer .dropdown-customizer-layout{display:grid;flex:1;gap:2rem;grid-template-columns:1fr 1fr;overflow:hidden;padding:2rem}.priority-plus-dropdown-customizer .dropdown-customizer-controls{overflow-y:auto;padding-left:1rem}.priority-plus-dropdown-customizer .dropdown-customizer-controls .components-tools-panel{margin-bottom:1.5rem}.priority-plus-dropdown-customizer .dropdown-customizer-preview{align-items:center;background:#f5f5f5;border-radius:4px;display:flex;justify-content:center;overflow-y:auto;padding:2rem;position:sticky;top:0}.priority-plus-dropdown-customizer .dropdown-customizer-footer{align-items:center;background:#fff;border-top:1px solid #ddd;display:flex;justify-content:space-between;padding:1rem 2rem}@media(max-width:960px){.priority-plus-dropdown-customizer .dropdown-customizer-layout{grid-template-columns:1fr}.priority-plus-dropdown-customizer .dropdown-customizer-preview{min-height:300px;position:static}} :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} diff --git a/build/priority-plus-nav-editor.asset.php b/build/priority-plus-nav-editor.asset.php index b075e48..0edace3 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' => 'a9403ae7aada4b841451'); + array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-primitives'), 'version' => 'aec0ebdfcd95602fd9d4'); diff --git a/build/priority-plus-nav-editor.css b/build/priority-plus-nav-editor.css index 5e7b9ef..d52ef8d 100644 --- a/build/priority-plus-nav-editor.css +++ b/build/priority-plus-nav-editor.css @@ -1 +1,2 @@ +.priority-plus-dropdown-customizer .components-modal__content{display:flex;flex-direction:column;min-height:600px;padding:0}.priority-plus-dropdown-customizer .dropdown-customizer-layout{display:grid;flex:1;gap:2rem;grid-template-columns:1fr 1fr;overflow:hidden;padding:2rem}.priority-plus-dropdown-customizer .dropdown-customizer-controls{overflow-y:auto;padding-right:1rem}.priority-plus-dropdown-customizer .dropdown-customizer-controls .components-tools-panel{margin-bottom:1.5rem}.priority-plus-dropdown-customizer .dropdown-customizer-preview{align-items:center;background:#f5f5f5;border-radius:4px;display:flex;justify-content:center;overflow-y:auto;padding:2rem;position:sticky;top:0}.priority-plus-dropdown-customizer .dropdown-customizer-footer{align-items:center;background:#fff;border-top:1px solid #ddd;display:flex;justify-content:space-between;padding:1rem 2rem}@media(max-width:960px){.priority-plus-dropdown-customizer .dropdown-customizer-layout{grid-template-columns:1fr}.priority-plus-dropdown-customizer .dropdown-customizer-preview{min-height:300px;position:static}} :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} diff --git a/build/priority-plus-nav-editor.js b/build/priority-plus-nav-editor.js index a769e04..7e0d979 100644 --- a/build/priority-plus-nav-editor.js +++ b/build/priority-plus-nav-editor.js @@ -1 +1 @@ -(()=>{"use strict";const o=window.wp.i18n,r=window.wp.blocks,e=window.wp.primitives,i=window.ReactJSXRuntime;var t=(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 a=window.wp.hooks;(0,r.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,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"}},isActive:(o,r)=>o.className?.includes(r.className)}),(0,a.addFilter)("blocks.registerBlockType","priority-plus-navigation/extend-core-navigation",(o,r)=>"core/navigation"!==r?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},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"}}}});const n=window.wp.blockEditor,l=window.wp.components,s=window.wp.compose,p=window.wp.element,d=(0,s.createHigherOrderComponent)(o=>r=>{const{name:e,attributes:t}=r;if("core/navigation"!==e)return(0,i.jsx)(o,{...r});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 r=o.querySelector('.components-toggle-group-control-option-base[data-value="always"]');r&&(r.style.opacity="0.4",r.style.pointerEvents="none",r.style.textDecoration="line-through",r.style.cursor="not-allowed")},[a,t.overlayMenu]),(0,i.jsx)(o,{...r})},"addDisableAlwaysOption"),v=(0,s.createHigherOrderComponent)(r=>e=>{const{name:t,attributes:a,setAttributes:s}=e;if("core/navigation"!==t)return(0,i.jsx)(r,{...e});const d=(a.className||"").includes("is-style-priority-plus-navigation")||!0===a.priorityNavEnabled;if(!d)return(0,i.jsx)(r,{...e});const{priorityNavEnabled:v,priorityNavMoreLabel:u,priorityNavMoreBackgroundColor:y,priorityNavMoreBackgroundColorHover:c,priorityNavMoreTextColor:g,priorityNavMoreTextColorHover:b,priorityNavMorePadding:m,overlayMenu:x}=a;(0,p.useEffect)(()=>{d&&"always"===x&&s({overlayMenu:"mobile"})},[d,x,s]);const w=(0,n.useSetting)("spacing.spacingSizes")||[];return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(r,{...e}),(0,i.jsx)(n.InspectorControls,{group:"settings",children:(0,i.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,i.jsxs)(n.InspectorControls,{group:"styles",children:[(0,i.jsx)(l.__experimentalToolsPanel,{label:(0,o.__)("Priority Plus Settings","priority-plus-navigation"),resetAll:()=>s({priorityNavMoreLabel:"More"}),children:(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>!!u,label:(0,o.__)("More Button Label","priority-plus-navigation"),onDeselect:()=>s({priorityNavMoreLabel:"More"}),isShownByDefault:!0,children:(0,i.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,i.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,i.jsx)(l.__experimentalToolsPanel,{label:(0,o.__)("Priority Plus Button","priority-plus-navigation"),resetAll:()=>s({priorityNavMorePadding:void 0}),children:(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>!!m&&Object.keys(m).length>0,label:(0,o.__)("Padding","priority-plus-navigation"),onDeselect:()=>s({priorityNavMorePadding:void 0}),isShownByDefault:!0,children:w.length>0?(0,i.jsx)(n.__experimentalSpacingSizesControl,{values:m,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,i.jsx)(l.BoxControl,{label:(0,o.__)("Button Padding","priority-plus-navigation"),values:m,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",d,5),(0,a.addFilter)("editor.BlockEdit","priority-plus-navigation/add-priority-plus-navigation-controls",v,10)})(); \ No newline at end of file +(()=>{"use strict";const o=window.wp.i18n,r=window.wp.blocks,e=window.wp.primitives,i=window.ReactJSXRuntime;var t=(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;(0,r.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,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"}},isActive:(o,r)=>o.className?.includes(r.className)}),(0,n.addFilter)("blocks.registerBlockType","priority-plus-navigation/extend-core-navigation",(o,r)=>"core/navigation"!==r?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},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"}}}});const a=window.wp.blockEditor,l=window.wp.components,s=window.wp.compose,p=window.wp.element;function d({attributes:r,setAttributes:e,onClose:t}){const{priorityNavDropdownStyles:n={}}=r;return(0,i.jsxs)(l.Modal,{title:(0,o.__)("Customize Dropdown Styles","priority-plus-navigation"),onRequestClose:t,className:"priority-plus-dropdown-customizer",size:"fill",isDismissible:!0,children:[(0,i.jsxs)("div",{className:"dropdown-customizer-layout",children:[(0,i.jsx)("div",{className:"dropdown-customizer-controls",children:(0,i.jsx)("p",{children:(0,o.__)("Controls will go here","priority-plus-navigation")})}),(0,i.jsx)("div",{className:"dropdown-customizer-preview",children:(0,i.jsx)("p",{children:(0,o.__)("Preview will go here","priority-plus-navigation")})})]}),(0,i.jsx)("div",{className:"dropdown-customizer-footer",children:(0,i.jsx)(l.Button,{variant:"primary",onClick:t,children:(0,o.__)("Done","priority-plus-navigation")})})]})}const v=(0,s.createHigherOrderComponent)(o=>r=>{const{name:e,attributes:t}=r;if("core/navigation"!==e)return(0,i.jsx)(o,{...r});const n=(t.className||"").includes("is-style-priority-plus-navigation")||!0===t.priorityNavEnabled;return(0,p.useEffect)(()=>{if(!n)return;const o=document.querySelector(".block-editor-block-inspector");if(!o)return;const r=o.querySelector('.components-toggle-group-control-option-base[data-value="always"]');r&&(r.style.opacity="0.4",r.style.pointerEvents="none",r.style.textDecoration="line-through",r.style.cursor="not-allowed")},[n,t.overlayMenu]),(0,i.jsx)(o,{...r})},"addDisableAlwaysOption"),u=(0,s.createHigherOrderComponent)(r=>e=>{const{name:t,attributes:n,setAttributes:s}=e;if("core/navigation"!==t)return(0,i.jsx)(r,{...e});const v=(n.className||"").includes("is-style-priority-plus-navigation")||!0===n.priorityNavEnabled;if(!v)return(0,i.jsx)(r,{...e});const{priorityNavEnabled:u,priorityNavMoreLabel:c,priorityNavMoreBackgroundColor:y,priorityNavMoreBackgroundColorHover:g,priorityNavMoreTextColor:b,priorityNavMoreTextColorHover:m,priorityNavMorePadding:x,overlayMenu:w}=n,[h,_]=(0,p.useState)(!1);(0,p.useEffect)(()=>{v&&"always"===w&&s({overlayMenu:"mobile"})},[v,w,s]);const C=(0,a.useSetting)("spacing.spacingSizes")||[];return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(r,{...e}),(0,i.jsx)(a.InspectorControls,{group:"settings",children:(0,i.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,i.jsxs)(a.InspectorControls,{group:"styles",children:[(0,i.jsx)(l.__experimentalToolsPanel,{label:(0,o.__)("Priority Plus Settings","priority-plus-navigation"),resetAll:()=>s({priorityNavMoreLabel:"More"}),children:(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>!!c,label:(0,o.__)("More Button Label","priority-plus-navigation"),onDeselect:()=>s({priorityNavMoreLabel:"More"}),isShownByDefault:!0,children:(0,i.jsx)(l.TextControl,{label:(0,o.__)("More Button Label","priority-plus-navigation"),value:c,onChange:o=>s({priorityNavMoreLabel:o}),help:(0,o.__)('Text displayed on the "More" button',"priority-plus-navigation")})})}),(0,i.jsx)(a.PanelColorSettings,{title:(0,o.__)("Priority Plus Colors","priority-plus-navigation"),colorSettings:[{label:(0,o.__)("Button Text Color","priority-plus-navigation"),value:b,onChange:o=>s({priorityNavMoreTextColor:o||void 0}),clearable:!0},{label:(0,o.__)("Button Text Hover Color","priority-plus-navigation"),value:m,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:g,onChange:o=>s({priorityNavMoreBackgroundColorHover:o||void 0}),clearable:!0}]}),(0,i.jsx)(l.__experimentalToolsPanel,{label:(0,o.__)("Priority Plus Button","priority-plus-navigation"),resetAll:()=>s({priorityNavMorePadding:void 0}),children:(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>!!x&&Object.keys(x).length>0,label:(0,o.__)("Padding","priority-plus-navigation"),onDeselect:()=>s({priorityNavMorePadding:void 0}),isShownByDefault:!0,children:C.length>0?(0,i.jsx)(a.__experimentalSpacingSizesControl,{values:x,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,i.jsx)(l.BoxControl,{label:(0,o.__)("Button Padding","priority-plus-navigation"),values:x,onChange:o=>s({priorityNavMorePadding:o}),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"],allowReset:!0})})}),(0,i.jsx)(l.__experimentalToolsPanel,{label:(0,o.__)("Dropdown Styles","priority-plus-navigation"),resetAll:()=>{s({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"}})},children:(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>{const{priorityNavDropdownStyles:o}=n;return!!o&&Object.keys(o).length>0},label:(0,o.__)("Customize Dropdown","priority-plus-navigation"),onDeselect:()=>s({priorityNavDropdownStyles:void 0}),isShownByDefault:!0,children:(0,i.jsx)(l.Button,{variant:"secondary",onClick:()=>_(!0),style:{width:"100%"},children:(0,o.__)("Customize Dropdown Styles","priority-plus-navigation")})})})]}),h&&(0,i.jsx)(d,{attributes:n,setAttributes:s,onClose:()=>_(!1)})]})},"withPriorityNavControls");(0,n.addFilter)("editor.BlockEdit","priority-plus-navigation/add-disable-always-option",v,5),(0,n.addFilter)("editor.BlockEdit","priority-plus-navigation/add-priority-plus-navigation-controls",u,10)})(); \ No newline at end of file diff --git a/src/dom/dom-builder.js b/src/dom/dom-builder.js index d7a8281..aa01bd8 100644 --- a/src/dom/dom-builder.js +++ b/src/dom/dom-builder.js @@ -19,7 +19,8 @@ export function createMoreButton(list, moreLabel = DEFAULT_MORE_LABEL) { // Create button const moreButton = document.createElement('button'); moreButton.type = 'button'; - moreButton.className = 'priority-plus-navigation-more-button wp-block-navigation-item'; + moreButton.className = + 'priority-plus-navigation-more-button wp-block-navigation-item'; moreButton.setAttribute('aria-expanded', 'false'); moreButton.setAttribute('aria-haspopup', 'true'); moreButton.setAttribute('aria-label', moreLabel); diff --git a/src/events/event-handlers.js b/src/events/event-handlers.js index a4323b7..5b8af11 100644 --- a/src/events/event-handlers.js +++ b/src/events/event-handlers.js @@ -54,7 +54,9 @@ export function setupEventListeners(elements, instance, callbacks) { // Event delegation for accordion toggles const dropdownClickHandler = (e) => { - const toggle = e.target.closest('.priority-plus-navigation-accordion-toggle'); + const toggle = e.target.closest( + '.priority-plus-navigation-accordion-toggle' + ); if (toggle) { e.preventDefault(); e.stopPropagation(); diff --git a/src/variation/components/dropdown-customizer-modal.js b/src/variation/components/dropdown-customizer-modal.js new file mode 100644 index 0000000..090df32 --- /dev/null +++ b/src/variation/components/dropdown-customizer-modal.js @@ -0,0 +1,51 @@ +/** + * 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')} +

+
+
+ +
+ +
+ + ); +} diff --git a/src/variation/components/dropdown-customizer-modal.scss b/src/variation/components/dropdown-customizer-modal.scss new file mode 100644 index 0000000..0bee11a --- /dev/null +++ b/src/variation/components/dropdown-customizer-modal.scss @@ -0,0 +1,61 @@ +.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; + } + } +} diff --git a/src/variation/controls.js b/src/variation/controls.js index 159975f..3159c51 100644 --- a/src/variation/controls.js +++ b/src/variation/controls.js @@ -14,11 +14,17 @@ import { SelectControl, BoxControl, Notice, + Button, __experimentalToolsPanel as ToolsPanel, __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; import { createHigherOrderComponent } from '@wordpress/compose'; -import { useEffect, useRef } from '@wordpress/element'; +import { useEffect, useRef, useState } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { DropdownCustomizerModal } from './components/dropdown-customizer-modal'; /** * Add DOM manipulation to disable 'always' overlay option when Priority+ is active @@ -102,6 +108,10 @@ const withPriorityNavControls = createHigherOrderComponent((BlockEdit) => { overlayMenu, } = attributes; + // State for dropdown customizer modal + const [isDropdownCustomizerOpen, setIsDropdownCustomizerOpen] = + useState(false); + // Automatically change overlayMenu from 'always' to 'mobile' when Priority+ is active useEffect(() => { if (isPriorityNavVariation && overlayMenu === 'always') { @@ -135,7 +145,10 @@ const withPriorityNavControls = createHigherOrderComponent((BlockEdit) => { setAttributes({ priorityNavMoreLabel: 'More', @@ -144,7 +157,10 @@ const withPriorityNavControls = createHigherOrderComponent((BlockEdit) => { > !!priorityNavMoreLabel} - label={__('More Button Label', 'priority-plus-navigation')} + label={__( + 'More Button Label', + 'priority-plus-navigation' + )} onDeselect={() => setAttributes({ priorityNavMoreLabel: 'More', @@ -153,7 +169,10 @@ const withPriorityNavControls = createHigherOrderComponent((BlockEdit) => { isShownByDefault > setAttributes({ @@ -168,10 +187,16 @@ const withPriorityNavControls = createHigherOrderComponent((BlockEdit) => { setAttributes({ @@ -222,7 +247,10 @@ const withPriorityNavControls = createHigherOrderComponent((BlockEdit) => { ]} /> setAttributes({ priorityNavMorePadding: undefined, @@ -247,13 +275,19 @@ const withPriorityNavControls = createHigherOrderComponent((BlockEdit) => { priorityNavMorePadding: value, }) } - label={__('Button Padding', 'priority-plus-navigation')} + label={__( + 'Button Padding', + 'priority-plus-navigation' + )} sides={['top', 'right', 'bottom', 'left']} units={['px', 'em', 'rem', 'vh', 'vw']} /> ) : ( setAttributes({ @@ -267,7 +301,73 @@ const withPriorityNavControls = createHigherOrderComponent((BlockEdit) => { )} + { + 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)} + /> + )} ); }; From 68446af1a491b646270b1bec175532ed69351f99 Mon Sep 17 00:00:00 2001 From: Troy Chaplin Date: Sat, 3 Jan 2026 09:47:11 -0500 Subject: [PATCH 04/40] change: admin modal styles --- build/priority-plus-nav-editor-rtl.css | 2 +- build/priority-plus-nav-editor.asset.php | 2 +- build/priority-plus-nav-editor.css | 2 +- src/variation/components/dropdown-customizer-modal.scss | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/build/priority-plus-nav-editor-rtl.css b/build/priority-plus-nav-editor-rtl.css index 0e02e40..a6750c0 100644 --- a/build/priority-plus-nav-editor-rtl.css +++ b/build/priority-plus-nav-editor-rtl.css @@ -1,2 +1,2 @@ -.priority-plus-dropdown-customizer .components-modal__content{display:flex;flex-direction:column;min-height:600px;padding:0}.priority-plus-dropdown-customizer .dropdown-customizer-layout{display:grid;flex:1;gap:2rem;grid-template-columns:1fr 1fr;overflow:hidden;padding:2rem}.priority-plus-dropdown-customizer .dropdown-customizer-controls{overflow-y:auto;padding-left:1rem}.priority-plus-dropdown-customizer .dropdown-customizer-controls .components-tools-panel{margin-bottom:1.5rem}.priority-plus-dropdown-customizer .dropdown-customizer-preview{align-items:center;background:#f5f5f5;border-radius:4px;display:flex;justify-content:center;overflow-y:auto;padding:2rem;position:sticky;top:0}.priority-plus-dropdown-customizer .dropdown-customizer-footer{align-items:center;background:#fff;border-top:1px solid #ddd;display:flex;justify-content:space-between;padding:1rem 2rem}@media(max-width:960px){.priority-plus-dropdown-customizer .dropdown-customizer-layout{grid-template-columns:1fr}.priority-plus-dropdown-customizer .dropdown-customizer-preview{min-height:300px;position:static}} +.priority-plus-dropdown-customizer .components-modal__content{display:flex;flex-direction:column;min-height:600px;padding:0}.priority-plus-dropdown-customizer .dropdown-customizer-layout{display:grid;flex:1;gap:2rem;grid-template-columns:1fr 1fr;overflow:hidden;padding:2rem}.priority-plus-dropdown-customizer .dropdown-customizer-controls{overflow-y:auto;padding-left:1rem}.priority-plus-dropdown-customizer .dropdown-customizer-controls .components-tools-panel{margin-bottom:1.5rem}.priority-plus-dropdown-customizer .dropdown-customizer-preview{align-items:center;background:#f5f5f5;border-radius:4px;display:flex;justify-content:center;overflow-y:auto;padding:2rem;position:sticky;top:0}.priority-plus-dropdown-customizer .dropdown-customizer-footer{align-items:center;background:#fff;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}.priority-plus-dropdown-customizer .dropdown-customizer-preview{min-height:300px;position:static}} :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} diff --git a/build/priority-plus-nav-editor.asset.php b/build/priority-plus-nav-editor.asset.php index 0edace3..c84665d 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' => 'aec0ebdfcd95602fd9d4'); + array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-primitives'), 'version' => '7388d50f8e32ee000998'); diff --git a/build/priority-plus-nav-editor.css b/build/priority-plus-nav-editor.css index d52ef8d..f020635 100644 --- a/build/priority-plus-nav-editor.css +++ b/build/priority-plus-nav-editor.css @@ -1,2 +1,2 @@ -.priority-plus-dropdown-customizer .components-modal__content{display:flex;flex-direction:column;min-height:600px;padding:0}.priority-plus-dropdown-customizer .dropdown-customizer-layout{display:grid;flex:1;gap:2rem;grid-template-columns:1fr 1fr;overflow:hidden;padding:2rem}.priority-plus-dropdown-customizer .dropdown-customizer-controls{overflow-y:auto;padding-right:1rem}.priority-plus-dropdown-customizer .dropdown-customizer-controls .components-tools-panel{margin-bottom:1.5rem}.priority-plus-dropdown-customizer .dropdown-customizer-preview{align-items:center;background:#f5f5f5;border-radius:4px;display:flex;justify-content:center;overflow-y:auto;padding:2rem;position:sticky;top:0}.priority-plus-dropdown-customizer .dropdown-customizer-footer{align-items:center;background:#fff;border-top:1px solid #ddd;display:flex;justify-content:space-between;padding:1rem 2rem}@media(max-width:960px){.priority-plus-dropdown-customizer .dropdown-customizer-layout{grid-template-columns:1fr}.priority-plus-dropdown-customizer .dropdown-customizer-preview{min-height:300px;position:static}} +.priority-plus-dropdown-customizer .components-modal__content{display:flex;flex-direction:column;min-height:600px;padding:0}.priority-plus-dropdown-customizer .dropdown-customizer-layout{display:grid;flex:1;gap:2rem;grid-template-columns:1fr 1fr;overflow:hidden;padding:2rem}.priority-plus-dropdown-customizer .dropdown-customizer-controls{overflow-y:auto;padding-right:1rem}.priority-plus-dropdown-customizer .dropdown-customizer-controls .components-tools-panel{margin-bottom:1.5rem}.priority-plus-dropdown-customizer .dropdown-customizer-preview{align-items:center;background:#f5f5f5;border-radius:4px;display:flex;justify-content:center;overflow-y:auto;padding:2rem;position:sticky;top:0}.priority-plus-dropdown-customizer .dropdown-customizer-footer{align-items:center;background:#fff;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}.priority-plus-dropdown-customizer .dropdown-customizer-preview{min-height:300px;position:static}} :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} diff --git a/src/variation/components/dropdown-customizer-modal.scss b/src/variation/components/dropdown-customizer-modal.scss index 0bee11a..f9e1537 100644 --- a/src/variation/components/dropdown-customizer-modal.scss +++ b/src/variation/components/dropdown-customizer-modal.scss @@ -48,7 +48,7 @@ } // Responsive: stack on smaller screens - @media (max-width: 960px) { + @media (max-width: 896px) { .dropdown-customizer-layout { grid-template-columns: 1fr; } From 7f0c3b0c361cf1c0905193338ec96b7d05b570c5 Mon Sep 17 00:00:00 2001 From: Troy Chaplin Date: Sat, 3 Jan 2026 10:35:56 -0500 Subject: [PATCH 05/40] change: modal preview --- build/priority-plus-nav-editor-rtl.css | 3 +- build/priority-plus-nav-editor.asset.php | 2 +- build/priority-plus-nav-editor.css | 3 +- build/priority-plus-nav-editor.js | 2 +- build/style-priority-plus-navigation-rtl.css | 2 +- build/style-priority-plus-navigation.css | 2 +- src/styles/style.scss | 3 + .../components/dropdown-customizer-modal.js | 463 +++++++++++++++++- .../components/dropdown-customizer-modal.scss | 27 +- src/variation/components/dropdown-preview.js | 115 +++++ .../components/dropdown-preview.scss | 117 +++++ 11 files changed, 723 insertions(+), 16 deletions(-) create mode 100644 src/variation/components/dropdown-preview.js create mode 100644 src/variation/components/dropdown-preview.scss diff --git a/build/priority-plus-nav-editor-rtl.css b/build/priority-plus-nav-editor-rtl.css index a6750c0..0ff65ab 100644 --- a/build/priority-plus-nav-editor-rtl.css +++ b/build/priority-plus-nav-editor-rtl.css @@ -1,2 +1,3 @@ -.priority-plus-dropdown-customizer .components-modal__content{display:flex;flex-direction:column;min-height:600px;padding:0}.priority-plus-dropdown-customizer .dropdown-customizer-layout{display:grid;flex:1;gap:2rem;grid-template-columns:1fr 1fr;overflow:hidden;padding:2rem}.priority-plus-dropdown-customizer .dropdown-customizer-controls{overflow-y:auto;padding-left:1rem}.priority-plus-dropdown-customizer .dropdown-customizer-controls .components-tools-panel{margin-bottom:1.5rem}.priority-plus-dropdown-customizer .dropdown-customizer-preview{align-items:center;background:#f5f5f5;border-radius:4px;display:flex;justify-content:center;overflow-y:auto;padding:2rem;position:sticky;top:0}.priority-plus-dropdown-customizer .dropdown-customizer-footer{align-items:center;background:#fff;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}.priority-plus-dropdown-customizer .dropdown-customizer-preview{min-height:300px;position:static}} +.priority-plus-dropdown-customizer .components-modal__content{display:flex;flex-direction:column;min-height:600px;padding:0}.priority-plus-dropdown-customizer .dropdown-customizer-layout{display:grid;flex:1;gap:2rem;grid-template-columns:1fr 1fr;overflow:hidden;padding:2rem}.priority-plus-dropdown-customizer .dropdown-customizer-controls{overflow-y:auto;padding-left:1rem}.priority-plus-dropdown-customizer .dropdown-customizer-controls .components-tools-panel{margin-bottom:1.5rem}.priority-plus-dropdown-customizer .dropdown-customizer-preview{align-items:flex-start;background:#f5f5f5;border-radius:4px;display:flex;justify-content:center;max-height:calc(100vh - 200px);overflow-y:auto;padding:2rem;position:sticky;top:2rem}.priority-plus-dropdown-customizer .dropdown-customizer-footer{align-items:center;background:#fff;border-top:1px solid #ddd;display:flex;justify-content:space-between;padding:1rem 2rem}.priority-plus-dropdown-customizer .dropdown-customizer-control{margin-bottom:1rem}.priority-plus-dropdown-customizer .dropdown-customizer-control label{color:#1e1e1e;display:block;font-size:11px;font-weight:500;margin-bottom:.5rem;text-transform:uppercase}.priority-plus-dropdown-customizer .dropdown-customizer-control .components-color-picker{margin-top:.5rem}.priority-plus-dropdown-customizer .components-tools-panel-item{margin-bottom:0}@media(max-width:896px){.priority-plus-dropdown-customizer .dropdown-customizer-layout{grid-template-columns:1fr}.priority-plus-dropdown-customizer .dropdown-customizer-preview{min-height:300px;position:static}} +.dropdown-preview-wrapper{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:flex-start;padding-top:1rem;width:100%}.dropdown-preview-container{background-color:var(--preview-background-color);border:var(--preview-border-width) solid var(--preview-border-color);border-radius:var(--preview-border-radius);box-shadow:var(--preview-box-shadow);font-size:16px;line-height:1.5;max-width:320px;min-width:280px;transition:all .2s ease;width:100%}.dropdown-preview-menu{list-style:none;margin:0;padding:0}.dropdown-preview-item{margin:0}.dropdown-preview-item a{background:transparent;border:none;color:inherit;cursor:pointer;display:block;font-size:inherit;line-height:inherit;padding:var(--preview-item-spacing);text-align:right;text-decoration:none;transition:all .2s ease;width:100%}.dropdown-preview-item.dropdown-preview-item--hover a{background-color:var(--preview-item-hover-background);color:var(--preview-item-hover-text)}.dropdown-preview-item.dropdown-preview-item--nested a{padding-right:var(--preview-multi-level-indent)}.dropdown-preview-accordion-toggle{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;justify-content:space-between;padding:var(--preview-item-spacing);text-align:right;transition:background .2s ease,color .2s ease;width:100%}.dropdown-preview-accordion-toggle .dropdown-preview-accordion-text{flex:1}.dropdown-preview-accordion-toggle .dropdown-preview-accordion-arrow{display:inline-block;font-size:.75em;margin-right:.5rem;transition:transform .2s ease}.dropdown-preview-accordion-toggle:hover{background-color:var(--preview-item-hover-background);color:var(--preview-item-hover-text)}.dropdown-preview-accordion-toggle[aria-expanded=true] .dropdown-preview-accordion-arrow{transform:rotate(-90deg)}.dropdown-preview-submenu{background-color:var(--preview-background-color);list-style:none;margin:0;padding:0}.dropdown-preview-help{color:#757575;font-size:11px;font-style:italic;margin-top:1rem;padding:0 1rem;text-align:center}.dropdown-preview-item:not(.dropdown-preview-item--hover):not(.dropdown-preview-item--has-accordion) a:hover{background-color:var(--preview-item-hover-background);color:var(--preview-item-hover-text)} :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} diff --git a/build/priority-plus-nav-editor.asset.php b/build/priority-plus-nav-editor.asset.php index c84665d..2e8f149 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' => '7388d50f8e32ee000998'); + array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-primitives'), 'version' => 'feb672c3816b03faeb1d'); diff --git a/build/priority-plus-nav-editor.css b/build/priority-plus-nav-editor.css index f020635..aa73cc6 100644 --- a/build/priority-plus-nav-editor.css +++ b/build/priority-plus-nav-editor.css @@ -1,2 +1,3 @@ -.priority-plus-dropdown-customizer .components-modal__content{display:flex;flex-direction:column;min-height:600px;padding:0}.priority-plus-dropdown-customizer .dropdown-customizer-layout{display:grid;flex:1;gap:2rem;grid-template-columns:1fr 1fr;overflow:hidden;padding:2rem}.priority-plus-dropdown-customizer .dropdown-customizer-controls{overflow-y:auto;padding-right:1rem}.priority-plus-dropdown-customizer .dropdown-customizer-controls .components-tools-panel{margin-bottom:1.5rem}.priority-plus-dropdown-customizer .dropdown-customizer-preview{align-items:center;background:#f5f5f5;border-radius:4px;display:flex;justify-content:center;overflow-y:auto;padding:2rem;position:sticky;top:0}.priority-plus-dropdown-customizer .dropdown-customizer-footer{align-items:center;background:#fff;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}.priority-plus-dropdown-customizer .dropdown-customizer-preview{min-height:300px;position:static}} +.priority-plus-dropdown-customizer .components-modal__content{display:flex;flex-direction:column;min-height:600px;padding:0}.priority-plus-dropdown-customizer .dropdown-customizer-layout{display:grid;flex:1;gap:2rem;grid-template-columns:1fr 1fr;overflow:hidden;padding:2rem}.priority-plus-dropdown-customizer .dropdown-customizer-controls{overflow-y:auto;padding-right:1rem}.priority-plus-dropdown-customizer .dropdown-customizer-controls .components-tools-panel{margin-bottom:1.5rem}.priority-plus-dropdown-customizer .dropdown-customizer-preview{align-items:flex-start;background:#f5f5f5;border-radius:4px;display:flex;justify-content:center;max-height:calc(100vh - 200px);overflow-y:auto;padding:2rem;position:sticky;top:2rem}.priority-plus-dropdown-customizer .dropdown-customizer-footer{align-items:center;background:#fff;border-top:1px solid #ddd;display:flex;justify-content:space-between;padding:1rem 2rem}.priority-plus-dropdown-customizer .dropdown-customizer-control{margin-bottom:1rem}.priority-plus-dropdown-customizer .dropdown-customizer-control label{color:#1e1e1e;display:block;font-size:11px;font-weight:500;margin-bottom:.5rem;text-transform:uppercase}.priority-plus-dropdown-customizer .dropdown-customizer-control .components-color-picker{margin-top:.5rem}.priority-plus-dropdown-customizer .components-tools-panel-item{margin-bottom:0}@media(max-width:896px){.priority-plus-dropdown-customizer .dropdown-customizer-layout{grid-template-columns:1fr}.priority-plus-dropdown-customizer .dropdown-customizer-preview{min-height:300px;position:static}} +.dropdown-preview-wrapper{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:flex-start;padding-top:1rem;width:100%}.dropdown-preview-container{background-color:var(--preview-background-color);border:var(--preview-border-width) solid var(--preview-border-color);border-radius:var(--preview-border-radius);box-shadow:var(--preview-box-shadow);font-size:16px;line-height:1.5;max-width:320px;min-width:280px;transition:all .2s ease;width:100%}.dropdown-preview-menu{list-style:none;margin:0;padding:0}.dropdown-preview-item{margin:0}.dropdown-preview-item a{background:transparent;border:none;color:inherit;cursor:pointer;display:block;font-size:inherit;line-height:inherit;padding:var(--preview-item-spacing);text-align:left;text-decoration:none;transition:all .2s ease;width:100%}.dropdown-preview-item.dropdown-preview-item--hover a{background-color:var(--preview-item-hover-background);color:var(--preview-item-hover-text)}.dropdown-preview-item.dropdown-preview-item--nested a{padding-left:var(--preview-multi-level-indent)}.dropdown-preview-accordion-toggle{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;justify-content:space-between;padding:var(--preview-item-spacing);text-align:left;transition:background .2s ease,color .2s ease;width:100%}.dropdown-preview-accordion-toggle .dropdown-preview-accordion-text{flex:1}.dropdown-preview-accordion-toggle .dropdown-preview-accordion-arrow{display:inline-block;font-size:.75em;margin-left:.5rem;transition:transform .2s ease}.dropdown-preview-accordion-toggle:hover{background-color:var(--preview-item-hover-background);color:var(--preview-item-hover-text)}.dropdown-preview-accordion-toggle[aria-expanded=true] .dropdown-preview-accordion-arrow{transform:rotate(90deg)}.dropdown-preview-submenu{background-color:var(--preview-background-color);list-style:none;margin:0;padding:0}.dropdown-preview-help{color:#757575;font-size:11px;font-style:italic;margin-top:1rem;padding:0 1rem;text-align:center}.dropdown-preview-item:not(.dropdown-preview-item--hover):not(.dropdown-preview-item--has-accordion) a:hover{background-color:var(--preview-item-hover-background);color:var(--preview-item-hover-text)} :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} diff --git a/build/priority-plus-nav-editor.js b/build/priority-plus-nav-editor.js index 7e0d979..43392e5 100644 --- a/build/priority-plus-nav-editor.js +++ b/build/priority-plus-nav-editor.js @@ -1 +1 @@ -(()=>{"use strict";const o=window.wp.i18n,r=window.wp.blocks,e=window.wp.primitives,i=window.ReactJSXRuntime;var t=(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;(0,r.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,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"}},isActive:(o,r)=>o.className?.includes(r.className)}),(0,n.addFilter)("blocks.registerBlockType","priority-plus-navigation/extend-core-navigation",(o,r)=>"core/navigation"!==r?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},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"}}}});const a=window.wp.blockEditor,l=window.wp.components,s=window.wp.compose,p=window.wp.element;function d({attributes:r,setAttributes:e,onClose:t}){const{priorityNavDropdownStyles:n={}}=r;return(0,i.jsxs)(l.Modal,{title:(0,o.__)("Customize Dropdown Styles","priority-plus-navigation"),onRequestClose:t,className:"priority-plus-dropdown-customizer",size:"fill",isDismissible:!0,children:[(0,i.jsxs)("div",{className:"dropdown-customizer-layout",children:[(0,i.jsx)("div",{className:"dropdown-customizer-controls",children:(0,i.jsx)("p",{children:(0,o.__)("Controls will go here","priority-plus-navigation")})}),(0,i.jsx)("div",{className:"dropdown-customizer-preview",children:(0,i.jsx)("p",{children:(0,o.__)("Preview will go here","priority-plus-navigation")})})]}),(0,i.jsx)("div",{className:"dropdown-customizer-footer",children:(0,i.jsx)(l.Button,{variant:"primary",onClick:t,children:(0,o.__)("Done","priority-plus-navigation")})})]})}const v=(0,s.createHigherOrderComponent)(o=>r=>{const{name:e,attributes:t}=r;if("core/navigation"!==e)return(0,i.jsx)(o,{...r});const n=(t.className||"").includes("is-style-priority-plus-navigation")||!0===t.priorityNavEnabled;return(0,p.useEffect)(()=>{if(!n)return;const o=document.querySelector(".block-editor-block-inspector");if(!o)return;const r=o.querySelector('.components-toggle-group-control-option-base[data-value="always"]');r&&(r.style.opacity="0.4",r.style.pointerEvents="none",r.style.textDecoration="line-through",r.style.cursor="not-allowed")},[n,t.overlayMenu]),(0,i.jsx)(o,{...r})},"addDisableAlwaysOption"),u=(0,s.createHigherOrderComponent)(r=>e=>{const{name:t,attributes:n,setAttributes:s}=e;if("core/navigation"!==t)return(0,i.jsx)(r,{...e});const v=(n.className||"").includes("is-style-priority-plus-navigation")||!0===n.priorityNavEnabled;if(!v)return(0,i.jsx)(r,{...e});const{priorityNavEnabled:u,priorityNavMoreLabel:c,priorityNavMoreBackgroundColor:y,priorityNavMoreBackgroundColorHover:g,priorityNavMoreTextColor:b,priorityNavMoreTextColorHover:m,priorityNavMorePadding:x,overlayMenu:w}=n,[h,_]=(0,p.useState)(!1);(0,p.useEffect)(()=>{v&&"always"===w&&s({overlayMenu:"mobile"})},[v,w,s]);const C=(0,a.useSetting)("spacing.spacingSizes")||[];return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(r,{...e}),(0,i.jsx)(a.InspectorControls,{group:"settings",children:(0,i.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,i.jsxs)(a.InspectorControls,{group:"styles",children:[(0,i.jsx)(l.__experimentalToolsPanel,{label:(0,o.__)("Priority Plus Settings","priority-plus-navigation"),resetAll:()=>s({priorityNavMoreLabel:"More"}),children:(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>!!c,label:(0,o.__)("More Button Label","priority-plus-navigation"),onDeselect:()=>s({priorityNavMoreLabel:"More"}),isShownByDefault:!0,children:(0,i.jsx)(l.TextControl,{label:(0,o.__)("More Button Label","priority-plus-navigation"),value:c,onChange:o=>s({priorityNavMoreLabel:o}),help:(0,o.__)('Text displayed on the "More" button',"priority-plus-navigation")})})}),(0,i.jsx)(a.PanelColorSettings,{title:(0,o.__)("Priority Plus Colors","priority-plus-navigation"),colorSettings:[{label:(0,o.__)("Button Text Color","priority-plus-navigation"),value:b,onChange:o=>s({priorityNavMoreTextColor:o||void 0}),clearable:!0},{label:(0,o.__)("Button Text Hover Color","priority-plus-navigation"),value:m,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:g,onChange:o=>s({priorityNavMoreBackgroundColorHover:o||void 0}),clearable:!0}]}),(0,i.jsx)(l.__experimentalToolsPanel,{label:(0,o.__)("Priority Plus Button","priority-plus-navigation"),resetAll:()=>s({priorityNavMorePadding:void 0}),children:(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>!!x&&Object.keys(x).length>0,label:(0,o.__)("Padding","priority-plus-navigation"),onDeselect:()=>s({priorityNavMorePadding:void 0}),isShownByDefault:!0,children:C.length>0?(0,i.jsx)(a.__experimentalSpacingSizesControl,{values:x,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,i.jsx)(l.BoxControl,{label:(0,o.__)("Button Padding","priority-plus-navigation"),values:x,onChange:o=>s({priorityNavMorePadding:o}),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"],allowReset:!0})})}),(0,i.jsx)(l.__experimentalToolsPanel,{label:(0,o.__)("Dropdown Styles","priority-plus-navigation"),resetAll:()=>{s({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"}})},children:(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>{const{priorityNavDropdownStyles:o}=n;return!!o&&Object.keys(o).length>0},label:(0,o.__)("Customize Dropdown","priority-plus-navigation"),onDeselect:()=>s({priorityNavDropdownStyles:void 0}),isShownByDefault:!0,children:(0,i.jsx)(l.Button,{variant:"secondary",onClick:()=>_(!0),style:{width:"100%"},children:(0,o.__)("Customize Dropdown Styles","priority-plus-navigation")})})})]}),h&&(0,i.jsx)(d,{attributes:n,setAttributes:s,onClose:()=>_(!1)})]})},"withPriorityNavControls");(0,n.addFilter)("editor.BlockEdit","priority-plus-navigation/add-disable-always-option",v,5),(0,n.addFilter)("editor.BlockEdit","priority-plus-navigation/add-priority-plus-navigation-controls",u,10)})(); \ No newline at end of file +(()=>{"use strict";const e=window.wp.i18n,o=window.wp.blocks,r=window.wp.primitives,i=window.ReactJSXRuntime;var t=(0,i.jsx)(r.SVG,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",children:(0,i.jsx)(r.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 l=window.wp.hooks;(0,o.registerBlockVariation)("core/navigation",{name:"priority-plus-navigation",title:(0,e.__)("Priority Plus Navigation","priority-plus-navigation"),description:(0,e.__)('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,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"}},isActive:(e,o)=>e.className?.includes(o.className)}),(0,l.addFilter)("blocks.registerBlockType","priority-plus-navigation/extend-core-navigation",(e,o)=>"core/navigation"!==o?e:{...e,attributes:{...e.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},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"}}}});const n=window.wp.blockEditor,a=window.wp.components,s=window.wp.compose,d=window.wp.element;function p({dropdownStyles:o}){const{backgroundColor:r="#ffffff",borderColor:t="#dddddd",borderWidth:l="1px",borderRadius:n="4px",boxShadow:a="0 4px 12px rgba(0, 0, 0, 0.15)",itemSpacing:s="0.75rem 1.25rem",itemHoverBackgroundColor:p="rgba(0, 0, 0, 0.05)",itemHoverTextColor:u="inherit",multiLevelIndent:v="1.25rem"}=o||{},[c,m]=(0,d.useState)(!0),g=(0,d.useMemo)(()=>({"--preview-background-color":r,"--preview-border-color":t,"--preview-border-width":l,"--preview-border-radius":n,"--preview-box-shadow":a,"--preview-item-spacing":s,"--preview-item-hover-background":p,"--preview-item-hover-text":u,"--preview-multi-level-indent":v}),[r,t,l,n,a,s,p,u,v]);return(0,i.jsxs)("div",{className:"dropdown-preview-wrapper",children:[(0,i.jsx)("div",{className:"dropdown-preview-container",style:g,children:(0,i.jsxs)("ul",{className:"dropdown-preview-menu",children:[(0,i.jsx)("li",{className:"dropdown-preview-item",children:(0,i.jsx)("a",{href:"#",onClick:e=>e.preventDefault(),children:(0,e.__)("Home","priority-plus-navigation")})}),(0,i.jsx)("li",{className:"dropdown-preview-item dropdown-preview-item--hover",children:(0,i.jsx)("a",{href:"#",onClick:e=>e.preventDefault(),children:(0,e.__)("About (Hover)","priority-plus-navigation")})}),(0,i.jsxs)("li",{className:"dropdown-preview-item dropdown-preview-item--has-accordion",children:[(0,i.jsxs)("button",{className:"dropdown-preview-accordion-toggle",onClick:()=>m(!c),"aria-expanded":c,children:[(0,i.jsx)("span",{className:"dropdown-preview-accordion-text",children:(0,e.__)("Services","priority-plus-navigation")}),(0,i.jsx)("span",{className:"dropdown-preview-accordion-arrow",children:"â–¸"})]}),c&&(0,i.jsxs)("ul",{className:"dropdown-preview-submenu",children:[(0,i.jsx)("li",{className:"dropdown-preview-item dropdown-preview-item--nested",children:(0,i.jsx)("a",{href:"#",onClick:e=>e.preventDefault(),children:(0,e.__)("Web Design","priority-plus-navigation")})}),(0,i.jsx)("li",{className:"dropdown-preview-item dropdown-preview-item--nested",children:(0,i.jsx)("a",{href:"#",onClick:e=>e.preventDefault(),children:(0,e.__)("Development","priority-plus-navigation")})})]})]}),(0,i.jsx)("li",{className:"dropdown-preview-item",children:(0,i.jsx)("a",{href:"#",onClick:e=>e.preventDefault(),children:(0,e.__)("Contact","priority-plus-navigation")})})]})}),(0,i.jsx)("p",{className:"dropdown-preview-help",children:(0,e.__)('Live preview - Click "Services" to toggle accordion',"priority-plus-navigation")})]})}function u(e){if(!e||"string"!=typeof e)return{top:"0",right:"0",bottom:"0",left:"0"};const o=e.trim().split(/\s+/);return 1===o.length?{top:o[0],right:o[0],bottom:o[0],left:o[0]}:2===o.length?{top:o[0],right:o[1],bottom:o[0],left:o[1]}:3===o.length?{top:o[0],right:o[1],bottom:o[2],left:o[1]}:4===o.length?{top:o[0],right:o[1],bottom:o[2],left:o[3]}:{top:"0",right:"0",bottom:"0",left:"0"}}function v({attributes:o,setAttributes:r,onClose:t}){const{priorityNavDropdownStyles:l={}}=o,n=(e,o)=>{r({priorityNavDropdownStyles:{...l,[e]:o}})},s=e=>!!l[e],d=(e,o)=>{n(e,o)};return(0,i.jsxs)(a.Modal,{title:(0,e.__)("Customize Dropdown Styles","priority-plus-navigation"),onRequestClose:t,className:"priority-plus-dropdown-customizer",size:"fill",isDismissible:!0,children:[(0,i.jsxs)("div",{className:"dropdown-customizer-layout",children:[(0,i.jsxs)("div",{className:"dropdown-customizer-controls",children:[(0,i.jsxs)(a.__experimentalToolsPanel,{label:(0,e.__)("Dropdown Container","priority-plus-navigation"),resetAll:()=>{n("backgroundColor","#ffffff"),n("borderColor","#dddddd"),n("borderWidth","1px"),n("borderRadius","4px"),n("boxShadow","0 4px 12px rgba(0, 0, 0, 0.15)")},children:[(0,i.jsx)(a.__experimentalToolsPanelItem,{hasValue:()=>s("backgroundColor"),label:(0,e.__)("Background Color","priority-plus-navigation"),onDeselect:()=>d("backgroundColor","#ffffff"),isShownByDefault:!0,children:(0,i.jsxs)("div",{className:"dropdown-customizer-control",children:[(0,i.jsx)("label",{children:(0,e.__)("Background Color","priority-plus-navigation")}),(0,i.jsx)(a.ColorPicker,{color:l.backgroundColor||"#ffffff",onChange:e=>n("backgroundColor",e),enableAlpha:!0})]})}),(0,i.jsx)(a.__experimentalToolsPanelItem,{hasValue:()=>s("borderColor"),label:(0,e.__)("Border Color","priority-plus-navigation"),onDeselect:()=>d("borderColor","#dddddd"),isShownByDefault:!0,children:(0,i.jsxs)("div",{className:"dropdown-customizer-control",children:[(0,i.jsx)("label",{children:(0,e.__)("Border Color","priority-plus-navigation")}),(0,i.jsx)(a.ColorPicker,{color:l.borderColor||"#dddddd",onChange:e=>n("borderColor",e),enableAlpha:!0})]})}),(0,i.jsx)(a.__experimentalToolsPanelItem,{hasValue:()=>s("borderWidth"),label:(0,e.__)("Border Width","priority-plus-navigation"),onDeselect:()=>d("borderWidth","1px"),isShownByDefault:!0,children:(0,i.jsx)(a.__experimentalUnitControl,{label:(0,e.__)("Border Width","priority-plus-navigation"),value:l.borderWidth||"1px",onChange:e=>n("borderWidth",e),units:[{value:"px",label:"px"},{value:"rem",label:"rem"},{value:"em",label:"em"}]})}),(0,i.jsx)(a.__experimentalToolsPanelItem,{hasValue:()=>s("borderRadius"),label:(0,e.__)("Border Radius","priority-plus-navigation"),onDeselect:()=>d("borderRadius","4px"),isShownByDefault:!0,children:(0,i.jsx)(a.__experimentalUnitControl,{label:(0,e.__)("Border Radius","priority-plus-navigation"),value:l.borderRadius||"4px",onChange:e=>n("borderRadius",e),units:[{value:"px",label:"px"},{value:"rem",label:"rem"},{value:"%",label:"%"}]})}),(0,i.jsx)(a.__experimentalToolsPanelItem,{hasValue:()=>s("boxShadow"),label:(0,e.__)("Box Shadow","priority-plus-navigation"),onDeselect:()=>d("boxShadow","0 4px 12px rgba(0, 0, 0, 0.15)"),isShownByDefault:!0,children:(0,i.jsx)(a.TextControl,{label:(0,e.__)("Box Shadow","priority-plus-navigation"),value:l.boxShadow||"0 4px 12px rgba(0, 0, 0, 0.15)",onChange:e=>n("boxShadow",e),help:(0,e.__)("CSS box-shadow property","priority-plus-navigation")})})]}),(0,i.jsxs)(a.__experimentalToolsPanel,{label:(0,e.__)("Dropdown Items","priority-plus-navigation"),resetAll:()=>{n("itemSpacing","0.75rem 1.25rem"),n("itemHoverBackgroundColor","rgba(0, 0, 0, 0.05)"),n("itemHoverTextColor","inherit"),n("multiLevelIndent","1.25rem")},children:[(0,i.jsx)(a.__experimentalToolsPanelItem,{hasValue:()=>s("itemSpacing"),label:(0,e.__)("Item Spacing","priority-plus-navigation"),onDeselect:()=>d("itemSpacing","0.75rem 1.25rem"),isShownByDefault:!0,children:(0,i.jsx)(a.__experimentalBoxControl,{label:(0,e.__)("Item Spacing (Padding)","priority-plus-navigation"),values:u(l.itemSpacing||"0.75rem 1.25rem"),onChange:e=>n("itemSpacing",function(e){if(!e)return"";const{top:o="0",right:r="0",bottom:i="0",left:t="0"}=e;return o===r&&r===i&&i===t?o:o===i&&r===t?`${o} ${r}`:`${o} ${r} ${i} ${t}`}(e)),sides:["top","right","bottom","left"],units:[{value:"px",label:"px"},{value:"rem",label:"rem"},{value:"em",label:"em"}]})}),(0,i.jsx)(a.__experimentalToolsPanelItem,{hasValue:()=>s("itemHoverBackgroundColor"),label:(0,e.__)("Hover Background","priority-plus-navigation"),onDeselect:()=>d("itemHoverBackgroundColor","rgba(0, 0, 0, 0.05)"),isShownByDefault:!0,children:(0,i.jsxs)("div",{className:"dropdown-customizer-control",children:[(0,i.jsx)("label",{children:(0,e.__)("Hover Background Color","priority-plus-navigation")}),(0,i.jsx)(a.ColorPicker,{color:l.itemHoverBackgroundColor||"rgba(0, 0, 0, 0.05)",onChange:e=>n("itemHoverBackgroundColor",e),enableAlpha:!0})]})}),(0,i.jsx)(a.__experimentalToolsPanelItem,{hasValue:()=>s("itemHoverTextColor"),label:(0,e.__)("Hover Text Color","priority-plus-navigation"),onDeselect:()=>d("itemHoverTextColor","inherit"),children:(0,i.jsxs)("div",{className:"dropdown-customizer-control",children:[(0,i.jsx)("label",{children:(0,e.__)("Hover Text Color","priority-plus-navigation")}),(0,i.jsx)(a.ColorPicker,{color:l.itemHoverTextColor||"inherit",onChange:e=>n("itemHoverTextColor",e),enableAlpha:!0})]})}),(0,i.jsx)(a.__experimentalToolsPanelItem,{hasValue:()=>s("multiLevelIndent"),label:(0,e.__)("Multi-level Indent","priority-plus-navigation"),onDeselect:()=>d("multiLevelIndent","1.25rem"),isShownByDefault:!0,children:(0,i.jsx)(a.__experimentalUnitControl,{label:(0,e.__)("Multi-level Indent","priority-plus-navigation"),value:l.multiLevelIndent||"1.25rem",onChange:e=>n("multiLevelIndent",e),help:(0,e.__)("Indentation for nested submenu items","priority-plus-navigation"),units:[{value:"px",label:"px"},{value:"rem",label:"rem"},{value:"em",label:"em"}]})})]})]}),(0,i.jsx)("div",{className:"dropdown-customizer-preview",children:(0,i.jsx)(p,{dropdownStyles:l})})]}),(0,i.jsxs)("div",{className:"dropdown-customizer-footer",children:[(0,i.jsx)(a.Button,{variant:"tertiary",isDestructive:!0,onClick:()=>{r({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"}})},children:(0,e.__)("Reset to Defaults","priority-plus-navigation")}),(0,i.jsx)(a.Button,{variant:"primary",onClick:t,children:(0,e.__)("Done","priority-plus-navigation")})]})]})}const c=(0,s.createHigherOrderComponent)(e=>o=>{const{name:r,attributes:t}=o;if("core/navigation"!==r)return(0,i.jsx)(e,{...o});const l=(t.className||"").includes("is-style-priority-plus-navigation")||!0===t.priorityNavEnabled;return(0,d.useEffect)(()=>{if(!l)return;const e=document.querySelector(".block-editor-block-inspector");if(!e)return;const o=e.querySelector('.components-toggle-group-control-option-base[data-value="always"]');o&&(o.style.opacity="0.4",o.style.pointerEvents="none",o.style.textDecoration="line-through",o.style.cursor="not-allowed")},[l,t.overlayMenu]),(0,i.jsx)(e,{...o})},"addDisableAlwaysOption"),m=(0,s.createHigherOrderComponent)(o=>r=>{const{name:t,attributes:l,setAttributes:s}=r;if("core/navigation"!==t)return(0,i.jsx)(o,{...r});const p=(l.className||"").includes("is-style-priority-plus-navigation")||!0===l.priorityNavEnabled;if(!p)return(0,i.jsx)(o,{...r});const{priorityNavEnabled:u,priorityNavMoreLabel:c,priorityNavMoreBackgroundColor:m,priorityNavMoreBackgroundColorHover:g,priorityNavMoreTextColor:x,priorityNavMoreTextColorHover:h,priorityNavMorePadding:b,overlayMenu:y}=l,[w,_]=(0,d.useState)(!1);(0,d.useEffect)(()=>{p&&"always"===y&&s({overlayMenu:"mobile"})},[p,y,s]);const C=(0,n.useSetting)("spacing.spacingSizes")||[];return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(o,{...r}),(0,i.jsx)(n.InspectorControls,{group:"settings",children:(0,i.jsx)(a.Notice,{status:"info",isDismissible:!1,children:(0,e.__)('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)(n.InspectorControls,{group:"styles",children:[(0,i.jsx)(a.__experimentalToolsPanel,{label:(0,e.__)("Priority Plus Settings","priority-plus-navigation"),resetAll:()=>s({priorityNavMoreLabel:"More"}),children:(0,i.jsx)(a.__experimentalToolsPanelItem,{hasValue:()=>!!c,label:(0,e.__)("More Button Label","priority-plus-navigation"),onDeselect:()=>s({priorityNavMoreLabel:"More"}),isShownByDefault:!0,children:(0,i.jsx)(a.TextControl,{label:(0,e.__)("More Button Label","priority-plus-navigation"),value:c,onChange:e=>s({priorityNavMoreLabel:e}),help:(0,e.__)('Text displayed on the "More" button',"priority-plus-navigation")})})}),(0,i.jsx)(n.PanelColorSettings,{title:(0,e.__)("Priority Plus Colors","priority-plus-navigation"),colorSettings:[{label:(0,e.__)("Button Text Color","priority-plus-navigation"),value:x,onChange:e=>s({priorityNavMoreTextColor:e||void 0}),clearable:!0},{label:(0,e.__)("Button Text Hover Color","priority-plus-navigation"),value:h,onChange:e=>s({priorityNavMoreTextColorHover:e||void 0}),clearable:!0},{label:(0,e.__)("Button Background Color","priority-plus-navigation"),value:m,onChange:e=>s({priorityNavMoreBackgroundColor:e||void 0}),clearable:!0},{label:(0,e.__)("Button Background Hover Color","priority-plus-navigation"),value:g,onChange:e=>s({priorityNavMoreBackgroundColorHover:e||void 0}),clearable:!0}]}),(0,i.jsx)(a.__experimentalToolsPanel,{label:(0,e.__)("Priority Plus Button","priority-plus-navigation"),resetAll:()=>s({priorityNavMorePadding:void 0}),children:(0,i.jsx)(a.__experimentalToolsPanelItem,{hasValue:()=>!!b&&Object.keys(b).length>0,label:(0,e.__)("Padding","priority-plus-navigation"),onDeselect:()=>s({priorityNavMorePadding:void 0}),isShownByDefault:!0,children:C.length>0?(0,i.jsx)(n.__experimentalSpacingSizesControl,{values:b,onChange:e=>s({priorityNavMorePadding:e}),label:(0,e.__)("Button Padding","priority-plus-navigation"),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"]}):(0,i.jsx)(a.BoxControl,{label:(0,e.__)("Button Padding","priority-plus-navigation"),values:b,onChange:e=>s({priorityNavMorePadding:e}),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"],allowReset:!0})})}),(0,i.jsx)(a.__experimentalToolsPanel,{label:(0,e.__)("Dropdown Styles","priority-plus-navigation"),resetAll:()=>{s({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"}})},children:(0,i.jsx)(a.__experimentalToolsPanelItem,{hasValue:()=>{const{priorityNavDropdownStyles:e}=l;return!!e&&Object.keys(e).length>0},label:(0,e.__)("Customize Dropdown","priority-plus-navigation"),onDeselect:()=>s({priorityNavDropdownStyles:void 0}),isShownByDefault:!0,children:(0,i.jsx)(a.Button,{variant:"secondary",onClick:()=>_(!0),style:{width:"100%"},children:(0,e.__)("Customize Dropdown Styles","priority-plus-navigation")})})})]}),w&&(0,i.jsx)(v,{attributes:l,setAttributes:s,onClose:()=>_(!1)})]})},"withPriorityNavControls");(0,l.addFilter)("editor.BlockEdit","priority-plus-navigation/add-disable-always-option",c,5),(0,l.addFilter)("editor.BlockEdit","priority-plus-navigation/add-priority-plus-navigation-controls",m,10)})(); \ No newline at end of file diff --git a/build/style-priority-plus-navigation-rtl.css b/build/style-priority-plus-navigation-rtl.css index 7db3a04..5337d6f 100644 --- a/build/style-priority-plus-navigation-rtl.css +++ b/build/style-priority-plus-navigation-rtl.css @@ -1 +1 @@ -: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;position:relative}.is-style-priority-plus-navigation .priority-plus-navigation-more-button{align-items:center;background:var(--priority-plus-navigation--background);border-color:var(--priority-plus-navigation--border-color);border-radius:var(--priority-plus-navigation--border-radius);border-style:var(--priority-plus-navigation--border-style);border-width:var(--priority-plus-navigation--border-width);color:var(--priority-plus-navigation--color);cursor:pointer;display:flex;font-family:var(--priority-plus-navigation--font-family);font-size:var(--priority-plus-navigation--font-size);font-weight:var(--priority-plus-navigation--font-weight);outline:none;padding:var(--priority-plus-navigation--padding);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:focus,.is-style-priority-plus-navigation .priority-plus-navigation-more-button:hover{background:var(--priority-plus-navigation--background-hover);color:var(--priority-plus-navigation--color-hover)}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:focus-visible{outline:2px solid currentColor;outline-offset:-2px}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon{align-items:center;display:inline-flex;line-height:1}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon svg{fill:currentcolor;height:1.25em;width:1.25em}.is-style-priority-plus-navigation .priority-plus-navigation-more-button[aria-expanded=true] .priority-plus-navigation-icon{transform:rotate(-180deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color);border-color:var(--wp--custom--priority-plus-navigation--dropdown--border-color);border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-style:solid;border-width:var(--wp--custom--priority-plus-navigation--dropdown--border-width);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{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a{color:inherit;display:block;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 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-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]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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>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>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>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>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-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-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size: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{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{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{transform:rotate(-90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{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 .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-arrow:focus,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{transform:rotate(-90deg)}.is-style-priority-plus-navigation[data-more-hidden=true] .priority-plus-navigation-more{display:none} +: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;border:none!important;position:relative}.is-style-priority-plus-navigation .priority-plus-navigation-more-button{align-items:center;background:var(--priority-plus-navigation--background);border-color:var(--priority-plus-navigation--border-color);border-radius:var(--priority-plus-navigation--border-radius);border-style:var(--priority-plus-navigation--border-style);border-width:var(--priority-plus-navigation--border-width);color:var(--priority-plus-navigation--color);cursor:pointer;display:flex;font-family:var(--priority-plus-navigation--font-family);font-size:var(--priority-plus-navigation--font-size);font-weight:var(--priority-plus-navigation--font-weight);outline:none;padding:var(--priority-plus-navigation--padding);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:focus,.is-style-priority-plus-navigation .priority-plus-navigation-more-button:hover{background:var(--priority-plus-navigation--background-hover);color:var(--priority-plus-navigation--color-hover)}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:focus-visible{outline:2px solid currentColor;outline-offset:-2px}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon{align-items:center;display:inline-flex;line-height:1}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon svg{fill:currentcolor;height:1.25em;width:1.25em}.is-style-priority-plus-navigation .priority-plus-navigation-more-button[aria-expanded=true] .priority-plus-navigation-icon{transform:rotate(-180deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color);border-color:var(--wp--custom--priority-plus-navigation--dropdown--border-color);border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-style:solid;border-width:var(--wp--custom--priority-plus-navigation--dropdown--border-width);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{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a{color:inherit;display:block;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 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-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]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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>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>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>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>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-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-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size: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{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{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{transform:rotate(-90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{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 .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-arrow:focus,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{transform:rotate(-90deg)}.is-style-priority-plus-navigation[data-more-hidden=true] .priority-plus-navigation-more{display:none} diff --git a/build/style-priority-plus-navigation.css b/build/style-priority-plus-navigation.css index 76b8f7d..8618984 100644 --- a/build/style-priority-plus-navigation.css +++ b/build/style-priority-plus-navigation.css @@ -1 +1 @@ -: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;position:relative}.is-style-priority-plus-navigation .priority-plus-navigation-more-button{align-items:center;background:var(--priority-plus-navigation--background);border-color:var(--priority-plus-navigation--border-color);border-radius:var(--priority-plus-navigation--border-radius);border-style:var(--priority-plus-navigation--border-style);border-width:var(--priority-plus-navigation--border-width);color:var(--priority-plus-navigation--color);cursor:pointer;display:flex;font-family:var(--priority-plus-navigation--font-family);font-size:var(--priority-plus-navigation--font-size);font-weight:var(--priority-plus-navigation--font-weight);outline:none;padding:var(--priority-plus-navigation--padding);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:focus,.is-style-priority-plus-navigation .priority-plus-navigation-more-button:hover{background:var(--priority-plus-navigation--background-hover);color:var(--priority-plus-navigation--color-hover)}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:focus-visible{outline:2px solid currentColor;outline-offset:-2px}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon{align-items:center;display:inline-flex;line-height:1}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon svg{fill:currentcolor;height:1.25em;width:1.25em}.is-style-priority-plus-navigation .priority-plus-navigation-more-button[aria-expanded=true] .priority-plus-navigation-icon{transform:rotate(180deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color);border-color:var(--wp--custom--priority-plus-navigation--dropdown--border-color);border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-style:solid;border-width:var(--wp--custom--priority-plus-navigation--dropdown--border-width);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{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a{color:inherit;display:block;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 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-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]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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>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>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>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>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-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-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size: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{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{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{transform:rotate(90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{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 .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-arrow:focus,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{transform:rotate(90deg)}.is-style-priority-plus-navigation[data-more-hidden=true] .priority-plus-navigation-more{display:none} +: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;border:none!important;position:relative}.is-style-priority-plus-navigation .priority-plus-navigation-more-button{align-items:center;background:var(--priority-plus-navigation--background);border-color:var(--priority-plus-navigation--border-color);border-radius:var(--priority-plus-navigation--border-radius);border-style:var(--priority-plus-navigation--border-style);border-width:var(--priority-plus-navigation--border-width);color:var(--priority-plus-navigation--color);cursor:pointer;display:flex;font-family:var(--priority-plus-navigation--font-family);font-size:var(--priority-plus-navigation--font-size);font-weight:var(--priority-plus-navigation--font-weight);outline:none;padding:var(--priority-plus-navigation--padding);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:focus,.is-style-priority-plus-navigation .priority-plus-navigation-more-button:hover{background:var(--priority-plus-navigation--background-hover);color:var(--priority-plus-navigation--color-hover)}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:focus-visible{outline:2px solid currentColor;outline-offset:-2px}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon{align-items:center;display:inline-flex;line-height:1}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon svg{fill:currentcolor;height:1.25em;width:1.25em}.is-style-priority-plus-navigation .priority-plus-navigation-more-button[aria-expanded=true] .priority-plus-navigation-icon{transform:rotate(180deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color);border-color:var(--wp--custom--priority-plus-navigation--dropdown--border-color);border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-style:solid;border-width:var(--wp--custom--priority-plus-navigation--dropdown--border-width);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{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a{color:inherit;display:block;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 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-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]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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>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>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>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>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-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-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size: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{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{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{transform:rotate(90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{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 .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-arrow:focus,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{transform:rotate(90deg)}.is-style-priority-plus-navigation[data-more-hidden=true] .priority-plus-navigation-more{display:none} diff --git a/src/styles/style.scss b/src/styles/style.scss index 8ad3d62..3053a69 100755 --- a/src/styles/style.scss +++ b/src/styles/style.scss @@ -3,6 +3,9 @@ .is-style-priority-plus-navigation { position: relative; + // Reset any WordPress core border styles that might interfere + border: none !important; + .priority-plus-navigation-more-button { display: flex; align-items: center; diff --git a/src/variation/components/dropdown-customizer-modal.js b/src/variation/components/dropdown-customizer-modal.js index 090df32..b28304e 100644 --- a/src/variation/components/dropdown-customizer-modal.js +++ b/src/variation/components/dropdown-customizer-modal.js @@ -1,13 +1,92 @@ /** * WordPress dependencies */ -import { Modal, Button } from '@wordpress/components'; +import { + Modal, + Button, + ColorPicker, + TextControl, + __experimentalUnitControl as UnitControl, + __experimentalBoxControl as BoxControl, + __experimentalToolsPanel as ToolsPanel, + __experimentalToolsPanelItem as ToolsPanelItem, +} from '@wordpress/components'; import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ import './dropdown-customizer-modal.scss'; +import { DropdownPreview } from './dropdown-preview'; + +/** + * 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}`; +} export function DropdownCustomizerModal({ attributes, @@ -16,6 +95,26 @@ export function DropdownCustomizerModal({ }) { 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); + }; + return (
-

- {__( - 'Controls will go here', + {/* DROPDOWN CONTAINER STYLES */} + + resetAll={() => { + updateStyle('backgroundColor', '#ffffff'); + updateStyle('borderColor', '#dddddd'); + updateStyle('borderWidth', '1px'); + updateStyle('borderRadius', '4px'); + updateStyle( + 'boxShadow', + '0 4px 12px rgba(0, 0, 0, 0.15)' + ); + }} + > + {/* Background Color */} + hasValue('backgroundColor')} + label={__( + 'Background Color', + 'priority-plus-navigation' + )} + onDeselect={() => + resetToDefault('backgroundColor', '#ffffff') + } + isShownByDefault + > +

+ + + updateStyle('backgroundColor', value) + } + enableAlpha + /> +
+ + + {/* Border Color */} + hasValue('borderColor')} + label={__( + 'Border Color', + 'priority-plus-navigation' + )} + onDeselect={() => + resetToDefault('borderColor', '#dddddd') + } + isShownByDefault + > +
+ + + updateStyle('borderColor', value) + } + enableAlpha + /> +
+ + + {/* Border Width */} + hasValue('borderWidth')} + label={__( + 'Border Width', + 'priority-plus-navigation' + )} + onDeselect={() => + resetToDefault('borderWidth', '1px') + } + isShownByDefault + > + + updateStyle('borderWidth', value) + } + units={[ + { value: 'px', label: 'px' }, + { value: 'rem', label: 'rem' }, + { value: 'em', label: 'em' }, + ]} + /> + + + {/* Border Radius */} + hasValue('borderRadius')} + label={__( + 'Border Radius', + 'priority-plus-navigation' + )} + onDeselect={() => + resetToDefault('borderRadius', '4px') + } + isShownByDefault + > + + updateStyle('borderRadius', value) + } + units={[ + { value: 'px', label: 'px' }, + { value: 'rem', label: 'rem' }, + { value: '%', label: '%' }, + ]} + /> + + + {/* Box Shadow */} + hasValue('boxShadow')} + label={__('Box Shadow', 'priority-plus-navigation')} + onDeselect={() => + resetToDefault( + 'boxShadow', + '0 4px 12px rgba(0, 0, 0, 0.15)' + ) + } + isShownByDefault + > + + updateStyle('boxShadow', value) + } + help={__( + 'CSS box-shadow property', + 'priority-plus-navigation' + )} + /> + + + + {/* DROPDOWN ITEM STYLES */} + { + updateStyle('itemSpacing', '0.75rem 1.25rem'); + updateStyle( + 'itemHoverBackgroundColor', + 'rgba(0, 0, 0, 0.05)' + ); + updateStyle('itemHoverTextColor', 'inherit'); + updateStyle('multiLevelIndent', '1.25rem'); + }} + > + {/* Item Spacing */} + hasValue('itemSpacing')} + label={__( + 'Item Spacing', + 'priority-plus-navigation' + )} + onDeselect={() => + resetToDefault('itemSpacing', '0.75rem 1.25rem') + } + isShownByDefault + > + + updateStyle( + 'itemSpacing', + formatSpacingValue(value) + ) + } + sides={['top', 'right', 'bottom', 'left']} + units={[ + { value: 'px', label: 'px' }, + { value: 'rem', label: 'rem' }, + { value: 'em', label: 'em' }, + ]} + /> + + + {/* Item Hover Background Color */} + + hasValue('itemHoverBackgroundColor') + } + label={__( + 'Hover Background', + 'priority-plus-navigation' + )} + onDeselect={() => + resetToDefault( + 'itemHoverBackgroundColor', + 'rgba(0, 0, 0, 0.05)' + ) + } + isShownByDefault + > +
+ + + updateStyle( + 'itemHoverBackgroundColor', + value + ) + } + enableAlpha + /> +
+ + + {/* Item Hover Text Color */} + hasValue('itemHoverTextColor')} + label={__( + 'Hover Text Color', + 'priority-plus-navigation' + )} + onDeselect={() => + resetToDefault('itemHoverTextColor', 'inherit') + } + > +
+ + + updateStyle('itemHoverTextColor', value) + } + enableAlpha + /> +
+ + + {/* Multi-level Indent */} + hasValue('multiLevelIndent')} + label={__( + 'Multi-level Indent', + 'priority-plus-navigation' + )} + onDeselect={() => + resetToDefault('multiLevelIndent', '1.25rem') + } + isShownByDefault + > + + updateStyle('multiLevelIndent', value) + } + help={__( + 'Indentation for nested submenu items', + 'priority-plus-navigation' + )} + units={[ + { value: 'px', label: 'px' }, + { value: 'rem', label: 'rem' }, + { value: 'em', label: 'em' }, + ]} + /> + +
-

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

+
+ + diff --git a/src/variation/components/dropdown-customizer-modal.scss b/src/variation/components/dropdown-customizer-modal.scss index f9e1537..5a7103f 100644 --- a/src/variation/components/dropdown-customizer-modal.scss +++ b/src/variation/components/dropdown-customizer-modal.scss @@ -28,13 +28,14 @@ .dropdown-customizer-preview { display: flex; - align-items: center; + align-items: flex-start; justify-content: center; background: #f5f5f5; border-radius: 4px; padding: 2rem; position: sticky; - top: 0; + top: 2rem; + max-height: calc(100vh - 200px); overflow-y: auto; } @@ -47,6 +48,28 @@ background: #fff; } + // Control styles + .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; + } + // Responsive: stack on smaller screens @media (max-width: 896px) { .dropdown-customizer-layout { diff --git a/src/variation/components/dropdown-preview.js b/src/variation/components/dropdown-preview.js new file mode 100644 index 0000000..725fa7b --- /dev/null +++ b/src/variation/components/dropdown-preview.js @@ -0,0 +1,115 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { useMemo, useState } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import './dropdown-preview.scss'; + +/** + * DropdownPreview Component + * + * Displays a live preview of the dropdown menu with all applied styles. + * Updates in real-time as users modify controls in the customizer. + * Matches the frontend dropdown structure with accordion buttons. + */ +export function DropdownPreview({ dropdownStyles }) { + const { + 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', + } = dropdownStyles || {}; + + // State for accordion open/closed + const [isAccordionOpen, setIsAccordionOpen] = useState(true); + + // Memoize the inline styles to avoid unnecessary recalculations + const previewStyles = useMemo( + () => ({ + '--preview-background-color': backgroundColor, + '--preview-border-color': borderColor, + '--preview-border-width': borderWidth, + '--preview-border-radius': borderRadius, + '--preview-box-shadow': boxShadow, + '--preview-item-spacing': itemSpacing, + '--preview-item-hover-background': itemHoverBackgroundColor, + '--preview-item-hover-text': itemHoverTextColor, + '--preview-multi-level-indent': multiLevelIndent, + }), + [ + backgroundColor, + borderColor, + borderWidth, + borderRadius, + boxShadow, + itemSpacing, + itemHoverBackgroundColor, + itemHoverTextColor, + multiLevelIndent, + ] + ); + + return ( +
+ +

+ {__('Live preview - Click "Services" to toggle accordion', 'priority-plus-navigation')} +

+
+ ); +} diff --git a/src/variation/components/dropdown-preview.scss b/src/variation/components/dropdown-preview.scss new file mode 100644 index 0000000..a57293a --- /dev/null +++ b/src/variation/components/dropdown-preview.scss @@ -0,0 +1,117 @@ +.dropdown-preview-wrapper { + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + width: 100%; + height: 100%; + padding-top: 1rem; +} + +.dropdown-preview-container { + background-color: var(--preview-background-color); + border: var(--preview-border-width) solid var(--preview-border-color); + border-radius: var(--preview-border-radius); + box-shadow: var(--preview-box-shadow); + min-width: 280px; + max-width: 320px; + width: 100%; + transition: all 0.2s ease; + font-size: 16px; + line-height: 1.5; +} + +.dropdown-preview-menu { + list-style: none; + margin: 0; + padding: 0; +} + +.dropdown-preview-item { + margin: 0; + + a { + display: block; + padding: var(--preview-item-spacing); + color: inherit; + text-decoration: none; + transition: all 0.2s ease; + cursor: pointer; + width: 100%; + border: none; + background: transparent; + text-align: left; + font-size: inherit; + line-height: inherit; + } + + // Hover state example + &.dropdown-preview-item--hover a { + background-color: var(--preview-item-hover-background); + color: var(--preview-item-hover-text); + } + + // Nested item indentation + &.dropdown-preview-item--nested a { + padding-left: var(--preview-multi-level-indent); + } +} + +// Accordion toggle button (matches frontend) +.dropdown-preview-accordion-toggle { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + padding: var(--preview-item-spacing); + background: transparent; + border: none; + cursor: pointer; + font-size: inherit; + font-family: inherit; + color: inherit; + text-align: left; + transition: background 0.2s ease, color 0.2s ease; + + .dropdown-preview-accordion-text { + flex: 1; + } + + .dropdown-preview-accordion-arrow { + margin-left: 0.5rem; + transition: transform 0.2s ease; + display: inline-block; + font-size: 0.75em; + } + + &:hover { + background-color: var(--preview-item-hover-background); + color: var(--preview-item-hover-text); + } + + &[aria-expanded="true"] .dropdown-preview-accordion-arrow { + transform: rotate(90deg); + } +} + +.dropdown-preview-submenu { + list-style: none; + margin: 0; + padding: 0; + background-color: var(--preview-background-color); +} + +.dropdown-preview-help { + margin-top: 1rem; + font-size: 11px; + color: #757575; + text-align: center; + font-style: italic; + padding: 0 1rem; +} + +// Interactive hover effect for demonstration +.dropdown-preview-item:not(.dropdown-preview-item--hover):not(.dropdown-preview-item--has-accordion) a:hover { + background-color: var(--preview-item-hover-background); + color: var(--preview-item-hover-text); +} From 9e32d8cada10964373549f4abf7fe303fa69522b Mon Sep 17 00:00:00 2001 From: Troy Chaplin Date: Sat, 3 Jan 2026 11:10:03 -0500 Subject: [PATCH 06/40] add: functional user interface --- build/priority-plus-nav-editor-rtl.css | 2 +- build/priority-plus-nav-editor.asset.php | 2 +- build/priority-plus-nav-editor.css | 2 +- build/priority-plus-nav-editor.js | 2 +- classes/class-enqueues.php | 20 +- src/variation/block.js | 4 +- .../components/dropdown-customizer-modal.js | 342 ++++++------------ src/variation/components/dropdown-preview.js | 44 ++- .../components/dropdown-preview.scss | 14 +- src/variation/components/markup.html | 19 + src/variation/controls.js | 2 +- 11 files changed, 205 insertions(+), 248 deletions(-) create mode 100644 src/variation/components/markup.html diff --git a/build/priority-plus-nav-editor-rtl.css b/build/priority-plus-nav-editor-rtl.css index 0ff65ab..ac9e413 100644 --- a/build/priority-plus-nav-editor-rtl.css +++ b/build/priority-plus-nav-editor-rtl.css @@ -1,3 +1,3 @@ .priority-plus-dropdown-customizer .components-modal__content{display:flex;flex-direction:column;min-height:600px;padding:0}.priority-plus-dropdown-customizer .dropdown-customizer-layout{display:grid;flex:1;gap:2rem;grid-template-columns:1fr 1fr;overflow:hidden;padding:2rem}.priority-plus-dropdown-customizer .dropdown-customizer-controls{overflow-y:auto;padding-left:1rem}.priority-plus-dropdown-customizer .dropdown-customizer-controls .components-tools-panel{margin-bottom:1.5rem}.priority-plus-dropdown-customizer .dropdown-customizer-preview{align-items:flex-start;background:#f5f5f5;border-radius:4px;display:flex;justify-content:center;max-height:calc(100vh - 200px);overflow-y:auto;padding:2rem;position:sticky;top:2rem}.priority-plus-dropdown-customizer .dropdown-customizer-footer{align-items:center;background:#fff;border-top:1px solid #ddd;display:flex;justify-content:space-between;padding:1rem 2rem}.priority-plus-dropdown-customizer .dropdown-customizer-control{margin-bottom:1rem}.priority-plus-dropdown-customizer .dropdown-customizer-control label{color:#1e1e1e;display:block;font-size:11px;font-weight:500;margin-bottom:.5rem;text-transform:uppercase}.priority-plus-dropdown-customizer .dropdown-customizer-control .components-color-picker{margin-top:.5rem}.priority-plus-dropdown-customizer .components-tools-panel-item{margin-bottom:0}@media(max-width:896px){.priority-plus-dropdown-customizer .dropdown-customizer-layout{grid-template-columns:1fr}.priority-plus-dropdown-customizer .dropdown-customizer-preview{min-height:300px;position:static}} -.dropdown-preview-wrapper{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:flex-start;padding-top:1rem;width:100%}.dropdown-preview-container{background-color:var(--preview-background-color);border:var(--preview-border-width) solid var(--preview-border-color);border-radius:var(--preview-border-radius);box-shadow:var(--preview-box-shadow);font-size:16px;line-height:1.5;max-width:320px;min-width:280px;transition:all .2s ease;width:100%}.dropdown-preview-menu{list-style:none;margin:0;padding:0}.dropdown-preview-item{margin:0}.dropdown-preview-item a{background:transparent;border:none;color:inherit;cursor:pointer;display:block;font-size:inherit;line-height:inherit;padding:var(--preview-item-spacing);text-align:right;text-decoration:none;transition:all .2s ease;width:100%}.dropdown-preview-item.dropdown-preview-item--hover a{background-color:var(--preview-item-hover-background);color:var(--preview-item-hover-text)}.dropdown-preview-item.dropdown-preview-item--nested a{padding-right:var(--preview-multi-level-indent)}.dropdown-preview-accordion-toggle{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;justify-content:space-between;padding:var(--preview-item-spacing);text-align:right;transition:background .2s ease,color .2s ease;width:100%}.dropdown-preview-accordion-toggle .dropdown-preview-accordion-text{flex:1}.dropdown-preview-accordion-toggle .dropdown-preview-accordion-arrow{display:inline-block;font-size:.75em;margin-right:.5rem;transition:transform .2s ease}.dropdown-preview-accordion-toggle:hover{background-color:var(--preview-item-hover-background);color:var(--preview-item-hover-text)}.dropdown-preview-accordion-toggle[aria-expanded=true] .dropdown-preview-accordion-arrow{transform:rotate(-90deg)}.dropdown-preview-submenu{background-color:var(--preview-background-color);list-style:none;margin:0;padding:0}.dropdown-preview-help{color:#757575;font-size:11px;font-style:italic;margin-top:1rem;padding:0 1rem;text-align:center}.dropdown-preview-item:not(.dropdown-preview-item--hover):not(.dropdown-preview-item--has-accordion) a:hover{background-color:var(--preview-item-hover-background);color:var(--preview-item-hover-text)} +.dropdown-preview-wrapper{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:flex-start;padding-top:1rem;width:100%}.dropdown-preview-container{background-color:var(--preview-background-color);border:var(--preview-border-width) solid var(--preview-border-color);border-radius:var(--preview-border-radius);box-shadow:var(--preview-box-shadow);font-size:16px;line-height:1.5;max-width:320px;min-width:280px;transition:all .2s ease;width:100%}.dropdown-preview-menu{list-style:none;margin:0;padding:0}.dropdown-preview-item{margin:0}.dropdown-preview-item a{background:transparent;border:none;color:inherit;cursor:pointer;display:block;font-size:inherit;line-height:inherit;padding:var(--preview-item-spacing);text-align:right;text-decoration:none;transition:all .2s ease;width:100%}.dropdown-preview-item.dropdown-preview-item--hover a{background-color:var(--preview-item-hover-background);color:var(--preview-item-hover-text)}.dropdown-preview-accordion-toggle{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;justify-content:space-between;padding:var(--preview-item-spacing);text-align:right;transition:background .2s ease,color .2s ease;width:100%}.dropdown-preview-accordion-toggle .dropdown-preview-accordion-text{flex:1}.dropdown-preview-accordion-toggle .dropdown-preview-accordion-arrow{display:inline-block;font-size:.75em;margin-right:.5rem;transition:transform .2s ease}.dropdown-preview-accordion-toggle:hover{background-color:var(--preview-item-hover-background);color:var(--preview-item-hover-text)}.dropdown-preview-accordion-toggle[aria-expanded=true] .dropdown-preview-accordion-arrow{transform:rotate(-90deg)}.dropdown-preview-accordion-content{background-color:var(--preview-background-color);list-style:none;margin:0;padding:0}.dropdown-preview-accordion-content .dropdown-preview-item a{padding-right:var(--preview-multi-level-indent)}.dropdown-preview-help{color:#757575;font-size:11px;font-style:italic;margin-top:1rem;padding:0 1rem;text-align:center}.dropdown-preview-item:not(.dropdown-preview-item--hover) a:hover{background-color:var(--preview-item-hover-background);color:var(--preview-item-hover-text)} :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} diff --git a/build/priority-plus-nav-editor.asset.php b/build/priority-plus-nav-editor.asset.php index 2e8f149..97bd9b2 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' => 'feb672c3816b03faeb1d'); + array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-primitives'), 'version' => '584e8cb2666a6adb9d11'); diff --git a/build/priority-plus-nav-editor.css b/build/priority-plus-nav-editor.css index aa73cc6..0c3a689 100644 --- a/build/priority-plus-nav-editor.css +++ b/build/priority-plus-nav-editor.css @@ -1,3 +1,3 @@ .priority-plus-dropdown-customizer .components-modal__content{display:flex;flex-direction:column;min-height:600px;padding:0}.priority-plus-dropdown-customizer .dropdown-customizer-layout{display:grid;flex:1;gap:2rem;grid-template-columns:1fr 1fr;overflow:hidden;padding:2rem}.priority-plus-dropdown-customizer .dropdown-customizer-controls{overflow-y:auto;padding-right:1rem}.priority-plus-dropdown-customizer .dropdown-customizer-controls .components-tools-panel{margin-bottom:1.5rem}.priority-plus-dropdown-customizer .dropdown-customizer-preview{align-items:flex-start;background:#f5f5f5;border-radius:4px;display:flex;justify-content:center;max-height:calc(100vh - 200px);overflow-y:auto;padding:2rem;position:sticky;top:2rem}.priority-plus-dropdown-customizer .dropdown-customizer-footer{align-items:center;background:#fff;border-top:1px solid #ddd;display:flex;justify-content:space-between;padding:1rem 2rem}.priority-plus-dropdown-customizer .dropdown-customizer-control{margin-bottom:1rem}.priority-plus-dropdown-customizer .dropdown-customizer-control label{color:#1e1e1e;display:block;font-size:11px;font-weight:500;margin-bottom:.5rem;text-transform:uppercase}.priority-plus-dropdown-customizer .dropdown-customizer-control .components-color-picker{margin-top:.5rem}.priority-plus-dropdown-customizer .components-tools-panel-item{margin-bottom:0}@media(max-width:896px){.priority-plus-dropdown-customizer .dropdown-customizer-layout{grid-template-columns:1fr}.priority-plus-dropdown-customizer .dropdown-customizer-preview{min-height:300px;position:static}} -.dropdown-preview-wrapper{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:flex-start;padding-top:1rem;width:100%}.dropdown-preview-container{background-color:var(--preview-background-color);border:var(--preview-border-width) solid var(--preview-border-color);border-radius:var(--preview-border-radius);box-shadow:var(--preview-box-shadow);font-size:16px;line-height:1.5;max-width:320px;min-width:280px;transition:all .2s ease;width:100%}.dropdown-preview-menu{list-style:none;margin:0;padding:0}.dropdown-preview-item{margin:0}.dropdown-preview-item a{background:transparent;border:none;color:inherit;cursor:pointer;display:block;font-size:inherit;line-height:inherit;padding:var(--preview-item-spacing);text-align:left;text-decoration:none;transition:all .2s ease;width:100%}.dropdown-preview-item.dropdown-preview-item--hover a{background-color:var(--preview-item-hover-background);color:var(--preview-item-hover-text)}.dropdown-preview-item.dropdown-preview-item--nested a{padding-left:var(--preview-multi-level-indent)}.dropdown-preview-accordion-toggle{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;justify-content:space-between;padding:var(--preview-item-spacing);text-align:left;transition:background .2s ease,color .2s ease;width:100%}.dropdown-preview-accordion-toggle .dropdown-preview-accordion-text{flex:1}.dropdown-preview-accordion-toggle .dropdown-preview-accordion-arrow{display:inline-block;font-size:.75em;margin-left:.5rem;transition:transform .2s ease}.dropdown-preview-accordion-toggle:hover{background-color:var(--preview-item-hover-background);color:var(--preview-item-hover-text)}.dropdown-preview-accordion-toggle[aria-expanded=true] .dropdown-preview-accordion-arrow{transform:rotate(90deg)}.dropdown-preview-submenu{background-color:var(--preview-background-color);list-style:none;margin:0;padding:0}.dropdown-preview-help{color:#757575;font-size:11px;font-style:italic;margin-top:1rem;padding:0 1rem;text-align:center}.dropdown-preview-item:not(.dropdown-preview-item--hover):not(.dropdown-preview-item--has-accordion) a:hover{background-color:var(--preview-item-hover-background);color:var(--preview-item-hover-text)} +.dropdown-preview-wrapper{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:flex-start;padding-top:1rem;width:100%}.dropdown-preview-container{background-color:var(--preview-background-color);border:var(--preview-border-width) solid var(--preview-border-color);border-radius:var(--preview-border-radius);box-shadow:var(--preview-box-shadow);font-size:16px;line-height:1.5;max-width:320px;min-width:280px;transition:all .2s ease;width:100%}.dropdown-preview-menu{list-style:none;margin:0;padding:0}.dropdown-preview-item{margin:0}.dropdown-preview-item a{background:transparent;border:none;color:inherit;cursor:pointer;display:block;font-size:inherit;line-height:inherit;padding:var(--preview-item-spacing);text-align:left;text-decoration:none;transition:all .2s ease;width:100%}.dropdown-preview-item.dropdown-preview-item--hover a{background-color:var(--preview-item-hover-background);color:var(--preview-item-hover-text)}.dropdown-preview-accordion-toggle{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;justify-content:space-between;padding:var(--preview-item-spacing);text-align:left;transition:background .2s ease,color .2s ease;width:100%}.dropdown-preview-accordion-toggle .dropdown-preview-accordion-text{flex:1}.dropdown-preview-accordion-toggle .dropdown-preview-accordion-arrow{display:inline-block;font-size:.75em;margin-left:.5rem;transition:transform .2s ease}.dropdown-preview-accordion-toggle:hover{background-color:var(--preview-item-hover-background);color:var(--preview-item-hover-text)}.dropdown-preview-accordion-toggle[aria-expanded=true] .dropdown-preview-accordion-arrow{transform:rotate(90deg)}.dropdown-preview-accordion-content{background-color:var(--preview-background-color);list-style:none;margin:0;padding:0}.dropdown-preview-accordion-content .dropdown-preview-item a{padding-left:var(--preview-multi-level-indent)}.dropdown-preview-help{color:#757575;font-size:11px;font-style:italic;margin-top:1rem;padding:0 1rem;text-align:center}.dropdown-preview-item:not(.dropdown-preview-item--hover) a:hover{background-color:var(--preview-item-hover-background);color:var(--preview-item-hover-text)} :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} diff --git a/build/priority-plus-nav-editor.js b/build/priority-plus-nav-editor.js index 43392e5..76adb48 100644 --- a/build/priority-plus-nav-editor.js +++ b/build/priority-plus-nav-editor.js @@ -1 +1 @@ -(()=>{"use strict";const e=window.wp.i18n,o=window.wp.blocks,r=window.wp.primitives,i=window.ReactJSXRuntime;var t=(0,i.jsx)(r.SVG,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",children:(0,i.jsx)(r.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 l=window.wp.hooks;(0,o.registerBlockVariation)("core/navigation",{name:"priority-plus-navigation",title:(0,e.__)("Priority Plus Navigation","priority-plus-navigation"),description:(0,e.__)('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,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"}},isActive:(e,o)=>e.className?.includes(o.className)}),(0,l.addFilter)("blocks.registerBlockType","priority-plus-navigation/extend-core-navigation",(e,o)=>"core/navigation"!==o?e:{...e,attributes:{...e.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},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"}}}});const n=window.wp.blockEditor,a=window.wp.components,s=window.wp.compose,d=window.wp.element;function p({dropdownStyles:o}){const{backgroundColor:r="#ffffff",borderColor:t="#dddddd",borderWidth:l="1px",borderRadius:n="4px",boxShadow:a="0 4px 12px rgba(0, 0, 0, 0.15)",itemSpacing:s="0.75rem 1.25rem",itemHoverBackgroundColor:p="rgba(0, 0, 0, 0.05)",itemHoverTextColor:u="inherit",multiLevelIndent:v="1.25rem"}=o||{},[c,m]=(0,d.useState)(!0),g=(0,d.useMemo)(()=>({"--preview-background-color":r,"--preview-border-color":t,"--preview-border-width":l,"--preview-border-radius":n,"--preview-box-shadow":a,"--preview-item-spacing":s,"--preview-item-hover-background":p,"--preview-item-hover-text":u,"--preview-multi-level-indent":v}),[r,t,l,n,a,s,p,u,v]);return(0,i.jsxs)("div",{className:"dropdown-preview-wrapper",children:[(0,i.jsx)("div",{className:"dropdown-preview-container",style:g,children:(0,i.jsxs)("ul",{className:"dropdown-preview-menu",children:[(0,i.jsx)("li",{className:"dropdown-preview-item",children:(0,i.jsx)("a",{href:"#",onClick:e=>e.preventDefault(),children:(0,e.__)("Home","priority-plus-navigation")})}),(0,i.jsx)("li",{className:"dropdown-preview-item dropdown-preview-item--hover",children:(0,i.jsx)("a",{href:"#",onClick:e=>e.preventDefault(),children:(0,e.__)("About (Hover)","priority-plus-navigation")})}),(0,i.jsxs)("li",{className:"dropdown-preview-item dropdown-preview-item--has-accordion",children:[(0,i.jsxs)("button",{className:"dropdown-preview-accordion-toggle",onClick:()=>m(!c),"aria-expanded":c,children:[(0,i.jsx)("span",{className:"dropdown-preview-accordion-text",children:(0,e.__)("Services","priority-plus-navigation")}),(0,i.jsx)("span",{className:"dropdown-preview-accordion-arrow",children:"â–¸"})]}),c&&(0,i.jsxs)("ul",{className:"dropdown-preview-submenu",children:[(0,i.jsx)("li",{className:"dropdown-preview-item dropdown-preview-item--nested",children:(0,i.jsx)("a",{href:"#",onClick:e=>e.preventDefault(),children:(0,e.__)("Web Design","priority-plus-navigation")})}),(0,i.jsx)("li",{className:"dropdown-preview-item dropdown-preview-item--nested",children:(0,i.jsx)("a",{href:"#",onClick:e=>e.preventDefault(),children:(0,e.__)("Development","priority-plus-navigation")})})]})]}),(0,i.jsx)("li",{className:"dropdown-preview-item",children:(0,i.jsx)("a",{href:"#",onClick:e=>e.preventDefault(),children:(0,e.__)("Contact","priority-plus-navigation")})})]})}),(0,i.jsx)("p",{className:"dropdown-preview-help",children:(0,e.__)('Live preview - Click "Services" to toggle accordion',"priority-plus-navigation")})]})}function u(e){if(!e||"string"!=typeof e)return{top:"0",right:"0",bottom:"0",left:"0"};const o=e.trim().split(/\s+/);return 1===o.length?{top:o[0],right:o[0],bottom:o[0],left:o[0]}:2===o.length?{top:o[0],right:o[1],bottom:o[0],left:o[1]}:3===o.length?{top:o[0],right:o[1],bottom:o[2],left:o[1]}:4===o.length?{top:o[0],right:o[1],bottom:o[2],left:o[3]}:{top:"0",right:"0",bottom:"0",left:"0"}}function v({attributes:o,setAttributes:r,onClose:t}){const{priorityNavDropdownStyles:l={}}=o,n=(e,o)=>{r({priorityNavDropdownStyles:{...l,[e]:o}})},s=e=>!!l[e],d=(e,o)=>{n(e,o)};return(0,i.jsxs)(a.Modal,{title:(0,e.__)("Customize Dropdown Styles","priority-plus-navigation"),onRequestClose:t,className:"priority-plus-dropdown-customizer",size:"fill",isDismissible:!0,children:[(0,i.jsxs)("div",{className:"dropdown-customizer-layout",children:[(0,i.jsxs)("div",{className:"dropdown-customizer-controls",children:[(0,i.jsxs)(a.__experimentalToolsPanel,{label:(0,e.__)("Dropdown Container","priority-plus-navigation"),resetAll:()=>{n("backgroundColor","#ffffff"),n("borderColor","#dddddd"),n("borderWidth","1px"),n("borderRadius","4px"),n("boxShadow","0 4px 12px rgba(0, 0, 0, 0.15)")},children:[(0,i.jsx)(a.__experimentalToolsPanelItem,{hasValue:()=>s("backgroundColor"),label:(0,e.__)("Background Color","priority-plus-navigation"),onDeselect:()=>d("backgroundColor","#ffffff"),isShownByDefault:!0,children:(0,i.jsxs)("div",{className:"dropdown-customizer-control",children:[(0,i.jsx)("label",{children:(0,e.__)("Background Color","priority-plus-navigation")}),(0,i.jsx)(a.ColorPicker,{color:l.backgroundColor||"#ffffff",onChange:e=>n("backgroundColor",e),enableAlpha:!0})]})}),(0,i.jsx)(a.__experimentalToolsPanelItem,{hasValue:()=>s("borderColor"),label:(0,e.__)("Border Color","priority-plus-navigation"),onDeselect:()=>d("borderColor","#dddddd"),isShownByDefault:!0,children:(0,i.jsxs)("div",{className:"dropdown-customizer-control",children:[(0,i.jsx)("label",{children:(0,e.__)("Border Color","priority-plus-navigation")}),(0,i.jsx)(a.ColorPicker,{color:l.borderColor||"#dddddd",onChange:e=>n("borderColor",e),enableAlpha:!0})]})}),(0,i.jsx)(a.__experimentalToolsPanelItem,{hasValue:()=>s("borderWidth"),label:(0,e.__)("Border Width","priority-plus-navigation"),onDeselect:()=>d("borderWidth","1px"),isShownByDefault:!0,children:(0,i.jsx)(a.__experimentalUnitControl,{label:(0,e.__)("Border Width","priority-plus-navigation"),value:l.borderWidth||"1px",onChange:e=>n("borderWidth",e),units:[{value:"px",label:"px"},{value:"rem",label:"rem"},{value:"em",label:"em"}]})}),(0,i.jsx)(a.__experimentalToolsPanelItem,{hasValue:()=>s("borderRadius"),label:(0,e.__)("Border Radius","priority-plus-navigation"),onDeselect:()=>d("borderRadius","4px"),isShownByDefault:!0,children:(0,i.jsx)(a.__experimentalUnitControl,{label:(0,e.__)("Border Radius","priority-plus-navigation"),value:l.borderRadius||"4px",onChange:e=>n("borderRadius",e),units:[{value:"px",label:"px"},{value:"rem",label:"rem"},{value:"%",label:"%"}]})}),(0,i.jsx)(a.__experimentalToolsPanelItem,{hasValue:()=>s("boxShadow"),label:(0,e.__)("Box Shadow","priority-plus-navigation"),onDeselect:()=>d("boxShadow","0 4px 12px rgba(0, 0, 0, 0.15)"),isShownByDefault:!0,children:(0,i.jsx)(a.TextControl,{label:(0,e.__)("Box Shadow","priority-plus-navigation"),value:l.boxShadow||"0 4px 12px rgba(0, 0, 0, 0.15)",onChange:e=>n("boxShadow",e),help:(0,e.__)("CSS box-shadow property","priority-plus-navigation")})})]}),(0,i.jsxs)(a.__experimentalToolsPanel,{label:(0,e.__)("Dropdown Items","priority-plus-navigation"),resetAll:()=>{n("itemSpacing","0.75rem 1.25rem"),n("itemHoverBackgroundColor","rgba(0, 0, 0, 0.05)"),n("itemHoverTextColor","inherit"),n("multiLevelIndent","1.25rem")},children:[(0,i.jsx)(a.__experimentalToolsPanelItem,{hasValue:()=>s("itemSpacing"),label:(0,e.__)("Item Spacing","priority-plus-navigation"),onDeselect:()=>d("itemSpacing","0.75rem 1.25rem"),isShownByDefault:!0,children:(0,i.jsx)(a.__experimentalBoxControl,{label:(0,e.__)("Item Spacing (Padding)","priority-plus-navigation"),values:u(l.itemSpacing||"0.75rem 1.25rem"),onChange:e=>n("itemSpacing",function(e){if(!e)return"";const{top:o="0",right:r="0",bottom:i="0",left:t="0"}=e;return o===r&&r===i&&i===t?o:o===i&&r===t?`${o} ${r}`:`${o} ${r} ${i} ${t}`}(e)),sides:["top","right","bottom","left"],units:[{value:"px",label:"px"},{value:"rem",label:"rem"},{value:"em",label:"em"}]})}),(0,i.jsx)(a.__experimentalToolsPanelItem,{hasValue:()=>s("itemHoverBackgroundColor"),label:(0,e.__)("Hover Background","priority-plus-navigation"),onDeselect:()=>d("itemHoverBackgroundColor","rgba(0, 0, 0, 0.05)"),isShownByDefault:!0,children:(0,i.jsxs)("div",{className:"dropdown-customizer-control",children:[(0,i.jsx)("label",{children:(0,e.__)("Hover Background Color","priority-plus-navigation")}),(0,i.jsx)(a.ColorPicker,{color:l.itemHoverBackgroundColor||"rgba(0, 0, 0, 0.05)",onChange:e=>n("itemHoverBackgroundColor",e),enableAlpha:!0})]})}),(0,i.jsx)(a.__experimentalToolsPanelItem,{hasValue:()=>s("itemHoverTextColor"),label:(0,e.__)("Hover Text Color","priority-plus-navigation"),onDeselect:()=>d("itemHoverTextColor","inherit"),children:(0,i.jsxs)("div",{className:"dropdown-customizer-control",children:[(0,i.jsx)("label",{children:(0,e.__)("Hover Text Color","priority-plus-navigation")}),(0,i.jsx)(a.ColorPicker,{color:l.itemHoverTextColor||"inherit",onChange:e=>n("itemHoverTextColor",e),enableAlpha:!0})]})}),(0,i.jsx)(a.__experimentalToolsPanelItem,{hasValue:()=>s("multiLevelIndent"),label:(0,e.__)("Multi-level Indent","priority-plus-navigation"),onDeselect:()=>d("multiLevelIndent","1.25rem"),isShownByDefault:!0,children:(0,i.jsx)(a.__experimentalUnitControl,{label:(0,e.__)("Multi-level Indent","priority-plus-navigation"),value:l.multiLevelIndent||"1.25rem",onChange:e=>n("multiLevelIndent",e),help:(0,e.__)("Indentation for nested submenu items","priority-plus-navigation"),units:[{value:"px",label:"px"},{value:"rem",label:"rem"},{value:"em",label:"em"}]})})]})]}),(0,i.jsx)("div",{className:"dropdown-customizer-preview",children:(0,i.jsx)(p,{dropdownStyles:l})})]}),(0,i.jsxs)("div",{className:"dropdown-customizer-footer",children:[(0,i.jsx)(a.Button,{variant:"tertiary",isDestructive:!0,onClick:()=>{r({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"}})},children:(0,e.__)("Reset to Defaults","priority-plus-navigation")}),(0,i.jsx)(a.Button,{variant:"primary",onClick:t,children:(0,e.__)("Done","priority-plus-navigation")})]})]})}const c=(0,s.createHigherOrderComponent)(e=>o=>{const{name:r,attributes:t}=o;if("core/navigation"!==r)return(0,i.jsx)(e,{...o});const l=(t.className||"").includes("is-style-priority-plus-navigation")||!0===t.priorityNavEnabled;return(0,d.useEffect)(()=>{if(!l)return;const e=document.querySelector(".block-editor-block-inspector");if(!e)return;const o=e.querySelector('.components-toggle-group-control-option-base[data-value="always"]');o&&(o.style.opacity="0.4",o.style.pointerEvents="none",o.style.textDecoration="line-through",o.style.cursor="not-allowed")},[l,t.overlayMenu]),(0,i.jsx)(e,{...o})},"addDisableAlwaysOption"),m=(0,s.createHigherOrderComponent)(o=>r=>{const{name:t,attributes:l,setAttributes:s}=r;if("core/navigation"!==t)return(0,i.jsx)(o,{...r});const p=(l.className||"").includes("is-style-priority-plus-navigation")||!0===l.priorityNavEnabled;if(!p)return(0,i.jsx)(o,{...r});const{priorityNavEnabled:u,priorityNavMoreLabel:c,priorityNavMoreBackgroundColor:m,priorityNavMoreBackgroundColorHover:g,priorityNavMoreTextColor:x,priorityNavMoreTextColorHover:h,priorityNavMorePadding:b,overlayMenu:y}=l,[w,_]=(0,d.useState)(!1);(0,d.useEffect)(()=>{p&&"always"===y&&s({overlayMenu:"mobile"})},[p,y,s]);const C=(0,n.useSetting)("spacing.spacingSizes")||[];return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(o,{...r}),(0,i.jsx)(n.InspectorControls,{group:"settings",children:(0,i.jsx)(a.Notice,{status:"info",isDismissible:!1,children:(0,e.__)('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)(n.InspectorControls,{group:"styles",children:[(0,i.jsx)(a.__experimentalToolsPanel,{label:(0,e.__)("Priority Plus Settings","priority-plus-navigation"),resetAll:()=>s({priorityNavMoreLabel:"More"}),children:(0,i.jsx)(a.__experimentalToolsPanelItem,{hasValue:()=>!!c,label:(0,e.__)("More Button Label","priority-plus-navigation"),onDeselect:()=>s({priorityNavMoreLabel:"More"}),isShownByDefault:!0,children:(0,i.jsx)(a.TextControl,{label:(0,e.__)("More Button Label","priority-plus-navigation"),value:c,onChange:e=>s({priorityNavMoreLabel:e}),help:(0,e.__)('Text displayed on the "More" button',"priority-plus-navigation")})})}),(0,i.jsx)(n.PanelColorSettings,{title:(0,e.__)("Priority Plus Colors","priority-plus-navigation"),colorSettings:[{label:(0,e.__)("Button Text Color","priority-plus-navigation"),value:x,onChange:e=>s({priorityNavMoreTextColor:e||void 0}),clearable:!0},{label:(0,e.__)("Button Text Hover Color","priority-plus-navigation"),value:h,onChange:e=>s({priorityNavMoreTextColorHover:e||void 0}),clearable:!0},{label:(0,e.__)("Button Background Color","priority-plus-navigation"),value:m,onChange:e=>s({priorityNavMoreBackgroundColor:e||void 0}),clearable:!0},{label:(0,e.__)("Button Background Hover Color","priority-plus-navigation"),value:g,onChange:e=>s({priorityNavMoreBackgroundColorHover:e||void 0}),clearable:!0}]}),(0,i.jsx)(a.__experimentalToolsPanel,{label:(0,e.__)("Priority Plus Button","priority-plus-navigation"),resetAll:()=>s({priorityNavMorePadding:void 0}),children:(0,i.jsx)(a.__experimentalToolsPanelItem,{hasValue:()=>!!b&&Object.keys(b).length>0,label:(0,e.__)("Padding","priority-plus-navigation"),onDeselect:()=>s({priorityNavMorePadding:void 0}),isShownByDefault:!0,children:C.length>0?(0,i.jsx)(n.__experimentalSpacingSizesControl,{values:b,onChange:e=>s({priorityNavMorePadding:e}),label:(0,e.__)("Button Padding","priority-plus-navigation"),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"]}):(0,i.jsx)(a.BoxControl,{label:(0,e.__)("Button Padding","priority-plus-navigation"),values:b,onChange:e=>s({priorityNavMorePadding:e}),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"],allowReset:!0})})}),(0,i.jsx)(a.__experimentalToolsPanel,{label:(0,e.__)("Dropdown Styles","priority-plus-navigation"),resetAll:()=>{s({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"}})},children:(0,i.jsx)(a.__experimentalToolsPanelItem,{hasValue:()=>{const{priorityNavDropdownStyles:e}=l;return!!e&&Object.keys(e).length>0},label:(0,e.__)("Customize Dropdown","priority-plus-navigation"),onDeselect:()=>s({priorityNavDropdownStyles:void 0}),isShownByDefault:!0,children:(0,i.jsx)(a.Button,{variant:"secondary",onClick:()=>_(!0),style:{width:"100%"},children:(0,e.__)("Customize Dropdown Styles","priority-plus-navigation")})})})]}),w&&(0,i.jsx)(v,{attributes:l,setAttributes:s,onClose:()=>_(!1)})]})},"withPriorityNavControls");(0,l.addFilter)("editor.BlockEdit","priority-plus-navigation/add-disable-always-option",c,5),(0,l.addFilter)("editor.BlockEdit","priority-plus-navigation/add-priority-plus-navigation-controls",m,10)})(); \ No newline at end of file +(()=>{"use strict";const e=window.wp.i18n,o=window.wp.blocks,r=window.wp.primitives,i=window.ReactJSXRuntime;var t=(0,i.jsx)(r.SVG,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",children:(0,i.jsx)(r.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;(0,o.registerBlockVariation)("core/navigation",{name:"priority-plus-navigation",title:(0,e.__)("Priority Plus Navigation","priority-plus-navigation"),description:(0,e.__)('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,priorityNavDropdownStyles:{backgroundColor:"#ffffff",borderColor:"#dddddd",borderWidth:"1px",borderRadius:"4px",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.15)",itemSpacing:void 0,itemHoverBackgroundColor:"rgba(0, 0, 0, 0.05)",itemHoverTextColor:"inherit",multiLevelIndent:"1.25rem"}},isActive:(e,o)=>e.className?.includes(o.className)}),(0,n.addFilter)("blocks.registerBlockType","priority-plus-navigation/extend-core-navigation",(e,o)=>"core/navigation"!==o?e:{...e,attributes:{...e.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},priorityNavDropdownStyles:{type:"object",default:{backgroundColor:"#ffffff",borderColor:"#dddddd",borderWidth:"1px",borderRadius:"4px",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.15)",itemSpacing:void 0,itemHoverBackgroundColor:"rgba(0, 0, 0, 0.05)",itemHoverTextColor:"inherit",multiLevelIndent:"1.25rem"}}}});const a=window.wp.blockEditor,l=window.wp.components,s=window.wp.compose,d=window.wp.element;function p({dropdownStyles:o}){const{backgroundColor:r="#ffffff",borderColor:t="#dddddd",borderWidth:n="1px",borderRadius:a="4px",boxShadow:l="0 4px 12px rgba(0, 0, 0, 0.15)",itemSpacing:s,itemHoverBackgroundColor:p="rgba(0, 0, 0, 0.05)",itemHoverTextColor:v="inherit",multiLevelIndent:u="1.25rem"}=o||{},[c,g]=(0,d.useState)(!0),m=e=>{if(!e)return"0.75rem 1.25rem";if("string"==typeof e)return e;if("object"==typeof e){const{top:o="0",right:r="0",bottom:i="0",left:t="0"}=e;return o===r&&r===i&&i===t?o:o===i&&r===t?`${o} ${r}`:`${o} ${r} ${i} ${t}`}return"0.75rem 1.25rem"},y=(0,d.useMemo)(()=>({"--preview-background-color":r,"--preview-border-color":t,"--preview-border-width":n,"--preview-border-radius":a,"--preview-box-shadow":l,"--preview-item-spacing":m(s),"--preview-item-hover-background":p,"--preview-item-hover-text":v,"--preview-multi-level-indent":u}),[r,t,n,a,l,s,p,v,u]);return(0,i.jsxs)("div",{className:"dropdown-preview-wrapper",children:[(0,i.jsx)("div",{className:"dropdown-preview-container",style:y,children:(0,i.jsxs)("ul",{className:"dropdown-preview-menu",children:[(0,i.jsx)("li",{className:"dropdown-preview-item",children:(0,i.jsx)("a",{href:"#",onClick:e=>e.preventDefault(),children:(0,e.__)("Home","priority-plus-navigation")})}),(0,i.jsx)("li",{className:"dropdown-preview-item dropdown-preview-item--hover",children:(0,i.jsx)("a",{href:"#",onClick:e=>e.preventDefault(),children:(0,e.__)("About (Hover)","priority-plus-navigation")})}),(0,i.jsxs)("li",{className:"dropdown-preview-item",children:[(0,i.jsxs)("button",{className:"dropdown-preview-accordion-toggle",onClick:()=>g(!c),"aria-expanded":c,children:[(0,i.jsx)("span",{className:"dropdown-preview-accordion-text",children:(0,e.__)("Services","priority-plus-navigation")}),(0,i.jsx)("span",{className:"dropdown-preview-accordion-arrow",children:"â–¸"})]}),c&&(0,i.jsxs)("ul",{className:"dropdown-preview-accordion-content",children:[(0,i.jsx)("li",{className:"dropdown-preview-item",children:(0,i.jsx)("a",{href:"#",onClick:e=>e.preventDefault(),children:(0,e.__)("Web Design","priority-plus-navigation")})}),(0,i.jsx)("li",{className:"dropdown-preview-item",children:(0,i.jsx)("a",{href:"#",onClick:e=>e.preventDefault(),children:(0,e.__)("Development","priority-plus-navigation")})})]})]}),(0,i.jsx)("li",{className:"dropdown-preview-item",children:(0,i.jsx)("a",{href:"#",onClick:e=>e.preventDefault(),children:(0,e.__)("Contact","priority-plus-navigation")})})]})}),(0,i.jsx)("p",{className:"dropdown-preview-help",children:(0,e.__)('Live preview - Click "Services" to toggle accordion',"priority-plus-navigation")})]})}function v({attributes:o,setAttributes:r,onClose:t}){const{priorityNavDropdownStyles:n={}}=o,s=(0,a.useSetting)("spacing.spacingSizes")||[],d=(e,o)=>{r({priorityNavDropdownStyles:{...n,[e]:o}})},v=e=>!!n[e],u=(e,o)=>{d(e,o)};return(0,i.jsxs)(l.Modal,{title:(0,e.__)("Customize Dropdown Styles","priority-plus-navigation"),onRequestClose:t,className:"priority-plus-dropdown-customizer",size:"fill",isDismissible:!0,children:[(0,i.jsxs)("div",{className:"dropdown-customizer-layout",children:[(0,i.jsxs)("div",{className:"dropdown-customizer-controls",children:[(0,i.jsxs)(l.__experimentalToolsPanel,{label:(0,e.__)("Dropdown Container","priority-plus-navigation"),resetAll:()=>{d("backgroundColor","#ffffff"),d("borderColor","#dddddd"),d("borderWidth","1px"),d("borderRadius","4px"),d("boxShadow","0 4px 12px rgba(0, 0, 0, 0.15)")},children:[(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>v("borderWidth"),label:(0,e.__)("Border Width","priority-plus-navigation"),onDeselect:()=>u("borderWidth","1px"),isShownByDefault:!0,children:(0,i.jsx)(l.__experimentalUnitControl,{label:(0,e.__)("Border Width","priority-plus-navigation"),value:n.borderWidth||"1px",onChange:e=>d("borderWidth",e),units:[{value:"px",label:"px"},{value:"rem",label:"rem"},{value:"em",label:"em"}]})}),(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>v("borderRadius"),label:(0,e.__)("Border Radius","priority-plus-navigation"),onDeselect:()=>u("borderRadius","4px"),isShownByDefault:!0,children:(0,i.jsx)(l.__experimentalUnitControl,{label:(0,e.__)("Border Radius","priority-plus-navigation"),value:n.borderRadius||"4px",onChange:e=>d("borderRadius",e),units:[{value:"px",label:"px"},{value:"rem",label:"rem"},{value:"%",label:"%"}]})}),(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>v("boxShadow"),label:(0,e.__)("Box Shadow","priority-plus-navigation"),onDeselect:()=>u("boxShadow","0 4px 12px rgba(0, 0, 0, 0.15)"),isShownByDefault:!0,children:(0,i.jsx)(l.TextControl,{label:(0,e.__)("Box Shadow","priority-plus-navigation"),value:n.boxShadow||"0 4px 12px rgba(0, 0, 0, 0.15)",onChange:e=>d("boxShadow",e),help:(0,e.__)("CSS box-shadow property","priority-plus-navigation")})})]}),(0,i.jsx)(a.PanelColorSettings,{title:(0,e.__)("Dropdown Container Colors","priority-plus-navigation"),colorSettings:[{label:(0,e.__)("Background Color","priority-plus-navigation"),value:n.backgroundColor,onChange:e=>d("backgroundColor",e||"#ffffff"),clearable:!0},{label:(0,e.__)("Border Color","priority-plus-navigation"),value:n.borderColor,onChange:e=>d("borderColor",e||"#dddddd"),clearable:!0}]}),(0,i.jsxs)(l.__experimentalToolsPanel,{label:(0,e.__)("Dropdown Items","priority-plus-navigation"),resetAll:()=>{d("itemSpacing",void 0),d("itemHoverBackgroundColor","rgba(0, 0, 0, 0.05)"),d("itemHoverTextColor","inherit"),d("multiLevelIndent","1.25rem")},children:[(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>!!n.itemSpacing&&("object"==typeof n.itemSpacing?Object.keys(n.itemSpacing).length>0:!!n.itemSpacing),label:(0,e.__)("Item Spacing","priority-plus-navigation"),onDeselect:()=>d("itemSpacing",void 0),isShownByDefault:!0,children:s.length>0?(0,i.jsx)(a.__experimentalSpacingSizesControl,{values:n.itemSpacing,onChange:e=>d("itemSpacing",e),label:(0,e.__)("Item Spacing (Padding)","priority-plus-navigation"),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"]}):(0,i.jsx)(l.__experimentalBoxControl,{label:(0,e.__)("Item Spacing (Padding)","priority-plus-navigation"),values:n.itemSpacing,onChange:e=>d("itemSpacing",e),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"],allowReset:!0})}),(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>v("multiLevelIndent"),label:(0,e.__)("Multi-level Indent","priority-plus-navigation"),onDeselect:()=>u("multiLevelIndent","1.25rem"),isShownByDefault:!0,children:(0,i.jsx)(l.__experimentalUnitControl,{label:(0,e.__)("Multi-level Indent","priority-plus-navigation"),value:n.multiLevelIndent||"1.25rem",onChange:e=>d("multiLevelIndent",e),help:(0,e.__)("Indentation for nested submenu items","priority-plus-navigation"),units:[{value:"px",label:"px"},{value:"rem",label:"rem"},{value:"em",label:"em"}]})})]}),(0,i.jsx)(a.PanelColorSettings,{title:(0,e.__)("Dropdown Item Hover Colors","priority-plus-navigation"),colorSettings:[{label:(0,e.__)("Hover Background Color","priority-plus-navigation"),value:n.itemHoverBackgroundColor,onChange:e=>d("itemHoverBackgroundColor",e||"rgba(0, 0, 0, 0.05)"),clearable:!0},{label:(0,e.__)("Hover Text Color","priority-plus-navigation"),value:n.itemHoverTextColor,onChange:e=>d("itemHoverTextColor",e||"inherit"),clearable:!0}]})]}),(0,i.jsx)("div",{className:"dropdown-customizer-preview",children:(0,i.jsx)(p,{dropdownStyles:n})})]}),(0,i.jsxs)("div",{className:"dropdown-customizer-footer",children:[(0,i.jsx)(l.Button,{variant:"tertiary",isDestructive:!0,onClick:()=>{r({priorityNavDropdownStyles:{backgroundColor:"#ffffff",borderColor:"#dddddd",borderWidth:"1px",borderRadius:"4px",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.15)",itemSpacing:void 0,itemHoverBackgroundColor:"rgba(0, 0, 0, 0.05)",itemHoverTextColor:"inherit",multiLevelIndent:"1.25rem"}})},children:(0,e.__)("Reset to Defaults","priority-plus-navigation")}),(0,i.jsx)(l.Button,{variant:"primary",onClick:t,children:(0,e.__)("Done","priority-plus-navigation")})]})]})}const u=(0,s.createHigherOrderComponent)(e=>o=>{const{name:r,attributes:t}=o;if("core/navigation"!==r)return(0,i.jsx)(e,{...o});const n=(t.className||"").includes("is-style-priority-plus-navigation")||!0===t.priorityNavEnabled;return(0,d.useEffect)(()=>{if(!n)return;const e=document.querySelector(".block-editor-block-inspector");if(!e)return;const o=e.querySelector('.components-toggle-group-control-option-base[data-value="always"]');o&&(o.style.opacity="0.4",o.style.pointerEvents="none",o.style.textDecoration="line-through",o.style.cursor="not-allowed")},[n,t.overlayMenu]),(0,i.jsx)(e,{...o})},"addDisableAlwaysOption"),c=(0,s.createHigherOrderComponent)(o=>r=>{const{name:t,attributes:n,setAttributes:s}=r;if("core/navigation"!==t)return(0,i.jsx)(o,{...r});const p=(n.className||"").includes("is-style-priority-plus-navigation")||!0===n.priorityNavEnabled;if(!p)return(0,i.jsx)(o,{...r});const{priorityNavEnabled:u,priorityNavMoreLabel:c,priorityNavMoreBackgroundColor:g,priorityNavMoreBackgroundColorHover:m,priorityNavMoreTextColor:y,priorityNavMoreTextColorHover:x,priorityNavMorePadding:b,overlayMenu:h}=n,[w,_]=(0,d.useState)(!1);(0,d.useEffect)(()=>{p&&"always"===h&&s({overlayMenu:"mobile"})},[p,h,s]);const C=(0,a.useSetting)("spacing.spacingSizes")||[];return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(o,{...r}),(0,i.jsx)(a.InspectorControls,{group:"settings",children:(0,i.jsx)(l.Notice,{status:"info",isDismissible:!1,children:(0,e.__)('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)(a.InspectorControls,{group:"styles",children:[(0,i.jsx)(l.__experimentalToolsPanel,{label:(0,e.__)("Priority Plus Settings","priority-plus-navigation"),resetAll:()=>s({priorityNavMoreLabel:"More"}),children:(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>!!c,label:(0,e.__)("More Button Label","priority-plus-navigation"),onDeselect:()=>s({priorityNavMoreLabel:"More"}),isShownByDefault:!0,children:(0,i.jsx)(l.TextControl,{label:(0,e.__)("More Button Label","priority-plus-navigation"),value:c,onChange:e=>s({priorityNavMoreLabel:e}),help:(0,e.__)('Text displayed on the "More" button',"priority-plus-navigation")})})}),(0,i.jsx)(a.PanelColorSettings,{title:(0,e.__)("Priority Plus Colors","priority-plus-navigation"),colorSettings:[{label:(0,e.__)("Button Text Color","priority-plus-navigation"),value:y,onChange:e=>s({priorityNavMoreTextColor:e||void 0}),clearable:!0},{label:(0,e.__)("Button Text Hover Color","priority-plus-navigation"),value:x,onChange:e=>s({priorityNavMoreTextColorHover:e||void 0}),clearable:!0},{label:(0,e.__)("Button Background Color","priority-plus-navigation"),value:g,onChange:e=>s({priorityNavMoreBackgroundColor:e||void 0}),clearable:!0},{label:(0,e.__)("Button Background Hover Color","priority-plus-navigation"),value:m,onChange:e=>s({priorityNavMoreBackgroundColorHover:e||void 0}),clearable:!0}]}),(0,i.jsx)(l.__experimentalToolsPanel,{label:(0,e.__)("Priority Plus Button","priority-plus-navigation"),resetAll:()=>s({priorityNavMorePadding:void 0}),children:(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>!!b&&Object.keys(b).length>0,label:(0,e.__)("Padding","priority-plus-navigation"),onDeselect:()=>s({priorityNavMorePadding:void 0}),isShownByDefault:!0,children:C.length>0?(0,i.jsx)(a.__experimentalSpacingSizesControl,{values:b,onChange:e=>s({priorityNavMorePadding:e}),label:(0,e.__)("Button Padding","priority-plus-navigation"),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"]}):(0,i.jsx)(l.BoxControl,{label:(0,e.__)("Button Padding","priority-plus-navigation"),values:b,onChange:e=>s({priorityNavMorePadding:e}),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"],allowReset:!0})})}),(0,i.jsx)(l.__experimentalToolsPanel,{label:(0,e.__)("Dropdown Styles","priority-plus-navigation"),resetAll:()=>{s({priorityNavDropdownStyles:{backgroundColor:"#ffffff",borderColor:"#dddddd",borderWidth:"1px",borderRadius:"4px",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.15)",itemSpacing:void 0,itemHoverBackgroundColor:"rgba(0, 0, 0, 0.05)",itemHoverTextColor:"inherit",multiLevelIndent:"1.25rem"}})},children:(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>{const{priorityNavDropdownStyles:e}=n;return!!e&&Object.keys(e).length>0},label:(0,e.__)("Customize Dropdown","priority-plus-navigation"),onDeselect:()=>s({priorityNavDropdownStyles:void 0}),isShownByDefault:!0,children:(0,i.jsx)(l.Button,{variant:"secondary",onClick:()=>_(!0),style:{width:"100%"},children:(0,e.__)("Customize Dropdown Styles","priority-plus-navigation")})})})]}),w&&(0,i.jsx)(v,{attributes:n,setAttributes:s,onClose:()=>_(!1)})]})},"withPriorityNavControls");(0,n.addFilter)("editor.BlockEdit","priority-plus-navigation/add-disable-always-option",u,5),(0,n.addFilter)("editor.BlockEdit","priority-plus-navigation/add-priority-plus-navigation-controls",c,10)})(); \ No newline at end of file diff --git a/classes/class-enqueues.php b/classes/class-enqueues.php index dea1c6b..f7bd349 100644 --- a/classes/class-enqueues.php +++ b/classes/class-enqueues.php @@ -379,7 +379,6 @@ private function inject_priority_attributes( string $block_content, string $more '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', @@ -394,6 +393,25 @@ private function inject_priority_attributes( string $block_content, string $more ); } } + + // Handle itemSpacing separately as it can be an object (SpacingSizesControl) or string + if ( isset( $dropdown_styles['itemSpacing'] ) && ! empty( $dropdown_styles['itemSpacing'] ) ) { + $item_spacing_css = ''; + if ( is_array( $dropdown_styles['itemSpacing'] ) ) { + // Convert spacing object to CSS value (same logic as padding_to_css) + $item_spacing_css = $this->padding_to_css( $dropdown_styles['itemSpacing'] ); + } elseif ( is_string( $dropdown_styles['itemSpacing'] ) ) { + // Use string value directly (backward compatibility) + $item_spacing_css = $dropdown_styles['itemSpacing']; + } + + if ( '' !== $item_spacing_css ) { + $style_parts[] = sprintf( + '--wp--custom--priority-plus-navigation--dropdown--item-spacing: %s', + esc_attr( $item_spacing_css ) + ); + } + } } // Build attributes string. diff --git a/src/variation/block.js b/src/variation/block.js index 16bdd52..f1f48c8 100644 --- a/src/variation/block.js +++ b/src/variation/block.js @@ -33,7 +33,7 @@ registerBlockVariation('core/navigation', { borderWidth: '1px', borderRadius: '4px', boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)', - itemSpacing: '0.75rem 1.25rem', + itemSpacing: undefined, itemHoverBackgroundColor: 'rgba(0, 0, 0, 0.05)', itemHoverTextColor: 'inherit', multiLevelIndent: '1.25rem', @@ -97,7 +97,7 @@ addFilter( borderWidth: '1px', borderRadius: '4px', boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)', - itemSpacing: '0.75rem 1.25rem', + itemSpacing: undefined, itemHoverBackgroundColor: 'rgba(0, 0, 0, 0.05)', itemHoverTextColor: 'inherit', multiLevelIndent: '1.25rem', diff --git a/src/variation/components/dropdown-customizer-modal.js b/src/variation/components/dropdown-customizer-modal.js index b28304e..50aa454 100644 --- a/src/variation/components/dropdown-customizer-modal.js +++ b/src/variation/components/dropdown-customizer-modal.js @@ -4,13 +4,17 @@ import { Modal, Button, - ColorPicker, TextControl, __experimentalUnitControl as UnitControl, __experimentalBoxControl as BoxControl, __experimentalToolsPanel as ToolsPanel, __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; +import { + PanelColorSettings, + __experimentalSpacingSizesControl as SpacingSizesControl, + useSetting, +} from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; /** @@ -19,75 +23,6 @@ import { __ } from '@wordpress/i18n'; import './dropdown-customizer-modal.scss'; import { DropdownPreview } from './dropdown-preview'; -/** - * 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}`; -} - export function DropdownCustomizerModal({ attributes, setAttributes, @@ -95,6 +30,9 @@ export function DropdownCustomizerModal({ }) { const { priorityNavDropdownStyles = {} } = attributes; + // Get spacing sizes from theme + const spacingSizes = useSetting('spacing.spacingSizes') || []; + // Helper to update a single style property const updateStyle = (key, value) => { setAttributes({ @@ -115,6 +53,18 @@ export function DropdownCustomizerModal({ updateStyle(key, defaultValue); }; + // Helper to check if item spacing has values + const hasItemSpacingValue = () => { + if (!priorityNavDropdownStyles.itemSpacing) { + return false; + } + // Check if it's an object (SpacingSizesControl format) or string (legacy format) + if (typeof priorityNavDropdownStyles.itemSpacing === 'object') { + return Object.keys(priorityNavDropdownStyles.itemSpacing).length > 0; + } + return !!priorityNavDropdownStyles.itemSpacing; + }; + return ( - {/* Background Color */} - hasValue('backgroundColor')} - label={__( - 'Background Color', - 'priority-plus-navigation' - )} - onDeselect={() => - resetToDefault('backgroundColor', '#ffffff') - } - isShownByDefault - > -
- - - updateStyle('backgroundColor', value) - } - enableAlpha - /> -
- - - {/* Border Color */} - hasValue('borderColor')} - label={__( - 'Border Color', - 'priority-plus-navigation' - )} - onDeselect={() => - resetToDefault('borderColor', '#dddddd') - } - isShownByDefault - > -
- - - updateStyle('borderColor', value) - } - enableAlpha - /> -
- - {/* Border Width */} hasValue('borderWidth')} @@ -302,11 +188,44 @@ export function DropdownCustomizerModal({ + {/* DROPDOWN CONTAINER COLORS */} + + updateStyle( + 'backgroundColor', + color || '#ffffff' + ), + clearable: true, + }, + { + label: __( + 'Border Color', + 'priority-plus-navigation' + ), + value: priorityNavDropdownStyles.borderColor, + onChange: (color) => + updateStyle('borderColor', color || '#dddddd'), + clearable: true, + }, + ]} + /> + {/* DROPDOWN ITEM STYLES */} { - updateStyle('itemSpacing', '0.75rem 1.25rem'); + updateStyle('itemSpacing', undefined); updateStyle( 'itemHoverBackgroundColor', 'rgba(0, 0, 0, 0.05)' @@ -317,109 +236,41 @@ export function DropdownCustomizerModal({ > {/* Item Spacing */} hasValue('itemSpacing')} - label={__( - 'Item Spacing', - 'priority-plus-navigation' - )} - onDeselect={() => - resetToDefault('itemSpacing', '0.75rem 1.25rem') - } - isShownByDefault - > - - updateStyle( - 'itemSpacing', - formatSpacingValue(value) - ) - } - sides={['top', 'right', 'bottom', 'left']} - units={[ - { value: 'px', label: 'px' }, - { value: 'rem', label: 'rem' }, - { value: 'em', label: 'em' }, - ]} - /> - - - {/* Item Hover Background Color */} - - hasValue('itemHoverBackgroundColor') - } - label={__( - 'Hover Background', - 'priority-plus-navigation' - )} + hasValue={hasItemSpacingValue} + label={__('Item Spacing', 'priority-plus-navigation')} onDeselect={() => - resetToDefault( - 'itemHoverBackgroundColor', - 'rgba(0, 0, 0, 0.05)' - ) + updateStyle('itemSpacing', undefined) } isShownByDefault > -
- - 0 ? ( + - updateStyle( - 'itemHoverBackgroundColor', - value - ) + updateStyle('itemSpacing', value) } - enableAlpha + label={__( + 'Item Spacing (Padding)', + 'priority-plus-navigation' + )} + sides={['top', 'right', 'bottom', 'left']} + units={['px', 'em', 'rem', 'vh', 'vw']} /> -
- - - {/* Item Hover Text Color */} - hasValue('itemHoverTextColor')} - label={__( - 'Hover Text Color', - 'priority-plus-navigation' - )} - onDeselect={() => - resetToDefault('itemHoverTextColor', 'inherit') - } - > -
-
+ )} {/* Multi-level Indent */} @@ -458,6 +309,43 @@ export function DropdownCustomizerModal({ /> + + {/* DROPDOWN ITEM HOVER COLORS */} + + updateStyle( + 'itemHoverBackgroundColor', + color || 'rgba(0, 0, 0, 0.05)' + ), + clearable: true, + }, + { + label: __( + 'Hover Text Color', + 'priority-plus-navigation' + ), + value: priorityNavDropdownStyles.itemHoverTextColor, + onChange: (color) => + updateStyle( + 'itemHoverTextColor', + color || 'inherit' + ), + clearable: true, + }, + ]} + />
@@ -477,7 +365,7 @@ export function DropdownCustomizerModal({ borderWidth: '1px', borderRadius: '4px', boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)', - itemSpacing: '0.75rem 1.25rem', + itemSpacing: undefined, itemHoverBackgroundColor: 'rgba(0, 0, 0, 0.05)', itemHoverTextColor: 'inherit', diff --git a/src/variation/components/dropdown-preview.js b/src/variation/components/dropdown-preview.js index 725fa7b..a4f010e 100644 --- a/src/variation/components/dropdown-preview.js +++ b/src/variation/components/dropdown-preview.js @@ -23,7 +23,7 @@ export function DropdownPreview({ dropdownStyles }) { borderWidth = '1px', borderRadius = '4px', boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)', - itemSpacing = '0.75rem 1.25rem', + itemSpacing, itemHoverBackgroundColor = 'rgba(0, 0, 0, 0.05)', itemHoverTextColor = 'inherit', multiLevelIndent = '1.25rem', @@ -32,6 +32,38 @@ export function DropdownPreview({ dropdownStyles }) { // State for accordion open/closed const [isAccordionOpen, setIsAccordionOpen] = useState(true); + // Convert itemSpacing to CSS string (handles both object and string formats) + const getItemSpacingCSS = (spacing) => { + if (!spacing) { + return '0.75rem 1.25rem'; // Default + } + + // If it's already a string, return it + if (typeof spacing === 'string') { + return spacing; + } + + // If it's an object (SpacingSizesControl format), convert to CSS + if (typeof spacing === 'object') { + const { top = '0', right = '0', bottom = '0', left = '0' } = spacing; + + // 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}`; + } + + return '0.75rem 1.25rem'; // Fallback + }; + // Memoize the inline styles to avoid unnecessary recalculations const previewStyles = useMemo( () => ({ @@ -40,7 +72,7 @@ export function DropdownPreview({ dropdownStyles }) { '--preview-border-width': borderWidth, '--preview-border-radius': borderRadius, '--preview-box-shadow': boxShadow, - '--preview-item-spacing': itemSpacing, + '--preview-item-spacing': getItemSpacingCSS(itemSpacing), '--preview-item-hover-background': itemHoverBackgroundColor, '--preview-item-hover-text': itemHoverTextColor, '--preview-multi-level-indent': multiLevelIndent, @@ -72,7 +104,7 @@ export function DropdownPreview({ dropdownStyles }) { {__('About (Hover)', 'priority-plus-navigation')} -
  • +
  • {isAccordionOpen && ( -
      -
    • +
        +
      • e.preventDefault()}> {__('Web Design', 'priority-plus-navigation')}
        • -
      • +
      • e.preventDefault()}> {__('Development', 'priority-plus-navigation')} diff --git a/src/variation/components/dropdown-preview.scss b/src/variation/components/dropdown-preview.scss index a57293a..277e55d 100644 --- a/src/variation/components/dropdown-preview.scss +++ b/src/variation/components/dropdown-preview.scss @@ -50,11 +50,6 @@ background-color: var(--preview-item-hover-background); color: var(--preview-item-hover-text); } - - // Nested item indentation - &.dropdown-preview-item--nested a { - padding-left: var(--preview-multi-level-indent); - } } // Accordion toggle button (matches frontend) @@ -94,11 +89,16 @@ } } -.dropdown-preview-submenu { +.dropdown-preview-accordion-content { list-style: none; margin: 0; padding: 0; background-color: var(--preview-background-color); + + // Nested items get indented + .dropdown-preview-item a { + padding-left: var(--preview-multi-level-indent); + } } .dropdown-preview-help { @@ -111,7 +111,7 @@ } // Interactive hover effect for demonstration -.dropdown-preview-item:not(.dropdown-preview-item--hover):not(.dropdown-preview-item--has-accordion) a:hover { +.dropdown-preview-item:not(.dropdown-preview-item--hover) a:hover { background-color: var(--preview-item-hover-background); color: var(--preview-item-hover-text); } diff --git a/src/variation/components/markup.html b/src/variation/components/markup.html new file mode 100644 index 0000000..60d93a7 --- /dev/null +++ b/src/variation/components/markup.html @@ -0,0 +1,19 @@ + \ No newline at end of file diff --git a/src/variation/controls.js b/src/variation/controls.js index 3159c51..e12b729 100644 --- a/src/variation/controls.js +++ b/src/variation/controls.js @@ -314,7 +314,7 @@ const withPriorityNavControls = createHigherOrderComponent((BlockEdit) => { borderWidth: '1px', borderRadius: '4px', boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)', - itemSpacing: '0.75rem 1.25rem', + itemSpacing: undefined, itemHoverBackgroundColor: 'rgba(0, 0, 0, 0.05)', itemHoverTextColor: 'inherit', From 253be9d43c36639a0932c8aa9344965f5f877097 Mon Sep 17 00:00:00 2001 From: Troy Chaplin Date: Sat, 3 Jan 2026 11:10:50 -0500 Subject: [PATCH 07/40] fix: formatting --- build/style-priority-plus-navigation-rtl.css | 2 +- build/style-priority-plus-navigation.css | 2 +- src/styles/style.scss | 6 ++-- .../components/dropdown-customizer-modal.js | 32 +++++++++++------ src/variation/components/dropdown-preview.js | 34 +++++++++++++++---- 5 files changed, 55 insertions(+), 21 deletions(-) diff --git a/build/style-priority-plus-navigation-rtl.css b/build/style-priority-plus-navigation-rtl.css index 5337d6f..0471325 100644 --- a/build/style-priority-plus-navigation-rtl.css +++ b/build/style-priority-plus-navigation-rtl.css @@ -1 +1 @@ -: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;border:none!important;position:relative}.is-style-priority-plus-navigation .priority-plus-navigation-more-button{align-items:center;background:var(--priority-plus-navigation--background);border-color:var(--priority-plus-navigation--border-color);border-radius:var(--priority-plus-navigation--border-radius);border-style:var(--priority-plus-navigation--border-style);border-width:var(--priority-plus-navigation--border-width);color:var(--priority-plus-navigation--color);cursor:pointer;display:flex;font-family:var(--priority-plus-navigation--font-family);font-size:var(--priority-plus-navigation--font-size);font-weight:var(--priority-plus-navigation--font-weight);outline:none;padding:var(--priority-plus-navigation--padding);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:focus,.is-style-priority-plus-navigation .priority-plus-navigation-more-button:hover{background:var(--priority-plus-navigation--background-hover);color:var(--priority-plus-navigation--color-hover)}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:focus-visible{outline:2px solid currentColor;outline-offset:-2px}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon{align-items:center;display:inline-flex;line-height:1}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon svg{fill:currentcolor;height:1.25em;width:1.25em}.is-style-priority-plus-navigation .priority-plus-navigation-more-button[aria-expanded=true] .priority-plus-navigation-icon{transform:rotate(-180deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color);border-color:var(--wp--custom--priority-plus-navigation--dropdown--border-color);border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-style:solid;border-width:var(--wp--custom--priority-plus-navigation--dropdown--border-width);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{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a{color:inherit;display:block;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 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-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]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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>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>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>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>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-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-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size: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{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{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{transform:rotate(-90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{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 .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-arrow:focus,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{transform:rotate(-90deg)}.is-style-priority-plus-navigation[data-more-hidden=true] .priority-plus-navigation-more{display:none} +: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;border:none!important;position:relative}.is-style-priority-plus-navigation .priority-plus-navigation-more-button{align-items:center;background:var(--priority-plus-navigation--background);border-color:var(--priority-plus-navigation--border-color);border-radius:var(--priority-plus-navigation--border-radius);border-style:var(--priority-plus-navigation--border-style);border-width:var(--priority-plus-navigation--border-width);color:var(--priority-plus-navigation--color);cursor:pointer;display:flex;font-family:var(--priority-plus-navigation--font-family);font-size:var(--priority-plus-navigation--font-size);font-weight:var(--priority-plus-navigation--font-weight);outline:none;padding:var(--priority-plus-navigation--padding);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:focus,.is-style-priority-plus-navigation .priority-plus-navigation-more-button:hover{background:var(--priority-plus-navigation--background-hover);color:var(--priority-plus-navigation--color-hover)}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:focus-visible{outline:2px solid currentcolor;outline-offset:-2px}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon{align-items:center;display:inline-flex;line-height:1}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon svg{fill:currentcolor;height:1.25em;width:1.25em}.is-style-priority-plus-navigation .priority-plus-navigation-more-button[aria-expanded=true] .priority-plus-navigation-icon{transform:rotate(-180deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color);border-color:var(--wp--custom--priority-plus-navigation--dropdown--border-color);border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-style:solid;border-width:var(--wp--custom--priority-plus-navigation--dropdown--border-width);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{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a{color:inherit;display:block;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 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-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]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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>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>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>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>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-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-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size: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{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{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{transform:rotate(-90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{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 .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-arrow:focus,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{transform:rotate(-90deg)}.is-style-priority-plus-navigation[data-more-hidden=true] .priority-plus-navigation-more{display:none} diff --git a/build/style-priority-plus-navigation.css b/build/style-priority-plus-navigation.css index 8618984..971a817 100644 --- a/build/style-priority-plus-navigation.css +++ b/build/style-priority-plus-navigation.css @@ -1 +1 @@ -: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;border:none!important;position:relative}.is-style-priority-plus-navigation .priority-plus-navigation-more-button{align-items:center;background:var(--priority-plus-navigation--background);border-color:var(--priority-plus-navigation--border-color);border-radius:var(--priority-plus-navigation--border-radius);border-style:var(--priority-plus-navigation--border-style);border-width:var(--priority-plus-navigation--border-width);color:var(--priority-plus-navigation--color);cursor:pointer;display:flex;font-family:var(--priority-plus-navigation--font-family);font-size:var(--priority-plus-navigation--font-size);font-weight:var(--priority-plus-navigation--font-weight);outline:none;padding:var(--priority-plus-navigation--padding);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:focus,.is-style-priority-plus-navigation .priority-plus-navigation-more-button:hover{background:var(--priority-plus-navigation--background-hover);color:var(--priority-plus-navigation--color-hover)}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:focus-visible{outline:2px solid currentColor;outline-offset:-2px}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon{align-items:center;display:inline-flex;line-height:1}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon svg{fill:currentcolor;height:1.25em;width:1.25em}.is-style-priority-plus-navigation .priority-plus-navigation-more-button[aria-expanded=true] .priority-plus-navigation-icon{transform:rotate(180deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color);border-color:var(--wp--custom--priority-plus-navigation--dropdown--border-color);border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-style:solid;border-width:var(--wp--custom--priority-plus-navigation--dropdown--border-width);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{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a{color:inherit;display:block;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 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-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]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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>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>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>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>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-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-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size: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{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{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{transform:rotate(90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{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 .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-arrow:focus,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{transform:rotate(90deg)}.is-style-priority-plus-navigation[data-more-hidden=true] .priority-plus-navigation-more{display:none} +: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;border:none!important;position:relative}.is-style-priority-plus-navigation .priority-plus-navigation-more-button{align-items:center;background:var(--priority-plus-navigation--background);border-color:var(--priority-plus-navigation--border-color);border-radius:var(--priority-plus-navigation--border-radius);border-style:var(--priority-plus-navigation--border-style);border-width:var(--priority-plus-navigation--border-width);color:var(--priority-plus-navigation--color);cursor:pointer;display:flex;font-family:var(--priority-plus-navigation--font-family);font-size:var(--priority-plus-navigation--font-size);font-weight:var(--priority-plus-navigation--font-weight);outline:none;padding:var(--priority-plus-navigation--padding);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:focus,.is-style-priority-plus-navigation .priority-plus-navigation-more-button:hover{background:var(--priority-plus-navigation--background-hover);color:var(--priority-plus-navigation--color-hover)}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:focus-visible{outline:2px solid currentcolor;outline-offset:-2px}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon{align-items:center;display:inline-flex;line-height:1}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon svg{fill:currentcolor;height:1.25em;width:1.25em}.is-style-priority-plus-navigation .priority-plus-navigation-more-button[aria-expanded=true] .priority-plus-navigation-icon{transform:rotate(180deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color);border-color:var(--wp--custom--priority-plus-navigation--dropdown--border-color);border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-style:solid;border-width:var(--wp--custom--priority-plus-navigation--dropdown--border-width);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{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a{color:inherit;display:block;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 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-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]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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>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>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>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>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-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-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size: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{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{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{transform:rotate(90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{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 .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-arrow:focus,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{transform:rotate(90deg)}.is-style-priority-plus-navigation[data-more-hidden=true] .priority-plus-navigation-more{display:none} diff --git a/src/styles/style.scss b/src/styles/style.scss index 3053a69..2e24d0c 100755 --- a/src/styles/style.scss +++ b/src/styles/style.scss @@ -34,7 +34,7 @@ } &:focus-visible { - outline: 2px solid currentColor; + outline: 2px solid currentcolor; outline-offset: -2px; } @@ -200,7 +200,7 @@ } &:focus-visible { - outline: 2px solid currentColor; + outline: 2px solid currentcolor; outline-offset: -2px; } @@ -252,7 +252,7 @@ } &:focus-visible { - outline: 2px solid currentColor; + outline: 2px solid currentcolor; outline-offset: -2px; } diff --git a/src/variation/components/dropdown-customizer-modal.js b/src/variation/components/dropdown-customizer-modal.js index 50aa454..4565a91 100644 --- a/src/variation/components/dropdown-customizer-modal.js +++ b/src/variation/components/dropdown-customizer-modal.js @@ -60,7 +60,9 @@ export function DropdownCustomizerModal({ } // Check if it's an object (SpacingSizesControl format) or string (legacy format) if (typeof priorityNavDropdownStyles.itemSpacing === 'object') { - return Object.keys(priorityNavDropdownStyles.itemSpacing).length > 0; + return ( + Object.keys(priorityNavDropdownStyles.itemSpacing).length > 0 + ); } return !!priorityNavDropdownStyles.itemSpacing; }; @@ -215,7 +217,10 @@ export function DropdownCustomizerModal({ ), value: priorityNavDropdownStyles.borderColor, onChange: (color) => - updateStyle('borderColor', color || '#dddddd'), + updateStyle( + 'borderColor', + color || '#dddddd' + ), clearable: true, }, ]} @@ -237,7 +242,10 @@ export function DropdownCustomizerModal({ {/* Item Spacing */} updateStyle('itemSpacing', undefined) } @@ -245,7 +253,9 @@ export function DropdownCustomizerModal({ > {spacingSizes.length > 0 ? ( updateStyle('itemSpacing', value) } @@ -262,7 +272,9 @@ export function DropdownCustomizerModal({ 'Item Spacing (Padding)', 'priority-plus-navigation' )} - values={priorityNavDropdownStyles.itemSpacing} + values={ + priorityNavDropdownStyles.itemSpacing + } onChange={(value) => updateStyle('itemSpacing', value) } @@ -322,8 +334,7 @@ export function DropdownCustomizerModal({ 'Hover Background Color', 'priority-plus-navigation' ), - value: - priorityNavDropdownStyles.itemHoverBackgroundColor, + value: priorityNavDropdownStyles.itemHoverBackgroundColor, onChange: (color) => updateStyle( 'itemHoverBackgroundColor', @@ -349,7 +360,9 @@ export function DropdownCustomizerModal({
    • - +
    @@ -366,8 +379,7 @@ export function DropdownCustomizerModal({ borderRadius: '4px', boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)', itemSpacing: undefined, - itemHoverBackgroundColor: - 'rgba(0, 0, 0, 0.05)', + itemHoverBackgroundColor: 'rgba(0, 0, 0, 0.05)', itemHoverTextColor: 'inherit', multiLevelIndent: '1.25rem', }, diff --git a/src/variation/components/dropdown-preview.js b/src/variation/components/dropdown-preview.js index a4f010e..368c777 100644 --- a/src/variation/components/dropdown-preview.js +++ b/src/variation/components/dropdown-preview.js @@ -15,6 +15,8 @@ import './dropdown-preview.scss'; * Displays a live preview of the dropdown menu with all applied styles. * Updates in real-time as users modify controls in the customizer. * Matches the frontend dropdown structure with accordion buttons. + * @param root0 + * @param root0.dropdownStyles */ export function DropdownPreview({ dropdownStyles }) { const { @@ -45,7 +47,12 @@ export function DropdownPreview({ dropdownStyles }) { // If it's an object (SpacingSizesControl format), convert to CSS if (typeof spacing === 'object') { - const { top = '0', right = '0', bottom = '0', left = '0' } = spacing; + const { + top = '0', + right = '0', + bottom = '0', + left = '0', + } = spacing; // All same if (top === right && right === bottom && bottom === left) { @@ -120,13 +127,25 @@ export function DropdownPreview({ dropdownStyles }) { {isAccordionOpen && ( @@ -140,7 +159,10 @@ export function DropdownPreview({ dropdownStyles }) {

    - {__('Live preview - Click "Services" to toggle accordion', 'priority-plus-navigation')} + {__( + 'Live preview - Click "Services" to toggle accordion', + 'priority-plus-navigation' + )}

    ); From f2d253b206b2d27fb381870893ccd81d836c7720 Mon Sep 17 00:00:00 2001 From: Troy Chaplin Date: Sat, 3 Jan 2026 13:54:17 -0500 Subject: [PATCH 08/40] fix: controllers in modal --- build/priority-plus-nav-editor-rtl.css | 4 +- build/priority-plus-nav-editor.asset.php | 2 +- build/priority-plus-nav-editor.css | 4 +- build/priority-plus-nav-editor.js | 2 +- build/style-priority-plus-navigation-rtl.css | 2 +- build/style-priority-plus-navigation.css | 2 +- src/styles/_variables.scss | 2 +- src/styles/editor.scss | 211 ++++++++++++ src/styles/style.scss | 8 +- src/variation/block.js | 14 +- .../components/dropdown-customizer-modal.js | 63 +++- src/variation/components/dropdown-preview.js | 303 +++++++++++------- .../components/dropdown-preview.scss | 111 +------ .../{markup.html => frontend-markup.html} | 0 src/variation/components/preview-markup.html | 1 + src/variation/controls.js | 7 +- 16 files changed, 510 insertions(+), 226 deletions(-) rename src/variation/components/{markup.html => frontend-markup.html} (100%) create mode 100644 src/variation/components/preview-markup.html diff --git a/build/priority-plus-nav-editor-rtl.css b/build/priority-plus-nav-editor-rtl.css index ac9e413..59ba1da 100644 --- a/build/priority-plus-nav-editor-rtl.css +++ b/build/priority-plus-nav-editor-rtl.css @@ -1,3 +1,3 @@ .priority-plus-dropdown-customizer .components-modal__content{display:flex;flex-direction:column;min-height:600px;padding:0}.priority-plus-dropdown-customizer .dropdown-customizer-layout{display:grid;flex:1;gap:2rem;grid-template-columns:1fr 1fr;overflow:hidden;padding:2rem}.priority-plus-dropdown-customizer .dropdown-customizer-controls{overflow-y:auto;padding-left:1rem}.priority-plus-dropdown-customizer .dropdown-customizer-controls .components-tools-panel{margin-bottom:1.5rem}.priority-plus-dropdown-customizer .dropdown-customizer-preview{align-items:flex-start;background:#f5f5f5;border-radius:4px;display:flex;justify-content:center;max-height:calc(100vh - 200px);overflow-y:auto;padding:2rem;position:sticky;top:2rem}.priority-plus-dropdown-customizer .dropdown-customizer-footer{align-items:center;background:#fff;border-top:1px solid #ddd;display:flex;justify-content:space-between;padding:1rem 2rem}.priority-plus-dropdown-customizer .dropdown-customizer-control{margin-bottom:1rem}.priority-plus-dropdown-customizer .dropdown-customizer-control label{color:#1e1e1e;display:block;font-size:11px;font-weight:500;margin-bottom:.5rem;text-transform:uppercase}.priority-plus-dropdown-customizer .dropdown-customizer-control .components-color-picker{margin-top:.5rem}.priority-plus-dropdown-customizer .components-tools-panel-item{margin-bottom:0}@media(max-width:896px){.priority-plus-dropdown-customizer .dropdown-customizer-layout{grid-template-columns:1fr}.priority-plus-dropdown-customizer .dropdown-customizer-preview{min-height:300px;position:static}} -.dropdown-preview-wrapper{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:flex-start;padding-top:1rem;width:100%}.dropdown-preview-container{background-color:var(--preview-background-color);border:var(--preview-border-width) solid var(--preview-border-color);border-radius:var(--preview-border-radius);box-shadow:var(--preview-box-shadow);font-size:16px;line-height:1.5;max-width:320px;min-width:280px;transition:all .2s ease;width:100%}.dropdown-preview-menu{list-style:none;margin:0;padding:0}.dropdown-preview-item{margin:0}.dropdown-preview-item a{background:transparent;border:none;color:inherit;cursor:pointer;display:block;font-size:inherit;line-height:inherit;padding:var(--preview-item-spacing);text-align:right;text-decoration:none;transition:all .2s ease;width:100%}.dropdown-preview-item.dropdown-preview-item--hover a{background-color:var(--preview-item-hover-background);color:var(--preview-item-hover-text)}.dropdown-preview-accordion-toggle{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;justify-content:space-between;padding:var(--preview-item-spacing);text-align:right;transition:background .2s ease,color .2s ease;width:100%}.dropdown-preview-accordion-toggle .dropdown-preview-accordion-text{flex:1}.dropdown-preview-accordion-toggle .dropdown-preview-accordion-arrow{display:inline-block;font-size:.75em;margin-right:.5rem;transition:transform .2s ease}.dropdown-preview-accordion-toggle:hover{background-color:var(--preview-item-hover-background);color:var(--preview-item-hover-text)}.dropdown-preview-accordion-toggle[aria-expanded=true] .dropdown-preview-accordion-arrow{transform:rotate(-90deg)}.dropdown-preview-accordion-content{background-color:var(--preview-background-color);list-style:none;margin:0;padding:0}.dropdown-preview-accordion-content .dropdown-preview-item a{padding-right:var(--preview-multi-level-indent)}.dropdown-preview-help{color:#757575;font-size:11px;font-style:italic;margin-top:1rem;padding:0 1rem;text-align:center}.dropdown-preview-item:not(.dropdown-preview-item--hover) a:hover{background-color:var(--preview-item-hover-background);color:var(--preview-item-hover-text)} -: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} +.dropdown-preview-wrapper{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:flex-start;padding-top:1rem;width:100%}.dropdown-preview-wrapper .priority-plus-navigation-dropdown{font-size:16px;line-height:1.5;max-width:320px;min-width:280px;opacity:1!important;position:static!important;transform:none!important;visibility:visible!important;width:100%}.dropdown-preview-wrapper .dropdown-preview-hover-demo a{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.dropdown-preview-help{color:#757575;font-size:11px;font-style:italic;margin-top:1rem;padding:0 1rem;text-align:center} +: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--padding:0}.dropdown-preview-wrapper .priority-plus-navigation-dropdown,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color)!important;border-color:var(--wp--custom--priority-plus-navigation--dropdown--border-color)!important;border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-style:solid!important;border-width:var(--wp--custom--priority-plus-navigation--dropdown--border-width)!important;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}.dropdown-preview-wrapper .priority-plus-navigation-dropdown.is-open,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown.is-open{opacity:1;transform:translateY(0);visibility:visible}.dropdown-preview-wrapper .priority-plus-navigation-dropdown li,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li{margin:0;padding:0}.dropdown-preview-wrapper .priority-plus-navigation-dropdown li a,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a{color:inherit;display:block;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-decoration:none;transition:background .2s ease,color .2s ease}.dropdown-preview-wrapper .priority-plus-navigation-dropdown li a:hover,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown 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)}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content{background:transparent;display:none;list-style:none;margin:0;padding:0}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content[aria-hidden=true],.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content[aria-hidden=true]{display:none!important}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content.is-open,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content.is-open{display:block!important}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>a,.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>a{padding-right:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent))}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a,.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>a{padding-right:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)*2)}.dropdown-preview-wrapper .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,.dropdown-preview-wrapper .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,.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>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-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>a{padding-right:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)*3)}.dropdown-preview-wrapper .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,.dropdown-preview-wrapper .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,.dropdown-preview-wrapper .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,.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>a{padding-right:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)*4)}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-wrapper,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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;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%}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text{flex:1}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-arrow,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-arrow{margin-right:.5rem;transition:transform .2s ease}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:focus,.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:hover,.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{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:focus-visible,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:focus-visible{outline:2px solid currentcolor;outline-offset:-2px}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full[aria-expanded=true] .priority-plus-navigation-accordion-arrow,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(-90deg)}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link{flex:1;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link:hover,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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)}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow .priority-plus-navigation-accordion-arrow,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow .priority-plus-navigation-accordion-arrow{display:inline-block;transition:transform .2s ease}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:focus,.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:hover,.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{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:focus-visible,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:focus-visible{outline:2px solid currentcolor;outline-offset:-2px}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow[aria-expanded=true] .priority-plus-navigation-accordion-arrow,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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 97bd9b2..38c5fa7 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' => '584e8cb2666a6adb9d11'); + array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-primitives'), 'version' => 'b49e54198c2923cea0ba'); diff --git a/build/priority-plus-nav-editor.css b/build/priority-plus-nav-editor.css index 0c3a689..91b759b 100644 --- a/build/priority-plus-nav-editor.css +++ b/build/priority-plus-nav-editor.css @@ -1,3 +1,3 @@ .priority-plus-dropdown-customizer .components-modal__content{display:flex;flex-direction:column;min-height:600px;padding:0}.priority-plus-dropdown-customizer .dropdown-customizer-layout{display:grid;flex:1;gap:2rem;grid-template-columns:1fr 1fr;overflow:hidden;padding:2rem}.priority-plus-dropdown-customizer .dropdown-customizer-controls{overflow-y:auto;padding-right:1rem}.priority-plus-dropdown-customizer .dropdown-customizer-controls .components-tools-panel{margin-bottom:1.5rem}.priority-plus-dropdown-customizer .dropdown-customizer-preview{align-items:flex-start;background:#f5f5f5;border-radius:4px;display:flex;justify-content:center;max-height:calc(100vh - 200px);overflow-y:auto;padding:2rem;position:sticky;top:2rem}.priority-plus-dropdown-customizer .dropdown-customizer-footer{align-items:center;background:#fff;border-top:1px solid #ddd;display:flex;justify-content:space-between;padding:1rem 2rem}.priority-plus-dropdown-customizer .dropdown-customizer-control{margin-bottom:1rem}.priority-plus-dropdown-customizer .dropdown-customizer-control label{color:#1e1e1e;display:block;font-size:11px;font-weight:500;margin-bottom:.5rem;text-transform:uppercase}.priority-plus-dropdown-customizer .dropdown-customizer-control .components-color-picker{margin-top:.5rem}.priority-plus-dropdown-customizer .components-tools-panel-item{margin-bottom:0}@media(max-width:896px){.priority-plus-dropdown-customizer .dropdown-customizer-layout{grid-template-columns:1fr}.priority-plus-dropdown-customizer .dropdown-customizer-preview{min-height:300px;position:static}} -.dropdown-preview-wrapper{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:flex-start;padding-top:1rem;width:100%}.dropdown-preview-container{background-color:var(--preview-background-color);border:var(--preview-border-width) solid var(--preview-border-color);border-radius:var(--preview-border-radius);box-shadow:var(--preview-box-shadow);font-size:16px;line-height:1.5;max-width:320px;min-width:280px;transition:all .2s ease;width:100%}.dropdown-preview-menu{list-style:none;margin:0;padding:0}.dropdown-preview-item{margin:0}.dropdown-preview-item a{background:transparent;border:none;color:inherit;cursor:pointer;display:block;font-size:inherit;line-height:inherit;padding:var(--preview-item-spacing);text-align:left;text-decoration:none;transition:all .2s ease;width:100%}.dropdown-preview-item.dropdown-preview-item--hover a{background-color:var(--preview-item-hover-background);color:var(--preview-item-hover-text)}.dropdown-preview-accordion-toggle{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;justify-content:space-between;padding:var(--preview-item-spacing);text-align:left;transition:background .2s ease,color .2s ease;width:100%}.dropdown-preview-accordion-toggle .dropdown-preview-accordion-text{flex:1}.dropdown-preview-accordion-toggle .dropdown-preview-accordion-arrow{display:inline-block;font-size:.75em;margin-left:.5rem;transition:transform .2s ease}.dropdown-preview-accordion-toggle:hover{background-color:var(--preview-item-hover-background);color:var(--preview-item-hover-text)}.dropdown-preview-accordion-toggle[aria-expanded=true] .dropdown-preview-accordion-arrow{transform:rotate(90deg)}.dropdown-preview-accordion-content{background-color:var(--preview-background-color);list-style:none;margin:0;padding:0}.dropdown-preview-accordion-content .dropdown-preview-item a{padding-left:var(--preview-multi-level-indent)}.dropdown-preview-help{color:#757575;font-size:11px;font-style:italic;margin-top:1rem;padding:0 1rem;text-align:center}.dropdown-preview-item:not(.dropdown-preview-item--hover) a:hover{background-color:var(--preview-item-hover-background);color:var(--preview-item-hover-text)} -: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} +.dropdown-preview-wrapper{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:flex-start;padding-top:1rem;width:100%}.dropdown-preview-wrapper .priority-plus-navigation-dropdown{font-size:16px;line-height:1.5;max-width:320px;min-width:280px;opacity:1!important;position:static!important;transform:none!important;visibility:visible!important;width:100%}.dropdown-preview-wrapper .dropdown-preview-hover-demo a{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.dropdown-preview-help{color:#757575;font-size:11px;font-style:italic;margin-top:1rem;padding:0 1rem;text-align:center} +: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--padding:0}.dropdown-preview-wrapper .priority-plus-navigation-dropdown,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color)!important;border-color:var(--wp--custom--priority-plus-navigation--dropdown--border-color)!important;border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-style:solid!important;border-width:var(--wp--custom--priority-plus-navigation--dropdown--border-width)!important;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}.dropdown-preview-wrapper .priority-plus-navigation-dropdown.is-open,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown.is-open{opacity:1;transform:translateY(0);visibility:visible}.dropdown-preview-wrapper .priority-plus-navigation-dropdown li,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li{margin:0;padding:0}.dropdown-preview-wrapper .priority-plus-navigation-dropdown li a,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a{color:inherit;display:block;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-decoration:none;transition:background .2s ease,color .2s ease}.dropdown-preview-wrapper .priority-plus-navigation-dropdown li a:hover,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown 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)}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content{background:transparent;display:none;list-style:none;margin:0;padding:0}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content[aria-hidden=true],.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content[aria-hidden=true]{display:none!important}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content.is-open,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content.is-open{display:block!important}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>a,.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>a{padding-left:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent))}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a,.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>a{padding-left:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)*2)}.dropdown-preview-wrapper .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,.dropdown-preview-wrapper .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,.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>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-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>a{padding-left:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)*3)}.dropdown-preview-wrapper .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,.dropdown-preview-wrapper .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,.dropdown-preview-wrapper .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,.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>a{padding-left:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)*4)}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-wrapper,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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;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%}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text{flex:1}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-arrow,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-arrow{margin-left:.5rem;transition:transform .2s ease}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:focus,.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:hover,.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{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:focus-visible,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:focus-visible{outline:2px solid currentcolor;outline-offset:-2px}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full[aria-expanded=true] .priority-plus-navigation-accordion-arrow,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(90deg)}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link{flex:1;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link:hover,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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)}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow .priority-plus-navigation-accordion-arrow,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow .priority-plus-navigation-accordion-arrow{display:inline-block;transition:transform .2s ease}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:focus,.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:hover,.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{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:focus-visible,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:focus-visible{outline:2px solid currentcolor;outline-offset:-2px}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow[aria-expanded=true] .priority-plus-navigation-accordion-arrow,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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 76adb48..074ed1b 100644 --- a/build/priority-plus-nav-editor.js +++ b/build/priority-plus-nav-editor.js @@ -1 +1 @@ -(()=>{"use strict";const e=window.wp.i18n,o=window.wp.blocks,r=window.wp.primitives,i=window.ReactJSXRuntime;var t=(0,i.jsx)(r.SVG,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",children:(0,i.jsx)(r.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;(0,o.registerBlockVariation)("core/navigation",{name:"priority-plus-navigation",title:(0,e.__)("Priority Plus Navigation","priority-plus-navigation"),description:(0,e.__)('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,priorityNavDropdownStyles:{backgroundColor:"#ffffff",borderColor:"#dddddd",borderWidth:"1px",borderRadius:"4px",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.15)",itemSpacing:void 0,itemHoverBackgroundColor:"rgba(0, 0, 0, 0.05)",itemHoverTextColor:"inherit",multiLevelIndent:"1.25rem"}},isActive:(e,o)=>e.className?.includes(o.className)}),(0,n.addFilter)("blocks.registerBlockType","priority-plus-navigation/extend-core-navigation",(e,o)=>"core/navigation"!==o?e:{...e,attributes:{...e.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},priorityNavDropdownStyles:{type:"object",default:{backgroundColor:"#ffffff",borderColor:"#dddddd",borderWidth:"1px",borderRadius:"4px",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.15)",itemSpacing:void 0,itemHoverBackgroundColor:"rgba(0, 0, 0, 0.05)",itemHoverTextColor:"inherit",multiLevelIndent:"1.25rem"}}}});const a=window.wp.blockEditor,l=window.wp.components,s=window.wp.compose,d=window.wp.element;function p({dropdownStyles:o}){const{backgroundColor:r="#ffffff",borderColor:t="#dddddd",borderWidth:n="1px",borderRadius:a="4px",boxShadow:l="0 4px 12px rgba(0, 0, 0, 0.15)",itemSpacing:s,itemHoverBackgroundColor:p="rgba(0, 0, 0, 0.05)",itemHoverTextColor:v="inherit",multiLevelIndent:u="1.25rem"}=o||{},[c,g]=(0,d.useState)(!0),m=e=>{if(!e)return"0.75rem 1.25rem";if("string"==typeof e)return e;if("object"==typeof e){const{top:o="0",right:r="0",bottom:i="0",left:t="0"}=e;return o===r&&r===i&&i===t?o:o===i&&r===t?`${o} ${r}`:`${o} ${r} ${i} ${t}`}return"0.75rem 1.25rem"},y=(0,d.useMemo)(()=>({"--preview-background-color":r,"--preview-border-color":t,"--preview-border-width":n,"--preview-border-radius":a,"--preview-box-shadow":l,"--preview-item-spacing":m(s),"--preview-item-hover-background":p,"--preview-item-hover-text":v,"--preview-multi-level-indent":u}),[r,t,n,a,l,s,p,v,u]);return(0,i.jsxs)("div",{className:"dropdown-preview-wrapper",children:[(0,i.jsx)("div",{className:"dropdown-preview-container",style:y,children:(0,i.jsxs)("ul",{className:"dropdown-preview-menu",children:[(0,i.jsx)("li",{className:"dropdown-preview-item",children:(0,i.jsx)("a",{href:"#",onClick:e=>e.preventDefault(),children:(0,e.__)("Home","priority-plus-navigation")})}),(0,i.jsx)("li",{className:"dropdown-preview-item dropdown-preview-item--hover",children:(0,i.jsx)("a",{href:"#",onClick:e=>e.preventDefault(),children:(0,e.__)("About (Hover)","priority-plus-navigation")})}),(0,i.jsxs)("li",{className:"dropdown-preview-item",children:[(0,i.jsxs)("button",{className:"dropdown-preview-accordion-toggle",onClick:()=>g(!c),"aria-expanded":c,children:[(0,i.jsx)("span",{className:"dropdown-preview-accordion-text",children:(0,e.__)("Services","priority-plus-navigation")}),(0,i.jsx)("span",{className:"dropdown-preview-accordion-arrow",children:"▸"})]}),c&&(0,i.jsxs)("ul",{className:"dropdown-preview-accordion-content",children:[(0,i.jsx)("li",{className:"dropdown-preview-item",children:(0,i.jsx)("a",{href:"#",onClick:e=>e.preventDefault(),children:(0,e.__)("Web Design","priority-plus-navigation")})}),(0,i.jsx)("li",{className:"dropdown-preview-item",children:(0,i.jsx)("a",{href:"#",onClick:e=>e.preventDefault(),children:(0,e.__)("Development","priority-plus-navigation")})})]})]}),(0,i.jsx)("li",{className:"dropdown-preview-item",children:(0,i.jsx)("a",{href:"#",onClick:e=>e.preventDefault(),children:(0,e.__)("Contact","priority-plus-navigation")})})]})}),(0,i.jsx)("p",{className:"dropdown-preview-help",children:(0,e.__)('Live preview - Click "Services" to toggle accordion',"priority-plus-navigation")})]})}function v({attributes:o,setAttributes:r,onClose:t}){const{priorityNavDropdownStyles:n={}}=o,s=(0,a.useSetting)("spacing.spacingSizes")||[],d=(e,o)=>{r({priorityNavDropdownStyles:{...n,[e]:o}})},v=e=>!!n[e],u=(e,o)=>{d(e,o)};return(0,i.jsxs)(l.Modal,{title:(0,e.__)("Customize Dropdown Styles","priority-plus-navigation"),onRequestClose:t,className:"priority-plus-dropdown-customizer",size:"fill",isDismissible:!0,children:[(0,i.jsxs)("div",{className:"dropdown-customizer-layout",children:[(0,i.jsxs)("div",{className:"dropdown-customizer-controls",children:[(0,i.jsxs)(l.__experimentalToolsPanel,{label:(0,e.__)("Dropdown Container","priority-plus-navigation"),resetAll:()=>{d("backgroundColor","#ffffff"),d("borderColor","#dddddd"),d("borderWidth","1px"),d("borderRadius","4px"),d("boxShadow","0 4px 12px rgba(0, 0, 0, 0.15)")},children:[(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>v("borderWidth"),label:(0,e.__)("Border Width","priority-plus-navigation"),onDeselect:()=>u("borderWidth","1px"),isShownByDefault:!0,children:(0,i.jsx)(l.__experimentalUnitControl,{label:(0,e.__)("Border Width","priority-plus-navigation"),value:n.borderWidth||"1px",onChange:e=>d("borderWidth",e),units:[{value:"px",label:"px"},{value:"rem",label:"rem"},{value:"em",label:"em"}]})}),(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>v("borderRadius"),label:(0,e.__)("Border Radius","priority-plus-navigation"),onDeselect:()=>u("borderRadius","4px"),isShownByDefault:!0,children:(0,i.jsx)(l.__experimentalUnitControl,{label:(0,e.__)("Border Radius","priority-plus-navigation"),value:n.borderRadius||"4px",onChange:e=>d("borderRadius",e),units:[{value:"px",label:"px"},{value:"rem",label:"rem"},{value:"%",label:"%"}]})}),(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>v("boxShadow"),label:(0,e.__)("Box Shadow","priority-plus-navigation"),onDeselect:()=>u("boxShadow","0 4px 12px rgba(0, 0, 0, 0.15)"),isShownByDefault:!0,children:(0,i.jsx)(l.TextControl,{label:(0,e.__)("Box Shadow","priority-plus-navigation"),value:n.boxShadow||"0 4px 12px rgba(0, 0, 0, 0.15)",onChange:e=>d("boxShadow",e),help:(0,e.__)("CSS box-shadow property","priority-plus-navigation")})})]}),(0,i.jsx)(a.PanelColorSettings,{title:(0,e.__)("Dropdown Container Colors","priority-plus-navigation"),colorSettings:[{label:(0,e.__)("Background Color","priority-plus-navigation"),value:n.backgroundColor,onChange:e=>d("backgroundColor",e||"#ffffff"),clearable:!0},{label:(0,e.__)("Border Color","priority-plus-navigation"),value:n.borderColor,onChange:e=>d("borderColor",e||"#dddddd"),clearable:!0}]}),(0,i.jsxs)(l.__experimentalToolsPanel,{label:(0,e.__)("Dropdown Items","priority-plus-navigation"),resetAll:()=>{d("itemSpacing",void 0),d("itemHoverBackgroundColor","rgba(0, 0, 0, 0.05)"),d("itemHoverTextColor","inherit"),d("multiLevelIndent","1.25rem")},children:[(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>!!n.itemSpacing&&("object"==typeof n.itemSpacing?Object.keys(n.itemSpacing).length>0:!!n.itemSpacing),label:(0,e.__)("Item Spacing","priority-plus-navigation"),onDeselect:()=>d("itemSpacing",void 0),isShownByDefault:!0,children:s.length>0?(0,i.jsx)(a.__experimentalSpacingSizesControl,{values:n.itemSpacing,onChange:e=>d("itemSpacing",e),label:(0,e.__)("Item Spacing (Padding)","priority-plus-navigation"),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"]}):(0,i.jsx)(l.__experimentalBoxControl,{label:(0,e.__)("Item Spacing (Padding)","priority-plus-navigation"),values:n.itemSpacing,onChange:e=>d("itemSpacing",e),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"],allowReset:!0})}),(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>v("multiLevelIndent"),label:(0,e.__)("Multi-level Indent","priority-plus-navigation"),onDeselect:()=>u("multiLevelIndent","1.25rem"),isShownByDefault:!0,children:(0,i.jsx)(l.__experimentalUnitControl,{label:(0,e.__)("Multi-level Indent","priority-plus-navigation"),value:n.multiLevelIndent||"1.25rem",onChange:e=>d("multiLevelIndent",e),help:(0,e.__)("Indentation for nested submenu items","priority-plus-navigation"),units:[{value:"px",label:"px"},{value:"rem",label:"rem"},{value:"em",label:"em"}]})})]}),(0,i.jsx)(a.PanelColorSettings,{title:(0,e.__)("Dropdown Item Hover Colors","priority-plus-navigation"),colorSettings:[{label:(0,e.__)("Hover Background Color","priority-plus-navigation"),value:n.itemHoverBackgroundColor,onChange:e=>d("itemHoverBackgroundColor",e||"rgba(0, 0, 0, 0.05)"),clearable:!0},{label:(0,e.__)("Hover Text Color","priority-plus-navigation"),value:n.itemHoverTextColor,onChange:e=>d("itemHoverTextColor",e||"inherit"),clearable:!0}]})]}),(0,i.jsx)("div",{className:"dropdown-customizer-preview",children:(0,i.jsx)(p,{dropdownStyles:n})})]}),(0,i.jsxs)("div",{className:"dropdown-customizer-footer",children:[(0,i.jsx)(l.Button,{variant:"tertiary",isDestructive:!0,onClick:()=>{r({priorityNavDropdownStyles:{backgroundColor:"#ffffff",borderColor:"#dddddd",borderWidth:"1px",borderRadius:"4px",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.15)",itemSpacing:void 0,itemHoverBackgroundColor:"rgba(0, 0, 0, 0.05)",itemHoverTextColor:"inherit",multiLevelIndent:"1.25rem"}})},children:(0,e.__)("Reset to Defaults","priority-plus-navigation")}),(0,i.jsx)(l.Button,{variant:"primary",onClick:t,children:(0,e.__)("Done","priority-plus-navigation")})]})]})}const u=(0,s.createHigherOrderComponent)(e=>o=>{const{name:r,attributes:t}=o;if("core/navigation"!==r)return(0,i.jsx)(e,{...o});const n=(t.className||"").includes("is-style-priority-plus-navigation")||!0===t.priorityNavEnabled;return(0,d.useEffect)(()=>{if(!n)return;const e=document.querySelector(".block-editor-block-inspector");if(!e)return;const o=e.querySelector('.components-toggle-group-control-option-base[data-value="always"]');o&&(o.style.opacity="0.4",o.style.pointerEvents="none",o.style.textDecoration="line-through",o.style.cursor="not-allowed")},[n,t.overlayMenu]),(0,i.jsx)(e,{...o})},"addDisableAlwaysOption"),c=(0,s.createHigherOrderComponent)(o=>r=>{const{name:t,attributes:n,setAttributes:s}=r;if("core/navigation"!==t)return(0,i.jsx)(o,{...r});const p=(n.className||"").includes("is-style-priority-plus-navigation")||!0===n.priorityNavEnabled;if(!p)return(0,i.jsx)(o,{...r});const{priorityNavEnabled:u,priorityNavMoreLabel:c,priorityNavMoreBackgroundColor:g,priorityNavMoreBackgroundColorHover:m,priorityNavMoreTextColor:y,priorityNavMoreTextColorHover:x,priorityNavMorePadding:b,overlayMenu:h}=n,[w,_]=(0,d.useState)(!1);(0,d.useEffect)(()=>{p&&"always"===h&&s({overlayMenu:"mobile"})},[p,h,s]);const C=(0,a.useSetting)("spacing.spacingSizes")||[];return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(o,{...r}),(0,i.jsx)(a.InspectorControls,{group:"settings",children:(0,i.jsx)(l.Notice,{status:"info",isDismissible:!1,children:(0,e.__)('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)(a.InspectorControls,{group:"styles",children:[(0,i.jsx)(l.__experimentalToolsPanel,{label:(0,e.__)("Priority Plus Settings","priority-plus-navigation"),resetAll:()=>s({priorityNavMoreLabel:"More"}),children:(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>!!c,label:(0,e.__)("More Button Label","priority-plus-navigation"),onDeselect:()=>s({priorityNavMoreLabel:"More"}),isShownByDefault:!0,children:(0,i.jsx)(l.TextControl,{label:(0,e.__)("More Button Label","priority-plus-navigation"),value:c,onChange:e=>s({priorityNavMoreLabel:e}),help:(0,e.__)('Text displayed on the "More" button',"priority-plus-navigation")})})}),(0,i.jsx)(a.PanelColorSettings,{title:(0,e.__)("Priority Plus Colors","priority-plus-navigation"),colorSettings:[{label:(0,e.__)("Button Text Color","priority-plus-navigation"),value:y,onChange:e=>s({priorityNavMoreTextColor:e||void 0}),clearable:!0},{label:(0,e.__)("Button Text Hover Color","priority-plus-navigation"),value:x,onChange:e=>s({priorityNavMoreTextColorHover:e||void 0}),clearable:!0},{label:(0,e.__)("Button Background Color","priority-plus-navigation"),value:g,onChange:e=>s({priorityNavMoreBackgroundColor:e||void 0}),clearable:!0},{label:(0,e.__)("Button Background Hover Color","priority-plus-navigation"),value:m,onChange:e=>s({priorityNavMoreBackgroundColorHover:e||void 0}),clearable:!0}]}),(0,i.jsx)(l.__experimentalToolsPanel,{label:(0,e.__)("Priority Plus Button","priority-plus-navigation"),resetAll:()=>s({priorityNavMorePadding:void 0}),children:(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>!!b&&Object.keys(b).length>0,label:(0,e.__)("Padding","priority-plus-navigation"),onDeselect:()=>s({priorityNavMorePadding:void 0}),isShownByDefault:!0,children:C.length>0?(0,i.jsx)(a.__experimentalSpacingSizesControl,{values:b,onChange:e=>s({priorityNavMorePadding:e}),label:(0,e.__)("Button Padding","priority-plus-navigation"),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"]}):(0,i.jsx)(l.BoxControl,{label:(0,e.__)("Button Padding","priority-plus-navigation"),values:b,onChange:e=>s({priorityNavMorePadding:e}),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"],allowReset:!0})})}),(0,i.jsx)(l.__experimentalToolsPanel,{label:(0,e.__)("Dropdown Styles","priority-plus-navigation"),resetAll:()=>{s({priorityNavDropdownStyles:{backgroundColor:"#ffffff",borderColor:"#dddddd",borderWidth:"1px",borderRadius:"4px",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.15)",itemSpacing:void 0,itemHoverBackgroundColor:"rgba(0, 0, 0, 0.05)",itemHoverTextColor:"inherit",multiLevelIndent:"1.25rem"}})},children:(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>{const{priorityNavDropdownStyles:e}=n;return!!e&&Object.keys(e).length>0},label:(0,e.__)("Customize Dropdown","priority-plus-navigation"),onDeselect:()=>s({priorityNavDropdownStyles:void 0}),isShownByDefault:!0,children:(0,i.jsx)(l.Button,{variant:"secondary",onClick:()=>_(!0),style:{width:"100%"},children:(0,e.__)("Customize Dropdown Styles","priority-plus-navigation")})})})]}),w&&(0,i.jsx)(v,{attributes:n,setAttributes:s,onClose:()=>_(!1)})]})},"withPriorityNavControls");(0,n.addFilter)("editor.BlockEdit","priority-plus-navigation/add-disable-always-option",u,5),(0,n.addFilter)("editor.BlockEdit","priority-plus-navigation/add-priority-plus-navigation-controls",c,10)})(); \ No newline at end of file +(()=>{"use strict";const o=window.wp.i18n,e=window.wp.blocks,r=window.wp.primitives,i=window.ReactJSXRuntime;var t=(0,i.jsx)(r.SVG,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",children:(0,i.jsx)(r.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;(0,e.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,priorityNavDropdownStyles:{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"}},isActive:(o,e)=>o.className?.includes(e.className)}),(0,n.addFilter)("blocks.registerBlockType","priority-plus-navigation/extend-core-navigation",(o,e)=>"core/navigation"!==e?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},priorityNavDropdownStyles:{type:"object",default:{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"}}}});const a=window.wp.blockEditor,l=window.wp.components,s=window.wp.compose,p=window.wp.element;function d(o){if(!o||"string"!=typeof o)return o;if(o.startsWith("var:preset|")){const e=o.match(/^var:preset\|([^|]+)\|(.+)$/);if(e)return`var(--wp--preset--${e[1]}--${e[2]})`}return o.startsWith("var("),o}function u(o){if(!o)return"0.75rem 1rem";if("string"==typeof o)return d(o);if("object"==typeof o){if(0===Object.keys(o).length)return"0.75rem 1rem";const{top:e,right:r,bottom:i,left:t}=o;if(!(e&&""!==e&&"0"!==e||r&&""!==r&&"0"!==r||i&&""!==i&&"0"!==i||t&&""!==t&&"0"!==t))return"0.75rem 1rem";const n=d(e)||"0",a=d(r)||"0",l=d(i)||"0",s=d(t)||"0";return n===a&&a===l&&l===s?n:n===l&&a===s?`${n} ${a}`:`${n} ${a} ${l} ${s}`}return"0.75rem 1rem"}function v({dropdownStyles:e}){const{backgroundColor:r="#ffffff",borderColor:t="#dddddd",borderWidth:n="1px",borderRadius:a="4px",boxShadow:l="0 4px 12px rgba(0, 0, 0, 0.15)",itemSpacing:s,itemHoverBackgroundColor:d="rgba(0, 0, 0, 0.05)",itemHoverTextColor:v="inherit",multiLevelIndent:c="1.25rem"}=e||{},[g,m]=(0,p.useState)(!0),y=(0,p.useMemo)(()=>({"--wp--custom--priority-plus-navigation--dropdown--background-color":r,"--wp--custom--priority-plus-navigation--dropdown--border-color":t,"--wp--custom--priority-plus-navigation--dropdown--border-width":n,"--wp--custom--priority-plus-navigation--dropdown--border-radius":a,"--wp--custom--priority-plus-navigation--dropdown--box-shadow":l,"--wp--custom--priority-plus-navigation--dropdown--item-spacing":u(s),"--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color":d,"--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color":v,"--wp--custom--priority-plus-navigation--dropdown--multi-level-indent":c}),[r,t,n,a,l,s,d,v,c]);return(0,i.jsxs)("div",{className:"dropdown-preview-wrapper",children:[(0,i.jsxs)("ul",{className:"priority-plus-navigation-dropdown is-open",style:y,children:[(0,i.jsx)("li",{children:(0,i.jsx)("a",{href:"#",onClick:o=>o.preventDefault(),children:(0,o.__)("Home","priority-plus-navigation")})}),(0,i.jsx)("li",{className:"dropdown-preview-hover-demo",children:(0,i.jsx)("a",{href:"#",onClick:o=>o.preventDefault(),children:(0,o.__)("About (Hover)","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:()=>m(!g),"aria-expanded":g,children:[(0,i.jsx)("span",{className:"priority-plus-navigation-accordion-text",children:(0,o.__)("Services","priority-plus-navigation")}),(0,i.jsx)("span",{className:"priority-plus-navigation-accordion-arrow","aria-hidden":"true",children:"›"})]}),g&&(0,i.jsxs)("ul",{className:"priority-plus-navigation-accordion-content is-open",children:[(0,i.jsx)("li",{children:(0,i.jsx)("a",{href:"#",onClick:o=>o.preventDefault(),children:(0,o.__)("Web Design","priority-plus-navigation")})}),(0,i.jsx)("li",{children:(0,i.jsx)("a",{href:"#",onClick:o=>o.preventDefault(),children:(0,o.__)("Development","priority-plus-navigation")})})]})]}),(0,i.jsx)("li",{children:(0,i.jsx)("a",{href:"#",onClick:o=>o.preventDefault(),children:(0,o.__)("Contact","priority-plus-navigation")})})]}),(0,i.jsx)("p",{className:"dropdown-preview-help",children:(0,o.__)('Live preview - Click "Services" to toggle accordion',"priority-plus-navigation")})]})}function c({attributes:e,setAttributes:r,onClose:t}){const n={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"},s=e.priorityNavDropdownStyles||{},d={...n,...s,itemSpacing:s.itemSpacing||n.itemSpacing},u=(0,a.useSetting)("spacing.spacingSizes")||[];(0,p.useEffect)(()=>{const o=e.priorityNavDropdownStyles||{};o.itemSpacing||r({priorityNavDropdownStyles:{...n,...o}})},[]);const c=(o,e)=>{r({priorityNavDropdownStyles:{...d,[o]:e}})},g=o=>!!d[o],m=(o,e)=>{c(o,e)};return(0,i.jsxs)(l.Modal,{title:(0,o.__)("Customize Dropdown Styles","priority-plus-navigation"),onRequestClose:t,className:"priority-plus-dropdown-customizer",size:"fill",isDismissible:!0,children:[(0,i.jsxs)("div",{className:"dropdown-customizer-layout",children:[(0,i.jsxs)("div",{className:"dropdown-customizer-controls",children:[(0,i.jsxs)(l.__experimentalToolsPanel,{label:(0,o.__)("Dropdown Container","priority-plus-navigation"),resetAll:()=>{c("backgroundColor","#ffffff"),c("borderColor","#dddddd"),c("borderWidth","1px"),c("borderRadius","4px"),c("boxShadow","0 4px 12px rgba(0, 0, 0, 0.15)")},children:[(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>g("borderWidth"),label:(0,o.__)("Border Width","priority-plus-navigation"),onDeselect:()=>m("borderWidth","1px"),isShownByDefault:!0,children:(0,i.jsx)(l.__experimentalUnitControl,{label:(0,o.__)("Border Width","priority-plus-navigation"),value:d.borderWidth||"1px",onChange:o=>c("borderWidth",o),units:[{value:"px",label:"px"},{value:"rem",label:"rem"},{value:"em",label:"em"}]})}),(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>g("borderRadius"),label:(0,o.__)("Border Radius","priority-plus-navigation"),onDeselect:()=>m("borderRadius","4px"),isShownByDefault:!0,children:(0,i.jsx)(l.__experimentalUnitControl,{label:(0,o.__)("Border Radius","priority-plus-navigation"),value:d.borderRadius||"4px",onChange:o=>c("borderRadius",o),units:[{value:"px",label:"px"},{value:"rem",label:"rem"},{value:"%",label:"%"}]})}),(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>g("boxShadow"),label:(0,o.__)("Box Shadow","priority-plus-navigation"),onDeselect:()=>m("boxShadow","0 4px 12px rgba(0, 0, 0, 0.15)"),isShownByDefault:!0,children:(0,i.jsx)(l.TextControl,{label:(0,o.__)("Box Shadow","priority-plus-navigation"),value:d.boxShadow||"0 4px 12px rgba(0, 0, 0, 0.15)",onChange:o=>c("boxShadow",o),help:(0,o.__)("CSS box-shadow property","priority-plus-navigation")})})]}),(0,i.jsx)(a.PanelColorSettings,{title:(0,o.__)("Dropdown Container Colors","priority-plus-navigation"),colorSettings:[{label:(0,o.__)("Background Color","priority-plus-navigation"),value:d.backgroundColor,onChange:o=>c("backgroundColor",o||"#ffffff"),clearable:!0},{label:(0,o.__)("Border Color","priority-plus-navigation"),value:d.borderColor,onChange:o=>c("borderColor",o||"#dddddd"),clearable:!0}]}),(0,i.jsxs)(l.__experimentalToolsPanel,{label:(0,o.__)("Dropdown Items","priority-plus-navigation"),resetAll:()=>{c("itemSpacing",{top:"0.75rem",right:"1rem",bottom:"0.75rem",left:"1rem"}),c("itemHoverBackgroundColor","rgba(0, 0, 0, 0.05)"),c("itemHoverTextColor","inherit"),c("multiLevelIndent","1.25rem")},children:[(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>!!d.itemSpacing&&("object"==typeof d.itemSpacing?Object.values(d.itemSpacing).some(o=>o&&""!==o):!!d.itemSpacing),label:(0,o.__)("Item Spacing","priority-plus-navigation"),onDeselect:()=>c("itemSpacing",{top:"0.75rem",right:"1rem",bottom:"0.75rem",left:"1rem"}),isShownByDefault:!0,children:u.length>0?(0,i.jsx)(a.__experimentalSpacingSizesControl,{values:d.itemSpacing,onChange:o=>c("itemSpacing",o),label:(0,o.__)("Item Spacing (Padding)","priority-plus-navigation"),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"]}):(0,i.jsx)(l.__experimentalBoxControl,{label:(0,o.__)("Item Spacing (Padding)","priority-plus-navigation"),values:d.itemSpacing,onChange:o=>c("itemSpacing",o),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"],allowReset:!0})}),(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>g("multiLevelIndent"),label:(0,o.__)("Multi-level Indent","priority-plus-navigation"),onDeselect:()=>m("multiLevelIndent","1.25rem"),isShownByDefault:!0,children:(0,i.jsx)(l.__experimentalUnitControl,{label:(0,o.__)("Multi-level Indent","priority-plus-navigation"),value:d.multiLevelIndent||"1.25rem",onChange:o=>c("multiLevelIndent",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"}]})})]}),(0,i.jsx)(a.PanelColorSettings,{title:(0,o.__)("Dropdown Item Hover Colors","priority-plus-navigation"),colorSettings:[{label:(0,o.__)("Hover Background Color","priority-plus-navigation"),value:d.itemHoverBackgroundColor,onChange:o=>c("itemHoverBackgroundColor",o||"rgba(0, 0, 0, 0.05)"),clearable:!0},{label:(0,o.__)("Hover Text Color","priority-plus-navigation"),value:d.itemHoverTextColor,onChange:o=>c("itemHoverTextColor",o||"inherit"),clearable:!0}]})]}),(0,i.jsx)("div",{className:"dropdown-customizer-preview",children:(0,i.jsx)(v,{dropdownStyles:d})})]}),(0,i.jsxs)("div",{className:"dropdown-customizer-footer",children:[(0,i.jsx)(l.Button,{variant:"tertiary",isDestructive:!0,onClick:()=>{r({priorityNavDropdownStyles:{backgroundColor:"#ffffff",borderColor:"#dddddd",borderWidth:"1px",borderRadius:"4px",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.15)",itemSpacing:void 0,itemHoverBackgroundColor:"rgba(0, 0, 0, 0.05)",itemHoverTextColor:"inherit",multiLevelIndent:"1.25rem"}})},children:(0,o.__)("Reset to Defaults","priority-plus-navigation")}),(0,i.jsx)(l.Button,{variant:"primary",onClick:t,children:(0,o.__)("Done","priority-plus-navigation")})]})]})}const g=(0,s.createHigherOrderComponent)(o=>e=>{const{name:r,attributes:t}=e;if("core/navigation"!==r)return(0,i.jsx)(o,{...e});const n=(t.className||"").includes("is-style-priority-plus-navigation")||!0===t.priorityNavEnabled;return(0,p.useEffect)(()=>{if(!n)return;const o=document.querySelector(".block-editor-block-inspector");if(!o)return;const e=o.querySelector('.components-toggle-group-control-option-base[data-value="always"]');e&&(e.style.opacity="0.4",e.style.pointerEvents="none",e.style.textDecoration="line-through",e.style.cursor="not-allowed")},[n,t.overlayMenu]),(0,i.jsx)(o,{...e})},"addDisableAlwaysOption"),m=(0,s.createHigherOrderComponent)(e=>r=>{const{name:t,attributes:n,setAttributes:s}=r;if("core/navigation"!==t)return(0,i.jsx)(e,{...r});const d=(n.className||"").includes("is-style-priority-plus-navigation")||!0===n.priorityNavEnabled;if(!d)return(0,i.jsx)(e,{...r});const{priorityNavEnabled:u,priorityNavMoreLabel:v,priorityNavMoreBackgroundColor:g,priorityNavMoreBackgroundColorHover:m,priorityNavMoreTextColor:y,priorityNavMoreTextColorHover:b,priorityNavMorePadding:x,overlayMenu:h}=n,[_,w]=(0,p.useState)(!1);(0,p.useEffect)(()=>{d&&"always"===h&&s({overlayMenu:"mobile"})},[d,h,s]);const f=(0,a.useSetting)("spacing.spacingSizes")||[];return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e,{...r}),(0,i.jsx)(a.InspectorControls,{group:"settings",children:(0,i.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,i.jsxs)(a.InspectorControls,{group:"styles",children:[(0,i.jsx)(l.__experimentalToolsPanel,{label:(0,o.__)("Priority Plus Settings","priority-plus-navigation"),resetAll:()=>s({priorityNavMoreLabel:"More"}),children:(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>!!v,label:(0,o.__)("More Button Label","priority-plus-navigation"),onDeselect:()=>s({priorityNavMoreLabel:"More"}),isShownByDefault:!0,children:(0,i.jsx)(l.TextControl,{label:(0,o.__)("More Button Label","priority-plus-navigation"),value:v,onChange:o=>s({priorityNavMoreLabel:o}),help:(0,o.__)('Text displayed on the "More" button',"priority-plus-navigation")})})}),(0,i.jsx)(a.PanelColorSettings,{title:(0,o.__)("Priority Plus Colors","priority-plus-navigation"),colorSettings:[{label:(0,o.__)("Button Text Color","priority-plus-navigation"),value:y,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:g,onChange:o=>s({priorityNavMoreBackgroundColor:o||void 0}),clearable:!0},{label:(0,o.__)("Button Background Hover Color","priority-plus-navigation"),value:m,onChange:o=>s({priorityNavMoreBackgroundColorHover:o||void 0}),clearable:!0}]}),(0,i.jsx)(l.__experimentalToolsPanel,{label:(0,o.__)("Priority Plus Button","priority-plus-navigation"),resetAll:()=>s({priorityNavMorePadding:void 0}),children:(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>!!x&&Object.keys(x).length>0,label:(0,o.__)("Padding","priority-plus-navigation"),onDeselect:()=>s({priorityNavMorePadding:void 0}),isShownByDefault:!0,children:f.length>0?(0,i.jsx)(a.__experimentalSpacingSizesControl,{values:x,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,i.jsx)(l.BoxControl,{label:(0,o.__)("Button Padding","priority-plus-navigation"),values:x,onChange:o=>s({priorityNavMorePadding:o}),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"],allowReset:!0})})}),(0,i.jsx)(l.__experimentalToolsPanel,{label:(0,o.__)("Dropdown Styles","priority-plus-navigation"),resetAll:()=>{s({priorityNavDropdownStyles:{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"}})},children:(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>{const{priorityNavDropdownStyles:o}=n;return!!o&&Object.keys(o).length>0},label:(0,o.__)("Customize Dropdown","priority-plus-navigation"),onDeselect:()=>s({priorityNavDropdownStyles:void 0}),isShownByDefault:!0,children:(0,i.jsx)(l.Button,{variant:"secondary",onClick:()=>w(!0),style:{width:"100%"},children:(0,o.__)("Customize Dropdown Styles","priority-plus-navigation")})})})]}),_&&(0,i.jsx)(c,{attributes:n,setAttributes:s,onClose:()=>w(!1)})]})},"withPriorityNavControls");(0,n.addFilter)("editor.BlockEdit","priority-plus-navigation/add-disable-always-option",g,5),(0,n.addFilter)("editor.BlockEdit","priority-plus-navigation/add-priority-plus-navigation-controls",m,10)})(); \ No newline at end of file diff --git a/build/style-priority-plus-navigation-rtl.css b/build/style-priority-plus-navigation-rtl.css index 0471325..b570d90 100644 --- a/build/style-priority-plus-navigation-rtl.css +++ b/build/style-priority-plus-navigation-rtl.css @@ -1 +1 @@ -: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;border:none!important;position:relative}.is-style-priority-plus-navigation .priority-plus-navigation-more-button{align-items:center;background:var(--priority-plus-navigation--background);border-color:var(--priority-plus-navigation--border-color);border-radius:var(--priority-plus-navigation--border-radius);border-style:var(--priority-plus-navigation--border-style);border-width:var(--priority-plus-navigation--border-width);color:var(--priority-plus-navigation--color);cursor:pointer;display:flex;font-family:var(--priority-plus-navigation--font-family);font-size:var(--priority-plus-navigation--font-size);font-weight:var(--priority-plus-navigation--font-weight);outline:none;padding:var(--priority-plus-navigation--padding);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:focus,.is-style-priority-plus-navigation .priority-plus-navigation-more-button:hover{background:var(--priority-plus-navigation--background-hover);color:var(--priority-plus-navigation--color-hover)}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:focus-visible{outline:2px solid currentcolor;outline-offset:-2px}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon{align-items:center;display:inline-flex;line-height:1}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon svg{fill:currentcolor;height:1.25em;width:1.25em}.is-style-priority-plus-navigation .priority-plus-navigation-more-button[aria-expanded=true] .priority-plus-navigation-icon{transform:rotate(-180deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color);border-color:var(--wp--custom--priority-plus-navigation--dropdown--border-color);border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-style:solid;border-width:var(--wp--custom--priority-plus-navigation--dropdown--border-width);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{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a{color:inherit;display:block;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 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-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]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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>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>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>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>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-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-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size: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{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{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{transform:rotate(-90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{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 .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-arrow:focus,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{transform:rotate(-90deg)}.is-style-priority-plus-navigation[data-more-hidden=true] .priority-plus-navigation-more{display:none} +: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--padding:0;border:none!important;position:relative}.is-style-priority-plus-navigation .priority-plus-navigation-more-button{align-items:center;background:var(--priority-plus-navigation--background);border-color:var(--priority-plus-navigation--border-color);border-radius:var(--priority-plus-navigation--border-radius);border-style:var(--priority-plus-navigation--border-style);border-width:var(--priority-plus-navigation--border-width);color:var(--priority-plus-navigation--color);cursor:pointer;display:flex;font-family:var(--priority-plus-navigation--font-family);font-size:var(--priority-plus-navigation--font-size);font-weight:var(--priority-plus-navigation--font-weight);outline:none;padding:var(--priority-plus-navigation--padding);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:focus,.is-style-priority-plus-navigation .priority-plus-navigation-more-button:hover{background:var(--priority-plus-navigation--background-hover);color:var(--priority-plus-navigation--color-hover)}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:focus-visible{outline:2px solid currentcolor;outline-offset:-2px}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon{align-items:center;display:inline-flex;line-height:1}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon svg{fill:currentcolor;height:1.25em;width:1.25em}.is-style-priority-plus-navigation .priority-plus-navigation-more-button[aria-expanded=true] .priority-plus-navigation-icon{transform:rotate(-180deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color)!important;border-color:var(--wp--custom--priority-plus-navigation--dropdown--border-color)!important;border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-style:solid!important;border-width:var(--wp--custom--priority-plus-navigation--dropdown--border-width)!important;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{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a{color:inherit;display:block;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 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-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]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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>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>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>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>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-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-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size: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{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{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{transform:rotate(-90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{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 .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-arrow:focus,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{transform:rotate(-90deg)}.is-style-priority-plus-navigation[data-more-hidden=true] .priority-plus-navigation-more{display:none} diff --git a/build/style-priority-plus-navigation.css b/build/style-priority-plus-navigation.css index 971a817..dc3a7cf 100644 --- a/build/style-priority-plus-navigation.css +++ b/build/style-priority-plus-navigation.css @@ -1 +1 @@ -: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;border:none!important;position:relative}.is-style-priority-plus-navigation .priority-plus-navigation-more-button{align-items:center;background:var(--priority-plus-navigation--background);border-color:var(--priority-plus-navigation--border-color);border-radius:var(--priority-plus-navigation--border-radius);border-style:var(--priority-plus-navigation--border-style);border-width:var(--priority-plus-navigation--border-width);color:var(--priority-plus-navigation--color);cursor:pointer;display:flex;font-family:var(--priority-plus-navigation--font-family);font-size:var(--priority-plus-navigation--font-size);font-weight:var(--priority-plus-navigation--font-weight);outline:none;padding:var(--priority-plus-navigation--padding);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:focus,.is-style-priority-plus-navigation .priority-plus-navigation-more-button:hover{background:var(--priority-plus-navigation--background-hover);color:var(--priority-plus-navigation--color-hover)}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:focus-visible{outline:2px solid currentcolor;outline-offset:-2px}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon{align-items:center;display:inline-flex;line-height:1}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon svg{fill:currentcolor;height:1.25em;width:1.25em}.is-style-priority-plus-navigation .priority-plus-navigation-more-button[aria-expanded=true] .priority-plus-navigation-icon{transform:rotate(180deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color);border-color:var(--wp--custom--priority-plus-navigation--dropdown--border-color);border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-style:solid;border-width:var(--wp--custom--priority-plus-navigation--dropdown--border-width);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{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a{color:inherit;display:block;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 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-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]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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>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>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>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>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-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-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size: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{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{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{transform:rotate(90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{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 .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-arrow:focus,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{transform:rotate(90deg)}.is-style-priority-plus-navigation[data-more-hidden=true] .priority-plus-navigation-more{display:none} +: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--padding:0;border:none!important;position:relative}.is-style-priority-plus-navigation .priority-plus-navigation-more-button{align-items:center;background:var(--priority-plus-navigation--background);border-color:var(--priority-plus-navigation--border-color);border-radius:var(--priority-plus-navigation--border-radius);border-style:var(--priority-plus-navigation--border-style);border-width:var(--priority-plus-navigation--border-width);color:var(--priority-plus-navigation--color);cursor:pointer;display:flex;font-family:var(--priority-plus-navigation--font-family);font-size:var(--priority-plus-navigation--font-size);font-weight:var(--priority-plus-navigation--font-weight);outline:none;padding:var(--priority-plus-navigation--padding);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:focus,.is-style-priority-plus-navigation .priority-plus-navigation-more-button:hover{background:var(--priority-plus-navigation--background-hover);color:var(--priority-plus-navigation--color-hover)}.is-style-priority-plus-navigation .priority-plus-navigation-more-button:focus-visible{outline:2px solid currentcolor;outline-offset:-2px}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon{align-items:center;display:inline-flex;line-height:1}.is-style-priority-plus-navigation .priority-plus-navigation-more-button .priority-plus-navigation-icon svg{fill:currentcolor;height:1.25em;width:1.25em}.is-style-priority-plus-navigation .priority-plus-navigation-more-button[aria-expanded=true] .priority-plus-navigation-icon{transform:rotate(180deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color)!important;border-color:var(--wp--custom--priority-plus-navigation--dropdown--border-color)!important;border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-style:solid!important;border-width:var(--wp--custom--priority-plus-navigation--dropdown--border-width)!important;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{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a{color:inherit;display:block;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 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-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]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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>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>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>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>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-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-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size: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{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{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{transform:rotate(90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{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 .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-arrow:focus,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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{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{transform:rotate(90deg)}.is-style-priority-plus-navigation[data-more-hidden=true] .priority-plus-navigation-more{display:none} diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index e6eaf36..a80b785 100755 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -10,7 +10,7 @@ --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, 0.15); - --wp--custom--priority-plus-navigation--dropdown--item-spacing: 0.75rem 1.25rem; + --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, 0.05); --wp--custom--priority-plus-navigation--dropdown--item-hover-text-color: inherit; --wp--custom--priority-plus-navigation--dropdown--multi-level-indent: 1.25rem; diff --git a/src/styles/editor.scss b/src/styles/editor.scss index 444412d..66f0194 100755 --- a/src/styles/editor.scss +++ b/src/styles/editor.scss @@ -1,5 +1,216 @@ @use "variables"; +// Import frontend dropdown styles for use in the preview +// This ensures the preview in the customizer modal uses the exact same styles as the frontend +.is-style-priority-plus-navigation, +.dropdown-preview-wrapper { + .priority-plus-navigation-dropdown { + position: absolute; + overflow: hidden; + top: 100%; + right: 0; + min-width: 200px; + background: var(--wp--custom--priority-plus-navigation--dropdown--background-color) !important; + border-width: var(--wp--custom--priority-plus-navigation--dropdown--border-width) !important; + border-style: solid !important; + border-color: var(--wp--custom--priority-plus-navigation--dropdown--border-color) !important; + border-radius: var(--wp--custom--priority-plus-navigation--dropdown--border-radius); + box-shadow: var(--wp--custom--priority-plus-navigation--dropdown--box-shadow); + list-style: none; + margin: 0; + padding: 0; + z-index: 1000; + opacity: 0; + visibility: hidden; + transform: translateY(-10px); + transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; + + &.is-open { + opacity: 1; + visibility: visible; + transform: translateY(0); + } + + li { + margin: 0; + padding: 0; + + a { + display: block; + padding: var(--wp--custom--priority-plus-navigation--dropdown--item-spacing); + color: inherit; + text-decoration: none; + transition: background 0.2s ease, color 0.2s ease; + + &: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); + } + } + } + + // Accordion content - hidden by default, shown when .is-open + .priority-plus-navigation-accordion-content { + display: none; + list-style: none; + margin: 0; + padding: 0; + background: transparent; + + &[aria-hidden="true"] { + display: none !important; + } + + &.is-open { + display: block !important; + } + + // Multi-level indentation - each nested level adds indent + // Applied to links and accordion toggle buttons + // First level - add 1x indent to the left padding + > li > a, + > li > .priority-plus-navigation-accordion-wrapper > a, + > li > .priority-plus-navigation-accordion-toggle-full { + padding-left: calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)); + } + + // Second level - add 2x indent to the left padding + .priority-plus-navigation-accordion-content { + > li > a, + > li > .priority-plus-navigation-accordion-wrapper > a, + > li > .priority-plus-navigation-accordion-toggle-full { + padding-left: calc(1rem + (var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent) * 2)); + } + + // Third level - add 3x indent to the left padding + .priority-plus-navigation-accordion-content { + > li > a, + > li > .priority-plus-navigation-accordion-wrapper > a, + > li > .priority-plus-navigation-accordion-toggle-full { + padding-left: calc(1rem + (var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent) * 3)); + } + + // Fourth level - add 4x indent to the left padding + .priority-plus-navigation-accordion-content { + > li > a, + > li > .priority-plus-navigation-accordion-wrapper > a, + > li > .priority-plus-navigation-accordion-toggle-full { + padding-left: calc(1rem + (var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent) * 4)); + } + } + } + } + } + + // Wrapper for link + arrow mode + .priority-plus-navigation-accordion-wrapper { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + } + + // Click mode: entire button is clickable + .priority-plus-navigation-accordion-toggle-full { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + padding: var(--wp--custom--priority-plus-navigation--dropdown--item-spacing); + background: transparent; + border: none; + cursor: pointer; + font-size: inherit; + font-family: inherit; + color: inherit; + text-align: left; + transition: background 0.2s ease, color 0.2s ease; + outline: none; + + .priority-plus-navigation-accordion-text { + flex: 1; + } + + .priority-plus-navigation-accordion-arrow { + margin-left: 0.5rem; + transition: transform 0.2s ease; + } + + &: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); + } + + &:focus { + background: var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color); + color: var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color); + } + + &:focus-visible { + outline: 2px solid currentcolor; + outline-offset: -2px; + } + + &[aria-expanded="true"] { + .priority-plus-navigation-accordion-arrow { + transform: rotate(90deg); + } + } + } + + // Arrow mode: link stays functional, separate arrow button + .priority-plus-navigation-accordion-link { + flex: 1; + padding: var(--wp--custom--priority-plus-navigation--dropdown--item-spacing); + transition: background 0.2s ease, color 0.2s ease; + + &: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); + } + } + + .priority-plus-navigation-accordion-toggle-arrow { + padding: var(--wp--custom--priority-plus-navigation--dropdown--item-spacing); + background: transparent; + border: none; + cursor: pointer; + font-size: inherit; + font-family: inherit; + color: inherit; + flex-shrink: 0; + transition: background 0.2s ease, color 0.2s ease; + outline: none; + + .priority-plus-navigation-accordion-arrow { + transition: transform 0.2s ease; + display: inline-block; + } + + &: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); + } + + &:focus { + background: var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color); + color: var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color); + } + + &:focus-visible { + outline: 2px solid currentcolor; + outline-offset: -2px; + } + + &[aria-expanded="true"] { + .priority-plus-navigation-accordion-arrow { + transform: rotate(90deg); + } + } + } + } +} + .editor-styles-wrapper .priority-plus-navigation-editor-wrapper nav { display: flex; flex-wrap: nowrap; diff --git a/src/styles/style.scss b/src/styles/style.scss index 2e24d0c..981123e 100755 --- a/src/styles/style.scss +++ b/src/styles/style.scss @@ -63,10 +63,10 @@ top: 100%; right: 0; min-width: 200px; - background: var(--wp--custom--priority-plus-navigation--dropdown--background-color); - border-width: var(--wp--custom--priority-plus-navigation--dropdown--border-width); - border-style: solid; - border-color: var(--wp--custom--priority-plus-navigation--dropdown--border-color); + background: var(--wp--custom--priority-plus-navigation--dropdown--background-color) !important; + border-width: var(--wp--custom--priority-plus-navigation--dropdown--border-width) !important; + border-style: solid !important; + border-color: var(--wp--custom--priority-plus-navigation--dropdown--border-color) !important; border-radius: var(--wp--custom--priority-plus-navigation--dropdown--border-radius); box-shadow: var(--wp--custom--priority-plus-navigation--dropdown--box-shadow); list-style: none; diff --git a/src/variation/block.js b/src/variation/block.js index f1f48c8..5d70e58 100644 --- a/src/variation/block.js +++ b/src/variation/block.js @@ -33,7 +33,12 @@ registerBlockVariation('core/navigation', { borderWidth: '1px', borderRadius: '4px', boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)', - itemSpacing: undefined, + itemSpacing: { + top: '0.75rem', + right: '1rem', + bottom: '0.75rem', + left: '1rem', + }, itemHoverBackgroundColor: 'rgba(0, 0, 0, 0.05)', itemHoverTextColor: 'inherit', multiLevelIndent: '1.25rem', @@ -97,7 +102,12 @@ addFilter( borderWidth: '1px', borderRadius: '4px', boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)', - itemSpacing: undefined, + itemSpacing: { + top: '0.75rem', + right: '1rem', + bottom: '0.75rem', + left: '1rem', + }, itemHoverBackgroundColor: 'rgba(0, 0, 0, 0.05)', itemHoverTextColor: 'inherit', multiLevelIndent: '1.25rem', diff --git a/src/variation/components/dropdown-customizer-modal.js b/src/variation/components/dropdown-customizer-modal.js index 4565a91..9913d25 100644 --- a/src/variation/components/dropdown-customizer-modal.js +++ b/src/variation/components/dropdown-customizer-modal.js @@ -16,6 +16,7 @@ import { useSetting, } from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; +import { useEffect } from '@wordpress/element'; /** * Internal dependencies @@ -28,11 +29,51 @@ export function DropdownCustomizerModal({ setAttributes, onClose, }) { - const { priorityNavDropdownStyles = {} } = attributes; + // Default dropdown styles + const defaultDropdownStyles = { + 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', + }; + + // Merge defaults with existing attributes (deep merge for nested objects) + const existingStyles = attributes.priorityNavDropdownStyles || {}; + const priorityNavDropdownStyles = { + ...defaultDropdownStyles, + ...existingStyles, + // If itemSpacing exists but is empty/undefined, use default + itemSpacing: existingStyles.itemSpacing || defaultDropdownStyles.itemSpacing, + }; // Get spacing sizes from theme const spacingSizes = useSetting('spacing.spacingSizes') || []; + // Initialize defaults on mount if missing + useEffect(() => { + const existingStyles = attributes.priorityNavDropdownStyles || {}; + + // Check if we need to set defaults + if (!existingStyles.itemSpacing) { + setAttributes({ + priorityNavDropdownStyles: { + ...defaultDropdownStyles, + ...existingStyles, + }, + }); + } + }, []); // Only run on mount + // Helper to update a single style property const updateStyle = (key, value) => { setAttributes({ @@ -60,9 +101,9 @@ export function DropdownCustomizerModal({ } // Check if it's an object (SpacingSizesControl format) or string (legacy format) if (typeof priorityNavDropdownStyles.itemSpacing === 'object') { - return ( - Object.keys(priorityNavDropdownStyles.itemSpacing).length > 0 - ); + // Check if object has any non-empty values + const values = Object.values(priorityNavDropdownStyles.itemSpacing); + return values.some((value) => value && value !== ''); } return !!priorityNavDropdownStyles.itemSpacing; }; @@ -230,7 +271,12 @@ export function DropdownCustomizerModal({ { - updateStyle('itemSpacing', undefined); + updateStyle('itemSpacing', { + top: '0.75rem', + right: '1rem', + bottom: '0.75rem', + left: '1rem', + }); updateStyle( 'itemHoverBackgroundColor', 'rgba(0, 0, 0, 0.05)' @@ -247,7 +293,12 @@ export function DropdownCustomizerModal({ 'priority-plus-navigation' )} onDeselect={() => - updateStyle('itemSpacing', undefined) + updateStyle('itemSpacing', { + top: '0.75rem', + right: '1rem', + bottom: '0.75rem', + left: '1rem', + }) } isShownByDefault > diff --git a/src/variation/components/dropdown-preview.js b/src/variation/components/dropdown-preview.js index 368c777..4d2afb1 100644 --- a/src/variation/components/dropdown-preview.js +++ b/src/variation/components/dropdown-preview.js @@ -9,14 +9,119 @@ import { useMemo, useState } from '@wordpress/element'; */ import './dropdown-preview.scss'; +/** + * Convert WordPress preset value format to CSS custom property format. + * + * WordPress stores preset values as "var:preset|spacing|30" which needs to be + * converted to "var(--wp--preset--spacing--30)" for CSS. + * + * @param {string} value - The preset value string + * @return {string} Converted CSS custom property or original value + */ +function convertPresetValue(value) { + if (!value || typeof value !== 'string') { + return value; + } + + // Check if value matches WordPress preset format: var:preset|spacing|30 + if (value.startsWith('var:preset|')) { + const matches = value.match(/^var:preset\|([^|]+)\|(.+)$/); + if (matches) { + const presetType = matches[1]; + const presetSlug = matches[2]; + return `var(--wp--preset--${presetType}--${presetSlug})`; + } + } + + // If it's already a CSS custom property, return as-is + if (value.startsWith('var(')) { + return value; + } + + // Otherwise return the original value + return value; +} + +/** + * Convert itemSpacing to CSS string (handles both object and string formats) + * + * @param {Object|string} spacing - The spacing value (object or string) + * @return {string} CSS spacing value + */ +function getItemSpacingCSS(spacing) { + // Handle null, undefined, or empty values + if (!spacing) { + return '0.75rem 1rem'; // Default + } + + // If it's already a string, convert presets and return + if (typeof spacing === 'string') { + return convertPresetValue(spacing); + } + + // If it's an object (SpacingSizesControl format), convert to CSS + if (typeof spacing === 'object') { + // Check if it's an empty object (after reset) + if (Object.keys(spacing).length === 0) { + return '0.75rem 1rem'; // Default for empty object + } + + const { top, right, bottom, left } = spacing; + + // Check if all values are undefined, empty, or "0" - use default + const hasValues = + (top && top !== '' && top !== '0') || + (right && right !== '' && right !== '0') || + (bottom && bottom !== '' && bottom !== '0') || + (left && left !== '' && left !== '0'); + + if (!hasValues) { + return '0.75rem 1rem'; // Default when no real values set + } + + // Convert preset values to CSS custom properties + const topVal = convertPresetValue(top) || ''; + const rightVal = convertPresetValue(right) || ''; + const bottomVal = convertPresetValue(bottom) || ''; + const leftVal = convertPresetValue(left) || ''; + + // If any value is empty, we can't use shorthand properly + // Return full format with fallback to 0 for empty sides + const topFinal = topVal || '0'; + const rightFinal = rightVal || '0'; + const bottomFinal = bottomVal || '0'; + const leftFinal = leftVal || '0'; + + // All same + if ( + topFinal === rightFinal && + rightFinal === bottomFinal && + bottomFinal === leftFinal + ) { + return topFinal; + } + + // Top/bottom same, left/right same + if (topFinal === bottomFinal && rightFinal === leftFinal) { + return `${topFinal} ${rightFinal}`; + } + + // All different + return `${topFinal} ${rightFinal} ${bottomFinal} ${leftFinal}`; + } + + return '0.75rem 1rem'; // Fallback +} + /** * DropdownPreview Component * - * Displays a live preview of the dropdown menu with all applied styles. - * Updates in real-time as users modify controls in the customizer. - * Matches the frontend dropdown structure with accordion buttons. - * @param root0 - * @param root0.dropdownStyles + * Displays a live preview of the dropdown menu using the exact same classes + * and structure as the frontend to ensure 100% accuracy. + * + * @param {Object} props - Component props + * @param {Object} props.dropdownStyles - Dropdown style settings + * @return {JSX.Element} Preview component */ export function DropdownPreview({ dropdownStyles }) { const { @@ -34,55 +139,27 @@ export function DropdownPreview({ dropdownStyles }) { // State for accordion open/closed const [isAccordionOpen, setIsAccordionOpen] = useState(true); - // Convert itemSpacing to CSS string (handles both object and string formats) - const getItemSpacingCSS = (spacing) => { - if (!spacing) { - return '0.75rem 1.25rem'; // Default - } - - // If it's already a string, return it - if (typeof spacing === 'string') { - return spacing; - } - - // If it's an object (SpacingSizesControl format), convert to CSS - if (typeof spacing === 'object') { - const { - top = '0', - right = '0', - bottom = '0', - left = '0', - } = spacing; - - // 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}`; - } - - return '0.75rem 1.25rem'; // Fallback - }; - - // Memoize the inline styles to avoid unnecessary recalculations + // Memoize the inline styles using the same CSS custom property names as the frontend const previewStyles = useMemo( () => ({ - '--preview-background-color': backgroundColor, - '--preview-border-color': borderColor, - '--preview-border-width': borderWidth, - '--preview-border-radius': borderRadius, - '--preview-box-shadow': boxShadow, - '--preview-item-spacing': getItemSpacingCSS(itemSpacing), - '--preview-item-hover-background': itemHoverBackgroundColor, - '--preview-item-hover-text': itemHoverTextColor, - '--preview-multi-level-indent': multiLevelIndent, + '--wp--custom--priority-plus-navigation--dropdown--background-color': + backgroundColor, + '--wp--custom--priority-plus-navigation--dropdown--border-color': + borderColor, + '--wp--custom--priority-plus-navigation--dropdown--border-width': + borderWidth, + '--wp--custom--priority-plus-navigation--dropdown--border-radius': + borderRadius, + '--wp--custom--priority-plus-navigation--dropdown--box-shadow': + boxShadow, + '--wp--custom--priority-plus-navigation--dropdown--item-spacing': + getItemSpacingCSS(itemSpacing), + '--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color': + itemHoverBackgroundColor, + '--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color': + itemHoverTextColor, + '--wp--custom--priority-plus-navigation--dropdown--multi-level-indent': + multiLevelIndent, }), [ backgroundColor, @@ -99,65 +176,71 @@ export function DropdownPreview({ dropdownStyles }) { return (
    -
    - -
    + › + + + {isAccordionOpen && ( + + )} + +
  • + e.preventDefault()}> + {__('Contact', 'priority-plus-navigation')} + +
    • +

    {__( 'Live preview - Click "Services" to toggle accordion', diff --git a/src/variation/components/dropdown-preview.scss b/src/variation/components/dropdown-preview.scss index 277e55d..3eec2e7 100644 --- a/src/variation/components/dropdown-preview.scss +++ b/src/variation/components/dropdown-preview.scss @@ -1,3 +1,5 @@ +// Wrapper styles for the preview container +// The dropdown itself uses the exact same classes as the frontend .dropdown-preview-wrapper { display: flex; flex-direction: column; @@ -6,98 +8,25 @@ width: 100%; height: 100%; padding-top: 1rem; -} - -.dropdown-preview-container { - background-color: var(--preview-background-color); - border: var(--preview-border-width) solid var(--preview-border-color); - border-radius: var(--preview-border-radius); - box-shadow: var(--preview-box-shadow); - min-width: 280px; - max-width: 320px; - width: 100%; - transition: all 0.2s ease; - font-size: 16px; - line-height: 1.5; -} - -.dropdown-preview-menu { - list-style: none; - margin: 0; - padding: 0; -} - -.dropdown-preview-item { - margin: 0; - a { - display: block; - padding: var(--preview-item-spacing); - color: inherit; - text-decoration: none; - transition: all 0.2s ease; - cursor: pointer; + // The dropdown uses the same .priority-plus-navigation-dropdown class as frontend + // Override position and visibility for preview display + .priority-plus-navigation-dropdown { + position: static !important; + opacity: 1 !important; + visibility: visible !important; + transform: none !important; + min-width: 280px; + max-width: 320px; width: 100%; - border: none; - background: transparent; - text-align: left; - font-size: inherit; - line-height: inherit; - } - - // Hover state example - &.dropdown-preview-item--hover a { - background-color: var(--preview-item-hover-background); - color: var(--preview-item-hover-text); - } -} - -// Accordion toggle button (matches frontend) -.dropdown-preview-accordion-toggle { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - padding: var(--preview-item-spacing); - background: transparent; - border: none; - cursor: pointer; - font-size: inherit; - font-family: inherit; - color: inherit; - text-align: left; - transition: background 0.2s ease, color 0.2s ease; - - .dropdown-preview-accordion-text { - flex: 1; - } - - .dropdown-preview-accordion-arrow { - margin-left: 0.5rem; - transition: transform 0.2s ease; - display: inline-block; - font-size: 0.75em; - } - - &:hover { - background-color: var(--preview-item-hover-background); - color: var(--preview-item-hover-text); + font-size: 16px; + line-height: 1.5; } - &[aria-expanded="true"] .dropdown-preview-accordion-arrow { - transform: rotate(90deg); - } -} - -.dropdown-preview-accordion-content { - list-style: none; - margin: 0; - padding: 0; - background-color: var(--preview-background-color); - - // Nested items get indented - .dropdown-preview-item a { - padding-left: var(--preview-multi-level-indent); + // Demo hover state for the "About (Hover)" item + .dropdown-preview-hover-demo a { + background: var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color); + color: var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color); } } @@ -109,9 +38,3 @@ font-style: italic; padding: 0 1rem; } - -// Interactive hover effect for demonstration -.dropdown-preview-item:not(.dropdown-preview-item--hover) a:hover { - background-color: var(--preview-item-hover-background); - color: var(--preview-item-hover-text); -} diff --git a/src/variation/components/markup.html b/src/variation/components/frontend-markup.html similarity index 100% rename from src/variation/components/markup.html rename to src/variation/components/frontend-markup.html diff --git a/src/variation/components/preview-markup.html b/src/variation/components/preview-markup.html new file mode 100644 index 0000000..b89bd0a --- /dev/null +++ b/src/variation/components/preview-markup.html @@ -0,0 +1 @@ +

    \ No newline at end of file diff --git a/src/variation/controls.js b/src/variation/controls.js index e12b729..04d76cc 100644 --- a/src/variation/controls.js +++ b/src/variation/controls.js @@ -314,7 +314,12 @@ const withPriorityNavControls = createHigherOrderComponent((BlockEdit) => { borderWidth: '1px', borderRadius: '4px', boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)', - itemSpacing: undefined, + itemSpacing: { + top: '0.75rem', + right: '1rem', + bottom: '0.75rem', + left: '1rem', + }, itemHoverBackgroundColor: 'rgba(0, 0, 0, 0.05)', itemHoverTextColor: 'inherit', From a340f2b15d115288eec703fc434ffba743409d1e Mon Sep 17 00:00:00 2001 From: Troy Chaplin Date: Sat, 3 Jan 2026 14:10:26 -0500 Subject: [PATCH 09/40] clean up code --- build/priority-plus-nav-editor.asset.php | 2 +- build/priority-plus-nav-editor.js | 2 +- src/variation/block.js | 39 ++--------- .../components/dropdown-customizer-modal.js | 70 ++++++------------- src/variation/constants.js | 27 +++++++ src/variation/controls.js | 23 ++---- 6 files changed, 65 insertions(+), 98 deletions(-) create mode 100644 src/variation/constants.js diff --git a/build/priority-plus-nav-editor.asset.php b/build/priority-plus-nav-editor.asset.php index 38c5fa7..2fc6f03 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' => 'b49e54198c2923cea0ba'); + array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-primitives'), 'version' => '781fe386df0802d13a4f'); diff --git a/build/priority-plus-nav-editor.js b/build/priority-plus-nav-editor.js index 074ed1b..edc1b3f 100644 --- a/build/priority-plus-nav-editor.js +++ b/build/priority-plus-nav-editor.js @@ -1 +1 @@ -(()=>{"use strict";const o=window.wp.i18n,e=window.wp.blocks,r=window.wp.primitives,i=window.ReactJSXRuntime;var t=(0,i.jsx)(r.SVG,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",children:(0,i.jsx)(r.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;(0,e.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,priorityNavDropdownStyles:{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"}},isActive:(o,e)=>o.className?.includes(e.className)}),(0,n.addFilter)("blocks.registerBlockType","priority-plus-navigation/extend-core-navigation",(o,e)=>"core/navigation"!==e?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},priorityNavDropdownStyles:{type:"object",default:{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"}}}});const a=window.wp.blockEditor,l=window.wp.components,s=window.wp.compose,p=window.wp.element;function d(o){if(!o||"string"!=typeof o)return o;if(o.startsWith("var:preset|")){const e=o.match(/^var:preset\|([^|]+)\|(.+)$/);if(e)return`var(--wp--preset--${e[1]}--${e[2]})`}return o.startsWith("var("),o}function u(o){if(!o)return"0.75rem 1rem";if("string"==typeof o)return d(o);if("object"==typeof o){if(0===Object.keys(o).length)return"0.75rem 1rem";const{top:e,right:r,bottom:i,left:t}=o;if(!(e&&""!==e&&"0"!==e||r&&""!==r&&"0"!==r||i&&""!==i&&"0"!==i||t&&""!==t&&"0"!==t))return"0.75rem 1rem";const n=d(e)||"0",a=d(r)||"0",l=d(i)||"0",s=d(t)||"0";return n===a&&a===l&&l===s?n:n===l&&a===s?`${n} ${a}`:`${n} ${a} ${l} ${s}`}return"0.75rem 1rem"}function v({dropdownStyles:e}){const{backgroundColor:r="#ffffff",borderColor:t="#dddddd",borderWidth:n="1px",borderRadius:a="4px",boxShadow:l="0 4px 12px rgba(0, 0, 0, 0.15)",itemSpacing:s,itemHoverBackgroundColor:d="rgba(0, 0, 0, 0.05)",itemHoverTextColor:v="inherit",multiLevelIndent:c="1.25rem"}=e||{},[g,m]=(0,p.useState)(!0),y=(0,p.useMemo)(()=>({"--wp--custom--priority-plus-navigation--dropdown--background-color":r,"--wp--custom--priority-plus-navigation--dropdown--border-color":t,"--wp--custom--priority-plus-navigation--dropdown--border-width":n,"--wp--custom--priority-plus-navigation--dropdown--border-radius":a,"--wp--custom--priority-plus-navigation--dropdown--box-shadow":l,"--wp--custom--priority-plus-navigation--dropdown--item-spacing":u(s),"--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color":d,"--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color":v,"--wp--custom--priority-plus-navigation--dropdown--multi-level-indent":c}),[r,t,n,a,l,s,d,v,c]);return(0,i.jsxs)("div",{className:"dropdown-preview-wrapper",children:[(0,i.jsxs)("ul",{className:"priority-plus-navigation-dropdown is-open",style:y,children:[(0,i.jsx)("li",{children:(0,i.jsx)("a",{href:"#",onClick:o=>o.preventDefault(),children:(0,o.__)("Home","priority-plus-navigation")})}),(0,i.jsx)("li",{className:"dropdown-preview-hover-demo",children:(0,i.jsx)("a",{href:"#",onClick:o=>o.preventDefault(),children:(0,o.__)("About (Hover)","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:()=>m(!g),"aria-expanded":g,children:[(0,i.jsx)("span",{className:"priority-plus-navigation-accordion-text",children:(0,o.__)("Services","priority-plus-navigation")}),(0,i.jsx)("span",{className:"priority-plus-navigation-accordion-arrow","aria-hidden":"true",children:"›"})]}),g&&(0,i.jsxs)("ul",{className:"priority-plus-navigation-accordion-content is-open",children:[(0,i.jsx)("li",{children:(0,i.jsx)("a",{href:"#",onClick:o=>o.preventDefault(),children:(0,o.__)("Web Design","priority-plus-navigation")})}),(0,i.jsx)("li",{children:(0,i.jsx)("a",{href:"#",onClick:o=>o.preventDefault(),children:(0,o.__)("Development","priority-plus-navigation")})})]})]}),(0,i.jsx)("li",{children:(0,i.jsx)("a",{href:"#",onClick:o=>o.preventDefault(),children:(0,o.__)("Contact","priority-plus-navigation")})})]}),(0,i.jsx)("p",{className:"dropdown-preview-help",children:(0,o.__)('Live preview - Click "Services" to toggle accordion',"priority-plus-navigation")})]})}function c({attributes:e,setAttributes:r,onClose:t}){const n={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"},s=e.priorityNavDropdownStyles||{},d={...n,...s,itemSpacing:s.itemSpacing||n.itemSpacing},u=(0,a.useSetting)("spacing.spacingSizes")||[];(0,p.useEffect)(()=>{const o=e.priorityNavDropdownStyles||{};o.itemSpacing||r({priorityNavDropdownStyles:{...n,...o}})},[]);const c=(o,e)=>{r({priorityNavDropdownStyles:{...d,[o]:e}})},g=o=>!!d[o],m=(o,e)=>{c(o,e)};return(0,i.jsxs)(l.Modal,{title:(0,o.__)("Customize Dropdown Styles","priority-plus-navigation"),onRequestClose:t,className:"priority-plus-dropdown-customizer",size:"fill",isDismissible:!0,children:[(0,i.jsxs)("div",{className:"dropdown-customizer-layout",children:[(0,i.jsxs)("div",{className:"dropdown-customizer-controls",children:[(0,i.jsxs)(l.__experimentalToolsPanel,{label:(0,o.__)("Dropdown Container","priority-plus-navigation"),resetAll:()=>{c("backgroundColor","#ffffff"),c("borderColor","#dddddd"),c("borderWidth","1px"),c("borderRadius","4px"),c("boxShadow","0 4px 12px rgba(0, 0, 0, 0.15)")},children:[(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>g("borderWidth"),label:(0,o.__)("Border Width","priority-plus-navigation"),onDeselect:()=>m("borderWidth","1px"),isShownByDefault:!0,children:(0,i.jsx)(l.__experimentalUnitControl,{label:(0,o.__)("Border Width","priority-plus-navigation"),value:d.borderWidth||"1px",onChange:o=>c("borderWidth",o),units:[{value:"px",label:"px"},{value:"rem",label:"rem"},{value:"em",label:"em"}]})}),(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>g("borderRadius"),label:(0,o.__)("Border Radius","priority-plus-navigation"),onDeselect:()=>m("borderRadius","4px"),isShownByDefault:!0,children:(0,i.jsx)(l.__experimentalUnitControl,{label:(0,o.__)("Border Radius","priority-plus-navigation"),value:d.borderRadius||"4px",onChange:o=>c("borderRadius",o),units:[{value:"px",label:"px"},{value:"rem",label:"rem"},{value:"%",label:"%"}]})}),(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>g("boxShadow"),label:(0,o.__)("Box Shadow","priority-plus-navigation"),onDeselect:()=>m("boxShadow","0 4px 12px rgba(0, 0, 0, 0.15)"),isShownByDefault:!0,children:(0,i.jsx)(l.TextControl,{label:(0,o.__)("Box Shadow","priority-plus-navigation"),value:d.boxShadow||"0 4px 12px rgba(0, 0, 0, 0.15)",onChange:o=>c("boxShadow",o),help:(0,o.__)("CSS box-shadow property","priority-plus-navigation")})})]}),(0,i.jsx)(a.PanelColorSettings,{title:(0,o.__)("Dropdown Container Colors","priority-plus-navigation"),colorSettings:[{label:(0,o.__)("Background Color","priority-plus-navigation"),value:d.backgroundColor,onChange:o=>c("backgroundColor",o||"#ffffff"),clearable:!0},{label:(0,o.__)("Border Color","priority-plus-navigation"),value:d.borderColor,onChange:o=>c("borderColor",o||"#dddddd"),clearable:!0}]}),(0,i.jsxs)(l.__experimentalToolsPanel,{label:(0,o.__)("Dropdown Items","priority-plus-navigation"),resetAll:()=>{c("itemSpacing",{top:"0.75rem",right:"1rem",bottom:"0.75rem",left:"1rem"}),c("itemHoverBackgroundColor","rgba(0, 0, 0, 0.05)"),c("itemHoverTextColor","inherit"),c("multiLevelIndent","1.25rem")},children:[(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>!!d.itemSpacing&&("object"==typeof d.itemSpacing?Object.values(d.itemSpacing).some(o=>o&&""!==o):!!d.itemSpacing),label:(0,o.__)("Item Spacing","priority-plus-navigation"),onDeselect:()=>c("itemSpacing",{top:"0.75rem",right:"1rem",bottom:"0.75rem",left:"1rem"}),isShownByDefault:!0,children:u.length>0?(0,i.jsx)(a.__experimentalSpacingSizesControl,{values:d.itemSpacing,onChange:o=>c("itemSpacing",o),label:(0,o.__)("Item Spacing (Padding)","priority-plus-navigation"),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"]}):(0,i.jsx)(l.__experimentalBoxControl,{label:(0,o.__)("Item Spacing (Padding)","priority-plus-navigation"),values:d.itemSpacing,onChange:o=>c("itemSpacing",o),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"],allowReset:!0})}),(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>g("multiLevelIndent"),label:(0,o.__)("Multi-level Indent","priority-plus-navigation"),onDeselect:()=>m("multiLevelIndent","1.25rem"),isShownByDefault:!0,children:(0,i.jsx)(l.__experimentalUnitControl,{label:(0,o.__)("Multi-level Indent","priority-plus-navigation"),value:d.multiLevelIndent||"1.25rem",onChange:o=>c("multiLevelIndent",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"}]})})]}),(0,i.jsx)(a.PanelColorSettings,{title:(0,o.__)("Dropdown Item Hover Colors","priority-plus-navigation"),colorSettings:[{label:(0,o.__)("Hover Background Color","priority-plus-navigation"),value:d.itemHoverBackgroundColor,onChange:o=>c("itemHoverBackgroundColor",o||"rgba(0, 0, 0, 0.05)"),clearable:!0},{label:(0,o.__)("Hover Text Color","priority-plus-navigation"),value:d.itemHoverTextColor,onChange:o=>c("itemHoverTextColor",o||"inherit"),clearable:!0}]})]}),(0,i.jsx)("div",{className:"dropdown-customizer-preview",children:(0,i.jsx)(v,{dropdownStyles:d})})]}),(0,i.jsxs)("div",{className:"dropdown-customizer-footer",children:[(0,i.jsx)(l.Button,{variant:"tertiary",isDestructive:!0,onClick:()=>{r({priorityNavDropdownStyles:{backgroundColor:"#ffffff",borderColor:"#dddddd",borderWidth:"1px",borderRadius:"4px",boxShadow:"0 4px 12px rgba(0, 0, 0, 0.15)",itemSpacing:void 0,itemHoverBackgroundColor:"rgba(0, 0, 0, 0.05)",itemHoverTextColor:"inherit",multiLevelIndent:"1.25rem"}})},children:(0,o.__)("Reset to Defaults","priority-plus-navigation")}),(0,i.jsx)(l.Button,{variant:"primary",onClick:t,children:(0,o.__)("Done","priority-plus-navigation")})]})]})}const g=(0,s.createHigherOrderComponent)(o=>e=>{const{name:r,attributes:t}=e;if("core/navigation"!==r)return(0,i.jsx)(o,{...e});const n=(t.className||"").includes("is-style-priority-plus-navigation")||!0===t.priorityNavEnabled;return(0,p.useEffect)(()=>{if(!n)return;const o=document.querySelector(".block-editor-block-inspector");if(!o)return;const e=o.querySelector('.components-toggle-group-control-option-base[data-value="always"]');e&&(e.style.opacity="0.4",e.style.pointerEvents="none",e.style.textDecoration="line-through",e.style.cursor="not-allowed")},[n,t.overlayMenu]),(0,i.jsx)(o,{...e})},"addDisableAlwaysOption"),m=(0,s.createHigherOrderComponent)(e=>r=>{const{name:t,attributes:n,setAttributes:s}=r;if("core/navigation"!==t)return(0,i.jsx)(e,{...r});const d=(n.className||"").includes("is-style-priority-plus-navigation")||!0===n.priorityNavEnabled;if(!d)return(0,i.jsx)(e,{...r});const{priorityNavEnabled:u,priorityNavMoreLabel:v,priorityNavMoreBackgroundColor:g,priorityNavMoreBackgroundColorHover:m,priorityNavMoreTextColor:y,priorityNavMoreTextColorHover:b,priorityNavMorePadding:x,overlayMenu:h}=n,[_,w]=(0,p.useState)(!1);(0,p.useEffect)(()=>{d&&"always"===h&&s({overlayMenu:"mobile"})},[d,h,s]);const f=(0,a.useSetting)("spacing.spacingSizes")||[];return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e,{...r}),(0,i.jsx)(a.InspectorControls,{group:"settings",children:(0,i.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,i.jsxs)(a.InspectorControls,{group:"styles",children:[(0,i.jsx)(l.__experimentalToolsPanel,{label:(0,o.__)("Priority Plus Settings","priority-plus-navigation"),resetAll:()=>s({priorityNavMoreLabel:"More"}),children:(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>!!v,label:(0,o.__)("More Button Label","priority-plus-navigation"),onDeselect:()=>s({priorityNavMoreLabel:"More"}),isShownByDefault:!0,children:(0,i.jsx)(l.TextControl,{label:(0,o.__)("More Button Label","priority-plus-navigation"),value:v,onChange:o=>s({priorityNavMoreLabel:o}),help:(0,o.__)('Text displayed on the "More" button',"priority-plus-navigation")})})}),(0,i.jsx)(a.PanelColorSettings,{title:(0,o.__)("Priority Plus Colors","priority-plus-navigation"),colorSettings:[{label:(0,o.__)("Button Text Color","priority-plus-navigation"),value:y,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:g,onChange:o=>s({priorityNavMoreBackgroundColor:o||void 0}),clearable:!0},{label:(0,o.__)("Button Background Hover Color","priority-plus-navigation"),value:m,onChange:o=>s({priorityNavMoreBackgroundColorHover:o||void 0}),clearable:!0}]}),(0,i.jsx)(l.__experimentalToolsPanel,{label:(0,o.__)("Priority Plus Button","priority-plus-navigation"),resetAll:()=>s({priorityNavMorePadding:void 0}),children:(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>!!x&&Object.keys(x).length>0,label:(0,o.__)("Padding","priority-plus-navigation"),onDeselect:()=>s({priorityNavMorePadding:void 0}),isShownByDefault:!0,children:f.length>0?(0,i.jsx)(a.__experimentalSpacingSizesControl,{values:x,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,i.jsx)(l.BoxControl,{label:(0,o.__)("Button Padding","priority-plus-navigation"),values:x,onChange:o=>s({priorityNavMorePadding:o}),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"],allowReset:!0})})}),(0,i.jsx)(l.__experimentalToolsPanel,{label:(0,o.__)("Dropdown Styles","priority-plus-navigation"),resetAll:()=>{s({priorityNavDropdownStyles:{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"}})},children:(0,i.jsx)(l.__experimentalToolsPanelItem,{hasValue:()=>{const{priorityNavDropdownStyles:o}=n;return!!o&&Object.keys(o).length>0},label:(0,o.__)("Customize Dropdown","priority-plus-navigation"),onDeselect:()=>s({priorityNavDropdownStyles:void 0}),isShownByDefault:!0,children:(0,i.jsx)(l.Button,{variant:"secondary",onClick:()=>w(!0),style:{width:"100%"},children:(0,o.__)("Customize Dropdown Styles","priority-plus-navigation")})})})]}),_&&(0,i.jsx)(c,{attributes:n,setAttributes:s,onClose:()=>w(!1)})]})},"withPriorityNavControls");(0,n.addFilter)("editor.BlockEdit","priority-plus-navigation/add-disable-always-option",g,5),(0,n.addFilter)("editor.BlockEdit","priority-plus-navigation/add-priority-plus-navigation-controls",m,10)})(); \ No newline at end of file +(()=>{"use strict";const o=window.wp.i18n,e=window.wp.blocks,i=window.wp.primitives,r=window.ReactJSXRuntime;var t=(0,r.jsx)(i.SVG,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",children:(0,r.jsx)(i.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,a={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"};(0,e.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,priorityNavDropdownStyles:a},isActive:(o,e)=>o.className?.includes(e.className)}),(0,n.addFilter)("blocks.registerBlockType","priority-plus-navigation/extend-core-navigation",(o,e)=>"core/navigation"!==e?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},priorityNavDropdownStyles:{type:"object",default:a}}});const l=window.wp.blockEditor,s=window.wp.components,p=window.wp.compose,d=window.wp.element;function u(o){if(!o||"string"!=typeof o)return o;if(o.startsWith("var:preset|")){const e=o.match(/^var:preset\|([^|]+)\|(.+)$/);if(e)return`var(--wp--preset--${e[1]}--${e[2]})`}return o.startsWith("var("),o}function v(o){if(!o)return"0.75rem 1rem";if("string"==typeof o)return u(o);if("object"==typeof o){if(0===Object.keys(o).length)return"0.75rem 1rem";const{top:e,right:i,bottom:r,left:t}=o;if(!(e&&""!==e&&"0"!==e||i&&""!==i&&"0"!==i||r&&""!==r&&"0"!==r||t&&""!==t&&"0"!==t))return"0.75rem 1rem";const n=u(e)||"0",a=u(i)||"0",l=u(r)||"0",s=u(t)||"0";return n===a&&a===l&&l===s?n:n===l&&a===s?`${n} ${a}`:`${n} ${a} ${l} ${s}`}return"0.75rem 1rem"}function c({dropdownStyles:e}){const{backgroundColor:i="#ffffff",borderColor:t="#dddddd",borderWidth:n="1px",borderRadius:a="4px",boxShadow:l="0 4px 12px rgba(0, 0, 0, 0.15)",itemSpacing:s,itemHoverBackgroundColor:p="rgba(0, 0, 0, 0.05)",itemHoverTextColor:u="inherit",multiLevelIndent:c="1.25rem"}=e||{},[g,y]=(0,d.useState)(!0),m=(0,d.useMemo)(()=>({"--wp--custom--priority-plus-navigation--dropdown--background-color":i,"--wp--custom--priority-plus-navigation--dropdown--border-color":t,"--wp--custom--priority-plus-navigation--dropdown--border-width":n,"--wp--custom--priority-plus-navigation--dropdown--border-radius":a,"--wp--custom--priority-plus-navigation--dropdown--box-shadow":l,"--wp--custom--priority-plus-navigation--dropdown--item-spacing":v(s),"--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color":p,"--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color":u,"--wp--custom--priority-plus-navigation--dropdown--multi-level-indent":c}),[i,t,n,a,l,s,p,u,c]);return(0,r.jsxs)("div",{className:"dropdown-preview-wrapper",children:[(0,r.jsxs)("ul",{className:"priority-plus-navigation-dropdown is-open",style:m,children:[(0,r.jsx)("li",{children:(0,r.jsx)("a",{href:"#",onClick:o=>o.preventDefault(),children:(0,o.__)("Home","priority-plus-navigation")})}),(0,r.jsx)("li",{className:"dropdown-preview-hover-demo",children:(0,r.jsx)("a",{href:"#",onClick:o=>o.preventDefault(),children:(0,o.__)("About (Hover)","priority-plus-navigation")})}),(0,r.jsxs)("li",{children:[(0,r.jsxs)("button",{type:"button",className:"priority-plus-navigation-accordion-toggle priority-plus-navigation-accordion-toggle-full",onClick:()=>y(!g),"aria-expanded":g,children:[(0,r.jsx)("span",{className:"priority-plus-navigation-accordion-text",children:(0,o.__)("Services","priority-plus-navigation")}),(0,r.jsx)("span",{className:"priority-plus-navigation-accordion-arrow","aria-hidden":"true",children:"›"})]}),g&&(0,r.jsxs)("ul",{className:"priority-plus-navigation-accordion-content is-open",children:[(0,r.jsx)("li",{children:(0,r.jsx)("a",{href:"#",onClick:o=>o.preventDefault(),children:(0,o.__)("Web Design","priority-plus-navigation")})}),(0,r.jsx)("li",{children:(0,r.jsx)("a",{href:"#",onClick:o=>o.preventDefault(),children:(0,o.__)("Development","priority-plus-navigation")})})]})]}),(0,r.jsx)("li",{children:(0,r.jsx)("a",{href:"#",onClick:o=>o.preventDefault(),children:(0,o.__)("Contact","priority-plus-navigation")})})]}),(0,r.jsx)("p",{className:"dropdown-preview-help",children:(0,o.__)('Live preview - Click "Services" to toggle accordion',"priority-plus-navigation")})]})}function g({attributes:e,setAttributes:i,onClose:t}){const n=e.priorityNavDropdownStyles||{},p={...a,...n,itemSpacing:n.itemSpacing||a.itemSpacing},u=(0,l.useSetting)("spacing.spacingSizes")||[];(0,d.useEffect)(()=>{const o=e.priorityNavDropdownStyles||{};o.itemSpacing||i({priorityNavDropdownStyles:{...a,...o}})},[]);const v=(o,e)=>{i({priorityNavDropdownStyles:{...p,[o]:e}})},g=o=>!!p[o],y=(o,e)=>{v(o,e)};return(0,r.jsxs)(s.Modal,{title:(0,o.__)("Customize Dropdown Styles","priority-plus-navigation"),onRequestClose:t,className:"priority-plus-dropdown-customizer",size:"fill",isDismissible:!0,children:[(0,r.jsxs)("div",{className:"dropdown-customizer-layout",children:[(0,r.jsxs)("div",{className:"dropdown-customizer-controls",children:[(0,r.jsxs)(s.__experimentalToolsPanel,{label:(0,o.__)("Dropdown Container","priority-plus-navigation"),resetAll:()=>{v("backgroundColor","#ffffff"),v("borderColor","#dddddd"),v("borderWidth","1px"),v("borderRadius","4px"),v("boxShadow","0 4px 12px rgba(0, 0, 0, 0.15)")},children:[(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>g("borderWidth"),label:(0,o.__)("Border Width","priority-plus-navigation"),onDeselect:()=>y("borderWidth","1px"),isShownByDefault:!0,children:(0,r.jsx)(s.__experimentalUnitControl,{label:(0,o.__)("Border Width","priority-plus-navigation"),value:p.borderWidth||"1px",onChange:o=>v("borderWidth",o),units:[{value:"px",label:"px"},{value:"rem",label:"rem"},{value:"em",label:"em"}]})}),(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>g("borderRadius"),label:(0,o.__)("Border Radius","priority-plus-navigation"),onDeselect:()=>y("borderRadius","4px"),isShownByDefault:!0,children:(0,r.jsx)(s.__experimentalUnitControl,{label:(0,o.__)("Border Radius","priority-plus-navigation"),value:p.borderRadius||"4px",onChange:o=>v("borderRadius",o),units:[{value:"px",label:"px"},{value:"rem",label:"rem"},{value:"%",label:"%"}]})}),(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>g("boxShadow"),label:(0,o.__)("Box Shadow","priority-plus-navigation"),onDeselect:()=>y("boxShadow","0 4px 12px rgba(0, 0, 0, 0.15)"),isShownByDefault:!0,children:(0,r.jsx)(s.TextControl,{label:(0,o.__)("Box Shadow","priority-plus-navigation"),value:p.boxShadow||"0 4px 12px rgba(0, 0, 0, 0.15)",onChange:o=>v("boxShadow",o),help:(0,o.__)("CSS box-shadow property","priority-plus-navigation")})})]}),(0,r.jsx)(l.PanelColorSettings,{title:(0,o.__)("Dropdown Container Colors","priority-plus-navigation"),colorSettings:[{label:(0,o.__)("Background Color","priority-plus-navigation"),value:p.backgroundColor,onChange:o=>v("backgroundColor",o||"#ffffff"),clearable:!0},{label:(0,o.__)("Border Color","priority-plus-navigation"),value:p.borderColor,onChange:o=>v("borderColor",o||"#dddddd"),clearable:!0}]}),(0,r.jsxs)(s.__experimentalToolsPanel,{label:(0,o.__)("Dropdown Items","priority-plus-navigation"),resetAll:()=>{v("itemSpacing",a.itemSpacing),v("itemHoverBackgroundColor",a.itemHoverBackgroundColor),v("itemHoverTextColor",a.itemHoverTextColor),v("multiLevelIndent",a.multiLevelIndent)},children:[(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>!!p.itemSpacing&&("object"==typeof p.itemSpacing?Object.values(p.itemSpacing).some(o=>o&&""!==o):!!p.itemSpacing),label:(0,o.__)("Item Spacing","priority-plus-navigation"),onDeselect:()=>v("itemSpacing",a.itemSpacing),isShownByDefault:!0,children:u.length>0?(0,r.jsx)(l.__experimentalSpacingSizesControl,{values:p.itemSpacing,onChange:o=>v("itemSpacing",o),label:(0,o.__)("Item Spacing (Padding)","priority-plus-navigation"),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"]}):(0,r.jsx)(s.__experimentalBoxControl,{label:(0,o.__)("Item Spacing (Padding)","priority-plus-navigation"),values:p.itemSpacing,onChange:o=>v("itemSpacing",o),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"],allowReset:!0})}),(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>g("multiLevelIndent"),label:(0,o.__)("Multi-level Indent","priority-plus-navigation"),onDeselect:()=>y("multiLevelIndent","1.25rem"),isShownByDefault:!0,children:(0,r.jsx)(s.__experimentalUnitControl,{label:(0,o.__)("Multi-level Indent","priority-plus-navigation"),value:p.multiLevelIndent||"1.25rem",onChange:o=>v("multiLevelIndent",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"}]})})]}),(0,r.jsx)(l.PanelColorSettings,{title:(0,o.__)("Dropdown Item Hover Colors","priority-plus-navigation"),colorSettings:[{label:(0,o.__)("Hover Background Color","priority-plus-navigation"),value:p.itemHoverBackgroundColor,onChange:o=>v("itemHoverBackgroundColor",o||"rgba(0, 0, 0, 0.05)"),clearable:!0},{label:(0,o.__)("Hover Text Color","priority-plus-navigation"),value:p.itemHoverTextColor,onChange:o=>v("itemHoverTextColor",o||"inherit"),clearable:!0}]})]}),(0,r.jsx)("div",{className:"dropdown-customizer-preview",children:(0,r.jsx)(c,{dropdownStyles:p})})]}),(0,r.jsxs)("div",{className:"dropdown-customizer-footer",children:[(0,r.jsx)(s.Button,{variant:"tertiary",isDestructive:!0,onClick:()=>{i({priorityNavDropdownStyles:a})},children:(0,o.__)("Reset to Defaults","priority-plus-navigation")}),(0,r.jsx)(s.Button,{variant:"primary",onClick:t,children:(0,o.__)("Done","priority-plus-navigation")})]})]})}const y=(0,p.createHigherOrderComponent)(o=>e=>{const{name:i,attributes:t}=e;if("core/navigation"!==i)return(0,r.jsx)(o,{...e});const n=(t.className||"").includes("is-style-priority-plus-navigation")||!0===t.priorityNavEnabled;return(0,d.useEffect)(()=>{if(!n)return;const o=document.querySelector(".block-editor-block-inspector");if(!o)return;const e=o.querySelector('.components-toggle-group-control-option-base[data-value="always"]');e&&(e.style.opacity="0.4",e.style.pointerEvents="none",e.style.textDecoration="line-through",e.style.cursor="not-allowed")},[n,t.overlayMenu]),(0,r.jsx)(o,{...e})},"addDisableAlwaysOption"),m=(0,p.createHigherOrderComponent)(e=>i=>{const{name:t,attributes:n,setAttributes:p}=i;if("core/navigation"!==t)return(0,r.jsx)(e,{...i});const u=(n.className||"").includes("is-style-priority-plus-navigation")||!0===n.priorityNavEnabled;if(!u)return(0,r.jsx)(e,{...i});const{priorityNavEnabled:v,priorityNavMoreLabel:c,priorityNavMoreBackgroundColor:y,priorityNavMoreBackgroundColorHover:m,priorityNavMoreTextColor:x,priorityNavMoreTextColorHover:h,priorityNavMorePadding:b,overlayMenu:_}=n,[w,C]=(0,d.useState)(!1);(0,d.useEffect)(()=>{u&&"always"===_&&p({overlayMenu:"mobile"})},[u,_,p]);const f=(0,l.useSetting)("spacing.spacingSizes")||[];return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e,{...i}),(0,r.jsx)(l.InspectorControls,{group:"settings",children:(0,r.jsx)(s.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)(l.InspectorControls,{group:"styles",children:[(0,r.jsx)(s.__experimentalToolsPanel,{label:(0,o.__)("Priority Plus Settings","priority-plus-navigation"),resetAll:()=>p({priorityNavMoreLabel:"More"}),children:(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>!!c,label:(0,o.__)("More Button Label","priority-plus-navigation"),onDeselect:()=>p({priorityNavMoreLabel:"More"}),isShownByDefault:!0,children:(0,r.jsx)(s.TextControl,{label:(0,o.__)("More Button Label","priority-plus-navigation"),value:c,onChange:o=>p({priorityNavMoreLabel:o}),help:(0,o.__)('Text displayed on the "More" button',"priority-plus-navigation")})})}),(0,r.jsx)(l.PanelColorSettings,{title:(0,o.__)("Priority Plus Colors","priority-plus-navigation"),colorSettings:[{label:(0,o.__)("Button Text Color","priority-plus-navigation"),value:x,onChange:o=>p({priorityNavMoreTextColor:o||void 0}),clearable:!0},{label:(0,o.__)("Button Text Hover Color","priority-plus-navigation"),value:h,onChange:o=>p({priorityNavMoreTextColorHover:o||void 0}),clearable:!0},{label:(0,o.__)("Button Background Color","priority-plus-navigation"),value:y,onChange:o=>p({priorityNavMoreBackgroundColor:o||void 0}),clearable:!0},{label:(0,o.__)("Button Background Hover Color","priority-plus-navigation"),value:m,onChange:o=>p({priorityNavMoreBackgroundColorHover:o||void 0}),clearable:!0}]}),(0,r.jsx)(s.__experimentalToolsPanel,{label:(0,o.__)("Priority Plus Button","priority-plus-navigation"),resetAll:()=>p({priorityNavMorePadding:void 0}),children:(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>!!b&&Object.keys(b).length>0,label:(0,o.__)("Padding","priority-plus-navigation"),onDeselect:()=>p({priorityNavMorePadding:void 0}),isShownByDefault:!0,children:f.length>0?(0,r.jsx)(l.__experimentalSpacingSizesControl,{values:b,onChange:o=>p({priorityNavMorePadding:o}),label:(0,o.__)("Button Padding","priority-plus-navigation"),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"]}):(0,r.jsx)(s.BoxControl,{label:(0,o.__)("Button Padding","priority-plus-navigation"),values:b,onChange:o=>p({priorityNavMorePadding:o}),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"],allowReset:!0})})}),(0,r.jsx)(s.__experimentalToolsPanel,{label:(0,o.__)("Dropdown Styles","priority-plus-navigation"),resetAll:()=>{p({priorityNavDropdownStyles:a})},children:(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>{const{priorityNavDropdownStyles:o}=n;return!!o&&Object.keys(o).length>0},label:(0,o.__)("Customize Dropdown","priority-plus-navigation"),onDeselect:()=>p({priorityNavDropdownStyles:void 0}),isShownByDefault:!0,children:(0,r.jsx)(s.Button,{variant:"secondary",onClick:()=>C(!0),style:{width:"100%"},children:(0,o.__)("Customize Dropdown Styles","priority-plus-navigation")})})})]}),w&&(0,r.jsx)(g,{attributes:n,setAttributes:p,onClose:()=>C(!1)})]})},"withPriorityNavControls");(0,n.addFilter)("editor.BlockEdit","priority-plus-navigation/add-disable-always-option",y,5),(0,n.addFilter)("editor.BlockEdit","priority-plus-navigation/add-priority-plus-navigation-controls",m,10)})(); \ No newline at end of file diff --git a/src/variation/block.js b/src/variation/block.js index 5d70e58..68c3108 100644 --- a/src/variation/block.js +++ b/src/variation/block.js @@ -6,6 +6,11 @@ import { registerBlockVariation } from '@wordpress/blocks'; import { plusCircle } from '@wordpress/icons'; import { addFilter } from '@wordpress/hooks'; +/** + * Internal dependencies + */ +import { DEFAULT_DROPDOWN_STYLES } from './constants'; + /** * Register Priority Plus Navigation block variation */ @@ -27,22 +32,7 @@ registerBlockVariation('core/navigation', { priorityNavMoreBackgroundColorHover: undefined, priorityNavMoreTextColor: undefined, priorityNavMoreTextColorHover: undefined, - priorityNavDropdownStyles: { - 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', - }, + priorityNavDropdownStyles: DEFAULT_DROPDOWN_STYLES, }, isActive: (blockAttributes, variationAttributes) => { return blockAttributes.className?.includes( @@ -96,22 +86,7 @@ addFilter( }, priorityNavDropdownStyles: { type: 'object', - default: { - 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', - }, + default: DEFAULT_DROPDOWN_STYLES, }, }, }; diff --git a/src/variation/components/dropdown-customizer-modal.js b/src/variation/components/dropdown-customizer-modal.js index 9913d25..36cbf8c 100644 --- a/src/variation/components/dropdown-customizer-modal.js +++ b/src/variation/components/dropdown-customizer-modal.js @@ -23,37 +23,21 @@ import { useEffect } from '@wordpress/element'; */ import './dropdown-customizer-modal.scss'; import { DropdownPreview } from './dropdown-preview'; +import { DEFAULT_DROPDOWN_STYLES } from '../constants'; export function DropdownCustomizerModal({ attributes, setAttributes, onClose, }) { - // Default dropdown styles - const defaultDropdownStyles = { - 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', - }; - // Merge defaults with existing attributes (deep merge for nested objects) const existingStyles = attributes.priorityNavDropdownStyles || {}; const priorityNavDropdownStyles = { - ...defaultDropdownStyles, + ...DEFAULT_DROPDOWN_STYLES, ...existingStyles, // If itemSpacing exists but is empty/undefined, use default - itemSpacing: existingStyles.itemSpacing || defaultDropdownStyles.itemSpacing, + itemSpacing: + existingStyles.itemSpacing || DEFAULT_DROPDOWN_STYLES.itemSpacing, }; // Get spacing sizes from theme @@ -67,7 +51,7 @@ export function DropdownCustomizerModal({ if (!existingStyles.itemSpacing) { setAttributes({ priorityNavDropdownStyles: { - ...defaultDropdownStyles, + ...DEFAULT_DROPDOWN_STYLES, ...existingStyles, }, }); @@ -271,18 +255,22 @@ export function DropdownCustomizerModal({ { - updateStyle('itemSpacing', { - top: '0.75rem', - right: '1rem', - bottom: '0.75rem', - left: '1rem', - }); + updateStyle( + 'itemSpacing', + DEFAULT_DROPDOWN_STYLES.itemSpacing + ); updateStyle( 'itemHoverBackgroundColor', - 'rgba(0, 0, 0, 0.05)' + DEFAULT_DROPDOWN_STYLES.itemHoverBackgroundColor + ); + updateStyle( + 'itemHoverTextColor', + DEFAULT_DROPDOWN_STYLES.itemHoverTextColor + ); + updateStyle( + 'multiLevelIndent', + DEFAULT_DROPDOWN_STYLES.multiLevelIndent ); - updateStyle('itemHoverTextColor', 'inherit'); - updateStyle('multiLevelIndent', '1.25rem'); }} > {/* Item Spacing */} @@ -293,12 +281,10 @@ export function DropdownCustomizerModal({ 'priority-plus-navigation' )} onDeselect={() => - updateStyle('itemSpacing', { - top: '0.75rem', - right: '1rem', - bottom: '0.75rem', - left: '1rem', - }) + updateStyle( + 'itemSpacing', + DEFAULT_DROPDOWN_STYLES.itemSpacing + ) } isShownByDefault > @@ -423,17 +409,7 @@ export function DropdownCustomizerModal({ isDestructive onClick={() => { setAttributes({ - priorityNavDropdownStyles: { - backgroundColor: '#ffffff', - borderColor: '#dddddd', - borderWidth: '1px', - borderRadius: '4px', - boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)', - itemSpacing: undefined, - itemHoverBackgroundColor: 'rgba(0, 0, 0, 0.05)', - itemHoverTextColor: 'inherit', - multiLevelIndent: '1.25rem', - }, + priorityNavDropdownStyles: DEFAULT_DROPDOWN_STYLES, }); }} > diff --git a/src/variation/constants.js b/src/variation/constants.js new file mode 100644 index 0000000..ffb8e83 --- /dev/null +++ b/src/variation/constants.js @@ -0,0 +1,27 @@ +/** + * Shared constants for Priority Plus Navigation + * + * This file contains default values used across multiple components + * to ensure consistency and reduce duplication. + */ + +/** + * Default dropdown styles + * Used in block variation, block type defaults, controls, and modal + */ +export const DEFAULT_DROPDOWN_STYLES = { + 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', +}; diff --git a/src/variation/controls.js b/src/variation/controls.js index 04d76cc..5a3b225 100644 --- a/src/variation/controls.js +++ b/src/variation/controls.js @@ -3,6 +3,11 @@ */ import { __ } from '@wordpress/i18n'; import { addFilter } from '@wordpress/hooks'; + +/** + * Internal dependencies + */ +import { DEFAULT_DROPDOWN_STYLES } from './constants'; import { InspectorControls, PanelColorSettings, @@ -308,23 +313,7 @@ const withPriorityNavControls = createHigherOrderComponent((BlockEdit) => { )} resetAll={() => { setAttributes({ - priorityNavDropdownStyles: { - 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', - }, + priorityNavDropdownStyles: DEFAULT_DROPDOWN_STYLES, }); }} > From 9c6aa91ef3d048d0e640cbda6bc7f2de691266a7 Mon Sep 17 00:00:00 2001 From: Troy Chaplin Date: Sat, 3 Jan 2026 14:47:09 -0500 Subject: [PATCH 10/40] fix: appearance styles --- build/priority-plus-nav-editor-rtl.css | 2 +- build/priority-plus-nav-editor.asset.php | 2 +- build/priority-plus-nav-editor.css | 2 +- build/priority-plus-nav-editor.js | 2 +- .../components/dropdown-customizer-modal.js | 1 + src/variation/components/dropdown-preview.js | 110 ++++++++++++++---- .../components/dropdown-preview.scss | 11 +- 7 files changed, 99 insertions(+), 31 deletions(-) diff --git a/build/priority-plus-nav-editor-rtl.css b/build/priority-plus-nav-editor-rtl.css index 59ba1da..31b0912 100644 --- a/build/priority-plus-nav-editor-rtl.css +++ b/build/priority-plus-nav-editor-rtl.css @@ -1,3 +1,3 @@ .priority-plus-dropdown-customizer .components-modal__content{display:flex;flex-direction:column;min-height:600px;padding:0}.priority-plus-dropdown-customizer .dropdown-customizer-layout{display:grid;flex:1;gap:2rem;grid-template-columns:1fr 1fr;overflow:hidden;padding:2rem}.priority-plus-dropdown-customizer .dropdown-customizer-controls{overflow-y:auto;padding-left:1rem}.priority-plus-dropdown-customizer .dropdown-customizer-controls .components-tools-panel{margin-bottom:1.5rem}.priority-plus-dropdown-customizer .dropdown-customizer-preview{align-items:flex-start;background:#f5f5f5;border-radius:4px;display:flex;justify-content:center;max-height:calc(100vh - 200px);overflow-y:auto;padding:2rem;position:sticky;top:2rem}.priority-plus-dropdown-customizer .dropdown-customizer-footer{align-items:center;background:#fff;border-top:1px solid #ddd;display:flex;justify-content:space-between;padding:1rem 2rem}.priority-plus-dropdown-customizer .dropdown-customizer-control{margin-bottom:1rem}.priority-plus-dropdown-customizer .dropdown-customizer-control label{color:#1e1e1e;display:block;font-size:11px;font-weight:500;margin-bottom:.5rem;text-transform:uppercase}.priority-plus-dropdown-customizer .dropdown-customizer-control .components-color-picker{margin-top:.5rem}.priority-plus-dropdown-customizer .components-tools-panel-item{margin-bottom:0}@media(max-width:896px){.priority-plus-dropdown-customizer .dropdown-customizer-layout{grid-template-columns:1fr}.priority-plus-dropdown-customizer .dropdown-customizer-preview{min-height:300px;position:static}} -.dropdown-preview-wrapper{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:flex-start;padding-top:1rem;width:100%}.dropdown-preview-wrapper .priority-plus-navigation-dropdown{font-size:16px;line-height:1.5;max-width:320px;min-width:280px;opacity:1!important;position:static!important;transform:none!important;visibility:visible!important;width:100%}.dropdown-preview-wrapper .dropdown-preview-hover-demo a{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.dropdown-preview-help{color:#757575;font-size:11px;font-style:italic;margin-top:1rem;padding:0 1rem;text-align:center} +.dropdown-preview-wrapper{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:flex-start;padding-top:1rem;width:100%}.dropdown-preview-wrapper .priority-plus-navigation-dropdown{max-width:320px;min-width:280px;opacity:1!important;position:static!important;transform:none!important;visibility:visible!important;width:100%}.dropdown-preview-wrapper .priority-plus-navigation-dropdown button{font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit}.dropdown-preview-wrapper .dropdown-preview-hover-demo a{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.dropdown-preview-help{color:#757575;font-size:11px;font-style:italic;margin-top:1rem;padding:0 1rem;text-align:center} :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--padding:0}.dropdown-preview-wrapper .priority-plus-navigation-dropdown,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color)!important;border-color:var(--wp--custom--priority-plus-navigation--dropdown--border-color)!important;border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-style:solid!important;border-width:var(--wp--custom--priority-plus-navigation--dropdown--border-width)!important;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}.dropdown-preview-wrapper .priority-plus-navigation-dropdown.is-open,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown.is-open{opacity:1;transform:translateY(0);visibility:visible}.dropdown-preview-wrapper .priority-plus-navigation-dropdown li,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li{margin:0;padding:0}.dropdown-preview-wrapper .priority-plus-navigation-dropdown li a,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a{color:inherit;display:block;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-decoration:none;transition:background .2s ease,color .2s ease}.dropdown-preview-wrapper .priority-plus-navigation-dropdown li a:hover,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown 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)}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content{background:transparent;display:none;list-style:none;margin:0;padding:0}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content[aria-hidden=true],.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content[aria-hidden=true]{display:none!important}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content.is-open,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content.is-open{display:block!important}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>a,.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>a{padding-right:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent))}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a,.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>a{padding-right:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)*2)}.dropdown-preview-wrapper .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,.dropdown-preview-wrapper .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,.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>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-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>a{padding-right:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)*3)}.dropdown-preview-wrapper .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,.dropdown-preview-wrapper .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,.dropdown-preview-wrapper .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,.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>a{padding-right:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)*4)}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-wrapper,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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;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%}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text{flex:1}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-arrow,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-arrow{margin-right:.5rem;transition:transform .2s ease}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:focus,.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:hover,.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{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:focus-visible,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:focus-visible{outline:2px solid currentcolor;outline-offset:-2px}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full[aria-expanded=true] .priority-plus-navigation-accordion-arrow,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(-90deg)}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link{flex:1;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link:hover,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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)}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow .priority-plus-navigation-accordion-arrow,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow .priority-plus-navigation-accordion-arrow{display:inline-block;transition:transform .2s ease}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:focus,.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:hover,.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{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:focus-visible,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:focus-visible{outline:2px solid currentcolor;outline-offset:-2px}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow[aria-expanded=true] .priority-plus-navigation-accordion-arrow,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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 2fc6f03..71379bc 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' => '781fe386df0802d13a4f'); + array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-primitives'), 'version' => 'a69761f9c57cef2715a4'); diff --git a/build/priority-plus-nav-editor.css b/build/priority-plus-nav-editor.css index 91b759b..b43532e 100644 --- a/build/priority-plus-nav-editor.css +++ b/build/priority-plus-nav-editor.css @@ -1,3 +1,3 @@ .priority-plus-dropdown-customizer .components-modal__content{display:flex;flex-direction:column;min-height:600px;padding:0}.priority-plus-dropdown-customizer .dropdown-customizer-layout{display:grid;flex:1;gap:2rem;grid-template-columns:1fr 1fr;overflow:hidden;padding:2rem}.priority-plus-dropdown-customizer .dropdown-customizer-controls{overflow-y:auto;padding-right:1rem}.priority-plus-dropdown-customizer .dropdown-customizer-controls .components-tools-panel{margin-bottom:1.5rem}.priority-plus-dropdown-customizer .dropdown-customizer-preview{align-items:flex-start;background:#f5f5f5;border-radius:4px;display:flex;justify-content:center;max-height:calc(100vh - 200px);overflow-y:auto;padding:2rem;position:sticky;top:2rem}.priority-plus-dropdown-customizer .dropdown-customizer-footer{align-items:center;background:#fff;border-top:1px solid #ddd;display:flex;justify-content:space-between;padding:1rem 2rem}.priority-plus-dropdown-customizer .dropdown-customizer-control{margin-bottom:1rem}.priority-plus-dropdown-customizer .dropdown-customizer-control label{color:#1e1e1e;display:block;font-size:11px;font-weight:500;margin-bottom:.5rem;text-transform:uppercase}.priority-plus-dropdown-customizer .dropdown-customizer-control .components-color-picker{margin-top:.5rem}.priority-plus-dropdown-customizer .components-tools-panel-item{margin-bottom:0}@media(max-width:896px){.priority-plus-dropdown-customizer .dropdown-customizer-layout{grid-template-columns:1fr}.priority-plus-dropdown-customizer .dropdown-customizer-preview{min-height:300px;position:static}} -.dropdown-preview-wrapper{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:flex-start;padding-top:1rem;width:100%}.dropdown-preview-wrapper .priority-plus-navigation-dropdown{font-size:16px;line-height:1.5;max-width:320px;min-width:280px;opacity:1!important;position:static!important;transform:none!important;visibility:visible!important;width:100%}.dropdown-preview-wrapper .dropdown-preview-hover-demo a{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.dropdown-preview-help{color:#757575;font-size:11px;font-style:italic;margin-top:1rem;padding:0 1rem;text-align:center} +.dropdown-preview-wrapper{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:flex-start;padding-top:1rem;width:100%}.dropdown-preview-wrapper .priority-plus-navigation-dropdown{max-width:320px;min-width:280px;opacity:1!important;position:static!important;transform:none!important;visibility:visible!important;width:100%}.dropdown-preview-wrapper .priority-plus-navigation-dropdown button{font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit}.dropdown-preview-wrapper .dropdown-preview-hover-demo a{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.dropdown-preview-help{color:#757575;font-size:11px;font-style:italic;margin-top:1rem;padding:0 1rem;text-align:center} :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--padding:0}.dropdown-preview-wrapper .priority-plus-navigation-dropdown,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color)!important;border-color:var(--wp--custom--priority-plus-navigation--dropdown--border-color)!important;border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-style:solid!important;border-width:var(--wp--custom--priority-plus-navigation--dropdown--border-width)!important;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}.dropdown-preview-wrapper .priority-plus-navigation-dropdown.is-open,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown.is-open{opacity:1;transform:translateY(0);visibility:visible}.dropdown-preview-wrapper .priority-plus-navigation-dropdown li,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li{margin:0;padding:0}.dropdown-preview-wrapper .priority-plus-navigation-dropdown li a,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a{color:inherit;display:block;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-decoration:none;transition:background .2s ease,color .2s ease}.dropdown-preview-wrapper .priority-plus-navigation-dropdown li a:hover,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown 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)}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content{background:transparent;display:none;list-style:none;margin:0;padding:0}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content[aria-hidden=true],.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content[aria-hidden=true]{display:none!important}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content.is-open,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content.is-open{display:block!important}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>a,.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>a{padding-left:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent))}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a,.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>a{padding-left:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)*2)}.dropdown-preview-wrapper .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,.dropdown-preview-wrapper .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,.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>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-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>a{padding-left:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)*3)}.dropdown-preview-wrapper .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,.dropdown-preview-wrapper .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,.dropdown-preview-wrapper .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,.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>a{padding-left:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)*4)}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-wrapper,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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;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%}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text{flex:1}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-arrow,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-arrow{margin-left:.5rem;transition:transform .2s ease}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:focus,.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:hover,.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{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:focus-visible,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:focus-visible{outline:2px solid currentcolor;outline-offset:-2px}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full[aria-expanded=true] .priority-plus-navigation-accordion-arrow,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(90deg)}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link{flex:1;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link:hover,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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)}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow .priority-plus-navigation-accordion-arrow,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow .priority-plus-navigation-accordion-arrow{display:inline-block;transition:transform .2s ease}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:focus,.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:hover,.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{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:focus-visible,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:focus-visible{outline:2px solid currentcolor;outline-offset:-2px}.dropdown-preview-wrapper .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow[aria-expanded=true] .priority-plus-navigation-accordion-arrow,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .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 edc1b3f..be7f6f3 100644 --- a/build/priority-plus-nav-editor.js +++ b/build/priority-plus-nav-editor.js @@ -1 +1 @@ -(()=>{"use strict";const o=window.wp.i18n,e=window.wp.blocks,i=window.wp.primitives,r=window.ReactJSXRuntime;var t=(0,r.jsx)(i.SVG,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",children:(0,r.jsx)(i.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,a={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"};(0,e.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,priorityNavDropdownStyles:a},isActive:(o,e)=>o.className?.includes(e.className)}),(0,n.addFilter)("blocks.registerBlockType","priority-plus-navigation/extend-core-navigation",(o,e)=>"core/navigation"!==e?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},priorityNavDropdownStyles:{type:"object",default:a}}});const l=window.wp.blockEditor,s=window.wp.components,p=window.wp.compose,d=window.wp.element;function u(o){if(!o||"string"!=typeof o)return o;if(o.startsWith("var:preset|")){const e=o.match(/^var:preset\|([^|]+)\|(.+)$/);if(e)return`var(--wp--preset--${e[1]}--${e[2]})`}return o.startsWith("var("),o}function v(o){if(!o)return"0.75rem 1rem";if("string"==typeof o)return u(o);if("object"==typeof o){if(0===Object.keys(o).length)return"0.75rem 1rem";const{top:e,right:i,bottom:r,left:t}=o;if(!(e&&""!==e&&"0"!==e||i&&""!==i&&"0"!==i||r&&""!==r&&"0"!==r||t&&""!==t&&"0"!==t))return"0.75rem 1rem";const n=u(e)||"0",a=u(i)||"0",l=u(r)||"0",s=u(t)||"0";return n===a&&a===l&&l===s?n:n===l&&a===s?`${n} ${a}`:`${n} ${a} ${l} ${s}`}return"0.75rem 1rem"}function c({dropdownStyles:e}){const{backgroundColor:i="#ffffff",borderColor:t="#dddddd",borderWidth:n="1px",borderRadius:a="4px",boxShadow:l="0 4px 12px rgba(0, 0, 0, 0.15)",itemSpacing:s,itemHoverBackgroundColor:p="rgba(0, 0, 0, 0.05)",itemHoverTextColor:u="inherit",multiLevelIndent:c="1.25rem"}=e||{},[g,y]=(0,d.useState)(!0),m=(0,d.useMemo)(()=>({"--wp--custom--priority-plus-navigation--dropdown--background-color":i,"--wp--custom--priority-plus-navigation--dropdown--border-color":t,"--wp--custom--priority-plus-navigation--dropdown--border-width":n,"--wp--custom--priority-plus-navigation--dropdown--border-radius":a,"--wp--custom--priority-plus-navigation--dropdown--box-shadow":l,"--wp--custom--priority-plus-navigation--dropdown--item-spacing":v(s),"--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color":p,"--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color":u,"--wp--custom--priority-plus-navigation--dropdown--multi-level-indent":c}),[i,t,n,a,l,s,p,u,c]);return(0,r.jsxs)("div",{className:"dropdown-preview-wrapper",children:[(0,r.jsxs)("ul",{className:"priority-plus-navigation-dropdown is-open",style:m,children:[(0,r.jsx)("li",{children:(0,r.jsx)("a",{href:"#",onClick:o=>o.preventDefault(),children:(0,o.__)("Home","priority-plus-navigation")})}),(0,r.jsx)("li",{className:"dropdown-preview-hover-demo",children:(0,r.jsx)("a",{href:"#",onClick:o=>o.preventDefault(),children:(0,o.__)("About (Hover)","priority-plus-navigation")})}),(0,r.jsxs)("li",{children:[(0,r.jsxs)("button",{type:"button",className:"priority-plus-navigation-accordion-toggle priority-plus-navigation-accordion-toggle-full",onClick:()=>y(!g),"aria-expanded":g,children:[(0,r.jsx)("span",{className:"priority-plus-navigation-accordion-text",children:(0,o.__)("Services","priority-plus-navigation")}),(0,r.jsx)("span",{className:"priority-plus-navigation-accordion-arrow","aria-hidden":"true",children:"›"})]}),g&&(0,r.jsxs)("ul",{className:"priority-plus-navigation-accordion-content is-open",children:[(0,r.jsx)("li",{children:(0,r.jsx)("a",{href:"#",onClick:o=>o.preventDefault(),children:(0,o.__)("Web Design","priority-plus-navigation")})}),(0,r.jsx)("li",{children:(0,r.jsx)("a",{href:"#",onClick:o=>o.preventDefault(),children:(0,o.__)("Development","priority-plus-navigation")})})]})]}),(0,r.jsx)("li",{children:(0,r.jsx)("a",{href:"#",onClick:o=>o.preventDefault(),children:(0,o.__)("Contact","priority-plus-navigation")})})]}),(0,r.jsx)("p",{className:"dropdown-preview-help",children:(0,o.__)('Live preview - Click "Services" to toggle accordion',"priority-plus-navigation")})]})}function g({attributes:e,setAttributes:i,onClose:t}){const n=e.priorityNavDropdownStyles||{},p={...a,...n,itemSpacing:n.itemSpacing||a.itemSpacing},u=(0,l.useSetting)("spacing.spacingSizes")||[];(0,d.useEffect)(()=>{const o=e.priorityNavDropdownStyles||{};o.itemSpacing||i({priorityNavDropdownStyles:{...a,...o}})},[]);const v=(o,e)=>{i({priorityNavDropdownStyles:{...p,[o]:e}})},g=o=>!!p[o],y=(o,e)=>{v(o,e)};return(0,r.jsxs)(s.Modal,{title:(0,o.__)("Customize Dropdown Styles","priority-plus-navigation"),onRequestClose:t,className:"priority-plus-dropdown-customizer",size:"fill",isDismissible:!0,children:[(0,r.jsxs)("div",{className:"dropdown-customizer-layout",children:[(0,r.jsxs)("div",{className:"dropdown-customizer-controls",children:[(0,r.jsxs)(s.__experimentalToolsPanel,{label:(0,o.__)("Dropdown Container","priority-plus-navigation"),resetAll:()=>{v("backgroundColor","#ffffff"),v("borderColor","#dddddd"),v("borderWidth","1px"),v("borderRadius","4px"),v("boxShadow","0 4px 12px rgba(0, 0, 0, 0.15)")},children:[(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>g("borderWidth"),label:(0,o.__)("Border Width","priority-plus-navigation"),onDeselect:()=>y("borderWidth","1px"),isShownByDefault:!0,children:(0,r.jsx)(s.__experimentalUnitControl,{label:(0,o.__)("Border Width","priority-plus-navigation"),value:p.borderWidth||"1px",onChange:o=>v("borderWidth",o),units:[{value:"px",label:"px"},{value:"rem",label:"rem"},{value:"em",label:"em"}]})}),(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>g("borderRadius"),label:(0,o.__)("Border Radius","priority-plus-navigation"),onDeselect:()=>y("borderRadius","4px"),isShownByDefault:!0,children:(0,r.jsx)(s.__experimentalUnitControl,{label:(0,o.__)("Border Radius","priority-plus-navigation"),value:p.borderRadius||"4px",onChange:o=>v("borderRadius",o),units:[{value:"px",label:"px"},{value:"rem",label:"rem"},{value:"%",label:"%"}]})}),(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>g("boxShadow"),label:(0,o.__)("Box Shadow","priority-plus-navigation"),onDeselect:()=>y("boxShadow","0 4px 12px rgba(0, 0, 0, 0.15)"),isShownByDefault:!0,children:(0,r.jsx)(s.TextControl,{label:(0,o.__)("Box Shadow","priority-plus-navigation"),value:p.boxShadow||"0 4px 12px rgba(0, 0, 0, 0.15)",onChange:o=>v("boxShadow",o),help:(0,o.__)("CSS box-shadow property","priority-plus-navigation")})})]}),(0,r.jsx)(l.PanelColorSettings,{title:(0,o.__)("Dropdown Container Colors","priority-plus-navigation"),colorSettings:[{label:(0,o.__)("Background Color","priority-plus-navigation"),value:p.backgroundColor,onChange:o=>v("backgroundColor",o||"#ffffff"),clearable:!0},{label:(0,o.__)("Border Color","priority-plus-navigation"),value:p.borderColor,onChange:o=>v("borderColor",o||"#dddddd"),clearable:!0}]}),(0,r.jsxs)(s.__experimentalToolsPanel,{label:(0,o.__)("Dropdown Items","priority-plus-navigation"),resetAll:()=>{v("itemSpacing",a.itemSpacing),v("itemHoverBackgroundColor",a.itemHoverBackgroundColor),v("itemHoverTextColor",a.itemHoverTextColor),v("multiLevelIndent",a.multiLevelIndent)},children:[(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>!!p.itemSpacing&&("object"==typeof p.itemSpacing?Object.values(p.itemSpacing).some(o=>o&&""!==o):!!p.itemSpacing),label:(0,o.__)("Item Spacing","priority-plus-navigation"),onDeselect:()=>v("itemSpacing",a.itemSpacing),isShownByDefault:!0,children:u.length>0?(0,r.jsx)(l.__experimentalSpacingSizesControl,{values:p.itemSpacing,onChange:o=>v("itemSpacing",o),label:(0,o.__)("Item Spacing (Padding)","priority-plus-navigation"),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"]}):(0,r.jsx)(s.__experimentalBoxControl,{label:(0,o.__)("Item Spacing (Padding)","priority-plus-navigation"),values:p.itemSpacing,onChange:o=>v("itemSpacing",o),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"],allowReset:!0})}),(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>g("multiLevelIndent"),label:(0,o.__)("Multi-level Indent","priority-plus-navigation"),onDeselect:()=>y("multiLevelIndent","1.25rem"),isShownByDefault:!0,children:(0,r.jsx)(s.__experimentalUnitControl,{label:(0,o.__)("Multi-level Indent","priority-plus-navigation"),value:p.multiLevelIndent||"1.25rem",onChange:o=>v("multiLevelIndent",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"}]})})]}),(0,r.jsx)(l.PanelColorSettings,{title:(0,o.__)("Dropdown Item Hover Colors","priority-plus-navigation"),colorSettings:[{label:(0,o.__)("Hover Background Color","priority-plus-navigation"),value:p.itemHoverBackgroundColor,onChange:o=>v("itemHoverBackgroundColor",o||"rgba(0, 0, 0, 0.05)"),clearable:!0},{label:(0,o.__)("Hover Text Color","priority-plus-navigation"),value:p.itemHoverTextColor,onChange:o=>v("itemHoverTextColor",o||"inherit"),clearable:!0}]})]}),(0,r.jsx)("div",{className:"dropdown-customizer-preview",children:(0,r.jsx)(c,{dropdownStyles:p})})]}),(0,r.jsxs)("div",{className:"dropdown-customizer-footer",children:[(0,r.jsx)(s.Button,{variant:"tertiary",isDestructive:!0,onClick:()=>{i({priorityNavDropdownStyles:a})},children:(0,o.__)("Reset to Defaults","priority-plus-navigation")}),(0,r.jsx)(s.Button,{variant:"primary",onClick:t,children:(0,o.__)("Done","priority-plus-navigation")})]})]})}const y=(0,p.createHigherOrderComponent)(o=>e=>{const{name:i,attributes:t}=e;if("core/navigation"!==i)return(0,r.jsx)(o,{...e});const n=(t.className||"").includes("is-style-priority-plus-navigation")||!0===t.priorityNavEnabled;return(0,d.useEffect)(()=>{if(!n)return;const o=document.querySelector(".block-editor-block-inspector");if(!o)return;const e=o.querySelector('.components-toggle-group-control-option-base[data-value="always"]');e&&(e.style.opacity="0.4",e.style.pointerEvents="none",e.style.textDecoration="line-through",e.style.cursor="not-allowed")},[n,t.overlayMenu]),(0,r.jsx)(o,{...e})},"addDisableAlwaysOption"),m=(0,p.createHigherOrderComponent)(e=>i=>{const{name:t,attributes:n,setAttributes:p}=i;if("core/navigation"!==t)return(0,r.jsx)(e,{...i});const u=(n.className||"").includes("is-style-priority-plus-navigation")||!0===n.priorityNavEnabled;if(!u)return(0,r.jsx)(e,{...i});const{priorityNavEnabled:v,priorityNavMoreLabel:c,priorityNavMoreBackgroundColor:y,priorityNavMoreBackgroundColorHover:m,priorityNavMoreTextColor:x,priorityNavMoreTextColorHover:h,priorityNavMorePadding:b,overlayMenu:_}=n,[w,C]=(0,d.useState)(!1);(0,d.useEffect)(()=>{u&&"always"===_&&p({overlayMenu:"mobile"})},[u,_,p]);const f=(0,l.useSetting)("spacing.spacingSizes")||[];return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e,{...i}),(0,r.jsx)(l.InspectorControls,{group:"settings",children:(0,r.jsx)(s.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)(l.InspectorControls,{group:"styles",children:[(0,r.jsx)(s.__experimentalToolsPanel,{label:(0,o.__)("Priority Plus Settings","priority-plus-navigation"),resetAll:()=>p({priorityNavMoreLabel:"More"}),children:(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>!!c,label:(0,o.__)("More Button Label","priority-plus-navigation"),onDeselect:()=>p({priorityNavMoreLabel:"More"}),isShownByDefault:!0,children:(0,r.jsx)(s.TextControl,{label:(0,o.__)("More Button Label","priority-plus-navigation"),value:c,onChange:o=>p({priorityNavMoreLabel:o}),help:(0,o.__)('Text displayed on the "More" button',"priority-plus-navigation")})})}),(0,r.jsx)(l.PanelColorSettings,{title:(0,o.__)("Priority Plus Colors","priority-plus-navigation"),colorSettings:[{label:(0,o.__)("Button Text Color","priority-plus-navigation"),value:x,onChange:o=>p({priorityNavMoreTextColor:o||void 0}),clearable:!0},{label:(0,o.__)("Button Text Hover Color","priority-plus-navigation"),value:h,onChange:o=>p({priorityNavMoreTextColorHover:o||void 0}),clearable:!0},{label:(0,o.__)("Button Background Color","priority-plus-navigation"),value:y,onChange:o=>p({priorityNavMoreBackgroundColor:o||void 0}),clearable:!0},{label:(0,o.__)("Button Background Hover Color","priority-plus-navigation"),value:m,onChange:o=>p({priorityNavMoreBackgroundColorHover:o||void 0}),clearable:!0}]}),(0,r.jsx)(s.__experimentalToolsPanel,{label:(0,o.__)("Priority Plus Button","priority-plus-navigation"),resetAll:()=>p({priorityNavMorePadding:void 0}),children:(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>!!b&&Object.keys(b).length>0,label:(0,o.__)("Padding","priority-plus-navigation"),onDeselect:()=>p({priorityNavMorePadding:void 0}),isShownByDefault:!0,children:f.length>0?(0,r.jsx)(l.__experimentalSpacingSizesControl,{values:b,onChange:o=>p({priorityNavMorePadding:o}),label:(0,o.__)("Button Padding","priority-plus-navigation"),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"]}):(0,r.jsx)(s.BoxControl,{label:(0,o.__)("Button Padding","priority-plus-navigation"),values:b,onChange:o=>p({priorityNavMorePadding:o}),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"],allowReset:!0})})}),(0,r.jsx)(s.__experimentalToolsPanel,{label:(0,o.__)("Dropdown Styles","priority-plus-navigation"),resetAll:()=>{p({priorityNavDropdownStyles:a})},children:(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>{const{priorityNavDropdownStyles:o}=n;return!!o&&Object.keys(o).length>0},label:(0,o.__)("Customize Dropdown","priority-plus-navigation"),onDeselect:()=>p({priorityNavDropdownStyles:void 0}),isShownByDefault:!0,children:(0,r.jsx)(s.Button,{variant:"secondary",onClick:()=>C(!0),style:{width:"100%"},children:(0,o.__)("Customize Dropdown Styles","priority-plus-navigation")})})})]}),w&&(0,r.jsx)(g,{attributes:n,setAttributes:p,onClose:()=>C(!1)})]})},"withPriorityNavControls");(0,n.addFilter)("editor.BlockEdit","priority-plus-navigation/add-disable-always-option",y,5),(0,n.addFilter)("editor.BlockEdit","priority-plus-navigation/add-priority-plus-navigation-controls",m,10)})(); \ No newline at end of file +(()=>{"use strict";const o=window.wp.i18n,e=window.wp.blocks,i=window.wp.primitives,r=window.ReactJSXRuntime;var t=(0,r.jsx)(i.SVG,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",children:(0,r.jsx)(i.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,a={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"};(0,e.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,priorityNavDropdownStyles:a},isActive:(o,e)=>o.className?.includes(e.className)}),(0,n.addFilter)("blocks.registerBlockType","priority-plus-navigation/extend-core-navigation",(o,e)=>"core/navigation"!==e?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},priorityNavDropdownStyles:{type:"object",default:a}}});const l=window.wp.blockEditor,s=window.wp.components,p=window.wp.compose,d=window.wp.element;function u(o){if(!o||"string"!=typeof o)return o;if(o.startsWith("var:preset|")){const e=o.match(/^var:preset\|([^|]+)\|(.+)$/);if(e)return`var(--wp--preset--${e[1]}--${e[2]})`}return o.startsWith("var("),o}function v(o){if(!o)return"0.75rem 1rem";if("string"==typeof o)return u(o);if("object"==typeof o){if(0===Object.keys(o).length)return"0.75rem 1rem";const{top:e,right:i,bottom:r,left:t}=o;if(!(e&&""!==e&&"0"!==e||i&&""!==i&&"0"!==i||r&&""!==r&&"0"!==r||t&&""!==t&&"0"!==t))return"0.75rem 1rem";const n=u(e)||"0",a=u(i)||"0",l=u(r)||"0",s=u(t)||"0";return n===a&&a===l&&l===s?n:n===l&&a===s?`${n} ${a}`:`${n} ${a} ${l} ${s}`}return"0.75rem 1rem"}function c({dropdownStyles:e,navigationAttributes:i}){const{backgroundColor:t="#ffffff",borderColor:n="#dddddd",borderWidth:a="1px",borderRadius:l="4px",boxShadow:s="0 4px 12px rgba(0, 0, 0, 0.15)",itemSpacing:p,itemHoverBackgroundColor:u="rgba(0, 0, 0, 0.05)",itemHoverTextColor:c="inherit",multiLevelIndent:g="1.25rem"}=e||{},[y,m]=(0,d.useState)(!0),h=i?.style||{},x=i?.fontSize,b=i?.fontFamily,_=i?.textColor,w=h?.color?.text,C=h?.typography?.fontStyle,f=h?.typography?.fontWeight,S=h?.typography?.lineHeight,j=h?.typography?.letterSpacing,N=h?.typography?.fontSize,B=(0,d.useMemo)(()=>{const o={"--wp--custom--priority-plus-navigation--dropdown--background-color":t,"--wp--custom--priority-plus-navigation--dropdown--border-color":n,"--wp--custom--priority-plus-navigation--dropdown--border-width":a,"--wp--custom--priority-plus-navigation--dropdown--border-radius":l,"--wp--custom--priority-plus-navigation--dropdown--box-shadow":s,"--wp--custom--priority-plus-navigation--dropdown--item-spacing":v(p),"--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color":u,"--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color":c,"--wp--custom--priority-plus-navigation--dropdown--multi-level-indent":g};return b&&(o.fontFamily=`var(--wp--preset--font-family--${b})`),N?o.fontSize=N:x&&(o.fontSize=`var(--wp--preset--font-size--${x})`),C&&(o.fontStyle=C),f&&(o.fontWeight=f),S&&(o.lineHeight=S),j&&(o.letterSpacing=j),w?o.color=w:_&&(o.color=`var(--wp--preset--color--${_})`),o},[t,n,a,l,s,p,u,c,g,b,x,N,C,f,S,j,_,w]);return(0,r.jsxs)("div",{className:"dropdown-preview-wrapper",children:[(0,r.jsxs)("ul",{className:"priority-plus-navigation-dropdown is-open",style:B,children:[(0,r.jsx)("li",{children:(0,r.jsx)("a",{href:"#",onClick:o=>o.preventDefault(),children:(0,o.__)("Home","priority-plus-navigation")})}),(0,r.jsx)("li",{className:"dropdown-preview-hover-demo",children:(0,r.jsx)("a",{href:"#",onClick:o=>o.preventDefault(),children:(0,o.__)("About (Hover)","priority-plus-navigation")})}),(0,r.jsxs)("li",{children:[(0,r.jsxs)("button",{type:"button",className:"priority-plus-navigation-accordion-toggle priority-plus-navigation-accordion-toggle-full",onClick:()=>m(!y),"aria-expanded":y,children:[(0,r.jsx)("span",{className:"priority-plus-navigation-accordion-text",children:(0,o.__)("Services","priority-plus-navigation")}),(0,r.jsx)("span",{className:"priority-plus-navigation-accordion-arrow","aria-hidden":"true",children:"›"})]}),y&&(0,r.jsxs)("ul",{className:"priority-plus-navigation-accordion-content is-open",children:[(0,r.jsx)("li",{children:(0,r.jsx)("a",{href:"#",onClick:o=>o.preventDefault(),children:(0,o.__)("Web Design","priority-plus-navigation")})}),(0,r.jsx)("li",{children:(0,r.jsx)("a",{href:"#",onClick:o=>o.preventDefault(),children:(0,o.__)("Development","priority-plus-navigation")})})]})]}),(0,r.jsx)("li",{children:(0,r.jsx)("a",{href:"#",onClick:o=>o.preventDefault(),children:(0,o.__)("Contact","priority-plus-navigation")})})]}),(0,r.jsx)("p",{className:"dropdown-preview-help",children:(0,o.__)('Live preview - Click "Services" to toggle accordion',"priority-plus-navigation")})]})}function g({attributes:e,setAttributes:i,onClose:t}){const n=e.priorityNavDropdownStyles||{},p={...a,...n,itemSpacing:n.itemSpacing||a.itemSpacing},u=(0,l.useSetting)("spacing.spacingSizes")||[];(0,d.useEffect)(()=>{const o=e.priorityNavDropdownStyles||{};o.itemSpacing||i({priorityNavDropdownStyles:{...a,...o}})},[]);const v=(o,e)=>{i({priorityNavDropdownStyles:{...p,[o]:e}})},g=o=>!!p[o],y=(o,e)=>{v(o,e)};return(0,r.jsxs)(s.Modal,{title:(0,o.__)("Customize Dropdown Styles","priority-plus-navigation"),onRequestClose:t,className:"priority-plus-dropdown-customizer",size:"fill",isDismissible:!0,children:[(0,r.jsxs)("div",{className:"dropdown-customizer-layout",children:[(0,r.jsxs)("div",{className:"dropdown-customizer-controls",children:[(0,r.jsxs)(s.__experimentalToolsPanel,{label:(0,o.__)("Dropdown Container","priority-plus-navigation"),resetAll:()=>{v("backgroundColor","#ffffff"),v("borderColor","#dddddd"),v("borderWidth","1px"),v("borderRadius","4px"),v("boxShadow","0 4px 12px rgba(0, 0, 0, 0.15)")},children:[(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>g("borderWidth"),label:(0,o.__)("Border Width","priority-plus-navigation"),onDeselect:()=>y("borderWidth","1px"),isShownByDefault:!0,children:(0,r.jsx)(s.__experimentalUnitControl,{label:(0,o.__)("Border Width","priority-plus-navigation"),value:p.borderWidth||"1px",onChange:o=>v("borderWidth",o),units:[{value:"px",label:"px"},{value:"rem",label:"rem"},{value:"em",label:"em"}]})}),(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>g("borderRadius"),label:(0,o.__)("Border Radius","priority-plus-navigation"),onDeselect:()=>y("borderRadius","4px"),isShownByDefault:!0,children:(0,r.jsx)(s.__experimentalUnitControl,{label:(0,o.__)("Border Radius","priority-plus-navigation"),value:p.borderRadius||"4px",onChange:o=>v("borderRadius",o),units:[{value:"px",label:"px"},{value:"rem",label:"rem"},{value:"%",label:"%"}]})}),(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>g("boxShadow"),label:(0,o.__)("Box Shadow","priority-plus-navigation"),onDeselect:()=>y("boxShadow","0 4px 12px rgba(0, 0, 0, 0.15)"),isShownByDefault:!0,children:(0,r.jsx)(s.TextControl,{label:(0,o.__)("Box Shadow","priority-plus-navigation"),value:p.boxShadow||"0 4px 12px rgba(0, 0, 0, 0.15)",onChange:o=>v("boxShadow",o),help:(0,o.__)("CSS box-shadow property","priority-plus-navigation")})})]}),(0,r.jsx)(l.PanelColorSettings,{title:(0,o.__)("Dropdown Container Colors","priority-plus-navigation"),colorSettings:[{label:(0,o.__)("Background Color","priority-plus-navigation"),value:p.backgroundColor,onChange:o=>v("backgroundColor",o||"#ffffff"),clearable:!0},{label:(0,o.__)("Border Color","priority-plus-navigation"),value:p.borderColor,onChange:o=>v("borderColor",o||"#dddddd"),clearable:!0}]}),(0,r.jsxs)(s.__experimentalToolsPanel,{label:(0,o.__)("Dropdown Items","priority-plus-navigation"),resetAll:()=>{v("itemSpacing",a.itemSpacing),v("itemHoverBackgroundColor",a.itemHoverBackgroundColor),v("itemHoverTextColor",a.itemHoverTextColor),v("multiLevelIndent",a.multiLevelIndent)},children:[(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>!!p.itemSpacing&&("object"==typeof p.itemSpacing?Object.values(p.itemSpacing).some(o=>o&&""!==o):!!p.itemSpacing),label:(0,o.__)("Item Spacing","priority-plus-navigation"),onDeselect:()=>v("itemSpacing",a.itemSpacing),isShownByDefault:!0,children:u.length>0?(0,r.jsx)(l.__experimentalSpacingSizesControl,{values:p.itemSpacing,onChange:o=>v("itemSpacing",o),label:(0,o.__)("Item Spacing (Padding)","priority-plus-navigation"),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"]}):(0,r.jsx)(s.__experimentalBoxControl,{label:(0,o.__)("Item Spacing (Padding)","priority-plus-navigation"),values:p.itemSpacing,onChange:o=>v("itemSpacing",o),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"],allowReset:!0})}),(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>g("multiLevelIndent"),label:(0,o.__)("Multi-level Indent","priority-plus-navigation"),onDeselect:()=>y("multiLevelIndent","1.25rem"),isShownByDefault:!0,children:(0,r.jsx)(s.__experimentalUnitControl,{label:(0,o.__)("Multi-level Indent","priority-plus-navigation"),value:p.multiLevelIndent||"1.25rem",onChange:o=>v("multiLevelIndent",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"}]})})]}),(0,r.jsx)(l.PanelColorSettings,{title:(0,o.__)("Dropdown Item Hover Colors","priority-plus-navigation"),colorSettings:[{label:(0,o.__)("Hover Background Color","priority-plus-navigation"),value:p.itemHoverBackgroundColor,onChange:o=>v("itemHoverBackgroundColor",o||"rgba(0, 0, 0, 0.05)"),clearable:!0},{label:(0,o.__)("Hover Text Color","priority-plus-navigation"),value:p.itemHoverTextColor,onChange:o=>v("itemHoverTextColor",o||"inherit"),clearable:!0}]})]}),(0,r.jsx)("div",{className:"dropdown-customizer-preview",children:(0,r.jsx)(c,{dropdownStyles:p,navigationAttributes:e})})]}),(0,r.jsxs)("div",{className:"dropdown-customizer-footer",children:[(0,r.jsx)(s.Button,{variant:"tertiary",isDestructive:!0,onClick:()=>{i({priorityNavDropdownStyles:a})},children:(0,o.__)("Reset to Defaults","priority-plus-navigation")}),(0,r.jsx)(s.Button,{variant:"primary",onClick:t,children:(0,o.__)("Done","priority-plus-navigation")})]})]})}const y=(0,p.createHigherOrderComponent)(o=>e=>{const{name:i,attributes:t}=e;if("core/navigation"!==i)return(0,r.jsx)(o,{...e});const n=(t.className||"").includes("is-style-priority-plus-navigation")||!0===t.priorityNavEnabled;return(0,d.useEffect)(()=>{if(!n)return;const o=document.querySelector(".block-editor-block-inspector");if(!o)return;const e=o.querySelector('.components-toggle-group-control-option-base[data-value="always"]');e&&(e.style.opacity="0.4",e.style.pointerEvents="none",e.style.textDecoration="line-through",e.style.cursor="not-allowed")},[n,t.overlayMenu]),(0,r.jsx)(o,{...e})},"addDisableAlwaysOption"),m=(0,p.createHigherOrderComponent)(e=>i=>{const{name:t,attributes:n,setAttributes:p}=i;if("core/navigation"!==t)return(0,r.jsx)(e,{...i});const u=(n.className||"").includes("is-style-priority-plus-navigation")||!0===n.priorityNavEnabled;if(!u)return(0,r.jsx)(e,{...i});const{priorityNavEnabled:v,priorityNavMoreLabel:c,priorityNavMoreBackgroundColor:y,priorityNavMoreBackgroundColorHover:m,priorityNavMoreTextColor:h,priorityNavMoreTextColorHover:x,priorityNavMorePadding:b,overlayMenu:_}=n,[w,C]=(0,d.useState)(!1);(0,d.useEffect)(()=>{u&&"always"===_&&p({overlayMenu:"mobile"})},[u,_,p]);const f=(0,l.useSetting)("spacing.spacingSizes")||[];return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e,{...i}),(0,r.jsx)(l.InspectorControls,{group:"settings",children:(0,r.jsx)(s.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)(l.InspectorControls,{group:"styles",children:[(0,r.jsx)(s.__experimentalToolsPanel,{label:(0,o.__)("Priority Plus Settings","priority-plus-navigation"),resetAll:()=>p({priorityNavMoreLabel:"More"}),children:(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>!!c,label:(0,o.__)("More Button Label","priority-plus-navigation"),onDeselect:()=>p({priorityNavMoreLabel:"More"}),isShownByDefault:!0,children:(0,r.jsx)(s.TextControl,{label:(0,o.__)("More Button Label","priority-plus-navigation"),value:c,onChange:o=>p({priorityNavMoreLabel:o}),help:(0,o.__)('Text displayed on the "More" button',"priority-plus-navigation")})})}),(0,r.jsx)(l.PanelColorSettings,{title:(0,o.__)("Priority Plus Colors","priority-plus-navigation"),colorSettings:[{label:(0,o.__)("Button Text Color","priority-plus-navigation"),value:h,onChange:o=>p({priorityNavMoreTextColor:o||void 0}),clearable:!0},{label:(0,o.__)("Button Text Hover Color","priority-plus-navigation"),value:x,onChange:o=>p({priorityNavMoreTextColorHover:o||void 0}),clearable:!0},{label:(0,o.__)("Button Background Color","priority-plus-navigation"),value:y,onChange:o=>p({priorityNavMoreBackgroundColor:o||void 0}),clearable:!0},{label:(0,o.__)("Button Background Hover Color","priority-plus-navigation"),value:m,onChange:o=>p({priorityNavMoreBackgroundColorHover:o||void 0}),clearable:!0}]}),(0,r.jsx)(s.__experimentalToolsPanel,{label:(0,o.__)("Priority Plus Button","priority-plus-navigation"),resetAll:()=>p({priorityNavMorePadding:void 0}),children:(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>!!b&&Object.keys(b).length>0,label:(0,o.__)("Padding","priority-plus-navigation"),onDeselect:()=>p({priorityNavMorePadding:void 0}),isShownByDefault:!0,children:f.length>0?(0,r.jsx)(l.__experimentalSpacingSizesControl,{values:b,onChange:o=>p({priorityNavMorePadding:o}),label:(0,o.__)("Button Padding","priority-plus-navigation"),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"]}):(0,r.jsx)(s.BoxControl,{label:(0,o.__)("Button Padding","priority-plus-navigation"),values:b,onChange:o=>p({priorityNavMorePadding:o}),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"],allowReset:!0})})}),(0,r.jsx)(s.__experimentalToolsPanel,{label:(0,o.__)("Dropdown Styles","priority-plus-navigation"),resetAll:()=>{p({priorityNavDropdownStyles:a})},children:(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>{const{priorityNavDropdownStyles:o}=n;return!!o&&Object.keys(o).length>0},label:(0,o.__)("Customize Dropdown","priority-plus-navigation"),onDeselect:()=>p({priorityNavDropdownStyles:void 0}),isShownByDefault:!0,children:(0,r.jsx)(s.Button,{variant:"secondary",onClick:()=>C(!0),style:{width:"100%"},children:(0,o.__)("Customize Dropdown Styles","priority-plus-navigation")})})})]}),w&&(0,r.jsx)(g,{attributes:n,setAttributes:p,onClose:()=>C(!1)})]})},"withPriorityNavControls");(0,n.addFilter)("editor.BlockEdit","priority-plus-navigation/add-disable-always-option",y,5),(0,n.addFilter)("editor.BlockEdit","priority-plus-navigation/add-priority-plus-navigation-controls",m,10)})(); \ No newline at end of file diff --git a/src/variation/components/dropdown-customizer-modal.js b/src/variation/components/dropdown-customizer-modal.js index 36cbf8c..574e43c 100644 --- a/src/variation/components/dropdown-customizer-modal.js +++ b/src/variation/components/dropdown-customizer-modal.js @@ -399,6 +399,7 @@ export function DropdownCustomizerModal({
    diff --git a/src/variation/components/dropdown-preview.js b/src/variation/components/dropdown-preview.js index 4d2afb1..456e776 100644 --- a/src/variation/components/dropdown-preview.js +++ b/src/variation/components/dropdown-preview.js @@ -121,9 +121,10 @@ function getItemSpacingCSS(spacing) { * * @param {Object} props - Component props * @param {Object} props.dropdownStyles - Dropdown style settings + * @param {Object} props.navigationAttributes - Navigation block attributes for inheriting styles * @return {JSX.Element} Preview component */ -export function DropdownPreview({ dropdownStyles }) { +export function DropdownPreview({ dropdownStyles, navigationAttributes }) { const { backgroundColor = '#ffffff', borderColor = '#dddddd', @@ -139,28 +140,78 @@ export function DropdownPreview({ dropdownStyles }) { // State for accordion open/closed const [isAccordionOpen, setIsAccordionOpen] = useState(true); + // Extract navigation block typography/appearance styles + const navStyles = navigationAttributes?.style || {}; + const navFontSizePreset = navigationAttributes?.fontSize; // Preset slug like "x-large" + const navFontFamilyPreset = navigationAttributes?.fontFamily; // Preset slug like "fira-code" + const navTextColorPreset = navigationAttributes?.textColor; // Preset slug like "accent-3" + const navCustomTextColor = navStyles?.color?.text; + const navFontStyle = navStyles?.typography?.fontStyle; // "normal" or "italic" + const navFontWeight = navStyles?.typography?.fontWeight; + const navLineHeight = navStyles?.typography?.lineHeight; + const navLetterSpacing = navStyles?.typography?.letterSpacing; + const navCustomFontSize = navStyles?.typography?.fontSize; // Custom size like "20px" + // Memoize the inline styles using the same CSS custom property names as the frontend const previewStyles = useMemo( - () => ({ - '--wp--custom--priority-plus-navigation--dropdown--background-color': - backgroundColor, - '--wp--custom--priority-plus-navigation--dropdown--border-color': - borderColor, - '--wp--custom--priority-plus-navigation--dropdown--border-width': - borderWidth, - '--wp--custom--priority-plus-navigation--dropdown--border-radius': - borderRadius, - '--wp--custom--priority-plus-navigation--dropdown--box-shadow': - boxShadow, - '--wp--custom--priority-plus-navigation--dropdown--item-spacing': - getItemSpacingCSS(itemSpacing), - '--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color': - itemHoverBackgroundColor, - '--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color': - itemHoverTextColor, - '--wp--custom--priority-plus-navigation--dropdown--multi-level-indent': - multiLevelIndent, - }), + () => { + const styles = { + '--wp--custom--priority-plus-navigation--dropdown--background-color': + backgroundColor, + '--wp--custom--priority-plus-navigation--dropdown--border-color': + borderColor, + '--wp--custom--priority-plus-navigation--dropdown--border-width': + borderWidth, + '--wp--custom--priority-plus-navigation--dropdown--border-radius': + borderRadius, + '--wp--custom--priority-plus-navigation--dropdown--box-shadow': + boxShadow, + '--wp--custom--priority-plus-navigation--dropdown--item-spacing': + getItemSpacingCSS(itemSpacing), + '--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color': + itemHoverBackgroundColor, + '--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color': + itemHoverTextColor, + '--wp--custom--priority-plus-navigation--dropdown--multi-level-indent': + multiLevelIndent, + }; + + // Add navigation typography styles if present + // Font family - convert preset slug to CSS custom property + if (navFontFamilyPreset) { + styles.fontFamily = `var(--wp--preset--font-family--${navFontFamilyPreset})`; + } + + // Font size - use custom first, then preset + if (navCustomFontSize) { + styles.fontSize = navCustomFontSize; + } else if (navFontSizePreset) { + styles.fontSize = `var(--wp--preset--font-size--${navFontSizePreset})`; + } + + // Font style, weight, line height, letter spacing + if (navFontStyle) { + styles.fontStyle = navFontStyle; + } + if (navFontWeight) { + styles.fontWeight = navFontWeight; + } + if (navLineHeight) { + styles.lineHeight = navLineHeight; + } + if (navLetterSpacing) { + styles.letterSpacing = navLetterSpacing; + } + + // Text color - use custom first, then preset + if (navCustomTextColor) { + styles.color = navCustomTextColor; + } else if (navTextColorPreset) { + styles.color = `var(--wp--preset--color--${navTextColorPreset})`; + } + + return styles; + }, [ backgroundColor, borderColor, @@ -171,16 +222,25 @@ export function DropdownPreview({ dropdownStyles }) { itemHoverBackgroundColor, itemHoverTextColor, multiLevelIndent, + navFontFamilyPreset, + navFontSizePreset, + navCustomFontSize, + navFontStyle, + navFontWeight, + navLineHeight, + navLetterSpacing, + navTextColorPreset, + navCustomTextColor, ] ); + // Build class names - just use base classes, styles applied via inline styles + const dropdownClasses = 'priority-plus-navigation-dropdown is-open'; + return (
    {/* Use exact same classes as frontend for 100% accuracy */} -
    - +
    diff --git a/src/variation/components/dropdown-preview.js b/src/variation/components/dropdown-preview.js index 4c2510d..5734d70 100644 --- a/src/variation/components/dropdown-preview.js +++ b/src/variation/components/dropdown-preview.js @@ -119,12 +119,11 @@ function getItemSpacingCSS(spacing) { * Displays a live preview of the dropdown menu using the exact same classes * and structure as the frontend to ensure 100% accuracy. * - * @param {Object} props - Component props - * @param {Object} props.dropdownStyles - Dropdown style settings - * @param {Object} props.navigationAttributes - Navigation block attributes for inheriting styles + * @param {Object} props - Component props + * @param {Object} props.dropdownStyles - Dropdown style settings * @return {JSX.Element} Preview component */ -export function DropdownPreview({ dropdownStyles, navigationAttributes }) { +export function DropdownPreview({ dropdownStyles }) { const { backgroundColor = '#ffffff', borderColor = '#dddddd', @@ -140,21 +139,9 @@ export function DropdownPreview({ dropdownStyles, navigationAttributes }) { // State for accordion open/closed const [isAccordionOpen, setIsAccordionOpen] = useState(true); - // Extract navigation block typography/appearance styles - const navStyles = navigationAttributes?.style || {}; - const navFontSizePreset = navigationAttributes?.fontSize; // Preset slug like "x-large" - const navFontFamilyPreset = navigationAttributes?.fontFamily; // Preset slug like "fira-code" - const navFontStyle = navStyles?.typography?.fontStyle; // "normal" or "italic" - const navFontWeight = navStyles?.typography?.fontWeight; - const navLineHeight = navStyles?.typography?.lineHeight; - const navLetterSpacing = navStyles?.typography?.letterSpacing; - const navTextDecoration = navStyles?.typography?.textDecoration; // "none", "underline", etc. - const navTextTransform = navStyles?.typography?.textTransform; // "none", "uppercase", "lowercase", "capitalize" - const navCustomFontSize = navStyles?.typography?.fontSize; // Custom size like "20px" - // Memoize the inline styles using the same CSS custom property names as the frontend const previewStyles = useMemo(() => { - const styles = { + return { '--wp--custom--priority-plus-navigation--dropdown--background-color': backgroundColor, '--wp--custom--priority-plus-navigation--dropdown--border-color': @@ -174,44 +161,6 @@ export function DropdownPreview({ dropdownStyles, navigationAttributes }) { '--wp--custom--priority-plus-navigation--dropdown--multi-level-indent': multiLevelIndent, }; - - // Add navigation typography styles if present - // Font family - convert preset slug to CSS custom property - if (navFontFamilyPreset) { - styles.fontFamily = `var(--wp--preset--font-family--${navFontFamilyPreset})`; - } - - // Font size - use custom first, then preset - if (navCustomFontSize) { - styles.fontSize = navCustomFontSize; - } else if (navFontSizePreset) { - styles.fontSize = `var(--wp--preset--font-size--${navFontSizePreset})`; - } - - // Typography styles from navigation - if (navFontStyle) { - styles.fontStyle = navFontStyle; - } - if (navFontWeight) { - styles.fontWeight = navFontWeight; - } - if (navLineHeight) { - styles.lineHeight = navLineHeight; - } - if (navLetterSpacing) { - styles.letterSpacing = navLetterSpacing; - } - if (navTextDecoration) { - styles.textDecoration = navTextDecoration; - } - if (navTextTransform) { - styles.textTransform = navTextTransform; - } - - // NOTE: Text color is NOT inherited from navigation - // User will add separate dropdown text color option in modal later - - return styles; }, [ backgroundColor, borderColor, @@ -222,15 +171,6 @@ export function DropdownPreview({ dropdownStyles, navigationAttributes }) { itemHoverBackgroundColor, itemHoverTextColor, multiLevelIndent, - navFontFamilyPreset, - navFontSizePreset, - navCustomFontSize, - navFontStyle, - navFontWeight, - navLineHeight, - navLetterSpacing, - navTextDecoration, - navTextTransform, ]); // Build class names - just use base classes, styles applied via inline styles diff --git a/src/variation/components/dropdown-preview.scss b/src/variation/components/dropdown-preview.scss index adfedc4..9b8272e 100644 --- a/src/variation/components/dropdown-preview.scss +++ b/src/variation/components/dropdown-preview.scss @@ -20,16 +20,10 @@ max-width: 320px; width: 100%; - // Ensure buttons inherit typography from the dropdown + // Ensure buttons inherit font family and size from the dropdown button { font-family: inherit; font-size: inherit; - font-style: inherit; - font-weight: inherit; - line-height: inherit; - letter-spacing: inherit; - text-decoration: inherit; - text-transform: inherit; } } From 5c03e0ac357f2062079fa3ac3128fdfbefd0e324 Mon Sep 17 00:00:00 2001 From: Troy Chaplin Date: Sat, 3 Jan 2026 16:22:03 -0500 Subject: [PATCH 14/40] fix: conflict with typography styles --- build/priority-plus-nav-editor.asset.php | 2 +- build/priority-plus-nav-editor.js | 2 +- classes/class-enqueues.php | 20 ++++++++++++++++++- .../components/dropdown-customizer-modal.js | 2 +- 4 files changed, 22 insertions(+), 4 deletions(-) diff --git a/build/priority-plus-nav-editor.asset.php b/build/priority-plus-nav-editor.asset.php index b528d2e..6dbfaf1 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' => '29bd8d2f1f337a655b43'); + array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-primitives'), 'version' => 'f171a4865eef4b23bcd8'); diff --git a/build/priority-plus-nav-editor.js b/build/priority-plus-nav-editor.js index edc1b3f..23efeb2 100644 --- a/build/priority-plus-nav-editor.js +++ b/build/priority-plus-nav-editor.js @@ -1 +1 @@ -(()=>{"use strict";const o=window.wp.i18n,e=window.wp.blocks,i=window.wp.primitives,r=window.ReactJSXRuntime;var t=(0,r.jsx)(i.SVG,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",children:(0,r.jsx)(i.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,a={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"};(0,e.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,priorityNavDropdownStyles:a},isActive:(o,e)=>o.className?.includes(e.className)}),(0,n.addFilter)("blocks.registerBlockType","priority-plus-navigation/extend-core-navigation",(o,e)=>"core/navigation"!==e?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},priorityNavDropdownStyles:{type:"object",default:a}}});const l=window.wp.blockEditor,s=window.wp.components,p=window.wp.compose,d=window.wp.element;function u(o){if(!o||"string"!=typeof o)return o;if(o.startsWith("var:preset|")){const e=o.match(/^var:preset\|([^|]+)\|(.+)$/);if(e)return`var(--wp--preset--${e[1]}--${e[2]})`}return o.startsWith("var("),o}function v(o){if(!o)return"0.75rem 1rem";if("string"==typeof o)return u(o);if("object"==typeof o){if(0===Object.keys(o).length)return"0.75rem 1rem";const{top:e,right:i,bottom:r,left:t}=o;if(!(e&&""!==e&&"0"!==e||i&&""!==i&&"0"!==i||r&&""!==r&&"0"!==r||t&&""!==t&&"0"!==t))return"0.75rem 1rem";const n=u(e)||"0",a=u(i)||"0",l=u(r)||"0",s=u(t)||"0";return n===a&&a===l&&l===s?n:n===l&&a===s?`${n} ${a}`:`${n} ${a} ${l} ${s}`}return"0.75rem 1rem"}function c({dropdownStyles:e}){const{backgroundColor:i="#ffffff",borderColor:t="#dddddd",borderWidth:n="1px",borderRadius:a="4px",boxShadow:l="0 4px 12px rgba(0, 0, 0, 0.15)",itemSpacing:s,itemHoverBackgroundColor:p="rgba(0, 0, 0, 0.05)",itemHoverTextColor:u="inherit",multiLevelIndent:c="1.25rem"}=e||{},[g,y]=(0,d.useState)(!0),m=(0,d.useMemo)(()=>({"--wp--custom--priority-plus-navigation--dropdown--background-color":i,"--wp--custom--priority-plus-navigation--dropdown--border-color":t,"--wp--custom--priority-plus-navigation--dropdown--border-width":n,"--wp--custom--priority-plus-navigation--dropdown--border-radius":a,"--wp--custom--priority-plus-navigation--dropdown--box-shadow":l,"--wp--custom--priority-plus-navigation--dropdown--item-spacing":v(s),"--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color":p,"--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color":u,"--wp--custom--priority-plus-navigation--dropdown--multi-level-indent":c}),[i,t,n,a,l,s,p,u,c]);return(0,r.jsxs)("div",{className:"dropdown-preview-wrapper",children:[(0,r.jsxs)("ul",{className:"priority-plus-navigation-dropdown is-open",style:m,children:[(0,r.jsx)("li",{children:(0,r.jsx)("a",{href:"#",onClick:o=>o.preventDefault(),children:(0,o.__)("Home","priority-plus-navigation")})}),(0,r.jsx)("li",{className:"dropdown-preview-hover-demo",children:(0,r.jsx)("a",{href:"#",onClick:o=>o.preventDefault(),children:(0,o.__)("About (Hover)","priority-plus-navigation")})}),(0,r.jsxs)("li",{children:[(0,r.jsxs)("button",{type:"button",className:"priority-plus-navigation-accordion-toggle priority-plus-navigation-accordion-toggle-full",onClick:()=>y(!g),"aria-expanded":g,children:[(0,r.jsx)("span",{className:"priority-plus-navigation-accordion-text",children:(0,o.__)("Services","priority-plus-navigation")}),(0,r.jsx)("span",{className:"priority-plus-navigation-accordion-arrow","aria-hidden":"true",children:"›"})]}),g&&(0,r.jsxs)("ul",{className:"priority-plus-navigation-accordion-content is-open",children:[(0,r.jsx)("li",{children:(0,r.jsx)("a",{href:"#",onClick:o=>o.preventDefault(),children:(0,o.__)("Web Design","priority-plus-navigation")})}),(0,r.jsx)("li",{children:(0,r.jsx)("a",{href:"#",onClick:o=>o.preventDefault(),children:(0,o.__)("Development","priority-plus-navigation")})})]})]}),(0,r.jsx)("li",{children:(0,r.jsx)("a",{href:"#",onClick:o=>o.preventDefault(),children:(0,o.__)("Contact","priority-plus-navigation")})})]}),(0,r.jsx)("p",{className:"dropdown-preview-help",children:(0,o.__)('Live preview - Click "Services" to toggle accordion',"priority-plus-navigation")})]})}function g({attributes:e,setAttributes:i,onClose:t}){const n=e.priorityNavDropdownStyles||{},p={...a,...n,itemSpacing:n.itemSpacing||a.itemSpacing},u=(0,l.useSetting)("spacing.spacingSizes")||[];(0,d.useEffect)(()=>{const o=e.priorityNavDropdownStyles||{};o.itemSpacing||i({priorityNavDropdownStyles:{...a,...o}})},[]);const v=(o,e)=>{i({priorityNavDropdownStyles:{...p,[o]:e}})},g=o=>!!p[o],y=(o,e)=>{v(o,e)};return(0,r.jsxs)(s.Modal,{title:(0,o.__)("Customize Dropdown Styles","priority-plus-navigation"),onRequestClose:t,className:"priority-plus-dropdown-customizer",size:"fill",isDismissible:!0,children:[(0,r.jsxs)("div",{className:"dropdown-customizer-layout",children:[(0,r.jsxs)("div",{className:"dropdown-customizer-controls",children:[(0,r.jsxs)(s.__experimentalToolsPanel,{label:(0,o.__)("Dropdown Container","priority-plus-navigation"),resetAll:()=>{v("backgroundColor","#ffffff"),v("borderColor","#dddddd"),v("borderWidth","1px"),v("borderRadius","4px"),v("boxShadow","0 4px 12px rgba(0, 0, 0, 0.15)")},children:[(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>g("borderWidth"),label:(0,o.__)("Border Width","priority-plus-navigation"),onDeselect:()=>y("borderWidth","1px"),isShownByDefault:!0,children:(0,r.jsx)(s.__experimentalUnitControl,{label:(0,o.__)("Border Width","priority-plus-navigation"),value:p.borderWidth||"1px",onChange:o=>v("borderWidth",o),units:[{value:"px",label:"px"},{value:"rem",label:"rem"},{value:"em",label:"em"}]})}),(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>g("borderRadius"),label:(0,o.__)("Border Radius","priority-plus-navigation"),onDeselect:()=>y("borderRadius","4px"),isShownByDefault:!0,children:(0,r.jsx)(s.__experimentalUnitControl,{label:(0,o.__)("Border Radius","priority-plus-navigation"),value:p.borderRadius||"4px",onChange:o=>v("borderRadius",o),units:[{value:"px",label:"px"},{value:"rem",label:"rem"},{value:"%",label:"%"}]})}),(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>g("boxShadow"),label:(0,o.__)("Box Shadow","priority-plus-navigation"),onDeselect:()=>y("boxShadow","0 4px 12px rgba(0, 0, 0, 0.15)"),isShownByDefault:!0,children:(0,r.jsx)(s.TextControl,{label:(0,o.__)("Box Shadow","priority-plus-navigation"),value:p.boxShadow||"0 4px 12px rgba(0, 0, 0, 0.15)",onChange:o=>v("boxShadow",o),help:(0,o.__)("CSS box-shadow property","priority-plus-navigation")})})]}),(0,r.jsx)(l.PanelColorSettings,{title:(0,o.__)("Dropdown Container Colors","priority-plus-navigation"),colorSettings:[{label:(0,o.__)("Background Color","priority-plus-navigation"),value:p.backgroundColor,onChange:o=>v("backgroundColor",o||"#ffffff"),clearable:!0},{label:(0,o.__)("Border Color","priority-plus-navigation"),value:p.borderColor,onChange:o=>v("borderColor",o||"#dddddd"),clearable:!0}]}),(0,r.jsxs)(s.__experimentalToolsPanel,{label:(0,o.__)("Dropdown Items","priority-plus-navigation"),resetAll:()=>{v("itemSpacing",a.itemSpacing),v("itemHoverBackgroundColor",a.itemHoverBackgroundColor),v("itemHoverTextColor",a.itemHoverTextColor),v("multiLevelIndent",a.multiLevelIndent)},children:[(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>!!p.itemSpacing&&("object"==typeof p.itemSpacing?Object.values(p.itemSpacing).some(o=>o&&""!==o):!!p.itemSpacing),label:(0,o.__)("Item Spacing","priority-plus-navigation"),onDeselect:()=>v("itemSpacing",a.itemSpacing),isShownByDefault:!0,children:u.length>0?(0,r.jsx)(l.__experimentalSpacingSizesControl,{values:p.itemSpacing,onChange:o=>v("itemSpacing",o),label:(0,o.__)("Item Spacing (Padding)","priority-plus-navigation"),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"]}):(0,r.jsx)(s.__experimentalBoxControl,{label:(0,o.__)("Item Spacing (Padding)","priority-plus-navigation"),values:p.itemSpacing,onChange:o=>v("itemSpacing",o),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"],allowReset:!0})}),(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>g("multiLevelIndent"),label:(0,o.__)("Multi-level Indent","priority-plus-navigation"),onDeselect:()=>y("multiLevelIndent","1.25rem"),isShownByDefault:!0,children:(0,r.jsx)(s.__experimentalUnitControl,{label:(0,o.__)("Multi-level Indent","priority-plus-navigation"),value:p.multiLevelIndent||"1.25rem",onChange:o=>v("multiLevelIndent",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"}]})})]}),(0,r.jsx)(l.PanelColorSettings,{title:(0,o.__)("Dropdown Item Hover Colors","priority-plus-navigation"),colorSettings:[{label:(0,o.__)("Hover Background Color","priority-plus-navigation"),value:p.itemHoverBackgroundColor,onChange:o=>v("itemHoverBackgroundColor",o||"rgba(0, 0, 0, 0.05)"),clearable:!0},{label:(0,o.__)("Hover Text Color","priority-plus-navigation"),value:p.itemHoverTextColor,onChange:o=>v("itemHoverTextColor",o||"inherit"),clearable:!0}]})]}),(0,r.jsx)("div",{className:"dropdown-customizer-preview",children:(0,r.jsx)(c,{dropdownStyles:p})})]}),(0,r.jsxs)("div",{className:"dropdown-customizer-footer",children:[(0,r.jsx)(s.Button,{variant:"tertiary",isDestructive:!0,onClick:()=>{i({priorityNavDropdownStyles:a})},children:(0,o.__)("Reset to Defaults","priority-plus-navigation")}),(0,r.jsx)(s.Button,{variant:"primary",onClick:t,children:(0,o.__)("Done","priority-plus-navigation")})]})]})}const y=(0,p.createHigherOrderComponent)(o=>e=>{const{name:i,attributes:t}=e;if("core/navigation"!==i)return(0,r.jsx)(o,{...e});const n=(t.className||"").includes("is-style-priority-plus-navigation")||!0===t.priorityNavEnabled;return(0,d.useEffect)(()=>{if(!n)return;const o=document.querySelector(".block-editor-block-inspector");if(!o)return;const e=o.querySelector('.components-toggle-group-control-option-base[data-value="always"]');e&&(e.style.opacity="0.4",e.style.pointerEvents="none",e.style.textDecoration="line-through",e.style.cursor="not-allowed")},[n,t.overlayMenu]),(0,r.jsx)(o,{...e})},"addDisableAlwaysOption"),m=(0,p.createHigherOrderComponent)(e=>i=>{const{name:t,attributes:n,setAttributes:p}=i;if("core/navigation"!==t)return(0,r.jsx)(e,{...i});const u=(n.className||"").includes("is-style-priority-plus-navigation")||!0===n.priorityNavEnabled;if(!u)return(0,r.jsx)(e,{...i});const{priorityNavEnabled:v,priorityNavMoreLabel:c,priorityNavMoreBackgroundColor:y,priorityNavMoreBackgroundColorHover:m,priorityNavMoreTextColor:x,priorityNavMoreTextColorHover:h,priorityNavMorePadding:b,overlayMenu:_}=n,[w,C]=(0,d.useState)(!1);(0,d.useEffect)(()=>{u&&"always"===_&&p({overlayMenu:"mobile"})},[u,_,p]);const f=(0,l.useSetting)("spacing.spacingSizes")||[];return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e,{...i}),(0,r.jsx)(l.InspectorControls,{group:"settings",children:(0,r.jsx)(s.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)(l.InspectorControls,{group:"styles",children:[(0,r.jsx)(s.__experimentalToolsPanel,{label:(0,o.__)("Priority Plus Settings","priority-plus-navigation"),resetAll:()=>p({priorityNavMoreLabel:"More"}),children:(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>!!c,label:(0,o.__)("More Button Label","priority-plus-navigation"),onDeselect:()=>p({priorityNavMoreLabel:"More"}),isShownByDefault:!0,children:(0,r.jsx)(s.TextControl,{label:(0,o.__)("More Button Label","priority-plus-navigation"),value:c,onChange:o=>p({priorityNavMoreLabel:o}),help:(0,o.__)('Text displayed on the "More" button',"priority-plus-navigation")})})}),(0,r.jsx)(l.PanelColorSettings,{title:(0,o.__)("Priority Plus Colors","priority-plus-navigation"),colorSettings:[{label:(0,o.__)("Button Text Color","priority-plus-navigation"),value:x,onChange:o=>p({priorityNavMoreTextColor:o||void 0}),clearable:!0},{label:(0,o.__)("Button Text Hover Color","priority-plus-navigation"),value:h,onChange:o=>p({priorityNavMoreTextColorHover:o||void 0}),clearable:!0},{label:(0,o.__)("Button Background Color","priority-plus-navigation"),value:y,onChange:o=>p({priorityNavMoreBackgroundColor:o||void 0}),clearable:!0},{label:(0,o.__)("Button Background Hover Color","priority-plus-navigation"),value:m,onChange:o=>p({priorityNavMoreBackgroundColorHover:o||void 0}),clearable:!0}]}),(0,r.jsx)(s.__experimentalToolsPanel,{label:(0,o.__)("Priority Plus Button","priority-plus-navigation"),resetAll:()=>p({priorityNavMorePadding:void 0}),children:(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>!!b&&Object.keys(b).length>0,label:(0,o.__)("Padding","priority-plus-navigation"),onDeselect:()=>p({priorityNavMorePadding:void 0}),isShownByDefault:!0,children:f.length>0?(0,r.jsx)(l.__experimentalSpacingSizesControl,{values:b,onChange:o=>p({priorityNavMorePadding:o}),label:(0,o.__)("Button Padding","priority-plus-navigation"),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"]}):(0,r.jsx)(s.BoxControl,{label:(0,o.__)("Button Padding","priority-plus-navigation"),values:b,onChange:o=>p({priorityNavMorePadding:o}),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"],allowReset:!0})})}),(0,r.jsx)(s.__experimentalToolsPanel,{label:(0,o.__)("Dropdown Styles","priority-plus-navigation"),resetAll:()=>{p({priorityNavDropdownStyles:a})},children:(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>{const{priorityNavDropdownStyles:o}=n;return!!o&&Object.keys(o).length>0},label:(0,o.__)("Customize Dropdown","priority-plus-navigation"),onDeselect:()=>p({priorityNavDropdownStyles:void 0}),isShownByDefault:!0,children:(0,r.jsx)(s.Button,{variant:"secondary",onClick:()=>C(!0),style:{width:"100%"},children:(0,o.__)("Customize Dropdown Styles","priority-plus-navigation")})})})]}),w&&(0,r.jsx)(g,{attributes:n,setAttributes:p,onClose:()=>C(!1)})]})},"withPriorityNavControls");(0,n.addFilter)("editor.BlockEdit","priority-plus-navigation/add-disable-always-option",y,5),(0,n.addFilter)("editor.BlockEdit","priority-plus-navigation/add-priority-plus-navigation-controls",m,10)})(); \ No newline at end of file +(()=>{"use strict";const o=window.wp.i18n,e=window.wp.blocks,i=window.wp.primitives,r=window.ReactJSXRuntime;var t=(0,r.jsx)(i.SVG,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",children:(0,r.jsx)(i.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,a={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"};(0,e.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,priorityNavDropdownStyles:a},isActive:(o,e)=>o.className?.includes(e.className)}),(0,n.addFilter)("blocks.registerBlockType","priority-plus-navigation/extend-core-navigation",(o,e)=>"core/navigation"!==e?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},priorityNavDropdownStyles:{type:"object",default:a}}});const l=window.wp.blockEditor,s=window.wp.components,p=window.wp.compose,d=window.wp.element;function u(o){if(!o||"string"!=typeof o)return o;if(o.startsWith("var:preset|")){const e=o.match(/^var:preset\|([^|]+)\|(.+)$/);if(e)return`var(--wp--preset--${e[1]}--${e[2]})`}return o.startsWith("var("),o}function v(o){if(!o)return"0.75rem 1rem";if("string"==typeof o)return u(o);if("object"==typeof o){if(0===Object.keys(o).length)return"0.75rem 1rem";const{top:e,right:i,bottom:r,left:t}=o;if(!(e&&""!==e&&"0"!==e||i&&""!==i&&"0"!==i||r&&""!==r&&"0"!==r||t&&""!==t&&"0"!==t))return"0.75rem 1rem";const n=u(e)||"0",a=u(i)||"0",l=u(r)||"0",s=u(t)||"0";return n===a&&a===l&&l===s?n:n===l&&a===s?`${n} ${a}`:`${n} ${a} ${l} ${s}`}return"0.75rem 1rem"}function c({dropdownStyles:e}){const{backgroundColor:i="#ffffff",borderColor:t="#dddddd",borderWidth:n="1px",borderRadius:a="4px",boxShadow:l="0 4px 12px rgba(0, 0, 0, 0.15)",itemSpacing:s,itemHoverBackgroundColor:p="rgba(0, 0, 0, 0.05)",itemHoverTextColor:u="inherit",multiLevelIndent:c="1.25rem"}=e||{},[g,y]=(0,d.useState)(!0),m=(0,d.useMemo)(()=>({"--wp--custom--priority-plus-navigation--dropdown--background-color":i,"--wp--custom--priority-plus-navigation--dropdown--border-color":t,"--wp--custom--priority-plus-navigation--dropdown--border-width":n,"--wp--custom--priority-plus-navigation--dropdown--border-radius":a,"--wp--custom--priority-plus-navigation--dropdown--box-shadow":l,"--wp--custom--priority-plus-navigation--dropdown--item-spacing":v(s),"--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color":p,"--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color":u,"--wp--custom--priority-plus-navigation--dropdown--multi-level-indent":c}),[i,t,n,a,l,s,p,u,c]);return(0,r.jsxs)("div",{className:"dropdown-preview-wrapper",children:[(0,r.jsxs)("ul",{className:"priority-plus-navigation-dropdown is-open",style:m,children:[(0,r.jsx)("li",{children:(0,r.jsx)("a",{href:"#",onClick:o=>o.preventDefault(),children:(0,o.__)("Home","priority-plus-navigation")})}),(0,r.jsx)("li",{className:"dropdown-preview-hover-demo",children:(0,r.jsx)("a",{href:"#",onClick:o=>o.preventDefault(),children:(0,o.__)("About (Hover)","priority-plus-navigation")})}),(0,r.jsxs)("li",{children:[(0,r.jsxs)("button",{type:"button",className:"priority-plus-navigation-accordion-toggle priority-plus-navigation-accordion-toggle-full",onClick:()=>y(!g),"aria-expanded":g,children:[(0,r.jsx)("span",{className:"priority-plus-navigation-accordion-text",children:(0,o.__)("Services","priority-plus-navigation")}),(0,r.jsx)("span",{className:"priority-plus-navigation-accordion-arrow","aria-hidden":"true",children:"›"})]}),g&&(0,r.jsxs)("ul",{className:"priority-plus-navigation-accordion-content is-open",children:[(0,r.jsx)("li",{children:(0,r.jsx)("a",{href:"#",onClick:o=>o.preventDefault(),children:(0,o.__)("Web Design","priority-plus-navigation")})}),(0,r.jsx)("li",{children:(0,r.jsx)("a",{href:"#",onClick:o=>o.preventDefault(),children:(0,o.__)("Development","priority-plus-navigation")})})]})]}),(0,r.jsx)("li",{children:(0,r.jsx)("a",{href:"#",onClick:o=>o.preventDefault(),children:(0,o.__)("Contact","priority-plus-navigation")})})]}),(0,r.jsx)("p",{className:"dropdown-preview-help",children:(0,o.__)('Live preview - Click "Services" to toggle accordion',"priority-plus-navigation")})]})}function g({attributes:e,setAttributes:i,onClose:t}){const n=e.priorityNavDropdownStyles||{},p={...a,...n,itemSpacing:n.itemSpacing||a.itemSpacing},u=(0,l.useSetting)("spacing.spacingSizes")||[];(0,d.useEffect)(()=>{const o=e.priorityNavDropdownStyles||{};o.itemSpacing||i({priorityNavDropdownStyles:{...a,...o}})},[]);const v=(o,e)=>{i({priorityNavDropdownStyles:{...p,[o]:e}})},g=o=>!!p[o],y=(o,e)=>{v(o,e)};return(0,r.jsxs)(s.Modal,{title:(0,o.__)("Customize Dropdown Styles","priority-plus-navigation"),onRequestClose:t,className:"priority-plus-dropdown-customizer",size:"large",isDismissible:!0,children:[(0,r.jsxs)("div",{className:"dropdown-customizer-layout",children:[(0,r.jsxs)("div",{className:"dropdown-customizer-controls",children:[(0,r.jsxs)(s.__experimentalToolsPanel,{label:(0,o.__)("Dropdown Container","priority-plus-navigation"),resetAll:()=>{v("backgroundColor","#ffffff"),v("borderColor","#dddddd"),v("borderWidth","1px"),v("borderRadius","4px"),v("boxShadow","0 4px 12px rgba(0, 0, 0, 0.15)")},children:[(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>g("borderWidth"),label:(0,o.__)("Border Width","priority-plus-navigation"),onDeselect:()=>y("borderWidth","1px"),isShownByDefault:!0,children:(0,r.jsx)(s.__experimentalUnitControl,{label:(0,o.__)("Border Width","priority-plus-navigation"),value:p.borderWidth||"1px",onChange:o=>v("borderWidth",o),units:[{value:"px",label:"px"},{value:"rem",label:"rem"},{value:"em",label:"em"}]})}),(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>g("borderRadius"),label:(0,o.__)("Border Radius","priority-plus-navigation"),onDeselect:()=>y("borderRadius","4px"),isShownByDefault:!0,children:(0,r.jsx)(s.__experimentalUnitControl,{label:(0,o.__)("Border Radius","priority-plus-navigation"),value:p.borderRadius||"4px",onChange:o=>v("borderRadius",o),units:[{value:"px",label:"px"},{value:"rem",label:"rem"},{value:"%",label:"%"}]})}),(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>g("boxShadow"),label:(0,o.__)("Box Shadow","priority-plus-navigation"),onDeselect:()=>y("boxShadow","0 4px 12px rgba(0, 0, 0, 0.15)"),isShownByDefault:!0,children:(0,r.jsx)(s.TextControl,{label:(0,o.__)("Box Shadow","priority-plus-navigation"),value:p.boxShadow||"0 4px 12px rgba(0, 0, 0, 0.15)",onChange:o=>v("boxShadow",o),help:(0,o.__)("CSS box-shadow property","priority-plus-navigation")})})]}),(0,r.jsx)(l.PanelColorSettings,{title:(0,o.__)("Dropdown Container Colors","priority-plus-navigation"),colorSettings:[{label:(0,o.__)("Background Color","priority-plus-navigation"),value:p.backgroundColor,onChange:o=>v("backgroundColor",o||"#ffffff"),clearable:!0},{label:(0,o.__)("Border Color","priority-plus-navigation"),value:p.borderColor,onChange:o=>v("borderColor",o||"#dddddd"),clearable:!0}]}),(0,r.jsxs)(s.__experimentalToolsPanel,{label:(0,o.__)("Dropdown Items","priority-plus-navigation"),resetAll:()=>{v("itemSpacing",a.itemSpacing),v("itemHoverBackgroundColor",a.itemHoverBackgroundColor),v("itemHoverTextColor",a.itemHoverTextColor),v("multiLevelIndent",a.multiLevelIndent)},children:[(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>!!p.itemSpacing&&("object"==typeof p.itemSpacing?Object.values(p.itemSpacing).some(o=>o&&""!==o):!!p.itemSpacing),label:(0,o.__)("Item Spacing","priority-plus-navigation"),onDeselect:()=>v("itemSpacing",a.itemSpacing),isShownByDefault:!0,children:u.length>0?(0,r.jsx)(l.__experimentalSpacingSizesControl,{values:p.itemSpacing,onChange:o=>v("itemSpacing",o),label:(0,o.__)("Item Spacing (Padding)","priority-plus-navigation"),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"]}):(0,r.jsx)(s.__experimentalBoxControl,{label:(0,o.__)("Item Spacing (Padding)","priority-plus-navigation"),values:p.itemSpacing,onChange:o=>v("itemSpacing",o),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"],allowReset:!0})}),(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>g("multiLevelIndent"),label:(0,o.__)("Multi-level Indent","priority-plus-navigation"),onDeselect:()=>y("multiLevelIndent","1.25rem"),isShownByDefault:!0,children:(0,r.jsx)(s.__experimentalUnitControl,{label:(0,o.__)("Multi-level Indent","priority-plus-navigation"),value:p.multiLevelIndent||"1.25rem",onChange:o=>v("multiLevelIndent",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"}]})})]}),(0,r.jsx)(l.PanelColorSettings,{title:(0,o.__)("Dropdown Item Hover Colors","priority-plus-navigation"),colorSettings:[{label:(0,o.__)("Hover Background Color","priority-plus-navigation"),value:p.itemHoverBackgroundColor,onChange:o=>v("itemHoverBackgroundColor",o||"rgba(0, 0, 0, 0.05)"),clearable:!0},{label:(0,o.__)("Hover Text Color","priority-plus-navigation"),value:p.itemHoverTextColor,onChange:o=>v("itemHoverTextColor",o||"inherit"),clearable:!0}]})]}),(0,r.jsx)("div",{className:"dropdown-customizer-preview",children:(0,r.jsx)(c,{dropdownStyles:p})})]}),(0,r.jsxs)("div",{className:"dropdown-customizer-footer",children:[(0,r.jsx)(s.Button,{variant:"tertiary",isDestructive:!0,onClick:()=>{i({priorityNavDropdownStyles:a})},children:(0,o.__)("Reset to Defaults","priority-plus-navigation")}),(0,r.jsx)(s.Button,{variant:"primary",onClick:t,children:(0,o.__)("Done","priority-plus-navigation")})]})]})}const y=(0,p.createHigherOrderComponent)(o=>e=>{const{name:i,attributes:t}=e;if("core/navigation"!==i)return(0,r.jsx)(o,{...e});const n=(t.className||"").includes("is-style-priority-plus-navigation")||!0===t.priorityNavEnabled;return(0,d.useEffect)(()=>{if(!n)return;const o=document.querySelector(".block-editor-block-inspector");if(!o)return;const e=o.querySelector('.components-toggle-group-control-option-base[data-value="always"]');e&&(e.style.opacity="0.4",e.style.pointerEvents="none",e.style.textDecoration="line-through",e.style.cursor="not-allowed")},[n,t.overlayMenu]),(0,r.jsx)(o,{...e})},"addDisableAlwaysOption"),m=(0,p.createHigherOrderComponent)(e=>i=>{const{name:t,attributes:n,setAttributes:p}=i;if("core/navigation"!==t)return(0,r.jsx)(e,{...i});const u=(n.className||"").includes("is-style-priority-plus-navigation")||!0===n.priorityNavEnabled;if(!u)return(0,r.jsx)(e,{...i});const{priorityNavEnabled:v,priorityNavMoreLabel:c,priorityNavMoreBackgroundColor:y,priorityNavMoreBackgroundColorHover:m,priorityNavMoreTextColor:x,priorityNavMoreTextColorHover:h,priorityNavMorePadding:b,overlayMenu:_}=n,[w,C]=(0,d.useState)(!1);(0,d.useEffect)(()=>{u&&"always"===_&&p({overlayMenu:"mobile"})},[u,_,p]);const f=(0,l.useSetting)("spacing.spacingSizes")||[];return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e,{...i}),(0,r.jsx)(l.InspectorControls,{group:"settings",children:(0,r.jsx)(s.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)(l.InspectorControls,{group:"styles",children:[(0,r.jsx)(s.__experimentalToolsPanel,{label:(0,o.__)("Priority Plus Settings","priority-plus-navigation"),resetAll:()=>p({priorityNavMoreLabel:"More"}),children:(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>!!c,label:(0,o.__)("More Button Label","priority-plus-navigation"),onDeselect:()=>p({priorityNavMoreLabel:"More"}),isShownByDefault:!0,children:(0,r.jsx)(s.TextControl,{label:(0,o.__)("More Button Label","priority-plus-navigation"),value:c,onChange:o=>p({priorityNavMoreLabel:o}),help:(0,o.__)('Text displayed on the "More" button',"priority-plus-navigation")})})}),(0,r.jsx)(l.PanelColorSettings,{title:(0,o.__)("Priority Plus Colors","priority-plus-navigation"),colorSettings:[{label:(0,o.__)("Button Text Color","priority-plus-navigation"),value:x,onChange:o=>p({priorityNavMoreTextColor:o||void 0}),clearable:!0},{label:(0,o.__)("Button Text Hover Color","priority-plus-navigation"),value:h,onChange:o=>p({priorityNavMoreTextColorHover:o||void 0}),clearable:!0},{label:(0,o.__)("Button Background Color","priority-plus-navigation"),value:y,onChange:o=>p({priorityNavMoreBackgroundColor:o||void 0}),clearable:!0},{label:(0,o.__)("Button Background Hover Color","priority-plus-navigation"),value:m,onChange:o=>p({priorityNavMoreBackgroundColorHover:o||void 0}),clearable:!0}]}),(0,r.jsx)(s.__experimentalToolsPanel,{label:(0,o.__)("Priority Plus Button","priority-plus-navigation"),resetAll:()=>p({priorityNavMorePadding:void 0}),children:(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>!!b&&Object.keys(b).length>0,label:(0,o.__)("Padding","priority-plus-navigation"),onDeselect:()=>p({priorityNavMorePadding:void 0}),isShownByDefault:!0,children:f.length>0?(0,r.jsx)(l.__experimentalSpacingSizesControl,{values:b,onChange:o=>p({priorityNavMorePadding:o}),label:(0,o.__)("Button Padding","priority-plus-navigation"),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"]}):(0,r.jsx)(s.BoxControl,{label:(0,o.__)("Button Padding","priority-plus-navigation"),values:b,onChange:o=>p({priorityNavMorePadding:o}),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"],allowReset:!0})})}),(0,r.jsx)(s.__experimentalToolsPanel,{label:(0,o.__)("Dropdown Styles","priority-plus-navigation"),resetAll:()=>{p({priorityNavDropdownStyles:a})},children:(0,r.jsx)(s.__experimentalToolsPanelItem,{hasValue:()=>{const{priorityNavDropdownStyles:o}=n;return!!o&&Object.keys(o).length>0},label:(0,o.__)("Customize Dropdown","priority-plus-navigation"),onDeselect:()=>p({priorityNavDropdownStyles:void 0}),isShownByDefault:!0,children:(0,r.jsx)(s.Button,{variant:"secondary",onClick:()=>C(!0),style:{width:"100%"},children:(0,o.__)("Customize Dropdown Styles","priority-plus-navigation")})})})]}),w&&(0,r.jsx)(g,{attributes:n,setAttributes:p,onClose:()=>C(!1)})]})},"withPriorityNavControls");(0,n.addFilter)("editor.BlockEdit","priority-plus-navigation/add-disable-always-option",y,5),(0,n.addFilter)("editor.BlockEdit","priority-plus-navigation/add-priority-plus-navigation-controls",m,10)})(); \ No newline at end of file diff --git a/classes/class-enqueues.php b/classes/class-enqueues.php index 5ba6980..59d0cae 100644 --- a/classes/class-enqueues.php +++ b/classes/class-enqueues.php @@ -320,9 +320,26 @@ private function inject_priority_attributes( string $block_content, string $more // Match the opening