Broaden use of `addAdminNotice()`

[joedolson]

#58479 added addAdminNotice() to common.js in order to display an on-demand notice with bulk editing. This function is largely duplicating wp.updates.addAdminNotice(), and updates.js has common.js as a dependency.

We should abstract the new function and update wp.updates.addAdminNotice() to pass arguments into the new function. We'll then be able to use addAdminNotice() as a general mechanism in core to insert JS driven notices.

See comments at https://core.trac.wordpress.org/ticket/58479#comment:42, see #57791 for PHP equivalent.

This PR refactors the handling of admin notices in WordPress to eliminate code duplication and enhance standardization across the platform. The following key changes have been implemented:

Centralization of Admin Notice Functionality: The addAdminNotice() function in common.js has been refactored to support all arguments previously handled by wp.updates.addAdminNotice(). This allows for a unified approach to displaying admin notices with enhanced flexibility for various use cases (e.g., bulk editing, updates).

Backward Compatibility: The wp.updates.addAdminNotice() function in updates.js has been modified to simply delegate calls to the newly refactored addAdminNotice() function. This change ensures that existing usages of wp.updates.addAdminNotice() continue to function without issues, maintaining backward compatibility.

Improved Message Formatting: The new implementation supports multiple message formats, including success and error messages, thereby providing users with clearer feedback when actions are performed in the admin area.

Trac Ticket

Trac ticket: #62139

[vineet2003]

@joedolson please have a look at this PR i've raised and let me know if you want any changes in the wrapper functions .

[joedolson]

@vineet2003 It's a great start, but to make it broadly usable across core, it's going to need to have expanded support for some additional conditions. I made a comment in the PR with more details. Thanks!

Do we need to rewrite this function in a way that it needs to merge the passed data into a default configuration, similar to how the PHP equivalent works ? Handle custom classes and additional attributes flexibly.

What i think we can do is

The addAdminNotice() function should accept parameters like:

1. type: For notice types (error, success, warning, info).
2. dismissible: To determine if the notice can be dismissed.
3. id: A unique identifier for the notice.
4. additional_classes: An array of extra CSS classes.
5. attributes: Extra HTML attributes for the notice element.
6. paragraph_wrap: To determine if the message should be wrapped in a p tag.

I will do this changes and will update the PR @joedolson but just let me know if this is what we actually want or its in the wrong direction .

	var addAdminNotice = function( data ) {
		var $notice = $( data.selector ),
			$headerEnd = $( '.wp-header-end' ),
			type,
			dismissible,
			additionalClasses = '',
			attributes = '',
			paragraphWrap = ( data.paragraph_wrap !== undefined ) ? data.paragraph_wrap : true,
			$adminNotice;
	
		// Defaults for the arguments.
		type = data.type ? data.type : 'info';
		dismissible = ( data.dismissible && data.dismissible === true ) ? ' is-dismissible' : '';
		var message = data.message ? data.message : '';
	
		// Handle additional classes if any are provided.
		if ( data.additional_classes && Array.isArray( data.additional_classes ) ) {
			additionalClasses = ' ' + data.additional_classes.join( ' ' );
		}
	
		// Handle additional attributes if any are provided.
		if ( data.attributes && typeof data.attributes === 'object' ) {
			Object.keys( data.attributes ).forEach(function( key ) {
				attributes += ' ' + key + '="' + data.attributes[key] + '"';
			});
		}
	
		// Wrap message in <p> if paragraph_wrap is true.
		if ( paragraphWrap ) {
			message = '<p>' + message + '</p>';
		}
	
		// Build the admin notice element.
		$adminNotice = '<div id="' + data.id + '" class="notice notice-' + type + dismissible + additionalClasses + '"' + attributes + '>' + message + '</div>';
	
		// Check if this admin notice already exists.
		if ( ! $notice.length ) {
			$notice = $( '#' + data.id );
		}
	
		// Either replace an existing notice or insert a new one.
		if ( $notice.length ) {
			$notice.replaceWith( $adminNotice );
		} else if ( $headerEnd.length ) {
			$headerEnd.after( $adminNotice );
		} else {
			if ( 'customize' === pagenow ) {
				$( '.customize-themes-notifications' ).append( $adminNotice );
			} else {
				$( '.wrap' ).find( '> h1' ).after( $adminNotice );
			}
		}
	
		// Trigger a global event after adding the notice.
		$(document).trigger( 'wp-notice-added' );
	};

Have a look at this @joedolson we can do this to make our existing JS function handle additional requirements similar to PHP admin notice arguments.

Yes, that's what I had in mind. We need to anticipate possible usages, so that if extenders start to use this, it's flexible enough for usage.

Yes, that's what I had in mind. We need to anticipate possible usages, so that if extenders start to use this, it's flexible enough for usage.

Anything else to be done or is this patch ready to be merged .... it will be my first contribution 😄 !!!

@joedolson - please check this function i have added in latest commit