diff --git a/CLAUDE.md b/CLAUDE.md deleted file mode 100644 index f94f794..0000000 --- a/CLAUDE.md +++ /dev/null @@ -1,117 +0,0 @@ -# Priority Plus Navigation - Claude Context - -## Project Overview - -A WordPress block plugin that extends the core Navigation block with the "Priority Plus" responsive pattern. Navigation items that don't fit in available space automatically move to a "More" dropdown menu. - -## Architecture - -### Block Variation Approach -- Extends `core/navigation` as a block variation (not a wrapper block) -- Registered in `src/variation/block.js` with name `priority-plus-navigation` -- Identified by className `is-style-priority-plus-navigation` -- Custom attributes prefixed with `priorityNav*` - -### Key Files - -**Editor (Block Extension)** -- `src/variation/block.js` - Registers block variation and extends core/navigation attributes -- `src/variation/controls.js` - Adds InspectorControls via `editor.BlockEdit` filter -- `src/variation/constants.js` - Shared defaults (DEFAULT_DROPDOWN_STYLES) - -**Modal & Components** -- `src/variation/components/dropdown-customizer-modal.js` - Main modal component for dropdown styling -- `src/variation/components/dropdown-preview.js` - Live preview inside modal -- `src/variation/components/panels/color-panel.js` - PanelColorSettings for dropdown colors -- `src/variation/components/panels/menu-styles-panel.js` - ToolsPanel for border, radius, shadow -- `src/variation/components/panels/menu-spacing-panel.js` - ToolsPanel for item spacing and indent - -**Styles** -- `src/variation/components/modal.scss` - Modal layout styles -- `src/variation/components/dropdown-preview.scss` - Preview component styles -- `src/styles/style.scss` - Frontend dropdown styles -- `src/styles/editor.scss` - Editor-specific styles - -**Frontend** -- `src/core/PriorityNav.js` - Main frontend class handling overflow detection -- `src/layout/width-calculator.js` - Width calculation algorithm -- `src/dom/dom-builder.js` - Builds dropdown menu dynamically -- `src/dom/dom-extractor.js` - Extracts nav item data -- `src/events/accordion-handler.js` - Handles accordion submenus -- `src/events/event-handlers.js` - Click/keyboard event handlers - -## Modal Structure (Dropdown Customizer) - -Triggered from ToolsPanel in controls.js via "Customize Dropdown" button. - -``` -DropdownCustomizerModal -├── ColorPanel - Background, hover background, hover text colors -├── MenuStylesPanel - Border (BorderBoxControl), border radius, box shadow -├── MenuSpacingPanel - Item spacing (BoxControl/SpacingSizesControl), multi-level indent -└── DropdownPreview - Live preview with actual frontend classes -``` - -**State Flow:** -1. `controls.js` manages `isDropdownCustomizerOpen` state -2. Modal reads `attributes.priorityNavDropdownStyles` merged with DEFAULT_DROPDOWN_STYLES -3. Updates via `updateStyle(key, value)` helper → `setAttributes({ priorityNavDropdownStyles: {...} })` -4. Preview updates instantly using CSS custom properties - -## Custom Attributes (on core/navigation) - -```javascript -priorityNavEnabled: boolean // Whether Priority+ is active -priorityNavMoreLabel: string // "More" button text -priorityNavMoreBackgroundColor: string -priorityNavMoreBackgroundColorHover: string -priorityNavMoreTextColor: string -priorityNavMoreTextColorHover: string -priorityNavMorePadding: object // {top, right, bottom, left} -priorityNavDropdownStyles: object // Full dropdown styling object -priorityNavTypographyFontFamily: string // Copied from block for preview -priorityNavTypographyFontSize: string -priorityNavTypographyFontWeight: string -priorityNavTypographyFontStyle: string -``` - -## DEFAULT_DROPDOWN_STYLES - -```javascript -{ - backgroundColor: '#ffffff', - borderColor: '#dddddd', - borderWidth: '1px', - borderRadius: '4px', - boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)', - itemSpacing: { top: '0.75rem', right: '1rem', bottom: '0.75rem', left: '1rem' }, - itemHoverBackgroundColor: 'rgba(0, 0, 0, 0.05)', - itemHoverTextColor: 'inherit', - multiLevelIndent: '1.25rem', -} -``` - -## WordPress Components Used - -- `Modal`, `Button`, `TextControl`, `BoxControl` from `@wordpress/components` -- `ToolsPanel`, `ToolsPanelItem` (experimental) -- `BorderBoxControl`, `UnitControl` (experimental) -- `SpacingSizesControl` (experimental) from `@wordpress/block-editor` -- `PanelColorSettings`, `InspectorControls`, `useSetting` from `@wordpress/block-editor` - -## Build Commands - -```bash -npm run start # Development with hot reload -npm run build # Production build -npm run lint:js # Lint JavaScript -npm run lint:css # Lint CSS/SCSS -``` - -## Notes - -- Modal uses two-column grid layout (controls left, preview right) -- Preview uses exact same CSS classes as frontend for accuracy -- Preset values (var:preset|spacing|30) are converted to CSS custom properties -- BorderBoxControl in MenuStylesPanel handles both color and width updates atomically -- Typography settings are mirrored from navigation block for preview accuracy diff --git a/NEW-PLAN.md b/NEW-PLAN.md deleted file mode 100644 index 2ed24fd..0000000 --- a/NEW-PLAN.md +++ /dev/null @@ -1,882 +0,0 @@ -# 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 deleted file mode 100644 index e435d39..0000000 --- a/PLAN.md +++ /dev/null @@ -1,846 +0,0 @@ -# Dropdown Style Customizer - Implementation Plan - -## Overview - -Add a visual dropdown style customizer to the Priority Plus Navigation block, allowing users to customize dropdown appearance through a modal interface with live preview. This will eventually replace the theme.json approach with a more user-friendly, per-block customization system. - -## Goals - -1. **Visual Customization** - Provide intuitive UI for styling the dropdown menu -2. **Live Preview** - Show real-time feedback as users adjust settings -3. **Per-Block Control** - Each Priority+ Navigation block can have unique dropdown styles -4. **Better UX** - Easier than editing theme.json for non-technical users -5. **Foundation for Future** - Sets up infrastructure for preset styles and block variations - -## Design Decisions - -### ✅ Confirmed Approach - -- **Storage**: Block attributes (not global settings) -- **UI Pattern**: Modal (not Popover) -- **Properties**: All 9 existing dropdown properties -- **Defaults**: Pre-populate with plugin defaults on first use -- **theme.json**: Plan to deprecate (no fallback support needed - unreleased product) - -### Why Block Attributes? - -- Matches WordPress block patterns -- Allows per-block customization (header vs footer nav can differ) -- Portable - styles travel with the block -- Version controlled in post revisions -- Future-proof for preset styles and variations - -### Why Modal? - -- Two-column layout needs space (controls + preview) -- Better for 9+ properties with labels/help text -- Feels more like a dedicated "design tool" -- WordPress `Modal` component is well-tested - -## Implementation Phases - -### Phase 1: Foundation & Data Structure - -**Goal**: Set up block attributes and CSS generation logic - -#### 1.1 Add Block Attribute - -**File**: `src/variation/block.js` - -Add new attribute to store dropdown styles: - -```javascript -attributes: { - // ... existing attributes ... - - dropdownStyles: { - type: 'object', - default: { - backgroundColor: '#ffffff', - borderColor: '#dddddd', - borderWidth: '1px', - borderRadius: '4px', - boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)', - itemSpacing: '0.75rem 1.25rem', - itemHoverBackgroundColor: 'rgba(0, 0, 0, 0.05)', - itemHoverTextColor: 'inherit', - multiLevelIndent: '1.25rem' - } - } -} -``` - -#### 1.2 Generate CSS Custom Properties - -**File**: `classes/class-enqueues.php` (or new file `classes/class-dropdown-styles.php`) - -Create function to convert block attributes to inline CSS custom properties: - -```php -public function generate_dropdown_styles( $attributes ) { - if ( empty( $attributes['dropdownStyles'] ) ) { - return ''; - } - - $styles = $attributes['dropdownStyles']; - $css_vars = ''; - - // Map attribute keys to CSS custom property names - $property_map = [ - 'backgroundColor' => '--wp--custom--priority-plus-navigation--dropdown--background-color', - 'borderColor' => '--wp--custom--priority-plus-navigation--dropdown--border-color', - 'borderWidth' => '--wp--custom--priority-plus-navigation--dropdown--border-width', - 'borderRadius' => '--wp--custom--priority-plus-navigation--dropdown--border-radius', - 'boxShadow' => '--wp--custom--priority-plus-navigation--dropdown--box-shadow', - 'itemSpacing' => '--wp--custom--priority-plus-navigation--dropdown--item-spacing', - 'itemHoverBackgroundColor' => '--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color', - 'itemHoverTextColor' => '--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color', - 'multiLevelIndent' => '--wp--custom--priority-plus-navigation--dropdown--multi-level-indent', - ]; - - foreach ( $property_map as $attr_key => $css_var ) { - if ( isset( $styles[ $attr_key ] ) ) { - $css_vars .= "{$css_var}: {$styles[$attr_key]};"; - } - } - - return $css_vars; -} -``` - -#### 1.3 Apply Styles to Block Wrapper - -**File**: `classes/class-enqueues.php` - -Modify `render_block` filter to inject inline styles: - -```php -public function render_block( $block_content, $block ) { - if ( 'core/navigation' !== $block['blockName'] ) { - return $block_content; - } - - // Check if this is Priority+ variation - if ( ! isset( $block['attrs']['className'] ) || - strpos( $block['attrs']['className'], 'is-style-priority-plus-navigation' ) === false ) { - return $block_content; - } - - // Generate dropdown styles - $dropdown_styles = $this->generate_dropdown_styles( $block['attrs'] ); - - if ( ! empty( $dropdown_styles ) ) { - // Inject inline styles into block wrapper - $style_attr = 'style="' . esc_attr( $dropdown_styles ) . '"'; - $block_content = preg_replace( - '/class="([^"]*is-style-priority-plus-navigation[^"]*)"/', - 'class="$1" ' . $style_attr, - $block_content, - 1 - ); - } - - return $block_content; -} -``` - -**Testing**: At this point, manually setting `dropdownStyles` attribute should apply styles. - ---- - -### Phase 2: Modal UI - Basic Structure - -**Goal**: Create modal that opens/closes with basic layout - -#### 2.1 Add "Customize Dropdown" Button - -**File**: `src/variation/controls.js` - -Add button to InspectorControls: - -```javascript -import { ToolsPanel, ToolsPanelItem, Button } from '@wordpress/components'; -import { useState } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; - -function PriorityNavControls( { attributes, setAttributes } ) { - const [isCustomizerOpen, setIsCustomizerOpen] = useState(false); - - return ( - <> - - {/* ... existing More Button controls ... */} - - - - - - - {isCustomizerOpen && ( - setIsCustomizerOpen(false)} - /> - )} - - ); -} -``` - -#### 2.2 Create Modal Component - -**File**: `src/variation/components/dropdown-customizer-modal.js` (new file) - -```javascript -import { Modal } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; -import './dropdown-customizer-modal.scss'; - -export function DropdownCustomizerModal({ attributes, setAttributes, onClose }) { - const { dropdownStyles = {} } = attributes; - - return ( - -
-
- {/* Controls will go here */} -

Controls placeholder

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

Preview placeholder

-
-
- -
- -
-
- ); -} -``` - -#### 2.3 Modal Layout Styles - -**File**: `src/variation/components/dropdown-customizer-modal.scss` (new file) - -```scss -.priority-plus-dropdown-customizer { - .components-modal__content { - padding: 0; - display: flex; - flex-direction: column; - } - - .dropdown-customizer-layout { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 2rem; - padding: 2rem; - flex: 1; - overflow: hidden; - } - - .dropdown-customizer-controls { - overflow-y: auto; - padding-right: 1rem; - } - - .dropdown-customizer-preview { - display: flex; - align-items: center; - justify-content: center; - background: #f0f0f0; - border-radius: 4px; - padding: 2rem; - position: sticky; - top: 0; - } - - .dropdown-customizer-footer { - padding: 1rem 2rem; - border-top: 1px solid #ddd; - display: flex; - justify-content: flex-end; - } -} -``` - -**Testing**: Modal should open/close, show two-column layout. - ---- - -### Phase 3: Control Components - -**Goal**: Add all 9 property controls with proper inputs - -#### 3.1 Control Component Structure - -Each property gets a `ToolsPanelItem` with appropriate control type: - -- **Color properties**: `ColorPalette` or `ColorPicker` (with alpha support) -- **Dimension properties**: `UnitControl` -- **Shadow property**: `TextControl` (complex - could enhance later) - -#### 3.2 Implement All Controls - -**File**: `src/variation/components/dropdown-customizer-modal.js` - -```javascript -import { - ColorPalette, - UnitControl, - TextControl, - __experimentalToolsPanel as ToolsPanel, - __experimentalToolsPanelItem as ToolsPanelItem, -} from '@wordpress/components'; - -export function DropdownCustomizerModal({ attributes, setAttributes, onClose }) { - const { dropdownStyles = {} } = attributes; - - const updateStyle = (key, value) => { - setAttributes({ - dropdownStyles: { - ...dropdownStyles, - [key]: value, - }, - }); - }; - - return ( - -
-
- - - {/* Background Color */} - !!dropdownStyles.backgroundColor} - label={__('Background Color', 'priority-plus-navigation')} - onDeselect={() => updateStyle('backgroundColor', undefined)} - > - updateStyle('backgroundColor', value)} - /> - - - {/* Border Color */} - !!dropdownStyles.borderColor} - label={__('Border Color', 'priority-plus-navigation')} - onDeselect={() => updateStyle('borderColor', undefined)} - > - updateStyle('borderColor', value)} - /> - - - {/* Border Width */} - !!dropdownStyles.borderWidth} - label={__('Border Width', 'priority-plus-navigation')} - onDeselect={() => updateStyle('borderWidth', undefined)} - > - updateStyle('borderWidth', value)} - units={[ - { value: 'px', label: 'px' }, - { value: 'rem', label: 'rem' }, - ]} - /> - - - {/* Border Radius */} - !!dropdownStyles.borderRadius} - label={__('Border Radius', 'priority-plus-navigation')} - onDeselect={() => updateStyle('borderRadius', undefined)} - > - updateStyle('borderRadius', value)} - units={[ - { value: 'px', label: 'px' }, - { value: 'rem', label: 'rem' }, - { value: '%', label: '%' }, - ]} - /> - - - {/* Box Shadow */} - !!dropdownStyles.boxShadow} - label={__('Box Shadow', 'priority-plus-navigation')} - onDeselect={() => updateStyle('boxShadow', undefined)} - help={__('CSS box-shadow value (e.g., "0 4px 12px rgba(0,0,0,0.15)")', 'priority-plus-navigation')} - > - updateStyle('boxShadow', value)} - /> - - - - - - - {/* Item Spacing */} - !!dropdownStyles.itemSpacing} - label={__('Item Spacing', 'priority-plus-navigation')} - onDeselect={() => updateStyle('itemSpacing', undefined)} - help={__('Padding around items (e.g., "0.75rem 1.25rem")', 'priority-plus-navigation')} - > - updateStyle('itemSpacing', value)} - /> - - - {/* Item Hover Background */} - !!dropdownStyles.itemHoverBackgroundColor} - label={__('Hover Background Color', 'priority-plus-navigation')} - onDeselect={() => updateStyle('itemHoverBackgroundColor', undefined)} - > - updateStyle('itemHoverBackgroundColor', value)} - enableAlpha - /> - - - {/* Item Hover Text Color */} - !!dropdownStyles.itemHoverTextColor} - label={__('Hover Text Color', 'priority-plus-navigation')} - onDeselect={() => updateStyle('itemHoverTextColor', undefined)} - > - updateStyle('itemHoverTextColor', value)} - /> - - - {/* Multi-level Indent */} - !!dropdownStyles.multiLevelIndent} - label={__('Multi-level Indent', 'priority-plus-navigation')} - onDeselect={() => updateStyle('multiLevelIndent', undefined)} - help={__('Indentation for nested menu levels', 'priority-plus-navigation')} - > - updateStyle('multiLevelIndent', value)} - units={[ - { value: 'px', label: 'px' }, - { value: 'rem', label: 'rem' }, - { value: 'em', label: 'em' }, - ]} - /> - - - -
- -
- {/* Preview component */} -
-
- - {/* Footer */} -
- ); -} -``` - -**Testing**: Controls should update `dropdownStyles` attribute, verify in browser devtools. - ---- - -### Phase 4: Live Preview Component - -**Goal**: Create visual preview that updates in real-time - -#### 4.1 Preview Component - -**File**: `src/variation/components/dropdown-preview.js` (new file) - -```javascript -import { useMemo } from '@wordpress/element'; -import './dropdown-preview.scss'; - -export function DropdownPreview({ styles }) { - const previewStyles = useMemo(() => { - return { - '--preview-bg': styles.backgroundColor || '#ffffff', - '--preview-border-color': styles.borderColor || '#dddddd', - '--preview-border-width': styles.borderWidth || '1px', - '--preview-border-radius': styles.borderRadius || '4px', - '--preview-box-shadow': styles.boxShadow || '0 4px 12px rgba(0, 0, 0, 0.15)', - '--preview-item-spacing': styles.itemSpacing || '0.75rem 1.25rem', - '--preview-item-hover-bg': styles.itemHoverBackgroundColor || 'rgba(0, 0, 0, 0.05)', - '--preview-item-hover-color': styles.itemHoverTextColor || 'inherit', - '--preview-multi-indent': styles.multiLevelIndent || '1.25rem', - }; - }, [styles]); - - return ( -
-
-
Home
-
About
-
- Services - â–¼ -
-
-
- Design -
-
- Development - â–¼ -
-
-
- WordPress -
-
- React -
-
-
-
Contact
-
-
- ); -} -``` - -#### 4.2 Preview Styles - -**File**: `src/variation/components/dropdown-preview.scss` (new file) - -```scss -.dropdown-preview-wrapper { - width: 100%; - max-width: 300px; -} - -.dropdown-preview-menu { - background: var(--preview-bg); - border-width: var(--preview-border-width); - border-style: solid; - border-color: var(--preview-border-color); - border-radius: var(--preview-border-radius); - box-shadow: var(--preview-box-shadow); - list-style: none; - margin: 0; - padding: 0; -} - -.dropdown-preview-item { - padding: var(--preview-item-spacing); - cursor: pointer; - display: flex; - justify-content: space-between; - align-items: center; - transition: background 0.2s ease, color 0.2s ease; - - &.dropdown-preview-item-hover { - background: var(--preview-item-hover-bg); - color: var(--preview-item-hover-color); - } - - &.dropdown-preview-item-nested { - padding-left: calc(1rem + var(--preview-multi-indent)); - } - - &.dropdown-preview-item-nested-2 { - padding-left: calc(1rem + (var(--preview-multi-indent) * 2)); - } -} - -.dropdown-preview-arrow { - font-size: 0.7em; - opacity: 0.6; -} - -.dropdown-preview-submenu { - background: transparent; -} -``` - -#### 4.3 Integrate Preview into Modal - -**File**: `src/variation/components/dropdown-customizer-modal.js` - -```javascript -import { DropdownPreview } from './dropdown-preview'; - -export function DropdownCustomizerModal({ attributes, setAttributes, onClose }) { - // ... - - return ( - -
-
- {/* Controls */} -
- -
- -
-
- {/* Footer */} -
- ); -} -``` - -**Testing**: Preview should update live as controls change. - ---- - -### Phase 5: Polish & UX Enhancements - -**Goal**: Improve usability and add helpful features - -#### 5.1 Reset to Defaults Button - -Add button to footer that resets all styles to plugin defaults: - -```javascript -
- - - -
-``` - -#### 5.2 Validation & Sanitization - -Add validation for dimension values: - -```javascript -const updateStyle = (key, value) => { - // Sanitize dimension values - if (['borderWidth', 'borderRadius', 'multiLevelIndent'].includes(key)) { - // Ensure value has unit (default to px if numeric) - if (value && /^\d+$/.test(value)) { - value = value + 'px'; - } - } - - setAttributes({ - dropdownStyles: { - ...dropdownStyles, - [key]: value, - }, - }); -}; -``` - -#### 5.3 Improved Color Controls - -Use `ColorPicker` instead of `ColorPalette` for more control: - -```javascript -import { ColorPicker } from '@wordpress/components'; - - updateStyle('backgroundColor', value)} - enableAlpha -/> -``` - -#### 5.4 Help Text & Documentation - -Add helpful descriptions to each control explaining what it does. - ---- - -### Phase 6: Deprecate theme.json (Future Release) - -**Goal**: Clean up theme.json support after customizer ships - -#### 6.1 Update Documentation - -- Update `docs/styling.md` to mark theme.json as deprecated -- Add note that customizer is the preferred method -- Keep theme.json docs for reference but add deprecation notice - -#### 6.2 Migration Notice (Optional) - -Add admin notice for users who have theme.json customizations: - -```php -// Check if theme.json has Priority+ settings -// Show dismissible notice suggesting migration to block customizer -``` - -#### 6.3 Remove SCSS Defaults (Optional - Breaking Change) - -After sufficient adoption period, remove `:root` defaults from `_variables.scss` since they'll be in block attributes. - ---- - -## File Structure - -``` -src/variation/ -├── block.js (updated - add dropdownStyles attribute) -├── controls.js (updated - add Customize button & modal trigger) -├── components/ -│ ├── dropdown-customizer-modal.js (new) -│ ├── dropdown-customizer-modal.scss (new) -│ ├── dropdown-preview.js (new) -│ └── dropdown-preview.scss (new) - -classes/ -├── class-enqueues.php (updated - add inline style generation) -└── class-dropdown-styles.php (optional new - style generation helper) -``` - -## Testing Checklist - -### Phase 1 -- [ ] `dropdownStyles` attribute saves to post_content -- [ ] Manually setting attribute applies styles on frontend -- [ ] Inline styles correctly override SCSS defaults - -### Phase 2 -- [ ] "Customize Dropdown" button appears in Inspector -- [ ] Modal opens/closes correctly -- [ ] Two-column layout displays properly -- [ ] Modal is responsive (test small screens) - -### Phase 3 -- [ ] All 9 controls render in modal -- [ ] Changing values updates attribute -- [ ] Color pickers support alpha channel -- [ ] UnitControl shows proper unit options -- [ ] ToolsPanelItem reset works (X button) - -### Phase 4 -- [ ] Preview renders in modal -- [ ] Preview updates in real-time as controls change -- [ ] Preview shows nested navigation correctly -- [ ] Preview matches actual dropdown appearance - -### Phase 5 -- [ ] "Reset to Defaults" clears all customizations -- [ ] Validation prevents invalid dimension values -- [ ] Help text is clear and helpful -- [ ] Modal is keyboard accessible - -### Phase 6 -- [ ] Documentation updated -- [ ] Deprecation notices added where appropriate - -## Performance Considerations - -1. **Use `useMemo` in preview** - Prevent unnecessary re-renders -2. **Debounce rapid changes** - If typing in TextControl causes lag -3. **Lazy load modal** - Only import modal components when needed -4. **Optimize preview HTML** - Keep preview DOM lightweight - -## Accessibility - -- [ ] Modal is keyboard navigable (Tab/Shift+Tab) -- [ ] Esc key closes modal -- [ ] Color controls have proper labels -- [ ] Preview has appropriate ARIA labels -- [ ] Focus returns to trigger button on close - -## Browser Compatibility - -- All features use WordPress components (pre-tested) -- CSS custom properties have excellent support -- Preview uses modern CSS (Grid, custom properties) - acceptable for editor-only feature - -## Future Enhancements (Post-MVP) - -1. **Preset Styles** - Add quick-select presets ("Minimal", "Bold", "Card") -2. **Copy Styles** - Copy dropdown styles from one block to another -3. **Advanced Shadow Builder** - Visual box-shadow builder instead of text input -4. **Spacing Builder** - Visual padding/margin builder for itemSpacing -5. **Import/Export** - Export styles as JSON, import into other blocks -6. **Block Variations** - Register variations with pre-configured dropdown styles - -## Migration from theme.json - -For users currently using theme.json: - -1. **No automatic migration** - Manual only (simpler, less risky) -2. **Documentation** - Provide clear instructions on moving from theme.json to block attributes -3. **Coexistence** - Block attributes take precedence, theme.json acts as fallback until deprecated - -## Success Criteria - -- [ ] Users can customize all 9 dropdown properties without touching code -- [ ] Live preview accurately represents final appearance -- [ ] Modal UX feels polished and professional -- [ ] Performance is smooth (no lag when adjusting controls) -- [ ] Code is maintainable and well-documented -- [ ] Feature is accessible to keyboard and screen reader users - -## Timeline Estimate - -- **Phase 1**: 3-4 hours (attribute + CSS generation) -- **Phase 2**: 2-3 hours (modal structure) -- **Phase 3**: 4-5 hours (all controls) -- **Phase 4**: 3-4 hours (preview component) -- **Phase 5**: 2-3 hours (polish) -- **Phase 6**: 1-2 hours (documentation) - -**Total**: ~15-21 hours - -## Notes - -- This is an unreleased product - no backward compatibility needed -- Block attributes approach aligns with WordPress best practices -- Modal provides better UX than Popover for this use case -- Live preview is critical for good UX -- Plan to deprecate theme.json once customizer ships diff --git a/README.md b/README.md index 1c9d4ff..edd8c3f 100644 --- a/README.md +++ b/README.md @@ -95,9 +95,10 @@ When Priority Plus Navigation is active, you'll find these control panels in the #### Menu Styles - **Customize Menu**: Opens a modal with a live preview where you can customize: - - **Menu Colors**: Background, item hover background, item hover text color + - **Menu Colors**: Background, item hover background, item text color, item hover text color - **Menu Styles**: Border (with per-side control), border radius, box shadow - - **Menu Item Spacing**: Item padding, submenu indent + - **Submenu Colors**: Background, item hover background, item text color, item hover text color + - **Menu Items**: Item padding, submenu indent, item separator ### Core Navigation Settings @@ -278,6 +279,13 @@ The plugin detects when WordPress's overlay/hamburger menu is active by checking ## Changelog +### 0.5.0 - Item Text Colors & Submenu Styling +- Added item text color controls for menu items (non-hover state) +- Added separate submenu color panel for nested accordion items +- Submenu colors include: background, item hover background, item text color, item hover text color +- Submenu background only applies to first-level submenus to prevent alpha transparency stacking +- Item separator controls for menu item dividers + ### 0.4.0 - Menu Customization & UI Improvements - Added dropdown menu customizer modal with live preview - Full control over menu colors: background, item hover background, item hover text diff --git a/build/priority-plus-nav-editor-rtl.css b/build/priority-plus-nav-editor-rtl.css index 159826f..717402a 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__header{background-color:#fff;border-bottom:1px solid #ddd;padding:24px 32px 18px;position:sticky;z-index:2000}.priority-plus-dropdown-customizer .components-modal__content{margin-top:0;padding:0}.priority-plus-dropdown-customizer .dropdown-customizer-layout{display:grid;gap:2rem;grid-template-columns:1fr 1fr;padding:2rem}.priority-plus-dropdown-customizer .dropdown-customizer-controls>.components-tools-panel{border:1px solid #ddd}.priority-plus-dropdown-customizer .dropdown-customizer-controls>.components-tools-panel+.components-tools-panel{margin-top:1.5rem}.priority-plus-dropdown-customizer .priority-plus-navigation-dropdown.is-open{margin:0 auto;max-width:280px;position:sticky;top:104px}.priority-plus-dropdown-customizer .dropdown-customizer-footer{align-items:center;background:#f9f9f9;border-top:1px solid #ddd;display:flex;justify-content:space-between;padding:1rem 2rem}@media(max-width:896px){.priority-plus-dropdown-customizer .dropdown-customizer-layout{grid-template-columns:1fr}} -:root{--wp--custom--priority-plus-navigation--dropdown--background-color:#fff;--wp--custom--priority-plus-navigation--dropdown--border-color:#ddd;--wp--custom--priority-plus-navigation--dropdown--border-width:1px;--wp--custom--priority-plus-navigation--dropdown--border-radius:4px;--wp--custom--priority-plus-navigation--dropdown--box-shadow:0 4px 12px rgba(0,0,0,.15);--wp--custom--priority-plus-navigation--dropdown--item-spacing:0.75rem 1rem;--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color:rgba(0,0,0,.05);--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color:#191919;--wp--custom--priority-plus-navigation--dropdown--multi-level-indent:1.25rem}.is-style-priority-plus-navigation{--priority-plus-navigation--background:transparent;--priority-plus-navigation--background-hover:transparent;--priority-plus-navigation--color:inherit;--priority-plus-navigation--color-hover:inherit;--priority-plus-navigation--border-color:transparent;--priority-plus-navigation--border-style:solid;--priority-plus-navigation--border-width:0;--priority-plus-navigation--border-radius:0;--priority-plus-navigation--font-family:inherit;--priority-plus-navigation--font-size:inherit;--priority-plus-navigation--font-weight:inherit;--priority-plus-navigation--font-style:inherit;--priority-plus-navigation--padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown,.priority-plus-navigation-dropdown.is-open{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color)!important;border-bottom:var(--wp--custom--priority-plus-navigation--dropdown--border-bottom,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd));border-right:var(--wp--custom--priority-plus-navigation--dropdown--border-left,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd));border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-left:var(--wp--custom--priority-plus-navigation--dropdown--border-right,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd));border-top:var(--wp--custom--priority-plus-navigation--dropdown--border-top,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd));box-shadow:var(--wp--custom--priority-plus-navigation--dropdown--box-shadow);list-style:none;margin:0;min-width:200px;opacity:0;overflow:hidden;padding:0;position:absolute;left:0;top:100%;transform:translateY(-10px);transition:opacity .2s ease,visibility .2s ease,transform .2s ease;visibility:hidden;z-index:1000}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown.is-open,.priority-plus-navigation-dropdown.is-open.is-open{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li,.priority-plus-navigation-dropdown.is-open li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li .priority-plus-navigation-preview-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a,.priority-plus-navigation-dropdown.is-open li .priority-plus-navigation-preview-link,.priority-plus-navigation-dropdown.is-open li a{color:inherit;display:block;font-style:inherit;font-weight:inherit;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-decoration:none;transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li .priority-plus-navigation-preview-link:hover,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a:hover,.priority-plus-navigation-dropdown.is-open li .priority-plus-navigation-preview-link:hover,.priority-plus-navigation-dropdown.is-open li a:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-wrapper,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow .priority-plus-navigation-accordion-arrow,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-arrow .priority-plus-navigation-accordion-arrow{display:inline-block;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;justify-content:space-between;outline:none;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-align:right;transition:background .2s ease,color .2s ease;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-arrow,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-arrow{margin-right:.5rem;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:focus,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:hover,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full:focus,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:focus-visible,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full:focus-visible{outline:2px solid currentcolor;outline-offset:-2px}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full[aria-expanded=true] .priority-plus-navigation-accordion-arrow,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(-90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content{background:transparent;display:none;list-style:none;margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content[aria-hidden=true],.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content[aria-hidden=true]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content.is-open,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content.is-open{display:block!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>a{padding-right:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent))}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a{padding-right:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)*2)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a{padding-right:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)*3)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a{padding-right:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)*4)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-link{flex:1;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link:hover,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-link:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-arrow{background:transparent;border:none;color:inherit;cursor:pointer;flex-shrink:0;font-family:inherit;font-size:inherit;outline:none;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:focus,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:hover,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-arrow:focus,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-arrow:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:focus-visible,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-arrow:focus-visible{outline:2px solid currentcolor;outline-offset:-2px}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow[aria-expanded=true] .priority-plus-navigation-accordion-arrow,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-arrow[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(-90deg)}.editor-styles-wrapper .priority-plus-navigation-editor-wrapper nav{align-items:center;border:2px solid green!important;display:flex;flex-wrap:nowrap;width:100%}.priority-plus-navigation-disable-always-option .components-toggle-group-control-option-base:last-child{cursor:not-allowed;opacity:.4;pointer-events:none;text-decoration:line-through} +: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:#191919;--wp--custom--priority-plus-navigation--dropdown--multi-level-indent:1.25rem;--wp--custom--priority-plus-navigation--dropdown--submenu-background-color:#fff;--wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-background-color:rgba(0,0,0,.05);--wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-text-color:#191919}.is-style-priority-plus-navigation{--priority-plus-navigation--background:transparent;--priority-plus-navigation--background-hover:transparent;--priority-plus-navigation--color:inherit;--priority-plus-navigation--color-hover:inherit;--priority-plus-navigation--border-color:transparent;--priority-plus-navigation--border-style:solid;--priority-plus-navigation--border-width:0;--priority-plus-navigation--border-radius:0;--priority-plus-navigation--font-family:inherit;--priority-plus-navigation--font-size:inherit;--priority-plus-navigation--font-weight:inherit;--priority-plus-navigation--font-style:inherit;--priority-plus-navigation--padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown,.priority-plus-navigation-dropdown.is-open{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color)!important;border-bottom:var(--wp--custom--priority-plus-navigation--dropdown--border-bottom,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd));border-right:var(--wp--custom--priority-plus-navigation--dropdown--border-left,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd));border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-left:var(--wp--custom--priority-plus-navigation--dropdown--border-right,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd));border-top:var(--wp--custom--priority-plus-navigation--dropdown--border-top,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd));box-shadow:var(--wp--custom--priority-plus-navigation--dropdown--box-shadow);list-style:none;margin:0;min-width:200px;opacity:0;overflow:hidden;padding:0;position:absolute;left:0;top:100%;transform:translateY(-10px);transition:opacity .2s ease,visibility .2s ease,transform .2s ease;visibility:hidden;z-index:1000}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown.is-open,.priority-plus-navigation-dropdown.is-open.is-open{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown>li,.priority-plus-navigation-dropdown.is-open>li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown>li:not(:first-child),.priority-plus-navigation-dropdown.is-open>li:not(:first-child){border-top:var(--wp--custom--priority-plus-navigation--dropdown--item-separator-width,0) var(--wp--custom--priority-plus-navigation--dropdown--item-separator-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--item-separator-color,transparent)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li,.priority-plus-navigation-dropdown.is-open li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li .priority-plus-navigation-preview-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a,.priority-plus-navigation-dropdown.is-open li .priority-plus-navigation-preview-link,.priority-plus-navigation-dropdown.is-open li a{color:var(--wp--custom--priority-plus-navigation--dropdown--item-text-color,#191919);display:block;font-style:inherit;font-weight:inherit;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-decoration:none;transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li .priority-plus-navigation-preview-link:hover,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a:hover,.priority-plus-navigation-dropdown.is-open li .priority-plus-navigation-preview-link:hover,.priority-plus-navigation-dropdown.is-open li a:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-wrapper,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow .priority-plus-navigation-accordion-arrow,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-arrow .priority-plus-navigation-accordion-arrow{display:inline-block;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full{align-items:center;background:transparent;border:none;color:var(--wp--custom--priority-plus-navigation--dropdown--item-text-color,#191919);cursor:pointer;display:flex;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;justify-content:space-between;outline:none;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-align:right;transition:background .2s ease,color .2s ease;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-arrow,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-arrow{margin-right:.5rem;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:focus,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:hover,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full:focus,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:focus-visible,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full:focus-visible{outline:2px solid currentcolor;outline-offset:-2px}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full[aria-expanded=true] .priority-plus-navigation-accordion-arrow,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(-90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content{display:none;list-style:none;margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content{background:transparent}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown>li>.priority-plus-navigation-accordion-content,.priority-plus-navigation-dropdown.is-open>li>.priority-plus-navigation-accordion-content{background:var(--wp--custom--priority-plus-navigation--dropdown--submenu-background-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content[aria-hidden=true],.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content[aria-hidden=true]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content.is-open,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content.is-open{display:block!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>.priority-plus-navigation-accordion-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>.priority-plus-navigation-accordion-toggle-arrow,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>.priority-plus-navigation-accordion-link,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>.priority-plus-navigation-accordion-toggle-arrow,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>a{color:var(--wp--custom--priority-plus-navigation--dropdown--submenu-item-text-color,#191919)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full:focus,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full:hover,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>.priority-plus-navigation-accordion-link:hover,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>.priority-plus-navigation-accordion-toggle-arrow:focus,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>.priority-plus-navigation-accordion-toggle-arrow:hover,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link:hover,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>a:hover,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full:focus,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full:hover,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>.priority-plus-navigation-accordion-link:hover,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>.priority-plus-navigation-accordion-toggle-arrow:focus,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>.priority-plus-navigation-accordion-toggle-arrow:hover,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link:hover,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>a:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>a{padding-right:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent))}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a{padding-right:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)*2)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a{padding-right:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)*3)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a{padding-right:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)*4)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-link{color:var(--wp--custom--priority-plus-navigation--dropdown--item-text-color,#191919);flex:1;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link:hover,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-link:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-arrow{background:transparent;border:none;color:var(--wp--custom--priority-plus-navigation--dropdown--item-text-color,#191919);cursor:pointer;flex-shrink:0;font-family:inherit;font-size:inherit;outline:none;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:focus,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:hover,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-arrow:focus,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-arrow:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:focus-visible,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-arrow:focus-visible{outline:2px solid currentcolor;outline-offset:-2px}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow[aria-expanded=true] .priority-plus-navigation-accordion-arrow,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-arrow[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(-90deg)}.editor-styles-wrapper .priority-plus-navigation-editor-wrapper nav{align-items:center;border:2px solid green!important;display:flex;flex-wrap:nowrap;width:100%}.priority-plus-navigation-disable-always-option .components-toggle-group-control-option-base:last-child{cursor:not-allowed;opacity:.4;pointer-events:none;text-decoration:line-through} diff --git a/build/priority-plus-nav-editor.asset.php b/build/priority-plus-nav-editor.asset.php index 5c91f16..f7da64c 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' => 'b51f86f06015cf55b7c8'); + array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-primitives'), 'version' => '37d504951cbec98b7de6'); diff --git a/build/priority-plus-nav-editor.css b/build/priority-plus-nav-editor.css index 776e02c..3b866d5 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__header{background-color:#fff;border-bottom:1px solid #ddd;padding:24px 32px 18px;position:sticky;z-index:2000}.priority-plus-dropdown-customizer .components-modal__content{margin-top:0;padding:0}.priority-plus-dropdown-customizer .dropdown-customizer-layout{display:grid;gap:2rem;grid-template-columns:1fr 1fr;padding:2rem}.priority-plus-dropdown-customizer .dropdown-customizer-controls>.components-tools-panel{border:1px solid #ddd}.priority-plus-dropdown-customizer .dropdown-customizer-controls>.components-tools-panel+.components-tools-panel{margin-top:1.5rem}.priority-plus-dropdown-customizer .priority-plus-navigation-dropdown.is-open{margin:0 auto;max-width:280px;position:sticky;top:104px}.priority-plus-dropdown-customizer .dropdown-customizer-footer{align-items:center;background:#f9f9f9;border-top:1px solid #ddd;display:flex;justify-content:space-between;padding:1rem 2rem}@media(max-width:896px){.priority-plus-dropdown-customizer .dropdown-customizer-layout{grid-template-columns:1fr}} -:root{--wp--custom--priority-plus-navigation--dropdown--background-color:#fff;--wp--custom--priority-plus-navigation--dropdown--border-color:#ddd;--wp--custom--priority-plus-navigation--dropdown--border-width:1px;--wp--custom--priority-plus-navigation--dropdown--border-radius:4px;--wp--custom--priority-plus-navigation--dropdown--box-shadow:0 4px 12px rgba(0,0,0,.15);--wp--custom--priority-plus-navigation--dropdown--item-spacing:0.75rem 1rem;--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color:rgba(0,0,0,.05);--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color:#191919;--wp--custom--priority-plus-navigation--dropdown--multi-level-indent:1.25rem}.is-style-priority-plus-navigation{--priority-plus-navigation--background:transparent;--priority-plus-navigation--background-hover:transparent;--priority-plus-navigation--color:inherit;--priority-plus-navigation--color-hover:inherit;--priority-plus-navigation--border-color:transparent;--priority-plus-navigation--border-style:solid;--priority-plus-navigation--border-width:0;--priority-plus-navigation--border-radius:0;--priority-plus-navigation--font-family:inherit;--priority-plus-navigation--font-size:inherit;--priority-plus-navigation--font-weight:inherit;--priority-plus-navigation--font-style:inherit;--priority-plus-navigation--padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown,.priority-plus-navigation-dropdown.is-open{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color)!important;border-bottom:var(--wp--custom--priority-plus-navigation--dropdown--border-bottom,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd));border-left:var(--wp--custom--priority-plus-navigation--dropdown--border-left,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd));border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-right:var(--wp--custom--priority-plus-navigation--dropdown--border-right,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd));border-top:var(--wp--custom--priority-plus-navigation--dropdown--border-top,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd));box-shadow:var(--wp--custom--priority-plus-navigation--dropdown--box-shadow);list-style:none;margin:0;min-width:200px;opacity:0;overflow:hidden;padding:0;position:absolute;right:0;top:100%;transform:translateY(-10px);transition:opacity .2s ease,visibility .2s ease,transform .2s ease;visibility:hidden;z-index:1000}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown.is-open,.priority-plus-navigation-dropdown.is-open.is-open{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li,.priority-plus-navigation-dropdown.is-open li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li .priority-plus-navigation-preview-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a,.priority-plus-navigation-dropdown.is-open li .priority-plus-navigation-preview-link,.priority-plus-navigation-dropdown.is-open li a{color:inherit;display:block;font-style:inherit;font-weight:inherit;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-decoration:none;transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li .priority-plus-navigation-preview-link:hover,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a:hover,.priority-plus-navigation-dropdown.is-open li .priority-plus-navigation-preview-link:hover,.priority-plus-navigation-dropdown.is-open li a:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-wrapper,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow .priority-plus-navigation-accordion-arrow,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-arrow .priority-plus-navigation-accordion-arrow{display:inline-block;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;justify-content:space-between;outline:none;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-align:left;transition:background .2s ease,color .2s ease;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-arrow,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-arrow{margin-left:.5rem;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:focus,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:hover,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full:focus,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:focus-visible,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full:focus-visible{outline:2px solid currentcolor;outline-offset:-2px}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full[aria-expanded=true] .priority-plus-navigation-accordion-arrow,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content{background:transparent;display:none;list-style:none;margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content[aria-hidden=true],.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content[aria-hidden=true]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content.is-open,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content.is-open{display:block!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>a{padding-left:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent))}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a{padding-left:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)*2)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a{padding-left:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)*3)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a{padding-left:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)*4)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-link{flex:1;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link:hover,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-link:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-arrow{background:transparent;border:none;color:inherit;cursor:pointer;flex-shrink:0;font-family:inherit;font-size:inherit;outline:none;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:focus,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:hover,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-arrow:focus,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-arrow:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:focus-visible,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-arrow:focus-visible{outline:2px solid currentcolor;outline-offset:-2px}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow[aria-expanded=true] .priority-plus-navigation-accordion-arrow,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-arrow[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(90deg)}.editor-styles-wrapper .priority-plus-navigation-editor-wrapper nav{align-items:center;border:2px solid green!important;display:flex;flex-wrap:nowrap;width:100%}.priority-plus-navigation-disable-always-option .components-toggle-group-control-option-base:last-child{cursor:not-allowed;opacity:.4;pointer-events:none;text-decoration:line-through} +: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:#191919;--wp--custom--priority-plus-navigation--dropdown--multi-level-indent:1.25rem;--wp--custom--priority-plus-navigation--dropdown--submenu-background-color:#fff;--wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-background-color:rgba(0,0,0,.05);--wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-text-color:#191919}.is-style-priority-plus-navigation{--priority-plus-navigation--background:transparent;--priority-plus-navigation--background-hover:transparent;--priority-plus-navigation--color:inherit;--priority-plus-navigation--color-hover:inherit;--priority-plus-navigation--border-color:transparent;--priority-plus-navigation--border-style:solid;--priority-plus-navigation--border-width:0;--priority-plus-navigation--border-radius:0;--priority-plus-navigation--font-family:inherit;--priority-plus-navigation--font-size:inherit;--priority-plus-navigation--font-weight:inherit;--priority-plus-navigation--font-style:inherit;--priority-plus-navigation--padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown,.priority-plus-navigation-dropdown.is-open{background:var(--wp--custom--priority-plus-navigation--dropdown--background-color)!important;border-bottom:var(--wp--custom--priority-plus-navigation--dropdown--border-bottom,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd));border-left:var(--wp--custom--priority-plus-navigation--dropdown--border-left,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd));border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-right:var(--wp--custom--priority-plus-navigation--dropdown--border-right,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd));border-top:var(--wp--custom--priority-plus-navigation--dropdown--border-top,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd));box-shadow:var(--wp--custom--priority-plus-navigation--dropdown--box-shadow);list-style:none;margin:0;min-width:200px;opacity:0;overflow:hidden;padding:0;position:absolute;right:0;top:100%;transform:translateY(-10px);transition:opacity .2s ease,visibility .2s ease,transform .2s ease;visibility:hidden;z-index:1000}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown.is-open,.priority-plus-navigation-dropdown.is-open.is-open{opacity:1;transform:translateY(0);visibility:visible}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown>li,.priority-plus-navigation-dropdown.is-open>li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown>li:not(:first-child),.priority-plus-navigation-dropdown.is-open>li:not(:first-child){border-top:var(--wp--custom--priority-plus-navigation--dropdown--item-separator-width,0) var(--wp--custom--priority-plus-navigation--dropdown--item-separator-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--item-separator-color,transparent)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li,.priority-plus-navigation-dropdown.is-open li{margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li .priority-plus-navigation-preview-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a,.priority-plus-navigation-dropdown.is-open li .priority-plus-navigation-preview-link,.priority-plus-navigation-dropdown.is-open li a{color:var(--wp--custom--priority-plus-navigation--dropdown--item-text-color,#191919);display:block;font-style:inherit;font-weight:inherit;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-decoration:none;transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li .priority-plus-navigation-preview-link:hover,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li a:hover,.priority-plus-navigation-dropdown.is-open li .priority-plus-navigation-preview-link:hover,.priority-plus-navigation-dropdown.is-open li a:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-wrapper,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-wrapper{align-items:center;display:flex;justify-content:space-between;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow .priority-plus-navigation-accordion-arrow,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-arrow .priority-plus-navigation-accordion-arrow{display:inline-block;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full{align-items:center;background:transparent;border:none;color:var(--wp--custom--priority-plus-navigation--dropdown--item-text-color,#191919);cursor:pointer;display:flex;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;justify-content:space-between;outline:none;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-align:left;transition:background .2s ease,color .2s ease;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text{flex:1}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-arrow,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-arrow{margin-left:.5rem;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:focus,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:hover,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full:focus,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full:focus-visible,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full:focus-visible{outline:2px solid currentcolor;outline-offset:-2px}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full[aria-expanded=true] .priority-plus-navigation-accordion-arrow,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-full[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(90deg)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content{display:none;list-style:none;margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content{background:transparent}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown>li>.priority-plus-navigation-accordion-content,.priority-plus-navigation-dropdown.is-open>li>.priority-plus-navigation-accordion-content{background:var(--wp--custom--priority-plus-navigation--dropdown--submenu-background-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content[aria-hidden=true],.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content[aria-hidden=true]{display:none!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content.is-open,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content.is-open{display:block!important}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>.priority-plus-navigation-accordion-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>.priority-plus-navigation-accordion-toggle-arrow,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>.priority-plus-navigation-accordion-link,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>.priority-plus-navigation-accordion-toggle-arrow,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>a{color:var(--wp--custom--priority-plus-navigation--dropdown--submenu-item-text-color,#191919)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full:focus,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full:hover,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>.priority-plus-navigation-accordion-link:hover,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>.priority-plus-navigation-accordion-toggle-arrow:focus,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>.priority-plus-navigation-accordion-toggle-arrow:hover,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link:hover,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>a:hover,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full:focus,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full:hover,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>.priority-plus-navigation-accordion-link:hover,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>.priority-plus-navigation-accordion-toggle-arrow:focus,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>.priority-plus-navigation-accordion-toggle-arrow:hover,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link:hover,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>a:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content>li>a{padding-left:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent))}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a{padding-left:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)*2)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a{padding-left:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)*3)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>a,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-preview-link,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content>li>a{padding-left:calc(1rem + var(--wp--custom--priority-plus-navigation--dropdown--multi-level-indent)*4)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-link{color:var(--wp--custom--priority-plus-navigation--dropdown--item-text-color,#191919);flex:1;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-link:hover,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-link:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-arrow{background:transparent;border:none;color:var(--wp--custom--priority-plus-navigation--dropdown--item-text-color,#191919);cursor:pointer;flex-shrink:0;font-family:inherit;font-size:inherit;outline:none;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:focus,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:hover,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-arrow:focus,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-arrow:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:focus-visible,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-arrow:focus-visible{outline:2px solid currentcolor;outline-offset:-2px}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow[aria-expanded=true] .priority-plus-navigation-accordion-arrow,.priority-plus-navigation-dropdown.is-open .priority-plus-navigation-accordion-toggle-arrow[aria-expanded=true] .priority-plus-navigation-accordion-arrow{transform:rotate(90deg)}.editor-styles-wrapper .priority-plus-navigation-editor-wrapper nav{align-items:center;border:2px solid green!important;display:flex;flex-wrap:nowrap;width:100%}.priority-plus-navigation-disable-always-option .components-toggle-group-control-option-base:last-child{cursor:not-allowed;opacity:.4;pointer-events:none;text-decoration:line-through} diff --git a/build/priority-plus-nav-editor.js b/build/priority-plus-nav-editor.js index 7ee538d..4282eff 100644 --- a/build/priority-plus-nav-editor.js +++ b/build/priority-plus-nav-editor.js @@ -1 +1 @@ -(()=>{"use strict";const o=window.wp.i18n,t=window.wp.blocks,e=window.wp.primitives,i=window.ReactJSXRuntime;var r=(0,i.jsx)(e.SVG,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",children:(0,i.jsx)(e.Path,{fillRule:"evenodd",clipRule:"evenodd",d:"M7.404 16.596a6.5 6.5 0 1 0 9.192-9.192 6.5 6.5 0 0 0-9.192 9.192ZM6.344 6.343a8 8 0 1 0 11.313 11.314A8 8 0 0 0 6.343 6.343Zm4.906 9.407v-3h-3v-1.5h3v-3h1.5v3h3v1.5h-3v3h-1.5Z"})});const n=window.wp.hooks,l="#ffffff",s={color:"#dddddd",width:"1px",style:"solid"},a="4px",u="0 4px 12px rgba(0, 0, 0, 0.15)",p={top:"0.75rem",right:"1rem",bottom:"0.75rem",left:"1rem"},y="rgba(0, 0, 0, 0.05)",d="#191919",g="1.25rem";(0,t.registerBlockVariation)("core/navigation",{name:"priority-plus-navigation",title:(0,o.__)("Priority Plus Navigation","priority-plus-navigation"),description:(0,o.__)('A responsive navigation that automatically moves overflow items to a "More" dropdown.',"priority-plus-navigation"),icon:r,scope:["inserter","transform"],attributes:{className:"is-style-priority-plus-navigation",overlayMenu:"never",priorityPlusEnabled:!0,priorityPlusToggleLabel:"More",priorityPlusToggleBackgroundColor:void 0,priorityPlusToggleBackgroundColorHover:void 0,priorityPlusToggleTextColor:void 0,priorityPlusToggleTextColorHover:void 0},isActive:(o,t)=>o.className?.includes(t.className)}),(0,n.addFilter)("blocks.registerBlockType","priority-plus-navigation/extend-core-navigation",(o,t)=>"core/navigation"!==t?o:{...o,attributes:{...o.attributes,priorityPlusEnabled:{type:"boolean",default:!1},priorityPlusToggleLabel:{type:"string",default:"More"},priorityPlusToggleIcon:{type:"string",default:"none"},priorityPlusToggleBackgroundColor:{type:"string"},priorityPlusToggleBackgroundColorHover:{type:"string"},priorityPlusToggleTextColor:{type:"string"},priorityPlusToggleTextColorHover:{type:"string"},priorityPlusTogglePadding:{type:"object",default:void 0},priorityPlusMenuBackgroundColor:{type:"string",default:l},priorityPlusMenuBorder:{type:"object",default:s},priorityPlusMenuBorderRadius:{type:["string","object"],default:a},priorityPlusMenuBoxShadow:{type:"string",default:u},priorityPlusMenuItemPadding:{type:"object",default:p},priorityPlusMenuItemHoverBackground:{type:"string",default:y},priorityPlusMenuItemHoverTextColor:{type:"string",default:d},priorityPlusMenuSubmenuIndent:{type:"string",default:g},priorityPlusTypographyFontFamily:{type:"string"},priorityPlusTypographyFontSize:{type:"string"},priorityPlusTypographyFontWeight:{type:"string"},priorityPlusTypographyFontStyle:{type:"string"}}});const c=window.wp.blockEditor,h=window.wp.components,v=window.wp.compose,m=window.wp.element;function P(o){if(!o||"string"!=typeof o)return o;if(o.startsWith("var:preset|")){const t=o.match(/^var:preset\|([^|]+)\|(.+)$/);if(t)return`var(--wp--preset--${t[1]}--${t[2]})`}return o.startsWith("var("),o}function b(o){if(!o)return a;if("string"==typeof o)return o;if("object"==typeof o){const{topLeft:t,topRight:e,bottomRight:i,bottomLeft:r}=o;return t===e&&e===i&&i===r&&t?t:`${t||"0"} ${e||"0"} ${i||"0"} ${r||"0"}`}return a}function f(o){const t=`${p.top} ${p.right} ${p.bottom} ${p.left}`;if(!o)return t;if("string"==typeof o)return P(o);if("object"==typeof o){if(0===Object.keys(o).length)return t;const{top:e,right:i,bottom:r,left:n}=o;if(!(e&&""!==e&&"0"!==e||i&&""!==i&&"0"!==i||r&&""!==r&&"0"!==r||n&&""!==n&&"0"!==n))return t;const l=P(e)||"0",s=P(i)||"0",a=P(r)||"0",u=P(n)||"0";return l===s&&s===a&&a===u?l:l===a&&s===u?`${l} ${s}`:`${l} ${s} ${a} ${u}`}return t}function x({attributes:t,typographyStyles:e={}}){const{priorityPlusMenuBackgroundColor:r,priorityPlusMenuBorder:n,priorityPlusMenuBorderRadius:c,priorityPlusMenuBoxShadow:h,priorityPlusMenuItemPadding:v,priorityPlusMenuItemHoverBackground:x,priorityPlusMenuItemHoverTextColor:_,priorityPlusMenuSubmenuIndent:w}=t,M=r||l,S=n||s,B=c||a,T=h||u,C=v||p,j=x||y,k=_||d,[I,F]=(0,m.useState)(!0),z=(0,m.useMemo)(()=>{const o=function(o){const t=s,e="--wp--custom--priority-plus-navigation--dropdown--";if(!o)return{[`${e}border-color`]:t.color,[`${e}border-width`]:t.width,[`${e}border-style`]:t.style};if(o.color||o.width||o.style)return{[`${e}border-color`]:o.color||t.color,[`${e}border-width`]:o.width||t.width,[`${e}border-style`]:o.style||t.style};const i=["top","right","bottom","left"];if(i.some(t=>o[t])){const r={};if(i.forEach(i=>{const n=o[i];if(n&&(n.color||n.width||n.style)){const o=n.width||t.width,l=n.style||t.style,s=n.color||t.color;r[`${e}border-${i}`]=`${o} ${l} ${s}`}}),Object.keys(r).length>0)return r}return{[`${e}border-color`]:t.color,[`${e}border-width`]:t.width,[`${e}border-style`]:t.style}}(S),t={"--wp--custom--priority-plus-navigation--dropdown--background-color":M,"--wp--custom--priority-plus-navigation--dropdown--border-radius":b(B),"--wp--custom--priority-plus-navigation--dropdown--box-shadow":T,"--wp--custom--priority-plus-navigation--dropdown--item-spacing":f(C),"--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color":j,"--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color":k,"--wp--custom--priority-plus-navigation--dropdown--multi-level-indent":(i=w,i?"object"==typeof i&&i.left?P(i.left):"string"==typeof i?P(i):g:g),...o};var i;return e.fontFamily&&(t.fontFamily=e.fontFamily),e.fontSize&&(t.fontSize=e.fontSize),e.fontWeight&&(t.fontWeight=e.fontWeight),e.fontStyle&&(t.fontStyle=e.fontStyle),t},[M,S,B,T,C,j,k,w,e]);return(0,i.jsxs)("ul",{className:"priority-plus-navigation-dropdown is-open",style:z,children:[(0,i.jsx)("li",{children:(0,i.jsx)("span",{className:"priority-plus-navigation-preview-link",children:(0,o.__)("Top level item","priority-plus-navigation")})}),(0,i.jsx)("li",{className:"dropdown-preview-hover-demo",children:(0,i.jsx)("span",{className:"priority-plus-navigation-preview-link",children:(0,o.__)("Another top level item","priority-plus-navigation")})}),(0,i.jsxs)("li",{children:[(0,i.jsxs)("button",{type:"button",className:"priority-plus-navigation-accordion-toggle priority-plus-navigation-accordion-toggle-full",onClick:()=>F(!I),"aria-expanded":I,children:[(0,i.jsx)("span",{className:"priority-plus-navigation-accordion-text",children:(0,o.__)("Top level with a submenu","priority-plus-navigation")}),(0,i.jsx)("span",{className:"priority-plus-navigation-accordion-arrow","aria-hidden":"true",children:"›"})]}),I&&(0,i.jsxs)("ul",{className:"priority-plus-navigation-accordion-content is-open",children:[(0,i.jsx)("li",{children:(0,i.jsx)("span",{className:"priority-plus-navigation-preview-link",children:(0,o.__)("Submenu item","priority-plus-navigation")})}),(0,i.jsxs)("li",{children:[(0,i.jsxs)("button",{type:"button",className:"priority-plus-navigation-accordion-toggle priority-plus-navigation-accordion-toggle-full",onClick:()=>F(!I),"aria-expanded":I,children:[(0,i.jsx)("span",{className:"priority-plus-navigation-accordion-text",children:(0,o.__)("Submenu in a submenu","priority-plus-navigation")}),(0,i.jsx)("span",{className:"priority-plus-navigation-accordion-arrow","aria-hidden":"true",children:"›"})]}),I&&(0,i.jsxs)("ul",{className:"priority-plus-navigation-accordion-content is-open",children:[(0,i.jsx)("li",{children:(0,i.jsx)("span",{className:"priority-plus-navigation-preview-link",children:(0,o.__)("Going deeper into the submenu","priority-plus-navigation")})}),(0,i.jsx)("li",{children:(0,i.jsx)("span",{className:"priority-plus-navigation-preview-link",children:(0,o.__)("Woah, submenu inception!","priority-plus-navigation")})})]})]})]})]}),(0,i.jsx)("li",{children:(0,i.jsx)("span",{className:"priority-plus-navigation-preview-link",children:(0,o.__)("Don't forget to test nav item the hover effect!","priority-plus-navigation")})})]})}function _({attributes:t,setAttributes:e}){const{priorityPlusMenuBackgroundColor:r,priorityPlusMenuItemHoverBackground:n,priorityPlusMenuItemHoverTextColor:s}=t;return(0,i.jsx)(c.PanelColorSettings,{title:(0,o.__)("Priority Plus Menu Colors","priority-plus-navigation"),colorSettings:[{label:(0,o.__)("Background Color","priority-plus-navigation"),value:r||l,onChange:o=>e({priorityPlusMenuBackgroundColor:o||l})},{label:(0,o.__)("Item Hover Background","priority-plus-navigation"),value:n||y,onChange:o=>e({priorityPlusMenuItemHoverBackground:o||y}),enableAlpha:!0},{label:(0,o.__)("Item Hover Text Color","priority-plus-navigation"),value:s||d,onChange:o=>e({priorityPlusMenuItemHoverTextColor:o||d})}]})}function w({value:t,onChange:e}){const r=(0,c.useSetting)("shadow.presets.theme"),n=(0,c.useSetting)("shadow.presets.default"),l=(0,m.useMemo)(()=>{const t=r||[],e=n||[],i=[{value:"none",label:(0,o.__)("None","priority-plus-navigation")},{value:u,label:(0,o.__)("Default","priority-plus-navigation")}];return t.length>0&&t.forEach(o=>{i.push({value:o.shadow,label:o.name})}),e.length>0&&e.forEach(o=>{i.push({value:o.shadow,label:o.name})}),i},[r,n]),[s,a]=(0,m.useState)(l);return(0,i.jsx)(h.ComboboxControl,{__next40pxDefaultSize:!0,__nextHasNoMarginBottom:!0,label:(0,o.__)("Shadow","priority-plus-navigation"),value:t,onChange:o=>{e(o)},options:s,onFilterValueChange:o=>{if(!o)return void a(l);const t=o.toLowerCase();a(l.filter(o=>o.label.toLowerCase().includes(t)))}})}function M({attributes:t,setAttributes:e}){const{priorityPlusMenuBorder:r,priorityPlusMenuBorderRadius:n,priorityPlusMenuBoxShadow:l}=t,p=(0,c.useSetting)("color.palette")||[];return(0,i.jsxs)(h.__experimentalToolsPanel,{label:(0,o.__)("Priority Plus Menu Styles","priority-plus-navigation"),resetAll:()=>{e({priorityPlusMenuBorder:s,priorityPlusMenuBorderRadius:a,priorityPlusMenuBoxShadow:u})},children:[(0,i.jsx)(h.__experimentalToolsPanelItem,{hasValue:()=>{return!!(o=r)&&(!!(o.color||o.width||o.style)||["top","right","bottom","left"].some(t=>{const e=o[t];return e&&(e.color||e.width||e.style)}));var o},label:(0,o.__)("Menu Border","priority-plus-navigation"),onDeselect:()=>e({priorityPlusMenuBorder:s}),isShownByDefault:!0,children:(0,i.jsx)(h.__experimentalBorderBoxControl,{label:(0,o.__)("Border","priority-plus-navigation"),colors:p,value:r,onChange:o=>e({priorityPlusMenuBorder:o}),enableAlpha:!0,enableStyle:!0,size:"__unstable-large"})}),(0,i.jsx)(h.__experimentalToolsPanelItem,{hasValue:()=>{return!!(o=n)&&("string"==typeof o?""!==o:"object"==typeof o&&Object.values(o).some(o=>o&&""!==o));var o},label:(0,o.__)("Border Radius","priority-plus-navigation"),onDeselect:()=>e({priorityPlusMenuBorderRadius:a}),isShownByDefault:!0,children:(0,i.jsx)(c.__experimentalBorderRadiusControl,{label:(0,o.__)("Border Radius","priority-plus-navigation"),values:n,onChange:o=>e({priorityPlusMenuBorderRadius:o})})}),(0,i.jsx)(h.__experimentalToolsPanelItem,{hasValue:()=>!!l,label:(0,o.__)("Shadow","priority-plus-navigation"),onDeselect:()=>e({priorityPlusMenuBoxShadow:u}),isShownByDefault:!0,children:(0,i.jsx)(w,{value:l||u,onChange:o=>e({priorityPlusMenuBoxShadow:o})})})]})}function S({attributes:t,setAttributes:e,spacingSizes:r}){const{priorityPlusMenuItemPadding:n,priorityPlusMenuSubmenuIndent:l}=t;return(0,i.jsxs)(h.__experimentalToolsPanel,{label:(0,o.__)("Priority Menu Item Styles","priority-plus-navigation"),resetAll:()=>{e({priorityPlusMenuItemPadding:p,priorityPlusMenuSubmenuIndent:g})},children:[(0,i.jsx)(h.__experimentalToolsPanelItem,{hasValue:()=>{return!!(o=n)&&("object"==typeof o?Object.values(o).some(o=>o&&""!==o):!!o);var o},label:(0,o.__)("Menu Item Padding","priority-plus-navigation"),onDeselect:()=>e({priorityPlusMenuItemPadding:p}),isShownByDefault:!0,children:r.length>0?(0,i.jsx)(c.__experimentalSpacingSizesControl,{values:n,onChange:o=>e({priorityPlusMenuItemPadding:o}),label:(0,o.__)("Menu Item Padding","priority-plus-navigation"),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"]}):(0,i.jsx)(h.BoxControl,{label:(0,o.__)("Menu Item Padding","priority-plus-navigation"),values:n,onChange:o=>e({priorityPlusMenuItemPadding:o}),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"],allowReset:!0})}),(0,i.jsx)(h.__experimentalToolsPanelItem,{hasValue:()=>{return!!(o=l)&&("object"==typeof o?o.left&&""!==o.left:!!o);var o},label:(0,o.__)("Submenu Indent","priority-plus-navigation"),onDeselect:()=>e({priorityPlusMenuSubmenuIndent:{left:g}}),isShownByDefault:!0,children:(0,i.jsx)(c.__experimentalSpacingSizesControl,{label:(0,o.__)("Submenu Indent","priority-plus-navigation"),values:(s=l,s?"object"==typeof s&&s.left?s:"string"==typeof s?{left:s}:{left:g}:{left:g}),onChange:o=>e({priorityPlusMenuSubmenuIndent:o}),sides:["left"]})})]});var s}function B({attributes:t,setAttributes:e,onClose:r}){const n=(0,c.useSetting)("typography.fontSizes")||[],v=(0,c.useSetting)("typography.fontFamilies")||[],m={};if(t.priorityPlusTypographyFontFamily){let o=[];v&&"object"==typeof v&&!Array.isArray(v)?(v.theme&&Array.isArray(v.theme)&&(o=o.concat(v.theme)),v.custom&&Array.isArray(v.custom)&&(o=o.concat(v.custom))):Array.isArray(v)&&v.forEach(t=>{t.fontFamilies&&Array.isArray(t.fontFamilies)?o=o.concat(t.fontFamilies):t.slug&&t.fontFamily&&o.push(t)});const e=o.find(o=>o.slug===t.priorityPlusTypographyFontFamily);e&&(m.fontFamily=e.fontFamily)}if(t.priorityPlusTypographyFontSize){let o=[];Array.isArray(n)&&n.forEach(t=>{t.sizes&&Array.isArray(t.sizes)?o=o.concat(t.sizes):t.slug&&t.size&&o.push(t)});const e=o.find(o=>o.slug===t.priorityPlusTypographyFontSize);e&&(m.fontSize=e.size)}t.priorityPlusTypographyFontWeight&&(m.fontWeight=t.priorityPlusTypographyFontWeight),t.priorityPlusTypographyFontStyle&&(m.fontStyle=t.priorityPlusTypographyFontStyle);const P=(0,c.useSetting)("spacing.spacingSizes")||[];return(0,i.jsxs)(h.Modal,{title:(0,o.__)("Customize Priority Plus Menu","priority-plus-navigation"),onRequestClose:r,className:"priority-plus-dropdown-customizer",size:"large",isDismissible:!0,children:[(0,i.jsxs)("div",{className:"dropdown-customizer-layout",children:[(0,i.jsxs)("div",{className:"dropdown-customizer-controls",children:[(0,i.jsx)(_,{attributes:t,setAttributes:e}),(0,i.jsx)(M,{attributes:t,setAttributes:e}),(0,i.jsx)(S,{attributes:t,setAttributes:e,spacingSizes:P})]}),(0,i.jsx)("div",{className:"dropdown-customizer-preview",children:(0,i.jsx)(x,{attributes:t,typographyStyles:m})})]}),(0,i.jsxs)("div",{className:"dropdown-customizer-footer",children:[(0,i.jsx)(h.Button,{variant:"tertiary",isDestructive:!0,onClick:()=>{e({priorityPlusMenuBackgroundColor:l,priorityPlusMenuBorder:s,priorityPlusMenuBorderRadius:a,priorityPlusMenuBoxShadow:u,priorityPlusMenuItemPadding:p,priorityPlusMenuItemHoverBackground:y,priorityPlusMenuItemHoverTextColor:d,priorityPlusMenuSubmenuIndent:{left:g}})},children:(0,o.__)("Reset to Defaults","priority-plus-navigation")}),(0,i.jsx)(h.Button,{variant:"primary",onClick:r,children:(0,o.__)("Done","priority-plus-navigation")})]})]})}const T=(0,v.createHigherOrderComponent)(o=>t=>{const{name:e,attributes:r}=t;if("core/navigation"!==e)return(0,i.jsx)(o,{...t});const n=(r.className||"").includes("is-style-priority-plus-navigation")||!0===r.priorityPlusEnabled;return(0,m.useEffect)(()=>{if(!n)return;const o=document.querySelector(".block-editor-block-inspector");if(!o)return;const t=o.querySelector('.components-toggle-group-control-option-base[data-value="always"]');t&&(t.style.opacity="0.4",t.style.pointerEvents="none",t.style.textDecoration="line-through",t.style.cursor="not-allowed")},[n,r.overlayMenu]),(0,i.jsx)(o,{...t})},"addDisableAlwaysOption"),C=(0,v.createHigherOrderComponent)(t=>e=>{const{name:r,attributes:n,setAttributes:v}=e;if("core/navigation"!==r)return(0,i.jsx)(t,{...e});const P=(n.className||"").includes("is-style-priority-plus-navigation")||!0===n.priorityPlusEnabled;if(!P)return(0,i.jsx)(t,{...e});const{priorityPlusToggleLabel:b,priorityPlusToggleBackgroundColor:f,priorityPlusToggleBackgroundColorHover:x,priorityPlusToggleTextColor:_,priorityPlusToggleTextColorHover:w,priorityPlusTogglePadding:M,overlayMenu:S}=n,[T,C]=(0,m.useState)(!1);(0,m.useEffect)(()=>{P&&"always"===S&&v({overlayMenu:"mobile"})},[P,S,v]),(0,m.useEffect)(()=>{if(!P)return;const o=n.style?.typography?.fontWeight,t=n.style?.typography?.fontStyle;n.fontSize===n.priorityPlusTypographyFontSize&&n.fontFamily===n.priorityPlusTypographyFontFamily&&o===n.priorityPlusTypographyFontWeight&&t===n.priorityPlusTypographyFontStyle||v({priorityPlusTypographyFontFamily:n.fontFamily,priorityPlusTypographyFontSize:n.fontSize,priorityPlusTypographyFontWeight:o,priorityPlusTypographyFontStyle:t})},[P,n.fontSize,n.fontFamily,n.style?.typography?.fontWeight,n.style?.typography?.fontStyle,n.priorityPlusTypographyFontFamily,n.priorityPlusTypographyFontSize,n.priorityPlusTypographyFontWeight,n.priorityPlusTypographyFontStyle,v]);const j=(0,c.useSetting)("spacing.spacingSizes")||[];return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t,{...e}),(0,i.jsx)(c.InspectorControls,{group:"settings",children:(0,i.jsx)(h.Notice,{status:"info",isDismissible:!1,children:(0,o.__)('Priority Plus Navigation is not compatible with "Always" overlay menu. The overlay menu is set to "Mobile" to allow Priority+ to work on desktop.',"priority-plus-navigation")})}),(0,i.jsxs)(c.InspectorControls,{group:"styles",children:[(0,i.jsxs)(h.__experimentalToolsPanel,{label:(0,o.__)("Priority Plus Settings","priority-plus-navigation"),resetAll:()=>v({priorityPlusToggleLabel:"More",priorityPlusMenuBackgroundColor:l,priorityPlusMenuBorder:s,priorityPlusMenuBorderRadius:a,priorityPlusMenuBoxShadow:u,priorityPlusMenuItemPadding:p,priorityPlusMenuItemHoverBackground:y,priorityPlusMenuItemHoverTextColor:d,priorityPlusMenuSubmenuIndent:{left:g}}),children:[(0,i.jsx)(h.__experimentalToolsPanelItem,{hasValue:()=>!!b,label:(0,o.__)("Button Label","priority-plus-navigation"),onDeselect:()=>v({priorityPlusToggleLabel:"More"}),isShownByDefault:!0,children:(0,i.jsx)(h.TextControl,{label:(0,o.__)("Button Label","priority-plus-navigation"),value:b,onChange:o=>v({priorityPlusToggleLabel:o}),help:(0,o.__)("Text displayed on the toggle button","priority-plus-navigation")})}),(0,i.jsx)(h.__experimentalToolsPanelItem,{hasValue:()=>{const{priorityPlusMenuBackgroundColor:o,priorityPlusMenuBorder:t,priorityPlusMenuBorderRadius:e,priorityPlusMenuBoxShadow:i,priorityPlusMenuItemPadding:r,priorityPlusMenuItemHoverBackground:l,priorityPlusMenuItemHoverTextColor:s,priorityPlusMenuSubmenuIndent:a}=n;return!!(o||t||e||i||r||l||s||a)},label:(0,o.__)("Customize DropdownMenu","priority-plus-navigation"),onDeselect:()=>v({priorityPlusMenuBackgroundColor:l,priorityPlusMenuBorder:s,priorityPlusMenuBorderRadius:a,priorityPlusMenuBoxShadow:u,priorityPlusMenuItemPadding:p,priorityPlusMenuItemHoverBackground:y,priorityPlusMenuItemHoverTextColor:d,priorityPlusMenuSubmenuIndent:{left:g}}),isShownByDefault:!0,children:(0,i.jsx)(h.Button,{variant:"primary",onClick:()=>C(!0),children:(0,o.__)("Customize Dropdown Menu","priority-plus-navigation")})})]}),(0,i.jsx)(c.PanelColorSettings,{title:(0,o.__)("Priority Plus Button Colors","priority-plus-navigation"),colorSettings:[{label:(0,o.__)("Text Color","priority-plus-navigation"),value:_,onChange:o=>v({priorityPlusToggleTextColor:o||void 0}),clearable:!0},{label:(0,o.__)("Text Hover Color","priority-plus-navigation"),value:w,onChange:o=>v({priorityPlusToggleTextColorHover:o||void 0}),clearable:!0},{label:(0,o.__)("Background Color","priority-plus-navigation"),value:f,onChange:o=>v({priorityPlusToggleBackgroundColor:o||void 0}),clearable:!0},{label:(0,o.__)("Background Hover Color","priority-plus-navigation"),value:x,onChange:o=>v({priorityPlusToggleBackgroundColorHover:o||void 0}),clearable:!0,enableAlpha:!0}]}),(0,i.jsx)(h.__experimentalToolsPanel,{label:(0,o.__)("Priority Plus Button Spacing","priority-plus-navigation"),resetAll:()=>v({priorityPlusTogglePadding:void 0}),children:(0,i.jsx)(h.__experimentalToolsPanelItem,{hasValue:()=>!!M&&Object.keys(M).length>0,label:(0,o.__)("Button Padding","priority-plus-navigation"),onDeselect:()=>v({priorityPlusTogglePadding:void 0}),isShownByDefault:!0,children:j.length>0?(0,i.jsx)(c.__experimentalSpacingSizesControl,{values:M,onChange:o=>v({priorityPlusTogglePadding:o}),label:(0,o.__)("Button Padding","priority-plus-navigation"),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"]}):(0,i.jsx)(h.BoxControl,{label:(0,o.__)("Button Padding","priority-plus-navigation"),values:M,onChange:o=>v({priorityPlusTogglePadding:o}),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"],allowReset:!0})})})]}),T&&(0,i.jsx)(B,{attributes:n,setAttributes:v,onClose:()=>C(!1)})]})},"withPriorityPlusControls");(0,n.addFilter)("editor.BlockEdit","priority-plus-navigation/add-disable-always-option",T,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,t=window.wp.blocks,e=window.wp.primitives,r=window.ReactJSXRuntime;var i=(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 n=window.wp.hooks,l="#ffffff",s={color:"#dddddd",width:"1px",style:"solid"},a="4px",u="default",p={top:"0.75rem",right:"1rem",bottom:"0.75rem",left:"1rem"},y="rgba(0, 0, 0, 0.05)",d="#191919",g="#191919",c="1.25rem",m={color:"#f0f0f0",width:"1px",style:"solid"},v="#ffffff",h="rgba(0, 0, 0, 0.05)",P="#191919",b="#191919";(0,t.registerBlockVariation)("core/navigation",{name:"priority-plus-navigation",title:(0,o.__)("Priority Plus Navigation","priority-plus-navigation"),description:(0,o.__)('A responsive navigation that automatically moves overflow items to a "More" dropdown.',"priority-plus-navigation"),icon:i,scope:["inserter","transform"],attributes:{className:"is-style-priority-plus-navigation",overlayMenu:"never",priorityPlusEnabled:!0,priorityPlusToggleLabel:"More",priorityPlusToggleBackgroundColor:void 0,priorityPlusToggleBackgroundColorHover:void 0,priorityPlusToggleTextColor:void 0,priorityPlusToggleTextColorHover:void 0},isActive:(o,t)=>o.className?.includes(t.className)}),(0,n.addFilter)("blocks.registerBlockType","priority-plus-navigation/extend-core-navigation",(o,t)=>"core/navigation"!==t?o:{...o,attributes:{...o.attributes,priorityPlusEnabled:{type:"boolean",default:!1},priorityPlusToggleLabel:{type:"string",default:"More"},priorityPlusToggleIcon:{type:"string",default:"none"},priorityPlusToggleBackgroundColor:{type:"string"},priorityPlusToggleBackgroundColorHover:{type:"string"},priorityPlusToggleTextColor:{type:"string"},priorityPlusToggleTextColorHover:{type:"string"},priorityPlusTogglePadding:{type:"object",default:void 0},priorityPlusMenuBackgroundColor:{type:"string",default:l},priorityPlusMenuBorder:{type:"object",default:s},priorityPlusMenuBorderRadius:{type:["string","object"],default:a},priorityPlusMenuBoxShadow:{type:"string",default:u},priorityPlusMenuItemPadding:{type:"object",default:p},priorityPlusMenuItemHoverBackground:{type:"string",default:y},priorityPlusMenuItemTextColor:{type:"string",default:d},priorityPlusMenuItemHoverTextColor:{type:"string",default:g},priorityPlusMenuSubmenuIndent:{type:"string",default:c},priorityPlusMenuItemSeparator:{type:"object",default:m},priorityPlusSubmenuBackgroundColor:{type:"string",default:v},priorityPlusSubmenuItemHoverBackground:{type:"string",default:h},priorityPlusSubmenuItemTextColor:{type:"string",default:P},priorityPlusSubmenuItemHoverTextColor:{type:"string",default:b},priorityPlusTypographyFontFamily:{type:"string"},priorityPlusTypographyFontSize:{type:"string"},priorityPlusTypographyFontWeight:{type:"string"},priorityPlusTypographyFontStyle:{type:"string"}}});const f=window.wp.blockEditor,x=window.wp.components,_=window.wp.compose,w=window.wp.element;function S(o){if(!o||"string"!=typeof o)return o;if(o.startsWith("var:preset|")){const t=o.match(/^var:preset\|([^|]+)\|(.+)$/);if(t)return`var(--wp--preset--${t[1]}--${t[2]})`}return o.startsWith("var("),o}function C(o){if(!o)return a;if("string"==typeof o)return o;if("object"==typeof o){const{topLeft:t,topRight:e,bottomRight:r,bottomLeft:i}=o;return t===e&&e===r&&r===i&&t?t:`${t||"0"} ${e||"0"} ${r||"0"} ${i||"0"}`}return a}function M(o){const t=`${p.top} ${p.right} ${p.bottom} ${p.left}`;if(!o)return t;if("string"==typeof o)return S(o);if("object"==typeof o){if(0===Object.keys(o).length)return t;const{top:e,right:r,bottom:i,left:n}=o;if(!(e&&""!==e&&"0"!==e||r&&""!==r&&"0"!==r||i&&""!==i&&"0"!==i||n&&""!==n&&"0"!==n))return t;const l=S(e)||"0",s=S(r)||"0",a=S(i)||"0",u=S(n)||"0";return l===s&&s===a&&a===u?l:l===a&&s===u?`${l} ${s}`:`${l} ${s} ${a} ${u}`}return t}function T({attributes:t,typographyStyles:e={}}){const{priorityPlusMenuBackgroundColor:i,priorityPlusMenuBorder:n,priorityPlusMenuBorderRadius:f,priorityPlusMenuBoxShadow:x,priorityPlusMenuItemPadding:_,priorityPlusMenuItemHoverBackground:T,priorityPlusMenuItemTextColor:B,priorityPlusMenuItemHoverTextColor:I,priorityPlusMenuSubmenuIndent:j,priorityPlusMenuItemSeparator:k,priorityPlusSubmenuBackgroundColor:F,priorityPlusSubmenuItemHoverBackground:H,priorityPlusSubmenuItemTextColor:A,priorityPlusSubmenuItemHoverTextColor:z}=t,D=i||l,N=n||s,$=f||a,R=x||u,E=_||p,W=T||y,L=B||d,V=I||g,O=k||m,q=F||v,Z=H||h,G=A||P,J=z||b,[X,K]=(0,w.useState)(!0),Q=(0,w.useMemo)(()=>{const o=function(o){const t=s,e="--wp--custom--priority-plus-navigation--dropdown--";if(!o)return{[`${e}border-color`]:t.color,[`${e}border-width`]:t.width,[`${e}border-style`]:t.style};if(o.color||o.width||o.style)return{[`${e}border-color`]:o.color||t.color,[`${e}border-width`]:o.width||t.width,[`${e}border-style`]:o.style||t.style};const r=["top","right","bottom","left"];if(r.some(t=>o[t])){const i={};if(r.forEach(r=>{const n=o[r];if(n&&(n.color||n.width||n.style)){const o=n.width||t.width,l=n.style||t.style,s=n.color||t.color;i[`${e}border-${r}`]=`${o} ${l} ${s}`}}),Object.keys(i).length>0)return i}return{[`${e}border-color`]:t.color,[`${e}border-width`]:t.width,[`${e}border-style`]:t.style}}(N),t={"--wp--custom--priority-plus-navigation--dropdown--background-color":D,"--wp--custom--priority-plus-navigation--dropdown--border-radius":C($),"--wp--custom--priority-plus-navigation--dropdown--box-shadow":R,"--wp--custom--priority-plus-navigation--dropdown--item-spacing":M(E),"--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color":W,"--wp--custom--priority-plus-navigation--dropdown--item-text-color":L,"--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color":V,"--wp--custom--priority-plus-navigation--dropdown--multi-level-indent":(r=j,r?"object"==typeof r&&r.left?S(r.left):"string"==typeof r?S(r):c:c),"--wp--custom--priority-plus-navigation--dropdown--item-separator-color":O?.color||"transparent","--wp--custom--priority-plus-navigation--dropdown--item-separator-width":O?.width||"0","--wp--custom--priority-plus-navigation--dropdown--item-separator-style":O?.style||"solid","--wp--custom--priority-plus-navigation--dropdown--submenu-background-color":q,"--wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-background-color":Z,"--wp--custom--priority-plus-navigation--dropdown--submenu-item-text-color":G,"--wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-text-color":J,...o};var r;return e.fontFamily&&(t.fontFamily=e.fontFamily),e.fontSize&&(t.fontSize=e.fontSize),e.fontWeight&&(t.fontWeight=e.fontWeight),e.fontStyle&&(t.fontStyle=e.fontStyle),t},[D,N,$,R,E,W,L,V,j,O,q,Z,G,J,e]);return(0,r.jsxs)("ul",{className:"priority-plus-navigation-dropdown is-open",style:Q,children:[(0,r.jsx)("li",{children:(0,r.jsx)("span",{className:"priority-plus-navigation-preview-link",children:(0,o.__)("Top level item","priority-plus-navigation")})}),(0,r.jsx)("li",{className:"dropdown-preview-hover-demo",children:(0,r.jsx)("span",{className:"priority-plus-navigation-preview-link",children:(0,o.__)("Another top level item","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:()=>K(!X),"aria-expanded":X,children:[(0,r.jsx)("span",{className:"priority-plus-navigation-accordion-text",children:(0,o.__)("Top level with a submenu","priority-plus-navigation")}),(0,r.jsx)("span",{className:"priority-plus-navigation-accordion-arrow","aria-hidden":"true",children:"›"})]}),X&&(0,r.jsxs)("ul",{className:"priority-plus-navigation-accordion-content is-open",children:[(0,r.jsx)("li",{children:(0,r.jsx)("span",{className:"priority-plus-navigation-preview-link",children:(0,o.__)("Submenu item","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:()=>K(!X),"aria-expanded":X,children:[(0,r.jsx)("span",{className:"priority-plus-navigation-accordion-text",children:(0,o.__)("Submenu in a submenu","priority-plus-navigation")}),(0,r.jsx)("span",{className:"priority-plus-navigation-accordion-arrow","aria-hidden":"true",children:"›"})]}),X&&(0,r.jsxs)("ul",{className:"priority-plus-navigation-accordion-content is-open",children:[(0,r.jsx)("li",{children:(0,r.jsx)("span",{className:"priority-plus-navigation-preview-link",children:(0,o.__)("Going deeper into the submenu","priority-plus-navigation")})}),(0,r.jsx)("li",{children:(0,r.jsx)("span",{className:"priority-plus-navigation-preview-link",children:(0,o.__)("Woah, submenu inception!","priority-plus-navigation")})})]})]})]})]}),(0,r.jsx)("li",{children:(0,r.jsx)("span",{className:"priority-plus-navigation-preview-link",children:(0,o.__)("Don't forget to test nav item the hover effect!","priority-plus-navigation")})})]})}function B({attributes:t,setAttributes:e}){const{priorityPlusMenuBackgroundColor:i,priorityPlusMenuItemHoverBackground:n,priorityPlusMenuItemTextColor:s,priorityPlusMenuItemHoverTextColor:a}=t;return(0,r.jsx)(f.PanelColorSettings,{title:(0,o.__)("Priority Plus Menu Colors","priority-plus-navigation"),colorSettings:[{label:(0,o.__)("Background Color","priority-plus-navigation"),value:i||l,onChange:o=>e({priorityPlusMenuBackgroundColor:o||l}),enableAlpha:!0},{label:(0,o.__)("Item Hover Background","priority-plus-navigation"),value:n||y,onChange:o=>e({priorityPlusMenuItemHoverBackground:o||y}),enableAlpha:!0},{label:(0,o.__)("Item Text Color","priority-plus-navigation"),value:s||d,onChange:o=>e({priorityPlusMenuItemTextColor:o||d}),enableAlpha:!0},{label:(0,o.__)("Item Hover Text Color","priority-plus-navigation"),value:a||g,onChange:o=>e({priorityPlusMenuItemHoverTextColor:o||g}),enableAlpha:!0}]})}function I({attributes:t,setAttributes:e}){const{priorityPlusSubmenuBackgroundColor:i,priorityPlusSubmenuItemHoverBackground:n,priorityPlusSubmenuItemTextColor:l,priorityPlusSubmenuItemHoverTextColor:s}=t;return(0,r.jsx)(f.PanelColorSettings,{title:(0,o.__)("Priority Plus Submenu Colors","priority-plus-navigation"),colorSettings:[{label:(0,o.__)("Background Color","priority-plus-navigation"),value:i||v,onChange:o=>e({priorityPlusSubmenuBackgroundColor:o||v}),enableAlpha:!0},{label:(0,o.__)("Item Hover Background","priority-plus-navigation"),value:n||h,onChange:o=>e({priorityPlusSubmenuItemHoverBackground:o||h}),enableAlpha:!0},{label:(0,o.__)("Item Text Color","priority-plus-navigation"),value:l||P,onChange:o=>e({priorityPlusSubmenuItemTextColor:o||P}),enableAlpha:!0},{label:(0,o.__)("Item Hover Text Color","priority-plus-navigation"),value:s||b,onChange:o=>e({priorityPlusSubmenuItemHoverTextColor:o||b}),enableAlpha:!0}]})}function j({value:t,onChange:e}){const i=(0,f.useSetting)("shadow.presets.theme"),n=(0,f.useSetting)("shadow.presets.default"),l=(0,w.useMemo)(()=>{const t=i||[],e=n||[],r=[{value:"none",label:(0,o.__)("None","priority-plus-navigation")},{value:u,label:(0,o.__)("Default","priority-plus-navigation")}];return t.length>0&&t.forEach(o=>{r.push({value:o.shadow,label:o.name})}),e.length>0&&e.forEach(o=>{r.push({value:o.shadow,label:o.name})}),r},[i,n]),[s,a]=(0,w.useState)(l);return(0,r.jsx)(x.ComboboxControl,{__next40pxDefaultSize:!0,__nextHasNoMarginBottom:!0,label:(0,o.__)("Shadow","priority-plus-navigation"),value:t,onChange:o=>{e(o)},options:s,onFilterValueChange:o=>{if(!o)return void a(l);const t=o.toLowerCase();a(l.filter(o=>o.label.toLowerCase().includes(t)))}})}function k({attributes:t,setAttributes:e}){const{priorityPlusMenuBorder:i,priorityPlusMenuBorderRadius:n,priorityPlusMenuBoxShadow:l}=t,p=(0,f.useSetting)("color.palette")||[];return(0,r.jsxs)(x.__experimentalToolsPanel,{label:(0,o.__)("Priority Plus Menu Styles","priority-plus-navigation"),resetAll:()=>{e({priorityPlusMenuBorder:s,priorityPlusMenuBorderRadius:a,priorityPlusMenuBoxShadow:u})},children:[(0,r.jsx)(x.__experimentalToolsPanelItem,{hasValue:()=>{return!!(o=i)&&(!!(o.color||o.width||o.style)||["top","right","bottom","left"].some(t=>{const e=o[t];return e&&(e.color||e.width||e.style)}));var o},label:(0,o.__)("Menu Border","priority-plus-navigation"),onDeselect:()=>e({priorityPlusMenuBorder:s}),isShownByDefault:!0,children:(0,r.jsx)(x.__experimentalBorderBoxControl,{label:(0,o.__)("Border","priority-plus-navigation"),colors:p,value:i,onChange:o=>e({priorityPlusMenuBorder:o}),enableAlpha:!0,enableStyle:!0,size:"__unstable-large"})}),(0,r.jsx)(x.__experimentalToolsPanelItem,{hasValue:()=>{return!!(o=n)&&("string"==typeof o?""!==o:"object"==typeof o&&Object.values(o).some(o=>o&&""!==o));var o},label:(0,o.__)("Border Radius","priority-plus-navigation"),onDeselect:()=>e({priorityPlusMenuBorderRadius:a}),isShownByDefault:!0,children:(0,r.jsx)(f.__experimentalBorderRadiusControl,{label:(0,o.__)("Border Radius","priority-plus-navigation"),values:n,onChange:o=>e({priorityPlusMenuBorderRadius:o})})}),(0,r.jsx)(x.__experimentalToolsPanelItem,{hasValue:()=>!!l,label:(0,o.__)("Shadow","priority-plus-navigation"),onDeselect:()=>e({priorityPlusMenuBoxShadow:u}),isShownByDefault:!0,children:(0,r.jsx)(j,{value:l||u,onChange:o=>e({priorityPlusMenuBoxShadow:o})})})]})}function F({attributes:t,setAttributes:e,spacingSizes:i}){const{priorityPlusMenuItemPadding:n,priorityPlusMenuSubmenuIndent:l,priorityPlusMenuItemSeparator:s}=t,a=(0,f.useSetting)("color.palette")||[];return(0,r.jsxs)(x.__experimentalToolsPanel,{label:(0,o.__)("Priority Menu Item Styles","priority-plus-navigation"),resetAll:()=>{e({priorityPlusMenuItemPadding:p,priorityPlusMenuSubmenuIndent:c,priorityPlusMenuItemSeparator:m})},children:[(0,r.jsx)(x.__experimentalToolsPanelItem,{hasValue:()=>{return!!(o=s)&&!!(o.color||o.width||o.style);var o},label:(0,o.__)("Menu Item Divider","priority-plus-navigation"),onDeselect:()=>e({priorityPlusMenuItemSeparator:m}),isShownByDefault:!0,children:(0,r.jsx)(x.__experimentalBorderControl,{__next40pxDefaultSize:!0,label:(0,o.__)("Menu Item Divider","priority-plus-navigation"),colors:a,value:s||m,onChange:o=>e({priorityPlusMenuItemSeparator:o}),enableAlpha:!0,enableStyle:!0,withSlider:!0})}),(0,r.jsx)(x.__experimentalToolsPanelItem,{hasValue:()=>{return!!(o=n)&&("object"==typeof o?Object.values(o).some(o=>o&&""!==o):!!o);var o},label:(0,o.__)("Menu Item Padding","priority-plus-navigation"),onDeselect:()=>e({priorityPlusMenuItemPadding:p}),isShownByDefault:!0,children:i.length>0?(0,r.jsx)(f.__experimentalSpacingSizesControl,{values:n,onChange:o=>e({priorityPlusMenuItemPadding:o}),label:(0,o.__)("Menu Item Padding","priority-plus-navigation"),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"]}):(0,r.jsx)(x.BoxControl,{label:(0,o.__)("Menu Item Padding","priority-plus-navigation"),values:n,onChange:o=>e({priorityPlusMenuItemPadding:o}),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"],allowReset:!0})}),(0,r.jsx)(x.__experimentalToolsPanelItem,{hasValue:()=>{return!!(o=l)&&("object"==typeof o?o.left&&""!==o.left:!!o);var o},label:(0,o.__)("Submenu Indent","priority-plus-navigation"),onDeselect:()=>e({priorityPlusMenuSubmenuIndent:{left:c}}),isShownByDefault:!0,children:(0,r.jsx)(f.__experimentalSpacingSizesControl,{label:(0,o.__)("Submenu Indent","priority-plus-navigation"),values:(u=l,u?"object"==typeof u&&u.left?u:"string"==typeof u?{left:u}:{left:c}:{left:c}),onChange:o=>e({priorityPlusMenuSubmenuIndent:o}),sides:["left"]})})]});var u}function H({attributes:t,setAttributes:e,onClose:i}){const n=(0,f.useSetting)("typography.fontSizes")||[],_=(0,f.useSetting)("typography.fontFamilies")||[],w={};if(t.priorityPlusTypographyFontFamily){let o=[];_&&"object"==typeof _&&!Array.isArray(_)?(_.theme&&Array.isArray(_.theme)&&(o=o.concat(_.theme)),_.custom&&Array.isArray(_.custom)&&(o=o.concat(_.custom))):Array.isArray(_)&&_.forEach(t=>{t.fontFamilies&&Array.isArray(t.fontFamilies)?o=o.concat(t.fontFamilies):t.slug&&t.fontFamily&&o.push(t)});const e=o.find(o=>o.slug===t.priorityPlusTypographyFontFamily);e&&(w.fontFamily=e.fontFamily)}if(t.priorityPlusTypographyFontSize){let o=[];Array.isArray(n)&&n.forEach(t=>{t.sizes&&Array.isArray(t.sizes)?o=o.concat(t.sizes):t.slug&&t.size&&o.push(t)});const e=o.find(o=>o.slug===t.priorityPlusTypographyFontSize);e&&(w.fontSize=e.size)}t.priorityPlusTypographyFontWeight&&(w.fontWeight=t.priorityPlusTypographyFontWeight),t.priorityPlusTypographyFontStyle&&(w.fontStyle=t.priorityPlusTypographyFontStyle);const S=(0,f.useSetting)("spacing.spacingSizes")||[];return(0,r.jsxs)(x.Modal,{title:(0,o.__)("Customize Priority Plus Menu","priority-plus-navigation"),onRequestClose:i,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.jsx)(B,{attributes:t,setAttributes:e}),(0,r.jsx)(k,{attributes:t,setAttributes:e}),(0,r.jsx)(I,{attributes:t,setAttributes:e}),(0,r.jsx)(F,{attributes:t,setAttributes:e,spacingSizes:S})]}),(0,r.jsx)("div",{className:"dropdown-customizer-preview",children:(0,r.jsx)(T,{attributes:t,typographyStyles:w})})]}),(0,r.jsxs)("div",{className:"dropdown-customizer-footer",children:[(0,r.jsx)(x.Button,{variant:"tertiary",isDestructive:!0,onClick:()=>{e({priorityPlusMenuBackgroundColor:l,priorityPlusMenuBorder:s,priorityPlusMenuBorderRadius:a,priorityPlusMenuBoxShadow:u,priorityPlusMenuItemPadding:p,priorityPlusMenuItemHoverBackground:y,priorityPlusMenuItemTextColor:d,priorityPlusMenuItemHoverTextColor:g,priorityPlusMenuSubmenuIndent:{left:c},priorityPlusMenuItemSeparator:m,priorityPlusSubmenuBackgroundColor:v,priorityPlusSubmenuItemHoverBackground:h,priorityPlusSubmenuItemTextColor:P,priorityPlusSubmenuItemHoverTextColor:b})},children:(0,o.__)("Reset to Defaults","priority-plus-navigation")}),(0,r.jsx)(x.Button,{variant:"primary",onClick:i,children:(0,o.__)("Done","priority-plus-navigation")})]})]})}const A=(0,_.createHigherOrderComponent)(o=>t=>{const{name:e,attributes:i}=t;if("core/navigation"!==e)return(0,r.jsx)(o,{...t});const n=(i.className||"").includes("is-style-priority-plus-navigation")||!0===i.priorityPlusEnabled;return(0,w.useEffect)(()=>{if(!n)return;const o=document.querySelector(".block-editor-block-inspector");if(!o)return;const t=o.querySelector('.components-toggle-group-control-option-base[data-value="always"]');t&&(t.style.opacity="0.4",t.style.pointerEvents="none",t.style.textDecoration="line-through",t.style.cursor="not-allowed")},[n,i.overlayMenu]),(0,r.jsx)(o,{...t})},"addDisableAlwaysOption"),z=(0,_.createHigherOrderComponent)(t=>e=>{const{name:i,attributes:n,setAttributes:_}=e;if("core/navigation"!==i)return(0,r.jsx)(t,{...e});const S=(n.className||"").includes("is-style-priority-plus-navigation")||!0===n.priorityPlusEnabled;if(!S)return(0,r.jsx)(t,{...e});const{priorityPlusToggleLabel:C,priorityPlusToggleBackgroundColor:M,priorityPlusToggleBackgroundColorHover:T,priorityPlusToggleTextColor:B,priorityPlusToggleTextColorHover:I,priorityPlusTogglePadding:j,overlayMenu:k}=n,[F,A]=(0,w.useState)(!1);(0,w.useEffect)(()=>{S&&"always"===k&&_({overlayMenu:"mobile"})},[S,k,_]),(0,w.useEffect)(()=>{if(!S)return;const o=n.style?.typography?.fontWeight,t=n.style?.typography?.fontStyle;n.fontSize===n.priorityPlusTypographyFontSize&&n.fontFamily===n.priorityPlusTypographyFontFamily&&o===n.priorityPlusTypographyFontWeight&&t===n.priorityPlusTypographyFontStyle||_({priorityPlusTypographyFontFamily:n.fontFamily,priorityPlusTypographyFontSize:n.fontSize,priorityPlusTypographyFontWeight:o,priorityPlusTypographyFontStyle:t})},[S,n.fontSize,n.fontFamily,n.style?.typography?.fontWeight,n.style?.typography?.fontStyle,n.priorityPlusTypographyFontFamily,n.priorityPlusTypographyFontSize,n.priorityPlusTypographyFontWeight,n.priorityPlusTypographyFontStyle,_]);const z=(0,f.useSetting)("spacing.spacingSizes")||[];return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t,{...e}),(0,r.jsx)(f.InspectorControls,{group:"settings",children:(0,r.jsx)(x.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)(f.InspectorControls,{group:"styles",children:[(0,r.jsxs)(x.__experimentalToolsPanel,{label:(0,o.__)("Priority Plus Settings","priority-plus-navigation"),resetAll:()=>_({priorityPlusToggleLabel:"More",priorityPlusMenuBackgroundColor:l,priorityPlusMenuBorder:s,priorityPlusMenuBorderRadius:a,priorityPlusMenuBoxShadow:u,priorityPlusMenuItemPadding:p,priorityPlusMenuItemHoverBackground:y,priorityPlusMenuItemTextColor:d,priorityPlusMenuItemHoverTextColor:g,priorityPlusMenuSubmenuIndent:{left:c},priorityPlusMenuItemSeparator:m,priorityPlusSubmenuBackgroundColor:v,priorityPlusSubmenuItemHoverBackground:h,priorityPlusSubmenuItemTextColor:P,priorityPlusSubmenuItemHoverTextColor:b}),children:[(0,r.jsx)(x.__experimentalToolsPanelItem,{hasValue:()=>!!C,label:(0,o.__)("Button Label","priority-plus-navigation"),onDeselect:()=>_({priorityPlusToggleLabel:"More"}),isShownByDefault:!0,children:(0,r.jsx)(x.TextControl,{label:(0,o.__)("Button Label","priority-plus-navigation"),value:C,onChange:o=>_({priorityPlusToggleLabel:o}),help:(0,o.__)("Text displayed on the toggle button","priority-plus-navigation")})}),(0,r.jsx)(x.__experimentalToolsPanelItem,{hasValue:()=>{const{priorityPlusMenuBackgroundColor:o,priorityPlusMenuBorder:t,priorityPlusMenuBorderRadius:e,priorityPlusMenuBoxShadow:r,priorityPlusMenuItemPadding:i,priorityPlusMenuItemHoverBackground:l,priorityPlusMenuItemHoverTextColor:s,priorityPlusMenuSubmenuIndent:a}=n;return!!(o||t||e||r||i||l||s||a)},label:(0,o.__)("Custom Dropdown","priority-plus-navigation"),onDeselect:()=>_({priorityPlusMenuBackgroundColor:l,priorityPlusMenuBorder:s,priorityPlusMenuBorderRadius:a,priorityPlusMenuBoxShadow:u,priorityPlusMenuItemPadding:p,priorityPlusMenuItemHoverBackground:y,priorityPlusMenuItemTextColor:d,priorityPlusMenuItemHoverTextColor:g,priorityPlusMenuSubmenuIndent:{left:c},priorityPlusMenuItemSeparator:m,priorityPlusSubmenuBackgroundColor:v,priorityPlusSubmenuItemHoverBackground:h,priorityPlusSubmenuItemTextColor:P,priorityPlusSubmenuItemHoverTextColor:b}),isShownByDefault:!0,children:(0,r.jsx)(x.Button,{variant:"primary",onClick:()=>A(!0),children:(0,o.__)("Customize Dropdown Menu","priority-plus-navigation")})})]}),(0,r.jsx)(f.PanelColorSettings,{title:(0,o.__)("Priority Plus Button Colors","priority-plus-navigation"),colorSettings:[{label:(0,o.__)("Text Color","priority-plus-navigation"),value:B,onChange:o=>_({priorityPlusToggleTextColor:o||void 0}),clearable:!0},{label:(0,o.__)("Text Hover Color","priority-plus-navigation"),value:I,onChange:o=>_({priorityPlusToggleTextColorHover:o||void 0}),clearable:!0},{label:(0,o.__)("Background Color","priority-plus-navigation"),value:M,onChange:o=>_({priorityPlusToggleBackgroundColor:o||void 0}),clearable:!0},{label:(0,o.__)("Background Hover Color","priority-plus-navigation"),value:T,onChange:o=>_({priorityPlusToggleBackgroundColorHover:o||void 0}),clearable:!0,enableAlpha:!0}]}),(0,r.jsx)(x.__experimentalToolsPanel,{label:(0,o.__)("Priority Plus Button Spacing","priority-plus-navigation"),resetAll:()=>_({priorityPlusTogglePadding:void 0}),children:(0,r.jsx)(x.__experimentalToolsPanelItem,{hasValue:()=>!!j&&Object.keys(j).length>0,label:(0,o.__)("Button Padding","priority-plus-navigation"),onDeselect:()=>_({priorityPlusTogglePadding:void 0}),isShownByDefault:!0,children:z.length>0?(0,r.jsx)(f.__experimentalSpacingSizesControl,{values:j,onChange:o=>_({priorityPlusTogglePadding:o}),label:(0,o.__)("Button Padding","priority-plus-navigation"),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"]}):(0,r.jsx)(x.BoxControl,{label:(0,o.__)("Button Padding","priority-plus-navigation"),values:j,onChange:o=>_({priorityPlusTogglePadding:o}),sides:["top","right","bottom","left"],units:["px","em","rem","vh","vw"],allowReset:!0})})})]}),F&&(0,r.jsx)(H,{attributes:n,setAttributes:_,onClose:()=>A(!1)})]})},"withPriorityPlusControls");(0,n.addFilter)("editor.BlockEdit","priority-plus-navigation/add-disable-always-option",A,5),(0,n.addFilter)("editor.BlockEdit","priority-plus-navigation/add-priority-plus-navigation-controls",z,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 35ae285..154b855 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 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:#191919;--wp--custom--priority-plus-navigation--dropdown--multi-level-indent:1.25rem}.is-style-priority-plus-navigation{--priority-plus-navigation--background:transparent;--priority-plus-navigation--background-hover:transparent;--priority-plus-navigation--color:inherit;--priority-plus-navigation--color-hover:inherit;--priority-plus-navigation--border-color:transparent;--priority-plus-navigation--border-style:solid;--priority-plus-navigation--border-width:0;--priority-plus-navigation--border-radius:0;--priority-plus-navigation--font-family:inherit;--priority-plus-navigation--font-size:inherit;--priority-plus-navigation--font-weight:inherit;--priority-plus-navigation--font-style:inherit;--priority-plus-navigation--padding:0;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-style:var(--priority-plus-navigation--font-style);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-bottom:var(--wp--custom--priority-plus-navigation--dropdown--border-bottom,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd))!important;border-right:var(--wp--custom--priority-plus-navigation--dropdown--border-left,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd))!important;border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-left:var(--wp--custom--priority-plus-navigation--dropdown--border-right,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd))!important;border-top:var(--wp--custom--priority-plus-navigation--dropdown--border-top,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd))!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;font-style:inherit;font-weight:inherit;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-decoration:none;transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li 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-toggle-arrow .priority-plus-navigation-accordion-arrow{display:inline-block;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;justify-content:space-between;outline:none;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-align:right;transition:background .2s ease,color .2s ease;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text{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-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-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: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:#191919;--wp--custom--priority-plus-navigation--dropdown--multi-level-indent:1.25rem;--wp--custom--priority-plus-navigation--dropdown--submenu-background-color:#fff;--wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-background-color:rgba(0,0,0,.05);--wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-text-color:#191919}.is-style-priority-plus-navigation{--priority-plus-navigation--background:transparent;--priority-plus-navigation--background-hover:transparent;--priority-plus-navigation--color:inherit;--priority-plus-navigation--color-hover:inherit;--priority-plus-navigation--border-color:transparent;--priority-plus-navigation--border-style:solid;--priority-plus-navigation--border-width:0;--priority-plus-navigation--border-radius:0;--priority-plus-navigation--font-family:inherit;--priority-plus-navigation--font-size:inherit;--priority-plus-navigation--font-weight:inherit;--priority-plus-navigation--font-style:inherit;--priority-plus-navigation--padding:0;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-style:var(--priority-plus-navigation--font-style);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-bottom:var(--wp--custom--priority-plus-navigation--dropdown--border-bottom,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd))!important;border-right:var(--wp--custom--priority-plus-navigation--dropdown--border-left,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd))!important;border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-left:var(--wp--custom--priority-plus-navigation--dropdown--border-right,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd))!important;border-top:var(--wp--custom--priority-plus-navigation--dropdown--border-top,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd))!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:not(:first-child){border-top:var(--wp--custom--priority-plus-navigation--dropdown--item-separator-width,0) var(--wp--custom--priority-plus-navigation--dropdown--item-separator-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--item-separator-color,transparent)}.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:var(--wp--custom--priority-plus-navigation--dropdown--item-text-color,#191919);display:block;font-style:inherit;font-weight:inherit;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-decoration:none;transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li 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-toggle-arrow .priority-plus-navigation-accordion-arrow{display:inline-block;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full{align-items:center;background:transparent;border:none;color:var(--wp--custom--priority-plus-navigation--dropdown--item-text-color,#191919);cursor:pointer;display:flex;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;justify-content:space-between;outline:none;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-align:right;transition:background .2s ease,color .2s ease;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text{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-content{display:none;list-style:none;margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content{background:transparent}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown>li>.priority-plus-navigation-accordion-content{background:var(--wp--custom--priority-plus-navigation--dropdown--submenu-background-color)}.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>.priority-plus-navigation-accordion-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>.priority-plus-navigation-accordion-toggle-arrow,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>a{color:var(--wp--custom--priority-plus-navigation--dropdown--submenu-item-text-color,#191919)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full:focus,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full:hover,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>.priority-plus-navigation-accordion-link:hover,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>.priority-plus-navigation-accordion-toggle-arrow:focus,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>.priority-plus-navigation-accordion-toggle-arrow:hover,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>a:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-text-color)}.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-link{color:var(--wp--custom--priority-plus-navigation--dropdown--item-text-color,#191919);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:var(--wp--custom--priority-plus-navigation--dropdown--item-text-color,#191919);cursor:pointer;flex-shrink:0;font-family:inherit;font-size:inherit;outline:none;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:focus,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:hover{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 d7fe55d..751a247 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 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:#191919;--wp--custom--priority-plus-navigation--dropdown--multi-level-indent:1.25rem}.is-style-priority-plus-navigation{--priority-plus-navigation--background:transparent;--priority-plus-navigation--background-hover:transparent;--priority-plus-navigation--color:inherit;--priority-plus-navigation--color-hover:inherit;--priority-plus-navigation--border-color:transparent;--priority-plus-navigation--border-style:solid;--priority-plus-navigation--border-width:0;--priority-plus-navigation--border-radius:0;--priority-plus-navigation--font-family:inherit;--priority-plus-navigation--font-size:inherit;--priority-plus-navigation--font-weight:inherit;--priority-plus-navigation--font-style:inherit;--priority-plus-navigation--padding:0;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-style:var(--priority-plus-navigation--font-style);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-bottom:var(--wp--custom--priority-plus-navigation--dropdown--border-bottom,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd))!important;border-left:var(--wp--custom--priority-plus-navigation--dropdown--border-left,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd))!important;border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-right:var(--wp--custom--priority-plus-navigation--dropdown--border-right,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd))!important;border-top:var(--wp--custom--priority-plus-navigation--dropdown--border-top,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd))!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;font-style:inherit;font-weight:inherit;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-decoration:none;transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li 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-toggle-arrow .priority-plus-navigation-accordion-arrow{display:inline-block;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full{align-items:center;background:transparent;border:none;color:inherit;cursor:pointer;display:flex;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;justify-content:space-between;outline:none;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-align:left;transition:background .2s ease,color .2s ease;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text{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-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-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: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:#191919;--wp--custom--priority-plus-navigation--dropdown--multi-level-indent:1.25rem;--wp--custom--priority-plus-navigation--dropdown--submenu-background-color:#fff;--wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-background-color:rgba(0,0,0,.05);--wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-text-color:#191919}.is-style-priority-plus-navigation{--priority-plus-navigation--background:transparent;--priority-plus-navigation--background-hover:transparent;--priority-plus-navigation--color:inherit;--priority-plus-navigation--color-hover:inherit;--priority-plus-navigation--border-color:transparent;--priority-plus-navigation--border-style:solid;--priority-plus-navigation--border-width:0;--priority-plus-navigation--border-radius:0;--priority-plus-navigation--font-family:inherit;--priority-plus-navigation--font-size:inherit;--priority-plus-navigation--font-weight:inherit;--priority-plus-navigation--font-style:inherit;--priority-plus-navigation--padding:0;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-style:var(--priority-plus-navigation--font-style);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-bottom:var(--wp--custom--priority-plus-navigation--dropdown--border-bottom,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd))!important;border-left:var(--wp--custom--priority-plus-navigation--dropdown--border-left,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd))!important;border-radius:var(--wp--custom--priority-plus-navigation--dropdown--border-radius);border-right:var(--wp--custom--priority-plus-navigation--dropdown--border-right,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd))!important;border-top:var(--wp--custom--priority-plus-navigation--dropdown--border-top,var(--wp--custom--priority-plus-navigation--dropdown--border-width,1px) var(--wp--custom--priority-plus-navigation--dropdown--border-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--border-color,#ddd))!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:not(:first-child){border-top:var(--wp--custom--priority-plus-navigation--dropdown--item-separator-width,0) var(--wp--custom--priority-plus-navigation--dropdown--item-separator-style,solid) var(--wp--custom--priority-plus-navigation--dropdown--item-separator-color,transparent)}.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:var(--wp--custom--priority-plus-navigation--dropdown--item-text-color,#191919);display:block;font-style:inherit;font-weight:inherit;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-decoration:none;transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown li 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-toggle-arrow .priority-plus-navigation-accordion-arrow{display:inline-block;transition:transform .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full{align-items:center;background:transparent;border:none;color:var(--wp--custom--priority-plus-navigation--dropdown--item-text-color,#191919);cursor:pointer;display:flex;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;justify-content:space-between;outline:none;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);text-align:left;transition:background .2s ease,color .2s ease;width:100%}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-full .priority-plus-navigation-accordion-text{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-content{display:none;list-style:none;margin:0;padding:0}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content .priority-plus-navigation-accordion-content{background:transparent}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown>li>.priority-plus-navigation-accordion-content{background:var(--wp--custom--priority-plus-navigation--dropdown--submenu-background-color)}.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>.priority-plus-navigation-accordion-link,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>.priority-plus-navigation-accordion-toggle-arrow,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>a{color:var(--wp--custom--priority-plus-navigation--dropdown--submenu-item-text-color,#191919)}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full:focus,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-toggle-full:hover,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>.priority-plus-navigation-accordion-link:hover,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>.priority-plus-navigation-accordion-toggle-arrow:focus,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>.priority-plus-navigation-accordion-wrapper>.priority-plus-navigation-accordion-toggle-arrow:hover,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-content>li>a:hover{background:var(--wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-background-color);color:var(--wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-text-color)}.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-link{color:var(--wp--custom--priority-plus-navigation--dropdown--item-text-color,#191919);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:var(--wp--custom--priority-plus-navigation--dropdown--item-text-color,#191919);cursor:pointer;flex-shrink:0;font-family:inherit;font-size:inherit;outline:none;padding:var(--wp--custom--priority-plus-navigation--dropdown--item-spacing);transition:background .2s ease,color .2s ease}.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:focus,.is-style-priority-plus-navigation .priority-plus-navigation-dropdown .priority-plus-navigation-accordion-toggle-arrow:hover{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/classes/class-block-renderer.php b/classes/class-block-renderer.php index 432892f..a072463 100644 --- a/classes/class-block-renderer.php +++ b/classes/class-block-renderer.php @@ -165,8 +165,16 @@ private function collect_attributes( array $block ): array { 'menu_box_shadow' => $this->get_priority_attr( $block, 'priorityPlusMenuBoxShadow', '' ), 'menu_item_padding' => $this->get_priority_attr( $block, 'priorityPlusMenuItemPadding', array() ), 'menu_item_hover_background' => $this->get_priority_attr( $block, 'priorityPlusMenuItemHoverBackground', '' ), + 'menu_item_text_color' => $this->get_priority_attr( $block, 'priorityPlusMenuItemTextColor', '' ), 'menu_item_hover_text_color' => $this->get_priority_attr( $block, 'priorityPlusMenuItemHoverTextColor', '' ), 'menu_submenu_indent' => $this->get_priority_attr( $block, 'priorityPlusMenuSubmenuIndent', '' ), + 'menu_item_separator' => $this->get_priority_attr( $block, 'priorityPlusMenuItemSeparator', array() ), + + // Submenu color attributes. + 'submenu_background_color' => $this->get_priority_attr( $block, 'priorityPlusSubmenuBackgroundColor', '' ), + 'submenu_item_hover_background' => $this->get_priority_attr( $block, 'priorityPlusSubmenuItemHoverBackground', '' ), + 'submenu_item_text_color' => $this->get_priority_attr( $block, 'priorityPlusSubmenuItemTextColor', '' ), + 'submenu_item_hover_text_color' => $this->get_priority_attr( $block, 'priorityPlusSubmenuItemHoverTextColor', '' ), ); } @@ -327,6 +335,13 @@ private function add_menu_styles( array $attributes, array $style_parts ): array ); } + if ( ! empty( $attributes['menu_item_text_color'] ) ) { + $style_parts[] = sprintf( + '--wp--custom--priority-plus-navigation--dropdown--item-text-color: %s', + esc_attr( $attributes['menu_item_text_color'] ) + ); + } + if ( ! empty( $attributes['menu_item_hover_text_color'] ) ) { $style_parts[] = sprintf( '--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color: %s', @@ -386,6 +401,55 @@ private function add_menu_styles( array $attributes, array $style_parts ): array } } + // Handle item separator (top border on each li). + // Use defaults if not set to ensure separator is visible on first load. + $separator_defaults = array( + 'color' => '#dddddd', + 'width' => '1px', + 'style' => 'solid', + ); + $separator = is_array( $attributes['menu_item_separator'] ) && ! empty( $attributes['menu_item_separator'] ) + ? $attributes['menu_item_separator'] + : $separator_defaults; + + $style_parts[] = sprintf( + '--wp--custom--priority-plus-navigation--dropdown--item-separator-color: %s', + esc_attr( ! empty( $separator['color'] ) ? $separator['color'] : $separator_defaults['color'] ) + ); + $style_parts[] = sprintf( + '--wp--custom--priority-plus-navigation--dropdown--item-separator-width: %s', + esc_attr( ! empty( $separator['width'] ) ? $separator['width'] : $separator_defaults['width'] ) + ); + $style_parts[] = sprintf( + '--wp--custom--priority-plus-navigation--dropdown--item-separator-style: %s', + esc_attr( ! empty( $separator['style'] ) ? $separator['style'] : $separator_defaults['style'] ) + ); + + // Handle submenu colors (always output with defaults to ensure they're available on first load). + $submenu_defaults = array( + 'background_color' => '#ffffff', + 'item_hover_background' => 'rgba(0, 0, 0, 0.05)', + 'item_text_color' => '#191919', + 'item_hover_text_color' => '#191919', + ); + + $style_parts[] = sprintf( + '--wp--custom--priority-plus-navigation--dropdown--submenu-background-color: %s', + esc_attr( ! empty( $attributes['submenu_background_color'] ) ? $attributes['submenu_background_color'] : $submenu_defaults['background_color'] ) + ); + $style_parts[] = sprintf( + '--wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-background-color: %s', + esc_attr( ! empty( $attributes['submenu_item_hover_background'] ) ? $attributes['submenu_item_hover_background'] : $submenu_defaults['item_hover_background'] ) + ); + $style_parts[] = sprintf( + '--wp--custom--priority-plus-navigation--dropdown--submenu-item-text-color: %s', + esc_attr( ! empty( $attributes['submenu_item_text_color'] ) ? $attributes['submenu_item_text_color'] : $submenu_defaults['item_text_color'] ) + ); + $style_parts[] = sprintf( + '--wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-text-color: %s', + esc_attr( ! empty( $attributes['submenu_item_hover_text_color'] ) ? $attributes['submenu_item_hover_text_color'] : $submenu_defaults['item_hover_text_color'] ) + ); + return $style_parts; } } diff --git a/docs/styling.md b/docs/styling.md index d8b42d6..c398605 100644 --- a/docs/styling.md +++ b/docs/styling.md @@ -19,9 +19,10 @@ The easiest way to customize your dropdown menu is through the block inspector: 2. In the sidebar, find the **Menu Styles** panel under the Styles tab 3. Click the **Customize Menu** button 4. A modal opens with a live preview showing: - - **Menu Colors**: Background color, item hover background, item hover text color + - **Menu Colors**: Background color, item hover background, item text color, item hover text color - **Menu Styles**: Border (with per-side control), border radius, shadow presets - - **Menu Item Spacing**: Item padding, submenu indent + - **Submenu Colors**: Background color, item hover background, item text color, item hover text color (for nested accordion items) + - **Menu Items**: Item padding, submenu indent, item separator 5. Changes are reflected in the live preview immediately 6. Click **Done** to save, or **Reset to Defaults** to restore original values @@ -80,7 +81,21 @@ Only specify the properties you want to customize. All properties are optional. |----------|-------------|---------------| | `itemSpacing` | Padding around each dropdown item | `0.75rem 1rem` | | `itemHoverBackgroundColor` | Background color when hovering over an item | `rgba(0, 0, 0, 0.05)` | -| `itemHoverTextColor` | Text color when hovering over an item | `inherit` | +| `itemTextColor` | Text color for menu items | `#191919` | +| `itemHoverTextColor` | Text color when hovering over an item | `#191919` | + +### Submenu Items + +These colors apply to nested accordion items (items within expanded submenus): + +| Property | Description | Default Value | +|----------|-------------|---------------| +| `submenuBackgroundColor` | Background color for submenu areas | `#ffffff` | +| `submenuItemHoverBackgroundColor` | Hover background for submenu items | `rgba(0, 0, 0, 0.05)` | +| `submenuItemTextColor` | Text color for submenu items | `#191919` | +| `submenuItemHoverTextColor` | Hover text color for submenu items | `#191919` | + +**Note:** The submenu background color only applies to first-level submenus to prevent alpha transparency stacking when using semi-transparent colors. ### Multi-level Navigation @@ -106,7 +121,12 @@ Here's a complete example showing all available properties: "boxShadow": "0 8px 16px rgba(0, 0, 0, 0.2)", "itemSpacing": "1rem 1.5rem", "itemHoverBackgroundColor": "rgba(0, 0, 0, 0.08)", + "itemTextColor": "#333333", "itemHoverTextColor": "#0066cc", + "submenuBackgroundColor": "#f0f0f0", + "submenuItemHoverBackgroundColor": "rgba(0, 0, 0, 0.1)", + "submenuItemTextColor": "#444444", + "submenuItemHoverTextColor": "#0066cc", "multiLevelIndent": "1.5rem" } } diff --git a/readme.txt b/readme.txt index e13131a..63ed75b 100755 --- a/readme.txt +++ b/readme.txt @@ -61,12 +61,13 @@ Yes, the block is built with accessibility in mind, supporting keyboard navigati = Can I style the dropdown menu? = -Absolutely! The dropdown menu can be fully customized through your theme's `theme.json` file. You can control: +Absolutely! The dropdown menu can be fully customized through the block inspector or your theme's `theme.json` file. You can control: -* Background color and border styling +* Background color, item text color, and hover colors +* Separate submenu colors for nested accordion items * Item spacing and hover effects * Multi-level navigation indentation -* Box shadow and border radius +* Box shadow, border radius, and item separators Example configuration in your theme's `theme.json`: @@ -95,6 +96,22 @@ The plugin provides sensible defaults, and you only need to specify the properti == Changelog == += 0.5.0 = +* Added item text color controls for menu items (non-hover state) +* Added separate submenu color panel for nested accordion items +* Submenu colors include: background, item hover background, item text color, item hover text color +* Submenu background only applies to first-level submenus to prevent alpha transparency stacking +* Item separator controls for menu item dividers + += 0.4.0 = +* Added dropdown menu customizer modal with live preview +* Full control over menu colors: background, item hover background, item hover text +* Border customization with per-side control +* Border radius and box shadow controls +* Menu item padding controls with theme spacing size support +* Submenu indent control for nested navigation +* Toggle button styling: text colors, background colors, hover states, padding + = 0.3.0 = * Added intelligent overlay menu detection and compatibility * Priority Plus now properly disables when hamburger menu is active (overlayMenu: 'mobile') diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 27572b8..b0c523d 100755 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -14,6 +14,11 @@ --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: #191919; --wp--custom--priority-plus-navigation--dropdown--multi-level-indent: 1.25rem; + + // Submenu colors (for accordion content / nested items) + --wp--custom--priority-plus-navigation--dropdown--submenu-background-color: #fff; + --wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-background-color: rgba(0, 0, 0, 0.05); + --wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-text-color: #191919; } // More button styles (controlled via block attributes, not theme.json) diff --git a/src/styles/editor.scss b/src/styles/editor.scss index 882cb57..06d5a41 100755 --- a/src/styles/editor.scss +++ b/src/styles/editor.scss @@ -53,6 +53,19 @@ transform: translateY(0); } + // Top-level list items with separator border + > li { + margin: 0; + padding: 0; + + // Item separator - top border on all items except first + &:not(:first-child) { + border-top-color: var(--wp--custom--priority-plus-navigation--dropdown--item-separator-color, transparent); + border-top-width: var(--wp--custom--priority-plus-navigation--dropdown--item-separator-width, 0); + border-top-style: var(--wp--custom--priority-plus-navigation--dropdown--item-separator-style, solid); + } + } + li { margin: 0; padding: 0; @@ -61,7 +74,7 @@ .priority-plus-navigation-preview-link { display: block; padding: var(--wp--custom--priority-plus-navigation--dropdown--item-spacing); - color: inherit; + color: var(--wp--custom--priority-plus-navigation--dropdown--item-text-color, #191919); font-weight: inherit; font-style: inherit; text-decoration: none; @@ -101,7 +114,7 @@ font-family: inherit; font-weight: inherit; font-style: inherit; - color: inherit; + color: var(--wp--custom--priority-plus-navigation--dropdown--item-text-color, #191919); text-align: left; transition: background 0.2s ease, color 0.2s ease; outline: none; @@ -143,7 +156,19 @@ list-style: none; margin: 0; padding: 0; - background: transparent; + + // Nested accordion content inherits transparent background to prevent alpha doubling + .priority-plus-navigation-accordion-content { + background: transparent; + } + } + + // First-level accordion content only gets the submenu background color + > li > .priority-plus-navigation-accordion-content { + background: var(--wp--custom--priority-plus-navigation--dropdown--submenu-background-color); + } + + .priority-plus-navigation-accordion-content { &[aria-hidden="true"] { display: none !important; @@ -153,6 +178,48 @@ display: block !important; } + // Submenu item text colors (non-hover state) + > li > a, + > li > .priority-plus-navigation-preview-link { + color: var(--wp--custom--priority-plus-navigation--dropdown--submenu-item-text-color, #191919); + } + + > li > .priority-plus-navigation-accordion-toggle-full { + color: var(--wp--custom--priority-plus-navigation--dropdown--submenu-item-text-color, #191919); + } + + > li > .priority-plus-navigation-accordion-wrapper > .priority-plus-navigation-accordion-link { + color: var(--wp--custom--priority-plus-navigation--dropdown--submenu-item-text-color, #191919); + } + + > li > .priority-plus-navigation-accordion-wrapper > .priority-plus-navigation-accordion-toggle-arrow { + color: var(--wp--custom--priority-plus-navigation--dropdown--submenu-item-text-color, #191919); + } + + // Submenu item hover colors (only for items within accordion content) + > li > a:hover, + > li > .priority-plus-navigation-preview-link:hover { + background: var(--wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-background-color); + color: var(--wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-text-color); + } + + > li > .priority-plus-navigation-accordion-toggle-full:hover, + > li > .priority-plus-navigation-accordion-toggle-full:focus { + background: var(--wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-background-color); + color: var(--wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-text-color); + } + + > li > .priority-plus-navigation-accordion-wrapper > .priority-plus-navigation-accordion-link:hover { + background: var(--wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-background-color); + color: var(--wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-text-color); + } + + > li > .priority-plus-navigation-accordion-wrapper > .priority-plus-navigation-accordion-toggle-arrow:hover, + > li > .priority-plus-navigation-accordion-wrapper > .priority-plus-navigation-accordion-toggle-arrow:focus { + background: var(--wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-background-color); + color: var(--wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-text-color); + } + // Multi-level indentation - each nested level adds indent // Applied to links, preview links, and accordion toggle buttons // First level - add 1x indent to the left padding @@ -198,6 +265,7 @@ .priority-plus-navigation-accordion-link { flex: 1; padding: var(--wp--custom--priority-plus-navigation--dropdown--item-spacing); + color: var(--wp--custom--priority-plus-navigation--dropdown--item-text-color, #191919); transition: background 0.2s ease, color 0.2s ease; &:hover { @@ -213,7 +281,7 @@ cursor: pointer; font-size: inherit; font-family: inherit; - color: inherit; + color: var(--wp--custom--priority-plus-navigation--dropdown--item-text-color, #191919); flex-shrink: 0; transition: background 0.2s ease, color 0.2s ease; outline: none; diff --git a/src/styles/style.scss b/src/styles/style.scss index 3c50864..e9349ba 100755 --- a/src/styles/style.scss +++ b/src/styles/style.scss @@ -109,6 +109,19 @@ transform: translateY(0); } + // Top-level list items with separator border + > li { + margin: 0; + padding: 0; + + // Item separator - top border on all items except first + &:not(:first-child) { + border-top-color: var(--wp--custom--priority-plus-navigation--dropdown--item-separator-color, transparent); + border-top-width: var(--wp--custom--priority-plus-navigation--dropdown--item-separator-width, 0); + border-top-style: var(--wp--custom--priority-plus-navigation--dropdown--item-separator-style, solid); + } + } + li { margin: 0; padding: 0; @@ -116,7 +129,7 @@ a { display: block; padding: var(--wp--custom--priority-plus-navigation--dropdown--item-spacing); - color: inherit; + color: var(--wp--custom--priority-plus-navigation--dropdown--item-text-color, #191919); font-weight: inherit; font-style: inherit; text-decoration: none; @@ -148,7 +161,7 @@ font-family: inherit; font-weight: inherit; font-style: inherit; - color: inherit; + color: var(--wp--custom--priority-plus-navigation--dropdown--item-text-color, #191919); text-align: left; transition: background 0.2s ease, color 0.2s ease; outline: none; @@ -191,7 +204,19 @@ list-style: none; margin: 0; padding: 0; - background: transparent; + + // Nested accordion content inherits transparent background to prevent alpha doubling + .priority-plus-navigation-accordion-content { + background: transparent; + } + } + + // First-level accordion content only gets the submenu background color + > li > .priority-plus-navigation-accordion-content { + background: var(--wp--custom--priority-plus-navigation--dropdown--submenu-background-color); + } + + .priority-plus-navigation-accordion-content { &[aria-hidden="true"] { display: none !important; @@ -201,6 +226,46 @@ display: block !important; } + // Submenu item text colors (non-hover state) + > li > a { + color: var(--wp--custom--priority-plus-navigation--dropdown--submenu-item-text-color, #191919); + } + + > li > .priority-plus-navigation-accordion-toggle-full { + color: var(--wp--custom--priority-plus-navigation--dropdown--submenu-item-text-color, #191919); + } + + > li > .priority-plus-navigation-accordion-wrapper > .priority-plus-navigation-accordion-link { + color: var(--wp--custom--priority-plus-navigation--dropdown--submenu-item-text-color, #191919); + } + + > li > .priority-plus-navigation-accordion-wrapper > .priority-plus-navigation-accordion-toggle-arrow { + color: var(--wp--custom--priority-plus-navigation--dropdown--submenu-item-text-color, #191919); + } + + // Submenu item hover colors (only for items within accordion content) + > li > a:hover { + background: var(--wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-background-color); + color: var(--wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-text-color); + } + + > li > .priority-plus-navigation-accordion-toggle-full:hover, + > li > .priority-plus-navigation-accordion-toggle-full:focus { + background: var(--wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-background-color); + color: var(--wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-text-color); + } + + > li > .priority-plus-navigation-accordion-wrapper > .priority-plus-navigation-accordion-link:hover { + background: var(--wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-background-color); + color: var(--wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-text-color); + } + + > li > .priority-plus-navigation-accordion-wrapper > .priority-plus-navigation-accordion-toggle-arrow:hover, + > li > .priority-plus-navigation-accordion-wrapper > .priority-plus-navigation-accordion-toggle-arrow:focus { + background: var(--wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-background-color); + color: var(--wp--custom--priority-plus-navigation--dropdown--submenu-item-hover-text-color); + } + // Multi-level indentation - each nested level adds indent // Applied to links and accordion toggle buttons // First level - add 1x indent to the left padding @@ -250,6 +315,7 @@ .priority-plus-navigation-accordion-link { flex: 1; padding: var(--wp--custom--priority-plus-navigation--dropdown--item-spacing); + color: var(--wp--custom--priority-plus-navigation--dropdown--item-text-color, #191919); transition: background 0.2s ease, color 0.2s ease; &:hover { @@ -265,7 +331,7 @@ cursor: pointer; font-size: inherit; font-family: inherit; - color: inherit; + color: var(--wp--custom--priority-plus-navigation--dropdown--item-text-color, #191919); flex-shrink: 0; transition: background 0.2s ease, color 0.2s ease; outline: none; diff --git a/src/variation/block.js b/src/variation/block.js index f07df21..9f9b01c 100644 --- a/src/variation/block.js +++ b/src/variation/block.js @@ -16,8 +16,14 @@ import { DEFAULT_MENU_BOX_SHADOW, DEFAULT_MENU_ITEM_PADDING, DEFAULT_MENU_ITEM_HOVER_BACKGROUND, + DEFAULT_MENU_ITEM_TEXT_COLOR, DEFAULT_MENU_ITEM_HOVER_TEXT_COLOR, DEFAULT_MENU_SUBMENU_INDENT, + DEFAULT_MENU_ITEM_SEPARATOR, + DEFAULT_SUBMENU_BACKGROUND_COLOR, + DEFAULT_SUBMENU_ITEM_HOVER_BACKGROUND, + DEFAULT_SUBMENU_ITEM_TEXT_COLOR, + DEFAULT_SUBMENU_ITEM_HOVER_TEXT_COLOR, } from './constants'; /** @@ -119,6 +125,10 @@ addFilter( type: 'string', default: DEFAULT_MENU_ITEM_HOVER_BACKGROUND, }, + priorityPlusMenuItemTextColor: { + type: 'string', + default: DEFAULT_MENU_ITEM_TEXT_COLOR, + }, priorityPlusMenuItemHoverTextColor: { type: 'string', default: DEFAULT_MENU_ITEM_HOVER_TEXT_COLOR, @@ -127,6 +137,27 @@ addFilter( type: 'string', default: DEFAULT_MENU_SUBMENU_INDENT, }, + priorityPlusMenuItemSeparator: { + type: 'object', + default: DEFAULT_MENU_ITEM_SEPARATOR, + }, + // Submenu color attributes + priorityPlusSubmenuBackgroundColor: { + type: 'string', + default: DEFAULT_SUBMENU_BACKGROUND_COLOR, + }, + priorityPlusSubmenuItemHoverBackground: { + type: 'string', + default: DEFAULT_SUBMENU_ITEM_HOVER_BACKGROUND, + }, + priorityPlusSubmenuItemTextColor: { + type: 'string', + default: DEFAULT_SUBMENU_ITEM_TEXT_COLOR, + }, + priorityPlusSubmenuItemHoverTextColor: { + type: 'string', + default: DEFAULT_SUBMENU_ITEM_HOVER_TEXT_COLOR, + }, // Typography attributes (for preview) priorityPlusTypographyFontFamily: { type: 'string', diff --git a/src/variation/components/dropdown-customizer-modal.js b/src/variation/components/dropdown-customizer-modal.js index 5ec5cd7..28bdba9 100644 --- a/src/variation/components/dropdown-customizer-modal.js +++ b/src/variation/components/dropdown-customizer-modal.js @@ -11,6 +11,7 @@ import { __ } from '@wordpress/i18n'; import './modal.scss'; import { DropdownPreview } from './dropdown-preview'; import { ColorPanel } from './panels/menu-color-panel'; +import { SubmenuColorPanel } from './panels/submenu-color-panel'; import { MenuStylesPanel } from './panels/menu-styles-panel'; import { MenuItemsPanel } from './panels/menu-items-panel'; import { @@ -20,8 +21,14 @@ import { DEFAULT_MENU_BOX_SHADOW, DEFAULT_MENU_ITEM_PADDING, DEFAULT_MENU_ITEM_HOVER_BACKGROUND, + DEFAULT_MENU_ITEM_TEXT_COLOR, DEFAULT_MENU_ITEM_HOVER_TEXT_COLOR, DEFAULT_MENU_SUBMENU_INDENT, + DEFAULT_MENU_ITEM_SEPARATOR, + DEFAULT_SUBMENU_BACKGROUND_COLOR, + DEFAULT_SUBMENU_ITEM_HOVER_BACKGROUND, + DEFAULT_SUBMENU_ITEM_TEXT_COLOR, + DEFAULT_SUBMENU_ITEM_HOVER_TEXT_COLOR, } from '../constants'; export function DropdownCustomizerModal({ @@ -118,11 +125,20 @@ export function DropdownCustomizerModal({ priorityPlusMenuItemPadding: DEFAULT_MENU_ITEM_PADDING, priorityPlusMenuItemHoverBackground: DEFAULT_MENU_ITEM_HOVER_BACKGROUND, + priorityPlusMenuItemTextColor: DEFAULT_MENU_ITEM_TEXT_COLOR, priorityPlusMenuItemHoverTextColor: DEFAULT_MENU_ITEM_HOVER_TEXT_COLOR, priorityPlusMenuSubmenuIndent: { left: DEFAULT_MENU_SUBMENU_INDENT, }, + priorityPlusMenuItemSeparator: DEFAULT_MENU_ITEM_SEPARATOR, + priorityPlusSubmenuBackgroundColor: + DEFAULT_SUBMENU_BACKGROUND_COLOR, + priorityPlusSubmenuItemHoverBackground: + DEFAULT_SUBMENU_ITEM_HOVER_BACKGROUND, + priorityPlusSubmenuItemTextColor: DEFAULT_SUBMENU_ITEM_TEXT_COLOR, + priorityPlusSubmenuItemHoverTextColor: + DEFAULT_SUBMENU_ITEM_HOVER_TEXT_COLOR, }); }; @@ -147,6 +163,10 @@ export function DropdownCustomizerModal({ attributes={attributes} setAttributes={setAttributes} /> + + setAttributes({ + priorityPlusMenuItemTextColor: + color || DEFAULT_MENU_ITEM_TEXT_COLOR, + }), + enableAlpha: true, + }, { label: __( 'Item Hover Text Color', @@ -74,6 +89,7 @@ export function ColorPanel({ attributes, setAttributes }) { priorityPlusMenuItemHoverTextColor: color || DEFAULT_MENU_ITEM_HOVER_TEXT_COLOR, }), + enableAlpha: true, }, ]} /> diff --git a/src/variation/components/panels/menu-items-panel.js b/src/variation/components/panels/menu-items-panel.js index f56e43e..1361311 100644 --- a/src/variation/components/panels/menu-items-panel.js +++ b/src/variation/components/panels/menu-items-panel.js @@ -5,8 +5,12 @@ import { BoxControl, __experimentalToolsPanel as ToolsPanel, __experimentalToolsPanelItem as ToolsPanelItem, + __experimentalBorderControl as BorderControl, } from '@wordpress/components'; -import { __experimentalSpacingSizesControl as SpacingSizesControl } from '@wordpress/block-editor'; +import { + useSetting, + __experimentalSpacingSizesControl as SpacingSizesControl, +} from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; /** @@ -15,6 +19,7 @@ import { __ } from '@wordpress/i18n'; import { DEFAULT_MENU_ITEM_PADDING, DEFAULT_MENU_SUBMENU_INDENT, + DEFAULT_MENU_ITEM_SEPARATOR, } from '../../constants'; /** @@ -75,20 +80,39 @@ function normalizeIndentValue(indent) { return { left: DEFAULT_MENU_SUBMENU_INDENT }; } +/** + * Check if item separator has a value + * + * @param {Object} separator - The separator border value + * @return {boolean} Whether separator has a value + */ +function hasItemSeparatorValue(separator) { + if (!separator) { + return false; + } + return !!(separator.color || separator.width || separator.style); +} + /** * MenuItemsPanel Component * - * Provides controls for menu spacing (item padding and submenu indent). + * Provides controls for menu item styles (padding, indent, separator). * * @param {Object} props - Component props * @param {Object} props.attributes - Block attributes * @param {Function} props.setAttributes - Function to update attributes * @param {Array} props.spacingSizes - Available spacing sizes from theme - * @return {JSX.Element} Menu spacing panel component + * @return {JSX.Element} Menu items panel component */ export function MenuItemsPanel({ attributes, setAttributes, spacingSizes }) { - const { priorityPlusMenuItemPadding, priorityPlusMenuSubmenuIndent } = - attributes; + const { + priorityPlusMenuItemPadding, + priorityPlusMenuSubmenuIndent, + priorityPlusMenuItemSeparator, + } = attributes; + + // Get color palette from theme settings + const colors = useSetting('color.palette') || []; return ( + + hasItemSeparatorValue(priorityPlusMenuItemSeparator) + } + label={__('Menu Item Divider', 'priority-plus-navigation')} + onDeselect={() => + setAttributes({ + priorityPlusMenuItemSeparator: + DEFAULT_MENU_ITEM_SEPARATOR, + }) + } + isShownByDefault + > + + setAttributes({ + priorityPlusMenuItemSeparator: newBorder, + }) + } + enableAlpha={true} + enableStyle={true} + withSlider={true} + /> + hasItemPaddingValue(priorityPlusMenuItemPadding) diff --git a/src/variation/components/panels/submenu-color-panel.js b/src/variation/components/panels/submenu-color-panel.js new file mode 100644 index 0000000..1a0aff8 --- /dev/null +++ b/src/variation/components/panels/submenu-color-panel.js @@ -0,0 +1,97 @@ +/** + * WordPress dependencies + */ +import { PanelColorSettings } from '@wordpress/block-editor'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { + DEFAULT_SUBMENU_BACKGROUND_COLOR, + DEFAULT_SUBMENU_ITEM_HOVER_BACKGROUND, + DEFAULT_SUBMENU_ITEM_TEXT_COLOR, + DEFAULT_SUBMENU_ITEM_HOVER_TEXT_COLOR, +} from '../../constants'; + +/** + * SubmenuColorPanel Component + * + * Provides color controls for submenu styling (nested accordion items). + * Colors always show their value (or default) and reset to defaults when cleared. + * + * @param {Object} props - Component props + * @param {Object} props.attributes - Block attributes + * @param {Function} props.setAttributes - Function to update attributes + * @return {JSX.Element} Submenu color panel component + */ +export function SubmenuColorPanel({ attributes, setAttributes }) { + const { + priorityPlusSubmenuBackgroundColor, + priorityPlusSubmenuItemHoverBackground, + priorityPlusSubmenuItemTextColor, + priorityPlusSubmenuItemHoverTextColor, + } = attributes; + + return ( + + setAttributes({ + priorityPlusSubmenuBackgroundColor: + color || DEFAULT_SUBMENU_BACKGROUND_COLOR, + }), + enableAlpha: true, + }, + { + label: __( + 'Item Hover Background', + 'priority-plus-navigation' + ), + value: + priorityPlusSubmenuItemHoverBackground || + DEFAULT_SUBMENU_ITEM_HOVER_BACKGROUND, + onChange: (color) => + setAttributes({ + priorityPlusSubmenuItemHoverBackground: + color || DEFAULT_SUBMENU_ITEM_HOVER_BACKGROUND, + }), + enableAlpha: true, + }, + { + label: __('Item Text Color', 'priority-plus-navigation'), + value: + priorityPlusSubmenuItemTextColor || + DEFAULT_SUBMENU_ITEM_TEXT_COLOR, + onChange: (color) => + setAttributes({ + priorityPlusSubmenuItemTextColor: + color || DEFAULT_SUBMENU_ITEM_TEXT_COLOR, + }), + enableAlpha: true, + }, + { + label: __( + 'Item Hover Text Color', + 'priority-plus-navigation' + ), + value: + priorityPlusSubmenuItemHoverTextColor || + DEFAULT_SUBMENU_ITEM_HOVER_TEXT_COLOR, + onChange: (color) => + setAttributes({ + priorityPlusSubmenuItemHoverTextColor: + color || DEFAULT_SUBMENU_ITEM_HOVER_TEXT_COLOR, + }), + enableAlpha: true, + }, + ]} + /> + ); +} diff --git a/src/variation/constants.js b/src/variation/constants.js index a39e3d9..8daa100 100644 --- a/src/variation/constants.js +++ b/src/variation/constants.js @@ -19,7 +19,7 @@ export const DEFAULT_MENU_BORDER = { export const DEFAULT_MENU_BORDER_RADIUS = '4px'; -export const DEFAULT_MENU_BOX_SHADOW = '0 4px 12px rgba(0, 0, 0, 0.15)'; +export const DEFAULT_MENU_BOX_SHADOW = 'default'; export const DEFAULT_MENU_ITEM_PADDING = { top: '0.75rem', @@ -30,6 +30,20 @@ export const DEFAULT_MENU_ITEM_PADDING = { export const DEFAULT_MENU_ITEM_HOVER_BACKGROUND = 'rgba(0, 0, 0, 0.05)'; +export const DEFAULT_MENU_ITEM_TEXT_COLOR = '#191919'; + export const DEFAULT_MENU_ITEM_HOVER_TEXT_COLOR = '#191919'; export const DEFAULT_MENU_SUBMENU_INDENT = '1.25rem'; + +export const DEFAULT_MENU_ITEM_SEPARATOR = { + color: '#f0f0f0', + width: '1px', + style: 'solid', +}; + +// Submenu colors (same defaults as menu colors) +export const DEFAULT_SUBMENU_BACKGROUND_COLOR = '#ffffff'; +export const DEFAULT_SUBMENU_ITEM_HOVER_BACKGROUND = 'rgba(0, 0, 0, 0.05)'; +export const DEFAULT_SUBMENU_ITEM_TEXT_COLOR = '#191919'; +export const DEFAULT_SUBMENU_ITEM_HOVER_TEXT_COLOR = '#191919'; diff --git a/src/variation/controls.js b/src/variation/controls.js index b84d0d9..7c40b96 100644 --- a/src/variation/controls.js +++ b/src/variation/controls.js @@ -32,8 +32,14 @@ import { DEFAULT_MENU_BOX_SHADOW, DEFAULT_MENU_ITEM_PADDING, DEFAULT_MENU_ITEM_HOVER_BACKGROUND, + DEFAULT_MENU_ITEM_TEXT_COLOR, DEFAULT_MENU_ITEM_HOVER_TEXT_COLOR, DEFAULT_MENU_SUBMENU_INDENT, + DEFAULT_MENU_ITEM_SEPARATOR, + DEFAULT_SUBMENU_BACKGROUND_COLOR, + DEFAULT_SUBMENU_ITEM_HOVER_BACKGROUND, + DEFAULT_SUBMENU_ITEM_TEXT_COLOR, + DEFAULT_SUBMENU_ITEM_HOVER_TEXT_COLOR, } from './constants'; /** @@ -212,11 +218,23 @@ const withPriorityPlusControls = createHigherOrderComponent((BlockEdit) => { DEFAULT_MENU_ITEM_PADDING, priorityPlusMenuItemHoverBackground: DEFAULT_MENU_ITEM_HOVER_BACKGROUND, + priorityPlusMenuItemTextColor: + DEFAULT_MENU_ITEM_TEXT_COLOR, priorityPlusMenuItemHoverTextColor: DEFAULT_MENU_ITEM_HOVER_TEXT_COLOR, priorityPlusMenuSubmenuIndent: { left: DEFAULT_MENU_SUBMENU_INDENT, }, + priorityPlusMenuItemSeparator: + DEFAULT_MENU_ITEM_SEPARATOR, + priorityPlusSubmenuBackgroundColor: + DEFAULT_SUBMENU_BACKGROUND_COLOR, + priorityPlusSubmenuItemHoverBackground: + DEFAULT_SUBMENU_ITEM_HOVER_BACKGROUND, + priorityPlusSubmenuItemTextColor: + DEFAULT_SUBMENU_ITEM_TEXT_COLOR, + priorityPlusSubmenuItemHoverTextColor: + DEFAULT_SUBMENU_ITEM_HOVER_TEXT_COLOR, }) } > @@ -274,7 +292,7 @@ const withPriorityPlusControls = createHigherOrderComponent((BlockEdit) => { ); }} label={__( - 'Customize DropdownMenu', + 'Custom Dropdown', 'priority-plus-navigation' )} onDeselect={() => @@ -290,11 +308,23 @@ const withPriorityPlusControls = createHigherOrderComponent((BlockEdit) => { DEFAULT_MENU_ITEM_PADDING, priorityPlusMenuItemHoverBackground: DEFAULT_MENU_ITEM_HOVER_BACKGROUND, + priorityPlusMenuItemTextColor: + DEFAULT_MENU_ITEM_TEXT_COLOR, priorityPlusMenuItemHoverTextColor: DEFAULT_MENU_ITEM_HOVER_TEXT_COLOR, priorityPlusMenuSubmenuIndent: { left: DEFAULT_MENU_SUBMENU_INDENT, }, + priorityPlusMenuItemSeparator: + DEFAULT_MENU_ITEM_SEPARATOR, + priorityPlusSubmenuBackgroundColor: + DEFAULT_SUBMENU_BACKGROUND_COLOR, + priorityPlusSubmenuItemHoverBackground: + DEFAULT_SUBMENU_ITEM_HOVER_BACKGROUND, + priorityPlusSubmenuItemTextColor: + DEFAULT_SUBMENU_ITEM_TEXT_COLOR, + priorityPlusSubmenuItemHoverTextColor: + DEFAULT_SUBMENU_ITEM_HOVER_TEXT_COLOR, }) } isShownByDefault @@ -386,7 +416,10 @@ const withPriorityPlusControls = createHigherOrderComponent((BlockEdit) => { > setAttributes({ priorityPlusTogglePadding: undefined,