diff --git a/packages/block-library/src/embed/edit.js b/packages/block-library/src/embed/edit.js index 28902020c75e8..2945fb0fbe888 100644 --- a/packages/block-library/src/embed/edit.js +++ b/packages/block-library/src/embed/edit.js @@ -29,6 +29,7 @@ import { useDispatch, useSelect } from '@wordpress/data'; import { useBlockProps } from '@wordpress/block-editor'; import { store as coreStore } from '@wordpress/core-data'; import { View } from '@wordpress/primitives'; +import { getAuthority } from '@wordpress/url'; const EmbedEdit = ( props ) => { const { @@ -137,6 +138,20 @@ const EmbedEdit = ( props ) => { setAttributes( { url: newURL } ); }, [ preview?.html, attributesUrl, cannotEmbed, fetching ] ); + // Try a different provider in case the embed url is not supported. + useEffect( () => { + if ( ! cannotEmbed || fetching || ! url ) { + return; + } + + // Until X provider is supported in WordPress, as a workaround we use Twitter provider. + if ( getAuthority( url ) === 'x.com' ) { + const newURL = new URL( url ); + newURL.host = 'twitter.com'; + setAttributes( { url: newURL.toString() } ); + } + }, [ url, cannotEmbed, fetching, setAttributes ] ); + // Handle incoming preview. useEffect( () => { if ( preview && ! isEditingURL ) { diff --git a/packages/block-library/src/embed/edit.native.js b/packages/block-library/src/embed/edit.native.js index eec991c7b2037..a04e49fbd6d54 100644 --- a/packages/block-library/src/embed/edit.native.js +++ b/packages/block-library/src/embed/edit.native.js @@ -33,6 +33,7 @@ import { } from '@wordpress/block-editor'; import { store as coreStore } from '@wordpress/core-data'; import { View } from '@wordpress/primitives'; +import { getAuthority } from '@wordpress/url'; // The inline preview feature will be released progressible, for this reason // the embed will only be considered previewable for the following providers list. @@ -160,6 +161,20 @@ const EmbedEdit = ( props ) => { setAttributes( { url: newURL } ); }, [ preview?.html, url, cannotEmbed, fetching ] ); + // Try a different provider in case the embed url is not supported. + useEffect( () => { + if ( ! cannotEmbed || fetching || ! url ) { + return; + } + + // Until X provider is supported in WordPress, as a workaround we use Twitter provider. + if ( getAuthority( url ) === 'x.com' ) { + const newURL = new URL( url ); + newURL.host = 'twitter.com'; + setAttributes( { url: newURL.toString() } ); + } + }, [ url, cannotEmbed, fetching, setAttributes ] ); + // Handle incoming preview. useEffect( () => { if ( preview && ! isEditingURL ) { diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index 504bad70c8057..df489757dd6bd 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -12,6 +12,7 @@ For each user feature we should also add a importance categorization label to i ## Unreleased - [*] Limit inner blocks nesting depth to avoid call stack size exceeded crash [#54382] - [*] Prevent crashes when setting an invalid media URL for Video or Audio blocks [#54834] +- [**] Fallback to Twitter provider when embedding X URLs [#54876] ## 1.104.0 - [*] Fix the obscurred "Insert from URL" input for media blocks when using a device in landscape orientation. [#54096]