Unify Coming Soon admin site status badge with WooCommerce's

includes/AdminBarSiteStatusBadge.php

@@ -0,0 +1,150 @@
+<?php
+
+namespace NewfoldLabs\WP\Module\ComingSoon;
+
+use NewfoldLabs\WP\ModuleLoader\Container;
+use WP_Admin_Bar;
+
+/**
+ * Add site status badge (Coming Soon or Live) to WP admin bar.
+ * If WooCommerce is active, this badge will not be added.
+ * Instead, WooCommerce's site visibility badge will be displayed.
+ */
+class AdminBarSiteStatusBadge {
+	/**
+	 * Container.
+	 *
+	 * @var Container
+	 */
+	private $container;
+
+	/**
+	 * Default values.
+	 *
+	 * @var array
+	 */
+	private $defaults = array();
+
+	/**
+	 * Constructor.
+	 * 
+	 * @param Container $container Container.
+	 */
+	public function __construct( Container $container ) {
+		// Bail if WooCommerce is active.
+		if ( isWoocommerceActive() ) {
+			return;
+		}
+
+		$this->container = $container;
+
+		$this->defaults = array(
+			'admin_bar_cs_active'   => __( 'Coming soon', 'newfold-module-coming-soon' ),
+			'admin_bar_cs_inactive' => __( 'Live', 'newfold-module-coming-soon' ),
+		);
+
+		add_action( 'admin_bar_menu', array( $this, 'site_status_badge' ), 31 );
+		add_action( 'wp_head', array( $this, 'site_status_badge_styles' ) );
+		add_action( 'admin_head', array( $this, 'site_status_badge_styles' ) );
+		add_action( 'update_option_nfd_coming_soon', array( __CLASS__, 'site_status_badge_timer' ), 10, 2 );
+	}
+
+	/**
+	 * Add site status badge to WP admin bar.
+	 *
+	 * @param WP_Admin_Bar $admin_bar An instance of the WP_Admin_Bar class.
+	 */
+	public function site_status_badge( WP_Admin_Bar $admin_bar ): void {
+		if ( current_user_can( 'manage_options' ) ) {
+
+			$is_coming_soon = isComingSoonActive();
+			$title          = $is_coming_soon ? $this->defaults['admin_bar_cs_active'] : $this->defaults['admin_bar_cs_inactive'];
+			$class          = $this->site_status_badge_class( $is_coming_soon );
+
+			$site_status_menu = array(
+				'id'     => 'nfd-site-visibility-badge',
+				'parent' => 'root-default',
+				'href'   => admin_url( 'admin.php?page=' . $this->container->plugin()->id . '&nfd-target=coming-soon-section#/settings' ),
+				'title'  => $title,
+				'meta'   => array(
+					'class' => 'nfd-site-status-badge-' . $class,
+				),
+			);
+			$admin_bar->add_menu( $site_status_menu );
+		}
+	}
+
+	/**
+	 * Determine the class for the site status badge.
+	 *
+	 * @param bool $is_coming_soon Whether the site is in Coming Soon mode.
+	 */
+	private function site_status_badge_class( $is_coming_soon ): string {
+		$class = $is_coming_soon ? 'coming-soon' : 'live';
+
+		// Hide badge if the site has been live for more than 10 minutes.
+		if ( ! $is_coming_soon && ! get_transient( 'nfd_coming_soon_site_status_badge_timer' ) ) {
+			$class = 'hidden';
+		}
+
+		return $class;
+	}
+
+	/**
+	 * Output CSS for site status badge.
+	 */
+	public function site_status_badge_styles(): void {
+		if ( is_admin_bar_showing() ) {
+			?>
+			<style>
+				#wpadminbar .quicklinks #wp-admin-bar-nfd-site-visibility-badge a.ab-item {
+					background-color: #F6F7F7;
+					color: black;
+					margin-top:7px;
+					padding: 0 6px;
+					height: 18px;
+					line-height: 17px;
+					border-radius: 2px;
+				}
+
+				#wpadminbar .quicklinks #wp-admin-bar-nfd-site-visibility-badge a.ab-item:hover,
+				#wpadminbar .quicklinks #wp-admin-bar-nfd-site-visibility-badge a.ab-item:focus {
+					background-color: #DCDCDE;
+				}
+
+				#wpadminbar .quicklinks #wp-admin-bar-nfd-site-visibility-badge a.ab-item:focus {
+					outline: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color-darker-20);
+				}
+
+				#wpadminbar .quicklinks #wp-admin-bar-nfd-site-visibility-badge.nfd-site-status-badge-live a.ab-item {
+					background-color: #E6F2E8;
+					color: #00450C;
+				}
+
+				#wpadminbar .quicklinks #wp-admin-bar-nfd-site-visibility-badge.nfd-site-status-badge-live a.ab-item:hover,
+				#wpadminbar .quicklinks #wp-admin-bar-nfd-site-visibility-badge.nfd-site-status-badge-live a.ab-item:focus {
+					background-color: #B8E6BF;
+				}
+
+				#wpadminbar .quicklinks #wp-admin-bar-nfd-site-visibility-badge.nfd-site-status-badge-hidden {
+					display: none;
+				}
+			</style>
+			<?php
+		}
+	}
+
+	/**
+	 * Set 10 minutes transient timer for site status badge when coming soon is turned off.
+	 * 
+	 * @param bool $old_value The old option value.
+	 * @param bool $new_value The new option value.
+	 */
+	public static function site_status_badge_timer( $old_value, $new_value ): void {
+		$value = wp_validate_boolean( $new_value );
+
+		if ( false === $value ) {
+			set_transient( 'nfd_coming_soon_site_status_badge_timer', true, 10 * MINUTE_IN_SECONDS );
+		}
+	}
+}

includes/ComingSoon.php

@@ -24,10 +24,6 @@ public function __construct( Container $container ) {
 			'admin_screen_id'       => container()->plugin()->id,
 			'admin_app_url'         => \admin_url( 'admin.php?page=newfold' ),
 			'admin_notice_text'     => __( 'Your site has Coming Soon mode active.', 'newfold-module-coming-soon' ),
-			'admin_bar_text'        => '<div>' . __( 'Coming Soon Active', 'newfold-module-coming-soon' ) . '</div>',
-			'admin_bar_label'       => __( 'Site Status: ', 'newfold-module-coming-soon' ),
-			'admin_bar_cs_active'   => __( 'Not Live', 'newfold-module-coming-soon' ),
-			'admin_bar_cs_inactive' => __( 'Live', 'newfold-module-coming-soon' ),
 			'template_page_title'   => __( 'Coming Soon!', 'newfold-module-coming-soon' ),
 			'template_styles'       => false,
 			'template_content'      => false,
@@ -49,6 +45,9 @@ public function __construct( Container $container ) {
 			// add plugin version to plugin styles file for cache busting
 			$this->args['template_styles'] = $this->args['template_styles'] . '?v=' . container()->plugin()->version;
 		}
+
+		new WooCommerceOptionsSync();
+
 		// set up all actions
 		\add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_admin_scripts' ) );
 		\add_action( 'rest_api_init', array( $this, 'rest_api_init' ) );
@@ -58,15 +57,13 @@ public function __construct( Container $container ) {
 		\add_action( 'wp_ajax_newfold_coming_soon_subscribe', array( $this, 'coming_soon_subscribe' ) );
 		\add_action( 'wp_ajax_nopriv_newfold_coming_soon_subscribe', array( $this, 'coming_soon_subscribe' ) );
 		\add_action( 'plugins_loaded', array( $this, 'coming_soon_prevent_emails' ) );
-		\add_action( 'admin_bar_menu', array( $this, 'newfold_site_status' ), 100 );
-		\add_action( 'wp_body_open', array( $this, 'site_preview_warning' ) );
-		\add_action( 'admin_head', array( $this, 'admin_bar_coming_soon_admin_styles' ) );
-		\add_action( 'wp_head', array( $this, 'admin_bar_coming_soon_admin_styles' ) );
 		\add_filter( 'default_option_nfd_coming_soon', array( $this, 'filter_coming_soon_fallback' ) );
 		\add_action( 'update_option_nfd_coming_soon', array( $this, 'on_update_nfd_coming_soon' ), 10, 2 );
 		\add_action( 'update_option_mm_coming_soon', array( $this, 'on_update_mm_coming_soon' ), 10, 2 );
 		\add_filter( 'jetpack_is_under_construction_plugin', array( $this, 'filter_jetpack_is_under_construction' ) );
 
+		new AdminBarSiteStatusBadge( $container );
+		new SitePreviewWarning();
 		new PrePublishModal();
 	}
 
@@ -245,99 +242,6 @@ public function notice_display() {
 		}
 	}
 
-	/**
-	 * Some basic styles to control visibility of the coming soon state in the admin bar
-	 */
-	public function admin_bar_coming_soon_admin_styles() {
-		if( is_user_logged_in() ) {
-			?>
-			<style>
-				#nfd-site-status {
-					align-items: center;
-					background-color: #F8F8F8;
-					border-radius: 2px;
-					border-style: solid;
-					border-width: 1px;
-					color: #333333;
-					display: flex;
-					font-weight: 500;
-					gap: 2px;
-					height: 22px;
-					margin-top: 4px;
-					padding: 0 14px;
-				}
-
-				#wpadminbar #wp-admin-bar-site-status .ab-item{
-					height:22px;
-				}
-
-				#nfd-site-status[data-coming-soon="true"] {
-					border-color: var(--Dark-Red, #C71919);
-				}
-
-				#nfd-site-status[data-coming-soon="false"] {
-					border-color: var(--A11y-GRN, #278224);
-				}
-
-				#nfd-site-status span { 
-					display: none;
-					text-transform: uppercase;
-					font-weight: 500;
-				}
-
-				#nfd-site-status[data-coming-soon="true"] #nfd-site-status-coming-soon {
-					color: var(--Dark-Red, #C71919);
-					display: inline-block;
-				}
-
-				#nfd-site-status[data-coming-soon="false"] #nfd-site-status-live {
-					color: var(--A11y-GRN, #278224);
-					display: inline-block;
-				}
-			</style>
-		<?php
-		}
-	}
-
-	/**
-	 * Customize the admin bar with site status.
-	 *
-	 * @param \WP_Admin_Bar $admin_bar An instance of the WP_Admin_Bar class.
-	 */
-	public function newfold_site_status( \WP_Admin_Bar $admin_bar ) {
-		if ( current_user_can( 'manage_options' ) ) {
-
-			$is_coming_soon = isComingSoonActive();
-			$current_state  = $is_coming_soon ? 'true' : 'false';
-			$content        = '<div id="nfd-site-status" data-coming-soon="' . $current_state . '">';
-			$content        .= $this->args['admin_bar_label'];
-			$content        .= '<span id="nfd-site-status-coming-soon" class="nfd-coming-soon-active">';
-			$content        .= $this->args['admin_bar_cs_active'];
-			$content        .= '</span>';
-			$content        .= '<span id="nfd-site-status-live" class="nfd-coming-soon-inactive">';
-			$content        .= $this->args['admin_bar_cs_inactive'];
-			$content        .= '</span>';
-			$content        .= '</div>';
-
-			$site_status_menu = array(
-				'id'     => 'site-status',
-				'parent' => 'top-secondary',
-				'href'   => admin_url( 'admin.php?page=' . $this->container->plugin()->id . '&nfd-target=coming-soon-section#/settings' ),
-				'title'  => $content,
-			);
-			$admin_bar->add_menu( $site_status_menu );
-		}
-	}
-
-	/**
-	 * Load warning on site Preview
-	 */
-	public function site_preview_warning() {
-		if ( isComingSoonActive() ) {
-			echo "<div style='background-color: #e71616; padding: 0 16px;color:#ffffff;font-size:16px;text-align:center;font-weight: 590;'>" . esc_html__( 'Site Preview - This site is NOT LIVE, only admins can see this view.', 'newfold-module-coming-soon' ) . "</div>";
-		}
-	}
-
 	/**
 	 * Load the coming soon page, if necessary.
 	 */

includes/SitePreviewWarning.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace NewfoldLabs\WP\Module\ComingSoon;
+
+/**
+ * Display a site preview warning when the site is not live.
+ * If WooCommerce is active, this warning will not be displayed.
+ * Instead, WooCommerce's warning will be displayed.
+ */
+class SitePreviewWarning {
+	/**
+	 * Constructor.
+	 */
+	public function __construct() {
+		// Bail if WooCommerce is active or if the site is live.
+		if ( isWoocommerceActive() || ! isComingSoonActive() ) {
+			return;
+		}
+
+		add_action( 'wp_body_open', array( $this, 'site_preview_warning' ) );
+	}
+
+	/**
+	 * Display site preview warning.
+	 */
+	public function site_preview_warning() {
+		echo "<div class='nfd-site-preview-warning' style='background-color: #e71616; padding: 0 16px;color:#ffffff;font-size:16px;text-align:center;font-weight: 590;'>" . esc_html__( 'Site Preview - This site is NOT LIVE, only admins can see this view.', 'newfold-module-coming-soon' ) . "</div>";
+	}
+}