From b9bbeebe2b69b79bd77201317451f36bcb1a4c53 Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Fri, 14 Feb 2020 17:42:46 +0000
Subject: [PATCH] Fix: Only apply editor sketelon html element styles when the
 component is rendered

---
 .../src/components/editor-skeleton/index.js      | 16 ++++++++++++++++
 .../src/components/editor-skeleton/style.scss    |  2 +-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/editor-skeleton/index.js b/packages/block-editor/src/components/editor-skeleton/index.js
index f95ad556fe525..5b566f87221ff 100644
--- a/packages/block-editor/src/components/editor-skeleton/index.js
+++ b/packages/block-editor/src/components/editor-skeleton/index.js
@@ -6,9 +6,24 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { useEffect } from '@wordpress/element';
 import { navigateRegions } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
+function useHTMLClass( className ) {
+	useEffect( () => {
+		const element =
+			document && document.querySelector( `html:not(.${ className }` );
+		if ( ! element ) {
+			return;
+		}
+		element.classList.toggle( className );
+		return () => {
+			element.classList.toggle( className );
+		};
+	}, [ className ] );
+}
+
 function EditorSkeleton( {
 	footer,
 	header,
@@ -17,6 +32,7 @@ function EditorSkeleton( {
 	publish,
 	className,
 } ) {
+	useHTMLClass( 'block-editor-editor-skeleton__html-container' );
 	return (
 		<div
 			className={ classnames(
diff --git a/packages/block-editor/src/components/editor-skeleton/style.scss b/packages/block-editor/src/components/editor-skeleton/style.scss
index b269269b05199..fe20befd2089b 100644
--- a/packages/block-editor/src/components/editor-skeleton/style.scss
+++ b/packages/block-editor/src/components/editor-skeleton/style.scss
@@ -1,6 +1,6 @@
 // On Mobile devices, swiping the HTML element should not scroll.
 // By making it fixed, we prevent that.
-html {
+html.block-editor-editor-skeleton__html-container {
 	position: fixed;
 	width: 100%;