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