Merge pull request #17 from troychaplin/fix/no-wrap

Fixed issue with single nav item, added new style controls

Author: troychaplin

CHANGELOG.md

@@ -0,0 +1,71 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+Prefix the change with one of these keywords:
+
+-   _Added_: for new features.
+-   _Changed_: for changes in existing functionality.
+-   _Deprecated_: for soon-to-be removed features.
+-   _Removed_: for now removed features.
+-   _Fixed_: for any bug fixes.
+-   _Security_: in case of vulnerabilities.
+
+## [Unreleased]
+
+-   _Added_: Editor preview of the More button that reflects label, colors, and padding settings
+-   _Added_: Transform to convert Priority Plus Navigation back to standard Navigation block
+-   _Added_: Mobile collapse option to collapse all items into the toggle button at the mobile breakpoint (enabled by default)
+-   _Added_: Button border controls (color, width, style) with per-side support in new "Priority Plus Button Border" panel
+-   _Added_: Button border radius control with per-corner support
+-   _Changed_: All items can now move into the dropdown when space is insufficient, removing the forced minimum of one visible item
+-   _Fixed_: Navigation items and More button no longer wrap to a second line
+-   _Fixed_: Initial page load now correctly calculates overflow and shows the More button
+-   _Fixed_: Items correctly restore from mobile collapse when resizing to desktop
+-   _Fixed_: More button chevron icon spacing — offset SVG internal padding so the arrow sits flush with the button's right edge (frontend and editor)
+
+## [1.0.0]
+
+### Core
+
+-   _Added_: Priority Plus Navigation as a block variation of the core Navigation block
+-   _Added_: Automatic overflow detection using ResizeObserver to show/hide items based on available space
+-   _Added_: Dynamic "More" dropdown that collects overflow navigation items
+-   _Added_: Support for multiple Priority Plus Navigation instances on the same page
+-   _Added_: Width caching and requestAnimationFrame for performant resize calculations
+
+### Editor Controls
+
+-   _Added_: Customizable "More" button label
+-   _Added_: Button color controls for text, background, and hover states
+-   _Added_: Button padding controls with theme spacing size support
+-   _Added_: Dropdown customizer modal with live preview
+-   _Added_: Dropdown menu color controls (background, item text, hover states)
+-   _Added_: Dropdown border controls with per-side support, radius, and box shadow
+-   _Added_: Dropdown item padding and separator styling
+-   _Added_: Submenu color controls (background, text, hover states)
+-   _Added_: Submenu indentation control for nested menu levels
+-   _Added_: Reset to defaults for all dropdown styles
+
+### Submenu & Accordion Support
+
+-   _Added_: Accordion pattern for nested submenus within the dropdown
+-   _Added_: Click mode (full button toggle) and arrow mode (separate toggle button) based on core submenu settings
+-   _Added_: Keyboard navigation with Escape key to close dropdowns and accordions
+-   _Added_: Full ARIA support for accordion expand/collapse states
+
+### Overlay Menu Compatibility
+
+-   _Added_: Automatic detection of WordPress overlay/hamburger menu state
+-   _Added_: Priority Plus disables when hamburger menu is active, re-enables on desktop
+-   _Changed_: "Always" overlay option is prevented and auto-converted to "Mobile" with editor notice
+
+### Theme Integration
+
+-   _Added_: theme.json support via `settings.custom.priorityPlusNavigation.dropdown` path
+-   _Added_: CSS custom properties for all styling options
+-   _Added_: WordPress preset value support (spacing sizes, colors)
+-   _Added_: Block-level overrides that take precedence over theme.json defaults

build/priority-plus-nav-editor-rtl.css

@@ -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' => '37d504951cbec98b7de6');
+<?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' => '34a9021994af185b8fdb');

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

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '874dfb5c427f37e2a56b');
+<?php return array('dependencies' => array(), 'version' => '276687636cd44ad78f29');

build/priority-plus-nav-editor.css

@@ -154,10 +154,15 @@ private function collect_attributes( array $block ): array {
 			'toggle_text_color'             => $this->get_priority_attr( $block, 'priorityPlusToggleTextColor', '' ),
 			'toggle_text_color_hover'       => $this->get_priority_attr( $block, 'priorityPlusToggleTextColorHover', '' ),
 			'toggle_padding'                => $this->get_priority_attr( $block, 'priorityPlusTogglePadding', array() ),
+			'toggle_border'                 => $this->get_priority_attr( $block, 'priorityPlusToggleBorder', array() ),
+			'toggle_border_radius'          => $this->get_priority_attr( $block, 'priorityPlusToggleBorderRadius', '' ),
 
 			// Core navigation attribute.
 			'overlay_menu'                  => $this->get_priority_attr( $block, 'overlayMenu', 'never' ),
 
+			// Mobile collapse.
+			'mobile_collapse'               => $this->get_priority_attr( $block, 'priorityPlusMobileCollapse', true ),
+
 			// Menu style attributes.
 			'menu_background_color'         => $this->get_priority_attr( $block, 'priorityPlusMenuBackgroundColor', '' ),
 			'menu_border'                   => $this->get_priority_attr( $block, 'priorityPlusMenuBorder', array() ),
@@ -198,10 +203,11 @@ private function inject_priority_attributes( string $block_content, array $attri
 
 		// Build data attributes string.
 		$data_attributes = sprintf(
-			'$1 data-more-label="%s" data-more-icon="%s" data-overlay-menu="%s"',
+			'$1 data-more-label="%s" data-more-icon="%s" data-overlay-menu="%s" data-mobile-collapse="%s"',
 			esc_attr( $attributes['toggle_label'] ),
 			esc_attr( $attributes['toggle_icon'] ),
-			esc_attr( $attributes['overlay_menu'] )
+			esc_attr( $attributes['overlay_menu'] ),
+			$attributes['mobile_collapse'] ? 'true' : 'false'
 		);
 
 		// Add style attribute if we have any styles.
@@ -303,6 +309,92 @@ private function add_toggle_styles( array $attributes, array $style_parts ): arr
 			}
 		}
 
+		// Convert toggle border to CSS custom properties.
+		if ( is_array( $attributes['toggle_border'] ) && ! empty( $attributes['toggle_border'] ) ) {
+			$style_parts = $this->add_toggle_border_styles( $attributes['toggle_border'], $style_parts );
+		}
+
+		// Convert toggle border radius to CSS.
+		if ( ! empty( $attributes['toggle_border_radius'] ) ) {
+			$radius_css = $this->css_converter->border_radius_to_css( $attributes['toggle_border_radius'] );
+			if ( '' !== $radius_css ) {
+				$style_parts[] = sprintf(
+					'--priority-plus-navigation--border-radius: %s',
+					esc_attr( $radius_css )
+				);
+			}
+		}
+
+		return $style_parts;
+	}
+
+	/**
+	 * Add toggle button border CSS custom properties.
+	 *
+	 * Handles both flat format (color, width, style at top level) and
+	 * per-side format (top, right, bottom, left objects).
+	 * Outputs unified --border-color, --border-width, --border-style vars.
+	 *
+	 * @param array $border      Border attribute value.
+	 * @param array $style_parts Current style parts array.
+	 * @return array Updated style parts array.
+	 */
+	private function add_toggle_border_styles( array $border, array $style_parts ): array {
+		// Flat format: { color, width, style }.
+		if ( isset( $border['color'] ) || isset( $border['width'] ) || isset( $border['style'] ) ) {
+			if ( ! empty( $border['color'] ) ) {
+				$style_parts[] = sprintf(
+					'--priority-plus-navigation--border-color: %s',
+					esc_attr( $border['color'] )
+				);
+			}
+			if ( ! empty( $border['width'] ) ) {
+				$style_parts[] = sprintf(
+					'--priority-plus-navigation--border-width: %s',
+					esc_attr( $border['width'] )
+				);
+			}
+			if ( ! empty( $border['style'] ) ) {
+				$style_parts[] = sprintf(
+					'--priority-plus-navigation--border-style: %s',
+					esc_attr( $border['style'] )
+				);
+			}
+			return $style_parts;
+		}
+
+		// Per-side format: { top: {...}, right: {...}, bottom: {...}, left: {...} }.
+		$sides  = array( 'top', 'right', 'bottom', 'left' );
+		$colors = array();
+		$widths = array();
+		$styles = array();
+
+		foreach ( $sides as $side ) {
+			if ( isset( $border[ $side ] ) && is_array( $border[ $side ] ) ) {
+				$s        = $border[ $side ];
+				$colors[] = isset( $s['color'] ) ? $s['color'] : 'transparent';
+				$widths[] = isset( $s['width'] ) ? $s['width'] : '0';
+				$styles[] = isset( $s['style'] ) ? $s['style'] : 'none';
+			} else {
+				$colors[] = 'transparent';
+				$widths[] = '0';
+				$styles[] = 'none';
+			}
+		}
+
+		$style_parts[] = sprintf(
+			'--priority-plus-navigation--border-color: %s',
+			esc_attr( implode( ' ', $colors ) )
+		);
+		$style_parts[] = sprintf(
+			'--priority-plus-navigation--border-width: %s',
+			esc_attr( implode( ' ', $widths ) )
+		);
+		$style_parts[] = sprintf(
+			'--priority-plus-navigation--border-style: %s',
+			esc_attr( implode( ' ', $styles ) )
+		);
+
 		return $style_parts;
 	}