Eventbrite Block: No error message with invalid urls

[creativecoder]

Steps to reproduce the issue

1. Add the Eventbrite block in a post or page
2. For the event url, use something that won't embed, like https://eventbrite.com

What I expected

An error message and option to "Convert block to link" below the event url

What happened instead

No error message

Screenshots

[creativecoder]

Looks like the layout issue is fixed in Gutenberg, but not yet released WordPress/gutenberg#19673

We still need to add the outline to the Embed and Convert block to link buttons here, though.

[jeherve]

Since this also impacts core embeds, I would be tempted to wait until the fix makes it to a stable version of Gutenberg soon.

We still need to add the outline to the Embed and Convert block to link buttons here, though.

Does this mean switching to a different button style (secondary)?

[stale]

This issue has been marked as stale. This happened because:

• It has been inactive in the past 6 months.
• It hasn’t been labeled `[Pri] Blocker`, `[Pri] High`.

No further action is needed. But it's worth checking if this ticket has clear reproduction steps and it is still reproducible. Feel free to close this issue if you think it's not valid anymore — if you do, please add a brief explanation.

[creativecoder]

Looks like there's now no error message showing for the Eventbrite block with invalid urls. I've updated the issue title and description.

[ivan-ottinger]

I have tested the issue and it looks like that the setErrorNotice():

jetpack/projects/plugins/jetpack/extensions/blocks/eventbrite/edit.js

Lines 76 to 89 in 8f30c2c

	setErrorNotice = () => {
	const { noticeOperations, onReplace } = this.props;
	const { editedUrl } = this.state;
	noticeOperations.removeAllNotices();
	noticeOperations.createErrorNotice(
	<>
	{ __( 'Sorry, this content could not be embedded.', 'jetpack' ) }{ ' ' }
	<Button isLink onClick={ () => convertToLink( editedUrl, onReplace ) }>
	{ _x( 'Convert block to link', 'button label', 'jetpack' ) }
	</Button>
	</>
	);
	};

is called only when the testEmbedUrl promise fails:

jetpack/projects/plugins/jetpack/extensions/blocks/eventbrite/edit.js

Lines 67 to 70 in 8f30c2c

	.catch( () => {
	setAttributes( { eventId: undefined, url: undefined } );
	this.setErrorNotice();
	} );

But this depends on the responseStatusCode (in test-embed-url.js):

jetpack/projects/plugins/jetpack/extensions/shared/test-embed-url.js

Lines 28 to 44 in 8f30c2c

	return new Promise( ( resolve, reject ) => {
	apiFetch( { path: `/wpcom/v2/resolve-redirect/?url=${ encodeURIComponent( url ) }` } ).then(
	response => {
	setIsResolvingUrl( false );
	const responseStatusCode = response.status ? parseInt( response.status, 10 ) : null;
	if ( responseStatusCode && responseStatusCode >= 400 ) {
	reject();
	} else {
	resolve( response.url || url );
	}
	},
	() => {
	setIsResolvingUrl( false );
	reject();
	}
	);
	} );

and therefore only "really invalid" URLs, e.g. https://www.testtestevenbrite.com/ will display the error message. All other URLs, e.g. https://google.com won't return any error message.

[alshakero]

PR ready #21247