In the editor, make the form work similar to the Contact Form block

Automattic · Feb 24, 2020 · 8e665f9 · 8e665f9
1 parent f1a155d
commit 8e665f9
Show file tree

Hide file tree

Showing 5 changed files with 152 additions and 66 deletions.
diff --git a/extensions/blocks/contact-form/components/jetpack-field-label.js b/extensions/blocks/contact-form/components/jetpack-field-label.js
@@ -5,14 +5,25 @@ import { __ } from '@wordpress/i18n';
 import { PlainText } from '@wordpress/block-editor';
 import { ToggleControl } from '@wordpress/components';
 
-const JetpackFieldLabel = ( { setAttributes, label, resetFocus, isSelected, required } ) => {
+const JetpackFieldLabel = ( {
+	setAttributes,
+	label,
+	labelFieldName,
+	resetFocus,
+	isSelected,
+	required,
+} ) => {
 	return (
 		<div className="jetpack-field-label">
 			<PlainText
 				value={ label }
 				className="jetpack-field-label__input"
 				onChange={ value => {
 					resetFocus && resetFocus();
+					if ( labelFieldName ) {
+						setAttributes( { [ labelFieldName ]: value } );
+						return;
+					}
 					setAttributes( { label: value } );
 				} }
 				placeholder={ __( 'Write label…', 'jetpack' ) }

diff --git a/extensions/blocks/revue/attributes.js b/extensions/blocks/revue/attributes.js
@@ -2,7 +2,7 @@
 /**
  * WordPress dependencies
  */
-import { _x } from '@wordpress/i18n';
+import { _x, __ } from '@wordpress/i18n';
 
 export default {
 	revueUsername: {
@@ -12,11 +12,35 @@ export default {
 		type: 'string',
 		default: _x( 'Subscribe', 'verb: e.g. subscribe to a newsletter.', 'jetpack' ),
 	},
-	firstNameField: {
+	emailLabel: {
+		type: 'string',
+		default: __( 'Email address', 'jetpack' ),
+	},
+	emailPlaceholder: {
+		type: 'string',
+		default: __( 'Your email address…', 'jetpack' ),
+	},
+	firstNameLabel: {
+		type: 'string',
+		default: __( 'First name', 'jetpack' ),
+	},
+	firstNamePlaceholder: {
+		type: 'string',
+		default: __( 'First name… (Optional)', 'jetpack' ),
+	},
+	firstNameShow: {
 		type: 'boolean',
 		default: true,
 	},
-	lastNameField: {
+	lastNameLabel: {
+		type: 'string',
+		default: __( 'Last name', 'jetpack' ),
+	},
+	lastNamePlaceholder: {
+		type: 'string',
+		default: __( 'Last name… (Optional)', 'jetpack' ),
+	},
+	lastNameShow: {
 		type: 'boolean',
 		default: true,
 	},

diff --git a/extensions/blocks/revue/edit.js b/extensions/blocks/revue/edit.js
@@ -10,7 +10,6 @@ import { BlockControls, BlockIcon, InspectorControls } from '@wordpress/block-ed
 import {
 	Button,
 	ToggleControl,
-	Disabled,
 	ExternalLink,
 	IconButton,
 	PanelBody,
@@ -26,6 +25,7 @@ import { __ } from '@wordpress/i18n';
  */
 import defaultAttributes from './attributes';
 import ButtonPreview from './button-preview';
+import JetpackFieldLabel from '../contact-form/components/jetpack-field-label';
 import icon from './icon';
 import { getValidatedAttributes } from '../../shared/get-validated-attributes';
 import { isAtomicSite, isSimpleSite } from '../../shared/site-type-utils';
@@ -41,7 +41,17 @@ export default function RevueEdit( props ) {
 		}
 	}, [ attributes ] );
 
-	const { revueUsername, firstNameField, lastNameField } = attributes;
+	const {
+		revueUsername,
+		emailLabel,
+		emailPlaceholder,
+		firstNameLabel,
+		firstNamePlaceholder,
+		firstNameShow,
+		lastNameLabel,
+		lastNamePlaceholder,
+		lastNameShow,
+	} = attributes;
 
 	const [ username, setUsername ] = useState( '' );
 
@@ -97,13 +107,13 @@ export default function RevueEdit( props ) {
 						<PanelBody title={ __( 'Form Settings', 'jetpack' ) }>
 							<ToggleControl
 								label={ __( 'Show first name field.', 'jetpack' ) }
-								checked={ firstNameField }
-								onChange={ () => setAttributes( { firstNameField: ! firstNameField } ) }
+								checked={ firstNameShow }
+								onChange={ () => setAttributes( { firstNameShow: ! firstNameShow } ) }
 							/>
 							<ToggleControl
 								label={ __( 'Show last name field.', 'jetpack' ) }
-								checked={ lastNameField }
-								onChange={ () => setAttributes( { lastNameField: ! lastNameField } ) }
+								checked={ lastNameShow }
+								onChange={ () => setAttributes( { lastNameShow: ! lastNameShow } ) }
 							/>
 						</PanelBody>
 					</InspectorControls>
@@ -119,30 +129,47 @@ export default function RevueEdit( props ) {
 						</Toolbar>
 					</BlockControls>
 
-					<Disabled>
+					<TextControl
+						label={
+							<JetpackFieldLabel
+								label={ emailLabel }
+								labelFieldName={ 'emailLabel' }
+								required
+								setAttributes={ setAttributes }
+							/>
+						}
+						onChange={ value => setAttributes( { emailPlaceholder: value } ) }
+						placeholder={ emailPlaceholder }
+						value={ emailPlaceholder }
+					/>
+					{ firstNameShow && (
 						<TextControl
-							label={ __( 'Email address', 'jetpack' ) }
-							placeholder={ __( 'Your email address…', 'jetpack' ) }
-							value=""
+							label={
+								<JetpackFieldLabel
+									label={ firstNameLabel }
+									labelFieldName={ 'firstNameLabel' }
+									setAttributes={ setAttributes }
+								/>
+							}
+							onChange={ value => setAttributes( { firstNamePlaceholder: value } ) }
+							placeholder={ firstNamePlaceholder }
+							value={ firstNamePlaceholder }
 						/>
-						{ firstNameField && (
-							<TextControl
-								label={ __( 'First name', 'jetpack' ) }
-								placeholder={ __( 'First name… (Optional)', 'jetpack' ) }
-								value=""
-							/>
-						) }
-						{ lastNameField && (
-							<TextControl
-								label={ __( 'Last name', 'jetpack' ) }
-								placeholder={ __( 'Last name… (Optional)', 'jetpack' ) }
-								value=""
-							/>
-						) }
-						<div className="wp-block-jetpack-revue__disabled-watermark">
-							{ __( 'Preview Only', 'jetpack' ) }
-						</div>
-					</Disabled>
+					) }
+					{ lastNameShow && (
+						<TextControl
+							label={
+								<JetpackFieldLabel
+									label={ lastNameLabel }
+									labelFieldName={ 'lastNameLabel' }
+									setAttributes={ setAttributes }
+								/>
+							}
+							onChange={ value => setAttributes( { lastNamePlaceholder: value } ) }
+							placeholder={ lastNamePlaceholder }
+							value={ lastNamePlaceholder }
+						/>
+					) }
 					<ButtonPreview { ...props } />
 				</>
 			) }

diff --git a/extensions/blocks/revue/editor.scss b/extensions/blocks/revue/editor.scss
@@ -1,20 +1,12 @@
 .wp-block-jetpack-revue {
-	.components-placeholder__learn-more {
-		margin-top: 1em;
+	.components-base-control {
+		margin-bottom: 16px;
 	}
-
-	.components-disabled {
-		opacity: 0.5;
-		position: relative;
+	.components-base-control__label {
+		display: block;
 	}
 
-	&__disabled-watermark {
-		font-size: 42px;
-		transform: rotate(-10deg);
-		top: 50%;
-		margin-top: -35px;
-		position: absolute;
-		width: 100%;
-		text-align: center;
+	.components-placeholder__learn-more {
+		margin-top: 1em;
 	}
 }
diff --git a/extensions/blocks/revue/revue.php b/extensions/blocks/revue/revue.php
@@ -26,71 +26,72 @@ function jetpack_render_revue_block( $attributes ) {
 		return '';
 	}
 
-	$first_name_field = array_key_exists( 'firstNameField', $attributes ) ? $attributes['firstNameField'] : true;
-	$last_name_field  = array_key_exists( 'lastNameField', $attributes ) ? $attributes['lastNameField'] : true;
+	$email_label            = jetpack_get_revue_attribute( 'emailLabel', $attributes );
+	$email_placeholder      = jetpack_get_revue_attribute( 'emailPlaceholder', $attributes );
+	$first_name_label       = jetpack_get_revue_attribute( 'firstNameLabel', $attributes );
+	$first_name_placeholder = jetpack_get_revue_attribute( 'firstNamePlaceholder', $attributes );
+	$first_name_show        = jetpack_get_revue_attribute( 'firstNameShow', $attributes );
+	$last_name_label        = jetpack_get_revue_attribute( 'lastNameLabel', $attributes );
+	$last_name_placeholder  = jetpack_get_revue_attribute( 'lastNamePlaceholder', $attributes );
+	$last_name_show         = jetpack_get_revue_attribute( 'lastNameShow', $attributes );
+	$url                    = esc_url( sprintf( 'https://www.getrevue.co/profile/%s/add_subscriber', $attributes['revueUsername'] ) );
 
 	Jetpack_Gutenberg::load_assets_as_required( 'revue' );
 
 	ob_start();
+	// phpcs:disable WordPress.Security.EscapeOutput.OutputNotEscaped -- output escaped in the get functions
 	?>
 
 <div class="wp-block-jetpack-revue">
 	<form
-		action="
-		<?php
-		echo esc_url(
-			sprintf( 'https://www.getrevue.co/profile/%s/add_subscriber', $attributes['revueUsername'] )
-		);
-		?>
-		"
+		action="<?php echo $url; ?>"
 		class="wp-block-jetpack-revue__form is-visible"
 		method="post"
 		name="revue-form"
 		target="_blank"
 	>
 		<div>
 			<label>
-				<?php esc_html_e( 'Email address', 'jetpack' ); ?>
+				<?php echo $email_label; ?>
 				<span class="required"><?php esc_html_e( '(required)', 'jetpack' ); ?></span>
 				<input
 					class="wp-block-jetpack-revue__email"
 					name="member[email]"
-					placeholder="<?php esc_attr_e( 'Your email address…', 'jetpack' ); ?>"
+					placeholder="<?php echo $email_placeholder; ?>"
 					required
 					type="email"
 				/>
 			</label>
 		</div>
-		<?php if ( $first_name_field ) : ?>
+		<?php if ( $first_name_show ) : ?>
 			<div>
 				<label>
-					<?php esc_html_e( 'First name', 'jetpack' ); ?>
+					<?php echo $first_name_label; ?>
 					<input
 						class="wp-block-jetpack-revue__first-name"
 						name="member[first_name]"
-						placeholder="<?php esc_attr_e( 'First name… (Optional)', 'jetpack' ); ?>"
+						placeholder="<?php echo $first_name_placeholder; ?>"
 						type="text"
 					/>
 				</label>
 			</div>
 			<?php
 			endif;
-		if ( $last_name_field ) :
+		if ( $last_name_show ) :
 			?>
 			<div>
 				<label>
-				<?php esc_html_e( 'Last name', 'jetpack' ); ?>
+				<?php echo $last_name_label; ?>
 					<input
 						class="wp-block-jetpack-revue__last-name"
 						name="member[last_name]"
-						placeholder="<?php esc_attr_e( 'Last name… (Optional)', 'jetpack' ); ?>"
+						placeholder="<?php echo $last_name_placeholder; ?>"
 						type="text"
 					/>
 				</label>
 			</div>
 			<?php
 			endif;
-			// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
 			echo jetpack_get_revue_button( $attributes );
 		?>
 	</form>
@@ -105,6 +106,7 @@ class="wp-block-jetpack-revue__last-name"
 </div>
 
 	<?php
+	// phpcs:enable WordPress.Security.EscapeOutput.OutputNotEscaped
 	return ob_get_clean();
 }
 
@@ -121,7 +123,7 @@ function jetpack_get_revue_button( $attributes ) {
 	$classes = array( 'wp-block-button__link' );
 	$styles  = array();
 
-	$has_text                    = array_key_exists( 'text', $attributes );
+	$text                        = jetpack_get_revue_attribute( 'text', $attributes );
 	$has_class_name              = array_key_exists( 'className', $attributes );
 	$has_named_text_color        = array_key_exists( 'textColor', $attributes );
 	$has_custom_text_color       = array_key_exists( 'customTextColor', $attributes );
@@ -188,10 +190,40 @@ class="<?php echo esc_attr( implode( ' ', $classes ) ); ?>"
 		style="<?php echo esc_attr( implode( ' ', $styles ) ); ?>"
 		type="submit"
 	>
-		<?php echo $has_text ? wp_kses_post( $attributes['text'] ) : esc_html__( 'Subscribe', 'jetpack' ); ?>
+		<?php echo wp_kses_post( $text ); ?>
 	</button>
 </div>
 
 	<?php
 	return ob_get_clean();
 }
+
+/**
+ * Get Revue block attribute.
+ *
+ * @param string $attribute  String containing the attribute name to get.
+ * @param array  $attributes Array containing the Revue block attributes.
+ *
+ * @return mixed
+ */
+function jetpack_get_revue_attribute( $attribute, $attributes ) {
+	if ( array_key_exists( $attribute, $attributes ) ) {
+		return $attributes[ $attribute ];
+	}
+
+	$default_attributes = array(
+		'text'                 => esc_html__( 'Subscribe', 'jetpack' ),
+		'emailLabel'           => esc_html__( 'Email address', 'jetpack' ),
+		'emailPlaceholder'     => esc_html__( 'Your email address…', 'jetpack' ),
+		'firstNameLabel'       => esc_html__( 'First name', 'jetpack' ),
+		'firstNamePlaceholder' => esc_html__( 'First name… (Optional)', 'jetpack' ),
+		'firstNameShow'        => true,
+		'lastNameLabel'        => esc_html__( 'Last name', 'jetpack' ),
+		'lastNamePlaceholder'  => esc_html__( 'Last name… (Optional)', 'jetpack' ),
+		'lastNameShow'         => true,
+	);
+
+	if ( array_key_exists( $attribute, $default_attributes ) ) {
+		return $default_attributes[ $attribute ];
+	}
+}