diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js index 0e251a8f0aafd0..fcc305d9e8a7c3 100644 --- a/packages/block-library/src/embed/edit.js +++ b/packages/block-library/src/embed/edit.js @@ -61,13 +61,24 @@ export function getEmbedEditComponent( title, icon, responsive = true ) { if ( switchedPreview || switchedURL ) { if ( this.props.cannotEmbed ) { - // Can't embed this URL, and we've just received or switched the preview. + // We either have a new preview or a new URL, but we can't embed it. + if ( ! this.props.fetching ) { + // If we're not fetching the preview, then we know it can't be embedded, so try + // removing any trailing slash, and resubmit. + this.resubmitWithoutTrailingSlash(); + } return; } this.handleIncomingPreview(); } } + resubmitWithoutTrailingSlash() { + this.setState( ( prevState ) => ( { + url: prevState.url.replace( /\/$/, '' ), + } ), this.setUrl ); + } + setUrl( event ) { if ( event ) { event.preventDefault(); diff --git a/packages/e2e-tests/specs/embedding.test.js b/packages/e2e-tests/specs/embedding.test.js index 4433531316109e..6fb26c02281c70 100644 --- a/packages/e2e-tests/specs/embedding.test.js +++ b/packages/e2e-tests/specs/embedding.test.js @@ -62,6 +62,10 @@ const MOCK_BAD_WORDPRESS_RESPONSE = { }; const MOCK_RESPONSES = [ + { + match: createEmbeddingMatcher( 'https://wordpress.org/gutenberg/handbook' ), + onRequestMatch: createJSONResponse( MOCK_BAD_WORDPRESS_RESPONSE ), + }, { match: createEmbeddingMatcher( 'https://wordpress.org/gutenberg/handbook/' ), onRequestMatch: createJSONResponse( MOCK_BAD_WORDPRESS_RESPONSE ), @@ -82,6 +86,10 @@ const MOCK_RESPONSES = [ match: createEmbeddingMatcher( 'https://twitter.com/notnownikki' ), onRequestMatch: createJSONResponse( MOCK_EMBED_RICH_SUCCESS_RESPONSE ), }, + { + match: createEmbeddingMatcher( 'https://twitter.com/notnownikki/' ), + onRequestMatch: createJSONResponse( MOCK_CANT_EMBED_RESPONSE ), + }, { match: createEmbeddingMatcher( 'https://twitter.com/thatbunty' ), onRequestMatch: createJSONResponse( MOCK_BAD_EMBED_PROVIDER_RESPONSE ), @@ -175,6 +183,17 @@ describe( 'Embedding content', () => { expect( await getEditedPostContent() ).toMatchSnapshot(); } ); + it( 'should retry embeds that could not be embedded with trailing slashes, without the trailing slashes', async () => { + await clickBlockAppender(); + await page.keyboard.type( '/embed' ); + await page.keyboard.press( 'Enter' ); + // This URL can't be embedded, but without the trailing slash, it can. + await page.keyboard.type( 'https://twitter.com/notnownikki/' ); + await page.keyboard.press( 'Enter' ); + // The twitter block should appear correctly. + await page.waitForSelector( 'figure.wp-block-embed-twitter' ); + } ); + it( 'should allow the user to try embedding a failed URL again', async () => { // URL that can't be embedded. await clickBlockAppender();