Disable button if field is empty

Author: aristath

assets/css/admin.css

@@ -324,8 +324,13 @@ button.prpl-info-icon {
 		transition: all 0.25s ease-in-out;
 	}
 
-	&:hover,
-	&:focus {
+	&:disabled {
+		opacity: 0.5;
+		pointer-events: none;
+	}
+
+	&:not([disabled]):hover,
+	&:not([disabled]):focus {
 		background: #cf2441;
 
 		&::after {
@@ -342,8 +347,8 @@ button.prpl-info-icon {
 .prpl-wrap button.prpl-button-secondary {
 	background: var(--prpl-color-gray-3);
 
-	&:hover,
-	&:focus {
+	&:not([disabled]):hover,
+	&:not([disabled]):focus {
 		background: var(--prpl-color-gray-4);
 		box-shadow: 3px 3px 10px var(--prpl-color-gray-4);
 	}
@@ -509,3 +514,4 @@ button.prpl-info-icon {
 		transform: rotate(360deg);
 	}
 }
+

assets/css/page-widgets/suggested-tasks.css

@@ -456,8 +456,8 @@
 				transition: all 0.25s ease-in-out;
 			}
 
-			&:hover,
-			&:focus {
+			&:not([disabled]):hover,
+			&:not([disabled]):focus {
 				background: var(--prpl-color-400-orange); /* WIP: pick exact color */
 
 				&::after {

assets/js/recommendations/core-blogdescription.js

@@ -12,3 +12,12 @@ prplInteractiveTaskFormListener.siteSettings( {
 	taskId: 'core-blogdescription',
 	popoverId: 'prpl-popover-core-blogdescription',
 } );
+
+document
+	.querySelector( 'input#blogdescription' )
+	.addEventListener( 'input', function ( e ) {
+		const button = document.querySelector(
+			'[popover-id="prpl-popover-core-blogdescription"] button[type="submit"]'
+		);
+		button.disabled = e.target.value.length === 0;
+	} );

classes/suggested-tasks/providers/class-blog-description.php

@@ -114,7 +114,7 @@ class="regular-text"
 				placeholder="<?php \esc_html_e( 'A catchy phrase to describe your website', 'progress-planner' ); ?>"
 			>
 		</label>
-		<button type="submit" class="prpl-button prpl-button-primary" style="color: #fff;">
+		<button type="submit" class="prpl-button prpl-button-primary" style="color: #fff;" disabled>
 			<?php \esc_html_e( 'Save', 'progress-planner' ); ?>
 		</button>
 		<?php