From 41a0d8bd9164c683050a1c32e2fdfd2c4e84feff Mon Sep 17 00:00:00 2001
From: Glen Davies <glendaviesnz@users.noreply.github.com>
Date: Thu, 27 Feb 2020 11:49:29 +1300
Subject: [PATCH] Add an overlay to the html block preview to fix block
 selection in Firefox (#20425)

* Stop clicks to focus being trapped in sandboxed iframe so block can be reselected
---
 packages/block-library/src/html/edit.js     | 18 ++++++++++++++----
 packages/block-library/src/html/editor.scss |  8 ++++++++
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/html/edit.js b/packages/block-library/src/html/edit.js
index 0004d72601b76b..206ccbac5cca21 100644
--- a/packages/block-library/src/html/edit.js
+++ b/packages/block-library/src/html/edit.js
@@ -76,10 +76,20 @@ class HTMLEdit extends Component {
 				<Disabled.Consumer>
 					{ ( isDisabled ) =>
 						isPreview || isDisabled ? (
-							<SandBox
-								html={ attributes.content }
-								styles={ styles }
-							/>
+							<>
+								<SandBox
+									html={ attributes.content }
+									styles={ styles }
+								/>
+								{ /*	
+									An overlay is added when the block is not selected in order to register click events. 
+									Some browsers do not bubble up the clicks from the sandboxed iframe, which makes it 
+									difficult to reselect the block. 
+								*/ }
+								{ ! this.props.isSelected && (
+									<div className="block-library-html__preview-overlay"></div>
+								) }
+							</>
 						) : (
 							<PlainText
 								value={ attributes.content }
diff --git a/packages/block-library/src/html/editor.scss b/packages/block-library/src/html/editor.scss
index 2638318a4b7391..e8f879731833f2 100644
--- a/packages/block-library/src/html/editor.scss
+++ b/packages/block-library/src/html/editor.scss
@@ -1,6 +1,14 @@
 .wp-block-html {
 	margin-bottom: $default-block-margin;
 
+	.block-library-html__preview-overlay {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		left: 0;
+	}
+
 	.block-editor-plain-text {
 		font-family: $editor-html-font;
 		color: $dark-gray-800;