Fix: Conditionaly apply Editor Skeleton html element styles (#20245)

Author: jorgefilipecosta

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(

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%;