← All changes | extensions/blocks/calendly/calendly.php +9 -217 12.2.3 → 16.3-a.1 View file →

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