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() { - +
+ +