Add logic to add custom advanced tab [TMZ-89][TMZ-91]

modules/template-parts/assets/js/hello-plus-template-parts-editor.js

@@ -1,12 +1,21 @@
 export default class helloPlusLogo {
 	constructor() {
 		elementor.channels.editor.on( 'helloPlusLogo:change', this.openSiteIdentity );
+		elementor.hooks.addFilter( 'elements/widget/controls/common/default', this.resetCommonControls.bind( this ) );
 	}
 
 	async openSiteIdentity() {
 		await $e.run( 'panel/global/open' );
 		$e.route( 'panel/global/settings-site-identity' );
 	}
+
+	resetCommonControls( commonControls, widgetType ) {
+		if ( widgetType.startsWith( 'ehp-' ) ) {
+			return null;
+		}
+
+		return commonControls;
+	}
 }
 
 const HelloPlusLogoClass = new helloPlusLogo();

modules/template-parts/classes/control-media-preview.php

@@ -9,7 +9,7 @@
 
 class Control_Media_Preview extends Control_Media {
 
-	const CONTROL_TYPE = 'emp-media-preview';
+	const CONTROL_TYPE = 'ehp-media-preview';
 
 	public function get_type() {
 		return self::CONTROL_TYPE;

modules/template-parts/classes/render/widget-footer-render.php

@@ -32,9 +32,14 @@ public function render(): void {
 			$layout_classnames .= ' has-box-border';
 		}
 
-		$this->widget->add_render_attribute( 'layout', [
+		$render_attributes = [
 			'class' => $layout_classnames,
-		] );
+		];
+
+		$this->widget->add_render_attribute( 'layout', $render_attributes );
+
+		$this->maybe_add_advanced_attributes();
+
 		?>
 		<div <?php $this->widget->print_render_attribute_string( 'layout' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
 			<div class="ehp-footer__row">
@@ -49,6 +54,25 @@ public function render(): void {
 		<?php
 	}
 
+
+	protected function maybe_add_advanced_attributes() {
+		$advanced_css_id = $this->settings['advanced_custom_css_id'];
+		$advanced_css_classes = $this->settings['advanced_custom_css_classes'];
+
+		$wrapper_render_attributes = [];
+		if ( ! empty( $advanced_css_classes ) ) {
+			$wrapper_render_attributes['class'] = $advanced_css_classes;
+		}
+
+		if ( ! empty( $advanced_css_id ) ) {
+			$wrapper_render_attributes['id'] = $advanced_css_id;
+		}
+		if ( empty( $wrapper_render_attributes ) ) {
+			return;
+		}
+		$this->widget->add_render_attribute( '_wrapper', $wrapper_render_attributes );
+	}
+
 	public function render_side_content(): void {
 		$description_text = $this->settings['footer_description'];
 		$description_tag = $this->settings['footer_description_tag'] ?? 'p';

modules/template-parts/classes/render/widget-header-render.php

@@ -55,24 +55,47 @@ public function render(): void {
 			$layout_classnames .= ' has-behavior-onscroll-' . $behavior_on_scroll;
 		}
 
-		$this->widget->add_render_attribute( 'layout', [
+		$render_attributes = [
 			'class' => $layout_classnames,
 			'data-scroll-behavior' => $behavior_on_scroll,
 			'data-behavior-float' => $behavior_float,
-		] );
+		];
+
+		$this->widget->add_render_attribute( 'layout', $render_attributes );
+
+		$this->maybe_add_advanced_attributes();
+
 		?>
 		<div <?php $this->widget->print_render_attribute_string( 'layout' ); ?>>
 			<div class="ehp-header__elements-container">
 				<?php
-					$this->render_site_link();
-					$this->render_navigation();
-					$this->render_ctas_container();
+				$this->render_site_link();
+				$this->render_navigation();
+				$this->render_ctas_container();
 				?>
 			</div>
 		</div>
 		<?php
 	}
 
+	protected function maybe_add_advanced_attributes() {
+		$advanced_css_id = $this->settings['advanced_custom_css_id'];
+		$advanced_css_classes = $this->settings['advanced_custom_css_classes'];
+
+		$wrapper_render_attributes = [];
+		if ( ! empty( $advanced_css_classes ) ) {
+			$wrapper_render_attributes['class'] = $advanced_css_classes;
+		}
+
+		if ( ! empty( $advanced_css_id ) ) {
+			$wrapper_render_attributes['id'] = $advanced_css_id;
+		}
+		if ( empty( $wrapper_render_attributes ) ) {
+			return;
+		}
+		$this->widget->add_render_attribute( '_wrapper', $wrapper_render_attributes );
+	}
+
 	public function render_site_link(): void {
 		$site_logo_brand_select = $this->settings['site_logo_brand_select'];
 
@@ -171,9 +194,9 @@ public function render_navigation(): void {
 
 		<nav <?php $this->widget->print_render_attribute_string( 'main-menu' ); ?>>
 			<?php
-				// PHPCS - escaped by WordPress with "wp_nav_menu"
-				echo $menu_html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
-				$this->render_ctas_container();
+			// PHPCS - escaped by WordPress with "wp_nav_menu"
+			echo $menu_html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+			$this->render_ctas_container();
 			?>
 		</nav>
 		<?php
@@ -195,13 +218,13 @@ private function render_menu_toggle() {
 		?>
 		<button <?php $this->widget->print_render_attribute_string( 'button-toggle' ); ?>>
 			<?php
-				Icons_Manager::render_icon( $toggle_icon,
-					[
-						'aria-hidden' => 'true',
-						'class' => 'ehp-header__toggle-icon ehp-header__toggle-icon--open',
-						'role' => 'presentation',
-					]
-				);
+			Icons_Manager::render_icon( $toggle_icon,
+				[
+					'aria-hidden' => 'true',
+					'class' => 'ehp-header__toggle-icon ehp-header__toggle-icon--open',
+					'role' => 'presentation',
+				]
+			);
 			?>
 			<i class="eicon-close ehp-header__toggle-icon ehp-header__toggle-icon--close"></i>
 			<span class="elementor-screen-only"><?php esc_html_e( 'Menu', 'hello-plus' ); ?></span>
@@ -221,14 +244,14 @@ protected function render_ctas_container() {
 			'class' => $ctas_container_classnames,
 		] );
 		?>
-			<div <?php $this->widget->print_render_attribute_string( 'ctas-container' ); ?>>
+		<div <?php $this->widget->print_render_attribute_string( 'ctas-container' ); ?>>
 			<?php if ( $has_primary_button ) {
 				$this->render_button( 'primary' );
 			} ?>
 			<?php if ( $has_secondary_button ) {
 				$this->render_button( 'secondary' );
 			} ?>
-			</div>
+		</div>
 		<?php
 	}
 
@@ -260,7 +283,7 @@ protected function render_button( $type ) {
 			$button_classnames .= ' has-shape-' . $button_corner_shape;
 		}
 
-		$this->widget->add_render_attribute(  $type . '-button', [
+		$this->widget->add_render_attribute( $type . '-button', [
 			'class' => $button_classnames,
 		] );
 
@@ -271,12 +294,12 @@ protected function render_button( $type ) {
 		?>
 		<a <?php $this->widget->print_render_attribute_string( $type . '-button' ); ?>>
 			<?php
-				Icons_Manager::render_icon( $button_icon,
-					[
-						'aria-hidden' => 'true',
-						'class' => 'ehp-header__button-icon',
-					]
-				);
+			Icons_Manager::render_icon( $button_icon,
+				[
+					'aria-hidden' => 'true',
+					'class' => 'ehp-header__button-icon',
+				]
+			);
 			?>
 			<?php echo esc_html( $button_text ); ?>
 		</a>

modules/template-parts/components/document.php

@@ -31,8 +31,10 @@ public function register( Documents_Manager $documents_manager ) {
 
 		foreach ( $documents as $document ) {
 			$doc_class = '\HelloPlus\Modules\TemplateParts\Documents\\' . $document;
+
 			// add the doc type to Elementor documents:
 			$documents_manager->register_document_type( $doc_class::get_type(), $doc_class );
+
 			$doc_class::register_hooks();
 		}
 	}

modules/template-parts/documents/document-base.php

@@ -7,8 +7,10 @@
 }
 
 use Elementor\{
+	Controls_Manager,
 	TemplateLibrary\Source_Local,
-	Modules\Library\Documents\Library_Document
+	Modules\Library\Documents\Library_Document,
+	Utils as ElementorUtils
 };
 use HelloPlus\Includes\Utils as Theme_Utils;
 use WP_Query;
@@ -27,6 +29,7 @@ public static function get_properties(): array {
 		$properties['support_lazyload'] = false;
 		$properties['condition_type'] = 'general';
 		$properties['allow_adding_widgets'] = false;
+		$properties['show_navigator'] = false;
 		$properties['support_page_layout'] = false;
 		$properties['allow_closing_remote_library'] = false;
 
@@ -49,12 +52,6 @@ public function get_css_wrapper_selector(): string {
 		return '.ehp-' . $this->get_main_id();
 	}
 
-	//phpcs:disable
-//	protected static function get_editor_panel_categories(): array {
-//		return [ Module::HELLO_PLUS_EDITOR_CATEGORY_SLUG ];
-//	}
-	//phpcs:enable
-
 	protected function get_remote_library_config(): array {
 		$config = parent::get_remote_library_config();
 
@@ -99,6 +96,7 @@ public static function get_document_post(): ?int {
 		);
 		$query = new WP_Query( $args );
 		$posts = $query->posts;
+
 		return ( 1 !== count( $posts ) ) ? null : $posts[0];
 	}
 

modules/template-parts/documents/header.php

@@ -10,6 +10,7 @@
  * class Header
  **/
 class Header extends Document_Base {
+
 	public static function get_template_hook(): string {
 		return 'get_header';
 	}

modules/template-parts/templates/footer.php

@@ -1,13 +1,17 @@
 <?php
+
 use HelloPlus\Modules\TemplateParts\Documents\Footer;
 use HelloPlus\Includes\Utils as Theme_Utils;
 
 if ( ! defined( 'ABSPATH' ) ) {
 	exit; // Exit if accessed directly.
 }
+
 $footer_doc_post = Footer::get_document_post();
 $footer = Theme_Utils::elementor()->documents->get( $footer_doc_post );
+
 $footer->print_content();
+
 wp_footer();
 ?>
 </body>

modules/template-parts/widgets/ehp-footer.php

@@ -11,26 +11,22 @@
 use Elementor\Group_Control_Box_Shadow;
 use Elementor\Group_Control_Typography;
 use Elementor\Repeater;
-use Elementor\Utils;
-use Elementor\Widget_Base;
 use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
 use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
 
 use HelloPlus\Includes\Utils as Theme_Utils;
 
-use HelloPlus\Modules\Theme\Classes\Control_Media_Preview;
 use HelloPlus\Modules\TemplateParts\Classes\{
-	Traits\Shared_Header_Traits,
 	Render\Widget_Footer_Render
 };
 
 use HelloPlus\Modules\Theme\Module as Theme_Module;
 
-class Ehp_Footer extends Widget_Base {
-	use Shared_Header_Traits;
+
+class Ehp_Footer extends Ehp_Widget_Base {
 
 	public function get_name(): string {
-		return 'emp-footer';
+		return 'ehp-footer';
 	}
 
 	public function get_title(): string {
@@ -69,6 +65,7 @@ protected function render(): void {
 	protected function register_controls(): void {
 		$this->add_content_section();
 		$this->add_style_section();
+		$this->add_advanced_tab();
 	}
 
 	public function add_content_section(): void {

modules/template-parts/widgets/ehp-header.php

@@ -7,28 +7,25 @@
 }
 
 use Elementor\{
-	Widget_Base,
 	Controls_Manager,
 	Group_Control_Background,
 	Group_Control_Box_Shadow,
-	Group_Control_Typography,
+	Group_Control_Typography
 };
 use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
 use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
 
 use HelloPlus\Modules\TemplateParts\Classes\{
-	Traits\Shared_Header_Traits,
 	Render\Widget_Header_Render,
 	Control_Media_Preview,
 };
 
 use HelloPlus\Modules\Theme\Module as Theme_Module;
 
-class Ehp_Header extends Widget_Base {
-	use Shared_Header_Traits;
+class Ehp_Header extends Ehp_Widget_Base {
 
 	public function get_name(): string {
-		return 'emp-header';
+		return 'ehp-header';
 	}
 
 	public function get_title(): string {
@@ -64,6 +61,7 @@ protected function render(): void {
 	protected function register_controls() {
 		$this->add_content_tab();
 		$this->add_style_tab();
+		$this->add_advanced_tab();
 	}
 
 	protected function add_content_tab() {