Fix focus issue on embed block (#517)

* Fix focus issue on embed block
* Add invisible iframe overlay to prevent clicking iframed controls

Author: ellatrix

blocks/library/embed/index.js

@@ -19,17 +19,21 @@ registerBlock( 'core/embed', {
 		caption: children( 'figcaption' )
 	},
 
-	edit( { attributes, isSelected, setAttributes } ) {
+	edit( { attributes, setAttributes, focus, setFocus } ) {
 		const { url, title, caption } = attributes;
 
 		return (
 			<figure>
-				<iframe src={ url } title={ title } />
-				{ caption || isSelected ? (
+				<div className="iframe-overlay">
+					<iframe src={ url } title={ title } />
+				</div>
+				{ caption || !! focus ? (
 					<Editable
 						tagName="figcaption"
 						placeholder={ wp.i18n.__( 'Write caption…' ) }
 						value={ caption }
+						focus={ focus }
+						onFocus={ setFocus }
 						onChange={ ( value ) => setAttributes( { caption: value } ) } />
 				) : null }
 			</figure>

editor/modes/visual-editor/style.scss

@@ -36,6 +36,24 @@
 	&.is-selected:before {
 		border-color: $light-gray-500;
 	}
+
+	.iframe-overlay {
+		position: relative;
+	}
+
+	.iframe-overlay:before {
+		content: '';
+		display: block;
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+	}
+
+	&.is-selected .iframe-overlay:before {
+		display: none;
+	}
 }
 
 .editor-visual-editor__block-controls {

languages/gutenberg.pot

@@ -19,7 +19,7 @@ msgstr ""
 msgid "Embed"
 msgstr ""
 
-#: blocks/library/embed/index.js:31
+#: blocks/library/embed/index.js:33
 #: blocks/library/image/index.js:81
 msgid "Write caption…"
 msgstr ""