Migrate jQuery code to native JavaScript

js/unique-title-checker-block-editor.js

@@ -4,70 +4,68 @@
  * @package unique-title-checker
  */
 
-var closeListener = wp.data.subscribe( function () {
-	let iframedEditor =  document.querySelector('.editor-canvas__iframe');
+const closeListener = wp.data.subscribe( function () {
+	let iframedEditor = document.querySelector( '.editor-canvas__iframe' );
 	let postTitleInput = document.querySelector( '.wp-block-post-title' );
-	if ( !iframedEditor && !postTitleInput ) {
-		// Editor not ready.
+	if (!iframedEditor && !postTitleInput) {
+		// The editor is not ready.
 		return;
 	}
 
 	if (iframedEditor) {
-		// Overwrite the post title input selector if inside the iframe.
-		postTitleInput = iframedEditor.contentWindow.document.querySelector('.wp-block-post-title');
+		// Overwrite the `post_title` input selector if inside the iframe.
+		postTitleInput = iframedEditor.contentWindow.document.querySelector( '.wp-block-post-title' );
 	}
 
-	if ( !postTitleInput ) {
-		// Post title input is not ready.
+	if (!postTitleInput) {
+		// The `post_title` input is still not ready.
 		return;
 	}
 
-	// Close the listener as soon as we know we are ready to avoid an infinite loop.
+	// Close the listener as soon as we know the editor is ready to avoid an infinite loop.
 	closeListener();
 
-	jQuery( postTitleInput ).blur(
-		function () {
-			var title = this.innerText;
+	postTitleInput.addEventListener( 'blur', () => {
+		const title = postTitleInput.innerText;
 
-			// Show no warning on empty titles.
-			if ( '' === title ) {
-				return;
-			}
+		// Show no warning on empty titles.
+		if (title === '') {
+			return;
+		}
 
-			var request_data = {
-				action: 'unique_title_check',
-				ajax_nonce: unique_title_checker.nonce,
-				post__not_in: [ jQuery( '#post_ID' ).val() ],
-				post_type: jQuery( '#post_type' ).val(),
-				post_title: title
-			};
+		const postId = document.querySelector( '#post_ID' )?.value;
+		const postType = document.querySelector( '#post_type' )?.value;
 
-			jQuery.ajax(
-				{
-					url: ajaxurl,
-					data: request_data,
-					dataType: 'json'
-				}
-			).done(
-				function ( data ) {
-					wp.data.dispatch( 'core/notices' ).removeNotice( 'unique-title-message' );
+		// Build the request payload
+		const requestData = new URLSearchParams( {
+			action: 'unique_title_check',
+			ajax_nonce: unique_title_checker.nonce,
+			post__not_in: postId ? [ postId ] : [],
+			post_type: postType || '',
+			post_title: title
+		} );
+
+		// Perform the AJAX request
+		fetch( ajaxurl + '?' + requestData.toString() )
+			.then( ( response ) => response.json() )
+			.then( ( data ) => {
+				wp.data.dispatch( 'core/notices' ).removeNotice( 'unique-title-message' );
 
-					if ( 'error' === data.status || !unique_title_checker.only_unique_error ) {
-						( function ( wp ) {
-							// Overwrite status from 'updated' to 'success' in block editor.
-							var status = 'error' === data.status ? 'error' : 'success';
-							wp.data.dispatch( 'core/notices' ).createNotice(
-								status, // Can be one of: success, info, warning, error.
-								data.message, // Text string to display.
-								{
-									id: 'unique-title-message',
-									isDismissible: true, // Whether the user can dismiss the notice.
-								}
-							);
-						} )( window.wp );
-					}
+				if (data.status === 'error' || !unique_title_checker.only_unique_error) {
+					const status = data.status === 'error' ? 'error' : 'success';
+
+					wp.data.dispatch( 'core/notices' ).createNotice(
+						status, // Can be one of: success, info, warning, error.
+						data.message, // Text string to display.
+						{
+							id: 'unique-title-message',
+							isDismissible: true, // Whether the user can dismiss the notice.
+						}
+					);
 				}
-			);
-		}
-	);
+			} )
+			.catch( ( error ) => {
+				console.error( 'Error fetching unique title check:', error );
+			} );
+	} );
 } );

js/unique-title-checker.js

@@ -4,55 +4,47 @@
  * @package unique-title-checker
  */
 
-jQuery( document ).ready(
-	function () {
-
-			jQuery( '#title' ).blur(
-				function () {
-
-					var title = jQuery( this ).val();
-
-					// Show no warning on empty titles.
-					if ( '' === title ) {
-						return;
-					}
-
-					var request_data = {
-						action      : 'unique_title_check',
-						ajax_nonce  : unique_title_checker.nonce,
-						post__not_in: [ jQuery( '#post_ID' ).val() ],
-						post_type   : jQuery( '#post_type' ).val(),
-						post_title  : title
-					};
-
-					jQuery.ajax(
-						{
-							url     : ajaxurl,
-							data    : request_data,
-							dataType: 'json'
-						}
-					).done(
-						function ( data ) {
-							jQuery( '#unique-title-message' ).remove();
+document.addEventListener( 'DOMContentLoaded', function () {
+	document.getElementById( 'title' ).addEventListener( 'blur', function () {
+		const title = this.value;
+
+		// Show no warning on empty titles.
+		if (title === '') {
+			return;
+		}
+
+		const postId = document.querySelector( '#post_ID' )?.value;
+		const postType = document.querySelector( '#post_type' )?.value;
+
+		// Build the request payload
+		const requestData = new URLSearchParams( {
+			action: 'unique_title_check',
+			ajax_nonce: unique_title_checker.nonce,
+			post_id: postId || '',
+			post_type: postType || '',
+			post_title: title
+		} );
+
+		// Perform the AJAX request
+		fetch( ajaxurl + '?' + requestData.toString() )
+			.then( ( response ) => response.json() )
+			.then( ( data ) => {
+				const messageElement = document.getElementById( 'unique-title-message' );
+				if (messageElement) {
+					messageElement.remove();
+				}
 
-							if ( 'error' === data.status || ! unique_title_checker.only_unique_error ) {
-								jQuery( '#post' ).before(
-									jQuery(
-										'<div>',
-										{
-											id: 'unique-title-message',
-											class: data.status
-										}
-									).append(
-										jQuery( '<p>' ).text( data.message )
-									)
-								);
-							}
-						}
+				if (data.status === 'error' || !unique_title_checker.only_unique_error) {
+					document.getElementById( 'post' ).insertAdjacentHTML(
+						'beforebegin',
+						`<div id="unique-title-message" class="${ data.status }">
+							<p>${ data.message }</p>
+						</div>`
 					);
-
 				}
-			);
-
-	}
-);
+			} )
+			.catch( ( error ) => {
+				console.error( 'Error fetching unique title check:', error );
+			} );
+	} );
+} );

readme.txt

@@ -1,7 +1,7 @@
 === Unique Title Checker ===
 Contributors: Kau-Boy
 Tags: title, seo, duplicate title, unique title
-Tested up to: 6.7
+Tested up to: 6.8
 Stable tag: 1.9.0
 License: GPLv3
 License URI: http://www.gnu.org/licenses/gpl-3.0