diff --git a/packages/block-library/src/embed/editor.scss b/packages/block-library/src/embed/editor.scss
index 29cbd9fb932cff..af0b050764ce77 100644
--- a/packages/block-library/src/embed/editor.scss
+++ b/packages/block-library/src/embed/editor.scss
@@ -31,3 +31,12 @@
word-break: break-word;
}
}
+
+.block-library-embed__interactive-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ opacity: 0;
+}
diff --git a/packages/block-library/src/embed/embed-preview.js b/packages/block-library/src/embed/embed-preview.js
index efc11b7a5809ba..cf8d35460ae3df 100644
--- a/packages/block-library/src/embed/embed-preview.js
+++ b/packages/block-library/src/embed/embed-preview.js
@@ -17,58 +17,101 @@ import classnames from 'classnames/dedupe';
import { __, sprintf } from '@wordpress/i18n';
import { Placeholder, SandBox } from '@wordpress/components';
import { RichText, BlockIcon } from '@wordpress/editor';
+import { Component } from '@wordpress/element';
/**
* Internal dependencies
*/
import WpEmbedPreview from './wp-embed-preview';
-const EmbedPreview = ( props ) => {
- const { preview, url, type, caption, onCaptionChange, isSelected, className, icon, label } = props;
- const { scripts } = preview;
+class EmbedPreview extends Component {
+ constructor() {
+ super( ...arguments );
+ this.hideOverlay = this.hideOverlay.bind( this );
+ this.state = {
+ interactive: false,
+ };
+ }
- const html = 'photo' === type ? getPhotoHtml( preview ) : preview.html;
- const parsedHost = parse( url ).host.split( '.' );
- const parsedHostBaseUrl = parsedHost.splice( parsedHost.length - 2, parsedHost.length - 1 ).join( '.' );
- const cannotPreview = includes( HOSTS_NO_PREVIEWS, parsedHostBaseUrl );
- // translators: %s: host providing embed content e.g: www.youtube.com
- const iframeTitle = sprintf( __( 'Embedded content from %s' ), parsedHostBaseUrl );
- const sandboxClassnames = classnames( type, className, 'wp-block-embed__wrapper' );
+ static getDerivedStateFromProps( nextProps, state ) {
+ if ( ! nextProps.isSelected && state.interactive ) {
+ // We only want to change this when the block is not selected, because changing it when
+ // the block becomes selected makes the overlap disappear too early. Hiding the overlay
+ // happens on mouseup when the overlay is clicked.
+ return { interactive: false };
+ }
- const embedWrapper = 'wp-embed' === type ? (
-