Change/menu controls

build/priority-plus-nav-editor.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-primitives'), 'version' => 'f7d87c124c39fcda6059');
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-primitives'), 'version' => 'b51f86f06015cf55b7c8');

classes/class-block-renderer.php

@@ -335,10 +335,21 @@ private function add_menu_styles( array $attributes, array $style_parts ): array
 		}
 
 		if ( ! empty( $attributes['menu_submenu_indent'] ) ) {
-			$style_parts[] = sprintf(
-				'--wp--custom--priority-plus-navigation--dropdown--multi-level-indent: %s',
-				esc_attr( $attributes['menu_submenu_indent'] )
-			);
+			$submenu_indent_css = '';
+			// Handle new object format (e.g., { left: '1.25rem' }).
+			if ( is_array( $attributes['menu_submenu_indent'] ) && ! empty( $attributes['menu_submenu_indent']['left'] ) ) {
+				$submenu_indent_css = $this->css_converter->convert_preset_value( $attributes['menu_submenu_indent']['left'] );
+			} elseif ( is_string( $attributes['menu_submenu_indent'] ) ) {
+				// Handle legacy string format.
+				$submenu_indent_css = $this->css_converter->convert_preset_value( $attributes['menu_submenu_indent'] );
+			}
+
+			if ( '' !== $submenu_indent_css ) {
+				$style_parts[] = sprintf(
+					'--wp--custom--priority-plus-navigation--dropdown--multi-level-indent: %s',
+					esc_attr( $submenu_indent_css )
+				);
+			}
 		}
 
 		// Handle border.

src/styles/_variables.scss

@@ -12,7 +12,7 @@
 	--wp--custom--priority-plus-navigation--dropdown--box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 	--wp--custom--priority-plus-navigation--dropdown--item-spacing: 0.75rem 1rem;
 	--wp--custom--priority-plus-navigation--dropdown--item-hover-background-color: rgba(0, 0, 0, 0.05);
-	--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color: inherit;
+	--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color: #191919;
 	--wp--custom--priority-plus-navigation--dropdown--multi-level-indent: 1.25rem;
 }
 

src/variation/components/dropdown-customizer-modal.js

@@ -12,7 +12,7 @@ import './modal.scss';
 import { DropdownPreview } from './dropdown-preview';
 import { ColorPanel } from './panels/menu-color-panel';
 import { MenuStylesPanel } from './panels/menu-styles-panel';
-import { MenuSpacingPanel } from './panels/menu-spacing-panel';
+import { MenuItemsPanel } from './panels/menu-items-panel';
 import {
 	DEFAULT_MENU_BACKGROUND_COLOR,
 	DEFAULT_MENU_BORDER,
@@ -120,7 +120,9 @@ export function DropdownCustomizerModal({
 				DEFAULT_MENU_ITEM_HOVER_BACKGROUND,
 			priorityPlusMenuItemHoverTextColor:
 				DEFAULT_MENU_ITEM_HOVER_TEXT_COLOR,
-			priorityPlusMenuSubmenuIndent: DEFAULT_MENU_SUBMENU_INDENT,
+			priorityPlusMenuSubmenuIndent: {
+				left: DEFAULT_MENU_SUBMENU_INDENT,
+			},
 		});
 	};
 
@@ -145,7 +147,7 @@ export function DropdownCustomizerModal({
 						attributes={attributes}
 						setAttributes={setAttributes}
 					/>
-					<MenuSpacingPanel
+					<MenuItemsPanel
 						attributes={attributes}
 						setAttributes={setAttributes}
 						spacingSizes={spacingSizes}

src/variation/components/dropdown-preview.js

@@ -164,6 +164,31 @@ function getBorderRadiusCSS(borderRadius) {
 	return DEFAULT_MENU_BORDER_RADIUS;
 }
 
+/**
+ * Normalize submenu indent value to CSS string
+ * Handles both new object format ({ left: '1.25rem' }) and legacy string format ('1.25rem')
+ *
+ * @param {Object|string} indent - The submenu indent value
+ * @return {string} CSS indent value
+ */
+function getSubmenuIndentCSS(indent) {
+	if (!indent) {
+		return DEFAULT_MENU_SUBMENU_INDENT;
+	}
+
+	// Handle object format from SpacingSizesControl (e.g., { left: '1.25rem' })
+	if (typeof indent === 'object' && indent.left) {
+		return convertPresetValue(indent.left);
+	}
+
+	// Handle legacy string format (e.g., '1.25rem')
+	if (typeof indent === 'string') {
+		return convertPresetValue(indent);
+	}
+
+	return DEFAULT_MENU_SUBMENU_INDENT;
+}
+
 /**
  * Convert itemPadding to CSS string (handles both object and string formats)
  *
@@ -275,9 +300,6 @@ export function DropdownPreview({ attributes, typographyStyles = {} }) {
 	const itemHoverTextColor =
 		priorityPlusMenuItemHoverTextColor ||
 		DEFAULT_MENU_ITEM_HOVER_TEXT_COLOR;
-	const submenuIndent =
-		priorityPlusMenuSubmenuIndent || DEFAULT_MENU_SUBMENU_INDENT;
-
 	// State for accordion open/closed
 	const [isAccordionOpen, setIsAccordionOpen] = useState(true);
 
@@ -300,7 +322,7 @@ export function DropdownPreview({ attributes, typographyStyles = {} }) {
 			'--wp--custom--priority-plus-navigation--dropdown--item-hover-text-color':
 				itemHoverTextColor,
 			'--wp--custom--priority-plus-navigation--dropdown--multi-level-indent':
-				submenuIndent,
+				getSubmenuIndentCSS(priorityPlusMenuSubmenuIndent),
 			// Spread border CSS properties (either unified or per-side)
 			...borderCSSProperties,
 		};
@@ -328,7 +350,7 @@ export function DropdownPreview({ attributes, typographyStyles = {} }) {
 		itemPadding,
 		itemHoverBackground,
 		itemHoverTextColor,
-		submenuIndent,
+		priorityPlusMenuSubmenuIndent,
 		typographyStyles,
 	]);
 

src/variation/components/panels/menu-color-panel.js

@@ -13,26 +13,11 @@ import {
 	DEFAULT_MENU_ITEM_HOVER_TEXT_COLOR,
 } from '../../constants';
 
-/**
- * Check if a color value differs from its default.
- * Returns the value if it's different, undefined otherwise.
- * This allows PanelColorSettings to correctly show reset as available.
- *
- * @param {string} value        - Current color value
- * @param {string} defaultValue - Default color value
- * @return {string|undefined} Value if different from default, undefined otherwise
- */
-function getDisplayValue(value, defaultValue) {
-	if (!value || value === defaultValue) {
-		return undefined;
-	}
-	return value;
-}
-
 /**
  * ColorPanel Component
  *
  * Provides color controls for menu styling.
+ * Colors always show their value (or default) and reset to defaults when cleared.
  *
  * @param {Object}   props               - Component props
  * @param {Object}   props.attributes    - Block attributes
@@ -52,48 +37,43 @@ export function ColorPanel({ attributes, setAttributes }) {
 			colorSettings={[
 				{
 					label: __('Background Color', 'priority-plus-navigation'),
-					value: getDisplayValue(
-						priorityPlusMenuBackgroundColor,
-						DEFAULT_MENU_BACKGROUND_COLOR
-					),
+					value:
+						priorityPlusMenuBackgroundColor ||
+						DEFAULT_MENU_BACKGROUND_COLOR,
 					onChange: (color) =>
 						setAttributes({
 							priorityPlusMenuBackgroundColor:
 								color || DEFAULT_MENU_BACKGROUND_COLOR,
 						}),
-					clearable: true,
 				},
 				{
 					label: __(
 						'Item Hover Background',
 						'priority-plus-navigation'
 					),
-					value: getDisplayValue(
-						priorityPlusMenuItemHoverBackground,
-						DEFAULT_MENU_ITEM_HOVER_BACKGROUND
-					),
+					value:
+						priorityPlusMenuItemHoverBackground ||
+						DEFAULT_MENU_ITEM_HOVER_BACKGROUND,
 					onChange: (color) =>
 						setAttributes({
 							priorityPlusMenuItemHoverBackground:
 								color || DEFAULT_MENU_ITEM_HOVER_BACKGROUND,
 						}),
-					clearable: true,
+					enableAlpha: true,
 				},
 				{
 					label: __(
 						'Item Hover Text Color',
 						'priority-plus-navigation'
 					),
-					value: getDisplayValue(
-						priorityPlusMenuItemHoverTextColor,
-						DEFAULT_MENU_ITEM_HOVER_TEXT_COLOR
-					),
+					value:
+						priorityPlusMenuItemHoverTextColor ||
+						DEFAULT_MENU_ITEM_HOVER_TEXT_COLOR,
 					onChange: (color) =>
 						setAttributes({
 							priorityPlusMenuItemHoverTextColor:
 								color || DEFAULT_MENU_ITEM_HOVER_TEXT_COLOR,
 						}),
-					clearable: true,
 				},
 			]}
 		/>

src/variation/components/panels/menu-spacing-panel.js → src/variation/components/panels/menu-items-panel.js

@@ -3,7 +3,6 @@
  */
 import {
 	BoxControl,
-	__experimentalUnitControl as UnitControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
@@ -38,7 +37,46 @@ function hasItemPaddingValue(itemPadding) {
 }
 
 /**
- * MenuSpacingPanel Component
+ * Check if submenu indent has a value
+ *
+ * @param {Object|string} indent - The submenu indent value
+ * @return {boolean} Whether submenu indent has a value
+ */
+function hasSubmenuIndentValue(indent) {
+	if (!indent) {
+		return false;
+	}
+	// Handle object format from SpacingSizesControl (e.g., { left: '1.25rem' })
+	if (typeof indent === 'object') {
+		return indent.left && indent.left !== '';
+	}
+	// Handle legacy string format (e.g., '1.25rem')
+	return !!indent;
+}
+
+/**
+ * Normalize submenu indent value to object format for SpacingSizesControl
+ *
+ * @param {Object|string} indent - The submenu indent value
+ * @return {Object} Normalized indent object with 'left' property
+ */
+function normalizeIndentValue(indent) {
+	if (!indent) {
+		return { left: DEFAULT_MENU_SUBMENU_INDENT };
+	}
+	// Already in object format
+	if (typeof indent === 'object' && indent.left) {
+		return indent;
+	}
+	// Convert string to object format
+	if (typeof indent === 'string') {
+		return { left: indent };
+	}
+	return { left: DEFAULT_MENU_SUBMENU_INDENT };
+}
+
+/**
+ * MenuItemsPanel Component
  *
  * Provides controls for menu spacing (item padding and submenu indent).
  *
@@ -48,16 +86,13 @@ function hasItemPaddingValue(itemPadding) {
  * @param {Array}    props.spacingSizes  - Available spacing sizes from theme
  * @return {JSX.Element} Menu spacing panel component
  */
-export function MenuSpacingPanel({ attributes, setAttributes, spacingSizes }) {
+export function MenuItemsPanel({ attributes, setAttributes, spacingSizes }) {
 	const { priorityPlusMenuItemPadding, priorityPlusMenuSubmenuIndent } =
 		attributes;
 
 	return (
 		<ToolsPanel
-			label={__(
-				'Priority Menu Item Settings',
-				'priority-plus-navigation'
-			)}
+			label={__('Priority Menu Item Styles', 'priority-plus-navigation')}
 			resetAll={() => {
 				setAttributes({
 					priorityPlusMenuItemPadding: DEFAULT_MENU_ITEM_PADDING,
@@ -111,34 +146,28 @@ export function MenuSpacingPanel({ attributes, setAttributes, spacingSizes }) {
 				)}
 			</ToolsPanelItem>
 			<ToolsPanelItem
-				hasValue={() => !!priorityPlusMenuSubmenuIndent}
+				hasValue={() =>
+					hasSubmenuIndentValue(priorityPlusMenuSubmenuIndent)
+				}
 				label={__('Submenu Indent', 'priority-plus-navigation')}
 				onDeselect={() =>
 					setAttributes({
-						priorityPlusMenuSubmenuIndent:
-							DEFAULT_MENU_SUBMENU_INDENT,
+						priorityPlusMenuSubmenuIndent: {
+							left: DEFAULT_MENU_SUBMENU_INDENT,
+						},
 					})
 				}
 				isShownByDefault
 			>
-				<UnitControl
+				<SpacingSizesControl
 					label={__('Submenu Indent', 'priority-plus-navigation')}
-					value={
-						priorityPlusMenuSubmenuIndent ||
-						DEFAULT_MENU_SUBMENU_INDENT
-					}
+					values={normalizeIndentValue(priorityPlusMenuSubmenuIndent)}
 					onChange={(value) =>
-						setAttributes({ priorityPlusMenuSubmenuIndent: value })
+						setAttributes({
+							priorityPlusMenuSubmenuIndent: value,
+						})
 					}
-					help={__(
-						'Indentation for nested submenu items',
-						'priority-plus-navigation'
-					)}
-					units={[
-						{ value: 'px', label: 'px' },
-						{ value: 'rem', label: 'rem' },
-						{ value: 'em', label: 'em' },
-					]}
+					sides={['left']}
 				/>
 			</ToolsPanelItem>
 		</ToolsPanel>

src/variation/constants.js

@@ -30,6 +30,6 @@ export const DEFAULT_MENU_ITEM_PADDING = {
 
 export const DEFAULT_MENU_ITEM_HOVER_BACKGROUND = 'rgba(0, 0, 0, 0.05)';
 
-export const DEFAULT_MENU_ITEM_HOVER_TEXT_COLOR = 'inherit';
+export const DEFAULT_MENU_ITEM_HOVER_TEXT_COLOR = '#191919';
 
 export const DEFAULT_MENU_SUBMENU_INDENT = '1.25rem';