Calendly: Change buttons to a standard link for AMP requests

extensions/blocks/calendly/calendly.php

@@ -70,6 +70,39 @@ function set_availability() {
 }
 add_action( 'init', 'Jetpack\Calendly_Block\set_availability' );
 
+/**
+ * Enqueues the Calendly JS library, and adds an inline
+ * function to attach event handlers to the button
+ */
+function enqueue_calendly_js() {
+	wp_enqueue_script(
+		'jetpack-calendly-external-js',
+		'https://assets.calendly.com/assets/external/widget.js',
+		null,
+		JETPACK__VERSION,
+		false
+	);
+	wp_add_inline_script(
+		'jetpack-calendly-external-js',
+		"function calendly_attach_link_events( elementId ) {
+			var widget = document.getElementById( elementId );
+			if ( widget ) {
+				widget.addEventListener( 'click', function( event ) {
+					event.preventDefault();
+					Calendly.initPopupWidget({url:event.target.href});
+				} );
+
+				widget.addEventListener( 'keydown', function( event ) {
+					// Enter and space keys.
+					if ( event.keyCode === 13 || event.keyCode === 32 ) {
+						event.preventDefault();
+						event.target && event.target.click();
+					}
+				} );
+			}
+		}"
+	);
+}
 /**
  * Calendly block registration/dependency declaration.
  *
@@ -90,31 +123,25 @@ function load_assets( $attr, $content ) {
 		return;
 	}
 
+	$style                   = get_attribute( $attr, 'style' );
+	$hide_event_type_details = get_attribute( $attr, 'hideEventTypeDetails' );
+	$background_color        = get_attribute( $attr, 'backgroundColor' );
+	$text_color              = get_attribute( $attr, 'textColor' );
+	$primary_color           = get_attribute( $attr, 'primaryColor' );
+	$classes                 = \Jetpack_Gutenberg::block_classes( 'calendly', $attr );
+	$is_amp_request          = class_exists( 'Jetpack_AMP_Support' ) && \Jetpack_AMP_Support::is_amp_request();
+	$block_id                = wp_unique_id( 'calendly-block-' );
+
 	/*
 	 * Enqueue necessary scripts and styles.
 	 */
 	\Jetpack_Gutenberg::load_assets_as_required( 'calendly' );
-	wp_enqueue_script(
-		'jetpack-calendly-external-js',
-		'https://assets.calendly.com/assets/external/widget.js',
-		null,
-		JETPACK__VERSION,
-		true
-	);
-
-	$style                          = get_attribute( $attr, 'style' );
-	$hide_event_type_details        = get_attribute( $attr, 'hideEventTypeDetails' );
-	$background_color               = get_attribute( $attr, 'backgroundColor' );
-	$text_color                     = get_attribute( $attr, 'textColor' );
-	$primary_color                  = get_attribute( $attr, 'primaryColor' );
-	$submit_button_text             = get_attribute( $attr, 'submitButtonText' );
-	$submit_button_classes          = get_attribute( $attr, 'submitButtonClasses' );
-	$submit_button_text_color       = get_attribute( $attr, 'customTextButtonColor' );
-	$submit_button_background_color = get_attribute( $attr, 'customBackgroundButtonColor' );
-	$classes                        = \Jetpack_Gutenberg::block_classes( 'calendly', $attr, array( 'calendly-style-' . $style ) );
-	$block_id                       = wp_unique_id( 'calendly-block-' );
+	if ( ! wp_script_is( 'jetpack-calendly-external-js' ) && ! $is_amp_request ) {
+		enqueue_calendly_js();
+	}
 
-	$url = add_query_arg(
+	$orig_url = $url;
+	$url      = add_query_arg(
 		array(
 			'hide_event_type_details' => (int) $hide_event_type_details,
 			'background_color'        => sanitize_hex_color_no_hash( $background_color ),
@@ -125,35 +152,19 @@ function load_assets( $attr, $content ) {
 	);
 
 	if ( 'link' === $style ) {
-		wp_enqueue_style( 'jetpack-calendly-external-css', 'https://assets.calendly.com/assets/external/widget.css', null, JETPACK__VERSION );
-
-		/*
-		 * If we have some additional styles from the editor
-		 * (a custom text color, custom bg color, or both )
-		 * Let's add that CSS inline.
-		 */
-		if ( ! empty( $submit_button_text_color ) || ! empty( $submit_button_background_color ) ) {
-			$inline_styles = sprintf(
-				'#%1$s .wp-block-button__link{%2$s%3$s}',
-				esc_attr( $block_id ),
-				! empty( $submit_button_text_color )
-					? 'color:#' . sanitize_hex_color_no_hash( $submit_button_text_color ) . ';'
-					: '',
-				! empty( $submit_button_background_color )
-					? 'background-color:#' . sanitize_hex_color_no_hash( $submit_button_background_color ) . ';'
-					: ''
-			);
-			wp_add_inline_style( 'jetpack-calendly-external-css', $inline_styles );
+		if ( ! wp_style_is( 'jetpack-calendly-external-css' ) ) {
+			wp_enqueue_style( 'jetpack-calendly-external-css', 'https://assets.calendly.com/assets/external/widget.css', null, JETPACK__VERSION );
+		}
+		if ( strstr( $content, sprintf( '>%s</a>', $orig_url ) ) ) {
+			$content = deprecated_render_button( $attr, $block_id, $classes, $url );
+		} else {
+			// It's the new version so simply substitute the ID.
+			$content = preg_replace( '/data-id-attr="placeholder"/', 'id="' . esc_attr( $block_id ) . '"', $content );
 		}
 
-		$content = sprintf(
-			'<div class="wp-block-button %1$s" id="%2$s"><a class="%3$s" role="button" onclick="Calendly.initPopupWidget({url:\'%4$s\'});return false;">%5$s</a></div>',
-			esc_attr( $classes ),
-			esc_attr( $block_id ),
-			! empty( $submit_button_classes ) ? esc_attr( $submit_button_classes ) : 'wp-block-button__link',
-			esc_js( $url ),
-			wp_kses_post( $submit_button_text )
-		);
+		if ( ! $is_amp_request ) {
+			wp_add_inline_script( 'jetpack-calendly-external-js', sprintf( "calendly_attach_link_events( '%s' )", esc_js( $block_id ) ) );
+		}
 	} else { // Inline style.
 		$content = sprintf(
 			'<div class="%1$s" id="%2$s"></div>',
@@ -173,6 +184,51 @@ function load_assets( $attr, $content ) {
 	return $content;
 }
 
+/**
+ * The renders the legacy version of the button HTML.
+ *
+ * @param array  $attr      Array containing the Calendly block attributes.
+ * @param string $block_id  The value for the ID attribute of the link.
+ * @param string $classes   The CSS classes for the wrapper div.
+ * @param string $url       Calendly URL for the link HREF.
+ */
+function deprecated_render_button( $attr, $block_id, $classes, $url ) {
+	// This is the lecacy version, so create the full link content.
+	$submit_button_text             = get_attribute( $attr, 'submitButtonText' );
+	$submit_button_classes          = get_attribute( $attr, 'submitButtonClasses' );
+	$submit_button_text_color       = get_attribute( $attr, 'customTextButtonColor' );
+	$submit_button_background_color = get_attribute( $attr, 'customBackgroundButtonColor' );
+
+	/*
+	 * If we have some additional styles from the editor
+	 * (a custom text color, custom bg color, or both )
+	 * Let's add that CSS inline.
+	 */
+	if ( ! empty( $submit_button_text_color ) || ! empty( $submit_button_background_color ) ) {
+		$inline_styles = sprintf(
+			'#%1$s .wp-block-button__link{%2$s%3$s}',
+			esc_attr( $block_id ),
+			! empty( $submit_button_text_color )
+				? 'color:#' . sanitize_hex_color_no_hash( $submit_button_text_color ) . ';'
+				: '',
+			! empty( $submit_button_background_color )
+				? 'background-color:#' . sanitize_hex_color_no_hash( $submit_button_background_color ) . ';'
+				: ''
+		);
+		wp_add_inline_style( 'jetpack-calendly-external-css', $inline_styles );
+	}
+
+	return sprintf(
+		'<div class="%1$s" id="%2$s"><a class="%3$s" href="%4$s" role="button">%5$s</a></div>',
+		esc_attr( $classes ),
+		esc_attr( $block_id ),
+		! empty( $submit_button_classes ) ? esc_attr( $submit_button_classes ) : 'wp-block-button__link',
+		esc_js( $url ),
+		wp_kses_post( $submit_button_text )
+	);
+}
+
+
 /**
  * Get filtered attributes.
  *

extensions/blocks/calendly/edit.js

@@ -159,7 +159,7 @@ export default function CalendlyEdit( props ) {
 			'backgroundButtonColor',
 			'textButtonColor',
 			'customBackgroundButtonColor',
-			'customBackgroundButtonColor',
+			'customTextButtonColor',
 		] ),
 		setAttributes,
 	};

extensions/blocks/calendly/index.js

@@ -9,6 +9,7 @@ import { createBlock } from '@wordpress/blocks';
  */
 import attributes from './attributes';
 import edit from './edit';
+import { SubmitButtonSave } from '../../shared/submit-button';
 import icon from './icon';
 import { getAttributesFromEmbedCode, REGEX } from './utils';
 
@@ -35,7 +36,11 @@ export const settings = {
 		html: false,
 	},
 	edit,
-	save: ( { attributes: { url } } ) => <a href={ url }>{ url }</a>,
+	save: function( { attributes: buttonAttributes } ) {
+		return (
+			<SubmitButtonSave className="wp-block-jetpack-calendly" attributes={ buttonAttributes } />
+		);
+	},
 	attributes,
 	example: {
 		attributes: {
@@ -57,4 +62,10 @@ export const settings = {
 			},
 		],
 	},
+	deprecated: [
+		{
+			attributes,
+			save: ( { attributes: { url } } ) => <a href={ url }>{ url }</a>,
+		},
+	],
 };

extensions/shared/submit-button.js

@@ -12,8 +12,9 @@ import {
 	ContrastChecker,
 	RichText,
 	withColors,
+	getColorClassName,
 } from '@wordpress/block-editor';
-import { isEqual, get } from 'lodash';
+import { isEqual, pick } from 'lodash';
 
 const { getComputedStyle } = window;
 
@@ -53,27 +54,65 @@ const applyFallbackStyles = withFallbackStyles( ( node, ownProps ) => {
 	};
 } );
 
+const getButtonClasses = ( { textButtonColor, backgroundButtonColor } ) => {
+	const textClass = getColorClassName( 'color', textButtonColor );
+	const backgroundClass = getColorClassName( 'background-color', backgroundButtonColor );
+	return classnames( 'wp-block-button__link', {
+		'has-text-color': textButtonColor,
+		[ textClass ]: textClass,
+		'has-background': backgroundButtonColor,
+		[ backgroundClass ]: backgroundClass,
+	} );
+};
+
+export function SubmitButtonSave( { className, attributes } ) {
+	const {
+		submitButtonText,
+		backgroundButtonColor,
+		textButtonColor,
+		customBackgroundButtonColor,
+		customTextButtonColor,
+		url,
+	} = attributes;
+
+	const buttonStyle = {
+		backgroundColor: backgroundButtonColor ? undefined : customBackgroundButtonColor,
+		color: textButtonColor ? undefined : customTextButtonColor,
+	};
+
+	const buttonClasses = getButtonClasses( { textButtonColor, backgroundButtonColor } );
+	return (
+		<div className={ classnames( 'wp-block-button', 'jetpack-submit-button', className ) }>
+			<RichText.Content
+				className={ buttonClasses }
+				href={ url }
+				data-id-attr="placeholder"
+				rel="noopener noreferrer"
+				role="button"
+				style={ buttonStyle }
+				tagName="a"
+				target="_blank"
+				value={ submitButtonText }
+			/>
+		</div>
+	);
+}
+
 class SubmitButton extends Component {
 	componentDidUpdate( prevProps ) {
 		if (
-			! isEqual( this.props.textButtonColor, prevProps.textButtonColor ) ||
-			! isEqual( this.props.backgroundButtonColor, prevProps.backgroundButtonColor )
+			! isEqual( this.props.attributes.textButtonColor, prevProps.attributes.textButtonColor ) ||
+			! isEqual(
+				this.props.attributes.backgroundButtonColor,
+				prevProps.attributes.backgroundButtonColor
+			)
 		) {
-			const buttonClasses = this.getButtonClasses();
+			const buttonClasses = getButtonClasses(
+				pick( this.props.attributes, [ 'textButtonColor', 'backgroundButtonColor' ] )
+			);
 			this.props.setAttributes( { submitButtonClasses: buttonClasses } );
 		}
 	}
-	getButtonClasses() {
-		const { textButtonColor, backgroundButtonColor } = this.props;
-		const textClass = get( textButtonColor, 'class' );
-		const backgroundClass = get( backgroundButtonColor, 'class' );
-		return classnames( 'wp-block-button__link', {
-			'has-text-color': textButtonColor.color,
-			[ textClass ]: textClass,
-			'has-background': backgroundButtonColor.color,
-			[ backgroundClass ]: backgroundClass,
-		} );
-	}
 	render() {
 		const {
 			attributes,
@@ -89,7 +128,9 @@ class SubmitButton extends Component {
 		const backgroundColor = backgroundButtonColor.color || fallbackBackgroundColor;
 		const color = textButtonColor.color || fallbackTextColor;
 		const buttonStyle = { border: 'none', backgroundColor, color };
-		const buttonClasses = this.getButtonClasses();
+		const buttonClasses = getButtonClasses(
+			pick( this.attributes, [ 'backgroundButtonColor', 'textButtonColor' ] )
+		);
 
 		return (
 			<Fragment>
@@ -121,6 +162,7 @@ class SubmitButton extends Component {
 						] }
 					/>
 					<ContrastChecker
+						isLargeText={ false }
 						textColor={ color }
 						backgroundColor={ backgroundColor }
 						fallbackBackgroundColor