Feature/nav block active scroll

includes/blocks/class-kadence-blocks-navigation-block.php

@@ -408,13 +408,19 @@ public function build_html( $attributes, $unique_id, $content, $block_instance )
 
 		$name = ! empty( $attributes['name'] ) ? $attributes['name'] : '';
 
-		$wrapper_attributes = get_block_wrapper_attributes(
-			array(
-				'class'      => implode( ' ', $wrapper_classes ),
-				'aria-label' => $name,
-			)
+		$wrapper_attribute_items = array(
+			'class'      => implode( ' ', $wrapper_classes ),
+			'aria-label' => $name,
+			'data-scroll-spy' => $nav_attributes['enableScrollSpy'],
 		);
 
+		if ( $nav_attributes['enableScrollSpy'] ) {
+			$wrapper_attribute_items['data-scroll-spy-offset'] = isset( $nav_attributes['scrollSpyOffsetManual'] ) && $nav_attributes['scrollSpyOffsetManual'] ? $nav_attributes['scrollSpyOffset'] : false;
+			$wrapper_attribute_items['data-scroll-spy-id'] = uniqid(); 
+		}
+
+		$wrapper_attributes = get_block_wrapper_attributes( $wrapper_attribute_items );
+
 		// Navigation Attributes.
 		$navigation_classes = array();
 
@@ -454,6 +460,14 @@ public function build_html( $attributes, $unique_id, $content, $block_instance )
 			)
 		);
 
+		if ( $nav_attributes['enableScrollSpy'] ) {
+			wp_enqueue_script( 'kadence-blocks-gumshoe', KADENCE_BLOCKS_URL . 'includes/assets/js/gumshoe.min.js', array(), KADENCE_BLOCKS_VERSION, true );
+			//need to load this script with the gumshoe dependency if scrollspy is enabled
+			wp_dequeue_script( 'kadence-blocks-' . $this->block_name );
+			wp_deregister_script( 'kadence-blocks-' . $this->block_name );
+			wp_enqueue_script( 'kadence-blocks-' . $this->block_name, KADENCE_BLOCKS_URL . 'includes/assets/js/kb-navigation-block.min.js', array('kadence-blocks-gumshoe'), KADENCE_BLOCKS_VERSION, true );
+		}
+
 		return sprintf(
 			'<div %1$s><nav %2$s><div class="menu-container"><ul %3$s>%4$s</ul></div></nav></div>',
 			$wrapper_attributes,

includes/navigation/class-kadence-navigation-cpt.php

@@ -2106,6 +2106,31 @@ public function register_meta() {
 				'default' => '',
 				'type'    => 'string',
 			),
+			array(
+				'key'     => '_kad_navigation_enableScrollSpy',
+				'type' => 'boolean',
+				'default' => false,
+			),
+			array(
+				'key'     => '_kad_navigation_scrollSpyOffsetManual',
+				'type' => 'string',
+				'default' => '',
+			),
+			array(
+				'key'     => '_kad_navigation_scrollSpyOffset',
+				'type' => 'string',
+				'default' => '',
+			),
+			array(
+				'key'     => '_kad_navigation_scrollSpyOffsetTablet',
+				'type' => 'string',
+				'default' => '',
+			),
+			array(
+				'key'     => '_kad_navigation_scrollSpyOffsetMobile',
+				'type' => 'string',
+				'default' => '',
+			),
 		);
 
 		foreach ( $register_meta as $meta ) {

kadence-blocks.php

@@ -5,7 +5,7 @@
  * Description: Advanced Page Building Blocks for Gutenberg. Create custom column layouts, backgrounds, dual buttons, icons etc.
  * Author: Kadence WP
  * Author URI: https://www.kadencewp.com
- * Version: 3.4.1
+ * Version: 3.4.2
  * Requires PHP: 7.4
  * Text Domain: kadence-blocks
  * License: GPL2+
@@ -20,7 +20,7 @@
 }
 define( 'KADENCE_BLOCKS_PATH', realpath( plugin_dir_path( __FILE__ ) ) . DIRECTORY_SEPARATOR );
 define( 'KADENCE_BLOCKS_URL', plugin_dir_url( __FILE__ ) );
-define( 'KADENCE_BLOCKS_VERSION', '3.4.1' );
+define( 'KADENCE_BLOCKS_VERSION', '3.4.2' );
 
 require_once plugin_dir_path( __FILE__ ) . 'vendor/vendor-prefixed/autoload.php';
 require_once plugin_dir_path( __FILE__ ) . 'vendor/autoload.php';

readme.txt

@@ -4,7 +4,7 @@ Tags: gutenberg, blocks, page builder, editor, gutenberg blocks
 Donate link: https://www.kadencewp.com/about-us/
 Requires at least: 6.4
 Tested up to: 6.7.1
-Stable tag: 3.4.1
+Stable tag: 3.4.2
 Requires PHP: 7.4
 License: GPLv2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
@@ -174,6 +174,10 @@ Please report security bugs found in the Kadence Blocks plugin's source code thr
 
 == Changelog ==
 
+= 3.4.2 =
+Release Date: tba
+* Add: Features for activating nav links with hash anchor links on the page
+
 = 3.4.1 =
 Release Date: December 12th 2024
 * Update: allowing splide slider options to be translated.

src/assets/js/kb-header-block.js

@@ -247,6 +247,7 @@ class KBHeader {
 				this.activeOffsetTop = this.getOffset(this.placeholderWrapper).top;
 			}
 			window.addEventListener('resize', this.updateSticky.bind(this), false);
+			window.addEventListener('hashchange', this.updateSticky.bind(this), false);
 			window.addEventListener('scroll', this.updateSticky.bind(this), false);
 			window.addEventListener('load', this.updateSticky.bind(this), false);
 			window.addEventListener('orientationchange', this.updateSticky.bind(this));