Convert script to vanilla JS, use button element, adjust spacing

css/wp-seo.css

@@ -2,12 +2,15 @@ table.wp-seo-post-meta-fields { width: 100%; }
 #side-sortables .wp-seo-post-meta-fields th { display: block; max-width: none; text-align: left; }
 #side-sortables .wp-seo-post-meta-fields td { display: block; }
 .wp-seo-post-meta-fields th { padding: 3px; vertical-align: top; text-align: right; }
-.wp-seo-post-meta-fields textarea { height: 4em; width: 98%; }
+.wp-seo-post-meta-fields textarea { height: 4em; width: 98%; display: block; }
 .wp-seo-post-meta-fields input { width: 98%; }
+.wp-seo-post-meta-fields p { margin: 0.25rem 0 1.25rem; }
 #tab-panel-formatting-tags h1 { font-size: 1.3em; margin: 1em 0; }
 #tab-panel-formatting-tags .formatting-tag-name { font-family: monospace; }
+.wp-seo-repeatable-group { margin-bottom: 2rem; }
+.wp-seo-repeatable-field { margin-bottom: 0.5rem; }
 .wp-seo-repeatable-field label { min-width: 80px; display: inline-block; font-style: italic; }
-.wp-seo-delete { font-size: smaller; }
+.wp-seo-delete { font-size: smaller; border: 0; padding: 0; background: transparent; color: #2271b1; text-decoration: underline; cursor: pointer; }
 
 /* Display formatting tags in the help menu in two columns on shorter screens */
 #tab-panel-formatting-tags .formatting-tags {

js/wp-seo.js

@@ -1,81 +1,135 @@
-;jQuery( function( $ ) {
-
-	/**
-	 * Get a link to an "Add another repeatable group" link.
-	 *
-	 * @return {String}
-	 */
-	function wp_seo_add_more_button() {
-		return $( '<a href="#" class="button-secondary wp-seo-add" />' ).text( wp_seo_admin.repeatable_add_more_label );
-	}
-
-	/**
-	 * Toggle the display of the "Remove group" links for a group of nodes.
-	 *
-	 * @param  {Object} $parent The .node parent
-	 */
-	function wp_seo_toggle_removes( $parent ) {
-		$( '.wp-seo-delete', $parent ).toggle( $parent.children().length > 1 );
-	}
-
-	/**
-	 * Update the description and title character counts displayed to the user.
-	 */
-	function wp_seo_update_character_counts() {
-		_.each( wp_seo_admin.character_count_fields, function( field ) {
-			var input = $( '#wp_seo_meta_' + field );
-			if ( input.length > 0 ) {
-				$( '.' + field + '-character-count' ).html( input.val().length );
-			}
-		});
-	}
-
-	wp_seo_update_character_counts();
-	$( '.wp-seo-post-meta-fields, .wp-seo-term-meta-fields' ).find( 'input, textarea' ).keyup( wp_seo_update_character_counts );
-	// Update the character counts after a term is added via AJAX.
-	$( document ).ajaxComplete( function() {
-		if ( $( '#addtag' ).length > 0 ) {
-			wp_seo_update_character_counts();
-		}
-	} );
-
-	/**
-	 * Add a "Remove" link to groups.
-	 *
-	 * Appended here to easily use the same localized field label.
-	 */
-	$( '.wp-seo-repeatable-group' ).append( $( '<a href="#" class="wp-seo-delete" />' ).text( wp_seo_admin.repeatable_remove_label ) );
-
-	$( '.wp-seo-repeatable' )
-		// Append the "Add More" button to each repeatable field.
-		.append( wp_seo_add_more_button() )
-		// Toggle the "Remove" link from each group as needed.
-		.each( function( i, el ) {
-			wp_seo_toggle_removes( $( el ).find( '> .nodes' ) );
-	} );
-
-	/**
-	 * Add a repeatable group on click.
-	 */
-	$( '#wp_seo_settings' ).on( 'click', '.wp-seo-add', function( e ) {
-		e.preventDefault();
-		var $tpl = $( this ).siblings( '.wp-seo-template' );
-		var html = _.template( $tpl.html() );
-		$tpl.data( 'start', $tpl.data( 'start' ) + 1 );
-		$( this ).siblings( '.nodes' ).append( html( { i: $tpl.data( 'start' ) } ) );
-		wp_seo_toggle_removes( $( this ).siblings( '.nodes' ) );
-	} );
-
-	/**
-	 * Remove a repeatable group on click.
-	 */
-	$( '#wp_seo_settings' ).on( 'click', '.wp-seo-delete', function( e ) {
-		e.preventDefault();
-		$( this ).parent().hide( 'fast', function(){
-			$parent = $( this ).parent();
-			$( this ).remove();
-			wp_seo_toggle_removes( $parent );
-		} );
-	} );
-
-} );
+/**
+ * Functionality related to the WP SEO admin controls.
+ */
+
+const init = () => {
+  setUpRepeatableGroups();
+  setUpCharacterCountFields();
+}
+
+/**
+ * Create an "Add another repeatable group" button.
+ *
+ * @return {HTMLButtonElement}
+ */
+const wpSeoAddMoreButton = () => {
+  const addMoreButton = document.createElement('button');
+  addMoreButton.setAttribute('type', 'button');
+  addMoreButton.classList.add('button-secondary', 'wp-seo-add');
+  addMoreButton.textContent = wp_seo_admin.repeatable_add_more_label;
+  return addMoreButton;
+}
+
+/**
+ * Toggle the display of the "Remove group" links for a group of nodes.
+ *
+ * @param  {Object} $parent The .node parent
+ */
+const wpSeoToggleRemoves = (parent) => {
+  const deleteButton = parent.querySelector('.wp-seo-delete');
+
+  if (parent.children.length > 1) {
+    deleteButton.style.display = 'block';
+  } else {
+    deleteButton.style.display = 'none';
+  }
+}
+
+/**
+ * Update the description and title character counts displayed to the user.
+ */
+const wpSeoUpdateCharacterCounts = () => {
+  wp_seo_admin.character_count_fields.forEach((field) => {
+    var input = document.querySelector(`#wp_seo_meta_${field}`);
+
+    if (input.value.length >= 0) {
+      const countElement = document.querySelector(`.${field}-character-count`);
+      countElement.innerHTML = input.value.length;
+    }
+  });
+}
+
+/**
+ * Handles clicks on add and remove buttons for each repeatable group.
+ *
+ * @param {event} Event button event.
+ */
+const handleButtonClick = (event) => {
+  event.preventDefault();
+
+  const buttonsOnly = event.target.closest("button");
+  if (buttonsOnly === null) return;
+
+  if (event.target.classList.contains('wp-seo-add')) {
+    // Add a repeatable group on click.
+    const template = event.target.previousElementSibling;
+    const html = _.template(event.target.previousElementSibling.innerHTML);
+    const templateStart = template.getAttribute('data-start');
+
+    template.previousElementSibling.insertAdjacentHTML('beforeend', html({ i: templateStart }));
+
+    template.setAttribute('data-start', parseInt(templateStart) + 1);
+    wpSeoToggleRemoves(template.previousElementSibling);
+  } else {
+    // Remove a repeatable group on click.
+    const parentElement = event.target.parentNode;
+
+    parentElement.remove();
+    wpSeoToggleRemoves(parentElement);
+  }
+};
+
+/**
+ * Add character count to fields where it is enabled.
+ */
+const setUpCharacterCountFields = () => {
+  const characterCountFields = document.querySelectorAll('.wp-seo-post-meta-fields input, .wp-seo-post-meta-fields textarea, .wp-seo-term-meta-fields input, .wp-seo-term-meta-fields textarea');
+
+  if (characterCountFields.length) {
+    wpSeoUpdateCharacterCounts();
+  }
+
+  characterCountFields?.forEach((field) => {
+    field.addEventListener('keyup', wpSeoUpdateCharacterCounts);
+  });
+
+  // Update the character counts after a term is added via AJAX.
+  jQuery(document).ajaxComplete(function () {
+    if (jQuery('#addtag').length > 0) {
+      wpSeoUpdateCharacterCounts();
+    }
+  });
+}
+
+/**
+ * Add controls to repeatable groups.
+ */
+const setUpRepeatableGroups = () => {
+  const repeatableGroups = document.querySelectorAll('.wp-seo-repeatable-group');
+  const repeatableFields = document.querySelectorAll('.wp-seo-repeatable');
+
+  /**
+ * Add a "Remove" button to each field group.
+ */
+  repeatableGroups?.forEach((group) => {
+    const deleteButton = document.createElement('button');
+    deleteButton.setAttribute('type', 'button');
+    deleteButton.classList.add('wp-seo-delete');
+    deleteButton.textContent = wp_seo_admin.repeatable_remove_label;
+
+    group.appendChild(deleteButton);
+  });
+
+  /**
+   * Add an "Add" button to each repeatable group.
+   */
+  repeatableFields?.forEach((repeatable) => {
+    repeatable.appendChild(wpSeoAddMoreButton());
+    const repeatableContainer = repeatable.querySelector('.nodes');
+    wpSeoToggleRemoves(repeatableContainer);
+
+    repeatable.addEventListener('click', handleButtonClick);
+  });
+}
+
+init();

php/class-wp-seo-settings.php

@@ -648,7 +648,7 @@ public function render_repeatable_field( $args, $values ) {
 						<?php endforeach; ?>
 						<?php
 							printf(
-								'<a href="#" class="wp-seo-delete">%1$s</a>',
+								'<button type="button" class="wp-seo-delete">%1$s</button>',
 								'<%= wp_seo_admin.repeatable_remove_label %>'
 							);
 						?>