jetpack / extensions / blocks / calendly / render.php

render.php in Jetpack – WP Security, Backup, Speed, & Growth 16.2, at extensions/blocks/calendly/render.php

254 lines 8.0 KB

Raw Download Zip

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