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 ) { <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 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 ?> <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" @@ -50,47 +52,46 @@ class="wp-block-jetpack-revue__form is-visible" > <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 ]; + } +}