Revue Block: Minor Fixes (#14792)

* Proper block and responsive inputs * Move username field in the sidebar * Create CSS classes dynamically
Automattic · Feb 26, 2020 · 64db1ea · 64db1ea
1 parent ef7b163
commit 64db1ea
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 23 deletions.
diff --git a/extensions/blocks/revue/edit.js b/extensions/blocks/revue/edit.js
@@ -6,16 +6,14 @@ import { isEqual } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { BlockControls, BlockIcon, InspectorControls } from '@wordpress/block-editor';
+import { BlockIcon, InspectorControls } from '@wordpress/block-editor';
 import {
 	Button,
 	ToggleControl,
 	ExternalLink,
-	IconButton,
 	PanelBody,
 	Placeholder,
 	TextControl,
-	Toolbar,
 } from '@wordpress/components';
 import { useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -63,7 +61,7 @@ export default function RevueEdit( props ) {
 
 	const saveUsername = event => {
 		event.preventDefault();
-		setAttributes( { revueUsername: username } );
+		setAttributes( { revueUsername: username.trim() } );
 	};
 
 	const supportLink =
@@ -82,7 +80,7 @@ export default function RevueEdit( props ) {
 					<form onSubmit={ saveUsername }>
 						<input
 							className="components-placeholder__input"
-							onChange={ event => setUsername( event.target.value ) }
+							onChange={ event => setUsername( event.target.value.trim() ) }
 							placeholder={ __( 'Enter your Revue username here…', 'jetpack' ) }
 							type="text"
 							value={ username }
@@ -104,7 +102,7 @@ export default function RevueEdit( props ) {
 			{ revueUsername && (
 				<>
 					<InspectorControls>
-						<PanelBody title={ __( 'Form Settings', 'jetpack' ) }>
+						<PanelBody title={ __( 'Settings', 'jetpack' ) }>
 							<ToggleControl
 								label={ __( 'Show first name field.', 'jetpack' ) }
 								checked={ firstNameShow }
@@ -115,20 +113,17 @@ export default function RevueEdit( props ) {
 								checked={ lastNameShow }
 								onChange={ () => setAttributes( { lastNameShow: ! lastNameShow } ) }
 							/>
+							<TextControl
+								label={ __( 'Revue Username', 'jetpack' ) }
+								onChange={ value => {
+									setUsername( value.trim() );
+									setAttributes( { revueUsername: value.trim() } );
+								} }
+								value={ revueUsername }
+							/>
 						</PanelBody>
 					</InspectorControls>
 
-					<BlockControls>
-						<Toolbar>
-							<IconButton
-								className="components-toolbar__control"
-								label={ __( 'Edit Username', 'jetpack' ) }
-								icon="edit"
-								onClick={ () => setAttributes( { revueUsername: undefined } ) }
-							/>
-						</Toolbar>
-					</BlockControls>
-
 					<TextControl
 						label={
 							<JetpackFieldLabel

diff --git a/extensions/blocks/revue/revue.php b/extensions/blocks/revue/revue.php
@@ -35,16 +35,18 @@ function jetpack_render_revue_block( $attributes ) {
 	$last_name_placeholder  = jetpack_get_revue_attribute( 'lastNamePlaceholder', $attributes );
 	$last_name_show         = jetpack_get_revue_attribute( 'lastNameShow', $attributes );
 	$url                    = sprintf( 'https://www.getrevue.co/profile/%s/add_subscriber', $attributes['revueUsername'] );
+	$base_class             = Jetpack_Gutenberg::block_classes( 'revue', array() ) . '__';
+	$classes                = Jetpack_Gutenberg::block_classes( 'revue', $attributes );
 
 	Jetpack_Gutenberg::load_assets_as_required( 'revue' );
 
 	ob_start();
 	?>
 
-<div class="wp-block-jetpack-revue">
+<div class="<?php echo esc_attr( $classes ); ?>">
 	<form
 		action="<?php echo esc_url( $url ); ?>"
-		class="wp-block-jetpack-revue__form is-visible"
+		class="<?php echo esc_attr( $base_class . 'form is-visible' ); ?>"
 		method="post"
 		name="revue-form"
 		target="_blank"
@@ -54,7 +56,7 @@ class="wp-block-jetpack-revue__form is-visible"
 				<?php echo esc_html( $email_label ); ?>
 				<span class="required"><?php esc_html_e( '(required)', 'jetpack' ); ?></span>
 				<input
-					class="wp-block-jetpack-revue__email"
+					class="<?php echo esc_attr( $base_class . 'email' ); ?>"
 					name="member[email]"
 					placeholder="<?php echo esc_attr( $email_placeholder ); ?>"
 					required
@@ -67,7 +69,7 @@ class="wp-block-jetpack-revue__email"
 				<label>
 					<?php echo esc_html( $first_name_label ); ?>
 					<input
-						class="wp-block-jetpack-revue__first-name"
+						class="<?php echo esc_attr( $base_class . 'first-name' ); ?>"
 						name="member[first_name]"
 						placeholder="<?php echo esc_attr( $first_name_placeholder ); ?>"
 						type="text"
@@ -82,7 +84,7 @@ class="wp-block-jetpack-revue__first-name"
 				<label>
 					<?php echo esc_html( $last_name_label ); ?>
 					<input
-						class="wp-block-jetpack-revue__last-name"
+						class="<?php echo esc_attr( $base_class . 'last-name' ); ?>"
 						name="member[last_name]"
 						placeholder="<?php echo esc_attr( $last_name_placeholder ); ?>"
 						type="text"
@@ -95,7 +97,7 @@ class="wp-block-jetpack-revue__last-name"
 			echo jetpack_get_revue_button( $attributes );
 		?>
 	</form>
-	<div class="wp-block-jetpack-revue__message">
+	<div class="<?php echo esc_attr( $base_class . 'message' ); ?>">
 		<p>
 			<strong><?php esc_html_e( 'Subscription received!', 'jetpack' ); ?></strong>
 		</p>

diff --git a/extensions/blocks/revue/view.scss b/extensions/blocks/revue/view.scss
@@ -7,15 +7,25 @@
 	> div {
 		margin-bottom: 0.75em;
 	}
+
 	.wp-block-button {
 		margin-top: 0;
 	}
+
 	input {
+		display: block;
 		margin-top: 0.25em;
+		width: 100%;
+		@media screen and ( min-width: 600px ) {
+			width: 50%;
+		}
 	}
+
 	label {
+		display: block;
 		font-weight: bold;
 	}
+
 	.required {
 		color: #aaaaaa;
 		font-weight: normal;