eventbrite.php
260 lines
| 1 | <?php |
| 2 | /** |
| 3 | * Eventbrite Block. |
| 4 | * |
| 5 | * @since 8.2.0 |
| 6 | * |
| 7 | * @package automattic/jetpack |
| 8 | */ |
| 9 | |
| 10 | namespace Automattic\Jetpack\Extensions\Eventbrite; |
| 11 | |
| 12 | use Automattic\Jetpack\Blocks; |
| 13 | use Jetpack_Gutenberg; |
| 14 | |
| 15 | /** |
| 16 | * Registers the block for use in Gutenberg |
| 17 | * This is done via an action so that we can disable |
| 18 | * registration if we need to. |
| 19 | */ |
| 20 | function register_block() { |
| 21 | Blocks::jetpack_register_block( |
| 22 | __DIR__, |
| 23 | array( 'render_callback' => __NAMESPACE__ . '\render_block' ) |
| 24 | ); |
| 25 | } |
| 26 | add_action( 'init', __NAMESPACE__ . '\register_block' ); |
| 27 | |
| 28 | /** |
| 29 | * Get current URL. |
| 30 | * |
| 31 | * @return string Current URL. |
| 32 | */ |
| 33 | function get_current_url() { |
| 34 | if ( isset( $_SERVER['HTTP_HOST'] ) ) { |
| 35 | $host = wp_unslash( $_SERVER['HTTP_HOST'] ); // phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotSanitized |
| 36 | } else { |
| 37 | $host = wp_parse_url( home_url(), PHP_URL_HOST ); |
| 38 | } |
| 39 | if ( isset( $_SERVER['REQUEST_URI'] ) ) { |
| 40 | $path = wp_unslash( $_SERVER['REQUEST_URI'] ); // phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotSanitized |
| 41 | } else { |
| 42 | $path = '/'; |
| 43 | } |
| 44 | return esc_url_raw( ( is_ssl() ? 'https' : 'http' ) . '://' . $host . $path ); |
| 45 | } |
| 46 | |
| 47 | /** |
| 48 | * Eventbrite block registration/dependency delclaration. |
| 49 | * |
| 50 | * @param array $attr Eventbrite block attributes. |
| 51 | * @param string $content Rendered embed element (without scripts) from the block editor. |
| 52 | * |
| 53 | * @return string Rendered block. |
| 54 | */ |
| 55 | function render_block( $attr, $content ) { |
| 56 | if ( is_admin() || empty( $attr['eventId'] ) || empty( $attr['url'] ) ) { |
| 57 | return ''; |
| 58 | } |
| 59 | |
| 60 | $attr['url'] = Jetpack_Gutenberg::validate_block_embed_url( |
| 61 | $attr['url'], |
| 62 | array( '#^https?:\/\/(?:[0-9a-z]+\.)?eventbrite\.(?:com|co\.uk|com\.ar|com\.au|be|com\.br|ca|cl|co|dk|de|es|fi|fr|hk|ie|it|com\.mx|nl|co\.nz|at|com\.pe|pt|ch|sg|se)\/e\/[^\/]*?(?:\d+)\/?(?:\?[^\/]*)?$#' ), |
| 63 | true |
| 64 | ); |
| 65 | |
| 66 | $widget_id = wp_unique_id( 'eventbrite-widget-' ); |
| 67 | |
| 68 | // Show the embedded version. |
| 69 | if ( empty( $attr['useModal'] ) && ( empty( $attr['style'] ) || 'modal' !== $attr['style'] ) ) { |
| 70 | return render_embed_block( $widget_id, Blocks::is_amp_request(), $attr ); |
| 71 | } else { |
| 72 | return render_modal_block( $widget_id, Blocks::is_amp_request(), $attr, $content ); |
| 73 | } |
| 74 | } |
| 75 | |
| 76 | /** |
| 77 | * Render block with embed style. |
| 78 | * |
| 79 | * @param string $widget_id Widget ID to use. |
| 80 | * @param bool $is_amp Whether AMP page. |
| 81 | * @param array $attr Eventbrite block attributes. |
| 82 | * @return string Rendered block. |
| 83 | */ |
| 84 | function render_embed_block( $widget_id, $is_amp, $attr ) { |
| 85 | |
| 86 | // $content contains a fallback link to the event that's saved in the post_content. |
| 87 | // Append a div that will hold the iframe embed created by the Eventbrite widget.js. |
| 88 | $classes = Blocks::classes( Blocks::get_block_feature( __DIR__ ), $attr ); |
| 89 | |
| 90 | $classes .= ' wp-block-jetpack-eventbrite--embed'; |
| 91 | |
| 92 | $direct_link = sprintf( |
| 93 | '<a href="%s" rel="noopener noreferrer" target="_blank" class="eventbrite__direct-link" %s>%s</a>', |
| 94 | esc_url( $attr['url'] ), |
| 95 | $is_amp ? 'placeholder fallback' : '', |
| 96 | esc_html__( 'Register on Eventbrite', 'jetpack' ) |
| 97 | ); |
| 98 | |
| 99 | if ( $is_amp ) { |
| 100 | $embed = sprintf( |
| 101 | '<amp-iframe src="%s" layout="responsive" resizable width="1" height="1" sandbox="allow-scripts allow-same-origin allow-forms"><button overflow>%s</button>%s</amp-iframe>', |
| 102 | esc_url( |
| 103 | add_query_arg( |
| 104 | array( |
| 105 | 'eid' => $attr['eventId'], |
| 106 | 'parent' => rawurlencode( get_current_url() ), |
| 107 | ), |
| 108 | 'https://www.eventbrite.com/checkout-external' |
| 109 | ) |
| 110 | ), |
| 111 | esc_html__( 'Expand', 'jetpack' ), |
| 112 | $direct_link |
| 113 | ); |
| 114 | } else { |
| 115 | $embed = $direct_link; |
| 116 | |
| 117 | wp_enqueue_script( 'eventbrite-widget', 'https://www.eventbrite.com/static/widgets/eb_widgets.js', array(), JETPACK__VERSION, true ); |
| 118 | |
| 119 | // Add CSS to hide direct link. |
| 120 | Jetpack_Gutenberg::load_assets_as_required( __DIR__ ); |
| 121 | |
| 122 | wp_add_inline_script( |
| 123 | 'eventbrite-widget', |
| 124 | "window.EBWidgets.createWidget( { |
| 125 | widgetType: 'checkout', |
| 126 | eventId: " . absint( $attr['eventId'] ) . ", |
| 127 | iframeContainerId: '" . esc_js( $widget_id ) . "', |
| 128 | } );" |
| 129 | ); |
| 130 | } |
| 131 | |
| 132 | return sprintf( |
| 133 | '<div id="%1$s" class="%2$s">%3$s</div>', |
| 134 | esc_attr( $widget_id ), |
| 135 | esc_attr( $classes ), |
| 136 | $embed |
| 137 | ); |
| 138 | } |
| 139 | |
| 140 | /** |
| 141 | * Render block with modal style. |
| 142 | * |
| 143 | * @param string $widget_id Widget ID to use. |
| 144 | * @param bool $is_amp Whether AMP page. |
| 145 | * @param array $attr Eventbrite block attributes. |
| 146 | * @param string $content Rendered embed element (without scripts) from the block editor. |
| 147 | * @return string Rendered block. |
| 148 | */ |
| 149 | function render_modal_block( $widget_id, $is_amp, $attr, $content ) { |
| 150 | |
| 151 | if ( $is_amp ) { |
| 152 | $lightbox_id = "{$widget_id}-lightbox"; |
| 153 | |
| 154 | // Add CSS to for lightbox. |
| 155 | Jetpack_Gutenberg::load_assets_as_required( __DIR__ ); |
| 156 | |
| 157 | $content = preg_replace( |
| 158 | '/\shref="#" target="_blank/', |
| 159 | sprintf( ' on="%s" ', esc_attr( "tap:{$lightbox_id}.open" ) ), |
| 160 | $content |
| 161 | ); |
| 162 | |
| 163 | $iframe_src = add_query_arg( |
| 164 | array( |
| 165 | // Note that modal=1 is intentionally omitted here since we need to put the close button inside the amp-lightbox. |
| 166 | 'eid' => $attr['eventId'], |
| 167 | 'parent' => rawurlencode( get_current_url() ), |
| 168 | ), |
| 169 | 'https://www.eventbrite.com/checkout-external' |
| 170 | ); |
| 171 | |
| 172 | $lightbox = sprintf( |
| 173 | '<amp-lightbox id="%1$s" on="%2$s" class="eventbrite__lightbox" layout="nodisplay">%3$s</amp-lightbox>', |
| 174 | esc_attr( $lightbox_id ), |
| 175 | esc_attr( "tap:{$lightbox_id}.close" ), |
| 176 | sprintf( |
| 177 | ' |
| 178 | <div class="eventbrite__lighbox-inside"> |
| 179 | <div class="eventbrite__lighbox-iframe-wrapper"> |
| 180 | <amp-iframe class="eventbrite__lighbox-iframe" src="%s" layout="fill" sandbox="allow-scripts allow-same-origin allow-forms"> |
| 181 | <span placeholder=""></span> |
| 182 | </amp-iframe> |
| 183 | <span class="eventbrite__lighbox-close" on="%s" role="button" tabindex="0" aria-label="%s"> |
| 184 | <svg viewBox="0 0 24 24"> |
| 185 | <path d="M13.4 12l3.5-3.5-1.4-1.4-3.5 3.5-3.5-3.5-1.4 1.4 3.5 3.5-3.5 3.5 1.4 1.4 3.5-3.5 3.5 3.5 1.4-1.4z"></path> |
| 186 | </svg> |
| 187 | </span> |
| 188 | </div> |
| 189 | </div> |
| 190 | ', |
| 191 | esc_url( $iframe_src ), |
| 192 | esc_attr( "tap:{$lightbox_id}.close" ), |
| 193 | esc_attr__( 'Close', 'jetpack' ) |
| 194 | ) |
| 195 | ); |
| 196 | |
| 197 | $content = preg_replace( |
| 198 | ':(?=</div>\s*$):', |
| 199 | $lightbox, |
| 200 | $content |
| 201 | ); |
| 202 | |
| 203 | return $content; |
| 204 | } |
| 205 | |
| 206 | wp_enqueue_script( 'eventbrite-widget', 'https://www.eventbrite.com/static/widgets/eb_widgets.js', array(), JETPACK__VERSION, true ); |
| 207 | |
| 208 | // Show the modal version. |
| 209 | wp_add_inline_script( |
| 210 | 'eventbrite-widget', |
| 211 | "window.EBWidgets.createWidget( { |
| 212 | widgetType: 'checkout', |
| 213 | eventId: " . absint( $attr['eventId'] ) . ", |
| 214 | modal: true, |
| 215 | modalTriggerElementId: '" . esc_js( $widget_id ) . "', |
| 216 | } );" |
| 217 | ); |
| 218 | |
| 219 | // Modal button is saved as an `<a>` element with `role="button"` because `<button>` is not allowed |
| 220 | // by WordPress.com wp_kses. This javascript adds the necessary event handling for button-like behavior. |
| 221 | // @link https://www.w3.org/TR/wai-aria-practices/examples/button/button.html. |
| 222 | wp_add_inline_script( |
| 223 | 'eventbrite-widget', |
| 224 | "( function() { |
| 225 | var widget = document.getElementById( '" . esc_js( $widget_id ) . "' ); |
| 226 | if ( widget ) { |
| 227 | widget.addEventListener( 'click', function( event ) { |
| 228 | event.preventDefault(); |
| 229 | } ); |
| 230 | |
| 231 | widget.addEventListener( 'keydown', function( event ) { |
| 232 | // Enter and space keys. |
| 233 | if ( event.keyCode === 13 || event.keyCode === 32 ) { |
| 234 | event.preventDefault(); |
| 235 | event.target && event.target.click(); |
| 236 | } |
| 237 | } ); |
| 238 | } |
| 239 | } )();" |
| 240 | ); |
| 241 | |
| 242 | // Replace the placeholder id saved in the post_content with a unique id used by widget.js. |
| 243 | $content = str_replace( 'eventbrite-widget-id', esc_attr( $widget_id ), $content ); |
| 244 | |
| 245 | // Fallback for block version deprecated/v2. |
| 246 | $content = preg_replace( '/eventbrite-widget-\d+/', esc_attr( $widget_id ), $content ); |
| 247 | |
| 248 | // Inject URL to event in case the JS for the lightbox fails to load. |
| 249 | $content = preg_replace( |
| 250 | '/\shref="#"/', |
| 251 | sprintf( |
| 252 | ' href="%s" rel="noopener noreferrer" target="_blank"', |
| 253 | esc_url( $attr['url'] ) |
| 254 | ), |
| 255 | $content |
| 256 | ); |
| 257 | |
| 258 | return $content; |
| 259 | } |
| 260 |