Eventbrite block #14075

creativecoder · 2019-11-19T17:33:26Z

Changes proposed in this Pull Request:

Adds jetpack/eventbrite block

Is this a new feature or does it add/remove features to an existing part of Jetpack?

New feature, see pb5gDS-aZ-p2

The goal is to release it as a beta block first, in Jetpack 8.2.

Testing instructions:

Inserting the block

Make sure beta blocks are enabled define( 'JETPACK_BETA_BLOCKS', true );
Insert the Eventbrite block in a page or post and paste an Eventbrite checkout embed code
Save the page/post
Eventbrite event embed should display in the page/post content
Custom eventbrite urls should also work.
Test In-page and Modal embed types.

Transforms

Paste an Eventbrite event url into the block inserter (regular or custom)
The block should transform into an Eventbrite block

Invalid URLs

Insert an Eventbrite block
Paste a URL that isn't an Eventbrite event, or an event that doesn't exist
You should see an error and an option to convert the block into a link

Proposed changelog entry for your changes:

Block editor: added an Eventbrite block to embed event checkout

matticbot · 2019-11-19T17:33:32Z

Caution: This PR has changes that must be merged to WordPress.com
Hello creativecoder! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer, review, and approve D35679-code before merging this PR. Thank you!

jetpackbot · 2019-11-19T17:52:42Z

Thank you for the great PR description!

When this PR is ready for review, please apply the [Status] Needs Review label. If you are an a11n, please have someone from your team review the code if possible. The Jetpack team will also review this PR and merge it to be included in the next Jetpack release.

Scheduled Jetpack release: February 11, 2020.
Scheduled code freeze: February 4, 2020

Generated by 🚫 dangerJS against 338da38

matticbot · 2019-11-19T20:50:38Z

creativecoder, Your synced wpcom patch D35679-code has been updated.

matticbot · 2019-11-19T21:29:36Z

creativecoder, Your synced wpcom patch D35679-code has been updated.

matticbot · 2019-11-20T00:07:11Z

creativecoder, Your synced wpcom patch D35679-code has been updated.

creativecoder · 2019-11-20T00:17:28Z

@pento I'm haven't yet successfully generated the embed output from the save function in index.js.

I originally tried to use <SandBox>, though the iframe content always ends up empty, I think because of the way the content is inserted with document.write, but I haven't verified that.
Current approach attempts using dangerouslySetInnerHTML is not working

(I suppose we could always fall back to a PHP rendered, if necessary)

matticbot · 2019-11-20T06:12:11Z

creativecoder, Your synced wpcom patch D35679-code has been updated.

pento · 2019-11-20T06:14:35Z

We need to render this block in PHP, as the <script> tag can't be saved to the post content.

Using a combination of wp_enqueue_script() and wp_add_inline_script() ensures that eb_widgets.js is only loaded once, and that the widgets are initialised after that script is loaded.

creativecoder · 2019-11-20T18:39:36Z

We need to render this block in PHP, as the <script> tag can't be saved to the post content.

Of course 🤦‍♂ !

matticbot · 2019-11-21T05:58:06Z

creativecoder, Your synced wpcom patch D35679-code has been updated.

matticbot · 2019-11-22T05:46:46Z

creativecoder, Your synced wpcom patch D35679-code has been updated.

matticbot · 2019-11-22T06:48:53Z

creativecoder, Your synced wpcom patch D35679-code has been updated.

matticbot · 2019-11-22T07:00:00Z

creativecoder, Your synced wpcom patch D35679-code has been updated.

matticbot · 2019-11-22T11:32:10Z

creativecoder, Your synced wpcom patch D35679-code has been updated.

pento · 2019-12-13T07:59:18Z

I've been playing around with WordPress/gutenberg#19113 today, which would expose Gutenberg's embed block scaffolding, which we could then make use of here.

Of course, Jetpack has back compat requirements, so we can't just start using it, but as this is a new package, I was thinking it would be worth investigating whether we could ship it with Jetpack, and load it on older WordPress versions, where @wordpress/embed-block isn't available.

creativecoder · 2019-12-14T03:46:10Z

I've been playing around with WordPress/gutenberg#19113 today, which would expose Gutenberg's embed block scaffolding, which we could then make use of here.

@pento Given the number of embeds we're working on, that seems like a great idea.

I tried all manner of npm link, yarn link and file:../ imports to try and use @wordpress/embed-block package from the gutenberg repo in jetpack, but couldn't get any of them to work.

I ended up symlinking extensions/blocks/embed-block in jetpack to the packages/embed-block/src/ folder in the gutenberg repo to get things working locally.

I started with importing the EmbedPreview block, but it's not working at the moment (haven't had much time to look into it yet).

pento · 2019-12-16T02:59:58Z

I've updated the PR to use @wordpress/embed-block.

Note that, at the moment, this PR requires the Gutenberg plugin to be installed and activated: loading @wordpress/embed-block against the block editor in Core causes all sorts of weirdness. 🙂

For running a Docker environment with Jetpack and Gutenberg, I use the Jetpack environment, with a custom docker-compose.jetpack.yml file:

version: '3.3'
services:
  wordpress:
    volumes:
      - /Users/pento/Projects/gutenberg:/var/www/html/wp-content/plugins/gutenberg

I start the environment with this command in the Jetpack directory:

yarn docker:compose -f ../docker-compose.jetpack.yml up -d

pento · 2019-12-16T03:02:01Z

extensions/blocks/eventbrite/eventbrite.php

+ * @param  WP_REST_Request           $request  Request used to generate the response.
+ * @return WP_HTTP_Response|object|WP_Error    The REST Request response.
+ */
+function jetpack_filter_oembed_result( $response, $handler, $request ) {


This is copied from the Gutenberg plugin, because embeds fail when the plugin isn't enabled, as Core currently only allows proper oEmbeds to use this REST API endpoint.

I've left it in for now, (even though the PR doesn't run without the plugin), so I don't forget and wonder why everything doesn't work sometime later. 🙃

creativecoder · 2019-12-16T21:47:28Z

For running a Docker environment with Jetpack and Gutenberg, I use the Jetpack environment, with a custom docker-compose.jetpack.yml file:

@pento Thanks for the instructions--this worked for me without issue. (I wasn't thinking about the @wordpress/embed-block to wp.embedBlock conversion during build--I think that's why I was having so much trouble.)

Here's a quick screen capture of how this works, for posterity.

creativecoder · 2019-12-16T21:51:08Z

@davemart-in See above. Moving to the embed block style means we're using the event URL rather than an embed code snippet--my hunch is that this will be easier for users, but wanted to flag for you since it's different than the original design mockup. Options, like to use the checkout embed as a modal or inline, will be in the sidebar.

creativecoder · 2019-12-16T23:48:54Z

@pento I've updated with a Pinterest copy/paste 😄

Still to do

EVENTBRITE_URL_REGEX and URL_REGEX are not tested
Extract event id from url
We need an Eventbrite icon
The embed preview in the block
Figure out modal button options

pento · 2019-12-17T07:53:01Z

Thanks for the start, @creativecoder! Here's what I got done today:

Added an icon.
As you suggested, renamed the block to "Eventbrite Tickets". Perhaps "Eventbrite Checkout" would be better, since tickets is kind of ambiguous for a service that sells tickets?
Previews in the editor now work.
The widget now displays on the published page.

Some issues I didn't get to address during my day:

Switching the widget type between Modal and Inline doesn't resize the block correctly.
Something is causing a scrollbar in the Inline preview.
The Modal preview has no styling.
cannotEmbed should be set by testing against the URL regex.

Copons · 2020-01-23T18:00:04Z

I think I've addressed all the things! ✨

jeherve

I think 25e0fb9 may have broken things a bit. I can't seem to get a matching event ID from links like:

https://www.eventbrite.com/e/dex-songwriting-expo-tickets-71249967571?aff=ebdshpfprimarybucket

Does it work for you?

The redirect returns the expected response:

{"url":"https:\/\/www.eventbrite.com\/e\/dex-songwriting-expo-tickets-71249967571","status":200}

But no event ID gets set as a block attribute after that.

Copons · 2020-01-24T11:48:05Z

Oooh awesome catch @jeherve!
It was caused by the fact that the ID regex /(\d+)\/?\s*$/ matches groups of numbers at the end of the string, and of course fails when the URL has any other chars after the ID, such as query params.

The resolveUrl method takes care of stripping the query off the URL.
Before, it wasn't a big deal, because the regex was only used at the end of the whole process, on the final URL.

My update instead used the regex as soon as the URL was inserted in the input field, which is before resolveUrl, and I totally missed that the URL was set again inside resolveUrl as well.

In 338da38 I've added eventId to the setAttributes inside resolveUrl, and now it works with Eventbrite URLs with query params as well.

jeherve

I have a few last comments, but I don't think any of those are blockers for a first release. Let's try to address those in follow-up PRs?

jeherve · 2020-01-24T12:13:07Z

extensions/blocks/eventbrite/edit.js

+import './editor.scss';
+
+const MODAL_BUTTON_STYLES = [
+	{ name: 'fill', label: __( 'Fill' ), isDefault: true },


You'll probably want to make those strings translatable. That's not a blocker though, can be done later.

Tracked by #14458

extensions/blocks/eventbrite/edit.js

jeherve · 2020-01-24T12:18:44Z

extensions/blocks/eventbrite/edit.js

+					</form>
+
+					<div className="components-placeholder__learn-more">
+						<ExternalLink href="http://en.support.wordpress.com/wordpress-editor/blocks/eventbrite-block/">


We'll need a conditional here so we can have 2 support links, e.g.

jetpack/extensions/blocks/markdown/index.js

Line 24 in 96d06ee

const supportLink =

Tracked by #14459

jeherve · 2020-01-24T12:28:13Z

extensions/blocks/eventbrite/index.js

+	},
+	edit,
+	save,
+	transforms: {


This is not working for me for some reason:

https://videopress.com/v/zm4Bbdrg

Tracked by #14460

jeherve · 2020-01-24T12:32:53Z

extensions/blocks/eventbrite/save.js

+	);
+}
+
+export default function save( { attributes } ) {


I think it would be nice to return a link to the event inside the div / button. Right now, the empty container won't be of much help in subscription emails or if Jetpack gets deactivated.

<div class="wp-block-jetpack-eventbrite"><button id="eventbrite-widget-88665223069" class="wp-block-button__link" type="button">Test one two</button></div>

<div id="eventbrite-widget-88665223069" class="wp-block-jetpack-eventbrite"></div>

Tracked by #14462

jeherve · 2020-01-24T13:02:20Z

Ran into another issue when testing:

#14461

jeherve · 2020-01-24T13:07:00Z

r202093-wpcom

* [not verified] Remove empty readme section * Initial changelog for 8.2 * Changelog: add #14220 * Changelog: add #14252 * Changelog: add #14291 * Changelog: add #14309 * Changelog: add #14304 * Changelog: add general connection log. * Changelog: add #14275 * Changelog: add #14313 * Changelog: add #14213 * Changelog: add #14357 * Add sync testing instructions * Add 8.1.1 changelog back See eeaafab and 61757eb * Changelog: add #14371 * Changelog: add #14386 * Changelog: add #14471 * Changelog: add #14325 * Changelog: add #14194 * Changelog: add #14340 * Changelog: add #14418 * Changelog: add #14417 * Changelog: add #14075 * Changelog: add #14467 * Changelog: add #14307 * Changelog: add #14326

creativecoder added [Status] In Progress [Type] Feature Request [Block] Eventbrite labels Nov 19, 2019

creativecoder requested a review from a team November 19, 2019 17:33

creativecoder self-assigned this Nov 19, 2019

matticbot added the Touches WP.com Files label Nov 19, 2019

jeherve added the [Focus] Blocks Issues related to the block editor, aka Gutenberg, and its extensions developed in Jetpack label Nov 19, 2019

creativecoder assigned pento Nov 20, 2019

pento reviewed Dec 16, 2019

View reviewed changes

Copons added 3 commits January 23, 2020 17:25

Remove unnecessary change to the Webpack config

b3d6e74

Improve the URL redirects endpoint

1691393

Save the event ID as block attribute

25e0fb9

Copons added [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. and removed [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! labels Jan 23, 2020

jeherve reviewed Jan 24, 2020

View reviewed changes

jeherve added [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! and removed [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. labels Jan 24, 2020

Also update the event ID on url resolve

338da38

Copons added [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. and removed [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! labels Jan 24, 2020

Copons self-assigned this Jan 24, 2020

jeherve approved these changes Jan 24, 2020

View reviewed changes

jeherve added [Status] Ready to Merge Go ahead, you can push that green button! and removed [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. labels Jan 24, 2020

jeherve merged commit 5fcf116 into master Jan 24, 2020

jeherve deleted the add/eventbrite-block branch January 24, 2020 12:38

matticbot added [Status] Needs Changelog and removed [Status] Ready to Merge Go ahead, you can push that green button! labels Jan 24, 2020

jeherve added the [Status] Needs Testing We need to add this change to the testing call for this month's release label Jan 24, 2020

jeherve added [Status] Has Changelog and removed [Status] Needs Changelog [Status] Needs Testing We need to add this change to the testing call for this month's release labels Jan 27, 2020

jeherve added a commit that referenced this pull request Jan 27, 2020

Changelog: add #14075

a0815bc

Copons mentioned this pull request Jan 31, 2020

Eventbrite and OpenTable Blocks: Increase specificity of the Inserter preview CSS to avoid conflicts #14540

Merged

Eventbrite block #14075

Eventbrite block #14075

Conversation

creativecoder commented Nov 19, 2019 • edited Loading

Changes proposed in this Pull Request:

Is this a new feature or does it add/remove features to an existing part of Jetpack?

Testing instructions:

Proposed changelog entry for your changes:

matticbot commented Nov 19, 2019

jetpackbot commented Nov 19, 2019 • edited Loading

matticbot commented Nov 19, 2019

matticbot commented Nov 19, 2019

matticbot commented Nov 20, 2019

creativecoder commented Nov 20, 2019

matticbot commented Nov 20, 2019

pento commented Nov 20, 2019

creativecoder commented Nov 20, 2019

matticbot commented Nov 21, 2019

matticbot commented Nov 22, 2019

matticbot commented Nov 22, 2019

matticbot commented Nov 22, 2019

matticbot commented Nov 22, 2019

pento commented Dec 13, 2019

creativecoder commented Dec 14, 2019

pento commented Dec 16, 2019

Choose a reason for hiding this comment

creativecoder commented Dec 16, 2019

creativecoder commented Dec 16, 2019

creativecoder commented Dec 16, 2019 • edited Loading

pento commented Dec 17, 2019

Copons commented Jan 23, 2020 • edited Loading

jeherve left a comment • edited Loading

Choose a reason for hiding this comment

Copons commented Jan 24, 2020

jeherve left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Copons Jan 24, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jeherve commented Jan 24, 2020

jeherve commented Jan 24, 2020

creativecoder commented Nov 19, 2019 •

edited

Loading

jetpackbot commented Nov 19, 2019 •

edited

Loading

creativecoder commented Dec 16, 2019 •

edited

Loading

Copons commented Jan 23, 2020 •

edited

Loading

jeherve left a comment •

edited

Loading

Copons Jan 24, 2020 •

edited

Loading