← All changes | extensions/blocks/calendly/render.php +253 -0 16.2-beta → 16.3 View file →

		@@ -1,0 +1,253 @@
	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_url( $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_url( $url ),
	251	+ wp_kses_post( $submit_button_text )
	252	+ );
	253	+}