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