Mega Menus Mobile Centering

CHANGELOG.md

@@ -5,6 +5,17 @@ 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).
 
+## [2.5.6] - 2026-01-21
+
+### Fixed
+**Mega Menu Overlay Mode:**
+- Fixed close button positioning in overlay mode - now anchored to bottom-right corner (20px from edges) instead of top-right
+- Improved close button visibility and user experience on mobile devices
+
+### Technical
+- Optimized variable alignment in render.php for improved code readability
+- Regenerated CSS build files with updated close button positioning",
+
 ## [2.5.5] - 2026-01-21
 
 ### Added

blocks/mega-menu/build/render.php

@@ -9,17 +9,17 @@
 	exit; // Exit if accessed directly.
 }
 
-$elayne_blocks_label              = esc_html( $attributes['label'] ?? '' );
-$elayne_blocks_label_color        = esc_attr( $attributes['labelColor'] ?? '' );
-$elayne_blocks_description        = esc_html( $attributes['description'] ?? '' );
-$elayne_blocks_menu_slug          = esc_attr( $attributes['menuSlug'] ?? '' );
-$elayne_blocks_layout_mode        = esc_attr( $attributes['layoutMode'] ?? 'dropdown' );
-$elayne_blocks_enable_animations  = $attributes['enableAnimations'] ?? false;
-$elayne_blocks_animation_type     = esc_attr( $attributes['animationType'] ?? 'fade' );
-$elayne_blocks_animation_speed    = absint( $attributes['animationSpeed'] ?? 300 );
-$elayne_blocks_enable_icon        = $attributes['enableIcon'] ?? false;
-$elayne_blocks_icon_name          = esc_attr( $attributes['iconName'] ?? '' );
-$elayne_blocks_icon_position      = esc_attr( $attributes['iconPosition'] ?? 'left' );
+$elayne_blocks_label             = esc_html( $attributes['label'] ?? '' );
+$elayne_blocks_label_color       = esc_attr( $attributes['labelColor'] ?? '' );
+$elayne_blocks_description       = esc_html( $attributes['description'] ?? '' );
+$elayne_blocks_menu_slug         = esc_attr( $attributes['menuSlug'] ?? '' );
+$elayne_blocks_layout_mode       = esc_attr( $attributes['layoutMode'] ?? 'dropdown' );
+$elayne_blocks_enable_animations = $attributes['enableAnimations'] ?? false;
+$elayne_blocks_animation_type    = esc_attr( $attributes['animationType'] ?? 'fade' );
+$elayne_blocks_animation_speed   = absint( $attributes['animationSpeed'] ?? 300 );
+$elayne_blocks_enable_icon       = $attributes['enableIcon'] ?? false;
+$elayne_blocks_icon_name         = esc_attr( $attributes['iconName'] ?? '' );
+$elayne_blocks_icon_position     = esc_attr( $attributes['iconPosition'] ?? 'left' );
 // Handle migration: old blocks may have 'auto', convert to 'left'.
 $elayne_blocks_dropdown_alignment = esc_attr( $attributes['dropdownAlignment'] ?? 'left' );
 if ( 'auto' === $elayne_blocks_dropdown_alignment ) {

blocks/mega-menu/build/view.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('@wordpress/interactivity'), 'version' => '31eaa5e1fef88ae7a8ab', 'type' => 'module');
+<?php return array('dependencies' => array('@wordpress/interactivity'), 'version' => '6d359e218cd7084030d3', 'type' => 'module');

blocks/mega-menu/src/style.scss

@@ -254,11 +254,15 @@ $z-index-close-button: 100;
         }
     }
 
-    // Close button more prominent in overlay
+    // Close button more prominent in overlay - positioned bottom-left
     .menu-container__close-button {
         opacity: 1;
         background-color: rgba(0, 0, 0, 0.6);
         color: white;
+        top: auto;
+        bottom: 20px;
+        right: auto;
+        left: 20px;
 
         &:hover {
             background-color: rgba(0, 0, 0, 0.8);

blocks/mega-menu/src/view.js

@@ -4,7 +4,7 @@
  *
  * @see https://developer.wordpress.org/block-editor/reference-guides/interactivity-api/
  */
-import { store, getContext, getElement } from '@wordpress/interactivity';
+import { store, getContext, getElement, withScope } from '@wordpress/interactivity';
 
 const { state, actions } = store( 'elayne/mega-menu', {
 	state: {
@@ -169,9 +169,10 @@ const { state, actions } = store( 'elayne/mega-menu', {
 			context.lastFocusable = focusableElements[ focusableElements.length - 1 ];
 
 			// Focus first element after a short delay
-			setTimeout( () => {
-				context.firstFocusable?.focus();
-			}, 100 );
+			setTimeout( withScope( () => {
+				const ctx = getContext();
+				ctx.firstFocusable?.focus();
+			} ), 100 );
 		},
 
 		returnFocus() {
@@ -236,10 +237,10 @@ const { state, actions } = store( 'elayne/mega-menu', {
 
 			// Add resize listener for mobile detection and full-width positioning
 			if ( ! context.resizeListenerAdded ) {
-				window.addEventListener( 'resize', () => {
+				window.addEventListener( 'resize', withScope( () => {
 					actions.updateMobileState();
 					actions.positionFullWidthPanel();
-				} );
+				} ) );
 				context.resizeListenerAdded = true;
 			}
 		},

elayne-blocks.php

@@ -3,7 +3,7 @@
  * Plugin Name: Elayne Blocks
  * Plugin URI: https://github.com/imagewize/elayne-blocks
  * Description: Custom blocks for the Elayne WordPress theme including Mega Menu, Carousel, and Slide blocks
- * Version: 2.5.5
+ * Version: 2.5.6
  * Requires at least: 6.7
  * Requires PHP: 7.3
  * Author: Jasper Frumau
@@ -23,7 +23,7 @@
 	die;
 }
 
-define( 'ELAYNE_BLOCKS_VERSION', '2.5.5' );
+define( 'ELAYNE_BLOCKS_VERSION', '2.5.6' );
 define( 'ELAYNE_BLOCKS_PLUGIN_DIR', plugin_dir_path( __FILE__ ) );
 define( 'ELAYNE_BLOCKS_PLUGIN_URL', plugin_dir_url( __FILE__ ) );
 

patterns/mega-menu-icon-features.php

@@ -7,7 +7,7 @@
  * Description: Feature grid with styled icon containers and descriptions
  */
 ?>
-<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|medium","bottom":"var:preset|spacing|medium","left":"var:preset|spacing|medium","right":"var:preset|spacing|medium"}}},"layout":{"type":"grid","minimumColumnWidth":"18rem"}} -->
+<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|medium","bottom":"var:preset|spacing|medium","left":"var:preset|spacing|medium","right":"var:preset|spacing|medium"}}},"layout":{"type":"grid","columnCount":null,"minimumColumnWidth":"18rem"}} -->
 <div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--medium)"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|small"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"top"}} -->
 <div class="wp-block-group"><!-- wp:paragraph {"align":"center","style":{"spacing":{"padding":{"top":"14px","bottom":"14px","left":"14px","right":"14px"}},"layout":{"selfStretch":"fixed","flexSize":"52px"},"border":{"radius":"10px"}},"backgroundColor":"accent","textColor":"base"} -->
 <p class="has-text-align-center has-base-color has-accent-background-color has-text-color has-background" style="border-radius:10px;padding-top:14px;padding-right:14px;padding-bottom:14px;padding-left:14px"><strong>→</strong></p>

patterns/mega-menu-icon-grid.php

@@ -7,7 +7,7 @@
  * Description: Grid layout with icons and service links
  */
 ?>
-<!-- wp:group {"align":"wide","layout":{"type":"grid","minimumColumnWidth":"18rem"}} -->
+<!-- wp:group {"align":"wide","layout":{"type":"grid","columnCount":null,"minimumColumnWidth":"18rem"}} -->
 <div class="wp-block-group alignwide"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|small"}},"layout":{"type":"constrained"}} -->
 <div class="wp-block-group"><!-- wp:paragraph {"align":"center","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size">📦</p>

patterns/mega-menu-multi-column.php

@@ -7,7 +7,7 @@
  * Description: Full-width multi-column organized link layout
  */
 ?>
-<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|medium","bottom":"var:preset|spacing|medium","left":"var:preset|spacing|medium","right":"var:preset|spacing|medium"}}},"layout":{"type":"grid","minimumColumnWidth":"15rem"}} -->
+<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|medium","bottom":"var:preset|spacing|medium","left":"var:preset|spacing|medium","right":"var:preset|spacing|medium"}}},"layout":{"type":"grid","columnCount":null,"minimumColumnWidth":"15rem"}} -->
 <div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--medium)"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|small"}},"layout":{"type":"constrained"}} -->
 <div class="wp-block-group"><!-- wp:heading {"level":4,"fontSize":"medium"} -->
 <h4 class="wp-block-heading has-medium-font-size">Company</h4>

patterns/mega-menu-services-showcase.php

@@ -8,7 +8,7 @@
  * Inserter: true
  */
 ?>
-<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|medium","bottom":"var:preset|spacing|medium","left":"var:preset|spacing|medium","right":"var:preset|spacing|medium"},"blockGap":"var:preset|spacing|medium"}},"layout":{"type":"grid","minimumColumnWidth":"19rem"}} -->
+<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|medium","bottom":"var:preset|spacing|medium","left":"var:preset|spacing|medium","right":"var:preset|spacing|medium"},"blockGap":"var:preset|spacing|medium"}},"layout":{"type":"grid","columnCount":null,"minimumColumnWidth":"19rem"}} -->
 <div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--medium)"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|small"}},"layout":{"type":"constrained"}} -->
 <div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|large","bottom":"var:preset|spacing|large","left":"var:preset|spacing|large","right":"var:preset|spacing|large"},"blockGap":"var:preset|spacing|medium"},"border":{"radius":"12px"},"dimensions":{"minHeight":"240px"}},"backgroundColor":"primary","textColor":"base","layout":{"type":"constrained","justifyContent":"left"}} -->
 <div class="wp-block-group has-base-color has-primary-background-color has-text-color has-background" style="border-radius:12px;min-height:240px;padding-top:var(--wp--preset--spacing--large);padding-right:var(--wp--preset--spacing--large);padding-bottom:var(--wp--preset--spacing--large);padding-left:var(--wp--preset--spacing--large)"><!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","justifyContent":"space-between","verticalAlignment":"top"}} -->

patterns/mega-menu-three-column.php

@@ -7,7 +7,7 @@
  * Description: Three column layout with product categories and links
  */
 ?>
-<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|medium","bottom":"var:preset|spacing|medium","left":"var:preset|spacing|medium","right":"var:preset|spacing|medium"}}},"layout":{"type":"grid","minimumColumnWidth":"18rem"}} -->
+<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|medium","bottom":"var:preset|spacing|medium","left":"var:preset|spacing|medium","right":"var:preset|spacing|medium"}}},"layout":{"type":"grid","columnCount":null,"minimumColumnWidth":"18rem"}} -->
 <div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--medium);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--medium)"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|small"}},"layout":{"type":"constrained"}} -->
 <div class="wp-block-group"><!-- wp:heading {"level":3,"fontSize":"medium"} -->
 <h3 class="wp-block-heading has-medium-font-size">Products</h3>

readme.txt

@@ -4,7 +4,7 @@ Tags: blocks, gutenberg, carousel, mega-menu, slider
 Requires at least: 6.7
 Tested up to: 6.9
 Requires PHP: 7.3
-Stable tag: 2.5.5
+Stable tag: 2.5.6
 License: GPL v3 or later
 License URI: https://www.gnu.org/licenses/gpl-3.0.html
 
@@ -125,6 +125,11 @@ It's WordPress's official frontend reactivity system. The mega menu block uses i
 
 == Changelog ==
 
+= 2.5.6 =
+* Fixed: Mega Menu overlay close button positioning - moved to bottom-right corner for better mobile UX
+* Technical: Code formatting improvements in render.php"
+
+
 = 2.5.5 =
 * Added: Menu template part area registration in plugin (removes theme dependency)
 * Added: Services Showcase mega menu pattern with three-column nested card layout"