Skip to content

Commit

Permalink
Add button width to Subscriptions form
Browse files Browse the repository at this point in the history
  • Loading branch information
@stacimc
stacimc committed Feb 25, 2021
1 parent 65cc360 commit 0d476d8
Show file tree
Hide file tree
Showing 6 changed files with 105 additions and 62 deletions.
82 changes: 44 additions & 38 deletions projects/plugins/jetpack/extensions/blocks/button/button-width-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,15 @@ const alignedWidthUnits = [

const predefinedWidths = [ '25%', '50%', '75%', '100%' ];

export default function ButtonWidthPanel( { align, width, setAttributes } ) {
export default function ButtonWidthPanel( props ) {
return (
<PanelBody title={ __( 'Width settings', 'jetpack' ) }>
<ButtonWidthControl { ...props } />
</PanelBody>
);
}

export function ButtonWidthControl( { align, width, onChange } ) {
// Left and right aligned blocks are floated so % widths don't work as expected.
const isAlignedLeftOrRight = align === 'left' || align === 'right';

Expand All @@ -37,45 +45,43 @@ export default function ButtonWidthPanel( { align, width, setAttributes } ) {
const newWidth = width === selectedWidth ? undefined : selectedWidth;

// Update attributes.
setAttributes( { width: newWidth } );
onChange( newWidth );
}

return (
<PanelBody title={ __( 'Width settings', 'jetpack' ) }>
<BaseControl label={ __( 'Button width', 'jetpack' ) }>
<div
className={ classnames( 'jetpack-button__width-settings', {
'is-aligned': isAlignedLeftOrRight,
} ) }
>
{ ! isAlignedLeftOrRight && (
<ButtonGroup aria-label={ __( 'Percentage Width', 'jetpack' ) }>
{ predefinedWidths.map( widthValue => {
return (
<Button
key={ widthValue }
isSmall
isPrimary={ widthValue === width }
onClick={ () => handleChange( widthValue ) }
>
{ widthValue }
</Button>
);
} ) }
</ButtonGroup>
) }
<UnitControl
className="jetpack-button__custom-width"
isResetValueOnUnitChange
max={ width?.includes( '%' ) ? 100 : undefined }
min={ 0 }
onChange={ selectedWidth => setAttributes( { width: selectedWidth } ) }
size={ 'small' }
units={ isAlignedLeftOrRight ? alignedWidthUnits : widthUnits }
value={ width }
/>
</div>
</BaseControl>
</PanelBody>
<BaseControl label={ __( 'Button width', 'jetpack' ) }>
<div
className={ classnames( 'jetpack-button__width-settings', {
'is-aligned': isAlignedLeftOrRight,
} ) }
>
{ ! isAlignedLeftOrRight && (
<ButtonGroup aria-label={ __( 'Percentage Width', 'jetpack' ) }>
{ predefinedWidths.map( widthValue => {
return (
<Button
key={ widthValue }
isSmall
isPrimary={ widthValue === width }
onClick={ () => handleChange( widthValue ) }
>
{ widthValue }
</Button>
);
} ) }
</ButtonGroup>
) }
<UnitControl
className="jetpack-button__custom-width"
isResetValueOnUnitChange
max={ width?.includes( '%' ) ? 100 : undefined }
min={ 0 }
onChange={ selectedWidth => onChange( selectedWidth ) }
size={ 'small' }
units={ isAlignedLeftOrRight ? alignedWidthUnits : widthUnits }
value={ width }
/>
</div>
</BaseControl>
);
}
8 changes: 6 additions & 2 deletions projects/plugins/jetpack/extensions/blocks/button/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ function ButtonEdit( {
};

useEffect( () => {
// Reset button width if switching to left or right alignment for first time.
// Reset button width if switching to left or right (floated) alignment for first time.
const alignmentChanged = previousAlign !== align;
const isAlignedLeftRight = align === 'left' || align === 'right';

Expand Down Expand Up @@ -130,7 +130,11 @@ function ButtonEdit( {
} }
/>
<ButtonBorderPanel borderRadius={ borderRadius } setAttributes={ setAttributes } />
<ButtonWidthPanel align={ align } width={ width } setAttributes={ setAttributes } />
<ButtonWidthPanel
align={ align }
width={ width }
onChange={ newWidth => setAttributes( { width: newWidth } ) }
/>
</InspectorControls>
</div>
);
Expand Down
3 changes: 3 additions & 0 deletions projects/plugins/jetpack/extensions/blocks/subscriptions/attributes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@ export default {
type: 'boolean',
default: false,
},
buttonWidth: {
type: 'string',
},
submitButtonText: {
type: 'string',
default: __( 'Subscribe', 'jetpack' ),
Expand Down
13 changes: 11 additions & 2 deletions projects/plugins/jetpack/extensions/blocks/subscriptions/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import {
__experimentalPanelColorGradientSettings as PanelColorGradientSettings,
__experimentalUseGradient as useGradient,
} from '@wordpress/block-editor';
import { ButtonWidthControl } from '../button/button-width-panel';
import { useEffect, useState } from '@wordpress/element';
import { compose } from '@wordpress/compose';

Expand Down Expand Up @@ -63,7 +64,8 @@ const applyFallbackStyles = withFallbackStyles( ( node, ownProps ) => {
buttonBackgroundColorValue || ! node
? undefined
: buttonNode && getComputedStyle( buttonNode ).backgroundColor,
fallbackTextColor: textColorValue || ! node ? undefined : buttonNode && getComputedStyle( buttonNode ).color,
fallbackTextColor:
textColorValue || ! node ? undefined : buttonNode && getComputedStyle( buttonNode ).color,
};
} );

Expand Down Expand Up @@ -91,6 +93,7 @@ function SubscriptionEdit( props ) {
const {
borderRadius,
borderWeight,
buttonWidth,
padding,
spacing,
submitButtonText,
Expand Down Expand Up @@ -180,6 +183,7 @@ function SubscriptionEdit( props ) {
...( buttonOnNewLine
? { marginTop: getSpacingStyleValue( spacing ) + 'px' }
: { marginLeft: getSpacingStyleValue( spacing ) + 'px' } ),
width: buttonWidth,
};

const getSubscriberCount = () => {
Expand Down Expand Up @@ -372,6 +376,12 @@ function SubscriptionEdit( props ) {
allowReset
onChange={ newSpacingValue => setAttributes( { spacing: newSpacingValue } ) }
/>

<ButtonWidthControl
align={ null }
width={ buttonWidth }
onChange={ newButtonWidth => setAttributes( { buttonWidth: newButtonWidth } ) }
/>
</PanelBody>

<PanelBody
Expand Down Expand Up @@ -416,7 +426,6 @@ function SubscriptionEdit( props ) {
) }
style={ emailFieldStyles }
/>

<RichText
className={ classnames(
buttonClasses,
Expand Down
4 changes: 4 additions & 0 deletions projects/plugins/jetpack/extensions/blocks/subscriptions/save.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ export default function Save( { className, attributes } ) {
customBorderColor,
padding,
spacing,
buttonWidth,
} = attributes;

const isGradientAvailable = !! getGradientClass;
Expand Down Expand Up @@ -95,6 +96,8 @@ export default function Save( { className, attributes } ) {
? customButtonGradient
: customButtonBackgroundColor;

const buttonWidthStyle = buttonWidth ? buttonWidth : undefined;

const getBlockClassName = () => {
return classnames(
className,
Expand Down Expand Up @@ -122,6 +125,7 @@ export default function Save( { className, attributes } ) {
custom_border_radius: borderRadius || DEFAULT_BORDER_RADIUS_VALUE,
custom_border_weight: borderWeight || DEFAULT_BORDER_WEIGHT_VALUE,
custom_border_color: customBorderColor,
custom_button_width: buttonWidthStyle,
custom_padding: padding || DEFAULT_PADDING_VALUE,
custom_spacing: spacing || DEFAULT_SPACING_VALUE,
submit_button_classes: submitButtonClasses,
Expand Down
57 changes: 37 additions & 20 deletions projects/plugins/jetpack/modules/subscriptions/views.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -258,21 +258,22 @@ static function render_widget_status_messages( $instance ) {
* @param string $subscribe_email The email to use to prefill the form.
*/
static function render_widget_subscription_form( $args, $instance, $subscribe_email ) {
$show_only_email_and_button = $instance['show_only_email_and_button'];
$show_subscribers_total = (bool) $instance['show_subscribers_total'];
$subscribe_text = empty( $instance['show_only_email_and_button'] ) ?
$show_only_email_and_button = $instance['show_only_email_and_button'];
$show_subscribers_total = (bool) $instance['show_subscribers_total'];
$subscribe_text = empty( $instance['show_only_email_and_button'] ) ?
stripslashes( $instance['subscribe_text'] ) :
false;
$referer = ( is_ssl() ? 'https' : 'http' ) . '://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
$source = 'widget';
$widget_id = esc_attr( ! empty( $args['widget_id'] ) ? esc_attr( $args['widget_id'] ) : mt_rand( 450, 550 ) );
$subscribe_button = ! empty( $instance['submit_button_text'] ) ? $instance['submit_button_text'] : $instance['subscribe_button'];
$subscribers_total = self::fetch_subscriber_count();
$subscribe_placeholder = isset( $instance['subscribe_placeholder'] ) ? stripslashes( $instance['subscribe_placeholder'] ) : '';
$submit_button_classes = isset( $instance['submit_button_classes'] ) ? $instance['submit_button_classes'] : '';
$submit_button_styles = isset( $instance['submit_button_styles'] ) ? $instance['submit_button_styles'] : '';
$email_field_classes = isset( $instance['email_field_classes'] ) ? $instance['email_field_classes'] : '';
$email_field_styles = isset( $instance['email_field_styles'] ) ? $instance['email_field_styles'] : '';
$referer = ( is_ssl() ? 'https' : 'http' ) . '://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
$source = 'widget';
$widget_id = esc_attr( ! empty( $args['widget_id'] ) ? esc_attr( $args['widget_id'] ) : wp_rand( 450, 550 ) );
$subscribe_button = ! empty( $instance['submit_button_text'] ) ? $instance['submit_button_text'] : $instance['subscribe_button'];
$subscribers_total = self::fetch_subscriber_count();
$subscribe_placeholder = isset( $instance['subscribe_placeholder'] ) ? stripslashes( $instance['subscribe_placeholder'] ) : '';
$submit_button_classes = isset( $instance['submit_button_classes'] ) ? $instance['submit_button_classes'] : '';
$submit_button_styles = isset( $instance['submit_button_styles'] ) ? $instance['submit_button_styles'] : '';
$submit_button_wrapper_styles = isset( $instance['submit_button_wrapper_styles'] ) ? $instance['submit_button_wrapper_styles'] : '';
$email_field_classes = isset( $instance['email_field_classes'] ) ? $instance['email_field_classes'] : '';
$email_field_styles = isset( $instance['email_field_styles'] ) ? $instance['email_field_styles'] : '';

if ( self::is_wpcom() && ! self::wpcom_has_status_message() ) {
global $current_blog;
Expand Down Expand Up @@ -345,7 +346,11 @@ class="screen-reader-text"
?>
</p>

<p id="subscribe-submit">
<p id="subscribe-submit"
<?php if ( ! empty( $submit_button_wrapper_styles ) ) { ?>
style="<?php echo esc_attr( $submit_button_wrapper_styles ); ?>"
<?php }; ?>
>
<input type="hidden" name="action" value="subscribe"/>
<input type="hidden" name="blog_id" value="<?php echo (int) $current_blog->blog_id; ?>"/>
<input type="hidden" name="source" value="<?php echo esc_url( $referer ); ?>"/>
Expand Down Expand Up @@ -424,7 +429,11 @@ class="<?php echo esc_attr( $email_field_classes ); ?> required"
/>
</p>

<p id="subscribe-submit">
<p id="subscribe-submit"
<?php if ( ! empty( $submit_button_wrapper_styles ) ) { ?>
style="<?php echo esc_attr( $submit_button_wrapper_styles ); ?>"
<?php }; ?>
>
<input type="hidden" name="action" value="subscribe"/>
<input type="hidden" name="source" value="<?php echo esc_url( $referer ); ?>"/>
<input type="hidden" name="sub-type" value="<?php echo esc_attr( $source ); ?>"/>
Expand Down Expand Up @@ -762,18 +771,23 @@ function jetpack_do_subscription_form( $instance ) {
$submit_button_text = isset( $instance['submit_button_text'] ) ? $instance['submit_button_text'] : '';

// Build up a string with the submit button's classes and styles and set it on the instance
$submit_button_classes = isset( $instance['submit_button_classes'] ) ? $instance['submit_button_classes'] : '';
$email_field_classes = isset( $instance['email_field_classes'] ) ? $instance['email_field_classes'] : '';
$style = '';
$submit_button_styles = '';
$email_field_styles = '';
$submit_button_classes = isset( $instance['submit_button_classes'] ) ? $instance['submit_button_classes'] : '';
$email_field_classes = isset( $instance['email_field_classes'] ) ? $instance['email_field_classes'] : '';
$style = '';
$submit_button_styles = '';
$submit_button_wrapper_styles = '';
$email_field_styles = '';

if ( isset( $instance['custom_background_button_color'] ) && 'undefined' !== $instance['custom_background_button_color'] ) {
$submit_button_styles .= 'background: ' . $instance['custom_background_button_color'] . '; ';
}
if ( isset( $instance['custom_text_button_color'] ) && 'undefined' !== $instance['custom_text_button_color'] ) {
$submit_button_styles .= 'color: ' . $instance['custom_text_button_color'] . '; ';
}
if ( isset( $instance['custom_button_width'] ) && 'undefined' !== $instance['custom_button_width'] ) {
$submit_button_wrapper_styles .= 'width: ' . $instance['custom_button_width'] . '; ';
$submit_button_styles .= 'width: 100%; ';
}

if ( isset( $instance['custom_font_size'] ) && 'undefined' !== $instance['custom_font_size'] ) {
$style = 'font-size: ' . $instance['custom_font_size'] . 'px; ';
Expand Down Expand Up @@ -839,6 +853,9 @@ function jetpack_do_subscription_form( $instance ) {
if ( ! empty( $submit_button_styles ) ) {
$instance['submit_button_styles'] = trim( $submit_button_styles );
}
if ( ! empty( $submit_button_wrapper_styles ) ) {
$instance['submit_button_wrapper_styles'] = trim( $submit_button_wrapper_styles );
}
if ( ! empty( $email_field_styles ) ) {
$instance['email_field_styles'] = trim( $email_field_styles );
}
Expand Down

0 comments on commit 0d476d8

Please sign in to comment.