MailChimp Block: refactor Edit component to function (#36746)

projects/plugins/jetpack/changelog/update-refactor-mailchimp-block

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+MailChimp block: refactor Edit component to function

projects/plugins/jetpack/extensions/blocks/mailchimp/body.js

@@ -0,0 +1,79 @@
+import { InnerBlocks, RichText } from '@wordpress/block-editor';
+import { TextControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import classnames from 'classnames';
+import {
+	BLOCK_CLASS,
+	NOTIFICATION_ERROR,
+	NOTIFICATION_PROCESSING,
+	NOTIFICATION_SUCCESS,
+	DEFAULT_EMAIL_PLACEHOLDER,
+	DEFAULT_CONSENT_TEXT,
+	DEFAULT_PROCESSING_LABEL,
+	DEFAULT_SUCCESS_LABEL,
+	DEFAULT_ERROR_LABEL,
+} from './constants';
+
+const innerButtonBlock = {
+	name: 'jetpack/button',
+	attributes: {
+		element: 'button',
+		text: __( 'Join my Mailchimp audience', 'jetpack' ),
+		uniqueId: 'mailchimp-widget-id',
+	},
+};
+
+const Body = ( { attributes, setAttributes, className, audition } ) => {
+	const {
+		emailPlaceholder = DEFAULT_EMAIL_PLACEHOLDER,
+		consentText = DEFAULT_CONSENT_TEXT,
+		processingLabel = DEFAULT_PROCESSING_LABEL,
+		successLabel = DEFAULT_SUCCESS_LABEL,
+		errorLabel = DEFAULT_ERROR_LABEL,
+	} = attributes;
+
+	const notification = {
+		[ NOTIFICATION_PROCESSING ]: processingLabel,
+		[ NOTIFICATION_SUCCESS ]: successLabel,
+		[ NOTIFICATION_ERROR ]: errorLabel,
+	}[ audition ];
+
+	return (
+		<div
+			className={ classnames( className, {
+				[ `${ BLOCK_CLASS }_notication-audition` ]: audition,
+			} ) }
+		>
+			<TextControl
+				aria-label={ emailPlaceholder }
+				className={ `${ BLOCK_CLASS }_text-input` }
+				disabled
+				onChange={ () => false }
+				placeholder={ emailPlaceholder }
+				title={ __( 'You can edit the email placeholder in the sidebar.', 'jetpack' ) }
+				type="email"
+			/>
+			<InnerBlocks
+				template={ [ [ innerButtonBlock.name, innerButtonBlock.attributes ] ] }
+				templateLock="all"
+			/>
+			<RichText
+				tagName="p"
+				placeholder={ __( 'Write consent text', 'jetpack' ) }
+				value={ consentText }
+				onChange={ value => setAttributes( { consentText: value } ) }
+				inlineToolbar
+			/>
+			{ audition && (
+				<div
+					className={ `${ BLOCK_CLASS }_notification ${ BLOCK_CLASS }_${ audition }` }
+					role={ audition === NOTIFICATION_ERROR ? 'alert' : 'status' }
+				>
+					{ notification }
+				</div>
+			) }
+		</div>
+	);
+};
+
+export default Body;

projects/plugins/jetpack/extensions/blocks/mailchimp/constants.js

@@ -4,6 +4,12 @@ export const NOTIFICATION_PROCESSING = 'processing';
 export const NOTIFICATION_SUCCESS = 'success';
 export const NOTIFICATION_ERROR = 'error';
 
+export const BLOCK_CLASS = 'wp-block-jetpack-mailchimp';
+
+export const API_STATE_LOADING = 0;
+export const API_STATE_CONNECTED = 1;
+export const API_STATE_NOTCONNECTED = 2;
+
 export const DEFAULT_EMAIL_PLACEHOLDER = __( 'Enter your email', 'jetpack' );
 export const DEFAULT_CONSENT_TEXT = __(
 	'By clicking submit, you agree to share your email address with the site owner and Mailchimp to receive marketing, updates, and other emails from the site owner. Use the unsubscribe link in those emails to opt out at any time.',

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

@@ -1,5 +1,7 @@
+import { InspectorControls } from '@wordpress/block-editor';
 import { ExternalLink, PanelBody, TextControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useRef } from 'react';
 import {
 	NOTIFICATION_PROCESSING,
 	NOTIFICATION_SUCCESS,
@@ -11,7 +13,7 @@ import {
 } from './constants';
 import MailchimpGroups from './mailchimp-groups';
 
-export function MailChimpBlockControls( {
+export const MailChimpBlockControls = ( {
 	auditionNotification,
 	clearAudition,
 	setAttributes,
@@ -23,7 +25,7 @@ export function MailChimpBlockControls( {
 	signupFieldTag,
 	signupFieldValue,
 	connectURL,
-} ) {
+} ) => {
 	const updateProcessingText = processing => {
 		setAttributes( { processingLabel: processing } );
 		auditionNotification( NOTIFICATION_PROCESSING );
@@ -111,4 +113,51 @@ export function MailChimpBlockControls( {
 			</PanelBody>
 		</>
 	);
-}
+};
+
+export const MailChimpInspectorControls = ( {
+	connectURL,
+	attributes,
+	setAttributes,
+	setAudition,
+} ) => {
+	const {
+		emailPlaceholder = DEFAULT_EMAIL_PLACEHOLDER,
+		processingLabel = DEFAULT_PROCESSING_LABEL,
+		successLabel = DEFAULT_SUCCESS_LABEL,
+		errorLabel = DEFAULT_ERROR_LABEL,
+		interests,
+		signupFieldTag,
+		signupFieldValue,
+	} = attributes;
+
+	const timeout = useRef( null );
+
+	const clearAudition = () => setAudition( null );
+	const auditionNotification = notification => {
+		setAudition( notification );
+
+		if ( timeout.current ) {
+			clearTimeout( timeout.current );
+		}
+		timeout.current = setTimeout( clearAudition, 3000 );
+	};
+
+	return (
+		<InspectorControls>
+			<MailChimpBlockControls
+				auditionNotification={ auditionNotification }
+				clearAudition={ clearAudition }
+				emailPlaceholder={ emailPlaceholder }
+				processingLabel={ processingLabel }
+				successLabel={ successLabel }
+				errorLabel={ errorLabel }
+				interests={ interests }
+				setAttributes={ setAttributes }
+				signupFieldTag={ signupFieldTag }
+				signupFieldValue={ signupFieldValue }
+				connectURL={ connectURL }
+			/>
+		</InspectorControls>
+	);
+};