Enforce at least one category must be selected

Author: holdercp

projects/plugins/jetpack/extensions/blocks/subscriptions/controls.js

@@ -334,6 +334,9 @@ export default function SubscriptionControls( {
 							<fieldset>
 								<legend className="wp-block-jetpack-subscriptions__legend">
 									{ __( 'Categories', 'jetpack' ) }
+									<small className="wp-block-jetpack-subscriptions__help">
+										{ __( 'Select at least one category.', 'jetpack' ) }
+									</small>
 								</legend>
 								{ availableNewsletterCategories.map( category => (
 									<CheckboxControl
@@ -347,6 +350,11 @@ export default function SubscriptionControls( {
 												? excludedNewsletterCategoryIds.filter( id => id !== category.id )
 												: [ ...excludedNewsletterCategoryIds, category.id ];
 
+											// One or more categories must be selected
+											if ( newExcludedIds.length === availableNewsletterCategories.length ) {
+												return;
+											}
+
 											setAttributes( {
 												excludedNewsletterCategoryIds: newExcludedIds,
 											} );

projects/plugins/jetpack/extensions/blocks/subscriptions/editor.scss

@@ -7,3 +7,13 @@
     margin-bottom: 8px;
     padding: 0px;
 }
+
+.wp-block-jetpack-subscriptions__help { // Meant to mimic .components-control__help 
+    font-size: 12px;
+    font-style: normal;
+    font-weight: normal;
+    color: rgb(117, 117, 117);
+    line-height: 1.5;
+    display: block;
+    text-transform: none;
+}

projects/plugins/jetpack/extensions/blocks/subscriptions/test/controls.js

@@ -350,6 +350,22 @@ describe( 'Inspector controls', () => {
 					excludedNewsletterCategoryIds: [ defaultProps.availableNewsletterCategories[ 0 ].id ],
 				} );
 			} );
+
+			test( 'enforces one category must be selected when enabled', async () => {
+				const user = userEvent.setup();
+				render(
+					<SubscriptionsInspectorControls
+						{ ...defaultProps }
+						autoSubscribeToNewsletterCategories
+						excludedNewsletterCategoryIds={ [ defaultProps.availableNewsletterCategories[ 1 ].id ] }
+					/>
+				);
+
+				await user.click( screen.getByText( 'Settings' ), { selector: 'button' } );
+				await user.click( screen.getByLabelText( 'Category 1' ) );
+
+				expect( setAttributes ).not.toHaveBeenCalled();
+			} );
 		} );
 	} );
 } );