Blockbase: Add menu previews (#4717)

* Blockbase: Add menu previews

* Also reload the preview when items are removed

blockbase/functions.php

@@ -141,6 +141,20 @@ require get_template_directory() . '/inc/customizer/wp-customize-colors.php';
 require get_template_directory() . '/inc/customizer/wp-customize-color-palettes.php';
 require get_template_directory() . '/inc/customizer/wp-customize-fonts.php';
 
+// Force menus to reload
+add_action(
+	'customize_controls_enqueue_scripts',
+	static function () {
+		wp_enqueue_script(
+			'wp-customize-nav-menu-refresh',
+			get_template_directory_uri() . '/inc/customizer/wp-customize-nav-menu-refresh.js',
+			[ 'customize-nav-menus' ],
+			wp_get_theme()->get( 'Version' ),
+			true
+		);
+	}
+);
+
 /**
  * Populate the social links block with the social menu content if it exists
  *

blockbase/inc/customizer/wp-customize-nav-menu-refresh.js

@@ -0,0 +1,15 @@
+( function () {
+	// Refresh the preview when menu controls are changed
+	wp.customize.control.bind( 'change', ( control ) => {
+		if ( control.extended( wp.customize.Menus.MenuItemControl ) ) {
+			wp.customize.previewer.refresh();
+		}
+	} );
+
+	// Refresh the preview when menu items are removed
+	wp.customize.control.bind( 'remove', ( control ) => {
+		if ( control.extended( wp.customize.Menus.MenuItemControl ) ) {
+			wp.customize.previewer.refresh();
+		}
+	} );
+} )();