Geen omschrijving

calendly.php 7.8KB

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