diff --git a/assets/css/page-widgets/suggested-tasks.css b/assets/css/page-widgets/suggested-tasks.css
index 14c90d395..62a94dc27 100644
--- a/assets/css/page-widgets/suggested-tasks.css
+++ b/assets/css/page-widgets/suggested-tasks.css
@@ -206,6 +206,10 @@
&.prpl-note-error {
color: var(--prpl-color-alert-error-text);
background-color: var(--prpl-background-alert-error);
+ margin-bottom: 0;
+
+ order: 98; /* One less than the spinner. */
+ flex-grow: 1;
.prpl-note-icon {
color: var(--prpl-color-alert-error);
@@ -441,10 +445,22 @@
padding-top: 1rem;
display: flex;
justify-content: flex-end;
+ align-items: center;
gap: 1rem;
align-self: flex-end;
width: 100%;
+ /* If there are no other elements in the form, align the button to the left. */
+ &:only-child {
+ padding-top: 0;
+ justify-content: flex-start;
+
+ /* Display the spinner after the button. */
+ .prpl-spinner {
+ order: 99;
+ }
+ }
+
.prpl-button {
cursor: pointer;
margin: 0;
@@ -456,6 +472,11 @@
}
}
+ /* Display the spinner before the button. */
+ .prpl-spinner {
+ order: -1;
+ }
+
}
}
diff --git a/assets/js/recommendations/interactive-task.js b/assets/js/recommendations/interactive-task.js
index ca14cfb16..e7f511aa2 100644
--- a/assets/js/recommendations/interactive-task.js
+++ b/assets/js/recommendations/interactive-task.js
@@ -35,6 +35,8 @@ const prplInteractiveTaskFormListener = {
formElement.addEventListener( 'submit', ( event ) => {
event.preventDefault();
+ prplInteractiveTaskFormListener.showLoading( formElement );
+
// Get the form data.
const formData = new FormData( formElement );
const settingsToPass = {};
@@ -56,6 +58,8 @@ const prplInteractiveTaskFormListener = {
return response;
}
+ prplInteractiveTaskFormListener.hideLoading( formElement );
+
// This will trigger the celebration event (confetti) as well.
prplSuggestedTask.maybeComplete( postId ).then( () => {
// Close popover.
@@ -76,6 +80,8 @@ const prplInteractiveTaskFormListener = {
const formSubmitHandler = ( event ) => {
event.preventDefault();
+ prplInteractiveTaskFormListener.showLoading( formElement );
+
callback()
.then( ( response ) => {
if ( true !== response.success ) {
@@ -110,6 +116,9 @@ const prplInteractiveTaskFormListener = {
);
} )
.finally( () => {
+ // Hide loading state.
+ prplInteractiveTaskFormListener.hideLoading( formElement );
+
// Remove the form listener once the callback is executed.
formElement.removeEventListener(
'submit',
@@ -139,6 +148,8 @@ const prplInteractiveTaskFormListener = {
formElement.addEventListener( 'submit', ( event ) => {
event.preventDefault();
+ prplInteractiveTaskFormListener.showLoading( formElement );
+
const formData = new FormData( formElement );
const settingsToPass = {};
settingsToPass[ setting ] = settingCallbackValue(
@@ -157,7 +168,6 @@ const prplInteractiveTaskFormListener = {
},
} )
.then( ( response ) => {
- console.log( response );
if ( true !== response.success ) {
// Show error to the user.
prplInteractiveTaskFormListener.showError(
@@ -193,6 +203,10 @@ const prplInteractiveTaskFormListener = {
error,
popoverId
);
+ } )
+ .finally( () => {
+ // Hide loading state.
+ prplInteractiveTaskFormListener.hideLoading( formElement );
} );
} );
},
@@ -214,17 +228,12 @@ const prplInteractiveTaskFormListener = {
console.error( 'Error in interactive task callback:', error );
- // Add error message.
- const submitButton = formElement.querySelector(
- 'button[type="submit"]'
+ // Check if there's already an error message
element right after the form
+ const existingErrorElement = formElement.parentNode.querySelector(
+ 'p.prpl-interactive-task-error-message'
);
- if (
- submitButton &&
- ! formElement.querySelector(
- '.prpl-interactive-task-error-message'
- )
- ) {
+ if ( ! existingErrorElement ) {
// Add paragraph with error message.
const errorParagraph = document.createElement( 'p' );
errorParagraph.classList.add(
@@ -234,11 +243,57 @@ const prplInteractiveTaskFormListener = {
);
errorParagraph.textContent = prplL10n( 'somethingWentWrong' );
- // Append before submit button.
- submitButton.parentNode.insertBefore(
- errorParagraph,
- submitButton
+ // Append after the form element.
+ formElement.insertAdjacentElement( 'afterend', errorParagraph );
+ }
+ },
+
+ /**
+ * Show loading state.
+ *
+ * @param {HTMLFormElement} formElement - The form element.
+ * @return {void}
+ */
+ showLoading: ( formElement ) => {
+ let submitButton = formElement.querySelector( 'button[type="submit"]' );
+
+ if ( ! submitButton ) {
+ submitButton = formElement.querySelector(
+ 'button[data-action="completeTask"]'
);
}
+
+ submitButton.disabled = true;
+
+ // Add spinner.
+ const spinner = document.createElement( 'span' );
+ spinner.classList.add( 'prpl-spinner' );
+ spinner.innerHTML =
+ ''; // WP spinner.
+
+ // Append spinner after submit button.
+ submitButton.after( spinner );
+ },
+
+ /**
+ * Hide loading state.
+ *
+ * @param {HTMLFormElement} formElement - The form element.
+ * @return {void}
+ */
+ hideLoading: ( formElement ) => {
+ let submitButton = formElement.querySelector( 'button[type="submit"]' );
+
+ if ( ! submitButton ) {
+ submitButton = formElement.querySelector(
+ 'button[data-action="completeTask"]'
+ );
+ }
+
+ submitButton.disabled = false;
+ const spinner = formElement.querySelector( 'span.prpl-spinner' );
+ if ( spinner ) {
+ spinner.remove();
+ }
},
};
diff --git a/classes/suggested-tasks/providers/class-blog-description.php b/classes/suggested-tasks/providers/class-blog-description.php
index 91133ed0d..61ec8bb51 100644
--- a/classes/suggested-tasks/providers/class-blog-description.php
+++ b/classes/suggested-tasks/providers/class-blog-description.php
@@ -123,9 +123,11 @@ public function print_popover_form_contents() {
placeholder=""
>
-
+
+
+
-
- print_submit_button( \__( 'Disable comment pagination', 'progress-planner' ) );
}
/**
diff --git a/classes/suggested-tasks/providers/class-disable-comments.php b/classes/suggested-tasks/providers/class-disable-comments.php
index 736809be0..d9fdf364a 100644
--- a/classes/suggested-tasks/providers/class-disable-comments.php
+++ b/classes/suggested-tasks/providers/class-disable-comments.php
@@ -144,9 +144,11 @@ public function print_popover_instructions() {
*/
public function print_popover_form_contents() {
?>
-
+
+
+
-
- print_submit_button( \__( 'Delete the "Hello World!" post', 'progress-planner' ) );
}
/**
diff --git a/classes/suggested-tasks/providers/class-permalink-structure.php b/classes/suggested-tasks/providers/class-permalink-structure.php
index 5a5d4f7de..40b546d22 100644
--- a/classes/suggested-tasks/providers/class-permalink-structure.php
+++ b/classes/suggested-tasks/providers/class-permalink-structure.php
@@ -236,10 +236,8 @@ public function print_popover_form_contents() {
-
print_submit_button( \__( 'Set permalink structure', 'progress-planner' ) );
}
/**
diff --git a/classes/suggested-tasks/providers/class-sample-page.php b/classes/suggested-tasks/providers/class-sample-page.php
index 6ba34a3de..e7ae313cf 100644
--- a/classes/suggested-tasks/providers/class-sample-page.php
+++ b/classes/suggested-tasks/providers/class-sample-page.php
@@ -138,11 +138,7 @@ public function should_add_task() {
* @return void
*/
public function print_popover_form_contents() {
- ?>
-
- print_submit_button( \__( 'Delete the "Sample Page" page', 'progress-planner' ) );
}
/**
diff --git a/classes/suggested-tasks/providers/class-search-engine-visibility.php b/classes/suggested-tasks/providers/class-search-engine-visibility.php
index 077a0c5b5..54ec0dd7f 100644
--- a/classes/suggested-tasks/providers/class-search-engine-visibility.php
+++ b/classes/suggested-tasks/providers/class-search-engine-visibility.php
@@ -112,11 +112,7 @@ public function print_popover_instructions() {
* @return void
*/
public function print_popover_form_contents() {
- ?>
-
- print_submit_button( \__( 'Allow search engines to index your site', 'progress-planner' ) );
}
/**
diff --git a/classes/suggested-tasks/providers/class-select-locale.php b/classes/suggested-tasks/providers/class-select-locale.php
index c7f59f8b7..5433671cb 100644
--- a/classes/suggested-tasks/providers/class-select-locale.php
+++ b/classes/suggested-tasks/providers/class-select-locale.php
@@ -225,11 +225,8 @@ public function print_popover_form_contents() {
'show_available_translations' => \current_user_can( 'install_languages' ) && \wp_can_install_language_pack(),
]
);
- ?>
-
- print_submit_button( \__( 'Select locale', 'progress-planner' ) );
}
/**
diff --git a/classes/suggested-tasks/providers/class-select-timezone.php b/classes/suggested-tasks/providers/class-select-timezone.php
index 6bb7892a5..702010cc0 100644
--- a/classes/suggested-tasks/providers/class-select-timezone.php
+++ b/classes/suggested-tasks/providers/class-select-timezone.php
@@ -143,10 +143,8 @@ public function print_popover_form_contents() {
-
print_submit_button( \__( 'Set site timezone', 'progress-planner' ) );
}
/**
diff --git a/classes/suggested-tasks/providers/class-set-date-format.php b/classes/suggested-tasks/providers/class-set-date-format.php
index 4f1debfbb..fdd1f7128 100644
--- a/classes/suggested-tasks/providers/class-set-date-format.php
+++ b/classes/suggested-tasks/providers/class-set-date-format.php
@@ -242,10 +242,8 @@ public function print_popover_form_contents() {
-
print_submit_button( \__( 'Set date format', 'progress-planner' ) );
}
/**
diff --git a/classes/suggested-tasks/providers/class-site-icon.php b/classes/suggested-tasks/providers/class-site-icon.php
index 83d055bd3..435a04f30 100644
--- a/classes/suggested-tasks/providers/class-site-icon.php
+++ b/classes/suggested-tasks/providers/class-site-icon.php
@@ -120,9 +120,11 @@ public function print_popover_form_contents() {
-
+
+
+
' . \wp_kses_post( $description ) . '';
}
+ /**
+ * Print the submit button.
+ *
+ * @param string $button_text The text for the button.
+ * If empty, the default text "Submit" will be used.
+ *
+ * @return void
+ */
+ protected function print_submit_button( $button_text = '' ) {
+ if ( empty( $button_text ) ) {
+ $button_text = \__( 'Submit', 'progress-planner' );
+ }
+ ?>
+
+
+
+
-
+
+
+
-
- print_submit_button( \__( 'Noindex the author archive', 'progress-planner' ) );
}
/**
diff --git a/classes/suggested-tasks/providers/integrations/aioseo/class-archive-date.php b/classes/suggested-tasks/providers/integrations/aioseo/class-archive-date.php
index 6c5471731..86ed48d7b 100644
--- a/classes/suggested-tasks/providers/integrations/aioseo/class-archive-date.php
+++ b/classes/suggested-tasks/providers/integrations/aioseo/class-archive-date.php
@@ -121,11 +121,7 @@ public function print_popover_instructions() {
* @return void
*/
public function print_popover_form_contents() {
- ?>
-
- print_submit_button( \__( 'Noindex the date archive', 'progress-planner' ) );
}
/**
diff --git a/classes/suggested-tasks/providers/integrations/aioseo/class-crawl-settings-feed-authors.php b/classes/suggested-tasks/providers/integrations/aioseo/class-crawl-settings-feed-authors.php
index cd9b35e2c..ddcfcc05a 100644
--- a/classes/suggested-tasks/providers/integrations/aioseo/class-crawl-settings-feed-authors.php
+++ b/classes/suggested-tasks/providers/integrations/aioseo/class-crawl-settings-feed-authors.php
@@ -132,11 +132,7 @@ public function print_popover_instructions() {
* @return void
*/
public function print_popover_form_contents() {
- ?>
-
- print_submit_button( \__( 'Disable author RSS feeds', 'progress-planner' ) );
}
/**
diff --git a/classes/suggested-tasks/providers/integrations/aioseo/class-crawl-settings-feed-comments.php b/classes/suggested-tasks/providers/integrations/aioseo/class-crawl-settings-feed-comments.php
index aae197d54..a0a42e7e5 100644
--- a/classes/suggested-tasks/providers/integrations/aioseo/class-crawl-settings-feed-comments.php
+++ b/classes/suggested-tasks/providers/integrations/aioseo/class-crawl-settings-feed-comments.php
@@ -100,11 +100,7 @@ public function print_popover_instructions() {
* @return void
*/
public function print_popover_form_contents() {
- ?>
-
- print_submit_button( \__( 'Disable comment RSS feeds', 'progress-planner' ) );
}
/**
diff --git a/classes/suggested-tasks/providers/integrations/yoast/class-add-yoast-providers.php b/classes/suggested-tasks/providers/integrations/yoast/class-add-yoast-providers.php
index 8b52176b6..c4a96db06 100644
--- a/classes/suggested-tasks/providers/integrations/yoast/class-add-yoast-providers.php
+++ b/classes/suggested-tasks/providers/integrations/yoast/class-add-yoast-providers.php
@@ -132,6 +132,7 @@ public function exclude_not_indexable_taxonomies( $exclude_taxonomies ) {
*/
public function add_interactive_task_allowed_options( $allowed_options ) {
$allowed_options[] = 'wpseo';
+ $allowed_options[] = 'wpseo_titles';
return $allowed_options;
}
}
diff --git a/classes/suggested-tasks/providers/integrations/yoast/class-archive-author.php b/classes/suggested-tasks/providers/integrations/yoast/class-archive-author.php
index f07b1c61c..367d98ac3 100644
--- a/classes/suggested-tasks/providers/integrations/yoast/class-archive-author.php
+++ b/classes/suggested-tasks/providers/integrations/yoast/class-archive-author.php
@@ -125,11 +125,7 @@ public function print_popover_instructions() {
* @return void
*/
public function print_popover_form_contents() {
- ?>
-
- print_submit_button( \__( 'Disable', 'progress-planner' ) );
}
/**
diff --git a/classes/suggested-tasks/providers/integrations/yoast/class-archive-date.php b/classes/suggested-tasks/providers/integrations/yoast/class-archive-date.php
index 283c43908..48173c5f7 100644
--- a/classes/suggested-tasks/providers/integrations/yoast/class-archive-date.php
+++ b/classes/suggested-tasks/providers/integrations/yoast/class-archive-date.php
@@ -112,11 +112,7 @@ public function print_popover_instructions() {
* @return void
*/
public function print_popover_form_contents() {
- ?>
-
- print_submit_button( \__( 'Disable', 'progress-planner' ) );
}
/**
diff --git a/classes/suggested-tasks/providers/integrations/yoast/class-archive-format.php b/classes/suggested-tasks/providers/integrations/yoast/class-archive-format.php
index 3c0277438..0041f168c 100644
--- a/classes/suggested-tasks/providers/integrations/yoast/class-archive-format.php
+++ b/classes/suggested-tasks/providers/integrations/yoast/class-archive-format.php
@@ -125,11 +125,7 @@ public function print_popover_instructions() {
* @return void
*/
public function print_popover_form_contents() {
- ?>
-
- print_submit_button( \__( 'Disable', 'progress-planner' ) );
}
/**
diff --git a/classes/suggested-tasks/providers/integrations/yoast/class-crawl-settings-emoji-scripts.php b/classes/suggested-tasks/providers/integrations/yoast/class-crawl-settings-emoji-scripts.php
index ccf298e5d..9867a75bc 100644
--- a/classes/suggested-tasks/providers/integrations/yoast/class-crawl-settings-emoji-scripts.php
+++ b/classes/suggested-tasks/providers/integrations/yoast/class-crawl-settings-emoji-scripts.php
@@ -104,11 +104,7 @@ public function print_popover_instructions() {
* @return void
*/
public function print_popover_form_contents() {
- ?>
-
- print_submit_button( \__( 'Remove', 'progress-planner' ) );
}
/**
diff --git a/classes/suggested-tasks/providers/integrations/yoast/class-crawl-settings-feed-authors.php b/classes/suggested-tasks/providers/integrations/yoast/class-crawl-settings-feed-authors.php
index c448e9d28..ff550f62e 100644
--- a/classes/suggested-tasks/providers/integrations/yoast/class-crawl-settings-feed-authors.php
+++ b/classes/suggested-tasks/providers/integrations/yoast/class-crawl-settings-feed-authors.php
@@ -136,11 +136,7 @@ public function print_popover_instructions() {
* @return void
*/
public function print_popover_form_contents() {
- ?>
-
- print_submit_button( \__( 'Remove', 'progress-planner' ) );
}
/**
diff --git a/classes/suggested-tasks/providers/integrations/yoast/class-crawl-settings-feed-global-comments.php b/classes/suggested-tasks/providers/integrations/yoast/class-crawl-settings-feed-global-comments.php
index 945ebcf44..95af3c30e 100644
--- a/classes/suggested-tasks/providers/integrations/yoast/class-crawl-settings-feed-global-comments.php
+++ b/classes/suggested-tasks/providers/integrations/yoast/class-crawl-settings-feed-global-comments.php
@@ -104,11 +104,7 @@ public function print_popover_instructions() {
* @return void
*/
public function print_popover_form_contents() {
- ?>
-
- print_submit_button( \__( 'Remove', 'progress-planner' ) );
}
/**
diff --git a/classes/suggested-tasks/providers/integrations/yoast/class-media-pages.php b/classes/suggested-tasks/providers/integrations/yoast/class-media-pages.php
index af45cc73b..64371fa8e 100644
--- a/classes/suggested-tasks/providers/integrations/yoast/class-media-pages.php
+++ b/classes/suggested-tasks/providers/integrations/yoast/class-media-pages.php
@@ -98,11 +98,7 @@ public function print_popover_instructions() {
* @return void
*/
public function print_popover_form_contents() {
- ?>
-
- print_submit_button( \__( 'Disable', 'progress-planner' ) );
}
/**
diff --git a/classes/suggested-tasks/providers/integrations/yoast/class-organization-logo.php b/classes/suggested-tasks/providers/integrations/yoast/class-organization-logo.php
index b4c192ef3..e32e20352 100644
--- a/classes/suggested-tasks/providers/integrations/yoast/class-organization-logo.php
+++ b/classes/suggested-tasks/providers/integrations/yoast/class-organization-logo.php
@@ -191,9 +191,11 @@ public function print_popover_form_contents() {
-
+
+
+