Subscribe block: adds button-only style (#37341)

Automattic · May 20, 2024 · 5669947 · 5669947
1 parent 743be0e
commit 5669947
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 32 deletions.
diff --git a/projects/plugins/jetpack/changelog/update-subscribe-button-only b/projects/plugins/jetpack/changelog/update-subscribe-button-only
@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Subscribe block: adds button-only style
diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/block.json b/projects/plugins/jetpack/extensions/blocks/subscriptions/block.json
@@ -17,14 +17,18 @@
 		"align": [ "wide", "full" ]
 	},
 	"styles": [
+		{
+			"name": "split",
+			"label": "Split",
+			"isDefault": true
+		},
 		{
 			"name": "compact",
 			"label": "Compact"
 		},
 		{
-			"name": "split",
-			"label": "Split",
-			"isDefault": true
+			"name": "button",
+			"label": "Button only"
 		}
 	],
 	"attributes": {
@@ -108,6 +112,9 @@
 		},
 		"appSource": {
 			"type": "string"
+		},
+		"className": {
+			"type": "string"
 		}
 	},
 	"example": {}

diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js
@@ -16,6 +16,7 @@ import { useEffect } from '@wordpress/element';
 import { _n, sprintf } from '@wordpress/i18n';
 import classnames from 'classnames';
 import { isEqual } from 'lodash';
+import { getActiveStyleName } from '../../shared/block-styles';
 import { getValidatedAttributes } from '../../shared/get-validated-attributes';
 import { isNewsletterFeatureEnabled } from '../../shared/memberships/edit';
 import GetAddPaidPlanButton from '../../shared/memberships/utils';
@@ -87,6 +88,7 @@ export function SubscriptionEdit( props ) {
 		borderRadius,
 		borderWeight,
 		buttonWidth,
+		className,
 		includeSocialFollowers,
 		padding,
 		spacing,
@@ -97,6 +99,8 @@ export function SubscriptionEdit( props ) {
 		successMessage = DEFAULT_SUCCESS_MESSAGE,
 	} = validatedAttributes;
 
+	const activeStyleName = getActiveStyleName( metadata.styles, className );
+
 	const { subscriberCount, subscriberCountString } = useSelect( select => {
 		if ( ! isModuleActive ) {
 			return {
@@ -202,12 +206,17 @@ export function SubscriptionEdit( props ) {
 		...( ! buttonBackgroundColor.color && buttonGradient.gradientValue
 			? { background: buttonGradient.gradientValue }
 			: { backgroundColor: buttonBackgroundColor.color } ),
-		...( buttonOnNewLine
-			? { marginTop: getSpacingStyleValue( spacing ) + 'px' }
-			: { marginLeft: getSpacingStyleValue( spacing ) + 'px' } ),
 		width: buttonWidth,
 	};
 
+	if ( activeStyleName !== 'button' ) {
+		if ( buttonOnNewLine ) {
+			buttonStyles.marginTop = getSpacingStyleValue( spacing ) + 'px';
+		} else {
+			buttonStyles.marginLeft = getSpacingStyleValue( spacing ) + 'px';
+		}
+	}
+
 	const previousButtonBackgroundColor = usePrevious( buttonBackgroundColor );
 
 	useEffect( () => {
@@ -285,15 +294,17 @@ export function SubscriptionEdit( props ) {
 					<div className="wp-block-jetpack-subscriptions__container is-not-subscriber">
 						<div className="wp-block-jetpack-subscriptions__form" role="form">
 							<div className="wp-block-jetpack-subscriptions__form-elements">
-								<TextControl
-									placeholder={ subscribePlaceholder }
-									disabled={ true }
-									className={ classnames(
-										emailFieldClasses,
-										'wp-block-jetpack-subscriptions__textfield'
-									) }
-									style={ emailFieldStyles }
-								/>
+								{ activeStyleName !== 'button' && (
+									<TextControl
+										placeholder={ subscribePlaceholder }
+										disabled={ true }
+										className={ classnames(
+											emailFieldClasses,
+											'wp-block-jetpack-subscriptions__textfield'
+										) }
+										style={ emailFieldStyles }
+									/>
+								) }
 								<RichText
 									className={ classnames(
 										buttonClasses,

diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/subscriptions.php b/projects/plugins/jetpack/extensions/blocks/subscriptions/subscriptions.php
@@ -445,6 +445,22 @@ function get_element_class_names_from_attributes( $attributes ) {
 	);
 }
 
+/**
+ * Checks if block style is "button only"
+ *
+ * @param string $class_name Block attribute className; multiple names are spearated by space.
+ *
+ * @return bool
+ */
+function is_button_only_style( $class_name ) {
+	if ( empty( $class_name ) ) {
+		return false;
+	}
+
+	$class_names = explode( ' ', $class_name );
+	return in_array( 'is-style-button', $class_names, true );
+}
+
 /**
  * Uses block attributes to generate an array containing the styles for various block elements.
  * Based on Jetpack_Subscriptions_Widget::do_subscription_form() which the block was originally using.
@@ -454,6 +470,8 @@ function get_element_class_names_from_attributes( $attributes ) {
  * @return array
  */
 function get_element_styles_from_attributes( $attributes ) {
+	$is_button_only_style = is_button_only_style( get_attribute( $attributes, 'className', '' ) );
+
 	$button_background_style = ! has_attribute( $attributes, 'buttonBackgroundColor' ) && has_attribute( $attributes, 'customButtonGradient' )
 		? get_attribute( $attributes, 'customButtonGradient' )
 		: get_attribute( $attributes, 'customButtonBackgroundColor' );
@@ -493,11 +511,14 @@ function get_element_styles_from_attributes( $attributes ) {
 	$email_field_styles   .= $style;
 
 	$button_spacing = get_attribute( $attributes, 'spacing', DEFAULT_SPACING_VALUE );
-	if ( true === get_attribute( $attributes, 'buttonOnNewLine' ) ) {
-		$submit_button_styles .= sprintf( 'margin-top: %dpx;', $button_spacing );
-	} else {
-		$submit_button_styles .= 'margin: 0px; '; // Reset Safari's 2px default margin for buttons affecting input and button union
-		$submit_button_styles .= sprintf( 'margin-left: %dpx;', $button_spacing );
+	if ( ! $is_button_only_style ) {
+		$button_spacing = get_attribute( $attributes, 'spacing', DEFAULT_SPACING_VALUE );
+		if ( true === get_attribute( $attributes, 'buttonOnNewLine' ) ) {
+			$submit_button_styles .= sprintf( 'margin-top: %dpx;', $button_spacing );
+		} else {
+			$submit_button_styles .= 'margin: 0; '; // Reset Safari's 2px default margin for buttons affecting input and button union
+			$submit_button_styles .= sprintf( 'margin-left: %dpx;', $button_spacing );
+		}
 	}
 
 	if ( has_attribute( $attributes, 'borderColor' ) ) {
@@ -674,6 +695,7 @@ function render_block( $attributes ) {
 		),
 		'source'                        => 'subscribe-block',
 		'app_source'                    => get_attribute( $attributes, 'appSource', null ),
+		'class_name'                    => get_attribute( $attributes, 'className' ),
 	);
 
 	if ( ! jetpack_is_frontend() ) {
@@ -707,12 +729,13 @@ function get_post_access_level_for_current_post() {
  * @return string
  */
 function render_for_website( $data, $classes, $styles ) {
-	$lang              = get_locale();
-	$blog_id           = \Jetpack_Options::get_option( 'id' );
-	$widget_id_suffix  = Jetpack_Subscriptions_Widget::$instance_count > 1 ? '-' . Jetpack_Subscriptions_Widget::$instance_count : '';
-	$form_id           = 'subscribe-blog' . $widget_id_suffix;
-	$form_url          = 'https://wordpress.com/email-subscriptions';
-	$post_access_level = get_post_access_level_for_current_post();
+	$lang                 = get_locale();
+	$blog_id              = \Jetpack_Options::get_option( 'id' );
+	$widget_id_suffix     = Jetpack_Subscriptions_Widget::$instance_count > 1 ? '-' . Jetpack_Subscriptions_Widget::$instance_count : '';
+	$form_id              = 'subscribe-blog' . $widget_id_suffix;
+	$form_url             = 'https://wordpress.com/email-subscriptions';
+	$post_access_level    = get_post_access_level_for_current_post();
+	$is_button_only_style = ! empty( $data['class_name'] ) ? is_button_only_style( $data['class_name'] ) : false;
 
 	// Post ID is used for pulling post-specific paid status, and returning to the right post after confirming subscription
 	$post_id = null;
@@ -769,7 +792,7 @@ class="<?php echo esc_attr( $classes['submit_button'] ); ?>"
 					id="<?php echo esc_attr( $form_id ); ?>"
 				>
 					<div class="wp-block-jetpack-subscriptions__form-elements">
-						<?php if ( ! $is_subscribed ) : ?>
+						<?php if ( ! $is_subscribed && ! $is_button_only_style ) : ?>
 						<p id="subscribe-email">
 							<label
 								id="<?php echo esc_attr( $subscribe_field_id . '-label' ); ?>"

diff --git a/projects/plugins/jetpack/extensions/blocks/subscriptions/view.js b/projects/plugins/jetpack/extensions/blocks/subscriptions/view.js
@@ -54,11 +54,14 @@ domReady( function () {
 					return;
 				}
 
-				const emailInput = form.querySelector( 'input[type=email]' );
-				const email = emailInput ? emailInput.value : form.dataset.subscriber_email;
-
-				if ( ! email ) {
-					return;
+				// If email is empty, we will ask for it in the modal that opens
+				// Email input can be hidden for "button only style" for example.
+				let email = form.querySelector( 'input[type=email]' )?.value ?? '';
+
+				// Fallback to provided email from the logged in user when set
+				if ( ! email && form.dataset.subscriber_email ) {
+					// eslint-disable-next-line no-console
+					email = form.dataset.subscriber_email;
 				}
 
 				const action = form.querySelector( 'input[name=action]' ).value;