Retry failing embeds with trailing slash (#14705)

* Fix embedding Twitter URLs with a trailing slash (Closes #12664)

* Fix race condition for WordPress URLs that end in slashes, add test

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();

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();