Add an overlay to the html block preview to fix block selection in Fi…

…refox (#20425)

* Stop clicks to focus being trapped in sandboxed iframe so block can be reselected

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 }

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;