Make text of Premium Content's Subscribe button editable (#46983)

* Stop resetting Subscribe button text on update

There was a hook configured to reset the text of the Subscribe button
back to 'Subscribe' each time it is updated, which makes it
impossible to edit the text. This commit removes that hook.

* Provide defaulting of button text to subscribe

Provides a jetpack/button block within the inner blocks template for the recurring payments block used by premium content. Also includes eslint formatting fix and addition of missing dependency in hook.

Co-authored-by: Staci Cooper <staci@Stacis-MacBook-Pro.local>
Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>

apps/editing-toolkit/editing-toolkit-plugin/premium-content/blocks/buttons/edit.js

@@ -24,22 +24,23 @@ const alignmentHooksSetting = {
 	isEmbedButton: true,
 };
 
-function ButtonsEdit( {
-	context,
-	jetpackButton,
-	subscribeButton,
-	setSubscribeButtonText,
-	setSubscribeButtonPlan,
-} ) {
+function ButtonsEdit( { context, subscribeButton, setSubscribeButtonPlan } ) {
 	const planId = context ? context[ 'premium-content/planId' ] : null;
 
 	const template = [
 		[
 			'jetpack/recurring-payments',
-			{
-				planId,
-				submitButtonText: __( 'Subscribe', 'full-site-editing' ),
-			},
+			{ planId },
+			[
+				[
+					'jetpack/button',
+					{
+						element: 'a',
+						uniqueId: 'recurring-payments-id',
+						text: __( 'Subscribe', 'full-site-editing' ),
+					},
+				],
+			],
 		],
 		[ 'premium-content/login-button' ],
 	];
@@ -54,7 +55,7 @@ function ButtonsEdit( {
 		if ( subscribeButton.attributes.planId !== planId ) {
 			setSubscribeButtonPlan( planId );
 		}
-	}, [ planId, subscribeButton ] );
+	}, [ planId, subscribeButton, setSubscribeButtonPlan ] );
 
 	// Hides the inspector controls of the Recurring Payments inner block acting as a subscribe button so users can only
 	// switch plans using the plan selector of the Premium Content block.
@@ -74,14 +75,6 @@ function ButtonsEdit( {
 		);
 	}, [ subscribeButton ] );
 
-	// Updates the subscribe button text.
-	useEffect( () => {
-		if ( ! jetpackButton ) {
-			return;
-		}
-		setSubscribeButtonText( __( 'Subscribe', 'full-site-editing' ) );
-	}, [ jetpackButton, setSubscribeButtonText ] );
-
 	return (
 		// eslint-disable-next-line wpcalypso/jsx-classname-namespace
 		<Block.div className="wp-block-buttons">
@@ -105,13 +98,7 @@ export default compose( [
 			.getBlock( props.clientId )
 			.innerBlocks.find( ( block ) => block.name === 'jetpack/recurring-payments' );
 
-		const jetpackButton = select( 'core/block-editor' )
-			.getBlock( subscribeButton.clientId )
-			.innerBlocks.find( ( block ) => block.name === 'jetpack/button' );
-		return {
-			subscribeButton,
-			jetpackButton,
-		};
+		return subscribeButton;
 	} ),
 	withDispatch( ( dispatch, props ) => ( {
 		/**
@@ -124,15 +111,5 @@ export default compose( [
 				planId,
 			} );
 		},
-		/**
-		 * Updates the button text on the Recurring Payments block acting as a subscribe button.
-		 *
-		 * @param text {string} Button text.
-		 */
-		setSubscribeButtonText( text ) {
-			dispatch( 'core/block-editor' ).updateBlockAttributes( props.jetpackButton.clientId, {
-				text,
-			} );
-		},
 	} ) ),
 ] )( ButtonsEdit );