diff --git a/e2e/embed-content.spec.js b/e2e/embed-content.spec.js index adb56fe09..fe870d6cd 100644 --- a/e2e/embed-content.spec.js +++ b/e2e/embed-content.spec.js @@ -107,7 +107,7 @@ test.describe( 'Embedded Content', () => { expect( blocks[ 0 ].attributes.providerNameSlug ).toBe( 'youtube' ); } ); - test( 'should show a fallback link for a non-embeddable URL', async ( { + test( 'should store no preview for a non-embeddable URL', async ( { page, } ) => { const editor = new EditorPage( page ); @@ -123,16 +123,13 @@ test.describe( 'Embedded Content', () => { await urlInput.fill( 'https://example.com/not-embeddable' ); await page.keyboard.press( 'Enter' ); - // Wait for the embed to resolve (or fall back). - // The block should still render with the URL attribute. + // The proxy answers 404, so core stores `false` for the preview + // rather than a preview object. await page.waitForFunction( - () => { - const blocks = window.wp.data - .select( 'core/block-editor' ) - .getBlocks(); - return blocks[ 0 ]?.attributes?.url; - }, - null, + ( url ) => + window.wp.data.select( 'core' ).getEmbedPreview( url ) === + false, + 'https://example.com/not-embeddable', { timeout: 30_000 } ); diff --git a/src/utils/api-fetch.js b/src/utils/api-fetch.js index d136c3a38..d08aa9431 100644 --- a/src/utils/api-fetch.js +++ b/src/utils/api-fetch.js @@ -1,5 +1,4 @@ import apiFetch from '@wordpress/api-fetch'; -import { getQueryArg } from '@wordpress/url'; import { __ } from '@wordpress/i18n'; import { getGBKit, POST_FALLBACKS } from './bridge'; import { info, warn, error as logError } from './logger'; @@ -454,56 +453,35 @@ function mediaPermissionsMiddleware( options, next ) { * Remove the wrapping element from the oEmbed response, as it breaks * Gutenberg's sizing styles. * + * A failed request is left to reject, so core stores `false` and blocks that + * poll for a preview (e.g. VideoPress while processing an upload) ask again. + * * @type {APIFetchMiddleware} * * @todo Hoist this host-specific logic to the host app. */ function transformOEmbedApiResponse( options, next ) { if ( options.path && options.path.indexOf( 'oembed' ) !== -1 ) { - const url = getQueryArg( options.path, 'url' ); - const response = next( options, next ); - - /** - * Creates an embed response emulating core's fallback link. - */ - function createFallbackResponse() { - const link = document.createElement( 'a' ); - link.href = url; - link.innerText = url; - return { - html: link.outerHTML, - type: 'rich', - provider_name: 'Embed', - }; - } - - return new Promise( ( resolve ) => { - response - .then( ( data ) => { - if ( data.html ) { - /** - * Removes wrappers from YouTube, Vimeo, Dailymotion, TED block, e.g. - * ,
,
,
- * and return just the ', + type: 'video', + } ); + + const preview = await apiFetch( { path: proxyPath } ); + + expect( preview.html ).toBe( + '' + ); + } ); + + it( 'returns other embed markup as WordPress sent it', async () => { + const html = + 'https://example.com/post'; + respondWith( { html, type: 'rich' } ); + + const preview = await apiFetch( { path: proxyPath } ); + + expect( preview ).toEqual( { html, type: 'rich' } ); + } ); + } ); } );