Merge pull request #2632 from Automattic/add/dismiss-promote-modal

assets/css/admin-notices.scss

@@ -76,7 +76,7 @@ $notice-success: #43af99;
 	}
 
 
-	button.notice-dismiss {
+	button.wpjm-notice-dismiss--icon {
 		padding: 6px;
 		color: inherit;
 		position: absolute;

assets/css/admin.scss

@@ -38,6 +38,22 @@ a.wpjm-activate-license-link:active {
 	}
 }
 
+.wpjm-dialog:not(.is-dismissible) {
+	.promote-dismiss {
+		display: none;
+	}
+}
+.promote-dismiss {
+	color: #50575e;
+	display: block;
+	font-size: 12px;
+	position: absolute;
+	right: 0;
+	left: 0;
+	text-align: center;
+	bottom: 20px;
+}
+
 .wpjm-dialog {
 	border: 0;
 	border-radius: 8px;

assets/js/admin/promote-job-modals.js

@@ -12,6 +12,7 @@ export const postOpenPromoteModal = ( dialog, href ) => {
 		<div slot="buttons" class="promote-buttons-group">
 			<a id="wpjm-promote-button" class="promote-button button button-primary" target="_blank" rel="noopener noreferrer" href="${ href }">${ job_manager_admin_params.job_listing_promote_strings.promote_job }</a>
 			<a class="promote-button button button-secondary" target="_blank" rel="noopener noreferrer" href="https://wpjobmanager.com/jobtarget?utm_source=plugin_wpjm&utm_medium=promote-dialog&utm_campaign=promoted-jobs">${ job_manager_admin_params.job_listing_promote_strings.learn_more }</a>
+			<a class="promote-dismiss wpjm-notice-dismiss" href="#">${ job_manager_admin_params.job_listing_promote_strings.dismiss }</a>
 		</div>
 	<promote-job-template>`;
 

assets/js/admin/wpjm-notice-dismiss.js

@@ -36,20 +36,16 @@ domReady( () => {
 
 	};
 
-	const wpjmNotices = document.querySelectorAll( '.wpjm-admin-notice' );
+	const wpjmNotices = document.querySelectorAll( '.wpjm-admin-notice, .wpjm-admin-modal-notice' );
 	for ( const wpjmNotice of wpjmNotices ) {
 		wpjmNotice.addEventListener( 'click', ( event ) => {
-			const noticeContainer = event.target.closest( '.wpjm-admin-notice' );
-			if ( ! noticeContainer ) {
-				return true;
-			}
 
 			if (
-				noticeContainer.dataset.dismissNonce &&
-				noticeContainer.dataset.dismissAction &&
-				event.target.classList.contains( 'notice-dismiss' )
+				wpjmNotice.dataset.dismissNonce &&
+				wpjmNotice.dataset.dismissAction &&
+				event.target.classList.contains( 'wpjm-notice-dismiss' )
 			) {
-				handleDismiss( noticeContainer );
+				handleDismiss( wpjmNotice );
 			}
 			return true;
 		} );

includes/admin/class-wp-job-manager-admin-notices.php

@@ -208,6 +208,18 @@ public static function get_notices() {
 		return $all_notices;
 	}
 
+	/**
+	 * Check if a notice was dismissed.
+	 *
+	 * @param string $notice_id Notice ID.
+	 * @param string $is_user_notification Whether it's a user-level or a global notification.
+	 *
+	 * @return bool
+	 */
+	public static function is_dismissed( $notice_id, $is_user_notification ) {
+		return ( in_array( $notice_id, self::get_dismissed_notices( $is_user_notification ), true ) );
+	}
+
 	/**
 	 * Displays notices in WP admin.
 	 *
@@ -596,7 +608,7 @@ private static function render_notice( $notice_id, $notice ) {
 		if ( $is_dismissible ) {
 			wp_enqueue_script( 'job_manager_notice_dismiss' );
 			$notice_class[]       = 'is-dismissible';
-			$notice_wrapper_extra = sprintf( ' data-dismiss-action="%1$s" data-dismiss-notice="%2$s" data-dismiss-nonce="%3$s"', esc_attr( self::DISMISS_NOTICE_ACTION ), esc_attr( $notice_id ), esc_attr( wp_create_nonce( self::DISMISS_NOTICE_ACTION ) ) );
+			$notice_wrapper_extra = self::get_dismissible_notice_wrapper_attributes( $notice_id );
 		}
 
 		echo '<div class="notice wpjm-admin-notice ' . esc_attr( implode( ' ', $notice_class ) ) . '"';
@@ -636,7 +648,7 @@ private static function render_notice( $notice_id, $notice ) {
 			}
 		}
 		if ( $is_dismissible ) {
-			echo '<button type="button" class="wpjm-button is-link notice-dismiss"><span class="screen-reader-text">' . esc_html__( 'Dismiss this notice', 'wp-job-manager' ) . '</span></button>';
+			echo '<button type="button" class="wpjm-button is-link notice-dismiss wpjm-notice-dismiss wpjm-notice-dismiss--icon"><span class="screen-reader-text">' . esc_html__( 'Dismiss this notice', 'wp-job-manager' ) . '</span></button>';
 		}
 		echo '</div>';
 		echo '</div>';
@@ -650,6 +662,17 @@ private static function render_notice( $notice_id, $notice ) {
 
 	}
 
+	/**
+	 * Get attributes for the notice wrapper for dismiss action.
+	 *
+	 * @param string $notice_id Notice ID.
+	 *
+	 * @return string
+	 */
+	public static function get_dismissible_notice_wrapper_attributes( $notice_id ) {
+		return sprintf( ' data-dismiss-action="%1$s" data-dismiss-notice="%2$s" data-dismiss-nonce="%3$s"', esc_attr( self::DISMISS_NOTICE_ACTION ), esc_attr( $notice_id ), esc_attr( wp_create_nonce( self::DISMISS_NOTICE_ACTION ) ) );
+	}
+
 	/**
 	 * Generate unique notice ID based on the updates available.
 	 *

includes/admin/class-wp-job-manager-admin.php

@@ -138,6 +138,7 @@ public function admin_enqueue_scripts() {
 					'job_listing_promote_strings' => [
 						'promote_job' => _x( 'Promote your job', 'job promotion', 'wp-job-manager' ),
 						'learn_more'  => _x( 'Learn More', 'job promotion', 'wp-job-manager' ),
+						'dismiss'     => _x( 'Don\'t show this again', 'job promotion', 'wp-job-manager' ),
 					],
 					'ajax_url'                    => admin_url( 'admin-ajax.php' ),
 					'search_users_nonce'          => wp_create_nonce( 'search-users' ),

includes/admin/class-wp-job-manager-promoted-jobs-admin.php

@@ -30,6 +30,11 @@ class WP_Job_Manager_Promoted_Jobs_Admin {
 	 */
 	private const DEACTIVATE_PROMOTION_ACTION = 'wpjm-deactivate-promotion';
 
+	/**
+	 * Notice ID for promote job modal in the job editor.
+	 */
+	private const JOB_EDITOR_MODAL_NOTICE = 'promote-job-dialog';
+
 	/**
 	 * The single instance of the class.
 	 *
@@ -49,6 +54,7 @@ public static function instance() {
 		if ( is_null( self::$instance ) ) {
 			self::$instance = new self();
 		}
+
 		return self::$instance;
 	}
 
@@ -65,6 +71,7 @@ public function __construct() {
 		add_action( 'wpjm_job_listing_bulk_actions', [ $this, 'add_action_notice' ] );
 		add_action( 'wpjm_admin_notices', [ $this, 'maybe_add_promoted_jobs_notice' ] );
 		add_action( 'wpjm_admin_notices', [ $this, 'maybe_add_trash_notice' ] );
+		add_action( 'wpjm_admin_notices', [ $this, 'register_job_editor_modal_notice' ] );
 		add_action( 'post_row_actions', [ $this, 'remove_delete_from_promoted_jobs' ], 10, 2 );
 	}
 
@@ -357,17 +364,34 @@ public function get_promote_jobs_template() {
 	public function promoted_jobs_admin_footer() {
 		$screen = get_current_screen();
 
-		if ( in_array( $screen->id, [ 'edit-job_listing', 'job_listing' ], true ) ) { // Job listing and job editor.
+		// Job editor.
+		if ( 'job_listing' === $screen->id && ! \WP_Job_Manager_Admin_Notices::is_dismissed( self::JOB_EDITOR_MODAL_NOTICE, true ) ) {
+
+			$notice_wrapper_attributes = \WP_Job_Manager_Admin_Notices::get_dismissible_notice_wrapper_attributes( self::JOB_EDITOR_MODAL_NOTICE );
+
+			wp_enqueue_script( 'job_manager_notice_dismiss' );
+
 			?>
 			<template id="promote-job-template">
 				<?php echo $this->get_promote_jobs_template(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
 			</template>
-			<dialog class="wpjm-dialog" id="promote-dialog"></dialog>
+			<dialog
+				class="wpjm-dialog wpjm-admin-modal-notice is-dismissible"
+				id="promote-dialog"
+				<?php echo $notice_wrapper_attributes; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
+			></dialog>
 			<?php
 		}
 
-		if ( 'edit-job_listing' === $screen->id ) { // Job listing.
+		// Job listing.
+		if ( 'edit-job_listing' === $screen->id ) {
+
 			?>
+			<template id="promote-job-template">
+				<?php echo $this->get_promote_jobs_template(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
+			</template>
+			<dialog class="wpjm-dialog" id="promote-dialog"></dialog>
+
 			<dialog class="wpjm-dialog deactivate-dialog" id="deactivate-dialog">
 				<form class="dialog deactivate-button" method="dialog">
 					<button class="dialog-close" type="submit">X</button>
@@ -469,6 +493,31 @@ public function maybe_add_trash_notice( $notices ) {
 		return $notices;
 	}
 
+	/**
+	 * Register a notice for the job editor promoted jobs modal.
+	 *
+	 * @internal
+	 *
+	 * @param array $notices Notices to filter on.
+	 *
+	 * @return array
+	 */
+	public function register_job_editor_modal_notice( $notices ) {
+
+		// This notice is not rendered, it's only used to track user dismissal for the modal.
+		$notices[ self::JOB_EDITOR_MODAL_NOTICE ] = [
+			'type'       => 'user',
+			'conditions' => [
+				[
+					'type'    => 'screens',
+					'screens' => [],
+				],
+			],
+		];
+
+		return $notices;
+	}
+
 	/**
 	 * Remove delete link from promoted jobs.
 	 * The delete action is also canceled as part of