calendly.php ➔ deprecated_render_button_v1() - Code Metrics - Inspection of "[not verified] rename stats package to mc-stats" - Automattic/jetpack - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Push — add/stats-package ( 873a22...c3aabb )

unknown

created 2020-06-24 14:55 UTC

calendly.php ➔ deprecated_render_button_v1() B

↳ Parent: Project

Complexity

Conditions	6
Paths	2

Size

Total Lines

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
cc	6
nc	2
nop	4
dl	0
loc	35
rs	8.7377
c	0
b	0
f	0

<?php
/**
 * Calendly Block.
 *
 * @since 8.2.0
 *
 * @package Jetpack
 */

namespace Automattic\Jetpack\Extensions\Calendly;

use Jetpack_Gutenberg;

const FEATURE_NAME = 'calendly';
const BLOCK_NAME   = 'jetpack/' . FEATURE_NAME;

/**
 * Registers the block for use in Gutenberg
 * This is done via an action so that we can disable
 * registration if we need to.
 */
function register_block() {
	jetpack_register_block(
		BLOCK_NAME,
		array(
			'render_callback' => __NAMESPACE__ . '\load_assets',
			'plan_check'      => true,
		)
	);
}
add_action( 'init', __NAMESPACE__ . '\register_block' );

/**
 * Calendly block registration/dependency declaration.
 *
 * @param array  $attr    Array containing the Calendly block attributes.
 * @param string $content String containing the Calendly block content.
 *
 * @return string
 */
function load_assets( $attr, $content ) {

	if ( is_admin() ) {
		return;
	}
	$url = Jetpack_Gutenberg::validate_block_embed_url(
		get_attribute( $attr, 'url' ),
		array( 'calendly.com' )
	);
	if ( empty( $url ) ) {
		return;
	}

	/*
	 * Enqueue necessary scripts and styles.
	 */
	Jetpack_Gutenberg::load_assets_as_required( FEATURE_NAME );

	$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( FEATURE_NAME, $attr, array( 'calendly-style-' . $style ) );
	$block_id                = wp_unique_id( 'calendly-block-' );
	$is_amp_request          = class_exists( 'Jetpack_AMP_Support' ) && \Jetpack_AMP_Support::is_amp_request();

	if ( ! wp_script_is( 'jetpack-calendly-external-js' ) && ! $is_amp_request ) {
		enqueue_calendly_js();
	}

	$base_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 ),
			'text_color'              => sanitize_hex_color_no_hash( $text_color ),
			'primary_color'           => sanitize_hex_color_no_hash( $primary_color ),
		),
		$url
	);

	if ( 'link' === $style ) {
		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 );
		}

		// Render deprecated version of Calendly block if needed. New markup block button class before rendering here.
		if ( false === strpos( $content, 'wp-block-jetpack-button' ) ) {
			$content = deprecated_render_button_v1( $attr, $block_id, $classes, $url );
		} else {
			$content = str_replace( 'calendly-widget-id', esc_attr( $block_id ), $content );
			$content = str_replace( $base_url, $url, $content );
		}

		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.
		if ( $is_amp_request ) {
			$content = sprintf(
				'<div class="%1$s" id="%2$s"><a href="%3$s" role="button" target="_blank">%4$s</a></div>',
				esc_attr( Jetpack_Gutenberg::block_classes( FEATURE_NAME, $attr ) ),
				esc_attr( $block_id ),
				esc_js( $url ),
				wp_kses_post( get_attribute( $attr, 'submitButtonText' ) )
			);
		} else {
			$content = sprintf(
				'<div class="%1$s" id="%2$s"></div>',
				esc_attr( $classes ),
				esc_attr( $block_id )
			);
			$script  = <<<JS_END
Calendly.initInlineWidget({
	url: '%s',
	parentElement: document.getElementById('%s'),
	inlineStyles: false,
});
JS_END;
			wp_add_inline_script( 'jetpack-calendly-external-js', sprintf( $script, esc_url( $url ), esc_js( $block_id ) ) );
		}
	}

	return $content;
}

/**
 * Get filtered attributes.
 *
 * @param array  $attributes     Array containing the Calendly block attributes.
 * @param string $attribute_name String containing the attribute name to get.
 *
 * @return string
 */
function get_attribute( $attributes, $attribute_name ) {
	if ( isset( $attributes[ $attribute_name ] ) ) {
		return $attributes[ $attribute_name ];
	}

	$default_attributes = array(
		'style'                => 'inline',
		'submitButtonText'     => esc_html__( 'Schedule time with me', 'jetpack' ),
		'backgroundColor'      => 'ffffff',
		'textColor'            => '4D5055',
		'primaryColor'         => '00A2FF',
		'hideEventTypeDetails' => false,
	);

	if ( isset( $default_attributes[ $attribute_name ] ) ) {
		return $default_attributes[ $attribute_name ];
	}
}

/**
 * Enqueues the Calendly JS library and inline function to attach event
 * handlers to the button.
 *
 * @return void
 */
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();
					}
				} );
			}
		}"
	);
}

/**
 * Renders a deprecated legacy version of the button HTML.
 *
 * @param array  $attributes 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.
 *
 * @return string
 */
function deprecated_render_button_v1( $attributes, $block_id, $classes, $url ) {
	// This is the legacy version, so create the full link content.
	$submit_button_text             = get_attribute( $attributes, 'submitButtonText' );
	$submit_button_classes          = get_attribute( $attributes, 'submitButtonClasses' );
	$submit_button_text_color       = get_attribute( $attributes, 'customTextButtonColor' );
	$submit_button_background_color = get_attribute( $attributes, '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{%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="wp-block-button %1$s"><a id="%2$s" 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 )
	);
}


1			<?php
2			/**
3			* Calendly Block.
4			*
5			* @since 8.2.0
6			*
7			* @package Jetpack
8			*/
9
10			namespace Automattic\Jetpack\Extensions\Calendly;
11
12			use Jetpack_Gutenberg;
13
14			const FEATURE_NAME = 'calendly';
15			const BLOCK_NAME = 'jetpack/' . FEATURE_NAME;
16
17			/**
18			* Registers the block for use in Gutenberg
19			* This is done via an action so that we can disable
20			* registration if we need to.
21			*/
22			function register_block() {
23			jetpack_register_block(
24			BLOCK_NAME,
25			array(
26			'render_callback' => __NAMESPACE__ . '\load_assets',
27			'plan_check' => true,
28			)
29			);
30			}
31			add_action( 'init', __NAMESPACE__ . '\register_block' );
32
33			/**
34			* Calendly block registration/dependency declaration.
35			*
36			* @param array $attr Array containing the Calendly block attributes.
37			* @param string $content String containing the Calendly block content.
38			*
39			* @return string
40			*/
41			function load_assets( $attr, $content ) {
42
43			if ( is_admin() ) {
44			return;
45			}
46			$url = Jetpack_Gutenberg::validate_block_embed_url(
47			get_attribute( $attr, 'url' ),
48			array( 'calendly.com' )
49			);
50			if ( empty( $url ) ) {
51			return;
52			}
53
54			/*
55			* Enqueue necessary scripts and styles.
56			*/
57			Jetpack_Gutenberg::load_assets_as_required( FEATURE_NAME );
58
59			$style = get_attribute( $attr, 'style' );
60			$hide_event_type_details = get_attribute( $attr, 'hideEventTypeDetails' );
61			$background_color = get_attribute( $attr, 'backgroundColor' );
62			$text_color = get_attribute( $attr, 'textColor' );
63			$primary_color = get_attribute( $attr, 'primaryColor' );
64			$classes = Jetpack_Gutenberg::block_classes( FEATURE_NAME, $attr, array( 'calendly-style-' . $style ) );
65			$block_id = wp_unique_id( 'calendly-block-' );
66			$is_amp_request = class_exists( 'Jetpack_AMP_Support' ) && \Jetpack_AMP_Support::is_amp_request();
67
68			if ( ! wp_script_is( 'jetpack-calendly-external-js' ) && ! $is_amp_request ) {
69			enqueue_calendly_js();
70			}
71
72			$base_url = $url;
73			$url = add_query_arg(
74			array(
75			'hide_event_type_details' => (int) $hide_event_type_details,
76			'background_color' => sanitize_hex_color_no_hash( $background_color ),
77			'text_color' => sanitize_hex_color_no_hash( $text_color ),
78			'primary_color' => sanitize_hex_color_no_hash( $primary_color ),
79			),
80			$url
81			);
82
83			if ( 'link' === $style ) {
84			if ( ! wp_style_is( 'jetpack-calendly-external-css' ) ) {
85			wp_enqueue_style( 'jetpack-calendly-external-css', 'https://assets.calendly.com/assets/external/widget.css', null, JETPACK__VERSION );
86			}
87
88			// Render deprecated version of Calendly block if needed. New markup block button class before rendering here.
89			if ( false === strpos( $content, 'wp-block-jetpack-button' ) ) {
90			$content = deprecated_render_button_v1( $attr, $block_id, $classes, $url );
91			} else {
92			$content = str_replace( 'calendly-widget-id', esc_attr( $block_id ), $content );
93			$content = str_replace( $base_url, $url, $content );
94			}
95
96			if ( ! $is_amp_request ) {
97			wp_add_inline_script(
98			'jetpack-calendly-external-js',
99			sprintf( "calendly_attach_link_events( '%s' )", esc_js( $block_id ) )
100			);
101			}
102			} else { // Inline style.
103			if ( $is_amp_request ) {
104			$content = sprintf(
105			'<div class="%1$s" id="%2$s"><a href="%3$s" role="button" target="_blank">%4$s</a></div>',
106			esc_attr( Jetpack_Gutenberg::block_classes( FEATURE_NAME, $attr ) ),
107			esc_attr( $block_id ),
108			esc_js( $url ),
109			wp_kses_post( get_attribute( $attr, 'submitButtonText' ) )
110			);
111			} else {
112			$content = sprintf(
113			'<div class="%1$s" id="%2$s"></div>',
114			esc_attr( $classes ),
115			esc_attr( $block_id )
116			);
117			$script = <<<JS_END
118			Calendly.initInlineWidget({
119			url: '%s',
120			parentElement: document.getElementById('%s'),
121			inlineStyles: false,
122			});
123			JS_END;
124			wp_add_inline_script( 'jetpack-calendly-external-js', sprintf( $script, esc_url( $url ), esc_js( $block_id ) ) );
125			}
126			}
127
128			return $content;
129			}
130
131			/**
132			* Get filtered attributes.
133			*
134			* @param array $attributes Array containing the Calendly block attributes.
135			* @param string $attribute_name String containing the attribute name to get.
136			*
137			* @return string
138			*/
139			function get_attribute( $attributes, $attribute_name ) {
140			if ( isset( $attributes[ $attribute_name ] ) ) {
141			return $attributes[ $attribute_name ];
142			}
143
144			$default_attributes = array(
145			'style' => 'inline',
146			'submitButtonText' => esc_html__( 'Schedule time with me', 'jetpack' ),
147			'backgroundColor' => 'ffffff',
148			'textColor' => '4D5055',
149			'primaryColor' => '00A2FF',
150			'hideEventTypeDetails' => false,
151			);
152
153			if ( isset( $default_attributes[ $attribute_name ] ) ) {
154			return $default_attributes[ $attribute_name ];
155			}
156			}
157
158			/**
159			* Enqueues the Calendly JS library and inline function to attach event
160			* handlers to the button.
161			*
162			* @return void
163			*/
164			function enqueue_calendly_js() {
165			wp_enqueue_script(
166			'jetpack-calendly-external-js',
167			'https://assets.calendly.com/assets/external/widget.js',
168			null,
169			JETPACK__VERSION,
170			false
171			);
172
173			wp_add_inline_script(
174			'jetpack-calendly-external-js',
175			"function calendly_attach_link_events( elementId ) {
176			var widget = document.getElementById( elementId );
177			if ( widget ) {
178			widget.addEventListener( 'click', function( event ) {
179			event.preventDefault();
180			Calendly.initPopupWidget( { url: event.target.href } );
181			} );
182			widget.addEventListener( 'keydown', function( event ) {
183			// Enter and space keys.
184			if ( event.keyCode === 13 \|\| event.keyCode === 32 ) {
185			event.preventDefault();
186			event.target && event.target.click();
187			}
188			} );
189			}
190			}"
191			);
192			}
193
194			/**
195			* Renders a deprecated legacy version of the button HTML.
196			*
197			* @param array $attributes Array containing the Calendly block attributes.
198			* @param string $block_id The value for the ID attribute of the link.
199			* @param string $classes The CSS classes for the wrapper div.
200			* @param string $url Calendly URL for the link HREF.
201			*
202			* @return string
203			*/
204			function deprecated_render_button_v1( $attributes, $block_id, $classes, $url ) {
205			// This is the legacy version, so create the full link content.
206			$submit_button_text = get_attribute( $attributes, 'submitButtonText' );
207			$submit_button_classes = get_attribute( $attributes, 'submitButtonClasses' );
208			$submit_button_text_color = get_attribute( $attributes, 'customTextButtonColor' );
209			$submit_button_background_color = get_attribute( $attributes, 'customBackgroundButtonColor' );
210
211			/*
212			* If we have some additional styles from the editor
213			* (a custom text color, custom bg color, or both )
214			* Let's add that CSS inline.
215			*/
216			if ( ! empty( $submit_button_text_color ) \|\| ! empty( $submit_button_background_color ) ) {
217			$inline_styles = sprintf(
218			'#%1$s{%2$s%3$s}',
219			esc_attr( $block_id ),
220			! empty( $submit_button_text_color )
221			? 'color:#' . sanitize_hex_color_no_hash( $submit_button_text_color ) . ';'
222			: '',
223			! empty( $submit_button_background_color )
224			? 'background-color:#' . sanitize_hex_color_no_hash( $submit_button_background_color ) . ';'
225			: ''
226			);
227			wp_add_inline_style( 'jetpack-calendly-external-css', $inline_styles );
228			}
229
230			return sprintf(
231			'<div class="wp-block-button %1$s"><a id="%2$s" class="%3$s" href="%4$s" role="button">%5$s</a></div>',
232			esc_attr( $classes ),
233			esc_attr( $block_id ),
234			! empty( $submit_button_classes ) ? esc_attr( $submit_button_classes ) : 'wp-block-button__link',
235			esc_js( $url ),
236			wp_kses_post( $submit_button_text )
237			);
238			}
239

Automattic / jetpack

Push — add/stats-package ( 873a22...c3aabb )

calendly.php ➔ deprecated_render_button_v1() B

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like