diff --git a/extensions/blocks/contact-form/components/jetpack-field-label.js b/extensions/blocks/contact-form/components/jetpack-field-label.js
index 9c596b4d33103..2c1d48d652cff 100644
--- a/extensions/blocks/contact-form/components/jetpack-field-label.js
+++ b/extensions/blocks/contact-form/components/jetpack-field-label.js
@@ -5,7 +5,14 @@ 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 (
{
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
index d4c1ad2afc981..2a8dfada83ba9 100644
--- 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
index b13d84edaf4e4..32f21749351ed 100644
--- 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 ) {
setAttributes( { firstNameField: ! firstNameField } ) }
+ checked={ firstNameShow }
+ onChange={ () => setAttributes( { firstNameShow: ! firstNameShow } ) }
/>
setAttributes( { lastNameField: ! lastNameField } ) }
+ checked={ lastNameShow }
+ onChange={ () => setAttributes( { lastNameShow: ! lastNameShow } ) }
/>
@@ -119,30 +129,47 @@ export default function RevueEdit( props ) {
-
+
+ }
+ onChange={ value => setAttributes( { emailPlaceholder: value } ) }
+ placeholder={ emailPlaceholder }
+ value={ emailPlaceholder }
+ />
+ { firstNameShow && (
+ }
+ onChange={ value => setAttributes( { firstNamePlaceholder: value } ) }
+ placeholder={ firstNamePlaceholder }
+ value={ firstNamePlaceholder }
/>
- { firstNameField && (
-
- ) }
- { lastNameField && (
-
- ) }
-
- { __( 'Preview Only', 'jetpack' ) }
-
-
+ ) }
+ { lastNameShow && (
+
+ }
+ onChange={ value => setAttributes( { lastNamePlaceholder: value } ) }
+ placeholder={ lastNamePlaceholder }
+ value={ lastNamePlaceholder }
+ />
+ ) }
>
) }
diff --git a/extensions/blocks/revue/editor.scss b/extensions/blocks/revue/editor.scss
index 01c004b3cb971..13238b5790917 100644
--- 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
index 4ba20c3892af9..11a582eb4b3ec 100644
--- a/extensions/blocks/revue/revue.php
+++ b/extensions/blocks/revue/revue.php
@@ -26,23 +26,25 @@ 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
?>
@@ -105,6 +106,7 @@ class="wp-block-jetpack-revue__last-name"
"
style=""
type="submit"
>
-
+
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 ];
+ }
+}