Subscribe Block: enable customizing the button-only pop-up via the editor

projects/packages/newsletter/changelog/add-subscribe-button-only-local-popup

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Newsletter Settings: replace the "Subscribe modal heading" text field with a "Subscribe button pop-up" entry in the same placements grid as the other subscribe pop-ups, editable directly in the Site Editor.

projects/packages/newsletter/src/settings/newsletter-settings.tsx

@@ -30,7 +30,6 @@ import {
 	NewsletterCategoriesSection,
 	NewsletterSection,
 	PaidNewsletterSection,
-	SubscribeModalSection,
 	SubscriptionsSection,
 	WelcomeEmailSection,
 } from './sections';
@@ -179,12 +178,6 @@ export function NewsletterSettingsBody( {
 	);
 	const [ isSavingWelcomeEmail, setIsSavingWelcomeEmail ] = useState( false );
 
-	// Subscribe modal heading state (for manual save).
-	const [ subscribeModalChanges, setSubscribeModalChanges ] = useState<
-		Partial< NewsletterSettings >
-	>( {} );
-	const [ isSavingSubscribeModal, setIsSavingSubscribeModal ] = useState( false );
-
 	// Get newsletter script data.
 	const newsletterScriptData = useMemo( () => getNewsletterScriptData(), [] );
 
@@ -479,38 +472,6 @@ export function NewsletterSettingsBody( {
 			} );
 	}, [ createErrorNotice, createSuccessNotice, welcomeEmailChanges, data ] );
 
-	// Handle subscribe modal heading changes (staged, not auto-saved).
-	const handleSubscribeModalChange = useCallback( ( updates: Partial< NewsletterSettings > ) => {
-		setData( prev => ( { ...prev, ...updates } ) );
-		setSubscribeModalChanges( prev => ( { ...prev, ...updates } ) );
-	}, [] );
-
-	// Save subscribe modal heading.
-	const saveSubscribeModal = useCallback( () => {
-		if ( ! data ) {
-			return;
-		}
-
-		setIsSavingSubscribeModal( true );
-
-		updateSettings( subscribeModalChanges )
-			.then( () => {
-				setSavedData( prev => ( { ...prev, ...subscribeModalChanges } ) );
-				setSubscribeModalChanges( {} );
-				createSuccessNotice( __( 'Subscribe modal heading saved', 'jetpack-newsletter' ) );
-			} )
-			.catch( ( err: Error ) => {
-				// eslint-disable-next-line no-console
-				console.error( 'Newsletter subscribe modal save error:', err );
-				createErrorNotice(
-					err.message || __( 'Failed to save subscribe modal heading', 'jetpack-newsletter' )
-				);
-			} )
-			.finally( () => {
-				setIsSavingSubscribeModal( false );
-			} );
-	}, [ createErrorNotice, createSuccessNotice, subscribeModalChanges, data ] );
-
 	if ( isLoading ) {
 		return (
 			<div className="newsletter-settings">
@@ -537,7 +498,6 @@ export function NewsletterSettingsBody( {
 	const hasSenderNameChanges = Object.keys( senderNameChanges ).length > 0;
 	const hasNewsletterCategoriesChanges = Object.keys( newsletterCategoriesChanges ).length > 0;
 	const hasWelcomeEmailChanges = Object.keys( welcomeEmailChanges ).length > 0;
-	const hasSubscribeModalChanges = Object.keys( subscribeModalChanges ).length > 0;
 
 	return (
 		<>
@@ -626,16 +586,6 @@ export function NewsletterSettingsBody( {
 									isNewsletterEnabled={ data.subscriptions }
 								/>
 
-								<SubscribeModalSection
-									data={ data }
-									onChange={ handleSubscribeModalChange }
-									onSave={ saveSubscribeModal }
-									isSaving={ isSavingSubscribeModal }
-									hasChanges={ hasSubscribeModalChanges }
-									changedKeys={ Object.keys( subscribeModalChanges ) }
-									isNewsletterEnabled={ data.subscriptions }
-								/>
-
 								<NewsletterCategoriesSection
 									data={ data }
 									onChange={ handleNewsletterCategoriesChange }
@@ -714,16 +664,6 @@ export function NewsletterSettingsBody( {
 										changedKeys={ Object.keys( welcomeEmailChanges ) }
 										isNewsletterEnabled={ data.subscriptions }
 									/>
-
-									<SubscribeModalSection
-										data={ data }
-										onChange={ handleSubscribeModalChange }
-										onSave={ saveSubscribeModal }
-										isSaving={ isSavingSubscribeModal }
-										hasChanges={ hasSubscribeModalChanges }
-										changedKeys={ Object.keys( subscribeModalChanges ) }
-										isNewsletterEnabled={ data.subscriptions }
-									/>
 								</Stack>
 							</Disabled>
 						</>

projects/packages/newsletter/src/settings/sections/index.ts

@@ -10,6 +10,5 @@ export { LegacySubscriptionsSection } from './legacy-subscriptions-section';
 export { NewsletterCategoriesSection } from './newsletter-categories-section';
 export { NewsletterSection } from './newsletter-section';
 export { PaidNewsletterSection } from './paid-newsletter-section';
-export { SubscribeModalSection } from './subscribe-modal-section';
 export { SubscriptionsSection } from './subscriptions-section';
 export { WelcomeEmailSection } from './welcome-email-section';

projects/packages/newsletter/src/settings/sections/subscriptions-section.tsx

@@ -36,6 +36,10 @@ const PLACEMENT_SLUG_BY_KEY: Record< string, string > = {
 	jetpack_subscribe_floating_button_enabled: 'floating_button',
 };
 
+// The "Subscribe button pop-up" card below has no underlying setting to
+// toggle (see its usage), so its `onChange` is inert by design.
+const noop = () => {};
+
 interface SubscriptionsSectionProps {
 	data: NewsletterSettings;
 	/**
@@ -263,6 +267,31 @@ export function SubscriptionsSection( {
 											/>
 										);
 									} ) }
+									{ /* Not a real placement toggle — the pop-up shown when a
+									     visitor clicks a "Button only" style Subscribe block is
+									     inherent to using that block style, with no separate
+									     enable/disable setting. Always checked and disabled to
+									     reflect that, with the same "Preview and edit" link as
+									     its siblings. */ }
+									<PlacementCard
+										id="placement-subscribe-button-modal"
+										name="subscribe-button-modal"
+										title={ __( 'Subscribe button pop-up', 'jetpack-newsletter' ) }
+										illustration={ <PopupIllustration /> }
+										previewUrl={
+											canShowBlockThemeEditorLinks
+												? addQueryArgs( getAdminUrl( 'site-editor.php' ), {
+														postType: 'wp_template_part',
+														postId: `${ newsletterScriptData.themeStylesheet }//jetpack-subscribe-modal-button`,
+														canvas: 'edit',
+												  } )
+												: undefined
+										}
+										checked
+										disabled
+										onChange={ noop }
+										onPreviewClick={ handlePlacementPreviewClick }
+									/>
 								</div>
 							</Stack>
 

projects/plugins/jetpack/changelog/add-subscribe-button-only-local-popup

@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Subscribe Block: show a local, editable pop-up for the "Button only" style before opening the subscribe checkout, instead of opening checkout with no message to show. The floating subscribe button, which uses the same style internally, benefits from this too.

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

@@ -78,6 +78,28 @@ domReady( function () {
 				if ( action === 'subscribe' ) {
 					event.preventDefault();
 
+					// "Button only" style renders no visible email input, so email
+					// is empty here. Rather than opening the checkout iframe with no
+					// email (which then has to ask for it inside the iframe itself),
+					// open a local pop-up with its own embedded Subscribe block first.
+					// That pop-up's own form submit re-enters this same handler with
+					// email populated and is-style-button absent, and flows through
+					// normally below.
+					const isButtonOnlyStyle = form
+						.closest( '.wp-block-jetpack-subscriptions' )
+						?.classList.contains( 'is-style-button' );
+					if ( ! email && isButtonOnlyStyle ) {
+						const modal = document.querySelector( '.jetpack-subscribe-modal-button' );
+						if ( modal ) {
+							modal.classList.add( 'open' );
+							document.body.classList.add( 'jetpack-subscribe-modal-button-open' );
+							modal.querySelector( 'input[type="email"]' )?.focus();
+						}
+						button.classList.remove( 'is-loading' );
+						button.setAttribute( 'aria-busy', 'false' );
+						return;
+					}
+
 					const post_id = form.querySelector( 'input[name=post_id]' )?.value ?? '';
 					const tier_id = form.querySelector( 'input[name=tier_id]' )?.value ?? '';
 					const app_source = form.querySelector( 'input[name=app_source]' )?.value ?? '';

projects/plugins/jetpack/modules/subscriptions.php

@@ -1146,6 +1146,7 @@ public function track_newsletter_category_creation() {
 require __DIR__ . '/subscriptions/subscribe-modal/class-jetpack-subscribe-modal.php';
 require __DIR__ . '/subscriptions/subscribe-overlay/class-jetpack-subscribe-overlay.php';
 require __DIR__ . '/subscriptions/subscribe-floating-button/class-jetpack-subscribe-floating-button.php';
+require __DIR__ . '/subscriptions/subscribe-modal-button/class-jetpack-subscribe-modal-button.php';
 require __DIR__ . '/subscriptions/newsletter-widget/class-jetpack-newsletter-dashboard-widget.php';
 
 require_once __DIR__ . '/subscriptions/abilities/class-newsletter-abilities.php';